Json in DP - als Dropdown in VIS

[fabian.krauss]

@bahnuhr

Hi ich bin mir nicht sicher ob diese Widgets genau das können was du suchst, aber ich weiß das man bei dem Material design widgets viel mit JSON machen kann. Schau es dir mal an https://github.com/Scrounger/ioBroker.vis-materialdesign

Ich hatte z.B. mal per Skript eine JSON automatisch bauen lassen und in die State List geworfen:

Vielleicht ist ja Input, Autoselect oder Select was für dich.

[bahnuhr]

@fabian-krauss

Danke für die Info.
Schau ich mir an.

[bahnuhr]

@fabian-krauss

Kannst du mir da helfen. habe die mal installiert.
Aber im Moment weiß ich nicht wie ich da vorgehen soll.

[OliverIO]

@bahnuhr
muss mir hier eine entwickler umgebung für vis bauen.
dann kann ich ein drop down widget für vis bauen.

im json-template das zu bauen macht kein sinn.
wie gesagt das abonnieren von datenpunkten ist etwas aufwändig
und die automatismen von vis kann ich von dort aus nicht nutzen.

[bahnuhr]

@oliverio

Danke für deinen Einsatz.

[OliverIO]

@bahnuhr

so, manchmal hat man tomaten auf den augen und weiß selber nicht mehr alle funktionen, die man mal implementiert hat.
es geht doch mit json_template und sogar sehr einfach.

1. das folgende template in json_template eintragen
   und die werte in zeile 3 und ggfs auch zeile 2 anpassen.
   zeile 2 nur dann wenn man mehrere dropdowns in einer view einsetzen möchte

<% 
    var selectid="mydropdown"; 
    var dp_write = "0_userdata.0.test2";
%>
<script>
debugger;
    var selectid="<%- selectid %>";
    var dp_write="<%- dp_write %>";
    
    function writeDP(el) {
        debugger;
        if (el.selectedOptions[0].text) vis.setValue(dp_write,el.selectedOptions[0].text);
    }

</script>
<style>
#mydropdown {
    color:green;
}
</style>
</style><select id="<%- selectid %>" name="<%- selectid %>" size="1" onchange="javascript:writeDP(this)" >
<% debugger; %>
<% for (var i = 0; i<data.length;i++) { %>
  <option <%- ((dp[dp_write]==data[i]) ? "selected":"") %>><%- data[i] %></option>
<% } %>
</select>

in json_oid den datenpunkt mit der liste an auswahlmöglichkeiten eintragen
3)
rss_dp[1] den detenpunkt eintragen, in der geschrieben werden soll. es muss der gleiche name sein, wie im template in zeile 3 eingetragen wurde.

fertig.

[bahnuhr]

@oliverio
Danke für die schnelle Info.

Habe folgendes eingefügt:

<% 
    var selectid="mydropdown"; 
    var dp_write = "javascript.0.Sonstige.Haustuer.Bild_vom";
%>
<script>
debugger;
    var selectid="<%- selectid %>";
    var dp_write="<%- dp_write %>";
    
    function writeDP(el) {
        debugger;
        if (el.selectedOptions[0].text) vis.setValue(dp_write,el.selectedOptions[0].text);
    }

</script>
<style>
#mydropdown {
    color:rgb(255,255,255);
    background:black;
    font-size:22px;
}
</style>
</style><select id="<%- selectid %>" name="<%- selectid %>" size="1" onchange="javascript:writeDP(this)" >
<% debugger; %>
<% for (var i = 0; i<data.length;i++) { %>
  <option <%- ((dp[dp_write]==data[i]) ? "selected":"") %>><%- data[i] %></option>
<% } %>
</select>

Das dropdown öffnet sich in run nicht.

[bahnuhr]

@oliverio sagte in Json in DP - als Dropdown in VIS:

rss_dp[1]

Nachtrag.
Was bedeutet dieser DP.
Habe gesehen, dass man davon ja mehrere anlegen kann, mit: ...count

