[Vorstellung] Shelly Style Widgets

[CrunkFX]

Nachdem es im anderen Thread unübersichtlich wurde geht´s jetzt hier weiter.

Ursprünglich wollte ich nur nen Schalter nachbauen, aber irgendwie ist das eskaliert

Die hier erstellten Widgets sind den Widgets aus Allterco´s Shelly App nachempfunden. Diese bestehen aus Gruppierten VIS Widgets und benötigen sofern nicht anders angegeben nur die in VIS standardmäßig vorhandenen Widgets.

In dieser Test Vis kann ausprobiert werden: Klick mich!

Installation:

Spoiler

Schritt 1 -- Kopieren der Widgets
Zur Benutzung dieser Widget Vorlagen muss für das jeweilige Widget der RAW Code vom GitHub Link kopiert werden. Dies bitte mit STRG+A und STRG+C kopieren und in VIS mit STRG+V einfügen. Da aufgrund der großen Base64 Codierungen die Kontextmenüs der Browser nicht anständig funktionieren.

Schritt 2 -- Einfügen in VIS
In VIS wird nun der eben Kopierte Code eingefügt

!!! Beim Import wird auch die Position des Widget mit importiert. Falls das Widget also nicht zu sehen ist bitte den kompletten Arbeitsbereich ansehen ob das Widget nicht vielleicht doch an einer nicht Sichtbaren Stelle gelandet ist.

Schritt 3 -- Konfigurieren
Widgetgruppen in IOBroker werden über Attribute mit Werten und Datenpunkten versorgt.

Beispiel Switch:

Zu den einzelnen Widget´s werden noch Anleitungen erstellt!

Switches:

Spoiler

Switch

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch

Switch mit Power

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch-Power

Da Woody Spezial

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/DaWoody

Switch mit Input

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch -w Input

Power-Switch mit Input

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch-Power -w Input

DaWoody Spezial mit Input

Code:https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/DaWoody -w Input

Sensoren:

Spoiler

Temperatur und Feuchtigkeit mit Batterie

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Hum-Temp-Bat

Temperatur und Feuchtigkeit

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Hum-Temp

Energy

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Power

Sensor

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Sensor

Thermostat:

Spoiler

Thermostat

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Thermostat

Dimmer:

Spoiler

Dimmer

Beim Dimmer gibt´s leider durch einen vermeindlichen Bug im HTML Widget eine Besonderheit. Neben den Einstellungen in der GroupControl muss hier auch im HTML vom Slider der Datenpunkt gesetzt werden:

Sollte machbar sein.

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Dimmer

Shutter:

Spoiler

Shutter

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Controls/Shutter

Mediaplayer:

Spoiler

Mediaplayer

Test-Link: hier

Play/Pause funktioniert nur bei korrekter Rückmeldung !

Wer hier Spielereien wie Lauftext nutzen möchte, der kann bei Track und Artist das einfügen. In die geschweiften Klammern muss dann der Datenpunkt:

<marquee scrollamount="2" scrolldelay="100"> {0_userdata.0.input}</marquee>
826085c3-d8fa-422d-a700-fcf19cb1201a-image.png

Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Mediaplayer

Mediaplayer XL V2

Test Link: hier

Nachdem es mit dem ursprünglichen Widget einige Probleme mit dem HTML Widget gab, hab ich das Widget von Grund auf neu erstellt. Ebenso gibt es nun eine Version für Spotify.
Das Widget benötigt nun den Metro Widgets Adapter!!! und einen CSS Eintrag.

Installation:
1. Metro Widgets Adapter installieren

2. CSS ins Projekt oder Global CSS kopieren:

/* ---- Shelly Styled Widgets CSS ---- */
/*           @2021 CrunkFX             */

/* ######     Slider Start      ###### */
.shstyledwidgets-bar .metro .slider .complete {
	-webkit-appearance: none;
	background-color: #37d0fa;
	-moz-border-radius: 2px 0 0 2px;
	border-radius: 3px 0 0 3px;
	-webkit-transition: .2s;
	transition: opacity .2s;
	-moz-box-shadow: inset 0 0 5px #000000;
	-webkit-box-shadow: inset 0 0 5px #000000;
	box-shadow: inset 0 0 5px #000000;
}

.shstyledwidgets-bar .metro .slider .marker:active {
	outline: none;
}

