Thermostat temperature overhaul

5 files changed, 154 insertions, 22 deletions

diff --git a/index.html b/index.html
index 2cc253b..879b87c 100644
--- a/index.html
+++ b/index.html
@@ -36,6 +36,7 @@
     </content>
 
     <script src="scripts/gui-common/color.js"></script>
+    <script src="scripts/gui-common/temperature.js"></script>
     <script src="scripts/gui-common/widgets.js"></script>
     <script src="scripts/gui-common/widget-set.js"></script>
     <script src="scripts/main.js"></script>
diff --git a/scripts/gui-common/temperature.js b/scripts/gui-common/temperature.js
new file mode 100644
index 0000000..ba8161a
--- /dev/null
+++ b/scripts/gui-common/temperature.js
@@ -0,0 +1,90 @@
+'use strict';
+
+class Temperature {
+
+    /// Temperature in kelvin
+    #temp = 0;
+
+    /**
+     * Constructor
+     * @param {number} k Temperature in kelvin
+     */
+    constructor(k) {
+        this.#temp = k;
+    }
+
+    /**
+     * Create a new temperature object using celcius
+     * @param {number} c 
+     * @returns {Temperature}
+     */
+    static from_celcius(c) {
+        return new Temperature(c + 273.15);
+    }
+
+    /**
+     * Get the temperature in celcius
+     * @returns {number}
+     */
+    to_celcius() {
+        return this.#temp - 273.15;
+    }
+
+    /**
+     * Create a new temperature object using fahrenheit
+     * @param {number} f 
+     * @returns {Temperature}
+     */
+    static from_fahrenheit(f) {
+        return new Temperature((f + 459.67) * 5 / 9);
+    }
+
+    /**
+     * Get the temperature in fahrenheit
+     * @returns {number}
+     */
+    to_fahrenheit() {
+        return (this.#temp * 9 / 5) - 459.67;
+    }
+    
+    /**
+     * From degrees halc
+     * @param {number} h
+     * @returns {Temperature} 
+     */
+    static from_halc(h) {
+        return Temperature.from_celcius(h / 2);
+    }
+
+    /**
+     * To degrees halc
+     * @returns {number}
+     */
+    to_halc() {
+        return this.to_celcius() * 2;
+    }
+
+    /**
+     * Get the temperature in kelvin
+     * @returns {number}
+     */
+    to_kelvin() {
+        return this.#temp;
+    }
+
+    /**
+     * Add the temperature to the current temperature
+     * @param {Temperature} t 
+     */
+    add(t) {
+        this.#temp += t.#temp;
+    }
+
+    /**
+     * Subtract the temperature from the current temperature
+     * @param {Temperature} t
+     */
+    sub(t) {
+        this.#temp -= t.#temp;
+    }
+}
\ No newline at end of file
diff --git a/scripts/gui-common/widget-set.js b/scripts/gui-common/widget-set.js
index bd6ccd8..ae79ae2 100644
--- a/scripts/gui-common/widget-set.js
+++ b/scripts/gui-common/widget-set.js
@@ -35,7 +35,8 @@
 
 /**
  * @typedef OSmThermostatProps
- * @property {number} gague
+ * @property {Temperature} gague
+ * @property {number} [unit]
  * @property {number} [deviation]
  * @property {Color} [color_cold]
  * @property {Color} [color_temperate]
@@ -103,7 +104,7 @@
  */
 
 /**
- * @typedef {DescBase & {type: "thermostat", props: OSmThermostatProps, state: number}} DescThermostat
+ * @typedef {DescBase & {type: "thermostat", props: OSmThermostatProps, state: Temperature}} DescThermostat
  */
 
 /**
@@ -235,6 +236,7 @@ class WidgetSet extends EventTarget{
     static parse_thermostat(desc)
     {
         let merge = {...{
+            unit: 0,
             deviation: 7,
             color_cold: Color.from_rgb(0, 133, 255),
             color_temperate: Color.from_rgb(18, 229, 82),
@@ -243,11 +245,16 @@ class WidgetSet extends EventTarget{
             tw: 2,
         }, ...desc.props};
 
-        let cc = new Color(...merge.color_cold.channels);
-        let ct = new Color(...merge.color_temperate.channels);
-        let cw = new Color(...merge.color_warm.channels);
-
-        let out = new WidgetThermostat(desc.state, merge.gague, merge.deviation, cc, ct, cw, merge.ct, merge.tw);
+        let out = new WidgetThermostat(
+            desc.state,
+            merge.gague,
+            merge.unit,
+            merge.deviation,
+            merge.color_cold,
+            merge.color_temperate,
+            merge.color_warm,
+            merge.ct,
+            merge.tw);
         out.set_by_id("name", desc.name);
         return out;
     }
diff --git a/scripts/gui-common/widgets.js b/scripts/gui-common/widgets.js
index 829e76f..8da265e 100644
--- a/scripts/gui-common/widgets.js
+++ b/scripts/gui-common/widgets.js
@@ -878,8 +878,8 @@ class WidgetColorWheel extends WidgetDragable
 
 /**
  * @typedef {object} ThermSpec
- * @property {number} temp
- * @property {number} gague
+ * @property {Temperature} temp
+ * @property {Temperature} gague
  */
 
 /**
@@ -893,10 +893,21 @@ class WidgetThermostat extends Widget
     /** @type {HTMLElement} */
     #temp = null;
 
+    /** @type {WidgetButton} */
+    #unit = null;
+
+    static #UNIT_MAP = [
+        ["°C", "to_celcius"],
+        ["°F", "to_fahrenheit"],
+        ["K", "to_kelvin"],
+        ["°H", "to_halc"],
+    ];
+
     /**
      * Constructor
-     * @param {number} value Current set point
-     * @param {number} gague Current temperature being read from sensor(s)
+     * @param {Temperature} value Current set point
+     * @param {Temperature} gague Current temperature being read from sensor(s)
+     * @param {number} [unit] The current display unit (0: Celcius, 1: Fahrenheit, 2: Kelvin, 3: Halc)
      * @param {number} [dev] The deviation of the arch (how far in degrees (temperature) from the middle to each end of the arc)
      * @param {Color} [cold_col] The color the arch will display when in "cold" temperatures
      * @param {Color} [temp_col] The color the arch will display when in "temperate" temperatures
@@ -907,6 +918,7 @@ class WidgetThermostat extends Widget
     constructor(
         value,
         gague,
+        unit = 0,
         dev = 7,
         cold_col = Color.from_rgb(0, 133, 255),
         temp_col = Color.from_rgb(18, 229, 82),
@@ -925,6 +937,10 @@ class WidgetThermostat extends Widget
         this.#gague = document.createElement("gague");
         this.element.appendChild(this.#gague);
 
+        this.#unit = new WidgetButton();
+        this.element.appendChild(this.#unit.element);
+        this.#unit.addEventListener("change", this.#unit_handler.bind(this));
+
         this.addEventListener("change", this.update);
 
         super.set_by_id("deviation", dev);
@@ -933,16 +949,38 @@ class WidgetThermostat extends Widget
         super.set_by_id("warm", warm_col);
         super.set_by_id("ct", ct);
         super.set_by_id("tw", tw);
+        super.set_by_id("unit", unit);
         super.set_by_id("gague", gague);
         this.set(value);
     }
 
+    /**
+     * 
+     * @param {CustomEvent} event 
+     */
+    #unit_handler(event)
+    {
+        if (event.detail)
+            console.log(event);
+
+        if (!this.#unit.get())
+            return;
+
+        let unit = this.get("unit");
+        if (unit >= 0 && unit + 1 < WidgetThermostat.#UNIT_MAP.length)
+            this.set_by_id("unit", this.get("unit") + 1);
+        else
+            this.set_by_id("unit", 0);
+    }
+
     update()
     {
-        /** @type {ThermSpec} */
-        let temp = this.get(), gague = this.get("gague");
+        let unit = WidgetThermostat.#UNIT_MAP[this.get("unit")];
+        let temp = this.get()[unit[1]]()
+        let gague = this.get("gague")[unit[1]]();
         this.#gague.innerText = `${Math.fround(gague)}`;
-        this.#temp.innerText = `${Math.fround(temp)}°`;
+        this.#temp.innerText = `${Math.fround(temp)}`;
+        this.#unit.element.innerText = `${unit[0]}`;
 
         // Generate a percentage relative to the deviation
         let div = (gague - temp) / this.get("deviation");
@@ -972,7 +1010,7 @@ class WidgetThermostat extends Widget
     set_by_id(id, v, emit = false)
     {
         super.set_by_id(id, v, emit);
-        if (id == "deviation" || id == "cold" || id == "temp" || id == "warm" || id == "ct" || id == "tw" || id == "gague")
+        if (id == "deviation" || id == "cold" || id == "temp" || id == "warm" || id == "ct" || id == "tw" || id == "gague" || id == "unit")
         {
             this.update();
         }
@@ -1043,17 +1081,13 @@ class WidgetSelectButton extends Widget
 			{
                 /** @type {number} */
 				let swap = this.#selected.shift();
-                this.#swgs[swap].removeEventListener("change", this.#binder);
 			    this.#swgs[swap].set_by_id("value", -swap - 1, false);
-                this.#swgs[swap].addEventListener("change", this.#binder);
 			}
 			this.#selected.push(idx);
 		}
 		else
 		{
-            this.#swgs[idx].removeEventListener("change", this.#binder);
             this.#swgs[idx].set_by_id("value", -swap - 1, false);
-            this.#swgs[idx].addEventListener("change", this.#binder);
 		}
 		
 		if (!this.#removeLastOver && this.#selected.length >= this.#maxSelections)
diff --git a/scripts/main.js b/scripts/main.js
index d0f4e28..e67cff3 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -14,9 +14,9 @@ class Client {
             { type: "color-light", name: "cli", state: 0.7 },
             { type: "color-temp", name: "ctp", state: 3000 },
             { type: "color-wheel", name: "cwh", state: Color.from_rgb(255, 200, 200) },
-            { type: "thermostat", name: "thm", props: {gague: 69}, state: 72 },
+            { type: "thermostat", name: "thm", props: {gague: Temperature.from_celcius(21)}, state: Temperature.from_celcius(23) },
             { type: "multi-select", name: "msl", props: {max: 2, values: ["aeiou", "sometimes y"], labels: ["vowels", "extra vowels"]}, state: []},
-            { type: "scrubber", name: "scb", props: {min: 60, max: 80, step: 1}, state: 72 },
+            { type: "scrubber", name: "scb", props: {min: 18, max: 26, step: 0.5}, state: 23 },
             { type: "radio", name: "rad", props: {values: ["a", "b"], labels: ["a", "b"]}, state: null}
         ];
 
@@ -31,7 +31,7 @@ class Client {
     changeSet(e)
     {
         if (e.detail.name == "scb" && e.detail.changed == "value")
-            this.set.widgets["thm"].set(e.detail.value);
+            this.set.widgets["thm"].set(Temperature.from_celcius(e.detail.value));
     }
 }