New FHEM Tablet UI

[waschbaerbauch]

Erst einmal vielen Dank für das FTUI und die vielen Beispiele und Demos der Benutzer hier im Forum!
Ihr habt mich echt eine Menge Schlaf gekostet die letzten Wochen

Nachdem ich nun schon mindestens 3x alles verworfen habe und neu angefangen (dank der Inspirationen hier) möchte ich nun auch schon mal ein paar Bilder preisgeben vom ersten Wurf. Ob es so bleiben wird oder mir dann doch wieder was anderes in den Kopf kommen wird, das kann ich allerdings noch nicht genau sagen

[roman1528]

Erst einmal vielen Dank für das FTUI und die vielen Beispiele und Demos der Benutzer hier im Forum!
Ihr habt mich echt eine Menge Schlaf gekostet die letzten Wochen

Nachdem ich nun schon mindestens 3x alles verworfen habe und neu angefangen (dank der Inspirationen hier) möchte ich nun auch schon mal ein paar Bilder preisgeben vom ersten Wurf. Ob es so bleiben wird oder mir dann doch wieder was anderes in den Kopf kommen wird, das kann ich allerdings noch nicht genau sagen

Schicke MiLight/Hue Umsetzung 

[waschbaerbauch]

Ja das dachte ich mir auch, nachdem ich es vorher anders gelöst hatte
Da kam ein roman1528 daher und hat mein bisheriges Konstrukt wieder umgeworfen

Im Ernst: Deine Umsetzung hat mir so gut gefallen, das ich sie natürlich sofort ausgetauscht habe!

PS: Müll und DWD werde ich dir bestimmt auch noch abkupfern

[Roli1606]

@roman1528 Herzlichen dank jetzt sieht es richtig aus

Gruß Roland

[hermann1514]

hallo,

darf ich mal fragen wie Ihr bei milight den Farbbutton gelöst habt?
Ich versuche auch meine LED's über WEBUI farblich zu steuern. Hab aber noch keinen Plan wie....

Danke.
Gruß
Hermann

[waschbaerbauch]

@hermann1514

Das hat der roman so gelöst:

Code Auswählen Erweitern

<li class="halbTransparent" data-row="1" data-col="4" data-sizex="2" data-sizey="3">
<header>Arbeitsplatz</header>
        <div class="top-space centered">
<div class="inline">
<div class="inline top-space">
<div data-type="switch"
data-device="MB02.Z3"
data-get="state"
data-get-on="on.*"
data-get-off="off"
data-set=""
data-set-on="on"
data-set-off="off"
data-icon="oa-light_led_stripe_rgb"
class="bigger">
</div>
<div data-type="label"
class="cell narrow">An/Aus
</div>
</div>
<div class="inline top-space">
<div data-type="push"
data-device="MB02.Z3"
data-set="rgb"
data-set-on="FFFFFF"
data-icon="oa-light_led_stripe_rgb"
class="bigger">
</div>
<div data-type="label"
class="cell narrow">Weiß
</div>
</div>
<div class="top-space">
<div data-type="popup"
data-height="400px"
data-width="700px"
class="">
<div data-type="push"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="cell narrow">Farbe
</div>
<div class="dialog dialogTransparent">
<header class="dialogheaderTransparent">Arbeitsplatz - Farbe</header>
<div class="top-space">
<div class="inline">
<div data-type="push"
data-device="MB02.Z3"
data-set="rgb"
data-set-on="FF0000"
data-off-color="#FF0000"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="cell narrow">ROT</div>
</div>
<div class="inline">
<div data-type="push"
data-device="MB02.Z3"
data-set="rgb"
data-set-on="00FF00"
data-off-color="#00FF00"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="cell narrow">GRÜN
</div>
</div>
<div class="inline">
<div data-type="push"
data-device="MB02.Z3"
data-set="rgb"
data-set-on="4C00FF"
data-off-color="#0000FF"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="cell narrow">BLAU
</div>
</div>
<div class="inline">
<div data-type="push"
data-device="MB02.Z3"
data-set="rgb"
data-set-on="FFFF00"
data-off-color="#FFFF00"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="cell narrow">GELB
</div>
</div>
<div class="inline">
<div data-type="push"
data-device="MB02.Z3"
data-set="rgb"
data-set-on="00FFFF"
data-off-color="#00FFFF"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="cell narrow">TÜRKIS
</div>
</div>
<div class="inline">
<div data-type="push"
data-device="MB02.Z3"
data-set="rgb"
data-set-on="FF00FF"
data-off-color="#FF00FF"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="cell narrow">PINK
</div>
</div>
<div class="inline">
<div data-type="push"
data-device="MB02.Z3"
data-set="rgb"
data-set-on="FFFFFF"
data-off-color="#FFFFFF"
data-icon="fa-paint-brush"
class="bigger">
</div>
<div data-type="label"
class="cell narrow">WEIß
</div>
</div>
<div data-type="volume"
data-device="MB02.Z3"
data-get="hue"
data-set="hue"
data-min="0"
data-max="340"
class="cell hue-tick hue-front big top-space-2">
</div>
</div>
</div>
</div>
</div>
<div class="top-space-3">
<div data-type="volume"
data-device="MB02.Z3"
data-get="brightness"
data-set="brightness"
data-min="0"
data-max="100"
data-tickstep="6"
class="cell dim-tick dim-front">
</div>
</div>
</div>
</li>

[hermann1514]

Danke....

Werde es mal testen.

Gruß
Hermann

[roman1528]

Sehr sehr schön.

Tut euch keinen Zwang an... Dafür hab ich's online gestellt...

Der Link jetzt auch in meiner Signatur!!!

[Spartacus]

