New FHEM Tablet UI

setstate · 09 Dezember 2015, 19:06:45

Zitat von: MichaelT am 09 Dezember 2015, 18:22:14
Hallo Mario,

anbei meine reduzierte index.html. Hiermit ist mein Problem auch auf dem Chrome (PC) sichtbar.
Habe ...user.css auskommentiert.

Gruß Michael

zwei kleine Änderungen sind nötig:
Zeile 74,75

<div data-type="popup" data-width="800px" data-height="250px" class="">
<div class="left left-space" data-type="symbol"

Das inline bewirkte, dass das popup mit dem Thermostat in eine Reihe sollte, der Platz aber nicht ausreichte und es damit zu einem Zeilenumbruch kommt, die Symbole also nach unten verschwinden.

setstate · 09 Dezember 2015, 19:08:42

Zitat von: netbus am 09 Dezember 2015, 18:55:44
Wie kann man das beheben?

Indem du es wieder ganz machst

Wenn ich etwas mehr Infos bekomme, könnte ich vllt. auch helfen

roman1528 · 09 Dezember 2015, 19:34:28

Zitat von: setstate am 09 Dezember 2015, 19:08:42
Indem du es wieder ganz machst

Wenn ich etwas mehr Infos bekomme, könnte ich vllt. auch helfen

habe das gleiche problem seit gestern. einige font-awesome icons werden einfach nicht mehr angezeigt. unteranderem fa-music und fa-amazon.

ganz toll wäre wenn du die icons der V 4.5 integrieren könntest

danke

grüße

EDIT:
setze mal gerade die webconsole drauf an xD

roman1528 · 09 Dezember 2015, 19:53:12

EDIT:
setze mal gerade die webconsole drauf an xD
[/quote]

konsole ist leer...

font-awesome.min.css und fontawesome-webfont.svg sehen so weit gut aus... also haben inhalt... getestet mit fa-amazon. (adblocker ist aus

)

weiter weiß ich jetzt aber nicht mehr

setstate · 09 Dezember 2015, 20:11:16

Zitat von: roman1528 am 09 Dezember 2015, 19:34:28
habe das gleiche problem seit gestern. einige font-awesome icons werden einfach nicht mehr angezeigt. unteranderem fa-music und fa-amazon.

ganz toll wäre wenn du die icons der V 4.5 integrieren könntest

danke

grüße

EDIT:
setze mal gerade die webconsole drauf an xD

ich vermute eher, dass Icon und Backround die gleiche Farbe haben und deshalb nicht sichtbar sind

netbus · 09 Dezember 2015, 20:22:15

Zitat von: setstate am 09 Dezember 2015, 19:08:42
Wenn ich etwas mehr Infos bekomme, könnte ich vllt. auch helfen

Welche Infos brauchst du?
index.html

Code Auswählen


<li data-row="2" data-col="1" data-sizex="1" data-sizey="4" data-template="menu_right_main.html"></li>

menu_right_main.html

Code Auswählen

<html>
<body>
    <header>MENU</header>
    <div class="cell">
        <div data-type="button" data-url="index.html" data-icon="fa-home" class="cell small"></div>
        <div data-type="label" class="cell darker">Home</div>
        <div data-type="button" data-url="kalender.html" data-icon="fa-calendar" class="cell small"></div>
        <div data-type="label" class="cell darker">Kalender</div>
        <div data-type="button" data-url="wetter.html" data-icon="fa-sun-o" class="cell small"></div>
        <div data-type="label" class="cell darker">Wetter</div>
        <div style="font-size:30px"  data-type="clock" data-format="H:i" class="cell small"></div>
        <div style="font-size:30px"  data-type="label" data-device="Aussentemp" 
        data-part="2" data-limits='[-73,10,23]' data-colors='["#6699FF","#AA6900","#FF0000"]' data-unit="%B0C%0A" class="cell small"></div>
    </div>
</body>
</html>

setstate · 09 Dezember 2015, 20:25:39

Hier ein neues DEMO, wie man mit Link-Widget und Swiper-Widget eine Alternative zum Pagetab bauen kann.

setstate · 09 Dezember 2015, 20:30:41

@netbus: bekanntes Thema.

statt button -> pagebutton benutzen.

netbus · 09 Dezember 2015, 20:52:58

Zitat von: setstate am 09 Dezember 2015, 20:30:41
@netbus: bekanntes Thema.

statt button -> pagebutton benutzen.

Mit pagebutton ist jetzt mein ganzes Design zerschossen.
Auf was muss man jetzt wieder aufpassen?

CaptainHook · 09 Dezember 2015, 21:10:53

Hi,

HAMMER geniale UI!!!!!

Ich bin gerade dabei mir meine Tablet UI zu bauen und "spiele" mit dem swipe
Ich habe meine einzelnen Element in separate *.html Dateien verpackt ... Ist es Möglich in Swipe auch eine Datei ähnlich wie bei data-template zu referenzieren?

So oder so ähnlich:

Code Auswählen


