New FHEM Tablet UI

[roman1528]

Hallo, ich habe dieses Bild in diesem Beitrag gesehen.
Gibt es eine Anleitung, wo ich das Hintergrundbild ändern kann, oder kann mir jemand sagen in Welcher Datei? CSS oder der Index?
Und wie man die Transparenz einstellen kann?
Finde Das echt toll!
Viele Grüße!

http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ#Wie_kann_ich_ein_eigenes_Hintergrundbild_einbinden.2C_anstatt_des_einfachen_schwarz.3F

[boke]

Haha, super, das ging schnell!
Hab echt gesucht, aber das habe ich nicht gefunden.
Vielen Dank!

[roman1528]

Haha, super, das ging schnell!
Hab echt gesucht, aber das habe ich nicht gefunden.
Vielen Dank!

Ist gaaaanz neu

Ich habe da auch nochmal 'ne Frage @setstate

Das Homewidget wird ja über Canvas eingebunden... Viel von gehört aber nicht den blassesten Schimmer davon 

Kann ich das vergrößern? Richte meine FTUI für 1280x800 ein und selbstredend soll getouched werden. dafür finde ich es allerdings ein bisschen klein und passt nur unschön in mein Grid.

[setstate]

Homestatus kennt data-height und data-width.

Default ist 210, wenn man class="small" setzt, wird die Größe 160

[roman1528]

Homestatus kennt data-height und data-width.

Default ist 210, wenn man class="small" setzt, wird die Größe 160

Jawoll... jetzt ist das schick. Besten Dank!

[boke]

Ok, das mit dem Bild hat super geklappt, wie bekome ich die Widgets transparent?

[l3skon3]

Ok, das mit dem Bild hat super geklappt, wie bekome ich die Widgets transparent?

hallo,

sry hab heute erst jetzt Zeit gefunden für das Forum & FHEM

Code Auswählen Erweitern

.halbTransparent {
        /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) !important;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.5) !important;
}

.transparent {
        /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) !important;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0) !important;
}

den code hab ich in der *.css

Und mir der class="halbTransparent" füge ich die Widgets dann ein.

z.B. so:

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu.html" class="halbTransparent"></li>

gruß

Daniel

[roman1528]

Ok, das mit dem Bild hat super geklappt, wie bekome ich die Widgets transparent?

Bei mir sieht das dann sogar so aus:

Code Auswählen Erweitern

.halbTransparent {
        /* Fallback for web browsers that doesn't support RGBa */
    /*background: rgb(0, 0, 0) !important;*/
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.7) !important;
}

.headerTransparent {
        /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) !important;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.3) !important;
}

.dialogTransparent {
        /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) !important;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.9) !important;
}

.dialogheaderTransparent {
        /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) !important;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.7) !important;
}

[boke]

Danke für die Antwort, aber ich bekomme nur einen schwarzen Hintergrund. Das Bild wird angezeigt aber nicht hinter dem Widget. muss ich den ganzen Kasten hinter den Widgets entfernen?

[boke]

Misst, war an der falschen Stelle, jetzt geht alles!
Vielen Dank!
Ist der Hammer!

[PatrickR]

Mahlzeit!

Ich mache das ja wirklich ungern, aber ich muss mein Problem mit den doppelten thermostat-Widgets noch einmal ansprechen:
http://forum.fhem.de/index.php/topic,34233.msg356569.html#msg356569

Danke!

Patrick

[l3skon3]

Mahlzeit!

Erst einmal vom Spätwechsler ein großes Lob: Sehr schönes UI. Bin aktuell bei der Migration eines Dashboards

Habe ein Thermostat wie folgt definiert:

Code Auswählen Erweitern


<li data-row="1" data-col="2" data-sizex="1" data-sizey="2">
<header>Klima</header>
<div data-type="thermostat" data-device="OG.AZ.Thermostat_Climate" class="cell" data-valve=""></div>
<div data-type="label" class="cell">Arbeitszimmer</div>
</li>


