custom values for switch

README.md

@@ -45,6 +45,7 @@ The widgets are designed for VIS 1.x.
 * Added HTML-Dialog
 * Made "modal" to default (modal darkens the background when a dialog window is open)
 * Section 'dialog' splitted into 'dialog settings' and 'dialog content'
+* Made values of SwitchBool customizable and renamed to Switch
 
 ### 0.3.3 (2025-01-03)
 

widgets/vis-homekittiles.html

@@ -364,6 +364,57 @@
 	</div>
 </script>
 
+<script id="tplHomekittilesSwitchBool"
+	type="text/ejs"
+	class="vis-tpl"
+	data-vis-set="vis-homekittiles"
+	data-vis-update-style="true"
+	data-vis-type="ctrl"
+	data-vis-name="hkt-Switch"
+	data-vis-prev='<div id="prev_tplHomekittilesSwitchBool" style="position: relative;">
+						<div class="vis-widget_prev" style="width: 110px; height: 110px; font-size:10px; font-weight: normal;">
+							<div class="homekitTiles tile vis-widget-prev-body state-active">
+								<span class="tileValue" style="background-color: unset; font-size: 30px;">💡</span>
+								<label class="labelGroup1">Switch</label>
+							</div>
+						</div>
+					</div>'
+	data-vis-attrs="description/custom,vis-homekittiles.infoText,hktSwitchBool;
+					oid/id;
+					valueOn[true];
+					valueOff[false];
+					icon/image;iconRound/checkbox;iconColored/checkbox;displaystyle[tile]/select,tile,tile big,tile small,indicator,tile iconOnly,tile textonly/iconShowHideInputfields();"
+	data-vis-attrs0="group.labelGroup1;label[Switch];label2pre;label2oid/id;label2unit;label2post;label2decimals[1];label2factor[1];label2comma[true]/checkbox;label2tdp/checkbox;"
+	data-vis-attrs1="group.labelGroup2;label3pre;label3oid/id;label3unit;label3post;label3decimals[1];label3factor[1];label3comma[true]/checkbox;label3tdp/checkbox;label4pre;label4oid/id;label4unit;label4post;label4decimals[1];label4factor[1];label4comma[true]/checkbox;label4tdp/checkbox;label5pre;label5oid/id;label5unit;label5post;label5decimals[1];label5factor[1];label5comma[true]/checkbox;label5tdp/checkbox;"
+	data-vis-attrs2="group.increment;oidIncrement/id;incrementPlusShow/checkbox;incrementMinusShow/checkbox;incrementPlusValue[1];incrementMinusValue[-1];incrementValueMax[100];incrementValueMin[0];incrementShowOnlyIfTrue/checkbox;"
+	data-vis-attrs3="group.blockOperation;blockOperationIfTrue/checkbox;blockOperationIfFalse/checkbox;blockOperationShowDisabled/checkbox;blockOperationShowIcon/checkbox/addBlockOperationShowHideInputfields();blockOperationIcon/image;blockOperationIconNotInEditor/checkbox;blockOperationUseDifferentOID/checkbox/addBlockOperationShowHideInputfields();oidBlockOperation/id;"
+	data-vis-attrs4="group.acknowledge;ackShowIcon/checkbox/addAckIconShowHideInputfields();ackIcon/image;ackUseSpin/checkbox;ackInvertFunction/checkbox;ackIconNotInEditor/checkbox;"
+	data-vis-attrs5="group.signalpics;numberOfSignals[1]/slider,3,10,1;signalsNotInEditor/checkbox;"
+	data-vis-attrs6="group.signals/byindex;oidSignal(1-numberOfSignals)/id;signalComparison(1-numberOfSignals)/select,comparisonEqual,comparisonNotEqual,comparisonLowerEqual,comparisonGreaterEqual,comparisonLower,comparisonGreater;signalCompValue(1-numberOfSignals);signalIcon(1-numberOfSignals)/image;signalDescription(1-numberOfSignals);"
+>
+	<%
+	var trueVal = this.data.attr('valueOn');
+	if (!trueVal || trueVal == '' || trueVal == 'true') trueVal = true;
+	if (trueVal == 'false') trueVal = false;
+	%>
+	<div class="homekitTiles <%== this.data.attr('displaystyle') %> vis-widget <%= vis.states.attr(this.data['oid'] + '.val') == trueVal ? 'state-active' : 'state-default' %> <%== this.data.attr('class') %>" style="width: <%= this.data.attr('displaystyle') == 'tile big' ? '235' : this.data.attr('displaystyle') == 'tile small' ? '60' : this.data.attr('displaystyle') == 'indicator' ? '110' : '110' %>px; height: <%= this.data.attr('displaystyle') == 'tile big' ? '235' : this.data.attr('displaystyle') == 'tile small' ? '60' : this.data.attr('displaystyle') == 'indicator' ? '30' : '110' %>px;" id="<%= this.data.attr('wid') %>">
+		<div class="vis-widget-body"
+			data-oid="<%= this.data.attr('oid') %>"
+			<%= (el) -> vis.binds['vis-homekittiles'].switch(el, data); %>
+		>
+			<div class="tileIcon <%= this.data.attr('iconColored') ? 'iconColored' : '' %>" <%= (el) -> vis.binds['vis-homekittiles'].addButtonIcon(el, data) %>></div>
+			<div class="labelGroup1" <%= (el) -> vis.binds['vis-homekittiles'].addLabelGroup1(el, data) %>></div>
+			<div class="labelGroup2" <%= (el) -> vis.binds['vis-homekittiles'].addLabelGroup2(el, data) %>></div>
+		</div>
+
+		<div class="ackIcon" <%= (el) -> vis.binds['vis-homekittiles'].addAckIcon(el, data) %>></div>
+		<div class="increment" <%= (el) -> vis.binds['vis-homekittiles'].addIncrement(el, data) %>></div>
+		<div class="blockOperation" <%= (el) -> vis.binds['vis-homekittiles'].addBlockOperation(el, data) %>></div>
+		<div class="signals"><% for (let i = 1; i <= Number(this.data.attr("numberOfSignals")); i++) { %><div class="signal<%= i %>" data-oid="<%= this.data.attr('oidSignal' + i) %>" data-compOp="<%= this.data.attr('signalComparison' + i) %>" data-compVal="<%= this.data.attr('signalCompValue' + i) %>" data-icon="<%= this.data.attr('signalIcon' + i) %>" data-desc="<%= this.data.attr('signalDescription' + i) %>" <%= (el) -> vis.binds['vis-homekittiles'].addSignalIcon(el, data) %>></div><% } %></div>
+	</div>
+</script>
+
+<!-- Backup old SwitchBool
 <script id="tplHomekittilesSwitchBool"
 	type="text/ejs"
 	class="vis-tpl"
