Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄

[mrMuppet]

Hallo,

nachdem ich immer wieder festgestellt habe, dass ich eigentlich viel weniger Bedienelemente im Alltag wirklich auf dem Tablet brauche (das beste Smarthome macht schließlich alles unsichtbar von selbst und meine Frau und Kinder schauen tatsächlich bei mir hauptsächlich auch Uhr und Wetter), habe ich überlegt meine Oberfläche wieder weiter "zuentschlacken".
Als dann noch ein Nest Hub "ins Haus flog", habe ich mich entschieden diese Oberfläche einmal nachzubauen. Gestern begonnen, habe ich noch nicht mehr als eine erste Variante des Hauptscreen (Tag-Variante). Ich habe die Original Schrift installiert und die Google-Home/Now- Wetter-Icons gegrabbt.
Der rechte Teil funktioniert noch nicht, aber ich überlege tatsächlich ein System zu bauen, das je nach Bedingung (Tageszeit, Wetter, etc) verschiedene "Angebote" eingeblendet werden. Tatsächlich ein wenig wie beim Google Assistant/Hub.

Was haltet Ihr davon? Ich bin über jeden Kommentar dankbar.

EDIT:
Meine alten, wesentlich volleren, Anzeigen habe ich hier und hier vor einigen Jahren gezeigt: )

Edit: und 2020: hier und 2022: hier

[tempestas]

@mrMuppet

Mir gefällt's sehr gut.

Wir sind da eh auf einer Linie, was die Grundausrichtung angeht: weniger ist mehr.

Das ist natürlich hoch individuell, andere finden es toll, auf zig Linien und Graphen zu gucken.

Ich habe zB auf Heizungssteuerung verzichtet, das ist eh alles einmal eingestellt und läuft. Und wenn doch was angepasst werden soll, geht keiner in den Flur zum Tablet sondern dreht direkt am Regler.

Wirklich in Benutzung ist bei mir quasi auch nur die Hauptseite, da sind alle relevanten Infos drauf (und nur, wenn es was zu melden gibt, sprich ich melde nicht, dass kein Fenster auf ist sondern melde, wenn welche auf sind).

[eMd]

@mrMuppet
Ich hatte gern ein Export der Icons und Schriftart.

Dankeeeeee

MfG
eMd

[mrMuppet]

@eMd

Wettericons (in 50px und groß - also ggf. anpassen) https://drive.google.com/file/d/1rI-EQbQpP_gtONwZS38PGNVOY7Ol3s_Y/view?usp=sharing
Font: https://drive.google.com/file/d/1mSwUkRSXy0Dq485nFOuE-TTKOGy2HgT9/view?usp=sharing

[coyote]

@mrMuppet gefällt mir insgesamt sehr gut was du da machst. Du hast nicht zufällig noch einen, von mir aus auch nur teilweisen export des Views im ersten link. Der Heizplan ist da sehr gut gelungen.

Oder auch das hier gefällt mir gut.

[mrMuppet]

@coyote Vielen Dank für dein Lob! Leider bin ich nur wenig Programmierer, dafür bin ich recht fit im Photoshop. Deshalb sind meine Views hauptsächlich ein Hintergrundbild mit schönen Effekten und da dann alles ordentlich drauf arrangiert. Ich vermute du kannst deshalb recht wenig mit einem exportierten View von mir anfangen. Der zweite Screenshot ist glaube ich noch aus meiner Mediola-zeit. Deshalb leider nicht iobroker kompatibel aber als Inspirationsquelle hoffentlich brauchbar.
Wenn ich das falsch einschätze und du doch irgendwas mit meinen Views anfangen kannst, dann kann ich dir die auch gerne exportieren.

Im Moment würde ich ja gerne von den sehr statischen Seiten weg und etwas variabler bauen. Leider hab ich keine Ahnung wie ich das anfangen soll.
Vielleicht könnt ihr mir helfen.

[dos1973]

