status.toast mit Kamerabild

[wvhn]

Jemand, der das kann, müsste das Skript umbauen. Dazu fehlt mir aktuell das Wissen und ein erster Versuch hat nicht geklappt.
Oder Du konfigurierst Deine Kamera so, dass sie normale jpegs in kurzer Abfolge sendet. Wie ich im anderen Thread geschrieben habe, ist es kein Problem, die Refresh-Zeit auf 0,1 Sekunde zu setzen. Es gibt öffentliche Mobotix-Kameras, die das so machen.

Das Thema sehe ich hier aber als off topic an, weil Du schon zwei andere Threads dazu aufgemacht hast.

EDIT: ich setze das Thema hier mal auf gelöst. Wir haben die Breite des Toasts geklärt und wie man ein Bild bzw. einen Stream einbindet. Die Doku habe ich hinsichtlich beider Themen etwas erweitert. Weitere Diskussion zur Einbindung von Streams bitte hier. Den Beitrag von Andre habe ich dorthin verschoben.

[Sipple]

Mit dem MJPEG-Stream (faststream) Deiner Mobotix funktioniert das Skript im Toast genauso wenig, wie im multimedia.image.

Schade. Heißt das, es geht grundsätzlich nicht oder nur, dass man das Script umbauen muss?

[wvhn]

Du meinst 285/286, richtig?

Ja. Im Master v3.1 sind es die Zeilen 285/286. Im Develop ist es 275/276. Das ist inzwischen auch gepusht.

Das php-Skript kannst Du ebenso verwenden, wie in multimedia.image. Einfach hinter "<img src=" das php-skript eintragen und den Stream als url-Parameter angeben. Das hilft aber nur bei jpeg streams. Mit dem MJPEG-Stream (faststream) Deiner Mobotix funktioniert das Skript im Toast genauso wenig, wie im multimedia.image.

[Sipple]

An die Zeile 275 der status.js ein Komma anfügen und in Zeile 276 die Klasse hinzufügen:

Du meinst 285/286, richtig?

Kurz mal getestet und funktioniert mit FF.

[Sipple]

Abgehängt bin ich seit #13, mehr oder weniger, aber ich bin mal wieder am Hut ziehen wie ihr sowas so schnell umsetzt.

Das wird sicher so funktionieren, zumindest im Firefox.
Frage: Kann man das php Script vom multimedia.image nicht 1:1 verwenden um die Login Problematik zu lösen?

[AndreK]

wvhn
Hi Wolfram,

falls jemand ein "-" in der ID verwendet, und den wird es geben, kann man das so noch abfangen

id.split("-").slice(1).join("-")

Gruss Andre

[wvhn]

Jetzt nochmal als Zusammenfassung:
An die Zeile 275 der status.js ein Komma anfügen und in Zeile 276 die Klasse hinzufügen:

   textColor: color,
   class: (id != undefined ? id.split('-')[1] : false)

Im Widget die id z.B. "Klingeltoast" vergeben und in der visu.css folgendes Format festlegen:

.jq-toast-single.Klingeltoast {
   width:1000px !important;
}

So nehme ich das Widget jetzt ins develop.

Gruß
Wolfram

[wvhn]

Perfekt. So hatte ich mir das gedacht, aber so schlank hätte ich das nicht hinbekommen. Alle Achtung!

[AndreK]

Hallo Wolfram,

habs getestet, ist so wie Du schreibst. Das ist dann sicherlich der bessere Weg. Vorschlag wäre dann :

class : id.split("-")[1]

ansonsten ist wieder "page-"+id die Klasse. Das geht natürlich auch, muss man aber wissen und dran denken.

Gruss Andre

[wvhn]

Im jQuery.toast Plugin. Scheint nicht sonderlich gut dokumentiert zu sein, ist aber im Sourcecode drin und fügt dem dynamisch generierten Toast einen Klassennamen hinzu. Einfach in die Liste der Optionen im Aufruf „class : myclass“ eingeben, dort wo Du beforeshow eingebaut hast und „myclass“ im Widget entsprechend definieren.

ich habe bisher nur getestet, dass der Klassennamen an der richtigen Stelle erscheint und teste nachher mal die Vergabe von CSS-Eigenschaften.

Gruß
Wolfram

[AndreK]

Hi wvhn ,

jetzt hast du mich abgehängt
Wo gibt es die Option "class". Die habe ich bisher nirgends gefunden.

Gruss Andre

[wvhn]

AndreK , coole Idee mit dem Callback. Ich hab allerdings gesehen, dass das Plugin auch eine Option „class“ kennt. Das scheint mir noch flexibler und einfacher. Wenn aus Eurer Sicht nichts dagegen spricht, würde ich die id des Widgets (ohne Bindung an die Seite) zusätzlich als Klasse übergeben, so dass auch kein weiterer Widget-Parameter nötig ist. Dann kann man in der visu.css die Stile flexibel einstellen.

