# Graphics Library with real-time display in Julia?

**URL:** <https://discourse.julialang.org/t/graphics-library-with-real-time-display-in-julia/101530>\
**Category:** Visualization\
**Tags:** graphics, visualization\
**Created:** [July 12, 2023, 1:50pm UTC](https://discourse.julialang.org/t/graphics-library-with-real-time-display-in-julia/101530 "2023-07-12T13:50:31Z")\
**Posts on this page:** 4\
**Page:** 2

<div class="post-metadata">

**Author:** ![Maddy](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/maddy/32/210658_2.png) [@Maddy](https://discourse.julialang.org/u/Maddy)\
**Post date:** [July 13, 2023, 4:46am UTC](https://discourse.julialang.org/t/graphics-library-with-real-time-display-in-julia/101530/21 "2023-07-13T04:46:29Z")

</div>

Woahhhhh This is pretty much it!

---

<div class="post-metadata">

**Author:** ![Maddy](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/maddy/32/210658_2.png) [@Maddy](https://discourse.julialang.org/u/Maddy)\
**Post date:** [July 13, 2023, 5:06am UTC](https://discourse.julialang.org/t/graphics-library-with-real-time-display-in-julia/101530/22 "2023-07-13T05:06:03Z")

</div>

Anyone Here Knowing about [Starlight.jl](https://juliapackages.com/p/starlight)? Seems like it’s got the Potential.

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://discourse.julialang.org/u/jules)\
**Post date:** [July 13, 2023, 5:16am UTC](https://discourse.julialang.org/t/graphics-library-with-real-time-display-in-julia/101530/23 "2023-07-13T05:16:13Z")

</div>

> Why is it a dependency then?

It’s not

---

<div class="post-metadata">

**Author:** ![caleb-allen](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/caleb-allen/32/14054_2.png) [@caleb-allen](https://discourse.julialang.org/u/caleb-allen)\
**Post date:** [July 18, 2023, 4:14pm UTC](https://discourse.julialang.org/t/graphics-library-with-real-time-display-in-julia/101530/24 "2023-07-18T16:14:15Z")

</div>

> [@Maddy](#):
>
> Please do! I would very well love that.

Alright, I went back and found the code and it runs alright!

Not sure that any of this is particularly “good practice”, but here it is. It essentially just a demo of exploring Layered.jl (from the examples, I think?) running in a Gtk window. It’s not very well organized, apologies.

What it does is display a variety of objects in a window, and is interactive. When you click somewhere on the canvas, a new circle is created.

```julia
using Layered
import Cairo
const C = Cairo

import Gtk, Graphics
const G = Gtk

function draw_canvas(layer::Layer, canvas::Canvas, surface::C.CairoSurface)
    context, canvasmatrix = Layered._prep_context(canvas, surface)
    Layered.draw!(context, canvasmatrix, layer)
end

defaultfont("Arial")

c, l = canvas(250, 250; color = "tomato")

c1 = circle!(l, O, 50) + Fill("firebrick1")

colors = range(colorant"red", stop=colorant"darkred", length=3)
for i in 1:3
    circ = Layered.circle(-X(25 * i) -Y(5 * i),
                          50 - (i * 8)) + Fill(colors[i])
    pushfirst!(l, circ)
end

c3 = circle!(l, Y(80), 20) + Fill("red")

lines!(outertangents, l, c1, c3) + Linestyle(:dashed)

txt!(l, c1) do ctx
    Txt(ctx.center, "Layered.jl", 14.0, :c, :c, deg(0))
end + Textfill("white")

polys = polygons() do
    ps = P.(grid(-100:20:100, -100:20:100)...)
    ncross.(ps, 8, 5, 0.3)
end + Fill("white", 0.3) + Stroke(nothing)
pushfirst!(l, polys)

rect!(l, O, 50, 50) + Fill(Gradient(Y(20), P(-20, 20), colorant"green", colorant"springgreen"))

origin = polygon!(l) do
    ncross(O, 4, 5, 0.3)
end + Fill("black")

function addcircle!(point)
    circ = circle!(l, point, 15) + Fill("white")
    G.draw(canv, true)
end

canv = G.@GtkCanvas()
win = G.GtkWindow(canv, "Canvas")

# canv.backcc = drawing context
# canv.back = drawing surface
surface = canv.back
G.@guarded G.draw(canv) do widget
    draw_canvas(l, c, canv.back)
end

canv.mouse.button1press = G.@guarded (widget, event) -> begin
    @show c.size
    p = (Point(event.x, event.y) - (Point(c.size) / 2))
    point = Point(p.x, -p.y)
    @show point
    addcircle!(point)
end

show(canv)

```

For the purposes of creating a window, the part you may find interesting is:

```julia
canv = G.@GtkCanvas()
win = G.GtkWindow(canv, "Canvas")

# canv.backcc = drawing context
# canv.back = drawing surface
surface = canv.back
G.@guarded G.draw(canv) do widget
    draw_canvas(l, c, canv.back)
end

canv.mouse.button1press = G.@guarded (widget, event) -> begin
    @show c.size
    p = (Point(event.x, event.y) - (Point(c.size) / 2))
    point = Point(p.x, -p.y)
    @show point
    addcircle!(point)
end

show(canv)

```

[Previous page](https://discourse.julialang.org/t/graphics-library-with-real-time-display-in-julia/101530.md?page=1)