Hi,
ich hab mir jetzt auch mal überlegt von meinem FP auf die FTUI umzusteigen und habe mir dazu mal das Wiki und diverse Beiträge hier durchgelesen, allerdings hab ich trotzdem mal noch so einige Probleme.
Kann ich die FTUI Seite auch einer anderen FHEMWEB Instanz zuordnen, als wie 8083, z.b. 8086?
- Im Anhang ein Screen meines aktuellen Status der Hauptseite des FTUI wo ich die noch folgenden Probleme mit habe
- Der Homebutton links oben soll immer auf jeder Seite sein, um immer zurück auf die index.html springen zu können, allerdings hätte ich da gerne einen "schönen" Button, liefert das FTUI so einen mit? Und wenn ja wo find ich den bzw. wie binde ich denn ein?
<!-- ============ Home-Button ============= -->
<!-- ====================================== -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-template="index.html"></li>[/li]
- Die Menü Liste ist "OK", allerdings bin ich noch nicht so Glücklich mit der Optik, wenn einer einen Verbesserungsvorschlag hat, wäre ich offen dafür :-)
- Unter "Gruppe" hätte ich gerne die Devices nebeneinander stehen, wie bekomme ich das hin?
<header>Gruppen</header>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Heizung.html" data-icon="fa-calendar" class="cell small"></div>
<div data-type="label" class="cell darker">Heizung</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Steckdosen.html" data-icon="fa-bolt" class="cell small"></div>
<div data-type="label" class="cell darker">Steckdosen</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Reciever.html" data-icon="fa-lock" class="cell small"></div>
<div data-type="label" class="cell darker">Reciever</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Server.html" data-icon="fa-server" class="cell small"></div>
<div data-type="label" class="cell darker">System</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Fenster.html" data-icon="fa-calendar" class="cell small"></div>
<div data-type="label" class="cell darker">Fenster</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Alarm.html" data-icon="fa-bolt" class="cell small"></div>
<div data-type="label" class="cell darker">Alarm</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Telefon.html" data-icon="fa-lock" class="cell small"></div>
<div data-type="label" class="cell darker">Telefon</div>
[/li]
- Unter "Wetter würde ich eigentlich gerne einfach meinen FHEM Yahoo Wetter weblink einbinden, aber das klappt irgendwie nicht so wie ich es versucht habe
<!-- ========= Wetter ========== -->
<!-- ====================================== -->
<li data-row="1" data-col="7" data-sizex="5" data-sizey="1">
<header>Wetter</header></li>
<div data-type="link" data-device="{WeatherAsHtmlH("YahooWetter",7)}"></div>
Das Device in Fhem sieht so aus
Internals:
DEF htmlCode {WeatherAsHtmlH("YahooWetter",7)}
LINK {WeatherAsHtmlH("YahooWetter",7)}
NAME weblink_YahooWetter
NR 132
STATE initialized
TYPE weblink
WLTYPE htmlCode
Attributes:
fp_Home 174,177,0,
room Wettervorhersage Danke
Die FTUI ist nicht an die Ports gebunden, sie ist auf jeder Seite aufrufbar, man muss nur im Browser den entsprechenden Port aufrufen.
Das Button Problem kann man mit Buttons von Google lösen.
https://design.google.com/icons/ (https://design.google.com/icons/)
Dazu muss in der INDEX.HTML, im Head folgendes eingefügt werden.
<link rel="stylesheet" href="lib/material-icons.min.css" />
danach kann mit
data-icon="mi-NAME"
ein Icon dem entsprechenden Device zugeteilt werden.
Alternativ gibt es noch
http://fontawesome.io/icons/ (http://fontawesome.io/icons/)
Für die Icons muss nur im jeweiligen Device
data-icon="fa-NAME"
eingefügt werden.
Um den Homebutton auf jeder Seite zu haben, muss er einfach nur auf jeder Seite eingefügt werden, die Position ist dabei auf jeder Seite frei wählbar.
Hi und Danke für die Hilfe, irgendwas hab ich aber noch falsch gemacht, hab deinen link so eingebaut:
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/material-icons.min.css" />
Und das icon aus dem Anhang so eingebuden
<!-- ============ Home-Button ============= -->
<!-- ====================================== -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-icon="mi-ic_home_white_24dp_2x.png" data-template="homebutton.html"></li> und die .png nach /fhem/www/tablet kopiert, bzw. auch mal noch testhalber nach /fhem/www/tablet/imagees
Aber das icon wird nicht angezeigt, hab es auch mit der SVH Version versucht.
Also irgendwas mache ich da noch falsch.
Hab auch leider noch ein Problem, die links die ich in der linken Menüleiste für die einzelnen Räume definiert habe, lassen sich nicht anklicken. Die definition sieht so aus in der index.html:
<!-- ========= Räume =========== -->
<!-- ====================================== -->
<li data-row="2" data-col="1" data-sizex="1" data-sizey="4" data-template="menu_left_main.html"></li>
und in der menu_left_main.html
<header>Menü</header>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Wohnzimmer.html" data-icon="fa-fire" class="cell small"></div>
<div data-type="label" class="cell darker">Wohnzimmer</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Küche.html" data-icon="fa-group" class="cell small"></div>
<div data-type="label" class="cell darker">Küche</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Flur_Erdgeschoss.html" data-icon="fa-child" class="cell small"></div>
<div data-type="label" class="cell darker">Flur_Erdgeschoss</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Gäste_WC.html" data-icon="fa-info" class="cell small"></div>
<div data-type="label" class="cell darker">Gäste_WC</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Außen.html" data-icon="fa-group" class="cell small"></div>
<div data-type="label" class="cell darker">Außen</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Kellerflur.html" data-icon="fa-group" class="cell small"></div>
<div data-type="label" class="cell darker">Kellerflur</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Kellerbar.html" data-icon="fa-group" class="cell small"></div>
<div data-type="label" class="cell darker">Kellerbar</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Büro.html" data-icon="fa-group" class="cell small"></div>
<div data-type="label" class="cell darker">Büro</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Flur_Obergeschoss.html" data-icon="fa-group" class="cell small"></div>
<div data-type="label" class="cell darker">Flur Obergeschoss</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Schlafzimmer.html" data-icon="fa-group" class="cell small"></div>
<div data-type="label" class="cell darker">Schlafzimmer</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Kinderzimmer_Mila.html" data-icon="fa-group" class="cell small"></div>
<div data-type="label" class="cell darker">Kinderzimmer_Mila</div>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-color="#aa6900" data-url="Kinderzimmer_Laya.html" data-icon="fa-group" class="cell small"></div>
<div data-type="label" class="cell darker">Kinderzimmer_Laya</div>
Auch da hab ich wohl noch einen Fehler drin.
Danke
Das Icon für den Button ist falsch eingepflegt.
Man brauch die nicht auf den eigenen Server kopieren, dafür ist der Link im Kopf da.
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-icon="mi-home" data-template="homebutton.html"></li>
So sollte es klappen.
Deine Links werden nicht funktionieren, weil Du den Device als Button gesetzt hast, das Device muss aber Pagetab heißen.
Eine Beispielzeile:
<div data-type="pagetab" data-url="index.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
So sollte beides dann klappen.
Zu dem Wetter Problem. Du kannst das Yahoo Wetter mit Hilfe des Weather Widget einbinden, muss dann nur nach belieben konfiguriert werden.
Hi,
hab es jetzt so geändert:
<!-- ============ Home-Button ============= -->
<!-- ====================================== -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-icon="mi-home" data-template="homebutton.html"></li
Aber da wird mir dann trotzdem kein icon angezeigt.
Nachdem ich dann die links noch geändert habe, in
<header>Menü</header>
<div data-type="pagetab" data-url="Wohnzimmer.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Wohnzimmer</div>
<div data-type="pagetab" data-url="Küche.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Küche</div>
<div data-type="pagetab" data-url="Flur_Erdgeschoss.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Flur_Erdgeschoss</div>
<div data-type="pagetab" data-url="Gäste_WC.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Gäste_WC</div>
<div data-type="pagetab" data-url="Außen.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Außen</div>
<div data-type="pagetab" data-url="Kellerflur.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Kellerflur</div>
<div data-type="pagetab" data-url="Kellerbar.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Kellerbar</div>
<div data-type="pagetab" data-url="Büro.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Büro</div>
<div data-type="pagetab" data-url="Flur_Obergeschoss.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Flur Obergeschoss</div>
<div data-type="pagetab" data-url="Schlafzimmer.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Schlafzimmer</div>
<div data-type="pagetab" data-url="Kinderzimmer_Mila.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Kinderzimmer_Mila</div>
<div data-type="pagetab" data-url="Kinderzimmer_Laya.html" data-on-background-color="#eeeeee" data-off-background-color="#aaaaaa" data-icon="fa-home" ></div>
<div data-type="label" class="cell darker">Kinderzimmer_Laya</div>
wird immer wenn ich die index.html aufrufe, direkt auf die Wohnzimmer.html weitergeleitet, ohne das ich was mache.
Also irgendwas mache ich immer noch falsch.
Das mit dem Wetter Widget hatte ich auch schon gesehen, kann man so machen, ich hatte eigentlich aber gedacht ich könnte einfach das weblink welches ich schon in Fhem habe einbinden