Skip to content

Commit

Permalink
added html-dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@Standarduser
Standarduser committed Jan 4, 2025
1 parent c46b3f5 commit c062e14
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 22 deletions.
5 changes: 5 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ The widgets are designed for VIS 1.x.
Placeholder for the next version (at the beginning of the line):
### **WORK IN PROGRESS**
-->
### **WORK IN PROGRESS**

* Added HTML-Dialog
* Made "modal" to default (modal darkens the background when a dialog window is open)

### 0.3.3 (2025-01-03)

* Added new style "text only" to switch and view-in-widget-dialog tiles
Expand Down
100 changes: 96 additions & 4 deletions widgets/vis-homekittiles.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -448,7 +448,7 @@
<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-default">
<span class="tileValue" style="background-color: unset; font-size: 30px;">💬</span>
<label class="labelGroup1">Dialog</label>
<label class="labelGroup1">Dialog<BR>View in widget</label>
</div>
</div>
</div>'
Expand All @@ -457,7 +457,7 @@
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.dialog;contains_view/views;title;autoclose/slider,0,30000,100;modal/checkbox;dialog_width;dialog_height;dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;arrowDirection/nselect,,top,right,bottom,left;setIdOnOpenClose/id;setValueOnOpen;setValueOnClose;"
data-vis-attrs4="group.dialog;contains_view/views;title;autoclose/slider,0,30000,100;modal[true]/checkbox;dialog_width;dialog_height;dialog_top;dialog_left;overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;arrowDirection/nselect,,top,right,bottom,left;setIdOnOpenClose/id;setValueOnOpen;setValueOnClose;"
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);"
>
Expand All @@ -481,6 +481,98 @@
</div>
</script>

<script id="tplHomekittilesHtmlDialog"
type="text/ejs"
class="vis-tpl"
data-vis-set="vis-homekittiles"
data-vis-update-style="true"
data-vis-type="dialog"
data-vis-name="hkt-HTML-Dialog"
data-vis-prev='<div id="prev_tplHomekittilesHtmlDialog" 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-default">
<span class="tileValue" style="background-color: unset; font-size: 20px; color: #fff">&lt;&gt;</span>
<label class="labelGroup1">Dialog<BR>HTML</label>
</div>
</div>
</div>'
data-vis-attrs="description/custom,vis-homekittiles.infoText,hktHtmlDialog;oidActive/id;icon/image;iconRound/checkbox;iconColored/checkbox;showLikeActive/checkbox;displaystyle[tile]/select,tile,tile big,tile small,indicator,tile iconOnly,tile textonly/iconShowHideInputfields();"
data-vis-attrs0="group.labelGroup1;label[Dialog];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.dialog;
html_dialog/text;
title;
buttonsAdd/checkbox;
numberOfButtons[1]/slider,1,10,1;
autoclose/slider,0,30000,100;
modal[true]/checkbox;
dialog_width;
dialog_height;
dialog_top;
dialog_left;
overflowX/nselect,,visible,hidden,scroll,auto,initial,inherit;
overflowY/nselect,,visible,hidden,scroll,auto,initial,inherit;
arrowDirection/nselect,,top,right,bottom,left;
setIdOnOpenClose/id;
setValueOnOpen;
setValueOnClose;"
data-vis-attrs5="group.buttons;oid_(1-numberOfButtons)/id;label_(1-numberOfButtons)[Button];value_(1-numberOfButtons);closeDialog_(1-numberOfButtons)/checkbox;"
data-vis-attrs6="group.signalpics;numberOfSignals[1]/slider,3,10,1;signalsNotInEditor/checkbox;"
data-vis-attrs7="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);"
>
<div class="homekitTiles <%== this.data.attr('displaystyle') %> dialog vis-widget <%= this.data.attr('showLikeActive') ? 'state-active' : vis.states.attr(this.data['oidActive'] + '.val') ? '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" id="<%= this.data.attr('wid') %>_body">
<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="vis-widget-dialog <%== this.data.attr('class') %>" id="<%= this.data.attr('wid') %>_dialog" style="display:none" title="<%= this.data.attr('title') %>">
<%== this.data.attr('html_dialog') %>

