diff --git a/README.md b/README.md index 6c8e446..a01a6e7 100644 --- 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 index 2177cad..e8cd6e1 100644 --- a/widgets/vis-homekittiles.html +++ b/widgets/vis-homekittiles.html @@ -1343,7 +1343,8 @@ ' 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;" >
<% if (vis.editMode) { %> @@ -1353,8 +1354,26 @@ <% var numberOfViews = Number(this.data.attr("numberOfViews")); var i = 1; + while (i <= numberOfViews) { %> -
+
+ <% + if (this.data.attr('arrowsShow') && this.data.attr('arrowLeftImage') != '' && this.data.attr('arrowLeftImage') != undefined && i > 1) { + %> +
+ +
+ <% + } + if (this.data.attr('arrowsShow') && this.data.attr('arrowRightImage') != '' && this.data.attr('arrowRightImage') != undefined && i < numberOfViews) { + %> +
+ +
+ <% + } + %> +
<% i++; } %> diff --git a/widgets/vis-homekittiles/css/style.css b/widgets/vis-homekittiles/css/style.css index d15cf81..f1a9953 100644 --- 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*/ \ No newline at end of file diff --git a/widgets/vis-homekittiles/js/vis-homekittiles.js b/widgets/vis-homekittiles/js/vis-homekittiles.js index 807dfa7..c37c784 100644 --- 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." }, } );