# Creating GUI with Dash.jl

**URL:** https://discourse.julialang.org/t/creating-gui-with-dash-jl/59639
**Category:** New to Julia
**Created:** [April 20, 2021, 5:48am UTC](https://discourse.julialang.org/t/creating-gui-with-dash-jl/59639 "2021-04-20T05:48:21Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![kobied](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/kobied/32/16432_2.png) [@kobied](https://discourse.julialang.org/u/kobied)
#### Post date: [April 20, 2021, 5:48am UTC](https://discourse.julialang.org/t/creating-gui-with-dash-jl/59639/1 "2021-04-20T05:48:21Z")

</div>

Hello, i’m trying to create a GUI using Dash.jl  
My GUI need to have the usual buttons, sliders, etc. which is straightforward in Dash.  
My issues are :

1. creating a 2D plot and an image on which I can click with the mouse and get the clicked pixel coordinates
2. getting key user pressed, no matter where is the focus

for the first issue I was thinking using Makie.jl as a separate window, regarding the second issue, I have no idea how to solve, I did find how to get key pressed as long as the focus is on Julia REPL.

[https://stackoverflow.com/questions/56888266/how-to-read-keyboard-inputs-at-every-keystroke-in-julia](https://stackoverflow.com/questions/56888266/how-to-read-keyboard-inputs-at-every-keystroke-in-julia)

My questions are:

1. can I integrate Makie plots in Dash and not in a separate window or does PlotlyJS has equivalent mouse interaction abilities like Makie?
2. can I get key user pressed, no matter where is the focus, or change the focus within the app to the REPL to get the key.

thanks in ahead

---

<div class="post-metadata">

### Author: ![roble](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/roble/32/12303_2.png) [@roble](https://discourse.julialang.org/u/roble)
#### Post date: [April 20, 2021, 6:45am UTC](https://discourse.julialang.org/t/creating-gui-with-dash-jl/59639/2 "2021-04-20T06:45:59Z")

</div>

Sorry for not answering your questions directly. But i might guide you towards a solution:

Perhaps you are interested in using Stipple.jl which seems to be more than suitable for creating guis and dashboards. As far as i know it is a pure julia/js package.

Makie has a backend called WGLMakie.jl which uses web gl. It might integrate nicely into stipple amd even be interactive.

This is how i would attempt to achieve your goal. However i am interested how others would do it

---

<div class="post-metadata">

### Author: ![kobied](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/kobied/32/16432_2.png) [@kobied](https://discourse.julialang.org/u/kobied)
#### Post date: [April 20, 2021, 6:52am UTC](https://discourse.julialang.org/t/creating-gui-with-dash-jl/59639/3 "2021-04-20T06:52:33Z")

</div>

> [@roble](#):
>
> Stipple

thanks for the new direction, I’ll look into it, will it solve my second issue referring the key user pressed?

---

<div class="post-metadata">

### Author: ![roble](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/roble/32/12303_2.png) [@roble](https://discourse.julialang.org/u/roble)
#### Post date: [April 20, 2021, 7:09am UTC](https://discourse.julialang.org/t/creating-gui-with-dash-jl/59639/4 "2021-04-20T07:09:00Z")

</div>

Ok, so you want to use key presses in your dashboard?

There is a keybinding in the Stipple.jl example located in the README.md file.

```julia
function ui()
  page(
    vm(model), class="container", [
      p([
        "Input "
        input("", @bind(:input), @on("keyup.enter", "process = true"))
      ])

      p([
        button("Action!", @click("process = true"))
      ])

      p([
        "Output: "
        span("", @text(:output))
      ])
    ]
  ) |> html
end

```

It shoud create a keybinding for the enter key. But i doubt it would catch the keypress if the browser window is not in focus.

---

<div class="post-metadata">

### Author: ![kobied](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/kobied/32/16432_2.png) [@kobied](https://discourse.julialang.org/u/kobied)
#### Post date: [April 20, 2021, 8:32am UTC](https://discourse.julialang.org/t/creating-gui-with-dash-jl/59639/5 "2021-04-20T08:32:41Z")

</div>

thanks again 🙂 , I’ll check it.

---

<div class="post-metadata">

### Author: ![kobied](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/kobied/32/16432_2.png) [@kobied](https://discourse.julialang.org/u/kobied)
#### Post date: [April 26, 2021, 10:10am UTC](https://discourse.julialang.org/t/creating-gui-with-dash-jl/59639/6 "2021-04-26T10:10:50Z")

</div>

Hi, I have been playing with `Stipple.jl` and I have some issues that I can’t resolve:

1. In my GUI the user is required to give some inputs, I would like to open a new window/tab in which a new GUI is created, and the user will fill the the needed data, at the end the window/tab will be closed via a button press. I google it but could not find any solution…
2. I couldn’t find any documentation regarding the Stipple UI features, Where can I find some API documentation for the Stipple Models?

thanks
