Bilder als "data" in der Visu anzeigen?

[BlackCrow]

Hallo zusammen,

ich stehe gerade vor einem besonderen Problem - vermutlich ist die Überschrift des Threads falsch - ich wusste einfach nicht, wie ich das "Problem" genau benennen soll.

Ich benutze die SmartVisu 3.1 in Verbindung mit dem ioBroker.

Ich habe einen Adapter, der mit eine Livekarte meines Saugroboters anzeigen kann.

Dabei habe ich folgende Möglichkeiten:

1. Die Karte als URL aus einem Datenpunkt:

Datenpunkt: mihome-vacuum.0.cleanmap.mapURL - > ergibt: /mihome-vacuum.admin/actualMap_0.png

Dies bringt mir natürlich nichts, weil die SmartVisu mit "/mihome......" nichts anfangen kann - daher wird die Grafik natürlich auch nicht angezeigt.

Es gibt noch eine weitere Möglichkeit:

2. Die Karte als "map64" aus einem Datenpunkt:

Datenpunkt: mihome-vacuum.0.cleanmap.map64 -> ergibt: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABnAAAAZICAYAAAC lrI7yAAAABmJLR0QA/wD/AP+gvaeTAAAgAElEQVR4nOzdMW7qWBgF4DB6G/HGaGjYAQ0SQqJhBzQ0bMxLYapRwtWAn4Oxj6+/r7Nwwg2xjaWj3+frCwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA ........

Ich habe das hier jetzt gekürzt, um mir keine Feinde zu machen

Wenn ich das in meinem Browser aufrufe, bekomme ich tatsächlich die Karte angezueigt - genau so, wie ich es mir wünsche.


Gibt es eine Möglichkeit, die SmartVisu davon zu überzeugen, dass sie das ebenfalls verarbeiten und als Bild anzeigen kann?

Viele Grüße

[wvhn]

Hast Du schon das Widget multimedia.image ausprobiert? Dort gibst Du die URL ein, die Du auch Deinem Browser gefüttert hast.
Alternative: ein <img src="hierKommtDieBildURL"> direkt in Deine Seite.

Gruß
Wolfram

[Bonze]

Deine 2 möglichkeit ist das bild als codierte zeichenkette, sollte auch machbar sein das anzuzeigen, da manche widgets eingebettete bilder ebenfalls so enthalten..

[bmx]

Eventuell könnte auch basic.print() mit Formatangabe html weiterhelfen ...

[Bonze]

du kanns das bild, sofern es in einem item gespeichert ist mit nem basic.print so anzeigen

itemvalue = "

<img src="[MARKIEREN]data:image/gif;base64,R0lGODlhT[/MARKIEREN]" alt="" width="100%" height="100%">
"

der markierte teil ist deine zeichenkette

[BlackCrow]

du kanns das bild, sofern es in einem item gespeichert ist mit nem basic.print so anzeigen

itemvalue = "

<img src="[MARKIEREN]data:image/gif;base64,R0lGODlhT[/MARKIEREN]" alt="" width="100%" height="100%">
"

der markierte teil ist deine zeichenkette

Ich glaube, das ist der richtige Ansatz - mit "basic.print" und nur 'html' geht es nicht, dann spuckt er mir die Rohdaten des Images aus, zeigt sie jedoch nicht als Grafik an.

Ich glaube so, wie Bonze geschrieben hat, sollte es funktionieren. Allerdings bekomme ich die schreibweise nicht in die Birne.

{{basic.print('', 'mihome-vacuum.0.cleanmap.map64', 'html', '\'<img src="mihome-vacuum.0.cleanmap.map64" />\'')}}

Hab ich jetzt versucht - hat aber erwartungsgemäß nicht funktioniert, da er natürlich versucht das Objekt als Bild aufzurufen.

Wo es jetzt bei mir klemmt:

Wie muss ich es schreiben, dass er im "img src" den Inhalt aus dem Objekt übernimmt und nicht das Objekt selbst?

Sorry, wenn die Frage etwas "dumm" ist, aber ich stehe gerade echt auf dem Schlauch.

Viele Grüße

[Bonze]

Du könntest es auch in nem zusatzitem mit eval zusammenzubauen is vl einfacher

[wvhn]

Was Bonze meint, ist ein Hilfsitem, das mit dem Tag <img scr=" beginnt, dann aus Deinem item (Datenpunkt) den Inhalt eingesetzt bekommt und mit "> endet. Das funktioniert dann mit

basic.print('','<Name des Hilfsitems>','html')

Multimedia.image funktioniert leider nicht, da es einen Zeitstempel hinten anhängt, der das Anzeigen des Bildes verhindert. Schaltet man den Zeitstempel im Javascript ab, funzt es auch. Man könnte dies notfalls als weitere Option in das Widget einbauen.

[wvhn]

Ohne Hilfsitem geht es mit folgendem Code in der html-Seite:

<img id="meinbild" src="" />
{{basic.print('','mihome-vacuum.0.cleanmap.map64','script','$("#meinbild").attr("src", VAR)') }}

Gruß
Wolfram

EDIT: Literatur zum Einbinden von Daten als Bild: hier. Dort ist auch ein Tool zum Erzeugen der Daten verlinkt. Damit habe ich getestet.

[BlackCrow]

Ohne Hilfsitem geht es mit folgendem Code in der html-Seite:

<img id="meinbild" src="" />
{{basic.print('','mihome-vacuum.0.cleanmap.map64','script','$("#meinbild").attr("src", VAR)') }}

Gruß
Wolfram

EDIT: Literatur zum Einbinden von Daten als Bild: hier. Dort ist auch ein Tool zum Erzeugen der Daten verlinkt. Damit habe ich getestet.

Mega!!

Das hat funktioniert. Ich werde da jetzt sicher noch ein bisschen basteln und optimieren, aber genau so habe ich mir das gewünscht.

Vielen vielen Dank!!

Viele Grüße

Miguel