Differences
This shows you the differences between two versions of the page.
|
egc:setup-framework [2023/09/30 14:48] andrei.lambru |
egc:setup-framework [2024/09/30 14:24] (current) andrei.lambru |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ===== Setup framework de laborator ===== | ===== Setup framework de laborator ===== | ||
| - | În cadrul laboratorui de la materia Elemente de grafică pe calculator, vă vom pune la dispoziție un framework scris în C++, cu care veți lucra până la finalul semestrului. În plus, puteți utiliza acest framework inclusiv pentru realizarea temelor, lucru pe care îl și recomandăm. | + | În cadrul laboratorui de la materia Elemente de grafică pe calculator, vă vom pune la dispoziție un framework scris în limbajul de programare C++, cu care veți lucra până la finalul semestrului. În plus, puteți utiliza acest framework inclusiv pentru realizarea temelor, lucru pe care îl și recomandăm. |
| - | În această pagină se va explica felul în care se instalează dependințele framework-ului și cum se realizează setup-ul pentru a compila codul sursă al framework-ului și a porni aplicația rezultată. În particular, în această pagină, ne vom concentra în explicații pentru sistemul de operare Windows. Framework-ul poate fi compilat și pe siteme de operare UNIX/Linux și macOS. Mai multe detalii pentru utilizarea lui pe aceste sisteme de operare se pot găsi în fișierul README de pe [[https://github.com/UPB-Graphics/gfx-framework | pagina]] proiectului de GitHub. | + | În această pagină, se va explica felul în care se instalează dependințele framework-ului și cum se realizează setup-ul pentru a compila fișierele sursă din acesta și a porni aplicația rezultată. În particular, în această pagină, ne vom concentra în explicații pentru sistemul de operare Windows. Framework-ul poate fi compilat și pe siteme de operare UNIX/Linux și macOS. Mai multe detalii pentru utilizarea lui pe aceste sisteme de operare se pot găsi în fișierul README de pe [[https://github.com/UPB-Graphics/gfx-framework | pagina]] proiectului de GitHub. |
| ==== Descărcarea framework-ului ==== | ==== Descărcarea framework-ului ==== | ||
| - | Framework-ul se găsește pe GitHub și poate fi descărcat direct din interfața [[https://github.com/UPB-Graphics/gfx-framework | paginii]] proiectului de pe GitHub. Din această interfață, prin intermediul butonului **Code**, vizibil în figura de mai jos, se selectează opțiunea **Download ZIP** pentru descărcarea unei arhive cu proiectul. După dezarhivare, se va crea un director denumit //gfx-framework-master//. Un link direct către opțiunea de descărcare a arhivei este [[https://github.com/UPB-Graphics/gfx-framework/archive/refs/heads/master.zip | acesta]]. | + | Framework-ul se găsește pe GitHub și poate fi descărcat direct din interfața [[https://github.com/UPB-Graphics/gfx-framework | paginii]] proiectului. Din această interfață, prin intermediul butonului **Code**, vizibil în imaginea de mai jos, se selectează opțiunea **Download ZIP** pentru descărcarea unei arhive cu proiectul. După dezarhivare, se va crea un director denumit //gfx-framework-master//. Un link direct către opțiunea de descărcare a arhivei este [[https://github.com/UPB-Graphics/gfx-framework/archive/refs/heads/master.zip | acesta]]. |
| {{ :egc:laboratoare:setup1.png?600 |}} | {{ :egc:laboratoare:setup1.png?600 |}} | ||
| - | O alta optiune pentru descarcarea proiectului, in situatia in care sistemul de versionare git este instalat, este clonarea lui din CMD sau PowerShell, conform comenzii descrise mai jos. | + | O altă opțiune pentru descărcarea proiectului, în situația în care sistemul de versionare git este instalat, este clonarea lui din CMD sau PowerShell, conform comenzii: |
| <code> | <code> | ||
| Line 31: | Line 31: | ||
| </note> | </note> | ||
| - | După descarcărea executabilului și rularea lui, se va instala de fapt un hub, denumit **Visual Studio Installer**, din care se permite instalarea unor diferite module. În figura de mai jos, se poate vedea interfața acestui hub. În locul textului //Modify//, încadrat în chenarul roșu, la voi va fi textul //Install//. După instalarea unui modul, opțiunea se va transforma în Modify. Se selecteaza opțiunea Install/Modify. | + | După descarcărea fișierului de la adresa menționată mai sus și executarea lui, se va instala de fapt un hub, denumit **Visual Studio Installer**, din care se permite instalarea unor diferite module. În imaginea de mai jos, se poate vedea interfața acestui hub. În locul textului //Modify//, încadrat în chenarul roșu, la voi va fi textul //Install//. După instalarea unui modul, opțiunea se va transforma în Modify. Se selecteaza opțiunea **Install/Modify**. |
| {{ :egc:laboratoare:setup2.png?600 |}} | {{ :egc:laboratoare:setup2.png?600 |}} | ||
| - | După selectarea opțiunii, se va deschide un popup în interiorul ferestrei, ce va conține mai multe opțiuni de module pentru instalare. În acest laborator, este necesar doar modulul **Desktop development with C++**. Se bifează acest modul, prin selectarea chenarului în care se regăsește modulul (Pasul 1 din figura de mai jos). După bifarea lui, în partea dreaptă vor apărea mai multe componente ce fac parte din acest modul. Componentele bifate vor fi instalate, cele fără bifă nu. Pot fi lăsate cele selectate automat. Ultimul pas pentru instalarea mediului de dezvoltare este selecția butonului Install/Modify din partea dreaptă jos (Pasul 2 din figura următoare). | + | După selectarea opțiunii, se va deschide un popup în interiorul ferestrei, ce va conține mai multe opțiuni de module pentru instalare. În cadrul activităților practice de la această materie, este necesar doar modulul **Desktop development with C++**. Se bifează acest modul, prin selectarea chenarului în care se regăsește modulul (Pasul 1 din imaginea de mai jos). După bifarea lui, în partea dreaptă vor apărea mai multe componente ce fac parte din acest modul. Componentele bifate vor fi instalate, cele fără bifă nu. Pot fi lăsate cele selectate automat. Ultimul pas pentru instalarea mediului de dezvoltare este selecția butonului **Install/Modify** din partea dreaptă jos (Pasul 2 din imaginea următoare). |
| {{ :egc:laboratoare:setup3.png?600 |}} | {{ :egc:laboratoare:setup3.png?600 |}} | ||
| Line 41: | Line 41: | ||
| ==== Utilitarul CMake ==== | ==== Utilitarul CMake ==== | ||
| - | Codul sursă al framework-ului de laborator, descarcăt cu 2 pași anteriori, nu conține un proiect, reprezentat în general de un fișier special (Makefile în UNIX sau .sln pentru Visual Studio), pentru un anumit mediu de dezvoltare. Codul framework-ului de laborator permite să fie utilizat în orice astfel de mediu, motiv pentru care oferă un set de fișiere de configurare pentru generarea oricărui tip de proiect. Pentru a utiliza acest set de fișiere de configurare, este necesar un utilitar extern numit CMake. Acesta poate fi descărcat din [[https://cmake.org/download/ | pagina oficială]]. | + | Codul sursă din framework-ul de laborator, descărcat cu 2 pași anteriori, nu conține un proiect, reprezentat în general de un fișier special (Makefile în UNIX sau .sln pentru Visual Studio), pentru un anumit mediu de dezvoltare. Codul framework-ului de laborator permite să fie utilizat în orice astfel de mediu, motiv pentru care oferă un set de fișiere de configurare pentru generarea oricărui tip de proiect. Pentru a utiliza acest set de fișiere de configurare, este necesar un utilitar extern numit CMake. Acesta poate fi descărcat de pe [[https://cmake.org/download/ | pagina oficială]]. |
| - | După instalare, se poate porni utilitarul și se va deschide o fereastră cu interfața din figura de mai jos. Din această interfață, se generează proiectul pentru mediul de dezvoltare Visual Studio. Pentru acest proces, trebuie sa urmăm câțiva pași: | + | După instalare, se poate porni utilitarul și se va deschide o fereastră cu interfața din imaginea de mai jos. Din această interfață, se generează proiectul pentru mediul de dezvoltare Visual Studio. Pentru acest proces, trebuie sa urmăm câțiva pași: |
| - | - Se selectează calea unde se găsește codul sursă al framework-ului prin completarea câmpului text **Where is the source code** sau prin selectarea butonului **Browse Source** (Pasul 1 din figura de mai jos), care deschide o fereastră de navigare spre directorul respectiv. Aici trebuie specificat exact directorul dezarhivat cu 2 pasi anteriori: //gfx-framework-master//, nu alte directoare interne ale acestuia. {{ :egc:laboratoare:setup4.png?400 |}} | + | - Se selectează calea unde se găsește codul sursă al framework-ului prin completarea câmpului text **Where is the source code** sau prin selectarea butonului **Browse Source...** (Pasul 1 din imaginea de mai jos), care deschide o fereastră de navigare spre directorul respectiv. Aici trebuie specificat exact directorul dezarhivat cu 2 pasi anteriori: //gfx-framework-master//, nu alte directoare interne ale acestuia. {{ :egc:laboratoare:setup4.png?400 |}} |
| - | - Se specifică o cale unde se vor plasa fișierele rezultate în urma compilării codului sursă în campul text **Where to build the binaries**. Recomandarea noastră este să copiați calea la care se găsește framework-ul de laborator, 2 câmpuri mai sus, și să adăugați în coadă un director nou. De exemplu, dacă framework-ul se găsește la calea //E:/gfx-framework-master///, la acest pas specificați calea //E:/gfx-framework-master/build//. Directorul //build// va fi creat automat de către utilitar, în situația în care nu există. | + | - Se specifică o cale unde se vor plasa fișierele proiectului generat de utilitarul CMake, în câmpul text **Where to build the binaries**. Recomandarea noastră este să copiați calea la care se găsește framework-ul de laborator, 2 câmpuri mai sus, și să adăugați în coadă un director nou. De exemplu, dacă framework-ul se găsește la calea //E:/gfx-framework-master///, la acest pas specificați calea //E:/gfx-framework-master/build//. Directorul //build// va fi creat automat de către utilitar, în situația în care nu există. |
| - | - Se selectează opțiunea **Configure** (Pasul 3 din figura de mai sus). | + | - Se selectează opțiunea **Configure** (Pasul 3 din imaginea de mai sus). |
| - | - (Opțional) În situația în care nu există directorul în care să se plaseze fișierele rezultate in urma compilării, va apărea o fereastră de confirmare a creării acestui director. Confirmați crearea. | + | - (Opțional) În situația în care nu există directorul în care să se plaseze fișierele rezultate in urma compilării, va apărea o fereastră de confirmare a creării acestui director. Confirmați crearea.{{ :egc:laboratoare:setup9.png?400 |}} |
| - | - Va apărea o altă fereastră, în care se pot specifica diferiți parametrii pentru mediul de dezvoltare. Se pot lăsa cei deja completați și se selecteaza optiunea **Finish**. {{ :egc:laboratoare:setup5.png?400 |}} | + | - Va apărea o altă fereastră, în care se pot specifica diferiți parametrii pentru mediul de dezvoltare. Se pot lăsa cei deja completați și se selectează opțiunea **Finish**. {{ :egc:laboratoare:setup5.png?400 |}} |
| - Vor apărea parametrii de configurare pentru proiect. Aceștia sunt marcați cu roșu implicit, nu înseamnă că ceva a mers rău. Se selectează opțiunea **Generate**. {{ :egc:laboratoare:setup6.png?400 |}} | - Vor apărea parametrii de configurare pentru proiect. Aceștia sunt marcați cu roșu implicit, nu înseamnă că ceva a mers rău. Se selectează opțiunea **Generate**. {{ :egc:laboratoare:setup6.png?400 |}} | ||
| - | Fișierele proiectului au fost create și plasate în directorul selectat. Pentru a deschide proiectul, sunt mai multe opțiuni. Cea mai rapidă, în acest moment, este selectarea opțiunii **Open Project** din interfața utilitarului CMake. O altă opțiune este să mergem în directorul în care am specificat să se plaseze fișierele rezultate, de exemplu: //E:/gfx-framework/build// și să deschidem, cu dublu-click, fișierul **GFXFramework.sln**. | + | Fișierele proiectului au fost create și plasate în directorul specificat. Pentru a deschide proiectul, sunt mai multe opțiuni. Cea mai rapidă, în acest moment, este selectarea opțiunii **Open Project** din interfața utilitarului CMake. O altă opțiune este să mergem în directorul în care am specificat să se plaseze fișierele rezultate, de exemplu: //E:/gfx-framework/build// și să deschidem, cu dublu-click, fișierul **GFXFramework.sln**. |
| ==== Mediul de dezvoltare Visual Studio ==== | ==== Mediul de dezvoltare Visual Studio ==== | ||
| - | După deschiderea fișierului, ar trebui să apară o fereastră cu interfața similară cu cea din figura de mai jos. Pentru a compila proiectul, se poate selecta opțiunea **Local Windows Debugger** sau se poate apăsa direct tasta **F5**. | + | După deschiderea fișierului, ar trebui să apară o fereastră cu interfața similară cu cea din imaginea de mai jos. Pentru a compila rapid proiectul și să ne asigurăm că totul merge bine, se poate selecta opțiunea **Local Windows Debugger** sau se poate apăsa direct tasta **F5**. În acest pas, se compilează toate fișierele sursă ale proiectului și din acest motiv, procesul poate dura câteva zeci de secunde. În decursul laboratoarelor, acest proces va ști să compileze doar fișierele sursă modificate, care în general vor fi 2, și va dura mult mai puțin. |
| {{ :egc:laboratoare:setup7.png?600 |}} | {{ :egc:laboratoare:setup7.png?600 |}} | ||
| Line 61: | Line 61: | ||
| În situația în care totul a mers bine, se vor deschide două ferestre noi: | În situația în care totul a mers bine, se vor deschide două ferestre noi: | ||
| * O fereastră ce conține informații text de debug, denumită generic //consolă//. | * O fereastră ce conține informații text de debug, denumită generic //consolă//. | ||
| - | * O fereastră cu conținut 3D, similar cu cea vizibilă în figura de mai jos. | + | * O fereastră cu conținut 3D, similar cu cea vizibilă în imaginea de mai jos. |
| {{ :egc:laboratoare:setup8.png?600 |}} | {{ :egc:laboratoare:setup8.png?600 |}} | ||
