status.toast mit Kamerabild

[Sipple]

Einen wunderschönen guten Morgen und ein gutes neues Jahr

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

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

#Klingeltoast {
width:1000px !important;
}

Der Toast schaut so aus:

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

{{ 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') }}

[Sipple]

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.

[wvhn]

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

[AndreK]

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

{% block sidebar %}

stehen

<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

[Bonze]

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

[Sipple]

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:

<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

[Bonze]

ja ein string

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

[Sipple]

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)?

[Bonze]

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

[Sipple]

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