Meldungsanzeige im WebFront

Hi Heiko,

das war wohl Zufall mit dem fehlerfreien Durchlauf - sorry für die Verwirrung.

Das Problem scheint zu sein, dass er das generierte Skript für das Event nicht findet. Ich werde jetzt nochmals aus dem Forum deine Version 2.2.20180226 rauskopieren, probieren und berichten :wink:

Gruß
Hans

Moin Heiko,

die Ursache habe ich gefunden :wink:

Es liegt am Parameter expires. Dies geht

IPS_RunScriptWaitEx(14999 /*[Zeit-Scripte\Meldungsanzeige\Meldungen\Meldungsanzeige WF Pitti]*/, array('action' => 'add', 'text' => 'Testmeldung', 'expires' => time(), 'removable' => true, 'type' => 0));

Dies nicht

IPS_RunScriptWaitEx(14999 /*[Zeit-Scripte\Meldungsanzeige\Meldungen\Meldungsanzeige WF Pitti]*/, array('action' => 'add', 'text' => 'Testmeldung', 'expires' => time() + 60, 'removable' => true, 'type' => 0));

Ich werde mal schauen, ob ich es beseitigen kann.

Gruß
Hans

Hallo Heiko,

die Ursache konnte ich leider nicht ermitteln :confused: Aufgefallen ist mir lediglich, dass in der addMessage Funktion nach Zeile 250 noch Abfragen auf if($expires == 0) vorhanden sind, die m. E. nach überflüssig sind, da oben dies ($expires > time()) abgefragt worden ist. Hat leider mit dem Browser Problem nichts zu tun.

Das WF verliert jedenfalls für einen kurzen Augenblick die Verbindung und initialisiert sich dann neu. Die Daten stimmen.

Gruß
Hans

Hi Heiko,

da ich vermutete, dass es nicht mit dem Skript sondern mit dem WF zu tun hat, habe ich im WF hier

in der Zeile TabPane einen Titel hinterlegt. Ab dann ging es ohne Probleme :cool: Zu Testzwecken habe ich den Titel wieder entfernt und es geht nun immer noch. Auch in einer Schleifenkonstruktion werden die Events jetzt blitzschnell erzeugt während das vorher deutlich träger war :wink:

Also scheint es da noch irgendwo im WF ein Problem mit der Grundinitialisierung zu geben - wie gesagt bin ich damit nicht sehr vertraut.

Gruß
Hans

Moin Heiko,

es ist nicht zu fassen, der Fehler ist wieder da :mad:

Ich gebe es jetzt auf da es in meiner nicht browserorientierten Version ja nicht auftreten kann :smiley:

Gruß
Hans

Hallo Heiko,

habe seit längerem dein Script im Einsatz und bin sehr zufrieden! Die Visualisierung läuft über IPSView.
Optisch würde ich gerne etwas verändern und zwar möchte ich den „OK“ Button am Ende des Textes, welcher in der jeweiligen Farbe angezeigt wird, an den Anfang des Meldungstextes stellen, das Wort „OK“ löschen und nur mehr einen Farbstrich (in der Höhe des Icons) anzeigen lassen. Im Endeffekt wie ein Aufzählungspunkt, nur eben höher und farblich je nach Meldungsart.
Das „OK“ habe ich bereits erfolgreich löschen können. Es ist jetzt nur mehr ein kleines, farbliches Quadrat am Ende des Textes zu sehen. Aber wie bekomme ich dieses jetzt an den Anfang und wie kann ich es vergößern?
Habe schon einiges probiert aber mit CSS und HTML kenne ich mich leider gar nicht aus.
Wenn benötigt, kann ich das ganze oder Teile des Scripts posten - es ist bereits eine etwas veränderte Version.

Danke für deine / eure Hilfe!

Peter

Meldungsfenster.jpg

Hallo Peter,

die Darstellung der Meldungen erfolgt ja in einer Tabelle mit 3 Spalten (1.Bild, 2.Text, 3.Button)

Das sieht für die Standard-Meldung so aus …


$content = $content.'<tr>';
	$content = $content.'<td class="fst"><img src=\'img/icons/Ok.svg\'></img></td>';
	$content = $content.'<td class="mid">Keine Meldungen vorhanden!</td>';
	$content = $content.'<td class="lst"><div class=\'green\' onclick=\'alert("Nachricht kann nicht bestätigt werden.");\'>OK</div></td>';
	$content = $content.'</tr>';