@mrMuppet
Sieht super aus. Ich bin auch dabei dass deutlich schlanker zu gestalten, zumindest auf der Hauptseite.

Mein Problem derzeit noch, ausblenden/ einblenden der Boxen geht, nur würde auch gerne die Positionen verändern, also um bei deinem Bespiel zu bleiben, ich würde gerne weitere Schaltflächen bei Bedarf anfügen, aber wenn die nicht sichtbar sind sollen keine Freiräume bleiben, also alles soll nach oben nachrutschen...

ich hoffe einigermaßen verständlich ;)

[mrMuppet]

@dos1973 Genauso stelle ich mir das auch bei mir vor. Also wenn du einen Weg gefunden hast, deine Darstellung zu realisieren, dann sag mir bitte bescheid! In meinem aktuellen Screen habe ich einfach zwei Varianten (hell/dunkel) wo dann an Stelle der Markise nach Sonnenuntergang die Rolladen gesteuert werden. Aber das möchte ich halt auch zu anderen Zeiten variabler gestalten. - Eben genau wie du beschrieben hast!

[dos1973]

ich glaube ohne jemanden der code/ programmieren kann wird das nichts ;-) also zumindest von meiner Seite.

ungeachtet dessen hat mich dein oben gezeigtes Beispiel inspiriert und ich habe bei Dir abgeschaut und es nachgebaut ;-) Danke für die tolle Idee!

die Texte ändern sich entsprechend des Stats

[mrMuppet]

@dos1973 Sehr gut gelungen! Auch mal vom Design her sehr gelungen und in der Beziehung besser als 95% aller Views die ich bisher hier gesehen habe. Glückwunsch! Vermutlich werde ich auch erstmal mit einzeiligen Feldern arbeiten die dann durchgetauscht werden.
Wie verknüpfst du die wechselnden Funktionen mit dem Text?

[dos1973]

@mrMuppet
Aktuell nur über die Sichtbarkeit... bei bestimmten Werten.
Ich zähle die Lampen, Fenster etc, bei 0 Text A, ansonsten Text B mit der gezählten Zahl.

[Förster]

Sag mal @dos1973 wie hast du das mit dem transparenten Bild bzw. Rahmen auf dem Hintergrundbild gemacht ? Das sieht super aus und würde ich gern bei mir übernehmen.

Grüße
Christian

[dos1973]

@Förster
Einfach den hintergrund weiss einfärben und mit „opacity“ spielen. Bei mir 0.2 (punkt, kein komma)

css

.transparent_box{
    opacity:0.2;
    background-color:#ffffff;
    padding-left:0px;
    padding-top:0px;
    border:#acacac solid 1px;
    border-radius:8px;
    box-shadow:6px 0px 12px 0 #161616;
    z-index:1;
}

[Förster]

Danke, das teste ich mal!

Eine Frage noch: das Hintergrundbild, ist das ein Nordlicht? Oder Sonnenuntergang?

[dos1973]

@Förster
?? ;-)
keine Ahnung, irgendein Bild aus dem Internet, ich lege gerne den Blur Filter drauf...

.blur{
      /* Add the blur effect */
     filter: blur(4px);
    -webkit-filter: blur(20px);
}

@mrMuppet : sorry, wenn dein Thread hier gekapert/ missbraucht wird

[mrMuppet]

@dos1973 gibt's irgend nen Grund das Live im Browser und nicht vorher im Photoshop zu machen?

[dos1973]

@mrMuppet
ich kann es leider nur so ;-)

[eMd]

Hallo,

wie kann ich eine Schriftart einbinden? Habe sie hochgeladen auf den iobroker, kann aber die Schriftart nirgends auswählen...

MfG
eMd

[htrecksler]

der Client /Tablet/PC/Handy muss die Schriftart können/kennen

[eMd]

@htrecksler
Ja das ist klar, aber wie kann ich die Schriftart in der VIS auswählen? Sie wird mir unter fonts nicht angezeigt bei CSS Font... Das ist mein eigentliches Problem ☺️