New FHEM Tablet UI

[masterpete23]

Also muss ich nur die fhem cfg und die Index HTML entsprechend anpassen?
Danke dann such ich mal wo der meta tag hin muss.

Gesendet von meinem Huawei Honor 7

[viegener]

Also muss ich nur die fhem cfg und die Index HTML entsprechend anpassen?
Danke dann such ich mal wo der meta tag hin muss.

Wenn Du ein einfaches FTUI mit nur einer Seite (oder pagetabs) hast, ja denn dann sind die Includes üblicherweise nur im index.html.
Es gibt aber auch die Möglichkeit mehrere (unabhängige) Seiten zu haben, dann muss es dort natürlich auch geändert werden.

Wenn Du bereits eine index.html hast, dann befinden sich darin mehrere meta-Tags mit verschiedenen Angaben. Hier einfach eines mit dem fhemweb_url hinzufügen, damit FTUI weiss, wo die Daten zum FHEM abzuholen sind.

[masterpete23]

Danke das werde ich testen

So sieht das example header nun aus. Trotzdem möchte er irgendwie auf /fhem/ zugreifen nur wo

Code Auswählen Erweitern

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="116">
    <meta name="widget_base_height" content="131">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="0"> <!-- 1=output to console;0=no output -->

    <link rel="stylesheet" href="/fhem3/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem3/tablet/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/fhem3/tablet/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem3/tablet/lib/jquery.toast.min.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="/fhem3/tablet/css/fhem-green-ui.css" / -->
    <link rel="stylesheet" href="/fhem3/tablet/css/fhem-tablet-ui-user.css" />

    <script src="/fhem3/pgm2/jquery.min.js" defer></script>
    <script src="/fhem3/tablet/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem3/tablet/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem3/tablet/js/fhem-tablet-ui.min.js" defer></script>

    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="/fhem3/pgm2/cordova-2.3.0.js" defer></script>
    <script src="/fhem3/pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>FHEM-Tablet-UI</title>
</head>


[xxsteffenxx]

Hallo zusammen,
habe gerade das slider widget eingebaut; funktioniert einwandfrei!

Leider gehen aber meine pushbuttons nicht mehr?

Code Auswählen Erweitern


<div data-type="swiper" data-height="130px" data-width="300px" class="top-space-1x">
        <ul>
            <li>
               <div class="left">
                  <div data-type="symbol" data-device="Waschen_30" data-get-on='["on","off"]' data-icons='["oa-scene_washing_machine shake shake-constant shake-little","oa-scene_washing_machine"]' data-on-colors='["green","red"]'> </div>
                  <div data-type="push" data-icon="fa-play" data-cmd="set Waschen_30 on-for-timer 6840"></div>
                     jetzt 30°:&nbsp;
                  </div>
                </li>
</ul>
    </div>
</li>


[setstate]

Update beim Swiper Widget:

neu: data-autoplay, navbuttons, nopagination, Steuern per Device:Reading

- data-autoplay="4000"  wechselt automatisch aller 4 Sekunden zur nächsten Seite
- class="navbuttons" zeigt zusätzlich Prev/Next Buttons an
- class="nopagination" erzeugt keine Page-Bullets
- Beispiel zum 'Fernsteuern' von FHEM aus. Wenn Dummy1 als STATE="Wert3" hat, springt das Widget zur 3. Seite

Code Auswählen Erweitern


    <div data-type="swiper" data-height="200px" data-width="250px"
         data-device="dummy1"
         data-states='["Wert1","Wert2","Wert3","Wert4"]'
         class="top-space navbuttons nopagination">
    <ul>
        <li><div class="large top-space">Schlafzimmer</div><div data-type="label" data-device="SchlafzimmerHeizung_Clima" data-get="measured-temp" class="bigger thin top-space"></div></li>
        <li><div class="large top-space">Kinderzimmer</div><div data-type="label" data-device="KinderzimmerHeizung_Clima" data-get="measured-temp" class="bigger thin top-space"></div></li>
        <li><div class="large top-space">Bad</div><div data-type="label" data-device="BadHeizung_Clima" data-get="measured-temp" class="bigger thin top-space"></div></li>
        <li><div class="large top-space">Wohnzimmer</div><div data-type="label" data-device="WohnzimmerHeizung_Clima" data-get="measured-temp" class="bigger thin top-space"></div></li>
     </ul>
     </div>


[setstate]

Steffen, ohhh. Legt mal übergangsweise irgendein data-set-on für diese Pushs fest. Ich überlege mir noch eine Lösung für den Konflikt der Parameter.
Hintergrund: Ich unterdrücke jetzt jegliche weitere Aktivität, wenn data-set-on oder data-set-off nicht gesetzt sind. Die sind beim Push aber per default nicht gesetzt.

[Schnabelowski]