Hallo zusammen,
ich bin heute über die Tablet-UI gestolpert und finde die Möglichkeiten, die sich damit auftun großartig.
Ich habe keine Erfahrungen mit Tablets und Frontends, aber ich würde gerne erfahren, ob sich mit dieser Sache auch meine Vorstellungen umsetzen lassen.

Ich benötige eine Art stationäres "Terminal", welches mir im Schlafzimmer diverse Infos auf dem Screen darstellt und an dem ich Einstellungen (Wecker, Sleep-Timer, Radioprogramm) ändern kann. Ein Sonos System ist bereits in fhem integriert.

Im Nachtmodus soll der Großteil des Displays eine Uhr anzeigen. Zusätzlich möchte ich die aktuelle Weckzeit (Sonos), den laufenden Radiosender und die Restzeit des Sleep-Timers darstellen.

Meine Befürchtung ist aber, dass die Hintergrundbeleuchtung der Tablets zu hell ist und den Schlafraum zu stark ausleuchtet. Ich bin mir nicht sicher, ob man diesen Effekt durch ein hochwertiges OLED-Display ohne Hintergrundbeleuchtung und dunkelen Anzeigefarben (dunkelblau, dunkelrot) abstellen kann. Die Frage ist auch, ob der Browser der dann auf dem Tablet läuft immer im Vordergrund bleibt.

Ich weiß, das sind sehr allgemeine Fragen, aber ich hoffe, dass irgendjemand dieses Frontend in ähnlicher Weise einsetzt und mir seine Erfahrungen diesbezüglich schildern kann.

Danke und Gruß,
Spartacus

[cotecmania]

Hallo,

wie kann ich einen Stream meiner Kamera im Tablet UI darstellen ?
Diese URL stellt meinen Stream dar : http://192.168.1.168/goform/stream?cmd=get&channel=0

Leider gehts mit einem iframe nicht.

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="6" data-sizey="6">
  <header>GARTENTOR</header>

  <div data-type="iframe" data-src="http://192.168.1.168/goform/stream?cmd=get&channel=0"></div>

</li>
Als Server dient der Grandstream GXV3504.
Jemand ne Idee ?

Danke
Joe

[waschbaerbauch]

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="6" data-sizey="6">
  <header>GARTENTOR</header>
<img src="http://192.168.1.168/goform/stream?cmd=get&channel=0" height="90%" wight="100%" border="0"></img src>
</li>

Probier es mal so..

[roman1528]

Hallo zusammen,

Moin

Im Nachtmodus soll der Großteil des Displays eine Uhr anzeigen. Zusätzlich möchte ich die aktuelle Weckzeit (Sonos), den laufenden Radiosender und die Restzeit des Sleep-Timers darstellen.

Jap geht. Irgendjemand hat sowas wie einen Screensaver für die Tablet-UI entwickelt.

Meine Befürchtung ist aber, dass die Hintergrundbeleuchtung der Tablets zu hell ist und den Schlafraum zu stark ausleuchtet. Ich bin mir nicht sicher, ob man diesen Effekt durch ein hochwertiges OLED-Display ohne Hintergrundbeleuchtung und dunkelen Anzeigefarben (dunkelblau, dunkelrot) abstellen kann. Die Frage ist auch, ob der Browser der dann auf dem Tablet läuft immer im Vordergrund bleibt.

Nich fürchten. Probieren... WebViewControl für Android (Eine Entwicklung für FHEM). Ein Fullscreenbrowser der es erlaubt Grundfunktionen wie z.B. die Helligkeit über FHEM zu steuern. + dunkle Farben. Alles schick.
Ein etwas qualitatives Tablet kann da natürlich auch weiterhelfen, da sich die Hintergrundbeleuchtung präziser einstellen lässt. Ansonsten Netzteil dran und in den Einstellungen die Entwicklungsoptionen aktivieren. Genau "Wach bleiben". Mein Tablet dimmt dann nach einer Zeit auf minimum und dimmt wieder hoch wenn ich es berühre.

Ich weiß, das sind sehr allgemeine Fragen, aber ich hoffe, dass irgendjemand dieses Frontend in ähnlicher Weise einsetzt und mir seine Erfahrungen diesbezüglich schildern kann.

Jap... und jap... habe viel Zeit und beantworte gern qualifizierte Fragen 

Danke und Gruß,
Spartacus

Bitte.

Grüße^^

[roman1528]

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="6" data-sizey="6">
  <header>GARTENTOR</header>
<img src="http://192.168.1.168/goform/stream?cmd=get&channel=0" height="90%" wight="100%" border="0"></img src>
</li>

Probier es mal so..

Cool... einen <img> Tag schließen... hab ich auch noch nicht gesehen. Ist das HTML5 standard geworden?

[waschbaerbauch]

Keine Ahnung - bin ich HTML Papst?

Wenn ich ein Glas Nutella öffne, dann mach ich es nach Gebrauch immer wieder zu

PS: Getrieben durch den Sarkasmus *g* hab ich noch google gefragt - muss man nicht und man kann es wohl eher so machen, also rein optional:

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="6" data-sizey="6">
  <header>GARTENTOR</header>
<img src="http://192.168.1.168/goform/stream?cmd=get&channel=0" height="90%" wight="100%" border="0" />
</li>

[roman1528]

Keine Ahnung - bin ich HTML Papst?

Wenn ich ein Glas Nutella öffne, dann mach ich es nach Gebrauch immer wieder zu

Gut... mach ich auch so... aber nicht bei <img> Tags... unnötig. Also nur:

Code Auswählen Erweitern

<img src="http://und.so.weiter.jpg.oder.was.auch.immer" alt="eine Kurze Beschreibung oder Schlüsselwort" title="Wer es mag">

ohne alt und title auch ok... weil man hier ja bilder oder ähnliches einfügt die definitiv da sind.

Grüße^^