diff options
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | scripts/gui-common/temperature.js | 90 | ||||
| -rw-r--r-- | scripts/gui-common/widget-set.js | 21 | ||||
| -rw-r--r-- | scripts/gui-common/widgets.js | 58 | ||||
| -rw-r--r-- | scripts/main.js | 6 |
5 files changed, 154 insertions, 22 deletions
@@ -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)); } } |