Hi,
wie könnte man "set on  for timer " mit  TUi realisieren? 

Gruß

Peter

[setstate]

Hi,
wie könnte man "set on  for timer " mit  TUi realisieren? 

Gruß

Peter

Die Antwort geht schnell ...
Auszug aus der Readme:

**Example** for a push button to switch a lamp on for 5 minutes. The control shows a progress circle while countdown is running.
The countdown time is auto detected via the on-for-timer command. A other value can be set with the parameter data-countdown

Code Auswählen Erweitern

<div data-type="push" data-device="MyLamp" data-set-on="on-for-timer 300" 
class="cell" ></div>

(http://knowthelist.github.io/fhem-tablet-ui/push_on-for-timer.png)

Nachtrag:
ich habe gerade den Push noch etwas optimiert. Der on-for-timer count-down ist nun persistent und überlebt somit auch einen Browser Refresh.

[Stril]

Steffen, ohhh. Legt mal übergangsweise irgendein data-set-on für diese Pushs fest. Ich überlege mir noch eine Lösung für den Konflikt der Parameter.
Hintergrund: Ich unterdrücke jetzt jegliche weitere Aktivität, wenn data-set-on oder data-set-off nicht gesetzt sind. Die sind beim Push aber per default nicht gesetzt.

Hallo!

Leider funktioniert das bei mir auch nicht. Testweise habe ich data-set-on ergänzt:

Code Auswählen Erweitern


        <li><div data-type="push" data-device="aJs_OG_Schlafzimmer"
             data-icon="fa-angle-down"
             data-set="down" data-set-on="down">
        </div></li>


--> Der Push-Button löst leider weiter nichts aus.
Hast Du noch eine Idee?

Danke und Grüße
Phil

[setstate]

Das kann nicht sein ... Das muss funktionieren

Code Auswählen Erweitern


<li><div data-type="push" data-device="aJs_OG_Schlafzimmer"
             data-icon="fa-angle-down"
             data-set-on="down">
        </div></li>


data-set kann man weglassen, weil ja kein Reading gesetzt wird, sondern nur STATE

[Schnabelowski]

könnte  man "Circlemenü" Widget missbrauchen um set on-for-timer mit paar  verschiedenen Werten  im  einem Widget  zu  haben?

Gruß

[Stril]

Das kann nicht sein ... Das muss funktionieren

Code Auswählen Erweitern


<li><div data-type="push" data-device="aJs_OG_Schlafzimmer"
             data-icon="fa-angle-down"
             data-set-on="down">
        </div></li>


data-set kann man weglassen, weil ja kein Reading gesetzt wird, sondern nur STATE

Hallo!

Wenn ich data-set weg lasse, funktioniert es.

Danke!

[fhem-challenge]

Push-Button-Problem

Wie schade... seit dem letzten Update (irgendwie in der Zeit vom 6.12. - 9.12) sind leider wieder einige Formatierungen recht ordentlich durcheinander gekommen. Ich habe schon jedes mal Befürchtungen, ein Update zu machen ... aber okay.. ich habe nun alles erneut nachgearbeitet und nun "passt" es wieder.  Insb. die Änderungen an "fhem-tablet-ui.css" sowie "widget_push.js" waren für mich "dramatisch". Insbesondere alle "center" Formatierungen sind/waren nun verändert, warum auch immer.

Übrig geblieben ist leider ein Problem bei der (vermutlich) "widget_push.js", da ich nun im circlemenu --> push nutze und bis vor einigen Tagen alles noch funktionierte.

Bei "push" rufe ich

data-cmd="attr Heizung.Regler.HM.Wohnzimmer heizung_hightemp 18.0"

... auf (ohne definition eines data-devices). Das hat alles bislang gut funktioniert, nur jetzt wird kein "attr Heizung.Regler.HM.Wohnzimmer heizung_hightemp 18.0" mehr ausgeführt.

Die "widget_push.js" vom 8.12. funktionierte hingegen noch.

Code Auswählen Erweitern

             <ul class="menu">
                  <li><div data-type="push" data-icon="fa-wrench"></div></li>
                  <li><div data-type="push"
                           data-cmd="attr Heizung.Regler.HM.Wohnzimmer heizung_hightemp 16.0"
                           style="color: #E6E6E6"                     
                           data-icon="">16</div></li>
                  <li><div data-type="push"
                           data-cmd="attr Heizung.Regler.HM.Wohnzimmer heizung_hightemp 18.0"     
                           style="color: #E6E6E6"               
                           data-icon="">18</div></li>
                  <li><div data-type="push"
                           data-cmd="attr"
                           style="color: #E6E6E6"   
                           data-set="Heizung.Regler.HM.Wohnzimmer heizung_hightemp 19.0"               
                           data-icon="">19</div></li>
                  <li><div data-type="push"
                           data-cmd="attr Heizung.Regler.HM.Wohnzimmer heizung_hightemp 20.0"
                           style="color: #E6E6E6"                     
                           data-icon="">20</div></li>
                  <li><div data-type="push"
                           data-cmd="attr Heizung.Regler.HM.Wohnzimmer heizung_hightemp 21.0"
                           style="color: #F02020"                 
                           data-icon="">21</div></li>
                  <li><div data-type="push"
                           data-cmd="attr Heizung.Regler.HM.Wohnzimmer heizung_hightemp 22.0"
                           style="color: #E6E6E6"
                           data-icon="">22</div></li>
                  <li><div data-type="push"
                           data-cmd="attr Heizung.Regler.HM.Wohnzimmer heizung_hightemp 23.0"
                           style="color: #E6E6E6"                     
                           data-icon="">23</div></li>    
            </ul>


Gibt's eine Alternative, um hier "attr Heizung.Regler.HM.Wohnzimmer heizung_hightemp .." zu setzen ?


Nachtrag:

Habe nun weiter im Detail nachgesehen. Die Probleme mit dem "push"-Widget liegen explizit am widget_famultibutton.
Konkret an den Änderungen zwischen dem 8.12 und jetzt:

Anbei die "diff" zwischen beiden Versionen:

Code Auswählen Erweitern


root@fhem-server:/daten/backup/opt/fhem/www/tablet/js# diff widget_famultibutton.js /opt/fhem/www/tablet/js/widget_famultibutton.js
121c121,124
<         if(this._doubleclicked(elem, 'on')) {
---
>         if (elem.data('set-on')===''){
>             elem.setOff();
>         }
>         else if(this._doubleclicked(elem, 'on')) {




Viele Grüße!

Andreas

[MichaelT]

Hallo setstate,

habe auch ein Problem mit dem Layout seit dem Update (bin aber nicht so fit wie fhem-challenge).
Als Beispiel - OG_BAD_Fe und OG_BAD_LiSpi - bis vor kurzem alles in Ordnung, heute sehe ich das Fenster und die Lampe nicht mehr.
Wenn ich das Grid vergrößere sind die beiden Widgets nach unten gerutscht.

Kannst Du mir einen Tipp geben?

Code Auswählen Erweitern

<li data-row="1" data-col="3" data-sizex="2" data-sizey="1">
  <header>BAD</header>
  <div data-type="thermostat" data-device="OG_BAD_RT" data-valve="humidity" class="cell left"></div>
  <div data-type="popup" data-width="800px" data-height="250px" class="inline">
   <div class="cell left" data-type="symbol"
                  data-device="OG_BAD_Fe"
                  data-get-on='["open","tilted","closed"]'
                  data-icons='["oa-fts_window_1w_open","oa-fts_window_1w_tilt","oa-fts_window_1w"]'
                  data-on-colors='["Red","Yellow","Green"]'>
   </div>
   <div class="cell narrow readonly" data-type="switch" data-device="OG_BAD_LiSpi" ></div>
   <div class="dialog">
    <header>Bad</header>
    <div class="left left-space top-space" >
     <div data-type="simplechart"


Gruß und schon mal Danke
Michael

[fhem-challenge]

Hallo setstate,

habe auch ein Problem mit dem Layout seit dem Update (bin aber nicht so fit wie fhem-challenge).
Als Beispiel - OG_BAD_Fe und OG_BAD_LiSpi - bis vor kurzem alles in Ordnung, heute sehe ich das Fenster und die Lampe nicht mehr.
Wenn ich das Grid vergrößere sind die beiden Widgets nach unten gerutscht.

Kannst Du mir einen Tipp geben?

Code Auswählen Erweitern

<li data-row="1" data-col="3" data-sizex="2" data-sizey="1">
  <header>BAD</header>
  <div data-type="thermostat" data-device="OG_BAD_RT" data-valve="humidity" class="cell left"></div>
  <div data-type="popup" data-width="800px" data-height="250px" class="inline">
   <div class="cell left" data-type="symbol"
                  data-device="OG_BAD_Fe"
                  data-get-on='["open","tilted","closed"]'
                  data-icons='["oa-fts_window_1w_open","oa-fts_window_1w_tilt","oa-fts_window_1w"]'
                  data-on-colors='["Red","Yellow","Green"]'>
   </div>
   <div class="cell narrow readonly" data-type="switch" data-device="OG_BAD_LiSpi" ></div>
   <div class="dialog">
    <header>Bad</header>
    <div class="left left-space top-space" >
     <div data-type="simplechart"


Gruß und schon mal Danke
Michael

bei mir hat das Weglassen einiger "center" sowie das Weglassen der "left" Classes geholfen.

Vorher (beispielhaft): <div class="cell left ">

Nachher: <div class="cell"> ... damit war die Formatierung (zumindest bei mir) wieder korrekt.