New FHEM Tablet UI

[StefanW]

Hallo,
ich habe heute mal nach längerer Zeit mal wieder ein Update von Tablet UI und den Widgets gemacht.
Seit dem habe ich bei einigen meiner Buttons ein Darstellungsproblem.
Die normalen Buttons werden korrekt dargestellt, aber sobald eine "Sonderfunktion" (wie etwa das Symbol im Button farblich einfärben, oder den Button blinken lassen) zugeordnet ist, wird entweder gar kein Button dargestellt, oder nur das Symbol.
Vor dem Update funktionierte es einwandfrei.

Hier mal meine Definitionen:

Code Auswählen Erweitern

<li data-row="5" data-col="5" data-sizex="1" data-sizey="1">
        <header>Anwesenheit</header>
<div style="font-size:30px; color:rgb(96, 0, 0);" data-type="button" data-device="GTag_Audi"
data-get-on='["present","absent"]'
data-icon="fa-car"
data-on-colors='["#009933","#CC0000"]'
class="cell small"></div>
        <div data-type="label" class="narrow darker">Audi</div>
</li>

<li data-row="2" data-col="6" data-sizex="1" data-sizey="1">
        <header>Muell</header>
<div style="font-size:30px; color:rgb(96, 0, 0);"
data-type="button"
data-device="Muellalert"
data-color="#aa6900"
data-get-on='["on","off"]'
data-url="muell.html"
    data-icons='["fa-trash warn blink","fa-trash"]'
class="cell small"></div>
    <div data-type="label" class="narrow darker">Muell</div>
</li>

Irgendwie finde ich da den fehler nicht. 

[rvideobaer]

Hallo,

ich bin noch ein Anfänger mit der TabletUI. Meine Thermostate (MAX) habe ich mit dem Thermostat Widget eingebunden und kann sie auch steuern, aber der Zeiger und die Temperatur stehen beim Start immer auf 10 Grad. Wenn ich die Temp. verstelle ändert sich Zeiger und Anzeige bleibt aber dann stehen bis ich wieder manuell ändere, oder beim neu laden wieder auf 10 Grad zurück.

Code Auswählen Erweitern

<li data-row="1" data-col="6" data-sizex="2" data-sizey="1">
        <header>WOHNZIMMER</header>
        <div data-type="thermostat"
data-device="Wohnzimmer"
ta-step="0.5"   
  data-min="4.5"
data-max="31"
data-valve="valveposition"
data-get="desiredtemperature"
data-temp="temperature"
data-set="desiredTemperature auto"
class="centered big">
</div>
       <div data-type="label"
      data-device="Wohnzimmer"
      data-get="desiredTemperature"
      data-limits='[-5,19,26]'
      data-colors='["#6699FF","#33ff00","#FF0000"]'
      data-unit="%B0C%0A"
      class="cell inline narrow big">
</div>               
</li>


habe ich irgend was falsch oder Vergessen?

Gruß Rolf

[setstate]

desiredtemperature

Einmal mit großem T und einmal klein geht bestimmt schief.

[rvideobaer]

Hallo,

vielen vielen Dank, manchmal ist man wirklich Blind. Ich bin echt Begeistert.

Gruß Rolf

[setstate]

@StefanW: Es könnte am benutzen Button-Widget liegen. Ich weiß nicht, ob deine Version noch passt.
Probiere mal Pagebutton, der ist uptodate. Oder Switch oder Symbol.

Wenn ich mit meinem Rechner wieder arbeitsfähig bin (Festplatten Crash), schaue ich mir das etwas genauer an und aktualisiere die Beispiele wieder.

[l3skon3]

Hallo,

gibt es eine Möglichkeit das Widget-Circlemenu so abzuändern das es vertikal ausklappt?

mein momentaner Code ist:

Code Auswählen Erweitern

