Differences

This shows you the differences between two versions of the page.

Link to this comparison view

egc:setup-framework [2023/09/30 12:56]
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 rezultataIn 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 comandacum 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 proiectulDupă 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 ====
  
-==== Visual Studio IDE ==== +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.
- +
-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 licenteleputeti ​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țeleputeț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 josse 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 39: 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 ​ +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 instalarea modulelor necesare ​din Visual Studio,+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 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 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 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 implicitnu î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 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 ====
 +
 +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>​
egc/setup-framework.1696067800.txt.gz · Last modified: 2023/09/30 12:56 by andrei.lambru
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0