NEWS
HTML/CSS Radio Button mit Datenpunkt verbinden
-
Ja allerdings versuche ich externe komplette CSS Buttons zu integrieren, oder kann ich in diesem Widget HTML und CSS soweit verändern das der externe Code passen würde?
-
Guten Tag,
ich habe mal eine Frage ich habe im Internet insbesondere auf codepen.io eine Menge cooler css Buttons Hintergründe usw. gefunden.
Standard On/Off Buttons sind mit dem Html Button Widget auch kein Problem.Jetzt gibt es aber auch z.B. Radiobutton die 3-4 Buttons in einem vereinen (Drückt man einen wird dieser Aktiviert und der vorige wieder Deaktiviert.
So jetzt meine Frage kann man die einzelnen Buttons an einen Datenpunkt hängen? z.B. erster Button setzt 1 in Datenpunkt zweiter 2 usw. ?
Wenn ja wie müsste man da ran gehen? Müsste man das im HTML Widget irgendwie integrieren? oder im CSS Bereich oder evtl. in der Skript Spalte?
Denkt ihr das ist in Vis überhaupt realisierbar?
Hier ein Beispiel der Radio Buttons: https://codepen.io/caseycallow/pen/yaGQMo
Diese Funktionieren von der Animation her auch Wunderbar in der Vis mit z.B. dem Basic HTML Widget und den CSS Bereich in Standart CSS konvertieren und dann in die CSS Spalte in Vis packen.
Sieht in dem Beispiel dann so aus:
Danke für eure Antworten und Bemühungen.
grundsätzlich ja, aber
das html widget kann zwar daten lesen, aber
nur mit zusätzlichem javascript code auch daten schreiben .
dann müssen die datenpunkte die gelesen und geschrieben werden beim start von vis bekannt sein und
bei Änderung des datenpunkts wird der komplette inhalt des html widgets entfernt und wieder neu in den dom-baum eingefügt. bei komplexen strukturen kann es zu flackern führen und da der ggfs. enthaltene javascript code ebenfalls entfernt wird, müssen ein paar sachen in funktionen im skript tab oder ein weiteres html widget ausgelagert werden, da variablen und codeausführen den tausch nicht überleben.Ideal dafür wäre ein eigener adapter oder
du designst ein vorhandenes widget mit css soweit um, das es so aussieht wie du es haben möchtest.ich habe vor längerer zeit mal sowas gebastelt, was dann aber in meinen adapter als eigenes widget gewandert ist
hier der script-anteil zum setzen eines wertes, wenn die radio buttons geändert werden
das ist der html-anteil für die radiobuttons
-
grundsätzlich ja, aber
das html widget kann zwar daten lesen, aber
nur mit zusätzlichem javascript code auch daten schreiben .
dann müssen die datenpunkte die gelesen und geschrieben werden beim start von vis bekannt sein und
bei Änderung des datenpunkts wird der komplette inhalt des html widgets entfernt und wieder neu in den dom-baum eingefügt. bei komplexen strukturen kann es zu flackern führen und da der ggfs. enthaltene javascript code ebenfalls entfernt wird, müssen ein paar sachen in funktionen im skript tab oder ein weiteres html widget ausgelagert werden, da variablen und codeausführen den tausch nicht überleben.Ideal dafür wäre ein eigener adapter oder
du designst ein vorhandenes widget mit css soweit um, das es so aussieht wie du es haben möchtest.ich habe vor längerer zeit mal sowas gebastelt, was dann aber in meinen adapter als eigenes widget gewandert ist
hier der script-anteil zum setzen eines wertes, wenn die radio buttons geändert werden
das ist der html-anteil für die radiobuttons
Danke werde mir das mal angucken, glaube aber das wird mit meinen Kenntnissen sehr schwierig :D
Edit:
das Script kommt in die Vis in die Script Spalte?
wenn ich einen Datenpunkt einsetzen möchte wo etwas reingeschrieben wird ist es so falsch denke ich ?
<script> var adapter = "0_userdata.0.test"; function setzeWert(variablenName, Wert){ this.servConn._socket.emit('setState', variablenName, Wert); } $("input[name=station]").change(function(){ var station=this.value; var playername = $("input[name=squeeze]:checked").val(); setzeWert(adapter+"Players"+"."+playername+".cmdPlayFavorite",station); }); </script>habe jetzt nur bei Adapter meinen Test Datenpunkt eingebunden.
Ich wusste nichtmal das man die CSS Spalte auch direkt ins HTML einbinden kann mit
<style>das hilft mir auch ein bischen mehr Ordnung rein zu bekommen. -
Danke werde mir das mal angucken, glaube aber das wird mit meinen Kenntnissen sehr schwierig :D
Edit:
das Script kommt in die Vis in die Script Spalte?
wenn ich einen Datenpunkt einsetzen möchte wo etwas reingeschrieben wird ist es so falsch denke ich ?
<script> var adapter = "0_userdata.0.test"; function setzeWert(variablenName, Wert){ this.servConn._socket.emit('setState', variablenName, Wert); } $("input[name=station]").change(function(){ var station=this.value; var playername = $("input[name=squeeze]:checked").val(); setzeWert(adapter+"Players"+"."+playername+".cmdPlayFavorite",station); }); </script>habe jetzt nur bei Adapter meinen Test Datenpunkt eingebunden.
Ich wusste nichtmal das man die CSS Spalte auch direkt ins HTML einbinden kann mit
<style>das hilft mir auch ein bischen mehr Ordnung rein zu bekommen.@rudi123 sagte in HTML/CSS Radio Button mit Datenpunkt verbinden:
ich habe es in einem weiteren html widget stehen.
in den script tab kannst du es ebenfalls reinkopieren, dann müssen aber die script-tags wegich habe dir mal das script ein wenig angepasst, das es klarer wird wo was reinkommt.
allerdings solltest du es schon auf deine gegebenheiten noch anpassen. aber zum testen müsste es erste einmal reichen.
den datenpunkt 0_userdata.0.test muss als erstes von dir manuell angelegt werden. das macht das script nicht<script> var datenpunktname= "0_userdata.0.test"; function setzeWert(variablenName, Wert){ this.servConn._socket.emit('setState', variablenName, Wert); } $("input[name=station]").change(function(){ var station=this.value; var playername = $("input[name=squeeze]:checked").val(); setzeWert(datenpunktname,station); }); </script> -
datenpunkt muss bei Start von Vis bekannt sein bedeutet einfach das wenn er geändert wird der Vis Adapter neu gestartet werden muss oder komplett Iobroker?
@zyan sagte in HTML/CSS Radio Button mit Datenpunkt verbinden:
datenpunkt muss bei Start von Vis bekannt sein bedeutet einfach das wenn er geändert wird der Vis Adapter neu gestartet werden muss oder komplett Iobroker?
ja, im normalfall ändert man aber den datenpunktnamen auch nicht.
ich erwähnte es, weil im forum immer wieder mal die frage nach dynamischen datenpunkten kommt. d.h. der datenpunktname wird erst zur laufzeit zusammen gesetzt.vis sammelt bei start alle datenpunktnamen ein und "abonniert" diese.
dadurch teilt der server dann vis mit, wenn sich an diesen datenpunkten was geändert hat. sonst müssten ja ständig sämtliche werte an alle Clients (browser) verteilt werden. das wäre ineffizient. -
@rudi123 sagte in HTML/CSS Radio Button mit Datenpunkt verbinden:
ich habe es in einem weiteren html widget stehen.
in den script tab kannst du es ebenfalls reinkopieren, dann müssen aber die script-tags wegich habe dir mal das script ein wenig angepasst, das es klarer wird wo was reinkommt.
allerdings solltest du es schon auf deine gegebenheiten noch anpassen. aber zum testen müsste es erste einmal reichen.
den datenpunkt 0_userdata.0.test muss als erstes von dir manuell angelegt werden. das macht das script nicht<script> var datenpunktname= "0_userdata.0.test"; function setzeWert(variablenName, Wert){ this.servConn._socket.emit('setState', variablenName, Wert); } $("input[name=station]").change(function(){ var station=this.value; var playername = $("input[name=squeeze]:checked").val(); setzeWert(datenpunktname,station); }); </script> -
@rudi123 sagte in HTML/CSS Radio Button mit Datenpunkt verbinden:
ich habe es in einem weiteren html widget stehen.
in den script tab kannst du es ebenfalls reinkopieren, dann müssen aber die script-tags wegich habe dir mal das script ein wenig angepasst, das es klarer wird wo was reinkommt.
allerdings solltest du es schon auf deine gegebenheiten noch anpassen. aber zum testen müsste es erste einmal reichen.
den datenpunkt 0_userdata.0.test muss als erstes von dir manuell angelegt werden. das macht das script nicht<script> var datenpunktname= "0_userdata.0.test"; function setzeWert(variablenName, Wert){ this.servConn._socket.emit('setState', variablenName, Wert); } $("input[name=station]").change(function(){ var station=this.value; var playername = $("input[name=squeeze]:checked").val(); setzeWert(datenpunktname,station); }); </script>Hallo ich hätte da nochmal eine Frage, erstmal danke für die Hilfe ich habe es tatsächlich geschafft es auf einen anderen Button anzuwenden.
Wie könnte ich das Script erweitern bzw. ein zusätzliches hinzufügen das nach 3 Sekunden der Button wieder zurück auf Off geht
Mein Button, nutze das Script umgeändert wie es war.
-
Hallo ich hätte da nochmal eine Frage, erstmal danke für die Hilfe ich habe es tatsächlich geschafft es auf einen anderen Button anzuwenden.
Wie könnte ich das Script erweitern bzw. ein zusätzliches hinzufügen das nach 3 Sekunden der Button wieder zurück auf Off geht
Mein Button, nutze das Script umgeändert wie es war.
hier ungetestet, eine überflüssige Zeile habe ich noch entfernt
<script> var datenpunktname= "0_userdata.0.test"; function setzeWert(variablenName, Wert){ this.servConn._socket.emit('setState', variablenName, Wert); } $("input[name=station]").change(function(){ var station=this.value; setzeWert(datenpunktname,station); var radio = this; setTimeout(function() { radio.checked = false; }, 3000); }); </script> -
hier ungetestet, eine überflüssige Zeile habe ich noch entfernt
<script> var datenpunktname= "0_userdata.0.test"; function setzeWert(variablenName, Wert){ this.servConn._socket.emit('setState', variablenName, Wert); } $("input[name=station]").change(function(){ var station=this.value; setzeWert(datenpunktname,station); var radio = this; setTimeout(function() { radio.checked = false; }, 3000); }); </script> -
hier ungetestet, eine überflüssige Zeile habe ich noch entfernt
<script> var datenpunktname= "0_userdata.0.test"; function setzeWert(variablenName, Wert){ this.servConn._socket.emit('setState', variablenName, Wert); } $("input[name=station]").change(function(){ var station=this.value; setzeWert(datenpunktname,station); var radio = this; setTimeout(function() { radio.checked = false; }, 3000); }); </script>Hi , habe nochmal eine Frage habe dieses Navigationsdashboard gefunden.
Wäre es hier auch möglich wenn man durch die Navigationsbar klickt das man einen Input wie auch bei den Radio Buttons bekommt?Habe es jetzt schon lange Probiert aber mehr als das eine kleine Checkbox irgendwo in einem Icon aufgetaucht ist hab ich nicht geschafft.
Das ist mein Widget mit HTML CSS und dem dazugehörigem Script:
-
Hi , habe nochmal eine Frage habe dieses Navigationsdashboard gefunden.
Wäre es hier auch möglich wenn man durch die Navigationsbar klickt das man einen Input wie auch bei den Radio Buttons bekommt?Habe es jetzt schon lange Probiert aber mehr als das eine kleine Checkbox irgendwo in einem Icon aufgetaucht ist hab ich nicht geschafft.
Das ist mein Widget mit HTML CSS und dem dazugehörigem Script:
Support us
715
Online32.5k
Benutzer81.7k
Themen1.3m
Beiträge