<header>MENÜ</header>
<div data-type="circlemenu" class="cell circlemenu" data-direction="right-half" data-circle-radius="120">
<ul class="menu">
<li>
<div data-type="symbol"
data-icon="oa-control_building_modern_s_all"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a"
data-background-icon="fa-circle">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="raum_wohnzimmer.html"
data-icon="oa-scene_livingroom"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a"
data-background-icon="fa-circle">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="raum_badezimmer.html"
data-icon="oa-scene_bath"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a"
data-background-icon="fa-circle">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="raum_kueche.html"
data-icon="oa-scene_dinner"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a"
data-background-icon="fa-circle">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="raum_flur.html"
data-icon="fs-floor"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="raum_schlafzimmer_1.html"
data-icon="fa-bed"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="raum_schlafzimmer_2.html"
data-icon="fa-bed"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="raum_schlafzimmer_2.html"
data-icon="fa-bed"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="raum_heizraum.html"
data-icon="oa-sani_heating"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
</li>
</ul>
</div>
<div class="smaller">Räume</div>
<div data-type="circlemenu" class="cell circlemenu" data-direction="right-half" data-circle-radius="90">
<ul class="menu">
<li>
<div data-type="symbol"
data-icon="fs-hm_keymatic"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a"
data-background-icon="fa-circle">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="thermostat_badezimmer.html"
data-icon="oa-scene_bath"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="thermostat_kueche.html"
data-icon="oa-scene_dinner"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="thermostat_flur.html"
data-icon="fs-floor"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="thermostat_schlafzimmer_1.html"
data-icon="fa-bed"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="thermostat_schlafzimmer_2.html"
data-icon="fa-bed"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="thermostat_schlafzimmer_2.html"
data-icon="fa-bed"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
</li>
</ul>
</div>
<div class="smaller">Thermostate</div>
<div data-type="circlemenu" class="cell circlemenu" data-direction="right-half" data-circle-radius="90">
<ul class="menu">
<li>
<div data-type="symbol"
data-icon="fa-sun-o"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a"
data-background-icon="fa-circle">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="wetter.html"
data-icon="oa-scene_bath"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
<li>
<div data-type="pagetab"
data-url="wetter_vorhersage.html"
data-icon="oa-scene_bath"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="wetter_test.html"
data-icon="oa-scene_bath"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
</li>
</ul>
</div>
<div class="smaller">Wetter</div>
<div data-type="circlemenu" class="cell circlemenu" data-direction="right-half" data-circle-radius="90">
<ul class="menu">
<li>
<div data-type="symbol"
data-icon="oa-edit_settings"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a"
data-background-icon="fa-circle">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="system_kalender.html"
data-icon="fa-calendar-o"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
<li>
<div data-type="pagetab"
data-url="system_system.html"
data-icon="fa-server"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
</li>
<li>
<div data-type="pagetab"
data-url="system_system.html"
data-icon="fa-server"
data-on-background-color="rgb(111,69,0)"
data-off-background-color="rgb(111,69,0)"
data-on-color="#2a2a2a"
data-off-color="#2a2a2a">
</div>
</li>
</ul>
</div>
<div class="smaller">System</div>
</div>

Oder muss es neu programmiert werden?

mfg

[setstate]

Hallo,

gibt es eine Möglichkeit das Widget-Circlemenu so abzuändern das es vertikal ausklappt?

Oder muss es neu programmiert werden?

mfg

Es geht nicht per Config. Es klappt immer nur im Kreis aus, wie der Name schon sagt.
Aber das heißt aber nicht, dass das garnicht möglich ist. Ich habe etwas rumprobiert und es klappt.
Ich werde das demnächst als Option anbieten. Hier vorab zum selbst Ändern für Ungedultige:

Nötige Änderung für horizontal in der lib/jquery.circlemenu.js in Zeile 75 einfügen:

Code Auswählen Erweitern


            x = index * 50;
            y = 0;


bzw. für vertikal

Code Auswählen Erweitern


            x = 0;
            y = index * 50;


[skuggy]

Hallo @uniqueck,

ich hab das calview widget eingebaut, leider zeigt es nichts an. Zeit das Widget alle Termine an oder nur heute und morgen?

[uniqueck]

Hallo @skuggy
Wie hast du es denn eingebaut?
Wenn du es mit all als Schalter einbaust zeigt es dir alle Termine an. Du kannst die Anzahl dann mit data-get-max steuern.

Ansonsten musst du mir mal etwas code zeigen.

Gruß

Gesendet von meinem GT-N7100 mit Tapatalk

[l3skon3]

Es geht nicht per Config. Es klappt immer nur im Kreis aus, wie der Name schon sagt.
Aber das heißt aber nicht, dass das garnicht möglich ist. Ich habe etwas rumprobiert und es klappt.
Ich werde das demnächst als Option anbieten. Hier vorab zum selbst Ändern für Ungedultige:

Nötige Änderung für horizontal in der lib/jquery.circlemenu.js in Zeile 75 einfügen:

Code Auswählen Erweitern


            x = index * 50;
            y = 0;


bzw. für vertikal

Code Auswählen Erweitern


            x = 0;
            y = index * 50;


besten Dank. Es klappt mit runden Icons super! Bin jetzt am Probieren ob ich meine eckigen Icons und ein label darunter bekomme.

[setstate]