<html>
  <body>
    <div data-type="swiper" 
         data-states='["Wert1","Wert2","Wert3","Wert4"]'
         class="navbuttons nopagination">
    <ul>
        <li data-sizex="4" data-sizey="4" data-template="./bricks/FC_Wetter_0_34.html"></li>
        <li data-sizex="4" data-sizey="4" data-template="./bricks/FC_Wetter_1_34.html"></li>
        <li data-sizex="4" data-sizey="4" data-template="./bricks/FC_Wetter_2_34.html"></li>
        <li data-sizex="4" data-sizey="4" data-template="./bricks/FC_Wetter_3_34.html"></li>
     </ul>
     </div>
  </body>
</html>

Das mach den Code bei längeren Elemente die gewechselt werden sollen übersichtlicher

Grüße,

Stephan

setstate · 09 Dezember 2015, 21:36:51

Zitat von: netbus am 09 Dezember 2015, 20:52:58
Mit pagebutton ist jetzt mein ganzes Design zerschossen.
Auf was muss man jetzt wieder aufpassen?

Am Layout sollte sich dabei nicht ändern.
Nur aus data-type="button" data-type="pagebutton" machen und dabei aufpassen, dass die " immer schön vollständig sind und auch keine > oder < weggelöscht werden.

masterpete23 · 09 Dezember 2015, 22:01:25

sorry habe da nochmal ne verständnis-anfängerfrage.

Ich habe nun folgendes aber der Schalter bringt das Licht nicht zum Schalten - was kann ich tun? ist es korrekt?

Code Auswählen

<li data-row="1" data-col="8" data-sizex="1" data-sizey="1">
        <header>GALERIE</header>
        <div data-type="switch" data-device="Licht_wzg" class="cell"></div>
        <div data-type="label" class="cell">Licht</div>
         <div data-get-on="on" data-get-off="off"></div>
</li>

und

Code Auswählen

Internals: 
   00         00 
   DEF        0FFFFF0FFF FF 00 
   IODev      nanoCUL_433 
   NAME       Licht_wzg 
   NR         97 
   STATE      off 
   TYPE       IT 
   XMIT       0fffff0fff 
   XMITdimdown 00 
   XMITdimup  00 
   XMITon     ff 
   Code: 
     1          0fffff0fff 
   Readings: 
     2015-11-20 20:17:18   protocol        V1 
     2015-12-09 22:00:51   state           off 
Attributes: 
   IODev      nanoCUL_433 
   room       IT

setstate · 09 Dezember 2015, 22:07:06

Zitat von: CaptainHook am 09 Dezember 2015, 21:10:53
Hi,

HAMMER geniale UI!!!!!

Ich bin gerade dabei mir meine Tablet UI zu bauen und "spiele" mit dem swipe
Ich habe meine einzelnen Element in separate *.html Dateien verpackt ... Ist es Möglich in Swipe auch eine Datei ähnlich wie bei data-template zu referenzieren?

So oder so ähnlich:
Code Auswählen Erweitern
<html> <body> <div data-type="swiper" data-states='["Wert1","Wert2","Wert3","Wert4"]' class="navbuttons nopagination"> <ul> <li data-sizex="4" data-sizey="4" data-template="./bricks/FC_Wetter_0_34.html"></li> <li data-sizex="4" data-sizey="4" data-template="./bricks/FC_Wetter_1_34.html"></li> <li data-sizex="4" data-sizey="4" data-template="./bricks/FC_Wetter_2_34.html"></li> <li data-sizex="4" data-sizey="4" data-template="./bricks/FC_Wetter_3_34.html"></li> </ul> </div> </body> </html>

Das mach den Code bei längeren Elemente die gewechselt werden sollen übersichtlicher

Grüße,

Stephan

ja, genau so geht das. Nur die data-sizex="4" data-sizey="4" braucht es nicht. Das ist nur für die <li> der Gridster Auflistung nötig.

setstate · 09 Dezember 2015, 22:18:50

Zitat von: masterpete23 am 09 Dezember 2015, 22:01:25
sorry habe da nochmal ne verständnis-anfängerfrage.

Ich habe nun folgendes aber der Schalter bringt das Licht nicht zum Schalten - was kann ich tun? ist es korrekt?

Fast ...

Code Auswählen


<li data-row="1" data-col="8" data-sizex="1" data-sizey="1">
        <header>GALERIE</header>
        <div data-type="switch" data-device="Licht_wzg" class="cell"></div>
        <div>Licht</div>
</li>

reicht.

data-get-on="on" data-get-off="off" müsste mit in das DIV des SWITCH

Code Auswählen

<div data-type="switch" data-device="Licht_wzg" data-get-on="on" data-get-off="off" class="cell"></div>

Aber schalten sollte es so oder so.

masterpete23 · 09 Dezember 2015, 22:30:22

Habe nochmal weiter oben gelesen und mein Prob gefunden

Code Auswählen

<meta name="fhemweb_url" content="http:///wdqwfegegwegewwegewfwwefwef.no-ip.info/fhem33">
das hat mir geholfen.
ich kann das jetzt entweder auf meine lokalen adresse oder die dyndns legen.
Es geht nicht beides oder?