simon/swinging-needle-meter
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Lots of prettiness.

Browse source
This commit is contained in:
simon 2017-07-11 21:44:16 +01:00
parent 6f611ec122
commit 3ebc2612fa
3 changed files with 99 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
resources/public/css/chosen-sprite.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 646 B

11
src/cljs/swinging_needle_meter/swinging_needle_meter.cljs
View file

@ -156,6 +156,12 @@
:y (- cy min-radius)} (as-label label)]]) :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 (defn swinging-needle-meter
"Render an SVG 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] [& {: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" [:svg {:xmlSpace "preserve"
:overflow "visible" :overflow "visible"
:viewBox (string/join " " [0 0 width height]) :viewBox (string/join " " [0 0 width height])
:width (str width "px")
:height (str height "px")
:y "0px" :y "0px"
:x "0px" :x "0px"
:version "1.1" :version "1.1"
@ -233,6 +241,7 @@
:id (str id "-needle") :id (str id "-needle")
:d (str "M " cx "," (- cy needle-length) " " cx "," cy) ;; "M cx,20 cx,100" :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 ")") }] :transform (str "rotate( " (deflection model min-value max-value) "," cx "," cy ")") }]
(if (> gradations 0)
(apply vector (cons :g (map #(let (apply vector (cons :g (map #(let
[value (+ min-value [value (+ min-value
(* (*
@ -242,7 +251,7 @@
(gradation cx cy gradation-inner needle-length (gradation cx cy gradation-inner needle-length
(deflection value min-value max-value) (deflection value min-value max-value)
value)) value))
(range 0 (+ gradations 1))))) (range 0 (+ gradations 1))))))
[:rect {:class frame-class [:rect {:class frame-class
:id (str id "-frame") :id (str id "-frame")
:x (* width 0.05) :y (* height .05) :height cy :width (* width 0.9)}] :x (* width 0.05) :y (* height .05) :height cy :width (* width 0.9)}]

93
src/cljs/swinging_needle_meter/views.cljs
View file

@ -1,6 +1,7 @@
(ns swinging-needle-meter.views (ns swinging-needle-meter.views
(:require [re-frame.core :as re-frame] (: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.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]] [swinging-needle-meter.utils :refer [panel-title title2 args-table github-hyperlink status-text]]
[reagent.core :as reagent])) [reagent.core :as reagent]))
@ -11,8 +12,14 @@
(defn swinging-needle-demo (defn swinging-needle-demo
[] []
(let [value (reagent/atom 75) (let [value (reagent/atom 60)
setpoint (reagent/atom 75)] 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 (fn
[] []
[v-box [v-box
@ -56,23 +63,22 @@
:children [[swinging-needle-meter :children [[swinging-needle-meter
:model value :model value
:setpoint setpoint :setpoint setpoint
:unit "Mw" :unit (deref-or-value unit)
;; :min-value 20 :min-value (deref-or-value min-val)
;; :warn-value 35 :warn-value (deref-or-value warn-val)
;; :max-value 40 :max-value (deref-or-value max-val)
;; :max-value (aget js/Math "PI")
:tolerance 2 :tolerance 2
:alarm-class "snm-warning" :alarm-class "snm-warning"
:gradations 5 :gradations (deref-or-value gradations)
:height 300 :height (int (* (deref-or-value size) 6))
:width 500] :width (int (* (deref-or-value size) 10))]
[title :level :level3 :label "Parameters"] [title :level :level3 :label "Parameters"]
[h-box [h-box
:gap "10px" :gap "10px"
:children [[box :align :start :child [:code ":model"]] :children [[box :align :start :child [:code ":model"]]
[slider [slider
:model value :model value
:min 0 :min -100
:max 100 :max 100
:width "200px" :width "200px"
:on-change #(reset! value %)] :on-change #(reset! value %)]
@ -82,11 +88,72 @@
:children [[box :align :start :child [:code ":setpoint"]] :children [[box :align :start :child [:code ":setpoint"]]
[slider [slider
:model setpoint :model setpoint
:min 0 :min -100
:max 100 :max 100
:width "200px" :width "200px"
:on-change #(reset! setpoint %)] :on-change #(reset! setpoint %)]
[label :label @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]]]
]]]]]]]]))) ]]]]]]]])))