Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄

[almundi]

Hi

Ich wollte euch erstmal sagen, ihr arbeitet hier an einem ganz tollen Stück Software. Es macht richtig Spaß sich mit dem Projekt zu beschäftigen. Leider bin ich noch nicht so trainiert im programmieren, aber in der Regel fehlte es mir nie an Motivation sich in neue Bereiche zu wagen. Deshalb nehme ich mein hausautomation Projekt um mich in Java, html5, css und Jquery fit zu machen. Leider stehe ich da noch ganz am Anfang!

So jetzt zu meiner Frage. Ich würde es toll finden wenn man über iobroker.vis auch Videos als background verwenden könnte. Also es müsste möglich sein ein video im Stretch (cropping), Loop, ohne steuerungsleiste im Hintergrund laufen zu lassen.

Bei dashui konnte ich das zumindest als IFrame realisieren aber bei iobroker klappt das nicht mehr.ich würde ja ein Widget schreiben, aber ich bin gerade am Anfang meiner Kenntnisse und fuchse mich da erst noch rein. Leider ist es mir bei iobroker bisher noch nicht gelungen überhaupt ein video einzubinden oder zum laufen zu bringen. Als Quelldateien nutze ich zur Zeit MP4, ogv oder webm.

Vielleicht hat ja jemand eine Idee und sagt man das ist voll einfach du musst dir doch einfach ein iFrame schnappen die und die Einstellungen machen und fertig ist die Kiste,

Danke schon mal Voraus für mögliche Ideengeber!

[almundi]

ok Leute!

habs jetzt rausgefunden und habe dabei ein Bug entdeckt oder es ist im Server nicht implementiert.

also ich benutze jetzt das widget "static html" unter "basic" -> hab erst später gemerkt, dass ich da ja einen eigenen HTML Code eingegeben kann. Typischer Fall von Brett vorm Kopf

ich habe dieses eingegeben:

<video autoplay/loop=""><source src="http://" local/server/adr"/vis/img/hexagon.mp4"/type="video/mp4"></video>

dazu stelle ich den z index in "ccs allgemein" noch auf 0 ,ziehe den frame noch auf die vorgegebene grösseund voila ich habe einen super hintergrund

das problem war, seht ihr wahrscheinlich selber, ich wollte zuerst das video auf den webserver von iobroker ablegen. deshalb das verzeichnis /vis/img. Blöd dann funtioniert das nicht und ich habe 1000 varianten getestet. der spielt das video nicht ab. gar nichts passiert. wenn ich aber einen seperaten apache server oder den alten ccu.io server laufen lasse und dort das video ablege dann funktioniert das wunderbar.

eine kleine bitte an die entwickler. wäre schön wenn das irgendwann mal möglich ist ein html5 video über den iobroker webserver laden zu können. so muss ich immer 2 server laufen lassen und das geht ganz schön auf die peformance.

es fragen sich wahrscheinlich viele warum ich das will? ich will das damit ich bewegte hintergründe einbauen kann und das ganze viel geiler aussieht.

Ich wollte das hier nur nochmal schnell posten wenn irgendwer auch Probleme mit lokal abgelegten videos hat und vielleicht einen video background für sein hausautomationssystem haben möchte

[pix]

Hallo almundi,

du hast mich auf eine Idee gebracht. Vielleicht ist das auch was für dich.

Ich kenne natürlich deine Videos nicht, aber kann mir vorstellen, dass schon einfach Animationen als Hintergrund den visuellen Eindruck einer View stark aufwerten. Um nicht eine Videodatei auf den Server zu legen, kann man (bei ausreichend Power im Endgerät) die Animation auch vom Browser erzeugen lassen. Kurz geoogelt und dieses http://www.leemunroe.com/css3-animations/ von Lee Munroe gefunden. Es basiert auf CSS3 Animationen. Diese lassen sich wunderbar in ioBroker, zum Beispiel im static HTML Widget, nutzen.

Einstellungen Widget static HTML:

! Hier der CSS Code:

.box1{
			width:200px;
			height:200px;
			background:rgba(255,0,0,0.5);
			position:absolute;
			top:100px;
			left:50%;
			margin-left:-100px;
		}

.box2{
			width:200px;
			height:200px;
			background:rgba(0,0,255,0.5);
			position:absolute;
			top:100px;
			left:90%;
			margin-left:-100px;
		}

