UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?

[mrFenyx]

Weiß jemand was man tun muss so dass die Material Icons korrekt in der ioBroker Android App angezeigt werden? Ist das eigentlich möglich? Jetzt wird nur das "Text" angezeigt also werden die Font Dateien nicht gefunden.

UPDATE: man muss einfach nur die komplette Adresse für den Font URL angeben, dann alles in der App reload / resync und es geht!

[Uhula]

@GiuseppeS Früher, im HTML-Mittelalter, gab es kaum elegante Methoden um sich browserseitig durch die DOM Elemente zu bewegen. Eine Bibliothek, jquery, bot hier viel bessere Möglichkeiten. Mittlerweile könnte man auf jquery verzichten, aber ioBroker nutzt es noch (wie >80% der WebSites). Info/API/Dok: jquery

[GiuseppeS]

@Uhula
Hey Klasse, danke für den Hinweis und den Link. So kann ich mich dran versuchen ein paar eigene Ideen umzusetzen
Wo ist eigentlich dein "Buy me a beer" - Link?

[der-eine]

Guten Morgen,

bin gerade dabei mir eine View für Pings zu erstellen. Wie könnte man das am schönsten im Material Design lösen?
Habe mir mal die Tabellen angeschaut und die Bindings zu den Datenpunkten eingefügt. Somit müsste man nur
im Ping Adapter das Gerät ändern und es wird automatisch in die VIS übernommen.
Hab mich ein wenig mit Colspan gespielt und versucht die Überschriften der Spalten mittig über die Einträge zu bekommen
aber leider nicht so hin bekommen wie ich das gerne hätte. Des weiteren wäre es noch interessant, den Status entweder mit
einem Kreis in rot oder grün anzuzeigen oder zumindest true und false jeweils die Farbe ändern. Hat da jemand nen Tipp wie
ich das bewerkstelligen könnte? Das wär top!
Oder hat jemand eine bessere Idee?

[Uhula]

@der-eine Mmmh, damit ist deine Tabelle recht statisch. Ich würde einen anderen Weg wählen (der aber Javascript Kenntnisse voraussetzt): Serverseitig ein Script schreiben, welches via on-Event die "ping.0.*" Änderungen überwacht und dann aus allen "ping.0.*" eine HTML-Tabelle / List erzeugt und diese in einen State unter "0_userdata.0" speichert. Diesen state kannst du dann einfach im vis über ein basic-string (unescaped) Widget anzeigen; incl. eingefärbter Symbole.
Ich bin gerade dabei solche Mini-Scripte für mich zu schreiben, z.B. um das ioBroker-Log im MDCSS anzeigen zu können (ich mag die List-Darstellung, setze aber beides um, List und Table). Ping kommt auch noch dran. Ich werde die Scripte dann hier im Forum incl. Beispiel-MDCSS-View teilen.

Beispiel, ioBroker Log in MD CSS - als List

Beispiel, ioBroker Log in MD CSS - als Table

[jpgorganizer]

@mrFenyx said in [Projekt] Material Design CSS v2:

@jpgorganizer Die idee mit "max_length" sollte schon passen. Was du dann tun musst ist im "CSS Font & Text" Bereich das "text-align" zu "right" setzen. Wichtig ist dass du für dieses Element nicht "mdui-center(-v/-h)" benutzt denn dieses überschreibt das normale text-align. Kann sein dass auch andere mdui- Klassen das tun, weiß ich nicht. Hoffe es passt so.

danke, das erklärt, warum ich es nicht hinbekommen habe. Die CSS mdui-navitem überschreibt mein eingebenes alignment. Ich bin nur nicht imstande das zu ändern.

Grüße
jpgorganize

[der-eine]

@Uhula diese Beispiele sehen sehr gut aus!
Leider kenne ich mich mit JS garnicht aus. Das wäre super wenn Du
Deine Skripte hier teilen würdest!!
Gibts es schon fertige Skripte von Dir hier irgendwo im Forum?

Danke für Deine Arbeit.

[Xsev]