Interessante Frage, ob eckige Buttons ins Circlemenu passen und nicht abgeschnitten werden. Muss ich mal testen.

[dadoc]

Moyn,
Baue gerade eine komplette Fernbedienung für das ENIGMA2-Modul. Bei bestimmten Labels klappt der Refresh nicht, obwohl Events erzeugt werden.
Konkret lasse ich oben den aktuellen Kanal und die aktuelle Sendung anzeigen - longpoll ist aktiv (attr WEB longpoll 1):

Code Auswählen Erweitern

        <meta name="longpoll" content="1">
[...]
<li data-row="1" data-col="5" data-sizex="4" data-sizey="1">
        <header> <div data-type="label" data-device="kathi1" data-get="channel" class="inline">
</div></header>
<div class="left">
<div data-type="label" data-device="kathi1" data-get="currentTitle" class="inline red">
</div>
<div data-type="label" data-device="kathi1" data-get="eventdescription" class="inline">
[...]

Nach einem Kanalwechsel, egal ob über WebUI oder andere Frontends, werden diese Readings nicht aktualisiert bzw. nur beim Reload der Seite.
Events bei Kanalwechsel:

Code Auswählen Erweitern

Events (Filter:ENIGMA.*):
2015-10-30 11:44:51 ENIGMA2 kathi1 channel SUPER_RTL
2015-10-30 11:44:54 ENIGMA2 kathi1 servicereference: 1:0:1:2f08:441:1:0:0:0:0:
2015-10-30 11:44:54 ENIGMA2 kathi1 currentMedia: 1:0:1:2f08:441:1:0:0:0:0:
2015-10-30 11:44:54 ENIGMA2 kathi1 servicename: SUPER RTL
2015-10-30 11:44:54 ENIGMA2 kathi1 channel: SUPER_RTL
2015-10-30 11:44:54 ENIGMA2 kathi1 eventstart: 1446200400
2015-10-30 11:44:54 ENIGMA2 kathi1 eventduration: 1500
2015-10-30 11:44:54 ENIGMA2 kathi1 eventcurrenttime: 1446201893
2015-10-30 11:44:54 ENIGMA2 kathi1 eventdescription: Folge 16: 'Ritterspiele'
2015-10-30 11:44:54 ENIGMA2 kathi1 eventtitle: Scooby-Doo!
2015-10-30 11:44:54 ENIGMA2 kathi1 currentTitle: Scooby-Doo!
2015-10-30 11:44:54 ENIGMA2 kathi1 eventstart_hr: 11:20:00
2015-10-30 11:44:54 ENIGMA2 kathi1 eventcurrenttime_hr: 11:44:53
2015-10-30 11:44:54 ENIGMA2 kathi1 eventduration_hr: 00:25:00
2015-10-30 11:45:39 ENIGMA2 kathi1 eventstart: 1446201900
2015-10-30 11:45:39 ENIGMA2 kathi1 eventduration: 1800
2015-10-30 11:45:39 ENIGMA2 kathi1 eventcurrenttime: 1446201939
2015-10-30 11:45:39 ENIGMA2 kathi1 eventdescription: Folge 22: 'Das Geheimnis von Atlantis'
2015-10-30 11:45:39 ENIGMA2 kathi1 eventstart_hr: 11:45:00
2015-10-30 11:45:39 ENIGMA2 kathi1 eventcurrenttime_hr: 11:45:39
2015-10-30 11:45:39 ENIGMA2 kathi1 eventduration_hr: 00:30:00
2015-10-30 11:46:03 ENIGMA2 kathi1 remoteControl 3
2015-10-30 11:46:04 ENIGMA2 kathi1 eventcurrenttime: 1446201964
2015-10-30 11:46:04 ENIGMA2 kathi1 eventcurrenttime_hr: 11:46:04
2015-10-30 11:46:50 ENIGMA2 kathi1 servicereference: 1:0:1:2b7a:3f3:1:0:0:0:0:
2015-10-30 11:46:50 ENIGMA2 kathi1 currentMedia: 1:0:1:2b7a:3f3:1:0:0:0:0:
2015-10-30 11:46:50 ENIGMA2 kathi1 servicename: zdf_neo HD
2015-10-30 11:46:50 ENIGMA2 kathi1 channel: zdf_neo_HD
2015-10-30 11:46:50 ENIGMA2 kathi1 eventduration: 3000
2015-10-30 11:46:50 ENIGMA2 kathi1 eventcurrenttime: 1446202009
2015-10-30 11:46:50 ENIGMA2 kathi1 eventdescription: Wen die Götter zerstören
2015-10-30 11:46:50 ENIGMA2 kathi1 eventtitle: Raumschiff Enterprise
2015-10-30 11:46:50 ENIGMA2 kathi1 currentTitle: Raumschiff Enterprise
2015-10-30 11:46:50 ENIGMA2 kathi1 eventcurrenttime_hr: 11:46:49
2015-10-30 11:46:50 ENIGMA2 kathi1 eventduration_hr: 00:50:00
Klappt das Aktualiseren von label eventuell nur mit numerischen Werten oder mache ich etwas falsch?
Grüße
Martin