<%
if (this.data.attr('buttonsAdd')) { %>

<div class="dialog button-set">
<%
var numberOfButtons = Number(this.data.attr("numberOfButtons"));
var wid = data.attr('wid');
var i = 1;

while (i <= numberOfButtons) {
var oid = this.data.attr('oid_' + i);
var value = this.data.attr('value_' + i);
var label = this.data.attr('label_' + i);
var closeDialog = this.data.attr('closeDialog_' + i);
var wid = data.attr('wid');

if (closeDialog) {
%>
<button class="button button-set button-<%= i %>" data-oid="<%= oid %>" data-val="<%= value %>" id="<%= wid %>_button<%= i %>" <%= (el) -> vis.binds.basic.state(el); %><%= (el) -> vis.binds['vis-homekittiles'].dialogClose(el, {dialogWidgetId: ''}); %>><%= label %></button>
<%
} else {
%>
<button class="button button-set button-<%= i %>" data-oid="<%= oid %>" data-val="<%= value %>" id="<%= wid %>_button<%= i %>" <%= (el) -> vis.binds.basic.state(el); %>><%= label %></button>
<%
}
i++;
}
%>
</div>
<% } %>
</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) %>></div><% } %></div>

<div class="popup-helper" <%= (el) -> vis.binds['vis-homekittiles'].dialogContainer(el, data) %> />
<div class="popup-helper" <%= (el) -> vis.binds.jqueryui.dialogAutoClose(el, data.attr('autoclose')) %> />
</div>
</script>