[OliverIO]

@bahnuhr

dadurch kannst noch weitere datenpunkte abonnieren.
wenn sich einer der eingetragene datenpunkte ändert, werden die anweisungen im template erneut ausgeführt.

innerhalb des templates kann der inhalt des datenpunkts über die variable dp[nameDesDatenpunkts] abgerufen werden.

in der widget hilfe ist das beschrieben. widget markieren und in vis oben links neben der auswahlliste den I-Knopf drücken

[OliverIO]

@bahnuhr
ich habe es getestet. bei mir funktionierts.
allerdings habe ich vergessen die debugger-anweisungen zu entfernen.
wenn du gleichzeitig die developer console geöffnet hattest, dann stopt das skript an der stelle wo diese anweisung steht.
hier habe ich es nun entfernt

<% 
    var selectid="mydropdown"; 
    var dp_write = "javascript.0.Sonstige.Haustuer.Bild_vom";
%>
<script>
debugger;
    var selectid="<%- selectid %>";
    var dp_write="<%- dp_write %>";
    
    function writeDP(el) {
        if (el.selectedOptions[0].text) vis.setValue(dp_write,el.selectedOptions[0].text);
    }

</script>
<style>
#mydropdown {
    color:rgb(255,255,255);
    background:black;
    font-size:22px;
}
</style>
</style><select id="<%- selectid %>" name="<%- selectid %>" size="1" onchange="javascript:writeDP(this)" >
<% for (var i = 0; i<data.length;i++) { %>
  <option <%- ((dp[dp_write]==data[i]) ? "selected":"") %>><%- data[i] %></option>
<% } %>
</select>

[bahnuhr]

@oliverio

Oh mann,

Problem war der z-index
Jetzt geht dropdown auf.

Ich teste es nun mal und geb Rückinfo.

Danke vorab.

[bahnuhr]

@oliverio

Super, funktioniert einwandfrei.
Haste ein super widget entwickelt.

mfg
Dieter

[trojanhector]

@oliverio
Hallo,
erstmal vielen Dank für das Widget. So etwas habe ich gesucht.
Grundsätzlich funktioniert es bei mir. Jedoch nur als einzelnes Dropdown. Wenn ich mehrere DDs in einem VIS verwende wird immer ein anderes Widget mit verändert und auch der Wert im DP. Ich verwende 7 Dropdowns.
Die Variablen selectid und dp_write sind überall unterschiedlich und auch rss_dp[1].

Ein weiterer Punkt ist der <Style>. Den bei allen Dropdowns nachzuhalten ist ein bisschen müßig. Läßt sich das über den CSS-Tab regeln?

Und zuletzt noch eine Frage der Datenherkunft und Speicherung.
Ich habe eine Jsonliste mit id und name. Also klassisches Key-Value Paar. Angezeigt bekommen möchte ich den Value (das klappt auch), aber gespeichert werden soll der Key. Kann man das einstellen? Ich habe in der Hilfe zu den SelectedOptions den Punkt zu den SelectedIndex gelesen, aber das trifft es nicht. Ich möcht immer die Kontrolle über den Key haben.

Beste Grüße
Hector

[OliverIO]

@trojanhector
Für jedes dropdown muss eine andere selectid definiert werden
Es reicht mydropdown einfach durch zu nummerieren

Nachtrag, ah mehrere habebja alle den gleichen scope.
Da müsste ich was umstellen. Aber Wahrscheinlichkeit nicht nicht vor Montag

[OliverIO]

@oliverio

das folgende template müsste nun bei beliebig vielen dropdowns funktionieren.
jedes dropdown benötigt sein eigenes selectid. bitte nur buchstaben und zahlen dafür verwenden, da daraus ein individueller funktionsname gebildet wird

<% 
    var selectid="mydropdown1"; 
    var dp_write = "0_userdata.0.test.test1";