@-webkit-keyframes movingbox{
			0%{left:90%;}
			50%{left:10%;}
			100%{left:90%;}
		}

.box2{
			-webkit-animation:movingbox 5s infinite;
		}

! Hier der HTML Code:

Habe leider kein GIF-Koverter für Bildschirmaufnahmen, deshalb hängt ein kleines Video an.

Gruß

Pix

Nachtrag: Schön reingefallen! Das funktioniert (bei mir) leider nur im Edit-Modus von VIS. :cry: Ist vielleicht ein Bug, vielleicht nicht. Aber mindestens ein Denkanstoss! :D

[Bluefox]

@almundi:

Hi

Ich wollte euch erstmal sagen, ihr arbeitet hier an einem ganz tollen Stück Software. Es macht richtig Spaß sich mit dem Projekt zu beschäftigen. Leider bin ich noch nicht so trainiert im programmieren, aber in der Regel fehlte es mir nie an Motivation sich in neue Bereiche zu wagen. Deshalb nehme ich mein hausautomation Projekt um mich in Java, html5, css und Jquery fit zu machen. Leider stehe ich da noch ganz am Anfang!

So jetzt zu meiner Frage. Ich würde es toll finden wenn man über iobroker.vis auch Videos als background verwenden könnte. Also es müsste möglich sein ein video im Stretch (cropping), Loop, ohne steuerungsleiste im Hintergrund laufen zu lassen.

Bei dashui konnte ich das zumindest als IFrame realisieren aber bei iobroker klappt das nicht mehr.ich würde ja ein Widget schreiben, aber ich bin gerade am Anfang meiner Kenntnisse und fuchse mich da erst noch rein. Leider ist es mir bei iobroker bisher noch nicht gelungen überhaupt ein video einzubinden oder zum laufen zu bringen. Als Quelldateien nutze ich zur Zeit MP4, ogv oder webm.

Vielleicht hat ja jemand eine Idee und sagt man das ist voll einfach du musst dir doch einfach ein iFrame schnappen die und die Einstellungen machen und fertig ist die Kiste,

Danke schon mal Voraus für mögliche Ideengeber! `
Habe es gefunden. Es muss in js-controller gemacht werden. Kommt demnächst.

[Bluefox]

@pix:

Hallo almundi,

du hast mich auf eine Idee gebracht. Vielleicht ist das auch was für dich.

Ich kenne natürlich deine Videos nicht, aber kann mir vorstellen, dass schon einfach Animationen als Hintergrund den visuellen Eindruck einer View stark aufwerten. Um nicht eine Videodatei auf den Server zu legen, kann man (bei ausreichend Power im Endgerät) die Animation auch vom Browser erzeugen lassen. Kurz geoogelt und dieses http://www.leemunroe.com/css3-animations/ von Lee Munroe gefunden. Es basiert auf CSS3 Animationen. Diese lassen sich wunderbar in ioBroker, zum Beispiel im static HTML Widget, nutzen.

Einstellungen Widget static HTML:

! Hier der CSS Code:

.box1{
			width:200px;
			height:200px;
			background:rgba(255,0,0,0.5);
			position:absolute;
			top:100px;
			left:50%;
			margin-left:-100px;
		}
		
.box2{
			width:200px;
			height:200px;
			background:rgba(0,0,255,0.5);
			position:absolute;
			top:100px;
			left:90%;
			margin-left:-100px;
		}
		
@-webkit-keyframes movingbox{
			0%{left:90%;}
			50%{left:10%;}
			100%{left:90%;}
		}
		
.box2{
			-webkit-animation:movingbox 5s infinite;
		}

! Hier der HTML Code:

Habe leider kein GIF-Koverter für Bildschirmaufnahmen, deshalb hängt ein kleines Video an. filename="css3.mp4.zip" index="0">~~

Gruß

Pix

Nachtrag: Schön reingefallen! Das funktioniert (bei mir) leider nur im Edit-Modus von VIS. :cry: Ist vielleicht ein Bug, vielleicht nicht. Aber mindestens ein Denkanstoss! :D `
Bei mir funktioniert. Hast du mindestens 0.5.2 ?

[Snatch]

Wie genau bindet man das ein? Einfach das HTML-Widget auf die Seite und damm den CSS-Code im Reiter CSS einbinfen oder muss man da noch etwas tun?