Hauptmenü

FTUI 2.5

Begonnen von setstate, 23 Januar 2017, 22:25:41

Vorheriges Thema - Nächstes Thema

markukug

#30
Zitat von: fhainz am 25 Januar 2017, 07:50:59
Oder einfach die datein aus dem backup zurückspielen?

Danke, das habe ich jetzt auch gemacht und alles sieht wieder aus wie früher. Trotzdem wäre es super, wenn man eine Testumgebung mit der neuen Version haben könnte, um das Layout zu testen und aufzusetzen.

Die neue Version scheint ja sehr durchdacht und nach der Umstellung auch einfacher zu administrieren.

eazy_isi

Scheint nichts mit meiner Änderung zu tun zu haben,
da deine Code geändert auf meine Devices bei mir problemlos läuft.
Allerdings verwende ich das Modul Abfall für die Abholtermine und so wie ich das sehe
befüllst du über die 99_MyUtils.pm einen Dummy oder ?
Evtl. liegt hier das Problem ?

Zitat von: gloob am 25 Januar 2017, 07:59:12
Was musstest du denn ändern, damit es wieder geht?


Ich habe meine so definiert:



<li data-row="1" data-col="1" data-sizex="4" data-sizey="2" class="semitransparent">
<div class="hbox items-space-around">
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="abfall_Restmuell" data-get='STATE' data-off-color="grey" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["gray","gray","gray"]' class="large"/>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="abfall_GelberSack" data-get='STATE' data-off-color="#E6E600" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-recycle warn","fa-recycle warn blink","fa-recycle warn"]' data-on-colors='["gold", "gold", "gold"]' class="large"/>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="abfall_Biomuell" data-get='STATE' data-off-color="#996633" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["green","green","green"]' class="large"/>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="abfall_Papier" data-get='STATE' data-off-color="#4747D1" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["blue","blue","blue"]' class="large"/>
<>
</li>



und bekomme keine Kreise mit den Resttagen.

moonsorrox

#32
ich muss jetzt hier mal fragen..!
1. wird es bei jedem Update diese Probleme geben, dass alles durcheinander gewürfelt wird..?
2. wo sehe ich welche Grundkonfiguration eigentlich gebraucht wird..? damit meine ich welche css Dateien (außer meiner eigenen) zwingend da sein müssen..?

Ich bekomme sonst gar nichts geregelt, da ich momentan nicht weiß wo ich anfangen soll, mein Layout wieder zu ordnen.
Da ich nun noch absolut am Anfang bin, werde ich jetzt aber mit der 2.5 arbeiten und komplett Neu anfangen, deshalb also die Frage 2.

Die index habe ich vorerst mal so genommen wie hier beschrieben... diese sieht nun so aus, da ist jetzt nichts falsch dran, oder..?
<!DOCTYPE html>
<html>
<head>
<title>FHEM-Tablet-UI</title>
<meta name="widget_base_width" content="82">
<meta name="widget_base_height" content="71">
<meta name="widget_margin" content="4">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<link rel="icon" href="favicon.ico" type="image/x-icon" />

    <!-- define your personal style here, it wont be overwritten  -->
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
    <script src="js/fhem-tablet-ui.js" defer></script>
</head>
<body>

<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="Tab_menu.html" class="halbTransparent"></li>

</ul>
</div>
</body>
</html>


Was ich noch feststellen muss das es mit der Größenanpassung der Seite nicht mehr hinhaut, diese ist etwas größer geworden und das kann ich leider auch nicht mehr mit den widget_base_xxx Angaben hin bekommen...

Deshalb also nun der komplette Neu Anfang... :-\
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

cotecmania

Hallo,

als negative Auswirkung finde ich, dass beim Laden der Seite zu Beginn ein weisser Hintergrund mit schwarzen Texten ziemlich lange dargestellt wird.
Erst spät erscheint die eigentliche Formatierung und Farbgebung.
Das war seither nicht so und finde ich sehr negativ, wenn Seiten länger brauchen zum Laden.

Gruss
FHEM auf RaspberryPI B (buster)
2xCUL868 für MAX/Slow_RF, HM-LAN, JeeLink
MAX!/HM-Thermostate, FS20/HM-Rolladenschalter, FS20-EM, LevelJet-Ölstandsmessung, PCA301, IT, KM271, IPCAM, FireTAB10 FTUI

klausw

Bei mir läuft FTUI auf einem Apache Server
Es werden 2 FHEM Instanzen bedient
Die Unterseiten der jeweiligen Instanz sind in separaten Unterverzeichnissen abgelegt.

wwwroot
|___ ftui
|___ pgm2
|___ tablet
| |___ css
| |___ fonts
| |___ js
| |___ lib
|___ index.php
|___ indexinstanz2.php
|___ sub1
| |___ sub1.html
| |___ sub2.php
|___ sub2
|___ sub1.php
|___ sub2.html


Ich muss im Header nach wie vor die Zeile
<script src="pgm2/jquery.min.js" defer></script>
Da diese Datei sonst nicht gefunden wird.
Wo müsste sie abgelegt sein, das es ohne funktioniert?
      