%>
<script>
    let selectid="<%- selectid %>";
    let dp_write="<%- dp_write %>";
    
    function writeDP<%- selectid %>(el) {
        debugger;
        if (el.selectedOptions[0].text) vis.setValue(dp_write,el.selectedOptions[0].text);
    }

</script>
<style>
#mydropdown {
    color:rgb(255,255,255);
    background:black;
    font-size:22px;
}
</style>
</style><select id="<%- selectid %>" name="<%- selectid %>" size="1" onchange="javascript:writeDP<%- selectid %>(this)" >
<% for (var i = 0; i<data.length;i++) { %>
  <option <%- ((dp[dp_write]==data[i]) ? "selected":"") %>><%- data[i] %></option>
<% } %>
</select>

[trojanhector]

@oliverio
Ich habe das neue Template getestet und es funktioniert wie gewünscht. Die verschiedenen Werte werden in den verschiedenen Datenpunkte richtig eingetragen. Vielen Dank dafür.
Einen Punkt im Template verstehe ich nicht. Es gibt 2 x </style> hintereinander. Ich erkenne aber nur 1 x <style>. Ist das Absicht?
Konntest Du auch schon was wegen dem css Style und der JsonListe mit id und Name herausfinden? Zum einen würde ich den Style gerne in den CSS-Tab packen und zum anderen nur die id speichern. Ich habe meine Datenpunkt im Commonteil die states entsprechen vorbelegt.
"states": "0:Tag;1:Nacht;2:Schatten;3:TropenNacht;4:Party",

[OliverIO]

@trojanhector
Ich schaue

[trojanhector]

@oliverio
[
{
"id": "0",
"name": "Tag"
},
{
"id": "1",
"name": "Nacht"
},
{
"id": "2",
"name": "Schatten"
},
{
"id": "3",
"name": "TropenNacht"
},
{
"id": "4",
"name": "Party"
}
]

[OliverIO]

@trojanhector sagte in Json in DP - als Dropdown in VIS:

so nun mit key value
im widget muss unter dp1 der gleiche datenpunkt eingetragen werden, wie hier bei dp_write

<% 
    let selectid="mydropdown1"; 
    //der folgende datenpunkt muss auch unter dp1 in den widgeteinstellungen eingetragen werden
    let dp_write = "0_userdata.0.test.test1";
    
%>
<script>
    let selectid="<%- selectid %>";
    let dp_write="<%- dp_write %>";
    
    function writeDP<%- selectid %>(el) {
        //debugger;
        if (el.selectedOptions[0].value) vis.setValue(dp_write,el.selectedOptions[0].value);
    }

</script>
<style>
#mydropdown {
    color:rgb(255,255,255);
    background:black;
    font-size:22px;
}
</style>
<select id="<%- selectid %>" name="<%- selectid %>" size="1" onchange="javascript:writeDP<%- selectid %>(this)" >
<% 
  //debugger;
  for (var i = 0; i<data.length;i++) { 
      var el = data[i];
%>
  <option value="<%- el.id %>" <%- ((dp[dp_write]==el.id) ? "selected":"") %>><%- el.name %></option>
<% } %>
</select>

[trojanhector]

@oliverio
Klasse! Es funktioniert wie es soll. Verschiedene Dropdowns speichern die ID in verschiedenen Datenpunkten. Angezeigt wird der Name. Wenn im Datenpunkt ein Wert geändert wird, ändert sich auch die Anzeige in der VIS.

Bei der Einbindung einer css Klasse ist mir aufgefallen dass es ein Problem mit der id-value 0 zu geben scheint. Jede Änderung in der VIS wird richtig in den DPs gespeichert. Wenn ich den Wert im DP ändere, wird der Wert mit der id 0 nicht in der VIS aktualisiert. Alle anderen schon.
Mein select stmt:
<select class="cbo_prg_rolladen" id="<%- selectid %>" name="<%- selectid %>" size="1" onchange="javascript:writeDP<%- selectid %>(this)" >

Meine css Klasse:
.cbo_prg_rolladen {
color:rgb(255,255,255);
background:green;
font-size:12px;
}