Eigentlich musst Du nur die entsprechenden Spalten anpassen, also die Button Spalte an den Anfang setzen …


			$content = $content.'<td class="fst">'.$image.'</td>';

Musst halt $image mit dem Strich/Quadrat ersetzen.

Ciao Heiko

Ich hab (mit deiner Hilfe) vor einiger Zeit den Text, wenn keine Meldung ansteht, ausgeblendet. Aus diesem Grund hab ich jene Zeilen gar nicht mehr aktiv, welche du jetzt geschickt hast.

Der Teil sieht im Moment bei mir so aus:
Wie du siehst, habe ich auch das „OK“ gelöscht.

if (count($data) == 0) { 
	$content = $content.'<tr><td></td></tr>'; // Diese Zeile ersetzt die nächsten 5 und bewirkt, dass das Meldungsfenster leer bleibt, wenn keine Meldungen anstehen.
        //$content = $content.'<tr>';
        //$content = $content.'<td class="fst"><img src=\'img/icons/Ok.svg\'></img></td>';
        //$content = $content.'<td class="mid">Keine Meldungen vorhanden!</td>';
        //$content = $content.'<td class=\'lst\'><div class=\'green\' onclick=\'alert("Nachricht kann nicht bestätigt werden.");\'>OK</div></td>';
        //$content = $content.'</tr>';
    } 
    else { 
        foreach ($data as $number => $message) {
            if ($message['type']) {
                switch ($message['type']) { 
                    case 3: 
                        $type = 'blue';
                        break;
                    case 2: 
                        $type = 'yellow';
                        break;
                    case 1: 
                        $type = 'red';
                        break;
                    default:
                        $type = 'green';
                        break;
                }
            }
            else {
                $type = 'green';
            } 
            if ($message['image']) { 
                $image = '<img src=\'img/icons/'.$message['image'].'.svg\'></img>'; 
            } 
            else { 
                  $image = '<img src=\'img/icons/Ok.svg\'></img>'; 
            }         

            $content .= '<tr>'; 
            $content = $content.'<td class="fst">'.$image.'</td>';

            $content = $content.'<td class="mid">'.utf8_decode($message['text']).'</td>';
            if ($message['removable']) { 
                $content = $content.'<td class=\'lst\'><div class=\''.$type.'\' onclick="window.xhrGet=function xhrGet(o) {var HTTP = new XMLHttpRequest();HTTP.open(\'GET\',o.url,true);HTTP.send();};window.xhrGet({ url: \'hook/remove?ts=\' + (new Date()).getTime() + \'&ScriptID='.$_IPS['SELF'].'&number='.$number.'\' }); "></div></td>'; // original: ">OK</div></td>';
            } 
            else { 
                $content = $content.'<td class=\'lst\'><div class=\''.$type.'\' onclick=\'alert("Nachricht kann nicht bestätigt werden.");\'>OK</div></td>';
            } 
            $content .= '</tr>'; 
        } 
    }
    $content = $content. '</table>';
    SetValueString($MessagesID, $content); 

Hallo Peter,

was ich verstanden habe ist - Du willst eine Art Aufzählung visuell haben. Was ist aber mit den Aktionen die hinter den Buttons liegen, welche Du jetzt „nur“ visuell ausgeblendet hast. Das Click-Event steht ja noch da - was soll damit passieren?

Das von einer Tabelle in eine Aufzählungsliste umzubauen ist keine Hexerei (Ul/LI), aber es steht vom Konzept ja eine Interaktion dahinter?!?!

Schreib doch nochmal genau wie es aussehen soll und wie das Interaktionskonzept sein soll!

Ciao Heiko

Hallo Heiko,

ich möchte gerne die farblichen Punkte am Anfang statt am Ende des Textes. Wie du richtig sagst, könnte man es mit Aufzählungspunkten vergleichen, welche aufgrund ihrer Farbe die Priorität symbolisieren. Die Interaktion, also löschen des Textes durch druck auf den farblichen Button, soll bestehen bleiben. Lediglich das Wort „OK“ soll nicht mehr vorhanden sein. Am liebsten wäre es mir, wenn man die Höhe des fablichen Buttons mit der Höhe des Textes oder der Höhe des Symbols gleichsetzen kann. Also nicht so klein, wie in meinem Screenshot ersichtlich ist.
Ich hoffe, ich habe mich verständlich ausgedrückt. Kurzgefasst, der Interaktions-Button vom Ende des Textes, an den Anfang des Textes und ohne dem Wort „OK“.

