New FHEM Tablet UI

Begonnen von setstate, 22 Februar 2015, 23:37:24

Vorheriges Thema - Nächstes Thema

masterpete23

kurze OT Frage: Kann wer nen Tablet empfehlen was wirklich nur an die Wand soll hiermit und ggf Dauerversorgung per Stromkabel verkraftet?!

jojop2

Können die Parameter nur für die data-get Attribute benutzt werden, oder auch für das data-device?

tomster

#3212
Zitat von: Nobby1805 am 10 Dezember 2015, 12:40:07
Nö, ich habe immer noch den Unterschied zum existierenden und von mir verwendeten "nolabels" nicht verstanden ...

OK, dann haben wir jetzt zumindest beide Verständnisprobleme. Ich verstehe nämlich nicht, was Du mit "nolabels" meinst...

Zugegeben, wenn man "nolabels" schreibt und nicht "nolables", dann klärt sich das rasch auf. Danke!

Zudem kann man bei 2 nebeneinanderliegenden Range-Balken (mit "nolabels") auch ein 3. Widget mit data-width="0" zwischen diesen beiden ageben. Dann wäre die Skala in der Mitte, wenn auch layoutig noch nicht zentriert und mit z.B. 50- anstelle von -50-

mrbreil

Kann man mit dem Chart-Widget auch ein Monatsdiagramm darstellen?
Und wenn ja, kann mir bitte jemand einen Tip  geben, wo ich dazu etwas lesen kann.
Im Wiki steht dazu leider nix.

Gruß Christian

tomster

Nur weil ich grad ein bissl quick'n'dirty im Code rumgepfuscht habe:
In der widget_range.js habe ich an Stelle wie diesen

jQuery('<div/>', {
                class: 'labelLimitMax',
            }).appendTo(levelArea)
            .text(elem.data('limit-high')+'-');

zusätzlich noch '-'+ eingefügt.

jQuery('<div/>', {
                class: 'labelLimitMax',
            }).appendTo(levelArea)
            .text('-'+elem.data('limit-high')+'-');

Damit zeigen die Labels nun das Format als -50-

Wenn man nun 3 Range-Widgets nebeneinander packt und das mittlere eben 0 Pixel breit wählt, dann kommt das meiner Idee schon ziemlich nahe:

<li data-row="3" data-col="1" data-sizex="2" data-sizey="5">
        <div class="">
       <div class="col-1-4">
                <div class="large top-space">Tank1</div>
           <div data-type="range" data-device="Tank_1"
                data-low="" data-high="STATE" data-width="20" data-height="250"
                data-max="50" data-min="0"
                data-limit-low="5" data-limit-high="40"
                data-color-low="red" data-color="orange" data-color-high="green" class="top-space nolabels"></div>
       </div>
                <div class="col-1-4">
                <div class="large top-space">&nbsp;</div>
                <div data-type="range" data-device="Tank_1"
                data-low="" data-high="STATE" data-width="0" data-height="250"
                data-max="50" data-min="0"
                data-limit-low="5" data-limit-high="40"
                data-color-low="red" data-color="orange" data-color-high="green" class="top-space left-space-2x"></div>
       </div>
       <div class="col-1-4">
                <div class="large top-space">Tank2</div>
           <div data-type="range" data-device="Tank_2"
                data-low="" data-high="STATE" data-width="20" data-height="250"
                data-max="50" data-min="0"
                data-limit-low="5" data-limit-high="40"
                data-color-low="red" data-color="orange" data-color-high="green" class="top-space nolabels"></div>
       </div>
</div>
</li>

bert

#3215
Mein komplettes Layout ist nach dem Update verrutscht. Ich habe viele Stellen an denen ich mit class="col-1-2" und class="col-1-3" hantiere.
@setstate
kann es sein dass du in der fhem-tablet-ui.css  bei [class*='col-'] das "float: left;" vergessen hast, oder wird das nicht mehr gebraucht.

Gruß Bert

jehu

Zitat von: masterpete23 am 10 Dezember 2015, 12:46:06
kurze OT Frage: Kann wer nen Tablet empfehlen was wirklich nur an die Wand soll hiermit und ggf Dauerversorgung per Stromkabel verkraftet?!

kurze OT-Antwort: Ich nutze ein 10' ODYS Gate mit Tasker (schaltet Stromversorgung bei 15% an und bei 95% automatisch aus) und bin damit sehr zufrieden.
Vorallem durch FTUI ist das Tablet unsere wichtigste Steuerzentrale im Haus und wird gern von jedem in der Familie genutzt.

Deshalb besten Dank an setstate und von mir gabs auch einen Teil zum neuen Notebook  :)

