From 5506e4482553266addf60286159b29f12cff519b Mon Sep 17 00:00:00 2001
From: Standarduser <github.com@sebastiankoehler.de>
Date: Sun, 5 May 2024 18:34:26 +0200
Subject: [PATCH] added thermostat widget

---
 README.md                                     |   2 +-
 widgets/vis-homekittiles.html                 | 148 ++++++++-
 widgets/vis-homekittiles/css/style.css        | 297 ++++++++++++++----
 .../vis-homekittiles/js/vis-homekittiles.js   | 228 +++++++++++++-
 4 files changed, 590 insertions(+), 85 deletions(-)

diff --git a/README.md b/README.md
index de617ce..88e16a3 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,6 @@ The widgets are designed for VIS 1.x.
 ## Things to do
 
 * create Mini-mediaplayer
-* create Thermostat
 * create Select-tile
 * create Submenue-Button
 * Radiobutton: new property "division" with selectable values (1:1; 3:4)
@@ -44,6 +43,7 @@ The widgets are designed for VIS 1.x.
 
 * (Standarduser) made colors of datepicker window nice
 * (Standarduser) removed test divs from hkt-ViewInWidget-Dialog
+* (Standarduser) added thermostat widget
 
 ### 0.0.12 (2024-05-03)
 
diff --git a/widgets/vis-homekittiles.html b/widgets/vis-homekittiles.html
index 30503fe..ceb0990 100644
--- a/widgets/vis-homekittiles.html
+++ b/widgets/vis-homekittiles.html
@@ -113,11 +113,11 @@
 			<div class="homekitTiles label smalllabel">Small label</div>'
 		data-vis-attrs="description/custom,vis-homekittiles.infoText,hktLabel;text/text;textstyle[textlabel]/select,headline1,headline2,headline3,textlabel,smalllabel;"
 >
-    <div class="homekitTiles label <%== this.data.attr('textstyle') %> vis-widget <%== this.data.attr('class') %>" style="width:200px; height:<%= this.data.attr('textstyle') == 'headline1' ? '28' : this.data.attr('textstyle') == 'headline2' ? '18' : this.data.attr('textstyle') == 'headline3' ? '14' : this.data.attr('textstyle') == 'textlabel' ? '18' : this.data.attr('textstyle') == 'smalllabel' ? '14' : '20' %>px;" id="<%= this.data.attr('wid') %>">
-        <div class="vis-widget-body">
-            <%== this.data.attr('text') %>
-        </div>
-    </div>
+	<div class="homekitTiles label <%== this.data.attr('textstyle') %> vis-widget <%== this.data.attr('class') %>" style="width:200px; height:<%= this.data.attr('textstyle') == 'headline1' ? '28' : this.data.attr('textstyle') == 'headline2' ? '18' : this.data.attr('textstyle') == 'headline3' ? '14' : this.data.attr('textstyle') == 'textlabel' ? '18' : this.data.attr('textstyle') == 'smalllabel' ? '14' : '20' %>px;" id="<%= this.data.attr('wid') %>">
+		<div class="vis-widget-body">
+			<%== this.data.attr('text') %>
+		</div>
+	</div>
 </script>
 
 <script id="tplHomekittilesNotification"
@@ -442,6 +442,124 @@
 	</div>
 </script>
 
