arrows for viws

Standarduser · Jan 3, 2025 · cb2a5d7 · cb2a5d7
1 parent 004dd35
commit cb2a5d7
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -45,6 +45,7 @@ The widgets are designed for VIS 1.x.
 * Added new style "text only" to switch and view-in-widget-dialog tiles
 * Fixed some issues from adapter checker
 * Fixed some styles of view-in-widget-swipe
+* Added arrow indicators to view-in-widget-swipe
 
 ### 0.3.2 (2024-12-03)
 

diff --git a/widgets/vis-homekittiles.html b/widgets/vis-homekittiles.html
@@ -1343,7 +1343,8 @@
 						</div>
 					</div>'
 	data-vis-attrs="description/custom,vis-homekittiles.infoText,hktViewInWidgetSwipe;numberOfViews[2]/slider,2,10,1;"
-	data-vis-attrs0="group.views;view_(1-numberOfViews)/views;"
+	data-vis-attrs0="group.arrows;arrowsShow/checkbox;arrowLeftImage/image;arrowRightImage/image;arrowsSize/slider,0,100,1;arrowsPosition[50]/slider,0,100,1;arrowsOpacity[0.3]/slider,0,1,0.01;arrowsPulse/checkbox;"
+	data-vis-attrs1="group.views;view_(1-numberOfViews)/views;"
 >
 	<div class="homekitTiles viewInWidget swipe vis-widget <%== this.data.attr('class') %>" style="width:235px; height:235px;" id="<%= this.data.attr('wid') %>">
 		<% if (vis.editMode) { %>
@@ -1353,8 +1354,26 @@
 		<%
 		var numberOfViews = Number(this.data.attr("numberOfViews"));
 		var i = 1;
+
 		while (i <= numberOfViews) {	%>
-			<div data-vis-contains="<%= this.data.attr('view_' + i) %>" class="vis-view-container subview"></div>
+			<div data-vis-contains="<%= this.data.attr('view_' + i) %>" class="vis-view-container subview">
+				<%
+				if (this.data.attr('arrowsShow') && this.data.attr('arrowLeftImage') != '' && this.data.attr('arrowLeftImage') != undefined && i > 1) {
+					%>
+					<div class="arrow left" style="width: <%= this.data.attr('arrowsSize') %>%; height: <%= this.data.attr('arrowsSize') %>%; top: <%= this.data.attr('arrowsPosition') %>%; opacity: <%= this.data.attr('arrowsOpacity') %>">
+						<img class="<%= this.data.attr('arrowsPulse') ? 'pulse' : '' %>" src="<%= this.data.attr('arrowLeftImage') %>">
+					</div>
+					<%
+				}
+				if (this.data.attr('arrowsShow') && this.data.attr('arrowRightImage') != '' && this.data.attr('arrowRightImage') != undefined && i < numberOfViews) {
+					%>
+					<div class="arrow right" style="width: <%= this.data.attr('arrowsSize') %>%; height: <%= this.data.attr('arrowsSize') %>%; top: <%= this.data.attr('arrowsPosition') %>%; opacity: <%= this.data.attr('arrowsOpacity') %>">
+						<img class="<%= this.data.attr('arrowsPulse') ? 'pulse' : '' %>" src="<%= this.data.attr('arrowRightImage') %>">
+					</div>
+					<%
+				}
+				%>
+			</div>
 			<%
 			i++;
 		} %>

diff --git a/widgets/vis-homekittiles/css/style.css b/widgets/vis-homekittiles/css/style.css
@@ -526,12 +526,12 @@
 	display: none
 }
 .homekitTiles.tile.textonly .ackIcon {
-    width: 20px;
-    height: 20px;
-    top: 50%;
-    right: 0px;
-    position: absolute;
-    transform: translate(100%,-50%);
+	width: 20px;
+	height: 20px;
+	top: 50%;
+	right: 0px;
+	position: absolute;
+	transform: translate(100%,-50%);
 }
 /*#endregion*/
 /*----------------------------------------------------------------*/
@@ -978,6 +978,20 @@
 	position: relative;
 	overflow: hidden;
 }