Hoffe das sich noch viele andere daran beteiligen - deshalb zur Erinnerung  ;)
ZitatWeiterentwicklung beeinträchtigt! Laptop ist alt, immer ist was kaputt und Gehäuse löst sich auf:
https://github.com/knowthelist/fhem-tablet-ui/blob/master/README.md#donation

Grüße
jehu
FHEM on RPi 2,
HM-CFG-USB - HM-CC-RT-DN - HM-ES-PMSw1-Pl - HM-LC-Bl1PBU-FM - HM-LC-SW1-FM - HM-LC-Sw1PBU-FM - HM-SEC-SCo - MiLight - SONOS - Lacrosse Jeelink
FTUI auf ODYS GATE

robertPI

Hallo,

ich versuche einen multistatebutton durch einen switch zu ersetzen, da der multistatebutton ewig braucht, um sein icon zu wechseln, wenn er betätig wird. Nach dem readme dachte ich mit
<div data-type="switch" data-device="d_home_status" data-states='["Anwesend","Abwesend"]' data-icons='["oa-status_available", "oa-status_away_1"]' data-colors='["white", "white"]' data-background-colors='["green", "red"]' class="bigger topspace"></div>
meinen neuen switch zu haben. Doch leider interessiert der sich nicht so für seine data-states, sonder schaltet meinen dummy auf "on" oder "off". Wo ist mein Denkfehler?

Danke, Robert
FHEM auf Raspbery Pi 4
HM: HM-CFG-USB-2,HM-CC-RT-DN,HM-TC-IT-WM-W-EU,HM-SEC-SCo,HM-ES-PMSw1-Pl,HM-Sen-MDIR-WM55 | Philips hue: LCT001,LWL001,FLS-PP lp | Logitech Harmony Ultimate | zigbee2mqtt: WSDCGQ01LM, WSDCGQ11LM, MFKZQ01LM, MCCGQ11LM

setstate

Zitat von: Skusi am 10 Dezember 2015, 11:32:17

Schade wäre ne super Geschichte auf kleinstem Raum sich durch viele Schalter zu swipen.

Hab ich nur was übersehen, oder ist das noch geplant, oder einfach nicht machbar (kurz tippen=Switch schalten, lang touch=swipen zur nächsten Seite )


uhhh, schwierig. Schaue ich mir an, was die einzelnen so bieten und wie man das lösen kann. Wäre schade, wenn die Control sich verstellen beim Wischen ...

Zitat von: bert am 10 Dezember 2015, 13:58:25
Mein komplettes Layout ist nach dem Update verrutscht. Ich habe viele Stellen an denen ich mit class="col-1-2" und class="col-1-3" hantiere.
@setstate
kann es sein dass du in der fhem-tablet-ui.css  bei [class*='col-'] das "float: left;" vergessen hast, oder wird das nicht mehr gebraucht.

Gruß Bert

nein, ich bin mit Absicht auf display: inline-block; anstatt float. Float ist zu aggressiv gewesen.
Jetzt musst du aufpassen, wenn die Zeile in Summe 100% ergibt, nicht durch Margins ('cell','left-space' etc) noch mehr Platz beansprucht wird, dann kommt man über 100% und alle verrutscht.
Bei HTML gibt es leider kein optimales Positionierungsmodel, was in allen Lebenslagen immer das Erwartete tut.

Zitat von: jojop2 am 10 Dezember 2015, 12:52:14
Können die Parameter nur für die data-get Attribute benutzt werden, oder auch für das data-device?

ja, jeglicher Text im Template kann per Platzhalter behandelt werden. Ach so, wie von CaptainHook beabsichtigt:

data-get="#par01#_tempMax"

data-parameter='{"#par01#":"fc0", ..... }'

Man muss nur aufpassen mit Sonderzeichen. Da der Vergleich per RegEx erfolgt, müsste man diese richtig escapen


MichaelT

Zitat von: setstate am 09 Dezember 2015, 19:06:45
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.

Super, sieht wieder gut aus. Danke.
Das inline war von Anfang an drin. Hatte mit ein Beispiel genommen und erweitert.

Gruß
Michael
Großes Mischmasch aus HM, Philips, WLAN und Eigenprojekte.
ABER alles mit FHEM.

setstate

Zitat von: robertPI am 10 Dezember 2015, 17:22:23
Hallo,