+<script id="tplHomekittilesThermostatDialog"
+
+		type="text/ejs"
+		class="vis-tpl"
+		data-vis-set="vis-homekittiles"
+		data-vis-update-style="true"
+		data-vis-type="static,dialog"
+		data-vis-name="hkt-Thermostat-Dialog"
+		data-vis-prev='<div id="prev_tplHomekittilesValue" 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">22°</span>
+									<label class="labelGroup1">Thermostat-Dialog</label>
+								</div>
+							</div>
+						</div>'
+		data-vis-attrs="description/custom,vis-homekittiles.infoText,hktThermostatDialog;
+						oidActualTemperature/id;
+						oidSetPointTemperature/id;
+						oidHumidity/id;
+						oidActiveProfile/id;
+						oidLowBat/id;
+						oidUnreach/id;
+						oidWindowState/id;
+						unitTemperature[°];
+						unitHumidity[% r.F.];
+						temperatureMin[15];
+						temperatureMax[28];
+						temperatureStep[0.5];
+						showLikeActive[true]/checkbox;"
+		data-vis-attrs0="group.label;label[Thermostat];label2pre[Set at];label2post[];"
+		data-vis-attrs1="group.blockOperation;blockOperationIfTrue/checkbox;blockOperationIfFalse/checkbox;blockOperationShowIcon/checkbox;blockOperationIcon/image;blockOperationIconNotInEditor/checkbox;blockOperationUseDifferentOID/checkbox;blockOperationOID/id;"
+		data-vis-attrs2="group.thermostatDialog;
+						title[Room];
+						closebuttonLabel[Close];
+						actualTemperatureLabel[Actual temperature];
+						setpointTemperatureLabel[Setpoint temperature];
+						actualHumidityLabel[Humidity];
+						activeProfileLabel[Temperature profile];
+						activeProfileValues[1§2§3§4§5§6];
+						activeProfileTexts[Comfort§Eco§-§-§Preheating§Away];
+						windowStateLabel[Window];
+						windowStateValues[0§1];
+						windowStateTexts[closed§open];
+						lowBatLabel[Battery low];
+						unreachLabel[Unreach];
+						autoclose/slider,0,30000,100;
+						modal/checkbox;
+						dialog_top;
+						dialog_left;
+						arrowDirection/nselect,,top,right,bottom,left;"
+>
+	<div class="homekitTiles tile thermostatDialog vis-widget <%= this.data.attr('showLikeActive') ? 'state-active' : 'state-default' %> <%== this.data.attr('class') %>" style="width: 110px; height: 110px;" id="<%= this.data.attr('wid') %>">
+
+		<%
+		if (this.data.attr('oidActiveProfile')) {
+			var activeProfile = vis.states.attr(this.data['oidActiveProfile'] + '.val');
+			var activeProfileValue = (data.attr('activeProfileValues') ? data.attr('activeProfileValues').split(';') : []);
+			var activeProfileText  = (data.attr('activeProfileTexts')  ? data.attr('activeProfileTexts').split(';')  : []);
+			if (activeProfileValue.includes(activeProfile)) activeProfile = activeProfileText[activeProfileValue.indexOf(activeProfile)];
+		}
+
+		if (this.data.attr('oidWindowState')) {
+			var windowState = vis.states.attr(this.data['oidWindowState'] + '.val');
+			var windowStateValue = (data.attr('windowStateValues') ? data.attr('windowStateValues').split(';') : []);
+			var windowStateText  = (data.attr('windowStateTexts')  ? data.attr('windowStateTexts').split(';')  : []);
+			if (windowStateValue.includes(windowState)) windowState = windowStateText[windowStateValue.indexOf(windowState)];
+		}
+		%>
+
+		<div class="vis-widget-body" id="<%= this.data.attr('wid') %>_body">
+			<span class="tileValue <%= vis.states.attr(this.data['oidActualTemperature'] + '.val') < vis.states.attr(this.data['oidSetPointTemperature'] + '.val') ? 'heating' : vis.states.attr(this.data['oidActualTemperature'] + '.val') > vis.states.attr(this.data['oidSetPointTemperature'] + '.val') ? 'cooling' : '' %>"><%= vis.states.attr(this.data['oidActualTemperature'] + '.val') %><%= this.data.attr('unitTemperature') %></span>
+			<div class="labelGroup1">
+				<span class="label"><%= this.data.attr('label') %></span>
+				<br>
+				<span class="label2pre"><%= this.data.attr('label2pre') %></span>
+				<span class="label2value"><%= vis.states.attr(this.data['oidSetPointTemperature'] + '.val') %></span><span class="label2unit"><%= this.data.attr('unitTemperature') %></span>
+				<span class="label2post"><%= this.data.attr('label2post') %></span>
+			</div>
+			<div class="labelGroup2">
+				<% if (this.data.attr('oidHumidity')) { %><span class="label3value"><%= vis.states.attr(this.data['oidHumidity'] + '.val') %><%= this.data.attr('unitHumidity') %></span><br><% } %>
+				<% if (this.data.attr('oidActiveProfile')) { %><span class="label4value"><%= activeProfile %></span><% } %>
+				<% if (this.data.attr('oidWindowState')) { %><span class="label5value"><%= windowState %></span><br><% } %>
+			</div>
+		</div>
+
+		<div class="vis-widget-dialog <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>_dialog" style="display:none" title="<%= this.data.attr('title') %>">
+
+			<div class="thermostat head">
+				<div class="actualTemperature"><span class="title"><%= this.data.attr('actualTemperatureLabel') %></span><span class="value"><%= vis.states.attr(this.data['oidActualTemperature'] + '.val') %><%= this.data.attr('unitTemperature') %></span></div>
+			</div>
+
+			<div class="thermostat content">
+				<div class="values">
+					<div class="setpointTemperature"><span class="title"><%= this.data.attr('setpointTemperatureLabel') %></span><span class="value"><%= vis.states.attr(this.data['oidSetPointTemperature'] + '.val') %><%= this.data.attr('unitTemperature') %></span></div>
+					<% if (this.data.attr('oidHumidity')) { %><div class="actualHumidity"><span class="title"><%= this.data.attr('actualHumidityLabel') %></span><span class="value"><%= vis.states.attr(this.data['oidHumidity'] + '.val') %><%= this.data.attr('unitHumidity') %></span></div><% } %>
+					<% if (this.data.attr('oidActiveProfile')) { %><div class="activeProfile <%= activeProfile %>"><span class="title"><%= this.data.attr('activeProfileLabel') %></span><span class="value"><%= activeProfile %></span></div><% } %>
+					<% if (this.data.attr('oidWindowState')) { %><div class="windowState <%= windowState %>"><span class="title"><%= this.data.attr('windowStateLabel') %></span><span class="value"><%= windowState %></span></div><% } %>
+					<% if (this.data.attr('oidLowBat')) { %><div class="lowBat <%= vis.states.attr(this.data['oidLowBat'] + '.val') %>"><span class="value"><%= this.data.attr('lowBatLabel') %></span></div><% } %>
+					<% if (this.data.attr('oidUnreach')) { %><div class="unreach <%= vis.states.attr(this.data['oidUnreach'] + '.val') %>"><span class="value"><%= this.data.attr('unreachLabel') %></span></div><% } %>
+				</div>
+
+				<div class="thermostatSlider">
+					<div class="slider-container">
+						<div class="slider" <%= (el) -> vis.binds['vis-homekittiles'].thermostatSlider(el, data, {orientation:"vertical"}) %>></div>
+					</div>
+				</div>
+			</div>
+
+			<button class="button integratedClosebutton" <%= (el) -> vis.binds['vis-homekittiles'].dialogClose(el, {dialogWidgetId: data.attr('dialogWidgetId')}) %>><%== this.data.attr('closebuttonLabel') %></button>
+		</div>
+
+		<div class="blockOperation" <%= (el) -> vis.binds['vis-homekittiles'].addBlockOperation(el, data) %>></div>
+
+		<div class="popup-helper" <%= (el) -> vis.binds['vis-homekittiles'].dialogThermostat(el, data) %> />
+	</div>
+</script>
+
 <script id="tplHomekittilesSettingsBool"
 	type="text/ejs"
 	class="vis-tpl"