Peter

Ok Peter,

dann tausche doch einfach die TD’s von der jetzigen Reihenfolge (1. Icon, 2. Text, 3. Button) in Deine gewünschte (1.Button, 2. Icon, 3. Text). Ist doch ganz einfach …

Gruß Heiko

ja, für dich :smiley:

Da ich mich mit CSS und HTML gar nicht auskenne, weiß ich nicht, ab welcher Stelle des Codes ich etwas verschieben muss.

Hi Peter,

ich glaube das kann man recht flott ohne Änderungen an CSS und mit wenigen Handgriffen antesten


if (count($data) == 0) {  
    $content = $content.'<tr><td></td></tr>'; // Diese Zeile ersetzt die nächsten 5 und bewirkt, dass das Meldungsfenster leer bleibt, wenn keine Meldungen anstehen. 
        //$content = $content.'<tr>'; 
        //$content = $content.'<td class="fst"><img src=\'img/icons/Ok.svg\'></img></td>'; 
        //$content = $content.'<td class="mid">Keine Meldungen vorhanden!</td>'; 
        //$content = $content.'<td class=\'lst\'><div class=\'green\' onclick=\'alert("Nachricht kann nicht bestätigt werden.");\'>OK</div></td>'; 
        //$content = $content.'</tr>'; 
    }  
    else {  
        foreach ($data as $number => $message) { 
            if ($message['type']) { 
                switch ($message['type']) {  
                    case 3:  
                        $type = 'blue'; 
                        break; 
                    case 2:  
                        $type = 'yellow'; 
                        break; 
                    case 1:  
                        $type = 'red'; 
                        break; 
                    default: 
                        $type = 'green'; 
                        break; 
                } 
            } 
            else { 
                $type = 'green'; 
            }  
            if ($message['image']) {  
                $image = '<img src=\'img/icons/'.$message['image'].'.svg\'></img>';  
            }  
            else {  
                  $image = '<img src=\'img/icons/Ok.svg\'></img>';  
            }          

            $content .= '<tr>';  
            if ($message['removable']) {  
                $content = $content.'<td class=\'fst\'><div class=\''.$type.'\' onclick="window.xhrGet=function xhrGet(o) {var HTTP = new XMLHttpRequest();HTTP.open(\'GET\',o.url,true);HTTP.send();};window.xhrGet({ url: \'hook/remove?ts=\' + (new Date()).getTime() + \'&ScriptID='.$_IPS['SELF'].'&number='.$number.'\' }); "></div></td>'; // original: ">OK</div></td>'; 
            }  
            else {  
                $content = $content.'<td class=\'fst\'><div class=\''.$type.'\' onclick=\'alert("Nachricht kann nicht bestätigt werden.");\'>OK</div></td>'; 
            }  
            $content = $content.'<td class="mid">'.$image.'</td>'; 

            $content = $content.'<td class="lst">'.utf8_decode($message['text']).'</td>'; 
            $content .= '</tr>';  
        }  
    } 
    $content = $content. '</table>'; 
    SetValueString($MessagesID, $content);  

Habe mal Deinen Code-Ausschnitt so modifiziert das Dein gewünschtes Ergbnis bei rauskommt!

Gruß Heiko

Hallo Heiko!

Danke für den Code, hab ihn eingefügt und getestet. Der Punkt ist jetzt am Anfang, genau dort, wo ich ihn haben will - das ist schon mal super. Jedoch steht der Text jetzt ganz im rechten Eck.
Wie kann ich das noch anpassen?

Peter

