Aus HTML Datei in einen Datenpunkt schreiben

Florian 2

Hallo,

ich würde gerne einen eigenen Colorpicker in VIS einfügen um damit später RGB Lampen zu steuern. Ich habe eine HTML-Datei eine JS-Datei und eine CSS-Datei. Die habe ich jeweils zusammen in einem Ordner im IoBroker als Datei gespeichert. Über ein Widget greife ich auf das HTML Dokument zu, sodass mir der Colorpicker in meiner Visualisierung angezeigt wird.

Meine Frage dazu lautet an dieser Stelle, wie ich nun aus dem HTML-Script heraus in einen Datenpunkt schreiben kann. Folgender Ansatzt hat nicht funktioniert, da die Funktion setState anscheinend nur im JavaScript-Adapter verfügbar ist.

colorPicker.on('color:change', function(color){
	colorIndicator.style.backgroundColor=color.hexString;
            setState(zigbee.0.Test.Test_Color, color.hexString);
	});

</script>

Vielen Dank schon einmal im vorraus :)

liv-in-sky

@florian-2

vis.setValue('zigbee.0.Test.Test_Color', color.hexString)

Florian 2

@liv-in-sky

Das klappt leider dennoch nicht. Es kommt im Browser die Fehlermeldung das vis nicht bekannt ist

2021-09-21 19_26_03-C__Users_f.dirkorte_Downloads_Colorpicker_colorpicker.html - Notepad++.png

Dies habe ich aus der Browser Konsole kopiert
2021-09-21 19_25_28-vis.png

Das Widget habe ich so implemeniert

Ich habe das Widget iFrame benutzt um folgende Ansicht zu erhalten

2021-09-21 19_21_21-Edit vis.png

Die Dateien habe ich so abgelegt
2021-09-21 18_13_10-files - raspberrypi.png

Gibt es eine andere Möglichkeit das Widget in die Visualisierung einzubringen, sodass ich vis.setValue benutzen kann ?

liv-in-sky

@florian-2

evtl hilft das beispiel - habe einen file upload realisiert

https://forum.iobroker.net/topic/47654/fileupload-vom-pc-tablet-in-die-vis

anstatt einen file-picker - mußt du halt einen colorpicker integrieren

das ganze steht im html widget und darin ist vis.setValue erreichbar

Florian 2

@liv-in-sky

Vielen Dank für die Antwort.

Wenn sich die .css Datei im Pfad /vis.0/main/colorpicker/colorpicker.css befindet, ist das denn der Link den ich im HTML Widget als href eintrage?

<head>
<meta charset="utf-8">
<title>The Color Picker</title>
<link rel="stylesheet" href="/vis.0/main/colorpicker/colorpicker.css"/>
</head>

So hat es leider nicht geklappt :/

liv-in-sky

@florian-2
ich schreibe das css immer in den html code - <style>...</style>, daher - noch nie so genutzt - ich nutzte auch keinen<head> usw.

z.b. direkt im html widget:
beispiel:

<style>
   div.my1test { background: conic-gradient(#eee .1turn, black, #eee 326deg);
                height: 50px;
                width: 50px;
                border-radius:50%;
  }
</style>
<div class="my1test rotating">
</div>

Florian 2

@liv-in-sky

Okay, dann werde ich es erstml auf diesem Wege probieren.

Es würde mich dennoch interesieren wie ich eine externe Css Datei in das HTML Widget einfügen kann.

liv-in-sky

@florian-2

meine vermutung ist: das es nicht funktioniert, eine solche datei einzubinden. du definierst ja in der vis keine webseite, sondern bist schon in der webseite und fügst etwas dazu

grund: https://stackoverflow.com/questions/7575384/html-multiple-heads

es sind ja möglichkeiten da - über die tabs "script" und "css" im vis editor und über das style-tag im widget selbst - mir ist das genug - aber evtl weiß jmd anders näheres oder eine lösung für deine frage

Community Forum

NEWS

Aus HTML Datei in einen Datenpunkt schreiben

Support us

566

32.7k

82.6k

1.3m