@@ -610,16 +728,16 @@
 			<label class="label"><%= this.data.attr('label') %></label>
 
 			<select id="<%= this.data.attr('wid') %>_select" data-oid="<%= this.data.attr('oid') %>" data-view="<%= this.view %>" <%= (el) -> setTimeout(function () { vis.binds['vis-homekittiles'].multiselect(el)}, 250) %> >
-            <%
-                var values = (data.attr('values') ? data.attr('values').split(';') : []);
-                var texts  = (data.attr('texts')  ? data.attr('texts').split(';')  : []);
-                for (var val in values) {
-                    %>
-                    <option value="<%= values[val] %>"><%= texts[val] %></option>
-                    <%
-                }
-            %>
-            </select >
+			<%
+				var values = (data.attr('values') ? data.attr('values').split(';') : []);
+				var texts  = (data.attr('texts')  ? data.attr('texts').split(';')  : []);
+				for (var val in values) {
+					%>
+					<option value="<%= values[val] %>"><%= texts[val] %></option>
+					<%
+				}
+			%>
+			</select >
 		</div>
 
 		<div class="invisible-helper" data-oid="<%= this.data.attr('oidBlockOperation') %>"></div>
diff --git a/widgets/vis-homekittiles/css/style.css b/widgets/vis-homekittiles/css/style.css
index 0ce734b..a0d1430 100644
--- a/widgets/vis-homekittiles/css/style.css
+++ b/widgets/vis-homekittiles/css/style.css
@@ -1,10 +1,13 @@
 /* Colors */
 :root {
 	--hkt-color-label-headline1:				#bbb;
-    --hkt-color-label-headline2:				#bbb;
-    --hkt-color-label-headline3:				#bbb;
-    --hkt-color-label-textlabel:				#666;
-    --hkt-color-label-smalllabel:				#666;
+	--hkt-color-label-headline2:				#bbb;
+	--hkt-color-label-headline3:				#bbb;
+	--hkt-color-label-textlabel:				#666;
+	--hkt-color-label-smalllabel:				#666;
+
+	--hkt-color-warn:							#ffdb75;
+	--hkt-color-error:							#d64545;
 
 	--hkt-color-tile-on-foreground:				#333;
 	--hkt-color-tile-on-background:				#ddd;
@@ -68,28 +71,28 @@
 /*---------------------------------------------------------------*/
 /* Label widget */
 .homekitTiles.label {
-    font-weight: 500;
+	font-weight: 500;
 }
 .homekitTiles.label.headline1 {
-    color: var(--hkt-color-label-headline1);
-    font-size: 24px;
+	color: var(--hkt-color-label-headline1);
+	font-size: 24px;
 }
 .homekitTiles.label.headline2 {
-    color: var(--hkt-color-label-headline2);
-    font-size: 16px;
+	color: var(--hkt-color-label-headline2);
+	font-size: 16px;
 }
 .homekitTiles.label.headline3 {
-    color: var(--hkt-color-label-headline3);
-    font-size: 12px;
-    text-align: center;
+	color: var(--hkt-color-label-headline3);
+	font-size: 12px;
+	text-align: center;
 }
 .homekitTiles.label.textlabel {
-    color: var(--hkt-color-label-textlabel);
-    font-size: 16px;
+	color: var(--hkt-color-label-textlabel);
+	font-size: 16px;
 }
 .homekitTiles.label.smalllabel {
-    color: var(--hkt-color-label-smalllabel);
-    font-size: 12px;
+	color: var(--hkt-color-label-smalllabel);
+	font-size: 12px;
 }
 
 /*---------------------------------------------------------------*/
@@ -207,36 +210,34 @@
 
 /* Signal pictures */
 .homekitTiles.tile .signals {
-    width: 30px;
-    top: 10px;
-    right: 10px;
-    position: absolute;
+	width: 30px;
+	top: 10px;
+	right: 10px;
+	position: absolute;
 }
 .homekitTiles.tile .signals .icon {
-    width: 30px;
-    height: 30px;
-    top: 0;
-    filter: contrast(0.8);
-    position: absolute;
+	width: 30px;
+	height: 30px;
+	top: 0;
+	filter: contrast(0.8);
+	position: absolute;
 }
 .homekitTiles.tile .signals .description {
-    min-width: 40px;
-    top: 30px;
-    right: -5px;
-    display: block;
-    text-align: center;
-    position: absolute;
+	min-width: 40px;
+	top: 30px;
+	right: -5px;
+	display: block;
+	text-align: center;
+	position: absolute;
 }
 /* if someone uses vis-integrated signals */
 .homekitTiles.tile .vis-signal {
-    top: 10px !important;
-    left: unset !important;
-    right: 10px;
-    text-align: right;
+	top: 10px !important;
+	left: unset !important;
+	right: 10px;
+	text-align: right;
 }
 
-
-
 /*----------------------------------------------------------------*/
 /* Date-Picker Kachel */
 .homekitTiles.tile.datepicker .labelGroup1 {
@@ -776,64 +777,64 @@
 /* Navigation-Button-Set */
 .homekitTiles.navigationbuttonset {
 	color: var(--hkt-color-navigationbutton-default-fg);
-    font-size: 12px;
+	font-size: 12px;
 	overflow:visible; /* needed for notifications */
 }
 .homekitTiles.navigationbuttonset .navigationbutton {
-    box-sizing: border-box;
+	box-sizing: border-box;
 }
 /* Icons */
 .homekitTiles.navigationbuttonset .navigationbutton img {
-    height: 16px;
-    width: 16px;
-    margin-right: 5px;
-    filter: brightness(0.4);
+	height: 16px;
+	width: 16px;
+	margin-right: 5px;
+	filter: brightness(0.4);
 }
 /* Labels */
 .homekitTiles.navigationbuttonset .navigationbutton label {
-    cursor: pointer;
+	cursor: pointer;
 }
 /* Button active */
 .homekitTiles.navigationbuttonset .navigationbutton.state-active {
-    color: var(--hkt-color-navigationbutton-active-fg);
+	color: var(--hkt-color-navigationbutton-active-fg);
 }
 .homekitTiles.navigationbuttonset .navigationbutton.state-active img {
-    filter: brightness(0.8);
+	filter: brightness(0.8);
 }
 /* Common properties for navigationbuttons */
 .homekitTiles.navigationbuttonset .horizontal,
 .homekitTiles.navigationbuttonset .vertical {
-    display: flex;
+	display: flex;
 }
 .homekitTiles.navigationbuttonset .navigationbutton {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
 }
 /* Arrange buttons next to each other */
 .homekitTiles.navigationbuttonset .horizontal {
-    flex-direction: row;
+	flex-direction: row;
 }
 .homekitTiles.navigationbuttonset .horizontal .navigationbutton {
-    width: 120px;
+	width: 120px;
 	justify-content: center;
 }
 .homekitTiles.navigationbuttonset .horizontal .navigationbutton ~ .navigationbutton {
-    border: 1px solid;
-    border-width: 0 0 0 1px;
+	border: 1px solid;
+	border-width: 0 0 0 1px;
 }
 /* Arrange buttons one below the other */
 .homekitTiles.navigationbuttonset .vertical {
-    flex-direction: column;
+	flex-direction: column;
 }
 .homekitTiles.navigationbuttonset .vertical .navigationbutton {
-    height: 30px;
+	height: 30px;
 	justify-content: left;
-    padding: 0 0 0 5px;
+	padding: 0 0 0 5px;
 }
 .homekitTiles.navigationbuttonset .vertical .navigationbutton ~ .navigationbutton {
-    border: 1px solid;
-    border-width: 1px 0 0 0;
+	border: 1px solid;
+	border-width: 1px 0 0 0;
 }
 /* Notification at nav-button */
 .homekitTiles.navigationbuttonset .notifications {
@@ -883,6 +884,184 @@
 	z-index: 1;
 }
 
+/*---------------------------------------------------------------*/
+/* Thermostat Kachel */
+.homekitTiles.tile.thermostatDialog .tileValue.cooling {
+    background-color: deepskyblue;
+}
+.homekitTiles.tile.thermostatDialog .tileValue.heating {
+	background-color: darkorange;
+}
+.homekitTiles.tile.thermostatDialog .labelGroup2 {
+    top: 9px;
+    left: 48px;
+    right: 1px;
+    position: absolute;
+    font-size: 10px;
+}
+.homekitTiles.tile.thermostatDialog .labelGroup2 .label3value:before,
+.homekitTiles.tile.thermostatDialog .labelGroup2 .label4value:before,
+.homekitTiles.tile.thermostatDialog .labelGroup2 .label5value:before {
+    display: inline-block;
+    width: 12px;
+    text-align: center;
+}
+.homekitTiles.tile.thermostatDialog .labelGroup2 .label3value:before {
+    content: "S";
+    font-family: Wingdings;
+}
+.homekitTiles.tile.thermostatDialog .labelGroup2 .label4value:before {
+    content: "";
+    font-family: Webdings;
+}
+.homekitTiles.tile.thermostatDialog .labelGroup2 .label5value:before {
+    content: "o";
+    font-family: Wingdings;
+}
+
+/* Thermostat Dialog */
+.homekitTiles.dialog .content {
+	display: flex;
+	flex-direction: column;
+	height: 200px;
+}
+
+/* Thermostat Dialog Kopf */
+.homekitTiles.dialog .thermostat.head {
+	width: 100%;
+	text-align: center;
+}
+.homekitTiles.dialog .thermostat.head .actualTemperature {
+	display: flex;
+	flex-direction: column;
+	margin-top: 5px;
+	margin-bottom: 10px;
+}
+.homekitTiles.dialog .thermostat.head .actualTemperature .title {
+	display: flex;
+	flex-direction: column;
+}
+.homekitTiles.dialog .thermostat.head .actualTemperature .value {
+	color: white;
+	font-size: 26px;
+}
+
+/* Thermostat Dialog Inhalte */
+.homekitTiles.dialog .thermostat.content {
+	display: flex;
+	flex-direction: row-reverse;
+}
+.homekitTiles.dialog .thermostat.content > div {
+	width: 50%;
+}
+.homekitTiles.dialog .thermostat.content .values {
+	justify-content: space-around;
+	display: flex;
+	flex-direction: column;
+}
+.homekitTiles.dialog .thermostat.content .values > div {
+	display: flex;
+	flex-direction: column;
+}
+.homekitTiles.dialog .thermostat.content .values > div .title {
+	font-size: 10px;
+}
+.homekitTiles.dialog .thermostat.content .values > div .value {
+	color: white;
+	font-size: 16px;
+}
+.homekitTiles.dialog .thermostat.content .values .lowBat.false {
+	display: none;
+}
+.homekitTiles.dialog .thermostat.content .values .lowBat .value {
+	color: var(--hkt-color-warn);
+}
+.homekitTiles.dialog .thermostat.content .values .unreach.false {
+	display: none;
+}
+.homekitTiles.dialog .thermostat.content .values .unreach .value {
+	color: var(--hkt-color-error);
+}
+
+/* Thermostat Dialog Slider */
+.homekitTiles.dialog .thermostat.content .thermostatSlider {
+	padding-left: 20px;
+	box-sizing: border-box;
+	overflow: visible;
+	cursor: pointer;
+	font-size: 12px;
+	color: rgb(255, 255, 255);
+	z-index: 1;
+	position: relative;
+}
+.homekitTiles.dialog .thermostat.content .thermostatSlider .slider-container {
+	position: relative;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	margin-left: 50px;
+}
+.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider {
+	background: linear-gradient(0deg, rgba(87,0,255,1) 0%, rgba(255,0,131,1) 100%);
+	width: 7px;
+	height: 100%;
+}
+.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .ui-slider-handle {
+	background: none;
+	background-color: #333;
+	width: 30px;
+	height: 30px;
+	border: 1px solid #555;
+	border-radius: 50%;
+	left: -12.5px;
+	margin-bottom: -17px;
+	color: #fff;
+	font-size: 25px;
+	font-weight: bold;
+}
+.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .ui-slider-handle:focus-visible {
+	outline-style: none;
+}
+.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .ui-slider-handle:before,
+.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .ui-slider-handle:after {
+	content: '';
+	width: 0;
+	height: 0;
+	display: block;
+	border-width: 0 5px 5px 5px;
+	border-color: #fff transparent;
+	border-style: solid;
+	position: absolute;
+}
+.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .ui-slider-handle:before {
+	transform: rotate(0deg);
+	left: 10px;
+	top: 6px;
+}
+.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .ui-slider-handle:after {
+	transform: rotate(180deg);
+	left: 10px;
+	top: 19px;
+}
+.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .step-label {
+	transform: translateY(-50%);
+	position: absolute;
+	text-align: center;
+	box-shadow: unset !important;
+	color: #999;
+	font-size: 8px;
+	left: -34px;
+}
+.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .step-label:after {
+	content: '';
+	width: 6px;
+	height: 1px;
+	background: #999;
+	position: absolute;
+	margin-top: 5px;
+	margin-left: 3px;
+}
+
 /*----------------------------------------------------------------*/
 /* DYNAMIZATION */
 .spin {
diff --git a/widgets/vis-homekittiles/js/vis-homekittiles.js b/widgets/vis-homekittiles/js/vis-homekittiles.js
index be15704..5b670f2 100644
--- a/widgets/vis-homekittiles/js/vis-homekittiles.js
+++ b/widgets/vis-homekittiles/js/vis-homekittiles.js
@@ -1,6 +1,6 @@
 /*
-    ioBroker.vis vis-homekittiles Widget-Set
-    Copyright 2024 Standarduser
+	ioBroker.vis vis-homekittiles Widget-Set
+	Copyright 2024 Standarduser
 */
 "use strict";
 
@@ -12,6 +12,7 @@ $.extend(
 	systemDictionary,
 	{
 		"description":					{	"en": "Description",				"de": "Beschreibung"					},
+		"group_label":					{	"en": "Label",						"de": "Beschriftung"					},
 		"group_labelGroup1":			{	"en": "Label group 1",				"de": "Beschriftungsgruppe 1"			},
 		"group_labelGroup2":			{	"en": "Label group 2",				"de": "Beschriftungsgruppe 2"			},
 		"oidActive":					{	"en": "Object ID for Active State",	"de": "Objekt-ID für Aktiv"				},
@@ -145,6 +146,32 @@ $.extend(
 		"comparisonLower":				{	"en": "<",							"de": "<"								},
 		"comparisonGreater":			{	"en": ">",							"de": ">"								},
 
+		"oidActualTemperature":			{	"en": "Object ID for temperature",		"de": "Objekt-ID für Temperatur"			},
+		"oidSetPointTemperature":		{	"en": "Object ID for setpoint",			"de": "Objekt-ID für Sollwer"				},
+		"oidHumidity":					{	"en": "Object ID for humidity",			"de": "Objekt-ID für Feuchte"				},
+		"oidActiveProfile":				{	"en": "Object ID for heating profile",	"de": "Objekt-ID für Heizprofil"			},
+		"oidLowBat":					{	"en": "Object ID for low battery",		"de": "Objekt-ID für Batterie schwach"		},
+		"oidUnreach":					{	"en": "Object ID for unreach",			"de": "Objekt-ID für nicht Erreichbar"		},
+		"oidWindowState":				{	"en": "Object ID for window contact",	"de": "Objekt-ID für Fensterkontakt"		},
+		"unitTemperature":				{	"en": "Unit for temperature",			"de": "Einheit für Temperatur"				},
+		"unitHumidity":					{	"en": "Unit for humidity",				"de": "Einheit für Feuchte"					},
+		"temperatureMin":				{	"en": "Minimum temperature",			"de": "Minimale Temperatur"					},
+		"temperatureMax":				{	"en": "Maximum temperature",			"de": "Maximale Temperatur"					},
+		"temperatureStep":				{	"en": "Temperature steps",				"de": "Schrittweite Temperatur"				},
+		"group_thermostatDialog":		{	"en": "Thermostat dialog",				"de": "Thermostat-Dialog"					},
+		"closebuttonLabel":				{	"en": "Label close-button",				"de": "Beschriftung Schließen-Button"		},
+		"actualTemperatureLabel":		{	"en": "Label temperature",				"de": "Beschriftung Temperatur"				},
+		"setpointTemperatureLabel":		{	"en": "Label setpoint",					"de": "Beschriftung Sollwert"				},
+		"actualHumidityLabel":			{	"en": "Label humidity",					"de": "Beschriftung Feuchte"				},
+		"activeProfileLabel":			{	"en": "Label heating profile",			"de": "Beschriftung Heizprofil"				},
+		"activeProfileValues":			{	"en": "Values of heating profile",		"de": "Werte des Heizprofils"				},
+		"activeProfileTexts":			{	"en": "Names of heating profile",		"de": "Namen des Heizprofiles"				},
+		"windowStateLabel":				{	"en": "Label window contact",			"de": "Beschriftung Fensterkontakt"			},
+		"windowStateValues":			{	"en": "Values of window contact",		"de": "Werte des Fensterkontakts"			},
+		"windowStateTexts":				{	"en": "Value names of window contact",	"de": "Textwerte des Fensterkontakts"		},
+		"lowBatLabel":					{	"en": "Label battery low",				"de": "Beschriftung Batterie schwach"		},
+		"unreachLabel":					{	"en": "Label unreach",					"de": "Beschriftung nicht erreichbar"		},
+
 		"hktButtonDialogCloseDescription": {
 			"en": "A button to close open dialogs. Fill 'Dialog widget ID' with ID of dialog widget if button is placed outside a dialog window.",
 			"de": "Ein Button, der geöffnete Dialogfenster schließt. Wenn der Button außerhalb eines Dialogs platziert wird, muss in 'Dialog-Widget-ID' die Widget-ID des Dialogfensters angegeben werden."
@@ -185,6 +212,10 @@ $.extend(
 			"en": "Value with increment buttons.",
 			"de": "Analogwert mit Inkrement-Tasten."
 		},
+		"hktThermostatDialogDescription": {
+			"en": "Thermostat dialog, specially adapted for Homematic.",
+			"de": "Thermostat-Dialog, speziell für Homematic angepasst."
+		},
 		"hktSwitchBoolDescription": {
 			"en": "Simple switch (on/off) with icon, increment buttons and two free to define label groups.",
 			"de": "Einfacher Schalter (an/aus) mit Icon, Inkrement-Tasten und zwei frei definierbaren Beschriftungsgruppen."
@@ -220,14 +251,14 @@ vis.navChangeCallbacks.push(function (view) {
 
 // this code can be placed directly in vis-homekittiles.html
 vis.binds["vis-homekittiles"] = {
-    version: "0.0.1",
-    showVersion: function () {
-        if (vis.binds["vis-homekittiles"].version) {
-            console.log('Version vis-homekittiles: ' + vis.binds["vis-homekittiles"].version);
-            vis.binds["vis-homekittiles"].version = null;
-        }
-    },
-    //VIS Edit Info Texte - thanx @inventwo ;)
+	version: "0.0.1",
+	showVersion: function () {
+		if (vis.binds["vis-homekittiles"].version) {
+			console.log('Version vis-homekittiles: ' + vis.binds["vis-homekittiles"].version);
+			vis.binds["vis-homekittiles"].version = null;
+		}
+	},
+	//VIS Edit Info Texte - thanx @inventwo ;)
 	infoText: function (widAttr, data) {
 		let text = "";
 
@@ -242,6 +273,7 @@ vis.binds["vis-homekittiles"] = {
 		else if (data[1] === "hktSettingsBool")			{ text = "hktSettingsBoolDescription";			}
 		else if (data[1] === "hktSettingsValue")		{ text = "hktSettingsValueDescription";			}
 		else if (data[1] === "hktSwitchBool")			{ text = "hktSwitchBoolDescription";			}
+		else if (data[1] === "hktThermostatDialog")		{ text = "hktThermostatDialogDescription";		}
 		else if (data[1] === "hktValue")				{ text = "hktValueDescription";					}
 		else if (data[1] === "hktViewInWidgetDialog")	{ text = "hktViewInWidgetDialogDescription";	}
 		else if (data[1] === "hktViewInWidgetSwipe")	{ text = "hktViewInWidgetSwipeDescription";		}
@@ -703,6 +735,182 @@ vis.binds["vis-homekittiles"] = {
 			});
 		}
 	},
+	//Thermostat slider - thanx @inventwo ;)
+	thermostatSlider: function (el, data, options) {
+		var $this = $(el);
+		var oid = data.oidSetPointTemperature;
+
+		let min = parseFloat(data.temperatureMin);
+		let max = parseFloat(data.temperatureMax);
+		let step = parseFloat(data.temperatureStep);
+
+		if (isNaN(min)) min = 15;
+		if (isNaN(max)) max = 28;
+		if (isNaN(step)) step = 0.5;
+
+		let isDragging = false;
+
+		var settings = $.extend({
+			min: min,
+			max: max,
+			step: step,
+			slide: function (event, ui) {
+				isDragging = true;
+				if (!vis.editMode) {
+					//$this.parent().parent().find(".ui-slider-handle").html(`<span class="value">${ui.value}${data.unitTemperature}</span>`);
+				}
+			},
+			stop: function (event, ui) {
+				isDragging = false;
+				if (!vis.editMode) {
+					vis.setValue(oid, ui.value);
+					//$this.parent().parent().find(".ui-slider-handle").html(`<span class="value">${ui.value}${data.unitTemperature}</span>`);
+				}
+			}
+		}, options);
+
+		$this.slider(settings)
+			.each(function () {
+
+				// show steps
+				var opt = $(this).data().uiSlider.options;
+
+				// Get the number of possible values
+				let visibleSteps = 1;
+				let vals = (opt.max - opt.min) / visibleSteps;
+
+				// Space out values
+				for (let i = 0; i <= vals; i++) {
+
+					let label = null;
+
+					let val = opt.max - i * visibleSteps;
+					label = $('<span class="step-label">' + val + '</span>')
+						.css('top', (i / vals * 100) + '%')
+
+					$(this).append(label);
+				}
+			});
+
+		function updateSlider() {
+
+			$this.slider();
+			if (oid == undefined) {
+				return;
+			}
+			let val = vis.states.attr(oid + ".val");
+
+			val = parseFloat(val);
+			if (isNaN(val)) {
+				val = min;
+			}
+			$this.slider("option", "value", val);
+		}
+
+		updateSlider();
+
+		//clean up css classes
+		$this.removeClass('ui-widget');
+		$this.removeClass('ui-widget-content');
+		$this.removeClass('ui-corner-all');
+		$this.find(".ui-slider-handle").removeClass('ui-state-default');
+		$this.find(".ui-slider-handle").removeClass('ui-corner-all');
+
+		//get value on startup
+		let value = vis.states.attr(oid + '.val');
+		//$this.find(".ui-slider-handle").html(`<span class="value">${value}${data.unitTemperature}</span>`);
+
+		// subscribe on updates of values
+		vis.states.bind(oid + ".val", function (e, newVal, oldVal) {
+			if (!isDragging) { updateSlider(); }
+			//$this.find(".ui-slider-handle").html(`<span class="value">${newVal}${data.unitTemperature}</span>`);
+		});
+	},
+	//Thermostat dialog - same as "dialogContainer" with some modifications
+	dialogThermostat: function (el, options, persistent, preload) {
+		var $dlg = $(el).parent().find('div.vis-widget-dialog');
+
+		var id = $(el).parent().attr('id');
+		if (id && id.match(/_removed$/)) {
+			return;
+		}
+
+		if (!$dlg.length) {
+			setTimeout(function () {
+				vis.binds['vis-homekittiles'].dialogContainer(el, options, persistent, preload);
+			}, 200);
+			return;
+		}
+
+		//fix some parameters
+		options.height = '340px';
+		options.width = '300px';
+
+		$dlg.dialog($.extend({
+			autoOpen: false,
+			open: function () {
+				$(this).parent().find('.ui-widget-header button .ui-button-text').html('');
+				$(this).parent().css('z-index', 998);
+				//touchscreen fix
+				$dlg.find('.vis-view-container').each(function () {
+					var cview = $(this).attr('data-vis-contains');
+					var $this = this;
+					vis.renderView(cview, cview, false, function (_view) {
+						$('#visview_' + _view)
+								.appendTo($this)
+								.show();
+					});
+				});
+
+				//add and remove classes for styling
+				//main window
+				$(this).parent().addClass('homekitTiles dialog');
+				$(this).parent().removeClass('ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable');
+				//head
+				$(this).parent().find('div.ui-dialog-titlebar').addClass('header').removeClass('ui-widget-header ui-corner-all ui-draggable-handle');
+				//title
+				$(this).parent().find('span.ui-dialog-title').addClass('title').removeClass('ui-dialog-title');
+				//close button
+				$(this).parent().find('button.ui-dialog-titlebar-close').remove();
+				//content
+				$(this).parent().find('div.ui-dialog-content').addClass('content');//.removeClass('vis-widget-dialog ui-widget-content');
+				//resizable
+				$(this).parent().find('div.ui-resizable-handle').remove();
+
+				//size window
+				if (options.height)   $(this).css('height', options.height);
+				if (options.width)    $(this).css('width',  options.width);
+
+				//position window
+				if (options.top  || options.top  === 0 || options.top  === '0') $(this).parent().css('top',  options.top);
+				if (options.left || options.left === 0 || options.left === '0') $(this).parent().css('left', options.left);
+
+				//arrows
+				if (options.arrowDirection) $(this).parent().addClass('arrow-' + options.arrowDirection);
+			},
+			close: function () {
+				if ($dlg.data('timer')) {
+					clearTimeout($dlg.data('timer'));
+					$dlg.data('timer', null);
+				}
+				vis.destroyUnusedViews();
+			}
+		}, options));
+
+		if (!vis.editMode) {
+			$(el).parent().find('div.vis-widget-body').on('click touchend', function (event) {
+				event.stopPropagation();
+				// Protect against two events
+				if (vis.detectBounce(this)) return;
+
+				var $id =  $('#' + $(this).parent().attr('id') + '_dialog');
+				$id.dialog('open');
+				return false;
+			});
+		} else {
+			$(el).parent().find('div.vis-widget-body').show();
+		}
+	},
 
 	//Add elements to widgets
 	addButtonIcon: function (el, data) {