Könnte es mit diesen Einstellungen zu tun haben?

 // Etwas CSS und HTML
    $style = "";
    $style = $style.'<style type="text/css">';
    $style = $style.'table { width:100%; border-collapse: collapse; }';
    $style = $style.'td.fst { width: 5px; padding: 2px; border-left: 0px solid rgba(255, 255, 255, 0.2); border-top: 0px solid rgba(255, 255, 255, 0.1); }';
    $style = $style.'td.mid { padding: 3px;  border-top: 0px solid rgba(255, 255, 255, 0.1); }';
    $style = $style.'td.lst { width: 12px; text-align:center; padding: 0px;  border-right: 0px solid rgba(255, 255, 255, 0.2); border-top: 0px solid rgba(255, 255, 255, 0.1); }';
    $style = $style.'tr:last-child { border-bottom: 0px solid rgba(255, 255, 255, 0.2); }';
    $style = $style.'.blue { padding: 5px; color: rgb(255, 255, 255); background-color: rgb(0, 0, 255); background-image: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }';
    $style = $style.'.red { padding: 5px; color: rgb(255, 255, 255); background-color: rgb(255, 0, 0); background-image: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }';
    $style = $style.'.green { padding: 5px; color: rgb(255, 255, 255); background-color: rgb(0, 255, 0); background-image: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }';
    $style = $style.'.yellow { padding: 5px; color: rgb(255, 255, 255); background-color: rgb(255, 255, 0); background-image: linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); background-image: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%); }';
    $style = $style.'</style>';

Genau, Du musst die Breiten der Tabellenspalten anpassen, d.h. auch wieder die Reihenfolge abändern:

Wahrscheinlich so:


    $style = $style.'td.fst { width: 12px; text-align:center; padding: 0px;  border-left: 0px solid rgba(255, 255, 255, 0.2); border-top: 0px solid rgba(255, 255, 255, 0.1); }'; 
    $style = $style.'td.mid { width: 5px; padding: 2px; border-top: 0px solid rgba(255, 255, 255, 0.1); }'; 
    $style = $style.'td.lst { padding: 3px;  border-right: 0px solid rgba(255, 255, 255, 0.2); border-top: 0px solid rgba(255, 255, 255, 0.1); }';

Habe es jetzt einfach mal aus dem Stegreif gemacht. Den Rest musst Du dann selber austesten.

Ciao Heiko

PS: die CSS-Klassennamen haben folgendende Bedeutung:
fst - steht für „first“ (erste Spalte)
mid - steht für "middle (mittlere Spalte)
lst - steht für „last“ (letzte Spalte)

Heiko, du bist der Beste!!
GENAU SO wollte ich es haben - funktioniert einwandfrei.

Danke für deine super Unterstützung!

Liebe Grüße aus Linz

Peter

Hi Heiko,

hab mir jetzt mal die ganzen Seiten durchgelesen :slight_smile: Vielen Dank für das Skript!
ABER ich glaube ich habe da etwas von einem MODUL gelesen, da du machen wolltest :cool:
Hintergrund:
Ich bin echt keine Leuchte und verstehe viele Sachen so gar nicht, und müsste wieder ein Update von deinem Skript machen.
Muss ich ALLES löschen und das Skript (Welches?) neu installieren? Oder drüber installieren?

Danke und lg

Hi cbeham,

das mit dem Modul steht bei mir wirklich auf der Liste, aber zeitlich ist das dann für die winterlichen Tage vorgesehen :wink:

Warum musst Du denn ein Update von dem Script machen - funktioniert etwas nicht?

Hier im Forum wurden ja diverse Veränderungen/Anpassungen/Verbesserungen diskutiert und programmiert. Ich habe nicht alle Sachen bei meinem Script eingebaut, deshalb muss mein Versionsstand nicht der „aktuellste“ sein. Mein Script hat die Version 2.3.20180304 und kann ich gern nochmal posten.

Normalerweise muss man nur das Script austauschen, wenn man es schon mal am laufen hatte und natürlich die wenigen Konfigurationseinstellungen (Webfront ID und Sortierung) anpassen! Das sollte es gewesen sein.

Man kann aber auch alles löschen und neu installieren, dann muss man aber in den „aufrufenden“ Scripten die neue Script-ID eintragen!

Hoffe das hilft Dir bei deinen nächsten Schritten.

VG Heiko

erstmal vielen Dank an Pitti für die tolle Weiterentwicklung des Skriptes!

manchmal sieht man den Wald vor lauter Bäumen nicht:

Ich habe das Skript von Pitti in der Version 2.2.20180226 (sollte die letzte sein wenn ich den thread richtig gelesen habe).

Leider kann ich eine Meldung nicht löschen, wenn ich im Webfront den „OK“-Button drücke. (Browser ist Firefox.)

Wenn ich es richtig verstanden habe, muss ich im Skript dafür bei Webhook die Instanz des Webfronts eintragen (also im Objektbaum unter „Konfigurator Instanzen“ die Webfront Configurator Instanz die ich nutze).

Habe ich etwas falsch verstanden?