Un ceas analog simplu cu Dear ImGui

Un ceas analog simplu cu Dear ImGui

Proiectul de mai jos este un exemplu simplu de utilizare a bibliotecii ImGui (Dear ImGui) pentru a desena  cercuri, segmente de cerc colorate în mod diferit, și linii, toate acestea într-o fereastră grafică "dockable" denumită "Viewport".

Proiectul începe cu inițializarea și configurarea bibliotecii ImGui, după care intră într-o buclă de afișare continuă, în care se actualizează și se desenează interfața utilizatorului ImGui. În această interfață, utilizatorul poate vedea mai multe configurări pentru cerc, checkbox pentru a controla afișarea textului opțional și selectarea culorilor.

Pentru a realiza efectul culorii gradient, am folosit o funcție personalizată care desenează segmentul de cerc și ajustează transparența culorii în funcție de unghiul segmentului de cerc. Astfel, culorile variază în funcție de poziția pe cerc (vezi în imaginea de mai jos).

Acest proiect servește ca o introducere simplă în utilizarea ImGui și oferă o înțelegere despre cum puteți crea o interfață utilizator grafică și desena forme geometrice în cadrul ei.

Iar pentru a avea la final ceva util am realizat un ceas analogic folosind ImGui. Am mai adăugat și selectarea culorilor folosing ColorPicker pentru elementele ceasului, dar am folosit și InputInt pentru configurarea dimensiunilor ceasului.

 

 Iată pașii pentru a realiza un program demonstrativ cu ImGui:

1. Instalarea ImGui:

• Descărcați ultima versiune a ImGui de pe https://github.com/ocornut/imgui.
• Extrageți fișierele ImGui în directorul proiectului.

2. Includeți fișierele necesare:

• Includeți fișierele imgui.h, imgui_impl_win32.h și imgui_impl_dx9.h în fișierul sursă principal.

3. Inițializați ImGui:

• Creați o instanță a structurii ImGuiIO și inițializați-o.
• Creați un context ImGui cu ImGui::CreateContext().
• Setați funcțiile de callback pentru input și rendering.

4. Creați interfața grafică:

• Folosiți funcțiile ImGui pentru a crea elemente de interfață grafică, cum ar fi butoane, casete de text, etc.
• Puteți consulta documentația ImGui pentru o listă completă a funcțiilor disponibile.

5. Redarea interfeței grafice:

• Apelați ImGui::Render() pentru a reda interfața grafică.
• Integrați buffer-ul de rendered output cu DX9.

 Codul sursă

• https://github.com/SimedruF/Simple_ImGui_Drawing 
  

Documentație proiect

• Pagina principală imgui: https://www.dearimgui.com/
• Linkul către github:  https://github.com/ocornut/imgui 
• Introducere in grafica asistata de calculator, GEORGE MAHALU  
• Tutoriale ImGui: https://m.youtube.com/watch?v=SP6Djf6ku1E
• Exemple de cod ImGui: https://github.com/ocornut/imgui/blob/master/docs/EXAMPLES.md
• Alte proiecte cu care folosesc ImGui:
• https://automatic-house.blogspot.com/2024/01/criptografie-4-algoritmul-rsa-rivest.html
• Alte proiecte demonstrative simple: 
• https://automatic-house.blogspot.com/2020/11/grafica-cu-directx-in-c-folosind.html
• https://automatic-house.blogspot.com/2020/10/programarea-cu-opengl-in-c-folosind.html 
• https://automatic-house.blogspot.com/2020/10/folosirea-librariei-graphicsh-cu.html

Mulțumesc pentru atenție!

Pentru întrebări și/sau consultanță tehnică vă stau la dispoziție pe blog mai jos în secțiunea de comentarii sau pe email simedruflorin@automatic-house.ro.
O zi plăcută tuturor !
Back to top of page