New FHEM Tablet UI

[chris1284]

Hat niemand eine Idee oder habe ich zuwenig Infos geliefert?

Gruss

mal dies entfernt?

<meta http-equiv="Cache-Control" content="no-store" />

der rest sieht eigentlich gut aus

[rizo]

hat niemand eine Idee warum 2x burstXmit gesendet wird?

[Marius99881]

Guten Tag miteinander,

hoffentlich könnt ihr mir bei meinem Problem helfen. Aktuell bin ich mit der Tablet UI beschäftigt, finde die Position des kompletten Fensters am linken Bildschirmrand aber doch etwas blöd.
Ist es möglich die Größe des Fensters an die jeweilige Bildschirmgröße anzupassen? Am besten automatisch.

Code Auswählen Erweitern

<meta name="widget_base_width" content="116">
        <meta name="widget_base_height" content="131">

Dort habe ich schon etwas rumgespielt. Leider ohne Erfolg. Auf meinem Lenovo Yoga 2 Pro 13 wird das einfach zu klein dargestellt.

Schonmal vielen Dank im Vorraus!

Lieber Gruß
Marius

[bert]

@setstate
Ich kämpfe immer noch mit meinem Layout. Ich habe viele Stellen an denen ich mit class="col-1-2" und class="col-1-3" hantiere.
Nach dem Wegfall von  "float: left;" klappt es nicht mehr.

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.

Im Code habe ich darauf geachtet, dass kein Platz "verschwendet" wird. Das obere Bild zeigt das "gute Layout", das untere dasselbe ohne  "float: left;" in der CSS, bei gleichem Code. Ich vermute, dass ich das mit dem "col-..." nicht richtig verstanden habe.

Gruß Bert

Code Auswählen Erweitern

<!-- WZ -->
<li data-row="1" data-col="2" data-sizex="3" data-sizey="2">
<header><font size="+1">Wohnzimmer </font><div data-type="label" data-device="FTR_WZ" data-get="temperature" class="inline" data-limits='[18,20,23]' data-colors='["#6699FF","#aa6900","#ff6242"]' data-unit="°C" ></div></header>
   <div class="container top-space">
        <div class="col-1-2">
            <div class="container top-space">
                <div class="col-1-3">
<div data-type="dimmer" data-device="Wohnen_Lampe_oben" data-get="dim" data-get-off="0" data-get-on="[1-9][0-9]*" data-set-on="on" data-set-off="off" data-dim="dim" data-min="0" data-max="100"></div>
<div data-type="label" class="darker">Oben</div>
<div data-type="dimmer" data-device="Wohnen_Lampe_Tür" data-get="dim" data-get-off="0" data-get-on="[1-9][0-9]*" data-set-on="on" data-set-off="off" data-dim="dim" data-min="0" data-max="100"></div>
<div data-type="label" class="darker">Tür</div>
</div>
<div class="col-1-3">
<div data-type="dimmer" data-device="Wohnen_Lampe_hinten" data-get="dim" data-get-off="0" data-get-on="[1-9][0-9]*" data-set-on="on" data-set-off="off" data-dim="dim" data-min="0" data-max="100"></div>
<div data-type="label" class="darker">Hinten</div>
<div data-type="dimmer" data-device="Wohnen_Lampe_vorne" data-get="dim" data-get-off="0" data-get-on="[1-9][0-9]*" data-set-on="on" data-set-off="off" data-dim="dim" data-min="0" data-max="100"></div>
<div data-type="label" class="darker">Vorne</div>
</div>
<div class="col-1-3">
<div data-type="switch" data-device="Wohnen_Blumen_Lampe" data-get-on='B0|an|on' data-get-off='BI|aus|off' data-set-on='B0' data-set-off='BI' ></div>
<div data-type="label" class="darker">Blumen</div>
<div data-type="dimmer" data-device="Wohnen_Kamin_Licht" data-get="dim" data-get-off="0" data-get-on="[1-9][0-9]*" data-set-on="on" data-set-off="off" data-dim="dim" data-min="0" data-max="100"></div>
<div data-type="label" class="darker">Kamin</div>
</div>
</div>
        </div>
        <div class="centered">
<div data-type="thermostat" data-device="FTR_WZ" data-get="temperature" data-temp="setpointTemp" data-fix="1" data-step="0.1" class=""></div>
        </div>
   </div>
</li>


[Stril]

Hallo!

Kennt ihr eine Möglichkeit, nach einer Zeit immer auf die Startseite zurück zu wechseln nach Inaktivität?

Also via Pagetab diverse Unterseiten und nach einigen Minuten auf die "Basis-Page" zurück wäre optimal

Was ich versucht habe:

<meta http-equiv="refresh" content="3; URL=/fhem/tablet/index_ipm.html#index_body_ipm.html">

--> Das wird aber nur ausgeführt, wenn ich es in die index.html packe - nicht, wenn ich es in die Unterseiten-Heads packe.

Danke für eure Hilfe!

Gruß
Phil

[ChrisK]

Kennt ihr eine Möglichkeit, nach einer Zeit immer auf die Startseite zurück zu wechseln nach Inaktivität?
...
<meta http-equiv="refresh" content="3; URL=/fhem/tablet/index_ipm.html#index_body_ipm.html">

Das Problem hierbei ist (auch wenn es auf jeder Seite klappen würden), dass nicht Aktivität/Inaktivität geprüft wird.

Du könntest das JavaScript vom "Screensaver" nehmen und so anpassen, dass in der Funktion show_screensaver() zur Startseite gegangen wird.

Also sowas in der Art:

