Ankündigung

Einklappen
Keine Ankündigung bisher.

status.toast mit Kamerabild

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

  • wvhn
    antwortet
    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.
    Zuletzt geändert von wvhn; 03.01.2022, 10:06.

    Einen Kommentar schreiben:


  • Sipple
    antwortet
    Zitat von wvhn Beitrag anzeigen
    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?

    Einen Kommentar schreiben:


  • wvhn
    antwortet
    Zitat von Sipple Beitrag anzeigen
    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.

    Einen Kommentar schreiben:


  • Sipple
    antwortet
    Zitat von wvhn Beitrag anzeigen
    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.
    Zuletzt geändert von Sipple; 02.01.2022, 23:17.

    Einen Kommentar schreiben:


  • Sipple
    antwortet
    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?

    Einen Kommentar schreiben:


  • AndreK
    antwortet
    wvhn
    Hi Wolfram,

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

    Code:
    id.split("-").slice(1).join("-")
    Gruss Andre

    Einen Kommentar schreiben:


  • wvhn
    antwortet
    Jetzt nochmal als Zusammenfassung:
    An die Zeile 275 der status.js ein Komma anfügen und in Zeile 276 die Klasse hinzufügen:
    Code:
       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:
    Code:
    .jq-toast-single.Klingeltoast {
       width:1000px !important;
    }
    So nehme ich das Widget jetzt ins develop.

    Gruß
    Wolfram

    Einen Kommentar schreiben:


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

    Einen Kommentar schreiben:


  • AndreK
    antwortet
    Hallo Wolfram,

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

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

    Einen Kommentar schreiben:


  • wvhn
    antwortet
    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
    Zuletzt geändert von wvhn; 02.01.2022, 18:52.

    Einen Kommentar schreiben:


  • AndreK
    antwortet
    Hi wvhn ,

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

    Gruss Andre

    Einen Kommentar schreiben:


  • wvhn
    antwortet
    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.
    Code:
    .Klingeltoast .jq-toast-single {
        width:1000px !important;
    }
    Gruß
    Wolfram

    Einen Kommentar schreiben:


  • AndreK
    antwortet
    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.

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

    Einen Kommentar schreiben:


  • Sipple
    antwortet
    Hi Wolfram

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

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

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

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

    Einen Kommentar schreiben:


  • wvhn
    antwortet
    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.
    Code:
    #wohnzimmer .jq-toast-single,
    #wohnzimmer-Klingeltoast .jq-toast-single,
    [id$="Klingeltoast"] .jq-toast-single { 
       width:1000px !important; 
    }
    Gruß
    Wolfram

    Einen Kommentar schreiben:

Lädt...
X