+.homekitTiles.viewInWidget.swipe .arrow {
+	position: relative;
+	transform: translateY(-50%);
+}
+.homekitTiles.viewInWidget.swipe .arrow.left {
+	float: left;
+}
+.homekitTiles.viewInWidget.swipe .arrow.right {
+	float: right;
+}
+.homekitTiles.viewInWidget.swipe .arrow img {
+	width: 100%;
+	height: 100%;
+}
 /*#endregion*/
 /*---------------------------------------------------------------*/
 /*#region Dialog windows */
@@ -1558,4 +1572,13 @@
 @keyframes spin {
 	from { transform:rotate(0deg); } to { transform:rotate(360deg); }
 }
+
+.pulse {
+	animation: pulse 2s ease-in-out infinite both;
+}
+@keyframes pulse {
+	0%   { transform: scale(1); }
+	50%  { transform: scale(0.8); }
+	100% { transform: scale(1); }
+}
 /*#endregion*/
diff --git a/widgets/vis-homekittiles/js/vis-homekittiles.js b/widgets/vis-homekittiles/js/vis-homekittiles.js
@@ -27,6 +27,13 @@ $.extend(
 		"alignright":					{	"en": "right",							"de": "rechts"								},
 		"allthesame":					{	"en": "all the same",					"de": "Alle gleich"							},
 		"arrowDirection":				{	"en": "Show arrow on dialog",			"de": "Pfeil am Dialog anzeigen"			},
+		"arrowsShow":					{	"en": "Arrows show",					"de": "Pfeile anzeigen"						},
+		"arrowLeftImage":				{	"en": "Arrows image for left",			"de": "Pfeile Bild für Links"				},
+		"arrowRightImage":				{	"en": "Arrows image for right",			"de": "Pfeile Bild für Rechts"				},
+		"arrowsSize":					{	"en": "Arrows size [%]",				"de": "Pfeile Größe [%]"					},
+		"arrowsPosition":				{	"en": "Arrows position [%]",			"de": "Pfeile Position [%]"					},
+		"arrowsOpacity":				{	"en": "Arrows opacity",					"de": "Pfeile Transparenz"					},
+		"arrowsPulse":					{	"en": "Arrows pulsate",					"de": "Pfeile Pulsieren"					},
 		"auto":							{	"en": "automatic",						"de": "automatisch"							},
 		"autofillOids":					{	"en": "Autofill object IDs",			"de": "Objekt-IDs automatisch füllen"		},
 		"blockOperationIcon":			{	"en": "Icon if blocked",				"de": "Icon wenn gesperrt"					},
@@ -61,6 +68,7 @@ $.extend(
 		"factor":						{	"en": "Multiplicator",					"de": "Multiplikator"						},
 		"german":						{	"en": "German",							"de": "Deutsch"								},
 		"group_acknowledge":			{	"en": "Acknowledged change",			"de": "Bestätigte Änderung"					},
+		"group_arrows":					{	"en": "Arrows",							"de": "Pfeile"								},
 		"group_blockOperation":			{	"en": "Block operation",				"de": "Bedienung sperren"					},
 		"group_buttons":				{	"en": "Buttons",						"de": "Schaltflächen"						},
 		"group_column":					{	"en": "Columns",						"de": "Spalten"								},
@@ -277,8 +285,8 @@ $.extend(
 			"de": "Dialog-Fenster zur Anzeige einer View. Die angezigte View sollte einen Dialog-Close-Button besitzen."
 		},
 		"hktViewInWidgetSwipeDescription": {
-			"en": "View-in-widget for a free to define number of subviews with swipe function.",
-			"de": "View-in-widget mit einer definierbaren Anzahl an Unterviews, die per Swipe gewechselt werden."
+			"en": "View-in-widget for a free to define number of subviews with swipe function. The 'arrow' settings can be used to add indicators to indicate that the widget can be 'swiped'.",
+			"de": "View-in-widget mit einer definierbaren Anzahl an Unterviews, die per Swipe gewechselt werden. Über die 'Pfeil'-Einstellungen können Indikatoren als Hinweis hinzugefügt werden, dass das Widget 'geswiped' werden kann."
 		},
 	}
 );