.Klingeltoast .jq-toast-single {
    width:1000px !important;
}

Gruß
Wolfram

[AndreK]

Hi,

ich wünsche Euch allen ein frohes und gesundes neues Jahr.

Das mit der CSS-Zuordnung über die ID funktioniert nicht. Hatte ich vor meinem Tipp mit der Klasse getestet. Die Ursache liegt darin, dass das Widget eine ID hat das eigentliche Oberflächenobjekt (der angezeigte Block) aber nicht da dieses dynamisch erzeugt wird.


Mit folgendem Code-Schnippsel in der status.js - Bereich status.toast wird die Breite bei einem "img"-Tag im Content angpasst.
Falls das Bild noch nicht geladen wurde und noch keine Breite ermittelt werden kann wird auf 700px angepasst. Das müsste man via Parametern im Widget ergänzen. Das ist ca. bei Zeile 270 in der status.js der wesentliche Teil ist das Event "beforeShow"

Damit werden die Toasts mit Bildern in der angepassten Breite angezeigt. Die restlichen Toasts in der Standardbreite.

var toast = $.toast({
text: showText, // Text that is to be shown in the toast
heading: showTitle, // Optional heading to be shown on the toast
icon: showIcon, // Type of toast icon
showHideTransition: showHide, // fade, slide or plain
allowToastClose: allowClose, // Boolean value true or false
hideAfter: hideAfter, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
stack: 99, // false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
position: showPosition, // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
textAlign: textAlign,  // Text alignment i.e. left, right or center
loader: showLoader,  // Whether to show loader or not. True by default
loaderBg: loaderBg,  // Background color of the toast loader
bgColor: bgColor,
textColor: color,
beforeShow: function ()
 {
   var myWidth = 0
   for (i=0; i <= arguments[0][0].children.length-1;i++)
    {
      if (arguments[0][0].children[i].localName == "img")
       {
          myWidth = arguments[0][0].children[i].width
          if (myWidth == 0) { myWidth=700 }
          console.log('act toast-width'+String(myWidth));
       }
    }
   if (myWidth != 0)
   { arguments[0].width(myWidth+50) }
 }


});

Viele Grüsse
Andre

[Sipple]

Hi Wolfram

Leider funktioniert keine der drei Varianten.
Nur wenn ich das verwende klappt es:

.jq-toast-single {
width:1000px !important;
}

Die Datei und somit "der Raum" in dem der Toast steckt ist "rooms_menu.html". Der Toast soll ja IMMER auftauchen, egal welche Visuseite offen ist. rooms_menu.html ist die einzige Datei, die diese Voraussetzung erfüllt, kenne zumindest keine andere.

Die ID des Toasts ist definitiv "Klingeltoast". Also müsste die tatsächliche ID wie von dir oben gezeigt

rooms_menu-Klingeltoast sein.

Also sollte das hier klappen:

#rooms_menu-Klingeltoast .jq-toast-single {
width:1000px !important;
}

Tut's aber nicht. Cache des Browsers lösche ich jedesmal komplett.
Auch wenn ich nur

#rooms_menu .jq-toast-single {
width:1000px !important;

verwende klappt es nicht. Würde mir auch nicht helfen, da die anderen Toasts dann wieder alle betroffen sind.

Die Rule habe ich auch probiert, auch vorsichtshalber mal mit einem # vorne dran. Beides ohne Erfolg.

Wenn die ID's so nicht stimmen und man sie nur durch Browsertools rausfinden kann, hab ich auch ein Problem. Hab versucht was zu finden, aber wie üblich nichts gefunden. Ist aber auch schwierig, wenn man nicht weiß wo exakt man schauen muss.

Gruß, Martin

[wvhn]

Hi Martin,

Dir auch ein gutes neues Jahr!

Die ID und die Klasse verknüpfst Du in der CSS-Definition einfach, indem Du beides hintereinander schreibst. SmartVISU hat allerdings die Eigenheit, dass die in den Widgets definierten IDs noch mit dem jeweiligen Seitennamen verknüpft werden. Du kannst also entweder die ID der Seite(n) angeben, auf der der Klingeltoast eingebunden ist, ODER über die Browser-Tools die echte ID herausfinden, ODER in CSS eine Regel definieren, die für alle IDs gilt, welche auf "Klingeltoast" enden. Verwendung alternativ, also nur eine der drei folgenden Varianten, wobei die Syntax auch mit den drei Varianten in Ordnung ist.

#wohnzimmer .jq-toast-single,
#wohnzimmer-Klingeltoast .jq-toast-single,
[id$="Klingeltoast"] .jq-toast-single { 
   width:1000px !important; 
}

Gruß
Wolfram