Ankündigung

Einklappen
Keine Ankündigung bisher.

status.toast mit Kamerabild

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

    status.toast mit Kamerabild

    Moin

    Da ich seit Tagen an der Darstellung des Kamerabildes meiner Mobotix T25 bastele und das nun in allen Browsern recht gut funktioniert, versuche ich mich jetzt an dem status.toast, so wie als Beispiel in der Doku gezeigt. Leider ist das in der Doku ein Fake-Beispiel, da einfach ein PNG gezeigt wird.
    Wie das also wirklich gemacht wird, ist mir nicht klar.
    Da steht was von "item with content". Wie genau soll das gehen? Ein Item mit einem Bild oder gar Stream belegen? Wie sieht das aus? Die URL der Kamera mit Bild oder Stream?
    Kann mir da jemand ein konkretes Beispiel zeigen wie das gedacht ist?

    Danke

    Martin
    Zuletzt geändert von Sipple; 30.12.2021, 09:40.

    #2
    du müsstest dem widget als conent sowas übergeben
    "<img src="http://admin:xxx@192.168.yyy.yyy/control/faststream.jpg?stream=full" width="100%" alt="Der Stream geht nicht">"

    entweder statisch als text oder ein item welches den html code enthält

    Kommentar


      #3
      Also muss ich gar kein content item haben, sondern ich kann die url auch direkt im widget angeben?

      Falls es doch nur per item geht, ist das dann ein str? Oder was anderes (foo, list, dict, irgendwas)?

      Kommentar


        #4
        ja ein string

        kannst einfach den striong von oben hernehmen mit dem <img> das sollte passen

        Kommentar


          #5
          Danke schon mal, funktioniert prinzipiell, zumindest mit dem Firefox.
          Das Hauptproblem ist nun, dass der Toast eine feste Breite hat.

          Wenn ich das hier als content definiere:

          Code:
          <img src="http://admin:xxx@192.168.yyy.yyy/control/faststream.jpg?stream=full&preview&size=640x480&quality=40&fps=12.0" width="100%" alt="Der Stream geht nicht">
          Dann passt der Kamerastream in den Toast, ist aber so klein, dass man kaum was erkennt.

          Lasse ich width="100%" weg, bekomme ich den Stream in der Größe angezeigt, wie ich ihn will, aber er ragt natürlich über den rechten Rand des Toasts.
          Ergo: Wie passe ich den Toast an die Breite des Streams an und nicht umgekehrt?

          Gruß, Martin

          Kommentar


            #6
            Mhh das ist html, wie sieht es denn mit dem toast und dem bild darin bei dir aus , ich weiss garnicht, aber ich glaube die grösse des toasts kann man anpassen in der toast.css .. müsste da aber auch mal nachguckn

            Kommentar


              #7
              Hi Sipple ,

              die Breite des Toasts kannst du mittles CSS in der index.html anpassen, diese Breite gilt aber dann für alle Toasts.
              Die optimale Breite muss mittels Try & Error ermittelt werden.

              Der Code muss innerhalb des Block
              Code:
              {% block sidebar %}
              stehen

              Code:
              <style>
              .jq-toast-single {
              width:700px !important;
              }
              </style>
              eventuell kann man das anpassen der Grösse im Widget selbst einbauen, es gibt ja verschiedene Events.


              Gruss Andre

              Kommentar


                #8
                Dazu ist die visu.css da. Gleiche Schreibweise nur ohne die <style> tags.
                Zudem kann man das dort gleich auf die betreffende Seite oder einen bestimmten Toast begrenzen, indem man deren id mit angibt.

                Gruß
                Wolfram
                Zuletzt geändert von wvhn; 31.12.2021, 18:35.

                Kommentar


                  #9
                  Klingt gut, ich komme darauf zurück. Wenn das mit ner ID klappt bin ich glücklich.

                  Jetzt erstmal etwas Jahresende feiern. Kann nur besser werden. Obwohl wir das letztes Jahr auch schon gesagt haben.

                  Kommentar


                    #10
                    Einen wunderschönen guten Morgen und ein gutes neues Jahr

                    Die Größenanpassung über die visu.css klappt schon mal, also mit:

                    Code:
                    .jq-toast-single {
                    width:1000px !important;
                    }
                    Nur sind halt dann alle Toast Meldungen so breit.

                    wvhn, wenn ich versuche die ID des entsprechenden Toasts anzugeben, klappt es nicht. Ich vermute aber, dass meine CSS Kentnisse das eigentliche Problem sind. Wie genau referenziere ich das? Habe es so versucht, ging nicht:

                    Code:
                    #Klingeltoast {
                    width:1000px !important;
                    }
                    Der Toast schaut so aus:

                    Code:
                    {{ status.toast('Klingeltoast', 'Klingelmeldung', '', 'Klingelmeldung.Stream_URL', '', 'KLINGELING', '', 'message_bell.svg', 'warning', '', '', '', '', 'false') }}
                    Ich schätze, ich muss die ID und die Klasse kombinieren, aber wie?

                    Gruß, Martin

                    P.S. Die Streaming URL der Kamera, mit allen nötigen Parametern, kann man einfacher auch direkt in den status.toast packen. Paramter hier ist text_content. Dann muss man kein extra item in SHNG anlegen und ständig SHNG neu starten, weil man an dem Item was ändern musste. Also z.B. so:

                    Code:
                    {{ status.toast('Klingeltoast', 'Klingelmeldung', '', '', '', 'KLINGELING', '<img src="http://admin:xxx@192.168.yyy.yyy/control/faststream.jpg?stream=full&preview&size=1280x480&quality=40&fps=12.0" width="100%" alt="Der Stream geht nicht">', 'message_bell.svg', 'warning', '', '', '', '', 'false') }}
                    Zuletzt geändert von Sipple; 02.01.2022, 11:23.

                    Kommentar


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

                      Kommentar


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

                        Kommentar


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

                          Kommentar


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

                            Kommentar


                              #15
                              Hi wvhn ,

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

                              Gruss Andre

                              Kommentar

                              Lädt...
                              X