FTUI Einstieg

[Tommy82]

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?
  

Code Auswählen Erweitern

<!-- ============ 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?

Code Auswählen Erweitern

        <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

Code Auswählen Erweitern

<!-- ========= 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

Code Auswählen Erweitern

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

[/li]

Danke

[ErzGabriel]

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/
Dazu muss in der INDEX.HTML, im Head folgendes eingefügt werden.

Code Auswählen Erweitern

<link rel="stylesheet" href="lib/material-icons.min.css" />
danach kann mit

Code Auswählen Erweitern

data-icon="mi-NAME"
ein Icon dem entsprechenden Device zugeteilt werden.

Alternativ gibt es noch
http://fontawesome.io/icons/
Für die Icons muss nur im jeweiligen Device

Code Auswählen Erweitern

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.

[Tommy82]

Hi und Danke für die Hilfe, irgendwas hab ich aber noch falsch gemacht, hab deinen link so eingebaut:

Code Auswählen Erweitern

<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

Code Auswählen Erweitern

<!-- ============ 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

Code Auswählen Erweitern

/fhem/www/tablet kopiert, bzw. auch mal noch testhalber nach

Code Auswählen Erweitern

/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:

Code Auswählen Erweitern

<!-- ========= 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

Code Auswählen Erweitern

        <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

[ErzGabriel]

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.

Code Auswählen Erweitern

<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:

Code Auswählen Erweitern

<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.

[Tommy82]

Hi,
hab es jetzt so geändert:

Code Auswählen Erweitern

<!-- ============ 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

Code Auswählen Erweitern

        <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