<script id="tplHomekittilesThermostatDialog"
type="text/ejs"
class="vis-tpl"
Expand Down Expand Up @@ -518,7 +610,7 @@
iconLowBat/image;
iconUnreach/image;"
data-vis-attrs0="group.label;label[Thermostat];label2pre[Set at];label2post[];"
data-vis-attrs1="group.thermostatDialog;title;closebuttonLabel;actualTemperatureLabel;setpointTemperatureLabel;setpointModeLabel;setpointModeValues;setpointModeTexts;setpointModeOperable/checkbox;actualHumidityLabel;activeProfileLabel;activeProfileValues;activeProfileTexts;windowStateLabel;windowStateValues;windowStateTexts;lowBatLabel;unreachLabel;autoclose/slider,0,30000,100;modal/checkbox;dialog_top;dialog_left;arrowDirection/nselect,,top,right,bottom,left;"
data-vis-attrs1="group.thermostatDialog;title;closebuttonLabel;actualTemperatureLabel;setpointTemperatureLabel;setpointModeLabel;setpointModeValues;setpointModeTexts;setpointModeOperable/checkbox;actualHumidityLabel;activeProfileLabel;activeProfileValues;activeProfileTexts;windowStateLabel;windowStateValues;windowStateTexts;lowBatLabel;unreachLabel;autoclose/slider,0,30000,100;modal[true]/checkbox;dialog_top;dialog_left;arrowDirection/nselect,,top,right,bottom,left;"
data-vis-attrs2="group.blockOperation;blockOperationIfTrue/checkbox;blockOperationIfFalse/checkbox;blockOperationShowDisabled/checkbox;blockOperationShowIcon/checkbox/addBlockOperationShowHideInputfields();blockOperationIcon/image;blockOperationIconNotInEditor/checkbox;blockOperationUseDifferentOID/checkbox/addBlockOperationShowHideInputfields();blockOperationOID/id;"
data-vis-attrs3="group.signalpics;numberOfSignals[1]/slider,3,10,1;signalsNotInEditor/checkbox;"
data-vis-attrs4="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);"
Expand Down Expand Up @@ -726,7 +818,7 @@
closebuttonLabel;
callToAction;
autoclose/slider,0,30000,100;
modal/checkbox;
modal[true]/checkbox;
dialog_top;
dialog_left;
arrowDirection/nselect,,top,right,bottom,left;"
Expand Down
42 changes: 24 additions & 18 deletions widgets/vis-homekittiles/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1073,43 +1073,49 @@
/*#endregion*/
/*---------------------------------------------------------------*/
/*#region Buttons */
.homekitTiles.button {
font-size: 16px;
cursor: pointer;
}
.homekitTiles.button .button {

.homekitTiles .button {
width: 100%;
height: 100%;
color: var(--hkt-color-button-fg);
background-color: var(--hkt-color-button-bg);
font-size: unset;
cursor: unset;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 0;
}
/* Button-Set */
.homekitTiles.button-set .vis-widget-body {
.homekitTiles.button-set .vis-widget-body,
.homekitTiles.dialog .dialog.button-set {
display: flex;
flex-direction: row;
}
.homekitTiles.button-set .button-set {
flex-grow: 1;
margin: 0;
}
.homekitTiles.button-set .button.button-set.button-1,
.homekitTiles.button-set .button.button-set.button-4,
.homekitTiles.button-set .button.button-set.button-7,
.homekitTiles.button-set .button.button-set.button-10 {
.homekitTiles.dialog .dialog.button-set {
height: 50px;
width: 100%;
bottom: 0px;
position: absolute;
}

/* Button colors */
.homekitTiles .button.button-set.button-1,
.homekitTiles .button.button-set.button-4,
.homekitTiles .button.button-set.button-7,
.homekitTiles .button.button-set.button-10 {
background-color: var(--hkt-color-button-bg-3);
}
.homekitTiles.button-set .button.button-set.button-2,
.homekitTiles.button-set .button.button-set.button-5,
.homekitTiles.button-set .button.button-set.button-8 {
.homekitTiles .button.button-set.button-2,
.homekitTiles .button.button-set.button-5,
.homekitTiles .button.button-set.button-8 {
background-color: var(--hkt-color-button-bg-2);
}
.homekitTiles.button-set .button.button-set.button-3,
.homekitTiles.button-set .button.button-set.button-6,
.homekitTiles.button-set .button.button-set.button-9 {
.homekitTiles .button.button-set.button-3,
.homekitTiles .button.button-set.button-6,
.homekitTiles .button.button-set.button-9 {
background-color: var(--hkt-color-button-bg);
}
/*#endregion*/
Expand Down
6 changes: 6 additions & 0 deletions widgets/vis-homekittiles/js/vis-homekittiles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ $.extend(
"blockOperationShowDisabled": { "en": "Show disabled", "de": "Als deaktiviert anzeigen" },
"blockOperationShowIcon": { "en": "Show icon if blocked", "de": "Icon anzeigen wenn gesperrt" },
"blockOperationUseDifferentOID":{ "en": "Use different OID", "de": "Verwende andere OID" },
"buttonsAdd": { "en": "Add buttons", "de": "Schaltflächen hinzufügen" },
"closebuttonLabel": { "en": "Label close-button", "de": "Beschriftung Schließen-Button" },
"closeDialog_": { "en": "Close dialog ", "de": "Dialog schließen " },
"colAttr": { "en": "Attribute in JSON ", "de": "Attribut in JSON " },
Expand Down Expand Up @@ -240,6 +241,10 @@ $.extend(
"en": "A Widget to pick a date.",
"de": "Widget zur Auswahl eines Datums."
},
"hktHtmlDialogDescription": {
"en": "Dialog window for displaying any content generated with HTML code. Buttons can be added via the dialog settings and configured in the 'Buttons' section.",
"de": "Dialog-Fenster zur Anzeige von beliebigem Inhalt, der mit HTML-Code erzeugt wird. Über die Dialog-Einstellungen können Schaltflächen hinzugefügt und im Abschnitt 'Schaltflächen' konfiguriert werden."
},
"hktJsonTableDescription": {
"en": "The widget generates a table from a JSON string. In order to format all columns, the correct/desired number must be entered. The order of the columns can be adjusted using the JSON attributes. If the table header should always be displayed, all columns should be named (rename attribute).",
"de": "Das Widget generiert aus einem JSON-String eine Tabelle. Um alle Spalten formatieren zu können muss die richtige/gewünschte Anzahl eingetragen werden. Die Reihenfolge der Spalten kann über die JSON-Attribute angepasst werden. Wenn der Tabellenkopf immer angezeigt werden soll, sollten alle Spalten benannt sein (Attribut umbenennen)."
Expand Down Expand Up @@ -323,6 +328,7 @@ vis.binds["vis-homekittiles"] = {
else if (data[1] === "hktButtonSetNavigation") { text = "hktButtonSetNavigationDescription"; }
else if (data[1] === "hktButtonSetNavigationSubmenu") { text = "hktButtonSetNavigationSubmenuDescription"; }
else if (data[1] === "hktDatepicker") { text = "hktDatepickerDescription"; }
else if (data[1] === "hktHtmlDialog") { text = "hktHtmlDialogDescription"; }
else if (data[1] === "hktJsonTable") { text = "hktJsonTableDescription"; }
else if (data[1] === "hktLabel") { text = "hktLabelDescription"; }
else if (data[1] === "hktNotification") { text = "hktNotificationDescription"; }
Expand Down

0 comments on commit c062e14

Please sign in to comment.