@Uhula Vielleicht kannst du mir da helfen? Gibt es vielleicht die Möglichkeit, eine Klasse (bsp. mdui-color-glow) einem Status zuzuordnen bei einfachen Bulb on/off Widgets? Damit sich die Farbe dem aktuellen Schaltzustand anpasst. Wie in deienm Beispiel mit der Werteliste für Stati.

Aktuell nutze ich 2 Widgets übereinander über sichtbarkeit geschalten, das ist aber bei vielen Buttons relativ unpraktisch und mir kommt es auch so vor als zieht es mir ziemlich die Performance runter, da ich quasi alles doppelt habe.

[Pittini]

@Xsev sagte in [Projekt] Material Design CSS v2:

Gibt es vielleicht die Möglichkeit, eine Klasse (bsp. mdui-color-glow) einem Status zuzuordnen bei einfachen Bulb on/off Widgets?

Ja, das geht. Setzt mal bei Generell/CSS Klasse sowas rein:

{val:javascript.0.FensterUeberwachung.AlleFensterZu;val=="true"? "mdui-green-glow":  "mdui-red-glow"}  

Da mußt Du aber noch den DP anpassen, also das javascript.0.FensterUeberwachung.AlleFensterZu abändern zu dem was auch in Object ID steht. Hübsch ist das allerdings nicht mit dem Bulb Widget (habs grad mal getestet damit ich Dir keinen Quatsch ezähl). Ich nehm dafür meist das Basic Bool Widget, da biste flexibler weil man da auch noch innerhalb des img Tags mit den mdui... Klassen arbeiten kann.

[Xsev]

@Pittini Danke das versuche ich später gleich mal, wenn ich wieder daheim bin. Ja ich nutz auch meist das Basic Bool Widget, hab ich verwechselt.
Wäre genial wenn ich das alles in einem Widget unterbringen würde.

[Pittini]

@Xsev sagte in [Projekt] Material Design CSS v2:

Wäre genial wenn ich das alles in einem Widget unterbringen würde.

Dasgeht definitiv, hab ich zig mal hier verwendet. Wo man auch noch rumspielen kann, ist bei Signalbilder, da haste 3 vollkommen verschiedene Möglichkeiten zusätzlich, die sich auch mit mdui... Klassen versehen lassen.

[Xsev]

@Pittini Perfekt! Das funzt genau so wie ich es mir erhofft habe!!!! Danke nochmal!!! Das macht es deutlich überschaubarer.

Jetzt muss ich aber nochmal wegen dem bool widget fragen.

@Pittini sagte in [Projekt] Material Design CSS v2:

Ich nehm dafür meist das Basic Bool Widget, da biste flexibler weil man da auch noch innerhalb des img Tags mit den mdui... Klassen arbeiten kann.

Meinst du damit, das man damit dem Bild innerhalb des Widgets nochmal einen anderen css Effekt zuordnen kann? Also das Widget leuchtet je nach Stati rot/grün aber das Logo kann z.b. Blau flashen?
Hättest du da mal einen Beispiel Code für mich wie das ganze im HTML Tag dann aussehen müsste?

[Pittini]

@Xsev sagte in [Projekt] Material Design CSS v2:

Meinst du damit, das man damit dem Bild innerhalb des Widgets nochmal einen anderen css Effekt zuordnen kann? Also das Widget leuchtet je nach Stati rot/grün aber das Logo kann z.b. Blau flashen?

Ja, man kann kombinieren. Aber nicht jede Kombi macht Sinn, bzw. funktioniert. Einfach probieren, geht ja nix kaputt.

Hättest du da mal einen Beispiel Code für mich wie das ganze im HTML Tag dann aussehen müsste?

<img class="mdui-red-blink" height=32px src='/icons-mfd-svg/scene_making_love_clean.svg'>

[Xsev]

@Pittini Super danke!

Lol, ich glaube wir haben das selbe Schlafzimmer Symbol fehlt nur noch die Wägezelle im Bett für den Datenpunkt.

[bilberry]

Hallo zusmmen,