@@ -401,6 +452,7 @@
 		<div class="signals"><% for (let i = 1; i <= Number(this.data.attr("numberOfSignals")); i++) { %><div class="signal<%= i %>" data-oid="<%= this.data.attr('oidSignal' + i) %>" data-compOp="<%= this.data.attr('signalComparison' + i) %>" data-compVal="<%= this.data.attr('signalCompValue' + i) %>" data-icon="<%= this.data.attr('signalIcon' + i) %>" data-desc="<%= this.data.attr('signalDescription' + i) %>" <%= (el) -> vis.binds['vis-homekittiles'].addSignalIcon(el, data) %>></div><% } %></div>
 	</div>
 </script>
+-->
 
 <script id="tplHomekittilesValue"
 	type="text/ejs"

widgets/vis-homekittiles/js/vis-homekittiles.js

@@ -214,6 +214,8 @@ $.extend(
 		"unit":							{	"en": "Unit",							"de": "Einheit"								},
 		"value_":						{	"en": "Value ",							"de": "Wert "								},
 		"valueButton_":					{	"en": "Value button ",					"de": "Wert Schaltfläche "					},
+		"valueOn":						{	"en": "Value for ON",					"de": "Wert für EIN"						},
+		"valueOff":						{	"en": "Value for OFF",					"de": "Wert für AUS"						},
 		"view":							{	"en": "View",							"de": "View"								},
 		"view_":						{	"en": "View ",							"de": "View "								},
 		"windowStateLabel":				{	"en": "Label window contact",			"de": "Beschriftung Fensterkontakt"			},
@@ -513,6 +515,60 @@ vis.binds["vis-homekittiles"] = {
 			$this.val(vis.states.attr(oid + '.val'));
 		}
 	},
+
+	//Switch
+	switch: function (el, data) {
+		var $this = $(el);
+		var oid = data.oid;
+		var trueVal = data.valueOn;
+		var falseVal = data.valueOff;
+
+		if (!trueVal || trueVal == '' || trueVal === 'true') trueVal = true;
+		if (!falseVal || falseVal == '' || falseVal === 'false') falseVal = false;
+		if (trueVal === 'false') trueVal = false;
+		if (falseVal === 'true') falseVal = true;
+
+		if (!vis.editMode) {
+			var moved = false;
+			$this.on('click touchend', function () {
+
+				// Protect against two events
+				if (vis.detectBounce(this)) return;
+				if (moved) return;
+
+				var val;
+
+				if (oid) {
+
+					val = vis.states[oid + '.val'];
+					val = val.toString();
+
+					if (val) {
+						if (val === 'true') val = true;
+						if (val === 'false') val = false;
+
+						if (val == trueVal) {
+							vis.setValue(oid, falseVal);
+							$(this).parent().removeClass('state-active');
+							$(this).parent().addClass('state-default');
+						} else {
+							vis.setValue(oid, trueVal);
+							$(this).parent().removeClass('state-default');
+							$(this).parent().addClass('state-active');
+						}
+					}
+				}
+
+			}).on('touchmove', function () {
+				moved = true;
+			}).on('touchstart', function () {
+				moved = false;
+			}).data('destroy', function (id, $widget) {
+				$widget.off('click touchend').off('touchmove').off('touchstart');
+			});
+		}
+	},
+
 	//View in widget dialog - copied from jqui to don't force jqui button styles
 	dialogContainer: function (el, options, persistent, preload) {
 		var $dlg = $(el).parent().find('div.vis-widget-dialog');