Dann habe ich noch eine Frage zum Slider.
Seit dem Update auf 2.5 hat sich an der Höhe was geändert. Die Section ist kleiner als der Slider (siehe Anhang)

Quelltext:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="content2">
<section>
<div class="large col-1-2 left-align">Bild</div>
<div data-type="switch" data-device="Bild" class="thin col-1-2 right-align"></div>
</section>
<section>
<div class="center">
<div class="large col-1-2 left-align">Regal</div>
<div data-type="slider" data-device='Regal' data-max="100" class="col-1-2 horizontal value" ></div>
</div>
</section>
<section>
<div class="large col-1-2 left-align">Regal</div>
<div data-type="slider" data-device='Regal' data-max="100" class="col-1-2 horizontal value" ></div>
</section>
<section>
<div class="large col-1-2 left-align">Sofaregal</div>
<div data-type="switch" data-device="Sofaregal" class="thin col-1-2 right-align"></div>
</section>
<section>
<div data-type="label" data-device="FBDECT_16" data-get="alias" class="large col-1-2 left-align">FBDECT_16</div>
<div data-type="switch" data-device="FBDECT_16" class="thin col-1-2 right-align"></div>
</section>
</div>
</body>
</html>

RasPi B v2 mit FHEM 18B20 über 1Wire, LED PWM Treiber über I2C, Luchtdruck-, Feuchtesensor und ein paar Schalter/LED\'s zum testen
Module: RPI_GPIO, RPII2C, I2C_EEPROM, I2C_MCP23008, I2C_MCP23017, I2C_MCP342x, I2C_PCA9532, I2C_PCF8574, I2C_SHT21, I2C_BME280

setstate

Bei Slider kann man jetzt mit data-margin die benutzte Höhe flexibel ändern.

rvideobaer

Hallo,

Es sind ja jetz einige Schriftgrössen geändert worden, wobei die sehr große n gleichzeitig auch als Thin formatiert werden. Könnte man nicht alle normal lassen, und thin als zusätzliches Attribut nehmen?

Gruß Rolf
Raspberry Pi 2, HM-Uart,1x HM-LC-Sw1PBU-FM, 1x HM-RC-2-PBU-FM,1x HM-LC-SW4-DR,1x HM-LC-Sw1-Pl-DN-R1,1x HM-TC-IT-WM-W-EU, 5x HM-CC-RT-DN und noch mehr

klausw

Zitat von: setstate am 25 Januar 2017, 12:51:04
Bei Slider kann man jetzt mit data-margin die benutzte Höhe flexibel ändern.

super, danke das klappt schonmal

Aber die Horizontale Ausrichtung ist immer noch nicht gegeben  :o

<section>
<div class="center">
<div class="large col-1-2 left-align">Regal</div>
<div data-type="slider" data-device='Regal' data-max="100" data-margin="20px" class="col-1-2 horizontal value" ></div>
</div>
</section>
<section>
<div class="large col-1-2 left-align">Regal</div>
<div data-type="slider" data-device='Regal' data-max="100" data-margin="20px" class="col-1-2 horizontal value" ></div>
</section>
RasPi B v2 mit FHEM 18B20 über 1Wire, LED PWM Treiber über I2C, Luchtdruck-, Feuchtesensor und ein paar Schalter/LED\'s zum testen
Module: RPI_GPIO, RPII2C, I2C_EEPROM, I2C_MCP23008, I2C_MCP23017, I2C_MCP342x, I2C_PCA9532, I2C_PCF8574, I2C_SHT21, I2C_BME280

cotecmania

Wie kann man die Zeilenabstaende in einem sheet>row>cell verkleinern ?
padding-bottom hat nicht funktioniert ...

<li data-row="2" data-col="7" data-sizex="1" data-sizey="1">
  <header>SONNE</header>
  <div class="sheet" style="padding-left:3px;padding-right:8px">
    <div class="row">
      <div class="cell left-align tiny" data-type="symbol" data-icon="oa-weather_sunrise" data-off-color="yellow"></div>
      <div class="cell right-align" data-type="label" data-device="D_Sonnenaufgang" data-get="STATE" ></div>
    </div>
    <div class="row">
      <div class="cell left-align tiny" data-type="symbol" data-icon="oa-weather_sunset" data-off-color="red"></div>
      <div class="cell right-align" data-type="label" data-device="D_Sonnenuntergang" data-get="STATE"></div>
    </div>
    <div class="row">
      <div class="cell left-align tiny" data-type="symbol" data-icon="oa-fts_shutter_30" data-off-color="white"></div>
      <div class="cell right-align" data-type="label" data-device="DI_Rolladen" data-get="timer_03_c02" data-part="2"></div>
    </div>
  </div>
</li>
FHEM auf RaspberryPI B (buster)
2xCUL868 für MAX/Slow_RF, HM-LAN, JeeLink
MAX!/HM-Thermostate, FS20/HM-Rolladenschalter, FS20-EM, LevelJet-Ölstandsmessung, PCA301, IT, KM271, IPCAM, FireTAB10 FTUI

moonsorrox

#39
ich habe mir irgendwie alles zerlegt, bei mir lädt er jetzt nichts mehr noch nicht mal mehr meine index.html.

