Ankündigung

Einklappen
Keine Ankündigung bisher.

Bilder als "data" in der Visu anzeigen?

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Bilder als "data" in der Visu anzeigen?

    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


    Zuletzt geändert von wvhn; 12.01.2022, 09:58. Grund: Status gelöst gesetzt

    #2
    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

    Kommentar


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

      Kommentar


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

        Kommentar


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

          Code:
          itemvalue = "
          
          <img src="[MARKIEREN]data:image/gif;base64,R0lGODlhT[/MARKIEREN]" alt="" width="100%" height="100%">
          "
          der markierte teil ist deine zeichenkette

          Kommentar


            #6
            Zitat von Bonze Beitrag anzeigen
            du kanns das bild, sofern es in einem item gespeichert ist mit nem basic.print so anzeigen

            Code:
            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.

            Code:
            {{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

            Kommentar


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

              Kommentar


                #8
                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
                Code:
                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.

                Kommentar


                  #9
                  Ohne Hilfsitem geht es mit folgendem Code in der html-Seite:
                  Code:
                  <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.
                  Zuletzt geändert von wvhn; 11.01.2022, 22:02.

                  Kommentar


                    #10
                    Zitat von wvhn Beitrag anzeigen
                    Ohne Hilfsitem geht es mit folgendem Code in der html-Seite:
                    Code:
                    <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

                    Kommentar

                    Lädt...
                    X