ich möchte mich gleich nochmal in die Frage von @Xsev einklinken. Mitte Febraur hatte ich einen ähnlichen Fall hier auch schon mal geschildert. @Glasfaser hat mir damals den Tipp gegeben, den dir @Pittini nun auch geschrieben hat.
Ich war recht glücklich darüber. Hab das aber inzwischen wieder zurückgenommen, denn: unter Windows mit Maus-Bedienung hat das wunderbar funktioniert. Aber unter Android wurde der Taster und damit der Status vom Schaltobjekt nach dem Antippen nach ca. 1s wieder zurückgesetzt. Ich war am Verzweifen, da plötzlich meine Lampen nach den Einschalten gleich wieder aus gingen oder nach dem Ausschalten sofort wieder ein. Je nach ursprünglichen Status.
Ich hatte das Phänomen nicht sofort mit der geänderte Formatierung in Verbindung gebracht, da es am PC ja funktionierte. Bis ich herausgefunden habe, dass man auf dem Touch-display (zumindet unter Android) jetzt länger auf die Taster drücken muss, um den Status daueraft umzuschalten.
Wenn man das oben beschriebene "bedingte Binding mit Formel" rausnimmt, war dieses Phänomen verschwunden. Die Lampen schalten dann auch wieder nach kurzem Antippen.

Hat jemand eine Erklärung dafür. Finde es schade diese Art der Formatierung nicht auf allen Geräten wie vorgestellt nutzen zu können.

[Dominik F.]

@Xsev

Du kannst auch 2 Widgets übereinander legen und das über die Sichtbarkeit regeln. Du machst das eine Widget nur sichbar wenn der Status True ist und das andere wenn der Status false ist und stellst die Widgets entsprechend ein mit glühen oder ohne etc.

[Glasfaser]

@bilberry

Gib mir mal dein Widget zum Testen, ich habe viellleicht da was , muss es aber anhand deines Probieren ob es geht !

[bilberry]

@Glasfaser: freut mich, dass Du Dich dem Thema noch mal annimmst.

mein Button - formatiert für Status "Aus"

Spoiler

[{"tpl":"tplValueBoolCtrl","data":{"oid":"javascript.0.Lichtszenen.AmbiLichtWohnz","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html_false":"<i class="material-icons">power_settings_new</i>","html_true":"<i class="material-icons">power_settings_new</i>","class":"mdui-button-outlined mdui-grey"},"style":{"left":"91px","top":"169px","width":"64px","height":"64px","cursor":"pointer"},"widgetSet":"basic"}]

mein Button - formatiert für Status "Ein"

Spoiler

[{"tpl":"tplValueBoolCtrl","data":{"oid":"javascript.0.Lichtszenen.AmbiLichtWohnz","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html_false":"<i class="material-icons">power_settings_new</i>","html_true":"<i class="material-icons">power_settings_new</i>","class":"mdui-button-outlined mdui-lime mdui-green-glow"},"style":{"left":"169px","top":"169px","width":"64px","height":"64px","cursor":"pointer"},"widgetSet":"basic"}]

[Glasfaser]

@bilberry

Setze bitte es in Code im Spoiler , Das Widget enthält so Fehler!

[bilberry]

@Glasfaser

ach so, dass kann man verschachteln - wieder was gelernt

AUS

Spoiler

[{"tpl":"tplValueBoolCtrl","data":{"oid":"javascript.0.Lichtszenen.AmbiLichtWohnz","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html_false":"<i class=\"material-icons\">power_settings_new</i>","html_true":"<i class=\"material-icons\">power_settings_new</i>","class":"mdui-button-outlined mdui-grey"},"style":{"left":"104px","top":"234px","width":"64px","height":"64px","cursor":"pointer"},"widgetSet":"basic"}]

EIN

Spoiler

[{"tpl":"tplValueBoolCtrl","data":{"oid":"javascript.0.Lichtszenen.AmbiLichtWohnz","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html_false":"<i class=\"material-icons\">power_settings_new</i>","html_true":"<i class=\"material-icons\">power_settings_new</i>","class":"mdui-button-outlined mdui-lime mdui-green-glow"},"style":{"left":"182px","top":"234px","width":"64px","height":"64px","cursor":"pointer"},"widgetSet":"basic"}]