.shstyledwidgets-bar .metro .slider .marker {
	-webkit-appearance: none;
	border-width: 0px;
	top: -1px;
	z-index: 2;
	appearance: none;
	height: 14px;
	width: 22px;
	background: #27506c;
	cursor: pointer;
	border-radius: 1px;
	-moz-box-shadow: inset 0 0 0px #000000;
	-webkit-box-shadow: inset 0 0 4px #000000;
	box-shadow: inset 0 0 4px #000000;
}

.shstyledwidgets-bar .metro .slider {
	background-color: transparent;
}

.shstyledwidgets-bar2 .metro .slider .complete {
    height: 10px;
	-webkit-appearance: none;
	background-color: #37d0fa;
	-moz-border-radius: 2px;
	border-radius: 2px 2px 2px 2px;
	-webkit-transition: .2s;
	transition: opacity .2s;
	-moz-box-shadow: inset 0 0 5px #000000;
	-webkit-box-shadow: inset 0 0 5px #000000;
	box-shadow: inset 0 0 5px #000000;
}

.shstyledwidgets-bar2 .metro .slider .marker:active {
	outline: none;
}
.shstyledwidgets-bar2 .metro .slider .marker {
opacity:0;
}
.shstyledwidgets-bar2 .metro .slider {
	background-color: transparent;
}
/* ######       Slider End      ###### */

3. WebApp starten und

Alexa: Playerpfad eingeben
Um die Automatische Einrichtung zu nutzen muss der Pfad zum Alexa Player kopiert werden. Das geht so :
Danach in der WebApp:
Bitte das Kopieren der Langen Widget Codes über STRG+A und STRG+C machen, da die Browserdialoge sonst die Seite zum Absturz bringen können.
Spotify: Instanznummer angeben

Danach das Ergebnis kopieren und als Widget importieren

Das Widget kann Weiterhin manuell Eingerichtet werden.
Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Mediaplayer XL

Alle verwendeten Assets stehen hier zur Verfügung: https://github.com/CrunkFX/IOBrokerCustomFiles/tree/master/Images
Falls das jemand nachbauen will, hat der liebe @da_Woody meine Anleitung glattgefeilt und als PDF erstellt. Anleitung Ansehen

Viel Spaß damit. Für Vorschläge bin ich offen.

[CrunkFX]

@crunkfx reserviert

[CrunkFX]

@crunkfx reserviert

[MartinK.]

@crunkfx Cooles tutorial zur Widget Erstellung !

Ist dir denn schon eine Idee gekommen für das Shutter Widget , das bei jedem Schalten die funktion open/close ändert ? Ich habe noch keine Lösung finden können außer mit meiner
= > oder < Positions abfrage ...

[MartinK.]

@crunkfx sagte in [Vorstellung] Shelly Style Widgets:

Nachdem es im anderen Thread unübersichtlich wurde geht´s jetzt hier weiter.

Ursprünglich wollte ich nur nen Schalter nachbauen, aber irgendwie ist das eskaliert

....hätte ich nur nicht das Shelly Widget Foto gepostet

[Albert K]

@crunkfx said in [Vorstellung] Shelly Style Widgets:

Ursprünglich wollte ich nur nen Schalter nachbauen, aber irgendwie ist das eskaliert

LOL, das passiert manchmal so Und ich vermute das wird noch ne Weile so gehen

Könnte mir vorstellen dass das den WAF erhöhen könnte wenn die Visualisierung auf einem Wand Tablet dem der Shelly App ähnelt. Die Widgets gefallen mir.

• Beim Temp-Hum Widget ist bei mir die Schrift so klein (etwa 60% der Größe der anderen Widget Texte) . Kann es auch über CSS Font & Text nicht anpassen. Hab das Widget auch schon mehrfach importiert. (???)
• Beim Shutter Widget, was muss da denn bei "Wert für Stop" rein? (bei Shelly 2.5 ist das ein Push Button im DP, true/false geht aber im Widget nicht) (???)

(Sorry, momentan kein Bild, bekomme leider plötzlich Fehler wenn ich hier einen Screenshot hochladen möchte...)

Edit: Jetzt geht es wieder...

[MartinK.]

@albert-k sagte in [Vorstellung] Shelly Style Widgets:

@crunkfx said in [Vorstellung] Shelly Style Widgets:

Ursprünglich wollte ich nur nen Schalter nachbauen, aber irgendwie ist das eskaliert

LOL, das passiert manchmal so Und ich vermute das wird noch ne Weile so gehen

Könnte mir vorstellen dass das den WAF erhöhen könnte wenn die Visualisierung auf einem Wand Tablet dem der Shelly App ähnelt. Die Widgets gefallen mir.

• Beim Temp-Hum Widget ist bei mir die Schrift so klein (etwa 60% der Größe der anderen Widget Texte) . Kann es auch über CSS Font & Text nicht anpassen. Hab das Widget auch schon mehrfach importiert. (???)
• Beim Shutter Widget, was muss da denn bei "Wert für Stop" rein? (bei Shelly 2.5 ist das ein Push Button im DP, true/false geht aber im Widget nicht) (???)

(Sorry, momentan kein Bild, bekomme leider plötzlich Fehler wenn ich hier einen Screenshot hochladen möchte...)

Edit: Jetzt geht es wieder...

Mit einem Doppelklick auf die Gruppe kann man diese ja editieren und auch den Text Baustein normalweise anpassen (größe, schriftart..usw)

[Albert K]

@martink

Oh! Jetzt komm ich mir dumm vor Wieder was dazu gelernt, Danke!

[MartinK.]

@albert-k

[CrunkFX]

@martink Aktuell besitze ich meine komplette Rolladenausstattung von Rademacher. Aber der Homepilot inklusive Zubehör ist dermaßen beschissen dass ich auf Shelly Umsteige. Sobald die da sind setze ich mich an das Widget. Das wird dann auch in vollem Funktionsumfang nur für Shelly 2.5 nutzbar sein.

[MartinK.]

@crunkfx Coole Sache! .... und die Shelly 2.5 arbeiten super als Jalousie Steuerung !

[chucky666]

@crunkfx
Ich habe meine ersten Shellys 2.5 gestern eingebaut und bin positiv begeistert .

Jetzt brauche ich nur noch ein gutes Widget

[Bostil]

erledigt !

[arteck]

der shutter ist aber statisch ... oder ?? also das Bild ändert sich nicht wenn das Rollo zu oer offen ist

[MartinK.]

Hier nochmal mein Shutter Widget zum importieren in den ioBroker.
EDIT: ( Jetzt als RTF Datei / um Textprobleme bei der Konvertierung zu unterbinden )

Shelly-Shutter.rtf

Derzeit funktioniert der Button wechsel von open auf close über die Positionsabfrage.
Aber vielleicht hat jemand ja noch eine bessere Lösung wie man den Wechsel der Buttons
ohne Skript lösen kann...

[CrunkFX]

@arteck Das ist richtig, der große Shutter von Shelly zeigt keinen Status an. Allerdings fehlt in meiner Ausführung der Slider. Den Pack ich noch mit rein. Somit wäre der Slider die Rückmeldung ob auf oder zu.

[CrunkFX]

@martink Das ist bisher auch die beste Lösung auf die ich komme ohne Skripte zu benutzen. Ich würde das mit oben rein nehmen wenn du magst

[MartinK.]

@crunkfx sagte in [Vorstellung] Shelly Style Widgets:

@martink Das ist bisher auch die beste Lösung auf die ich komme ohne Skripte zu benutzen. Ich würde das mit oben rein nehmen wenn du magst

Klar, kannst Du gerne mit in die Sammlung aufnehmen

[claus1993]

Die einzelnen Widgets gefallen mir sehr gut. Wäre etwas das ich perfekt für meine Vis auf dem handy nutzen könnte.

Auf welcher Basis beruhen den die Widgets? Kann ich diese in der Vis App nutzen?

Ein Widget würde mir noch fehlen...eines für Media mit Volumen, Buttons für Power, Next, Previous, ... und natürlich die Info was gerade gespielt wird

[MartinK.]

@claus1993 Also die Widgets kannst Du auch in der ioBroker App auf deinem Smartphone nutzen. Von den Größe sind sie identisch mit den original Shelly Widgets aus der Shelly App, was die Nutzung in der ioBroker App auch so angenehm macht

Die Grundlage der "Shelly (Nachbau) Widgets" sind die diversen VIS-Widgets die man standardmäßig im ioBroker über die Adapterfunkton Installieren kann.