CImGui Basics

CImGui is used to create a old fashion GUI's (Graphical User Interface), Best in the market right now 💖

Before you directly copy and paste code install all the packages like CImGui, GLFW using this 👇 command in command prompt .

Install packages

install packages

using Pkg
Pkg.add("") # write all name of libraries before installation

Boilerplate

Boilerplate CImGui

using CImGui
using CImGui.CSyntax
using CImGui.CSyntax.CStatic
using CImGui.GLFWBackend
using CImGui.OpenGLBackend
using CImGui.GLFWBackend.GLFW
using CImGui.OpenGLBackend.ModernGL
 
window = GLFW.CreateWindow(600,600,"App")
GLFW.MakeContextCurrent(window)
 
ctx =  CImGui.CreateContext()
ImGui_ImplGlfw_InitForOpenGL(window,true)
ImGui_ImplOpenGL3_Init(130)
 
while !GLFW.WindowShouldClose(window)
    GLFW.PollEvents()
    ImGui_ImplOpenGL3_NewFrame()
    ImGui_ImplGlfw_NewFrame()
    CImGui.NewFrame()
    glClearColor(0.5,0.5,0.5,1)
    glClear(GL_COLOR_BUFFER_BIT)
    
    # create window/frame or some Gui 😊🎶
 
    CImGui.Render()
    ImGui_ImplOpenGL3_RenderDrawData(CImGui.GetDrawData())
    GLFW.MakeContextCurrent(window)
    GLFW.SwapBuffers(window)
end
 
CImGui.DestroyContext(ctx)
GLFW.DestroyWindow(window)

Create New Frame

To cerate New Frame, understand that every new frame has CImGui.Begin("Frame 01") and CImGui.End() may be because the GLFW rerenders th entire screen every time.

CImGui.Begin("Frame 01")
CImGui.ShowDemoWindow()         # this line will show a demo window which can be real helpfull 😊
CImGui.Text("Working") 
CImGui.End()

Change styles

To make a change in styles like css

# insted of writing ImGuiCol_Text you can also write 👇
# CImGui.PushStyleColor(CImGui.ImGuiCol_Button, CImGui.HSV(i/7.0, 0.6, 0.6))
# CImGui.PushStyleColor(CImGui.ImGuiCol_ButtonHovered, CImGui.HSV(i/7.0, 0.7, 0.7))
# CImGui.PushStyleColor(CImGui.ImGuiCol_ButtonActive, CImGui.HSV(i/7.0, 0.8, 0.8))
 
# to align the title in center
CImGui.PushStyleVar(CImGui.ImGuiStyleVar_WindowTitleAlign,CImGui.ImVec2(0.5,0.5))
 
CImGui.PushStyleColor(CImGui.ImGuiCol_Text, CImGui.HSV(7.0, 0.6, 0.6))
CImGui.Text("Somthing")
CImGui.PopStyleColor()      #used to not apply this style in whole app

position and frame size

To set miimum size and position of the Frame

# to declare the frame size
CImGui.PushStyleVar(CImGui.ImGuiStyleVar_WindowMinSize,[100,500])
 
# to set the frame position
CImGui.SetWindowPos(CImGui.ImVec2(0 ,768 -  CImGui.GetWindowHeight() - 40 ),true)

Demo window

To get default demo window of CimGui

CImGui.ShowDemoWindow()

GetWindowSize()

to get size of window

size = CImGui.GetWindowSize().y

BeginMainMenuBar()

to create main menu

if CImGui.BeginMainMenuBar()
    CImGui.MenuItem("Help")
    CImGui.MenuItem("View")
    CImGui.MenuItem("run")
    CImGui.MenuItem("Terminal")
end

padding

To set padding in commponent's

CImGui.PushStyleVar(CImGui.ImGuiStyleVar_WindowPadding,CImGui.ImVec2(20,8))

Examples🦚

Button

if true text will appear

