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

Entirely resizeable

Browse source
This commit is contained in:
simon 2017-07-11 17:51:17 +01:00
parent 6dca39ce91
commit 6f611ec122
3 changed files with 33 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
resources/public/css/swinging-needle-meter.css
View file

@ -8,13 +8,13 @@
.snm-cursor { .snm-cursor {
stroke:#ff8500; stroke:#ff8500;
stroke-width:5; stroke-width: 3%;
stroke-opacity: 0.5; stroke-opacity: 0.5;
} }
.snm-frame { .snm-frame {
fill: none; fill: none;
stroke-width: 10; stroke-width: 5%;
stroke-linejoin: round; stroke-linejoin: round;
stroke: #444444; stroke: #444444;
} }
@ -25,7 +25,7 @@
} }
.snm-gradation text { .snm-gradation text {
font-size: 50%; font-size: 150%;
font-weight: lighter; font-weight: lighter;
} }
@ -33,11 +33,6 @@
fill: #444444; fill: #444444;
} }
.snm-limit {
text-align: center;
font-size: 66%;
}
.snm-meter { .snm-meter {
height: 50%; height: 50%;
width: auto; width: auto;
@ -51,13 +46,13 @@
.snm-redzone { .snm-redzone {
fill:none; fill:none;
stroke: maroon; stroke: maroon;
stroke-width: 15; stroke-width: 10%;
} }
.snm-scale { .snm-scale {
fill: none; fill: none;
stroke: green; stroke: green;
stroke-width: 15; stroke-width: 10%;
} }
.snm-target .snm-frame { .snm-target .snm-frame {
@ -65,6 +60,7 @@
} }
.snm-value { .snm-value {
font-size: 200%;
text-align: center; text-align: center;
} }

49
src/cljs/swinging_needle_meter/swinging_needle_meter.cljs
View file

@ -41,10 +41,10 @@
:validate-fn number-or-string? :description "current value of the variable being watched. A number between 0 and 100"} :validate-fn number-or-string? :description "current value of the variable being watched. A number between 0 and 100"}
{:name :setpoint :required false :type "double | atom" {:name :setpoint :required false :type "double | atom"
:validate-fn number-or-string? :description "current setpoint for the variable being watched, if any. A number between 0 and 100"} :validate-fn number-or-string? :description "current setpoint for the variable being watched, if any. A number between 0 and 100"}
{:name :width :required false :type "string" :default "100%" {:name :width :required false :type "integer" :default "300"
:validate-fn string? :description "a CSS width"} :validate-fn integer? :description "a CSS width"}
{:name :height :required false :type "string" :default "100%" {:name :height :required false :type "integer" :default "200"
:validate-fn string? :description "a CSS height"} :validate-fn integer? :description "a CSS height"}
{:name :min-value :required false :type "double" :default 0 {:name :min-value :required false :type "double" :default 0
:validate-fn number? :description "the minimum value model can take"} :validate-fn number? :description "the minimum value model can take"}
{:name :max-value :required false :type "double" :default 100 {:name :max-value :required false :type "double" :default 100
@ -92,11 +92,6 @@
(def full-scale-deflection 140) (def full-scale-deflection 140)
;; ultimately this should be resizeable, and radius should be a function of
;; size...
(def scale-radius 75)
(defn deflection (defn deflection
"Return the linear deflection of a needle given this `value` on the "Return the linear deflection of a needle given this `value` on the
range `min-value`...`max-value`." range `min-value`...`max-value`."
@ -164,8 +159,8 @@
(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]
:or {width "100%" :or {width 300
height "100%" height 200
min-value 0 min-value 0
max-value 100 max-value 100
warn-value 80 warn-value 80
@ -184,7 +179,12 @@
{:pre [(validate-args-macro swinging-needle-args-desc args "swinging-needle")]} {:pre [(validate-args-macro swinging-needle-args-desc args "swinging-needle")]}
(let [model (deref-or-value model) (let [model (deref-or-value model)
setpoint (deref-or-value setpoint) setpoint (deref-or-value setpoint)
mid-point-deflection (/ full-scale-deflection 2)] mid-point-deflection (/ full-scale-deflection 2)
cx (/ width 2)
cy (* height 0.90)
needle-length (* height 0.75)
scale-radius (* height 0.7)
gradation-inner (* height 0.55)]
[box [box
:align :start :align :start
:child [:div :child [:div
@ -200,52 +200,53 @@
attr) attr)
[:svg {:xmlSpace "preserve" [:svg {:xmlSpace "preserve"
:overflow "visible" :overflow "visible"
:viewBox "0 0 180 120" :viewBox (string/join " " [0 0 width height])
:y "0px" :y "0px"
:x "0px" :x "0px"
:version "1.1" :version "1.1"
:id id :id id
:class (str "snm-meter " class)} :class (str "snm-meter " class)}
[:text [:text
{:text-anchor "middle" {:text-anchor "middle"
:x 80 :x (/ width 2)
:y 70 :y (/ height 2)
:width "100" :width "100"
:id (str id "-current-value") :id (str id "-current-value")
:class "snm-value"}[:tspan (str (as-label model) (if unit " ") unit)]] :class "snm-value"}[:tspan (str (as-label model) (if unit " ") unit)]]
[:path {:class scale-class [:path {:class scale-class
:id (str id "-scale") :id (str id "-scale")
:d (describe-arc 80 100 scale-radius :d (describe-arc cx cy scale-radius
(deflection min-value min-value max-value) (deflection min-value min-value max-value)
(deflection max-value min-value max-value))}] (deflection max-value min-value max-value))}]
[:path {:class redzone-class [:path {:class redzone-class
:id (str id "-redzone") :id (str id "-redzone")
:d (describe-arc 80 100 scale-radius :d (describe-arc cx cy scale-radius
(deflection warn-value min-value max-value) (deflection warn-value min-value max-value)
(deflection max-value min-value max-value))}] (deflection max-value min-value max-value))}]
[:path {:class cursor-class [:path {:class cursor-class
:id (str id "-cursor") :id (str id "-cursor")
:d "M 80,20 80,100" :d (str "M " cx "," (- cy needle-length) " " cx "," cy) ;; "M cx,20 cx,100"
:visibility (if (and (number? setpoint) (> setpoint min-value)) "visible" "hidden") :visibility (if (and (number? setpoint) (> setpoint min-value)) "visible" "hidden")
:transform (str "rotate( " (deflection setpoint min-value max-value) ", 80, 100)")}] :transform (str "rotate( " (deflection setpoint min-value max-value) "," cx "," cy ")")}]
[:path {:class needle-class [:path {:class needle-class
:id (str id "-needle") :id (str id "-needle")
:d "M 80,20 80,100" :d (str "M " cx "," (- cy needle-length) " " cx "," cy) ;; "M cx,20 cx,100"
:transform (str "rotate( " (deflection model min-value max-value) ", 80, 100)") }] :transform (str "rotate( " (deflection model min-value max-value) "," cx "," cy ")") }]
(apply vector (cons :g (map #(let (apply vector (cons :g (map #(let
[value (+ min-value [value (+ min-value
(* (*
(/ (/
(- max-value min-value) (- max-value min-value)
gradations) %))] gradations) %))]
(gradation 80 100 60 82 (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 "5" :y "5" :height "100" :width "150"}] :x (* width 0.05) :y (* height .05) :height cy :width (* width 0.9)}]
[:circle {:class hub-class [:circle {:class hub-class
:id (str id "-hub") :id (str id "-hub")
:r "10" :cx "80" :cy "100"}]] :r (/ height 10) :cx cx :cy cy}]]
]])) ]]))

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

@ -64,7 +64,8 @@
:tolerance 2 :tolerance 2
:alarm-class "snm-warning" :alarm-class "snm-warning"
:gradations 5 :gradations 5
:width "350px"] :height 300
:width 500]
[title :level :level3 :label "Parameters"] [title :level :level3 :label "Parameters"]
[h-box [h-box
:gap "10px" :gap "10px"