Code Auswählen Erweitern

window.location.href = '/fhem/tablet/index_ipm.html#index_body_ipm.html';

[Stril]

Hallo!

Das würde ich nicht so problematisch sehen, wenn nur ein Wechsel des Pagetabs als Aktivität gesehen würde und dann eben nach 30 Minuten ohne Aktivität das Wanddisplay wieder die "Basis" zeigt. Da aber ein Wechsel des Pagetabs keinen Reload ausführt, funktioniert das irgendwie nicht...

Beim Screensaver komme ich leider nicht so richtig weiter. Wo muss ich denn den Reload machen?

Code Auswählen Erweitern


$(document).on('ready', function() {
  if ($('#screensaver')) {
    $('#screensaver').hide();
    var mousetimeout;
    var screensaver_active = false;
    var idletime = 60;

    function show_screensaver(){
        window.location.href = '/fhem/tablet/index_ipm.html#index_body_ipm.html';
        screensaver_active = true;
    }

    function stop_screensaver(){
        $('#screensaver').fadeOut();
        screensaver_active = false;
    }

    $(document).mousemove(function(){
        clearTimeout(mousetimeout);

        if (screensaver_active) {
            stop_screensaver();
        }

        mousetimeout = setTimeout(function(){
            show_screensaver();
        }, 1000 * idletime); // 5 secs
    });
  }
});


--> so klappt es leider nicht...

Gruß
Phil

[viegener]

Versuche mal in den Javascriptfile so etwas aufzunehmen wie folgt:

Code Auswählen Erweitern


  $(document).on('ready', function() {
    var mousetimeout;
    var idletime = 10;

    set_timeout();
   
    function show_basescreen(){
      if ( ( document.location.hash != "" ) && ( document.location.hash != "#home.html" ) ) {
        var href = document.location.protocol + "//" + document.location.host + document.location.pathname  ;
        document.location.replace( href );
      };
    }

    function set_timeout(){
      mousetimeout = setTimeout(function(){
          show_basescreen();
      }, 1000 * idletime); // 5 secs
    }

    $(document).mousemove(function(){
        clearTimeout(mousetimeout);
        set_timeout();
    });
  });



Statt #home.html musst Du natürlich Deine "homeseite" eintragen und bei idletime etwas mehr als 10 (sec)

[Stril]

Hallo!

Leider funktioniert es noch nicht. Die Javascript Konsole zeigt:

Uncaught ReferenceError: $ is not defined
--> in der Datei my_screensaver.js

Ich habe in der index.html nur folgende Zeile ergänzt:

Code Auswählen Erweitern

<script type="text/javascript" src="/fhem/tablet/js/my_screensaver.js"></script>

Habt ihr dazu noch eine Idee?

Danke und Gruß

[viegener]

Uncaught ReferenceError: $ is not defined
--> in der Datei my_screensaver.js

Setz den script-include mal weiter nach hinten in der index.html (auf jeden Fall hinter die jquery includes.

[Stril]

Hallo!

Hab ich versucht, aber ohne Erfolg. Jetzt geht es mit folgender Zeile direkt vor dem neuen Code:

Code Auswählen Erweitern

    <script src="/fhem/pgm2/jquery.min.js"></script>


Gruß
Phil

[Stril]

Hallo!

Ich hätte noch eine Idee, bei der ich nicht weiterkomme:

Wenn der Trockner fertig ist, soll sich ein Popup öffnen und eine Sound-Datei am Tablet abgespielt werden. Habt ihr eine Idee, wie das geht? Ein Popup-Widget gibt es ja grundsätzlich, wobei es scheinbar einen "Button" braucht. Wie sieht es mit dem Sound aus?

Habt ihr dazu auch noch eine Idee?

Danke und Gruß
Phil

[CaptainHook]

Hi,
Zum Abspielen von Sounds,  Sprachnachrichten und anzeigen von Toasts nutze ich z. B. das AMAD Modul das funktioniert bestens! Vllt ist es auch etwas für dich?

Gesendet von meinem SM-T335 mit Tapatalk

[Stril]

Hallo!

AMAD kann ich leider nicht nutzen (iPad).

Beim Popup komme ich auch nicht so ganz weiter. Das Popup wird einfach immer geöffnet - egal, ob der Dummy auf 1 oder 0 steht:

Code Auswählen Erweitern


<div data-type="popup" data-height="400px" data-width="400px" data-device="dTrocknerPopupStatus"
               data-get-on="1"
               data-get-off="0">

        <div class="dialog">
                <header>DIALOG</header>
                <div data-type="select"
                        data-device="TempDummy"
                        data-items='["-4","-2","-1","0","+1","+2","+4"]'
                        data-set=""
                        data-get=""
                        class="cell w2x" ></div>

        </div>
</div>


Habe ich hier irgendwo einen Denkfehler? Das Popup soll nur angezeigt werden, wenn der Dummy auf 1 steht und verschwinden, wenn er auf 0 geht.

[tomster]

Ich vermute, dass dTrocknerPopupStatus ein Dummy ist, oder?
Dann müsste der Code wohl so in dieser Art aussehen:

Code Auswählen Erweitern


<div data-type="popup" data-height="400px" data-width="400px" data-device="dTrocknerPopupStatus"
               data-get="state"
               data-get-on="1"
               data-get-off="0">

        <div class="dialog">
                <header>DIALOG</header>
                <div data-type="select"
                        data-device="TempDummy"
                        data-items='["-4","-2","-1","0","+1","+2","+4"]'
                        data-set=""
                        data-get=""
                        class="cell w2x" ></div>

        </div>
</div>