function Frame()
    @cstatic showBtn = false begin
        CImGui.Begin("New Frame")
        # to change the padding / spacing of any **inner** item in the UI
        # CImGui.PushStyleVar(CImGui.ImGuiStyleVar_ItemInnerSpacing,CImGui.ImVec2(50,50))
        
        # CImGui.ImVec2(100,40) used for padding 
        if CImGui.Button(showBtn ? "hide text" : "show text",CImGui.ImVec2(100,40))
                showBtn = !showBtn
            end
 
            if showBtn
                CImGui.Text("Button is pressed") # if true text will appear
                CImGui.ProgressBar(10)
            end
        CImGui.End()
    end
end

Multi-line Input

function Frame()
    # note: we are using a fixed-sized buffer for simplicity here. See ImGuiInputTextFlags_CallbackResize
    # and the code in misc/cpp/imgui_stdlib.h for how to setup InputText() for dynamically resizing strings.
        @cstatic read_only=false (text="/*\n"*
                                       " The Pentium F00F bug, shorthand for F0 0F C7 C8,\n"*
                                       " more formally, the invalid operand with locked CMPXCHG8B\n"*
                                       " instruction bug, is a design flaw in the majority of\n"*
                                       " Intel Pentium, Pentium MMX, and Pentium OverDrive\n"*
                                       " processors (all in the P5 microarchitecture).\n"*
                                       "*/\n\n"*
                                       "label:\n"*
                                       "\tlock cmpxchg8b eax\n"*"\0"^(1024*16-249)) begin
        CImGui.Begin("Multiline inpute Frame")
 
        # check box
        @c CImGui.Checkbox("Read-only", &read_only) 
        
        flags = CImGui.ImGuiInputTextFlags_AllowTabInput | (read_only ? CImGui.ImGuiInputTextFlags_ReadOnly : 0)
        CImGui.InputTextMultiline("##source", text, length(text), CImGui.ImVec2(-1.0, CImGui.GetTextLineHeight() * 16), flags)
        CImGui.End()
    end
end

Color theme

works like a select Example of chakra ui https://chakra-ui.com/docs/components/select/usage (opens in a new tab)

dark,light,classic

 
 
function ModeWindow()
    @cstatic selectedItem = Cint(0) item = ["dark","light","classic"] begin
    
    if selectedItem == 0
        CImGui.StyleColorsDark()
    elseif selectedItem == 1
        CImGui.StyleColorsLight()
    elseif selectedItem == 2
        CImGui.StyleColorsClassic()
    end
 
    CImGui.Begin("Settings")
            CImGui.Text("currently selected item $selectedItem")
            @c CImGui.Combo("App color mode",&selectedItem,item,length(item))
        CImGui.End()
 
    end
end

Column Example

function Frame()
    CImGui.PushStyleVar(CImGui.ImGuiStyleVar_WindowMinSize,[100,500])
    
    CImGui.Begin("Example widndow")
    CImGui.Text("Column Examples")
    CImGui.Spacing()
 
    CImGui.Columns(3,C_NULL,true)
    for i = 1 : 5
        num = CImGui.GetColumnIndex()
        if num == 0
            CImGui.Separator()
        end
        CImGui.Spacing()
        CImGui.Text("Index $num");
        CImGui.Text("Loop Number $i");
        CImGui.Text("Id: Rudra Joshi ");
        CImGui.Text("Email: rudrajoshi2481@gmail.com");
        CImGui.Text("Long text that is likely to clip");
        CImGui.Button("Button", CImGui.ImVec2(0, 0.0));    
        CImGui.NextColumn()
        CImGui.Spacing()
    end
        
    CImGui.End()
end

How to close a frame

function Frame()
    @cstatic p_show = Bool(true) begin
    if p_show
            @c CImGui.Begin("Example window",&p_show) 
            CImGui.Text("Show")
            @c CImGui.Text("Show-> $p_show")
            CImGui.End()
        end
    end
end

Julia Dataframe