> For the complete documentation index, see [llms.txt](https://docs.anvil.team/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.anvil.team/examples/creating-a-clock-with-imgui.md).
# Creating a Clock with ImGui
Written by J$K
For this example we will explore the use of [ImGui](/namespaces/imgui.md). ImGui is a GUI (Graphical User Interface) framework. This allows us to draw a multitude of things on screen.
First, lets create a function that will run an ImGui window each frame.
```lua
local function ImGuiExample()
-- Begin our ImGui window
ImGui.Begin("Clock", ImGuiWindowFlags.NoTitleBar | ImGuiWindowFlags.NoResize)
-- Add text to our window.
ImGui.Text("J$K is boss.")
-- End our window.
ImGui.End()
end
engine.addEventListener("render", ImGuiExample)
```
If you've tried this in game, you'll have noticed that the text is quite small, and the window isn't resizable. So let's take a look at editing the style of ImGui.\
\
When we initialized ImGui we set some properties that the window will follow.
```lua
ImGui.Begin("Clock", ImGuiWindowFlags.NoTitleBar | ImGuiWindowFlags.NoResize)
```
[**ImGuiWindowsFlags.NoTitleBar**](/enums/imguiwindowflags.md) and [**ImGuiWindowFlags.NoResize**](/enums/imguiwindowflags.md) are two properties, or "flags" we defined above. **NoTitleBar** means our ImGui window will not have a title above our window, and **NoResize** is just as it sounds, we won't be able to resize our window. \
\
\
To see a full list of flags that are available, click [here](/enums/imguiwindowflags.md).
So let's start adding some styles to the rest of our program. We can start off by making the background transparent, and making our text bigger. We do this by "pushing" our styles.
```lua
local function ImGuiExample()
ImGui.PushFont("RobotoMono-Light", 36);
ImGui.PushStyleColor(ImGuiCol.WindowBg, Vec4:new(0, 0, 0, 0))
ImGui.PushStyleVarFloat(ImGuiStyleVar.WindowBorderSize, 0)
--Our Imgui code goes here from the example above.
ImGui.PopFont()
ImGui.PopStyleColor()
ImGui.PopStyleVar()
end
```
It is important for every push, we also pop. For instance, our **ImGui.PushFont()** must also have **ImGui.PopFont()**. Now with these styles applied let's see how it looks in-game.
Awesome! Now our styles are applied, and we have some draggable text. So let's plug in a clock to our **ImGui.Text** and we are done!
```lua
local clockTime = os.date("%X")
ImGui.Text(tostring(clockTime))
```
In Lua, to get our clock working we have to call **os.date("%X")** where **%X** is our format for time. You can see all the other formats[ here](https://www.lua.org/pil/22.1.html). Then we can plug that in to **ImGui.Text** as a string.
Our full code should look something like this.
```lua
local function ImGuiExample()
-- Pushing Styles
ImGui.PushFont("RobotoMono-Light", 36);
ImGui.PushStyleColor(ImGuiCol.WindowBg, Vec4:new(0, 0, 0, 0))
ImGui.PushStyleVarFloat(ImGuiStyleVar.WindowBorderSize, 0)
-- Begin our ImGui window
ImGui.Begin("Clock", ImGuiWindowFlags.NoTitleBar | ImGuiWindowFlags.NoResize)
-- Add text to our window.
local clockTime = os.date("%X")
ImGui.Text(tostring(clockTime))
-- End our window & Pop Styles.
ImGui.End()
ImGui.PopFont()
ImGui.PopStyleColor()
ImGui.PopStyleVar()
end
engine.addEventListener("render", ImGuiExample)
```
