diff --git a/resources/public/css/chosen-sprite.png b/resources/public/css/chosen-sprite.png new file mode 100644 index 0000000..3611ae4 Binary files /dev/null and b/resources/public/css/chosen-sprite.png differ diff --git a/src/cljs/swinging_needle_meter/swinging_needle_meter.cljs b/src/cljs/swinging_needle_meter/swinging_needle_meter.cljs index dd8e98b..6152f90 100644 --- a/src/cljs/swinging_needle_meter/swinging_needle_meter.cljs +++ b/src/cljs/swinging_needle_meter/swinging_needle_meter.cljs @@ -156,6 +156,12 @@ :y (- cy min-radius)} (as-label label)]]) +(defn as-mm + "return the argument, as a string, with 'mm' appended" + [arg] + (str arg "mm")) + + (defn swinging-needle-meter "Render an SVG swinging needle meter" [& {:keys [model setpoint width height min-value max-value warn-value tolerance class gradations alarm-class cursor-class frame-class hub-class needle-class redzone-class scale-class target-class unit id style attr] @@ -201,6 +207,8 @@ [:svg {:xmlSpace "preserve" :overflow "visible" :viewBox (string/join " " [0 0 width height]) + :width (str width "px") + :height (str height "px") :y "0px" :x "0px" :version "1.1" @@ -233,16 +241,17 @@ :id (str id "-needle") :d (str "M " cx "," (- cy needle-length) " " cx "," cy) ;; "M cx,20 cx,100" :transform (str "rotate( " (deflection model min-value max-value) "," cx "," cy ")") }] - (apply vector (cons :g (map #(let - [value (+ min-value - (* - (/ - (- max-value min-value) - gradations) %))] - (gradation cx cy gradation-inner needle-length - (deflection value min-value max-value) - value)) - (range 0 (+ gradations 1))))) + (if (> gradations 0) + (apply vector (cons :g (map #(let + [value (+ min-value + (* + (/ + (- max-value min-value) + gradations) %))] + (gradation cx cy gradation-inner needle-length + (deflection value min-value max-value) + value)) + (range 0 (+ gradations 1)))))) [:rect {:class frame-class :id (str id "-frame") :x (* width 0.05) :y (* height .05) :height cy :width (* width 0.9)}] diff --git a/src/cljs/swinging_needle_meter/views.cljs b/src/cljs/swinging_needle_meter/views.cljs index f877727..a4cb1b5 100644 --- a/src/cljs/swinging_needle_meter/views.cljs +++ b/src/cljs/swinging_needle_meter/views.cljs @@ -1,6 +1,7 @@ (ns swinging-needle-meter.views (:require [re-frame.core :as re-frame] - [re-com.core :refer [h-box v-box box gap line label title progress-bar slider checkbox p]] + [re-com.core :refer [h-box v-box box gap line label title progress-bar slider checkbox p single-dropdown]] + [re-com.util :refer [deref-or-value]] [swinging-needle-meter.swinging-needle-meter :refer [swinging-needle-meter swinging-needle-args-desc]] [swinging-needle-meter.utils :refer [panel-title title2 args-table github-hyperlink status-text]] [reagent.core :as reagent])) @@ -11,8 +12,14 @@ (defn swinging-needle-demo [] - (let [value (reagent/atom 75) - setpoint (reagent/atom 75)] + (let [value (reagent/atom 60) + setpoint (reagent/atom 75) + gradations (reagent/atom 5) + size (reagent/atom 70) + min-val (reagent/atom 0) + max-val (reagent/atom 100) + warn-val (reagent/atom 80) + unit (reagent/atom "Mw")] (fn [] [v-box @@ -56,23 +63,22 @@ :children [[swinging-needle-meter :model value :setpoint setpoint - :unit "Mw" -;; :min-value 20 -;; :warn-value 35 -;; :max-value 40 -;; :max-value (aget js/Math "PI") + :unit (deref-or-value unit) + :min-value (deref-or-value min-val) + :warn-value (deref-or-value warn-val) + :max-value (deref-or-value max-val) :tolerance 2 :alarm-class "snm-warning" - :gradations 5 - :height 300 - :width 500] + :gradations (deref-or-value gradations) + :height (int (* (deref-or-value size) 6)) + :width (int (* (deref-or-value size) 10))] [title :level :level3 :label "Parameters"] [h-box :gap "10px" :children [[box :align :start :child [:code ":model"]] [slider :model value - :min 0 + :min -100 :max 100 :width "200px" :on-change #(reset! value %)] @@ -82,11 +88,72 @@ :children [[box :align :start :child [:code ":setpoint"]] [slider :model setpoint - :min 0 + :min -100 :max 100 :width "200px" :on-change #(reset! setpoint %)] [label :label @setpoint]]] + [h-box + :gap "10px" + :children [[box :align :start :child [:code ":min-val"]] + [slider + :model min-val + :min -100 + :max 100 + :width "200px" + :on-change #(reset! min-val %)] + [label :label @min-val]]] + [h-box + :gap "10px" + :children [[box :align :start :child [:code ":max-val"]] + [slider + :model max-val + :min -100 + :max 100 + :width "200px" + :on-change #(reset! max-val %)] + [label :label @max-val]]] + [h-box + :gap "10px" + :children [[box :align :start :child [:code ":warn-val"]] + [slider + :model warn-val + :min -100 + :max 100 + :width "200px" + :on-change #(reset! warn-val %)] + [label :label @warn-val]]] + [h-box + :gap "10px" + :children [[box :align :start :child [:code ":gradations"]] + [slider + :model gradations + :min 0 + :max 10 + :width "200px" + :on-change #(reset! gradations %)] + [label :label @gradations]]] + [h-box + :gap "10px" + :children [[box :align :start :child [:code ":unit"]] + [single-dropdown + :model unit + :choices [{:id "Mw" :label "Megawatts" :group "Electrical"} + {:id "M/s" :label "Metres per second" :group "Motion"} + {:id "F/f" :label "Furlongs per fortnight" :group "Motion"} + {:id "°C" :label "Degrees Celsius" :group "Temperature"}] + :width "200px" + :on-change #(reset! unit %)]]] + [h-box + :gap "10px" + :children [[box :align :start :child [:code ":size"]] + [slider + :model size + :min 25 + :max 100 + :width "200px" + :on-change #(reset! size %)] + [label :label @size]]] ]]]]]]]])))