[Tedious]

Hi,

erst mal besten Dank für Eure Arbeit und die tolle Doku hier! Vieles konnte ch damit prima lösen, aber im Moment hänge ich und komme einfach nicht weiter. Ich will die Readins aus dem CallMon Mudul abbilden, das klappt aber irgendwie nicht. Hat jemand einen Denkanstoß für mich?

Code Auswählen Erweitern

<li data-row="1" data-col="2" data-sizex="6" data-sizey="4">
    <header>ANRUFE</header>
<div class="container">
    <table class="calls" width="100%">
        <tr>
            <td><div type="label" device="CallMon" data-get="B0"></div></td>
            <td>
                <div type="label" device="CallMon" data-get="D0" style="font-size:x-large;color:#aa6900;"></div>
                <div type="label" device="CallMon" data-get="C0"></div>
            </td>
            <td class="r"><div type="label" device="CallMon" data-get="E0"></div></td>
            <td class="r"><div type="label" device="CallMon" data-get="A0"></div></td>
        </tr>
        <tr>
            <td><div type="label" device="CallMon" data-get="B1"></div></td>
        </tr>   
</table>
</div>
</li>

Box wird gezeichnet, bleibt aber leer?

[setstate]

Heißt dein Device wirklich auch CallMon, wie das Modul?

Was sagt das Fhem Command 'list CallMon' im FHEM Web.

[Tedious]

Guter Punkt Kann ich denn nicht direkt aus dem Modul auslesen? list zeigt mir ja die Readings:

Code Auswählen Erweitern

Internals:
   DEF        FB7390
   FB         FB7390
   NAME       CallMon
   NR         145
   NTFY_ORDER 50-CallMon
   STATE      initialized
   TYPE       TM
   Readings:
     2015-10-30 13:58:02   A0              outgoing
     2015-10-30 13:58:02   A1              incoming
     2015-10-30 13:58:02   A2              outgoing_noconnect
     2015-10-30 13:58:02   A3              outgoing_noconnect
     2015-10-30 13:58:02   A4              outgoing
     2015-10-30 13:58:02   B0              13:58 30.10.2015
     2015-10-30 13:58:02   B1              13:53 30.10.2015
     2015-10-30 13:58:02   B2              13:04 30.10.2015
     2015-10-30 13:58:02   B3              13:03 30.10.2015
     2015-10-30 13:58:02   B4              12:42 29.10.2015
     2015-10-30 13:58:02   C0              unknown
     2015-10-30 13:58:02   C1              unknown
     2015-10-30 13:58:02   C2              unknown
     2015-10-30 13:58:02   C3              unknown
     2015-10-30 13:58:02   C4              unknown
     2015-10-30 13:58:02   D0             
     2015-10-30 13:58:02   D1             
     2015-10-30 13:58:02   D2             
     2015-10-30 13:58:02   D3             
     2015-10-30 13:58:02   D4             
     2015-10-30 14:10:12   E0              11:44
     2015-10-30 13:58:02   E1              03:46
     2015-10-30 13:58:02   E2              00:00
     2015-10-30 13:58:02   E3              00:00
     2015-10-30 13:58:02   E4              51:02
     2015-10-30 13:58:02   F0              0
     2015-10-30 13:58:02   F1              0
     2015-10-30 13:58:02   F2              0
     2015-10-30 13:58:02   F3              0
     2015-10-30 13:58:02   F4              0
     2015-10-30 13:58:02   G0             
     2015-10-30 13:58:02   G1             
     2015-10-30 13:58:02   G2             
     2015-10-30 13:58:02   G3             
     2015-10-30 13:58:02   G4             
     2015-10-30 15:06:18   monitor-type    all
Attributes:
   maxlines   4
   monitor-type all
   room       System
   symbol-answering-machine AB
   symbol-connected connected
   symbol-incoming incoming
   symbol-incoming-noconnect incoming_noconnect
   symbol-outgoing outgoing
   symbol-outgoing-noconnect outgoing_noconnect
   update     2