From 5413d9b9e7c4a348be22e150ed0f6b00476149b1 Mon Sep 17 00:00:00 2001 From: Jon Ziebell Date: Thu, 4 Mar 2021 20:45:48 -0500 Subject: [PATCH] Added title text to icons --- js/component/card/sensors.js | 8 +++--- js/component/card/system.js | 47 +++++++++++++++++++++--------------- js/component/icon.js | 8 +++++- 3 files changed, 38 insertions(+), 25 deletions(-) diff --git a/js/component/card/sensors.js b/js/component/card/sensors.js index 1760d34..1a236b2 100644 --- a/js/component/card/sensors.js +++ b/js/component/card/sensors.js @@ -132,9 +132,9 @@ beestat.component.card.sensors.prototype.decorate_sensor_ = function(parent, sen } if (sensor.occupancy === true) { - (new beestat.component.icon('eye')).render(td_icons); + (new beestat.component.icon('eye', 'Occupied')).render(td_icons); } else { - (new beestat.component.icon('eye_off')) + (new beestat.component.icon('eye_off', 'Unoccupied')) .set_color(beestat.style.color.bluegray.light) .render(td_icons); } @@ -145,9 +145,9 @@ beestat.component.card.sensors.prototype.decorate_sensor_ = function(parent, sen })); if (sensor.in_use === true) { - (new beestat.component.icon('check')).render(td_icons); + (new beestat.component.icon('check', 'In use')).render(td_icons); } else { - (new beestat.component.icon('check')) + (new beestat.component.icon('check', 'Not in use')) .set_color(beestat.style.color.bluegray.light) .render(td_icons); } diff --git a/js/component/card/system.js b/js/component/card/system.js index 23fc714..3e2750a 100644 --- a/js/component/card/system.js +++ b/js/component/card/system.js @@ -86,7 +86,7 @@ beestat.component.card.system.prototype.decorate_circle_ = function(parent) { }); circle.appendChild(humidity_container); - (new beestat.component.icon('water_percent') + (new beestat.component.icon('water_percent', 'Humidity') .set_size(24) ).render(humidity_container); @@ -154,7 +154,7 @@ beestat.component.card.system.prototype.decorate_weather_ = function(parent) { }); circle.appendChild(humidity_container); - (new beestat.component.icon('water_percent') + (new beestat.component.icon('water_percent', 'Humidity') .set_size(16) ).render(humidity_container); @@ -175,20 +175,20 @@ beestat.component.card.system.prototype.decorate_weather_ = function(parent) { beestat.component.card.system.prototype.decorate_equipment_ = function(parent) { var thermostat = beestat.cache.thermostat[this.thermostat_id_]; - var render_icon = function(icon_parent, icon, color, text) { - (new beestat.component.icon(icon) + var render_icon = function(icon_parent, icon, color, subscript, tooltip) { + (new beestat.component.icon(icon, tooltip) .set_size(24) .set_color(color) ).render(icon_parent); - if (text !== undefined) { + if (subscript !== undefined) { var sub = $.createElement('sub') .style({ 'font-size': '10px', 'font-weight': beestat.style.font_weight.bold, 'color': color }) - .innerHTML(text); + .innerHTML(subscript); icon_parent.appendChild(sub); } else { // A little spacer to help things look less uneven. @@ -198,64 +198,71 @@ beestat.component.card.system.prototype.decorate_equipment_ = function(parent) { }; if (thermostat.running_equipment.length === 0) { - render_icon(parent, 'cancel', beestat.style.color.gray.base, 'none'); + render_icon(parent, 'cancel', beestat.style.color.gray.base, 'none', 'No equipment running'); } else { thermostat.running_equipment.forEach(function(equipment) { let subscript; + let tooltip; switch (equipment) { case 'fan': - render_icon(parent, 'fan', beestat.style.color.gray.light); + render_icon(parent, 'fan', beestat.style.color.gray.light, undefined, 'Fan'); break; case 'cool_1': + tooltip = 'Cool'; if (thermostat.system_type.detected.cool.stages > 1) { subscript = '1'; + tooltip += ' 1'; } else { subscript = undefined; } - render_icon(parent, 'snowflake', beestat.style.color.blue.light, subscript); + render_icon(parent, 'snowflake', beestat.style.color.blue.light, subscript, tooltip); break; case 'cool_2': - render_icon(parent, 'snowflake', beestat.style.color.blue.light, '2'); + render_icon(parent, 'snowflake', beestat.style.color.blue.light, '2', 'Cool 2'); break; case 'heat_1': + tooltip = 'Heat'; if (thermostat.system_type.detected.heat.stages > 1) { subscript = '1'; + tooltip += ' 1'; } else { subscript = undefined; } - render_icon(parent, 'fire', beestat.style.color.orange.base, subscript); + render_icon(parent, 'fire', beestat.style.color.orange.base, subscript, tooltip); break; case 'heat_2': - render_icon(parent, 'fire', beestat.style.color.orange.base, '2'); + render_icon(parent, 'fire', beestat.style.color.orange.base, '2', 'Heat 2'); break; case 'heat_3': - render_icon(parent, 'fire', beestat.style.color.orange.base, '3'); + render_icon(parent, 'fire', beestat.style.color.orange.base, '3', 'Heat 3'); break; case 'auxiliary_heat_1': + tooltip = 'Aux heat'; if (thermostat.system_type.detected.auxiliary_heat.stages > 1) { subscript = '1'; + tooltip += ' 1'; } else { subscript = undefined; } - render_icon(parent, 'fire', beestat.style.color.red.base, subscript); + render_icon(parent, 'fire', beestat.style.color.red.base, subscript, tooltip); break; case 'auxiliary_heat_2': - render_icon(parent, 'fire', beestat.style.color.red.base, '2'); + render_icon(parent, 'fire', beestat.style.color.red.base, '2', 'Aux heat 2'); break; case 'auxiliary_heat_3': - render_icon(parent, 'fire', beestat.style.color.red.base, '3'); + render_icon(parent, 'fire', beestat.style.color.red.base, '3', 'Aux heat 3'); break; case 'humidifier': - render_icon(parent, 'water_percent', beestat.style.color.gray.base, ''); + render_icon(parent, 'water_percent', beestat.style.color.gray.base, '', 'Humidifier'); break; case 'dehumidifier': - render_icon(parent, 'water_off', beestat.style.color.gray.base, ''); + render_icon(parent, 'water_off', beestat.style.color.gray.base, '', 'Dehumidifier'); break; case 'ventilator': - render_icon(parent, 'air_purifier', beestat.style.color.gray.base, 'v'); + render_icon(parent, 'air_purifier', beestat.style.color.gray.base, 'v', 'Ventilator'); break; case 'economizer': - render_icon(parent, 'cash', beestat.style.color.gray.base, ''); + render_icon(parent, 'cash', beestat.style.color.gray.base, '', 'Economizer'); break; } }); diff --git a/js/component/icon.js b/js/component/icon.js index e7afe4c..bd083f2 100644 --- a/js/component/icon.js +++ b/js/component/icon.js @@ -1,5 +1,6 @@ -beestat.component.icon = function(icon_name) { +beestat.component.icon = function(icon_name, tooltip) { this.icon_name_ = icon_name; + this.tooltip_ = tooltip; beestat.component.apply(this, arguments); }; beestat.extend(beestat.component.icon, beestat.component); @@ -23,6 +24,11 @@ beestat.component.icon.prototype.decorate_ = function(parent) { 'icon', this.icon_name_ ]); + + if (this.tooltip_ !== undefined) { + icon.setAttribute('title', this.tooltip_); + } + container.appendChild(icon); if (this.size_ !== undefined && this.size_ !== 24) {