Vorlagen/Ideen MüllPlan VIEW / Widget ?

[crunchip]

@eMd soweit sind wir noch nicht, erst muss seine Abfrage stimmen

[moppel2810]

@crunchip

Es geht Danke für deine Geduld

[crunchip]

@moppel2810 kein Thema, hätte auch schon heut nachmittag funktioniert, wenn du richtig gelesen hättest

[moppel2810]

@liv-in-sky
Kann ich das auch für Anwesendheitssteuerung nutzen? Ich würde gern 2 png Leuchten lassen wenn anwesend und nicht leuchten bei abwesendheit bzw grün anwesend und rot abwesend.

[moppel2810]

@liv-in-sky said in Vorlagen/Ideen MüllPlan VIEW / Widget ?:

für interessierte - blinkende rahmen:
nochmal danke @crunchip - leicht geändert

verschieden farbiges blinken:

hier die klasse:

kann beliebig variiert werden. zb. dir zeit verändern - oder die %-zahlen - und natürlich die farbcodes selbst

.blink-bunt   {
  animation: mdui-bunt-blink-ani 2s linear infinite;
    
}
@keyframes mdui-bunt-blink-ani {
  8% {filter: drop-shadow(0px 0px 4px #AEB404) drop-shadow(0px 0px 4px #AEB404) drop-shadow(0px 0px 4px #AEB404); }
  30% {filter: drop-shadow(0px 0px 4px #DBA901) drop-shadow(0px 0px 4px #DBA901) drop-shadow(0px 0px 4px #DBA901); }
  60% {filter: drop-shadow(0px 0px 4px #FF0040) drop-shadow(0px 0px 4px #FF0040) drop-shadow(0px 0px 4px #FF0040); }
  0% {filter: none;}
}
.blink-bunt-blau   {
  animation: mdui-bunt-blau-blink-ani 3s linear infinite;
    
}
@keyframes mdui-bunt-blau-blink-ani {
  8% {filter: drop-shadow(0px 0px 4px #00BFFF) drop-shadow(0px 0px 4px #00BFFF) drop-shadow(0px 0px 4px #00BFFF); }
  30% {filter: drop-shadow(0px 0px 4px #A9BCF5) drop-shadow(0px 0px 4px #A9BCF5) drop-shadow(0px 0px 4px #A9BCF5); }
  60% {filter: drop-shadow(0px 0px 4px #FF0040) drop-shadow(0px 0px 4px #FF0040) drop-shadow(0px 0px 4px #FF0040); }
  0% {filter: none;}
}

Kann ich das auch für Anwesendheitssteuerung nutzen? Ich würde gern 2 png Leuchten lassen wenn anwesend und nicht leuchten bei abwesendheit bzw grün anwesend und rot abwesend.

[liv-in-sky]

@moppel2810

es geht mit jedem datenpunkt , welchen du abfragen kannst - egal ob boolean oder string oder zahl

das beispiel ist ein schalter für einen lüfter - durch drücken ändert sich der wert - true false - also wie bei anwesenheit

das steht in der vis:

übersetzt: wenn controll-own.0.Luefter3 ist wahr nehme "blink-bunt" aus css-klasse - sonst "blink-red" (blink bunt entspricht bei mir grün)

{val:controll-own.0.Luefter3;val=="true"? "blink-bunt":  "blink-red"}

das "blink-bunt" und "blink-red" ist in der css klasse definiert

[moppel2810]

@liv-in-sky
Geht das auch wenn ich einfach ein img in die vis einfüge oder muss ich da was spezieles nehmen?

[liv-in-sky]

@moppel2810 müßte auch mit image funktionieren - den css eintrag unter generell im image-widget gibt es ja dort auch

[moppel2810]

@liv-in-sky said in Vorlagen/Ideen MüllPlan VIEW / Widget ?:

{val:controll-own.0.Luefter3;val=="true"? "blink-bunt": "blink-red"}

{val:controll-own.0.Luefter3;val=="true"? "blink-bunt": "blink-red"} da tausche ich einfach "controll-own.0.Luefter3" gegen meinen ping oder tr-064?

wie bzw wo bekomm ich den blink code für die css klasse her?

[crunchip]

@moppel2810 Das ist in dem Material Design Css Skript hinterlegt
https://github.com/Uhula/ioBroker-Material-Design-Style

[liv-in-sky]

@moppel2810 sagte in Vorlagen/Ideen MüllPlan VIEW / Widget ?:

@liv-in-sky said in Vorlagen/Ideen MüllPlan VIEW / Widget ?:

{val:controll-own.0.Luefter3;val=="true"? "blink-bunt": "blink-red"}

{val:controll-own.0.Luefter3;val=="true"? "blink-bunt": "blink-red"} da tausche ich einfach "controll-own.0.Luefter3" gegen meinen ping oder tr-064?

wie bzw wo bekomm ich den blink code für die css klasse her?

mit dem austausch liegst du richtig - statt lüfter kannst du ping/tr064 benutzen

weiter oben ist der im post - hier nochmal:

für rot blinkend:

Spoiler

.blink-red   {
 animation: mdui-red-blink-ani 3s linear infinite;
}
@keyframes mdui-red-blink-ani  {
 0%,50% {filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); }
 51% {filter: none;}

}
.blink-yellow {
 animation: mdui-yellow-blink-ani 1s linear infinite;
}
@keyframes mdui-yellow-blink-ani  {
 0%,70% {filter: drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B); }
 71% {filter: none;}

}

für gelb-grün blinkend

Spoiler

.blink-bunt   {
 animation: mdui-bunt-blink-ani 3s linear infinite;
   
}
@keyframes mdui-bunt-blink-ani {
 8% {filter: drop-shadow(0px 0px 4px #FFFF00) drop-shadow(0px 0px 4px #FFFF00) drop-shadow(0px 0px 4px #FFFF00); }
 30% {filter: drop-shadow(0px 0px 4px #01DF3A) drop-shadow(0px 0px 4px #01DF3A) drop-shadow(0px 0px 4px #01DF3A); }
 60% {filter: drop-shadow(0px 0px 4px #2BF23F) drop-shadow(0px 0px 4px #2BF23F) drop-shadow(0px 0px 4px #2BF23F); }
 0% {filter: none;}
}

.blink-lila   {
 animation: mdui-lila-blink-ani 3s linear infinite;
   
}

für drehend vertikal

Spoiler

.anime { animation: turner 4s infinite linear !important}
 
@keyframes turner{
   from{  transform: rotateY(0deg)   }
   to  {  transform: rotateY(360deg) }
}

für drehend horizontal

Spoiler

.anime2 { animation: turner2 4s infinite linear !important}
 
@keyframes turner2{
   from{  transform: rotateX(0deg)   }
   to  {  transform: rotateX(360deg) }
}

.player {
   background: #273B7C !important;
}

.anime { animation: turner 4s infinite linear !important}
 
@keyframes turner{
   from{  transform: rotateY(0deg)   }
   to  {  transform: rotateY(360deg) }
}

[moppel2810]

@liv-in-sky

was muss ich ändern das es nicht blinkt bzw nur leuchtet?
Hab gerade noch ein Problem und zwar funktioniert es in der vis vorschau auf dem PC aber nicht auf dem Tablet

[tempestas]

@moppel2810

Welches Tablet hast du?
Wenn es sehr alt ist, kann es sein, dass das Klassen nicht funktionieren. ZB auf meinem alten Fire HD Tablet ist das so

[liv-in-sky]

@moppel2810

leuchte dauernd:

Spoiler

.leuchte   {
 animation: mdui-leuchte-ani 10s linear infinite;
   
}
@keyframes mdui-leuchte-ani {
 0%, 100% {filter: drop-shadow(0px 0px 4px #DF013A) drop-shadow(0px 0px 4px #DF013A) drop-shadow(0px 0px 4px #DF013A); }

}

wie @tempestas schon erwähnte - ich ahbe auch ein sehr altes samsung tablet - da geht es auch nicht

[moppel2810]

@liv-in-sky

hab ein galaxy tablet a dachte eigentlich das es noch ok ist

[tempestas]

@moppel2810

Das habe ich auch. Diese konkrete CSS Klasse habe ich nicht un Benutzung, aber andere mit blinken und co schon, geht ohne Probleme

Wenn du nur einen rot leuchtenden Rahmen willst, versuch mal diese css Klasse

.redGlow {filter: drop-shadow(0px 0px 3px #F44336)  ; }

im Reiter CSS im Projekt so eintragen, dann beim Widet unter CSS

redGlow

eintragen

[liv-in-sky]

@tempestas sagte in Vorlagen/Ideen MüllPlan VIEW / Widget ?:

.redGlow {filter: drop-shadow(0px 0px 3px #F44336) ; }

das wollte ich auch benutzen, aber bei dunklen hintergrund ist der schatten kaum erkennbar - oder kennst du noch einen trick, wie der schatten etwas "satter" wird?

[moppel2810]

Liegt an der iobroker app. Ich benutze jetzt den Fully Browser und mit dem läuft es super er zeigt alles an und hat sogar bewegungserkennung zum aktivieren des Bildschirmes.

[Hundefreund]

@ChrisXY
ich bin neu in der Materie hier ...
Kannst du mir deine Müllplan View /widget /scripte /Bilder, wie auf dem oberen Bild (gefällt mir sehr gut !!) ,die man für die VIS baucht noch mal linken ??

Vielen Dank

[Hundefreund]

@liv-in-sky
Hallo ich bin hier neu in der ganzen
Materie...
Ich habe mir mal die 3 Scripte runtergeladen und in Vis eingebunden.
Wo werden denn die Mülltonnen-Bilder
eingebunden und wo sind die verschiedenen
CSS scripte ?
Danke schon mal...