2023-08-16 humbleui | Clojure Slack Archive

humbleui

Nick Cellino 2023-08-16T05:08:59.271289Z

Hello 👋 I’m playing around with HumbleUI and have a basic question. How do I make the UI “reactive” to changes in state? I assumed this is what the ui/dynamic macro helps with but I’m having trouble. For example, in the code below, I would have thought that evaluating (reset! *message "Goodbye") would change the message displayed in the window, but I’m not seeing that - the message stays as “Hello”

(ns ui-test
  (:require [io.github.humbleui.ui :as ui]))

(def *message (atom "Hello"))

(def ui
  (ui/default-theme {}
    (ui/center
      (ui/dynamic _ [message @*message]
        (ui/label message)))))

(ui/start-app!
  (ui/window
    {:title "Humble 🐝 UI"}
    ui))

(comment
  (reset! *message "Goodbye"))

Niki 2023-08-16T13:42:48.001709Z

dynamic is a temporary solution, and it’s not reactive

Niki 2023-08-16T13:43:20.799399Z

You should call window/request-frame after you change your atom. Dynamic will pick up the change but it won't trigger re-render by itself

Nick Cellino 2023-08-16T13:51:00.119199Z

Ah okay. Is that what the examples in dev/examples are using?

Niki 2023-08-16T14:17:51.347999Z

Yes and no

Niki 2023-08-16T14:18:36.081919Z

Most of the examples don’t do that because they have e.g. button and when you press a button it needs to repaint itself. So there’s no need to request repaint explicitly. But it’s just a coincidence, don’t rely on it

Niki 2023-08-16T14:18:55.212519Z

The best way is to add-watch to your state and call request-frame. See e.g. examples.treemap

Nick Cellino 2023-08-16T14:20:32.950439Z

Okay will look into that later after work. Thank you 🙏 I watched your Wordle video on YouTube and was curious how the UI seemed to update when you updated any aspect of the state (like the currently :typing word or :guesses, etc)

Nick Cellino 2023-08-16T14:21:15.694359Z

maybe that’s just the coincidental repainting you mentioned?

Nick Cellino 2023-08-16T21:20:30.931659Z

Okay got it working! In case it helps anyone else, here’s a minimal example:

(ns ui-test
  (:require [io.github.humbleui.ui :as ui]
            [io.github.humbleui.window :as window]))

(def *message (atom "Hello!"))

(def example-ui
  (ui/default-theme {}
    (ui/center
      (ui/dynamic _ [message @*message]
        (ui/label message)))))

(ui/start-app!
  (let [window (ui/window
                  {:title "Humble 🐝 UI"}
                  example-ui)]
    (add-watch *message :message
      (fn [_ _ _ _]
        (window/request-frame window)))
    window))

(comment
  ; Evaluate the form below and UI will update
  (reset! *message "Goodbye"))

👍 1

Clojurians Log v2

humbleui