Introduction
ImGui styling is some kind of Art in itself, but not that difficult. If you want a unique UI you have to deal with colors, padding and the line calculation. ImGui draws elements line by line with the padding from the element itself and padding from the window, so it's kinda limited in some ways and not comparable to HTML + CSS. My approach is a bit complicated but results in a precise positioning in any resolution the user can have. The builtin scaling of CET works pretty well and can be helpful if you don't want to do it the hard way.
The reference documentation is located at the CET Repository at GitHub, which lists all commands but not very extensive.
Examples are taken from my mod CharLi, which is my playground for advanced ImGui styling.
Basic Styling
There are 4 commands that deal with the styles and colors of elements. They are 'stacking', so you need to remove them after applying or you overwrite all other mods and the CET windows too. Also if you don't remove them, CET or the Game may crash.
Colors are applied and removed with these two.
ImGui.PushStyleColor(<PART OF ELEMENT>, <COLOR>)
ImGui.PopStyleColor(<NUMBER OF COLOR DEFINITIONS>)
Styles (padding, alignment ..) are applied and removed with these two. Can have 1 or 2 values.
ImGui.PushStyleVar(<PART OF ELEMENT>, <VALUE>, <OPTIONAL>)
ImGui.PopStyleVar(<NUMBER OF STYLE DEFINITIONS>)
Each element in ImGui has it's own stylable parts, which is to much to list here. To get an idea, you always can refer to the ImGui source. See at Github at line ~1250. The colors are listed at line ~3357, see Github. Many element parts have multiple uses, like 'FramePadding' which can be applied to windows, the tabbar, tabs, collapsing headers and so on. To get an idea, here an simple example of a 'FramePadding' window. The values are horizontal and vertical pixels. I also show how to combine 'WindowFlags' which alter the behaviour of the generated window.
ImGui.PushStyleVar(ImGuiStyleVar.FramePadding, 5, 7)
ImGui.Begin("Name of the Window", ImGuiWindowFlags.NoTitleBar + ImGuiWindowFlags.NoScrollbar + ImGuiWindowFlags.NoScrollWithMouse)
ImGui.End()
ImGui.PopStyleVar(1)
Coloring our newly created window is the same deal as applying styles. Depending on the element you can colorize almost any part. In order to define a color, i prefer to use the command 'ImGui.GetColorU32(1, 0, 0, 0.5)', which has 4 values with Red, Green, Blue and the Alpha. The Range of those are 0.0 up to 1.0 which define the strength of the color. The Alpha defines the specific transparency of that color definition where 0.0 means complete transparency and 1.0 no transparency at all. If you create a transparent Button and the Window has it's own transparency, it will show the window color.
ImGui.PushStyleColor(ImGuiCol.WindowBg, ImGui.GetColorU32(1, 0, 0, 0.5))
ImGui.Begin("Name of the Window", ImGuiWindowFlags.NoTitleBar + ImGuiWindowFlags.NoScrollbar + ImGuiWindowFlags.NoScrollWithMouse)
ImGui.End()
ImGui.PopStyleColor(1)
We have now a half transparent red window without the title bar, awesome! :P
Fancy Icons
CET comes with an integrated list of icons called Glyphs. It's an large pool of fancy icons that can be used to enhance your UI. They can be used in any element that can have regular text, like a window title, a button or simple text field. If you look for an specific icon you can use this fancy listing Material Design Icons. In order to find the correct name you should look into the file '\cyber_engine_tweaks\scripts\IconGlyphs\icons.lua'. As example, on the website the 'clock' is called like 'clock-outline' while in CET it's 'ClockOutline'.
We take our red window and name it with the a glyph salad!
ImGui.PushStyleVar(ImGuiStyleVar.FramePadding, 5, 7)
ImGui.PushStyleColor(ImGuiCol.WindowBg, ImGui.GetColorU32(1, 0, 0, 0.5))
ImGui.Begin(IconGlyphs.ClockOutline..IconGlyphs.AlphaS..IconGlyphs.AlphaA..IconGlyphs.AlphaL..IconGlyphs.AlphaA..IconGlyphs.AlphaD)
ImGui.End()
ImGui.PopStyleColor(1)
ImGui.PopStyleVar(1)
Layered Elements
This approach is kinda hacky, but works pretty well. ImGui allows negative values for the 'dummy' element which works like a manual padding. So if you know the exact width of an element, you can go back to the start of that element and 'overwrite' it with another element. This can be useful in terms of styling and usability. For CharLi i used a slider to draw an on/off switch like in Android or iOS, but you have to click on the right side to toggle it. To make it possible to click anywhere and toggle it, i first define the button and overwrite it with the slider of the same dimension. Usally it's the other way around.
First, the transparent button:
ImGui.PushStyleColor(ImGuiCol.Button, ImGui.GetColorU32(0, 0, 0, 0))
ImGui.PushStyleColor(ImGuiCol.ButtonActive, ImGui.GetColorU32(0, 0, 0, 0))
ImGui.PushStyleColor(ImGuiCol.ButtonHovered, ImGui.GetColorU32(0, 0, 0, 0))
ImGui.PushID("Unique_Button_Name")
ImGui.Button("", 32, 18)
ImGui.PopID()
ImGui.PopStyleColor(3)
Now we can return to the starting point of the button:
ImGui.SameLine()
ImGui.Dummy(-32, 0)
ImGui.SameLine()
Finally paint the styled slider with transparent text:
ImGui.PushStyleVar(ImGuiStyleVar.GrabRounding, 10)
ImGui.PushStyleVar(ImGuiStyleVar.FrameRounding, 10)
ImGui.PushStyleVar(ImGuiStyleVar.FramePadding, 0, 0)
ImGui.PushStyleVar(ImGuiStyleVar.FrameBorderSize, 2)
ImGui.PushStyleColor(ImGuiCol.Text, ImGui.GetColorU32(0, 0, 0, 0))
ImGui.PushStyleColor(ImGuiCol.Border, ImGui.GetColorU32(0.3, 0.3, 0.37, 0.7))
ImGui.PushStyleColor(ImGuiCol.FrameBg, ImGui.GetColorU32(0.2, 0.2, 0.27, 0.5))
ImGui.PushStyleColor(ImGuiCol.FrameBgActive, ImGui.GetColorU32(0.2, 0.2, 0.27, 0.5))
ImGui.PushStyleColor(ImGuiCol.FrameBgHovered, ImGui.GetColorU32(0.2, 0.2, 0.27, 0.5))
ImGui.PushStyleColor(ImGuiCol.SliderGrab, ImGui.GetColorU32(1, 0.56, 0.13, 0.85))
ImGui.PushStyleColor(ImGuiCol.SliderGrabActive, ImGui.GetColorU32(1, 0.56, 0.13, 0.7))
ImGui.SetNextItemWidth(32)
ImGui.PushID("Unique_Slider_Name")
ImGui.SliderInt("", value, 1, 0)
ImGui.PopID()
ImGui.PopStyleColor(7)
ImGui.PopStyleVar(4)
ImGui.SameLine()
ImGui.Text("The Real Title")
IMPORTEND: on elements with an empty title make sure you have an unique ID while using PushID and PopID, otherwise all elements will toggle at the same time.
Now we have a unique element with style und usability.
This technique works only if you know and define exact dimensions for the elements and only on the same line. You can't jump vertically in another line. That's a limitation of ImGui because it's line based.
to be continued...
