musikinformatik-wise-24.org

Beispiel 2

Hier ein Beispiel für eine Seite mit drei Slidern und drei damit gekoppelten Nummernboxen:

(in-package :clamps)

(progn
  (defparameter *slider1* (make-ref 1.0))
  (defparameter *slider2* (make-ref 1.0))
  (defparameter *slider3* (make-ref 1.0)))

;;; Definition des GUIs:

(defun sliders-numboxes-gui (body)
  "handler for /sliders"
  (setf (title (html-document body)) "3 Sliders and Numboxes")
  (setf (style body :display) "flex")
  (setf (style body :height) "100vh")
  (create-o-slider body (bind-refs-to-attrs *slider1* "value")
                   :min 0 :max 127 :direction :up
                   :css `(:display "inline-block" :margin "0.5em"
                          :background "white" :height "90%" :width "2em"))
  (create-o-numbox body (bind-refs-to-attrs *slider1* "value")
                   :min 0 :max 127 :css `(:height "1.2em" :margin "0.5em"))
  (create-o-slider body (bind-refs-to-attrs *slider2* "value")
                   :min 0 :max 127 :direction :up
                   :css `(:display "inline-block" :margin "0.5em"
                          :background "white" :height "90%" :width "2em"))
  (create-o-numbox body (bind-refs-to-attrs *slider2* "value")
                   :min 0 :max 127 :css `(:height "1.2em" :margin "0.5em"))
  (create-o-slider body (bind-refs-to-attrs *slider3* "value")
                   :min 0 :max 127 :direction :up
                   :css `(:display "inline-block" :margin "0.5em"
                          :background "white" :height "90%" :width "2em"))
  (create-o-numbox body (bind-refs-to-attrs *slider3* "value")
                   :min 0 :max 127 :css `(:height "1.2em" :margin "0.5em")))

(set-on-new-window #'sliders-numboxes-gui :path "/3sliders-numboxes-gui")

Nach Evaluation des Lisp Codes und Aufruf der Seite http://127.0.0.1:54619/3sliders-numboxes-gui sollte das Browserfenster wie in der folgenden Abbildung aussehen. Zu beachten ist, dass Änderungen in den Nummernboxen automatisch mit Änderungen der zugeordneten Slider verbunden ist (und umgekehrt). Dementsprechend führen wie in Beispiel 1 auch Änderungen der Variablen *slider1*, *slider2* oder *slider3* auf der Clamps Seite mit der Funktion #'set-value zu entsprechenden Gui Updates in den Nummernboxen und Slidern im Browser.

Abbildung 3: Gui mit 3 Slidern und 3 gekoppelten Nummernboxen

Created: 2025-02-12 Mi 20:35

Validate