Differences
This shows you the differences between two versions of the page.
|
egc:setup-framework [2023/09/30 13:33] 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 ===== | ||
| - | In cadrul laboratorui de la materia Elemente de grafica pe calculator, va vom pune la dispozitie un framework scris in C++, cu care veti lucra pana la finalul semestrului. In plus, puteti folosi acesta framework inclusiv pentru realizarea temelor, lucru pe care il si recomandam. | + | Î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. |
| - | In aceasta pagina se va explica felul in care se instaleaza dependintele framework-ului si cum se realizeaza setup-ul pentru a face un build si a porni aplicatia rezultata. In particular, in aceasta pagina ne vom concentra in explicatii pentru sistemul de operare Windows. Framework-ul poate fi compilat si pe siteme de operare UNIX/Linux si OSX. Mai multe detalii pentru utilizarea lui pe aceste sisteme de operare se pot gasi in fisierul 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. |
| - | ==== Descarcarea framework-ului ==== | + | ==== Descărcarea framework-ului ==== |
| - | Framework-ul se gaseste pe GitHub si poate fi descarcat din linia de comanda, cum este prezentat mai jos. Dupa executia comenzii, se va crea un director denumit //gfx-framework// ce va contine proiectul. | + | 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 |}} | ||
| + | |||
| + | 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 13: | Line 17: | ||
| </code> | </code> | ||
| - | Alternativ, pentru descarcarea proiectului, se poate folosi direct interfata [[https://github.com/UPB-Graphics/gfx-framework | paginii]] proiectului de pe GitHub. Din aceasta interfata, prin intermediul butonului **Code**, vizibil in figura de mai jos, se selecteaza optiunea **Download ZIP** pentru descarcarea unei arhive cu proiectul. Dupa dezarhivare, se va crea un director numit //gfx-framework-master//. Un link direct catre optiunea de descarcare a arhivei este [[https://github.com/UPB-Graphics/gfx-framework/archive/refs/heads/master.zip | acesta]]. | + | ==== Instalarea mediului de dezvoltare Visual Studio ==== |
| - | {{ :egc:laboratoare:setup1.png?600 |}} | + | Pentru a compila framework-ul pe sistemul de operare Windows, este necesară instalarea mediului de dezvoltare Visual Studio, care vine cu un modul ce conține compilatorul MSVC, obligatoriu pentru utilizarea framework-ului pe Windows. |
| - | + | ||
| - | ==== Visual Studio IDE ==== | + | |
| - | + | ||
| - | Pentru a compila framework-ul pe sistemul de operare Windows, este necesara instalarea IDE-ului Visual Studio, care vine cu un modul ce contine compilatorul MSVC++, obligatoriu pentru utilizarea framework-ului pe Windows. | + | |
| <note important> | <note important> | ||
| - | Atentie! IDE-ul necesar este **Visual Studio** si **NU Visual Studio Code**. | + | Atenție! IDE-ul necesar este **Visual Studio** și **NU Visual Studio Code**! |
| </note> | </note> | ||
| - | Acest IDE se poate descarca de pe [[https://visualstudio.microsoft.com/downloads/ | pagina oficiala]]. Versiunea **Community** este suficienta pentru utilizarea de care vom avea nevoie pe tot parcursul semestrului. | + | Mediul de dezvoltare Visual Studio se poate descărca de pe [[https://visualstudio.microsoft.com/downloads/ | pagina oficială]]. Versiunea **Community** este suficientă pentru utilizarea de care vom avea nevoie pe tot parcursul semestrului. |
| <note tip> | <note tip> | ||
| - | Puteti folosi licenta pusa la dispozitie de universitate pentru versiunea **Enterpise** a IDE-ului Visual Studio. Pentru accesarea platformei in care se regasesc licentele, puteti intra pe platforma [[https://my.upb.ro | MyUPB]], sectiunea **Servicii** -> **Licențe Microsoft (exceptând suita Office)** . | + | Puteți folosi licența pusă la dispozitie de universitate pentru versiunea **Enterprise** a mediului de dezvoltare Visual Studio. Pentru accesarea platformei în care se regăsesc licențele, puteți intra pe platforma [[https://my.upb.ro | MyUPB]], secțiunea **Servicii** -> **Licențe Microsoft (exceptând suita Office)** . |
| </note> | </note> | ||
| - | Dupa descarcarea executabilului si rularea lui, se va instala de fapt un hub, denumit **Visual Studio Installer**, din care se permite instalarea unor diferite module. In figura de mai jos se poate vedea interfata acestui hub. In loc de textul Modify, incadrat in chenarul rosu, la voi va fi textul Install. Dupa instalarea unui modul, optiunea se va transforma in Modify. Se selecteaza optiunea 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 |}} | ||
| - | Dupa selectarea optiunii, se va deschide un popup in interiorul ferestrei, ce va contine mai multe optiuni de module pentru instalare. In acest laborator, este necesar doar modulul **Desktop development with C++**. Se bifeaza acest modul, prin selectarea chenarului in care se gaseste modulul (Pasul 1 din figura de mai jos). Dupa bifarea lui, in partea dreapta vor aparea mai multe componente ce fac parte din acest modul. Componentele bifate vor fi instalate, cele fara bifa nu. Pot fi lasate cele selectate automat. Ultimul pas pentru instalarea mediului de dezvoltare este selectia butonului Install/Modify din partea dreapta jos (Pasul 2 din figura urmatoare). | + | 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 sursa al framework-ului de laborator, descarcat cu 2 pasi anteriori, nu contine un proiect, in general un fisier special (Makefile in UNIX sau .sln pentru Visual Studio), pentru un anumit mediu de dezvoltare. Codul framework-ului de laborator permite sa fie utilizat in orice astfel de mediu, motiv pentru care ofera un set de fisiere de configurare pentru generarea oricarui tip de proiect. Pentru a utiliza acest set de configurare, este necesar un utilitar extern numit CMake. Acesta poate fi descarcat din [[https://cmake.org/download/ | pagina oficiala]]. | + | 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ă]]. |
| - | Dupa instalare, se poate porni utilitarul si se va deschide o fereastra cu interfata din figura de mai jos. Din aceasta interfata se genereaza proiectul pentru IDE-ul Visual Studio. Pentru acest proces trebuie sa urmam cativa pasi: | + | 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 completeaza calea unde se gaseste codul sursa al framework-ului prin completarea campului textu **Where is the source code** sau prin selectarea butonului **Browse Source** (Pasul 1 din figura de mai jos), care deschide o fereastra de navigare spre directorul respectiv. Aici trebuie specificat exact directorul dezarhivat cu 2 pasi anteriori: //gfx-framework-master// sau cel clonat: //gfx-framework//, nu alte directoare interne ale acestuia. | + | - 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 specifica o cale unde se vor plasa fisierele rezultate in urma compilarii codului sursa in campul text **Where to build the binaries**. Recomandarea noastra este sa copiati calea la care se gaseste framework-ul de laborator, 2 campuri mai sus, si sa adaugati in coada un director nou. De exemplu, daca framework-ul se gaseste la calea //E:/gfx-framework///, la acest pas specificati calea //E:/gfx-framework/build//. Directorul //build// va fi creat automat de catre utilitar, in situatia in care nu exista. | + | - 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 selecteaza optiunea **Configure** (Pasul 3 din figura de mai jos) | + | - 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.{{ :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 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 |}} | ||
| - | {{ :egc:laboratoare:setup4.png?300 |}} | + | 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**. |
| - | Dupa instalarea modulelor necesare din Visual Studio, | + | ==== Mediul de dezvoltare Visual Studio ==== |
| + | 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 |}} | ||
| + | |||
| + | Î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ă cu conținut 3D, similar cu cea vizibilă în imaginea de mai jos. | ||
| + | |||
| + | {{ :egc:laboratoare:setup8.png?600 |}} | ||
| + | |||
| + | <note tip> | ||
| + | Yeey!!! Sunteți gata pentru primul laborator <3 ! | ||
| + | </note> | ||