Es gibt wohl einige Probleme, ich habe den FTUI Bereich mal komplett neu installiert somit ist in /tablet alles neu.
Nun habe ich meine Dateien wieder eingespielt, aber ich bekomme nicht mal die index.html geladen

Meine Seite kommt nur wenn ich die index.html auch mit angebe..!  :-\

Ich muss also zwingend es so eingeben sonst kommt nichts
http://10.0.0.50:8083/fhem/ftui/

Jetzt meine Fragen:

1. Wie muss die TABLETUI aussehen..?
das habe ich im DEF
ftui/ ./www/tablet/ Tablet-UI


Edit:// habe ich mittlerweile gefunden aus der index-example.html
2. Frage
Wie muss im <head></head> Bereich eine vernünftige index.html aussehen..?
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

grossmaggul

ZitatJedoch erscheinen bei mir images nicht mehr,
Ja, hier selbes Problem, Bilder die über einen lokalen Pfad geladen werden sollen, werden nicht angezeigt, Bilder die über eine URL geladen werden sind nicht betroffen.

FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

SamNitro

also meine lokalen Bilder werden angezeigt:

<div data-type="image"
           data-size="60px"
           data-url="./images/sleep.jpg"
           data-fhem-cmd='set sz_lampe on; set rollo_sz pct 25'
           onclick='ftui.toast("set sz_lampe on; set rollo_sz pct 25")'
           class="" >
</div>
(Intel-Nuc Proxmox) (Homematic) (EnOcean) (CUL868) (CUL433) (Zigbee2MQTT) (ESP8266) (Echo) (DUOFERN)

grossmaggul

Bei mir nicht, obwohl ich das genauso habe wie Du.
Wenn ich mir die Bild URL kopiere, sieht die so aus: http://xxx.xxx.xxx.xxx:8083/fhem/ftui/images/guest_wifi_config1.png?_=1485360984048
Wenn ich die mit einem Browser aufrufe, kommt ein "File not found", mache ich die "?_=1485360984048" weg, dann wird mir das Bild im Browser angezeigt, wer oder was hängt da die Zahl dran?
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

Ralf.E

Zitat von: reb am 24 Januar 2017, 23:50:22
Wie bereits oben erwähnt fehlt auch bei mir der Warn-Kringel...

Habe gerade etwas probiert und jetzt geht auch der Warn-Kringel wieder - vorher:
<li data-row="2" data-col="1" data-sizex="4" data-sizey="1">
    <header><div class="large orange">RESTM&Uuml;LL</div></header>
    <div class="sheet">
        <div class="row">
            <div class="col-1-4 bigger"
                data-type="symbol"
                data-device="sys_var_Muelltermine"
                data-get="daysRestAbfall"
                data-icons='["fs-dustbin warn fa-spin bold","fs-dustbin warn bold"]'
                data-on-colors='["darkgrey","darkgrey"]'
                data-get-on='["0","1"]'
                data-on-background-color="#505050"
                data-background-icon="">
            </div>
            <div class="col-3-4 bigger bold"
                data-type="label"
                data-device="sys_var_Muelltermine"
                data-get="hintRestAbfall"
                data-color="sys_var_Muelltermine:colorRestAbfall">
            </div>
        </div>
    </div>
</li>

und hinterher:
<li data-row="2" data-col="1" data-sizex="4" data-sizey="1">
    <header><div class="large orange">RESTM&Uuml;LL</div></header>
    <div class="sheet">
        <div class="row">
            <div class="col-1-4 bigger"
                data-type="symbol"
                data-device="sys_var_Muelltermine"
                data-get="daysRestAbfall"
                data-warn="daysRestAbfall"
                data-icons='["fs-dustbin warn fa-spin bold","fs-dustbin warn bold"]'
                data-on-colors='["darkgrey","darkgrey"]'
                data-get-on='["0","1"]'
                data-on-background-color="#505050"
                data-background-icon="">
            </div>
            <div class="col-3-4 bigger bold"
                data-type="label"
                data-device="sys_var_Muelltermine"
                data-get="hintRestAbfall"
                data-color="sys_var_Muelltermine:colorRestAbfall">
            </div>
        </div>
    </div>
</li>


Bei mir hat es gereicht zusätzlich das Attribute data-warn="daysRestAbfall" einzufügen. Wurde vorher ggf. automatisch data-get verwendet, wenn data-warn nicht definiert war?

Gruß Ralf
Rpi4> FHEM, TabletUI, Z-Wave, EnOcean, Hue, HmIP via Debmatic

Ralf.E

Zitat von: reb am 25 Januar 2017, 18:44:21
Bei mir hat es gereicht zusätzlich das Attribute data-warn="daysRestAbfall" einzufügen. Wurde vorher ggf. automatisch data-get verwendet, wenn data-warn nicht definiert war?

Etwas zu schnell geschossen: mit data-warn="daysRestAbfall" ist der Warn-Kringel immer da. 'warn' hat weiter keine Funktion...

Ralf
Rpi4> FHEM, TabletUI, Z-Wave, EnOcean, Hue, HmIP via Debmatic