Das Ergebnis ist allerdings nicht ein Widget sondern zwei (siehe Anhang) und die Labels sind verschoben.

Danke vorab.

Patrick

hallo,

versuch mal

Code Auswählen Erweitern


<li data-row="1" data-col="2" data-sizex="1" data-sizey="2">
<header>Klima</header>
<div data-type="thermostat" data-device="OG.AZ.Thermostat_Clima" class="cell"></div>
<div data-type="label" class="cell">Arbeitszimmer</div>
</li>


[roman1528]

Mahlzeit!

Erst einmal vom Spätwechsler ein großes Lob: Sehr schönes UI. Bin aktuell bei der Migration eines Dashboards

Habe ein Thermostat wie folgt definiert:

Code Auswählen Erweitern


<li data-row="1" data-col="2" data-sizex="1" data-sizey="2">
<header>Klima</header>
<div data-type="thermostat" data-device="OG.AZ.Thermostat_Climate" class="cell" data-valve=""></div>
<div data-type="label" class="cell">Arbeitszimmer</div>
</li>


Das Ergebnis ist allerdings nicht ein Widget sondern zwei (siehe Anhang) und die Labels sind verschoben.

Danke vorab.

Patrick

Als erstes würde ich deine Devices in FHEM umbennen. Aus den Punkten . Unterstriche _ machen. Könnte ein RegEx Problem sein.

Dann schau dir das hier nochmal genau an: https://github.com/knowthelist/fhem-tablet-ui#thermostat-widgets

Füge vorallem data-get="desired-Temp" und data-set="desired-Temp" und auch data-temp="measuredTemperature" sowie data-min="5" und data-max="25" hinzu. (die Inhalte in den " " (Anführungszeichen) natürlich anpassen.

So wie du es jetzt hast weiß das Widget doch gar nicht was es "lesen" und was es "schreiben" soll. Selbst wenn es dafür Standardinhalte im Widget gibt, würde ich das immer mit angeben.

[PatrickR]

Hi!

Als erstes würde ich deine Devices in FHEM umbennen. Aus den Punkten . Unterstriche _ machen. Könnte ein RegEx Problem sein.

Würde er als eine RegEx interpretiert, würde er auf exakt ein Device (das gewünschte) matchen.

Füge vorallem data-get="desired-Temp" und data-set="desired-Temp" und auch data-temp="measuredTemperature" sowie data-min="5" und data-max="25" hinzu. (die Inhalte in den " " (Anführungszeichen) natürlich anpassen.

Erledigt. Leider reagiert das Widget wie erwartet und das Ergebnis mit expliziten Defaults ist identisch.

So wie du es jetzt hast weiß das Widget doch gar nicht was es "lesen" und was es "schreiben" soll. Selbst wenn es dafür Standardinhalte im Widget gibt, würde ich das immer mit angeben.

Eigentlich schon, genau dafür hat der Autor ja die Defaults eingebaut.

Patrick

[roman1528]

Würde er als eine RegEx interpretiert, würde er auf exakt ein Device (das gewünschte) matchen.

Stimmt... Jaaaa... RegEx ist nich so meins...

Erledigt. Leider reagiert das Widget wie erwartet und das Ergebnis mit expliziten Defaults ist identisch.

Hmpf... Schade

Eigentlich schon, genau dafür hat der Autor ja die Defaults eingebaut.

Für einige andere nur nicht zu gebrauchen wenn man wie ich MAX! hat 

Nach erneuter Betrachtung deines Screenshots.... Mach die <li> mal auf data-sizey="2"

Ich hatte auch so ein Problem ... allerdings mit MAX Thermostaten... leider kann ich mich nicht genau daran erinnern. Ich habe alles auf Push Widgets und extra TemperaturLabels umgestellt da mir die Touchbedienung des Thermostat bzw. Volume Widgets nicht so zusagt hat.