ich versuche einen multistatebutton durch einen switch zu ersetzen, da der multistatebutton ewig braucht, um sein icon zu wechseln, wenn er betätig wird. Nach dem readme dachte ich mit
<div data-type="switch" data-device="d_home_status" data-states='["Anwesend","Abwesend"]' data-icons='["oa-status_available", "oa-status_away_1"]' data-colors='["white", "white"]' data-background-colors='["green", "red"]' class="bigger topspace"></div>
meinen neuen switch zu haben. Doch leider interessiert der sich nicht so für seine data-states, sonder schaltet meinen dummy auf "on" oder "off". Wo ist mein Denkfehler?

Danke, Robert

Da fehlt das: data-set-on="Anwesend" data-set-off="Abwesend"
data-states = data-get-on ist nur für den GET Teil


CaptainHook

Hi,

derzeit ist es nicht Möglich in einem data-template, ein weiteres data-template zu laden. Könnte man dies Realisieren?

Grüße,
Stephan
Lenovo M53 ThinkCentre 10DC | Docker | SolarEdge SE10K + SE5000H + Energy Bank 10KWh | EspEasy | Tasmota | Hue | Alexa | uvm.

eki

Zitat von: mrbreil am 10 Dezember 2015, 13:35:53
Kann man mit dem Chart-Widget auch ein Monatsdiagramm darstellen?
Und wenn ja, kann mir bitte jemand einen Tip  geben, wo ich dazu etwas lesen kann.
Im Wiki steht dazu leider nix.

Gruß Christian

Kommt denke ich darauf an, was Du genau machen willst, und wie Das zugehörige Logfile aussieht. Mach mal ein Beispiel, was Du genau machen willst, dann kann ich mal schauen wie das gehen könnte.

setstate

Zitat von: tomster am 10 Dezember 2015, 10:17:23
Übrigens, was mir beim Swipe-Widget aufgefallen ist:
Wenn man ein "autoplay" definiert und dann manuell durch die Seiten swipet, dann hört danach das Autoplay auf.
Ich weiß zwar nicht, ob das ein Feature sein soll, aber bei meinem Setup ist das ein bissl unglücklich. Ich hab einen RasPi mit Touchscreen, der beim Booten einen Browser im Kiosk-Mode startet. Wenn ich nun manuell eingreife, dann stoppt das Autoplay. Auf meiner FTUI-Seite (ist nur 1 Seite, keine Untermenüs) ist jedoch kein Page-Reload-Button (will ich aus optischen Gründen eigentlich auch nicht). Somit bleibt mir nix anderes übrig, als den Pi neu zu starten.

setstate, meinst man kann das ändern? Ich hab leider von der Systematik vom FTUI, bzw. JS zu wenig Plan, um die autoplay-Schleife, bzw. deren Trigger zu verstehen. Vermutlich durch irgendwas wie onload(), oder? Wäre da nicht z.B. ein Retrigger bei vielleicht onmouseout() oder so sinnvoll?

Frage 2:
Beim Range-Widget könnte ich mir auch ein paar weitere Features vorstellen:
- Eine definierbare Skaleneinteilung.
- Ein Parameter um anzugeben, ob die Skaleneinteilung links oder rechts vom Balken oder "unsichtbar" stehen soll. Damit könnten man z.B. auch zwischen 2 Balken mittig die Skala layouten.
- eine "warn"-class, bei der Unterschreitung eines Werts der Balken zu Blinken beginnt.

So, wieder einmal nur Forderungen, Forderungen, Forderungen, ich weiß. Ich geh dann Mal lieber schnell ein bissl was "Donieren". Gehört sich so!

Frage1: ich werde 'autoplayDisableOnInteraction' beim Swiper Initiieren auf false setzten (default ist true). Ich denke nicht, dass wir das schaltbar brauchen. Man könnte das auch nach 10 Sekunden wieder automatisch starten lassen. Oder Start/Stop Button einbauen ...

Frage 2: schaue ich mir demnächst mal an

Punkt 3: vielen Dank an dich und an all die fleißigen "Donatoren"

viegener

Unter Firefox (Windows) ist seit einiger Zeit ein komisches Verhalten, das mit dem letzten Update echt problematisch geworden ist:

Erstes Laden der Seite (auch mit pagetab) geht problemlos, wenn man dann aber einen Reload (im Browser) auslöst, wird zwar angefangen zu laden, aber dann hängt das Laden jeweils 60 sek und alle 60 sek wird ein weiterer Teil der Seite geladen.

Das Verhalten ist auch in firebug sichtbar, man sieht jeweils, dass die Ladevorgänge hängenbleiben, bis der longpoll fertig ist

Da keine Fehlermeldung kommt, ist es schwierig hier eine Ursache zu identifizieren
Kein Support über PM - Anfragen gerne im Forum - Damit auch andere profitieren und helfen können