HTML mit Bild funktioniert nicht

Symcon Skripte, PHP, SQL (Fragen)
1

Hallo Leute,

ich versuche mich in einer Visualisierung innerhalb einer HTML-Box.

Die Datei liegt dort:

$StopImage = „/var/lib/symcon/modules/SymconModules/ShotGlassFillingMachine/../imgs/StopButton.jpg“;

Ich prüfe zur Sicherheit ob die Datei vorhanden ist mit file_exist, Ergebnis ist “true”

Nun Versuche ich diese in HTML einzubinden (Ausschnitt):

$HTMLText = '<img src="/var/lib/symcon/modules/SymconModules/ShotGlassFillingMachine/../imgs/StopButton.jpg" alt="HTML5 Icon" style="width:128px;height:128px;">';
SetValue(17129, $HTMLText);

In der Visualisierung ist aber nur dieses kleine “Symbolbild” sichtbar und der alternative Text - wo mache ich einen Fehler?

Joachim

P.S.: Ich “scheitere” jetzt hier schon bei der Visualisierung - am Ende möchte ich gerne über das Bild eine Aktion auslösen. Etwas ähnliches hatte ich vor Ewigkeiten mal im “Floorplan”. Heute funktioniert das über Webhooks?

2

Ja, oder den User Ordner.
Alles andere wird auch für das Bild nicht funktionieren.
Michael

3

Hallo Michael, :slight_smile:

vielen Dank für Deine Antwort.

Die Bilder sind ja im Modulordner, weil sie Teil des Moduls sein sollen. Nach Doku doch im Ordner “imgs”. Das müsste doch eigentlich auch so funktionieren - ansonsten müsste der Nutzer des Moduls die dann manuell umkopieren?

4

Hi,

kannst die nicht in PHP als base64 einlesen und dann in die HTML Ausgabe als base64string integrieren?

5

…so mache ich es ja sonst auch in der Regel - hier möchte ich aber die Funktion haben, dass ich auf das Bild klicken kann und dann etwas passiert. Geht das auch mit einem Mediaobjekt?

6

es ist doch das selbe Objekt, also nur statt dem Pfad steht dort ja der base64 string, sollte also keinen unterschied machen?

Mal fix von goolge:

<div>
  <p>Taken from wikpedia</p>
  <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
    AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
        9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>
7

…das funktioniert! Kaum macht man es richtig, funktioniert es!!

DANKE!

1 „Gefällt mir“
8

Das wird, zumindest so:

Nie funktionieren.
Der Pfad dort ist ja für einen Client welcher das HTML anzeigen soll nicht erreichbar.
Michael

9

Guten Morgen Michael, :slight_smile:

das ist richtig. Im Modul lautet die Pfadangabe dann so:

$StartImage = file_get_contents(__DIR__ . '/../imgs/StartButton.jpg');
		$StartImage = base64_encode($StartImage);

Zum Testen habe ich ja jetzt in der Konsole gearbeitet, da habe ich dann den “langen” Dateipfad genutzt… :wink:

Joachim

10

…das war bis hierhin schon mal total klasse! Vielen Dank!

Die Webhook-Funktionalitäten sind schneller im Modul integriert gewesen als befürchtet.

Jetzt habe ich noch eine Frage wie ich da HTML und CSS (?) richtig zusammenbringe:

$HTMLText .= '<td style="width: 50%; height: 18px; border-style: hidden; text-align: left; vertical-align: middle;"><img src="data:image/png;base64,'.$StartImage.'" alt="Start" width="200"/></td>';

Das ist die Zeile im Aufbau des HTML-Contents was jetzt den Start-Button anzeigt.

Jetzt muss ich noch irgendwie unterbringen das bei einem Klick darauf der Webhook aufgerufen wird, ich habe mir hier aus den Beispielen folgende Konstruktion gebaut:

onclick="window.xhrGet=function xhrGet(o) {var HTTP = new XMLHttpRequest();HTTP.open(\'GET\',o.url,true);HTTP.send();};window.xhrGet({ url: \'hook/ShotGlassFillingMachine_'.$this->InstanceID.'?ts=\' + (new Date()).getTime() + \'&action=start.'\' }

Wie muss das jetzt in die obere Zeile eingebaut werden, damit der Klick diesen Webhook aufruft?

Joachim

11

…ich habe mich mal an Beispielen orientiert und die betreffende Zeile lautet nun:

$HTMLText .= '<td style="width: 50%; height: 18px; border-style: hidden; text-align: left; vertical-align: middle;"><img src="data:image/png;base64,'.$StartImage.'" alt="Start" width="200"
				onclick="window.xhrGet=function xhrGet(o) {var HTTP = new XMLHttpRequest();HTTP.open(\'GET\',o.url,true);HTTP.send();};window.xhrGet({ url: \'hook/ShotGlassFillingMachine_'.$this->InstanceID.'?Action=Start\' })"></td>';

Der Webhook mit dem Namen “ShotGlassFillingMachine_+ InstanzID” wurde durch das Modul angelegt. Es kommt aber in der Funktion “ProcessHookData” leider nichts an.

Der Syntax dieser Zeile ist ja schon ziemlich kompliziert, meine Kenntnisse in HTML und CSS sind eher gering - copy, paste, edit… :wink:

Sieht jemand den Fehler?

Joachim

CORS Fehlermeldungen bei Hooks
12

…seit Stunden war ich gestern und heute dabei den Fehler zu suchen…

Ich verwende diese Funktion in einigen Modulen von mir - ich begreife es nicht… :frowning:

Es gibt keine Fehlermeldungen, nur in der Funktion ProcessHookData kommt nichts an.

Kann ich irgendwie noch Kontrollen einbauen, um zu sehen wo es hakt?

13

Bin bei HTML auch raus, aber Copilot sagt da fehlt irgendwo ein Anführungszeichen:

1. Fehlende schließende Anführungszeichen

Das img-Tag ist nicht korrekt geschlossen. Das onclick-Attribut hat kein schließendes Anführungszeichen.

$HTMLText .= '<td style="width: 50%; height: 18px; border-style: hidden; text-align: left; vertical-align: middle;">' .
    '<img src="data:image/png;base64,' . htmlspecialchars($StartImage, ENT_QUOTES, 'UTF-8') . '" ' .
    'alt="Start" width="200" ' .
    'onclick="window.xhrGet=function xhrGet(o) {var HTTP = new XMLHttpRequest();HTTP.open(\'GET\',o.url,true);HTTP.send();}; ' .
    'window.xhrGet({ url: \'hook/ShotGlassFillingMachine_' . $this->InstanceID . '?Action=Start\' });">' .
    '</td>';
14

Was sagt den Die Dev-Console im Browser (F12). Damit sollte es doch erstmal recht einfach sein raus zu bekommen was überhaubt passiert bzw. aufgerufen wird.

Zum Testen des Webhooks, also ob was im Modul ankommt, kann man auch einfach im Browser die Url vom Webhook aufrufen! So kann man sich langsam rantasten wo der Fehler liegt!

Gruß Heiko

15

…vielen Dank!

Ich habe jetzt ein Element so gesetzt wie oben gepostet, eines wie ich es hatte. F12 zeigt mir tatsächlich einen Fehler!

Request URL

http://192.168.178.96:3777/legacy/hook/ShotGlassFillingMachine_56555?Action=Stop

Request Method

GET

Status Code

404 Not Found

Remote Address

192.168.178.96:3777

Referrer Policy

strict-origin-when-cross-origin

Offenbar ist das Symcon nicht erreichbar? Wie kann das sein?

16

Gehört das Legacy denn bei dem hook in die URL?

17

…das füge ich ja nicht programmtechnisch hinzu - das vor “hook” wird ja irgendwie im Code ermittelt?

Zumindest in der Doku zum Webhook ist das nicht drin…

Nachtrag: Wenn ich es aus der Kachel-Visualisierung probiere, dann funktioniert es!!

Programmtechnisch muss ich wohl den Link so anpassen, abhängig davon, ob er aus der Kachelvisualisierung oder aus dem Webfront kommt…

18

Damit wird automatisch die Url immer relativ zur Aufruf gebaut!

Einfach (führenden Slash)

`url: \'/hook/ShotGlassFillingMachine_'`

nehmen!

19

SUPER! SUPER! SUPER!

VIELEN DANK!!!

Jetzt läuft es in beiden Visualisierungen!!

Was mich wundert: In den Bestandsmodulen mit dieser Funktion (im operativen Symcon) hatte ich das bisher nicht gemerkt - obwohl ich noch das “alte” Webfront benutze…

20

Naja, vor der TileVisu gab es ja auch keinen Pfad ala /preview oder /leagacy :slight_smile: