New FHEM Tablet UI

[ChrisK]

Ich versuche gerade ein Circlemenu mit einem Label in der Mitte zu kombinieren und dabei das Label "einzukreisen".
Es geht um ein Rollo. Ich habe hier zuerst versucht mit slider glücklich zu werden, aber irgendwie lässt der sich am Tablet nicht so leicht "greifen". In Dolphin schiebt sich das Menü sehr oft runter (wenn man im Vollbildmodus ist) und in Chrome tut sich manchmal gar nichts und man muss nachgreifen (und an meinen Fingern sollte es nicht liegen ). Aber darum geht es ja grad nicht.

Folgender Code ist bisher raus gekommen:

Code Auswählen Erweitern

          <div data-type="circlemenu" class="cell circlemenu" data-direction="right-half" data-circle-radius="90">
            <ul class="menu">
              <li><div data-type="label"
                       data-limits='["0|off","[12]*[0-9]","[34][0-9]","[56][0-9]","[78][0-9]","([9][0-9]|100|on)"]'
                       data-colors='["#FFFFFF","#666666","#999999","#BBBBBB","#DDDDDD","#FFFFFF"]'
                       data-device='sz_rollo'></div>
              </li>
              <li><div data-type="push"
                       data-cmd="set"
                       data-device="sz_rollo"
                       data-set="on"
                       data-icon="">auf</div></li>
              <li><div data-type="push"
                       data-cmd="set"
                       data-device="sz_rollo"
                       data-set="75"
                       data-icon="">75</div></li>
              <li><div data-type="push"
                       data-cmd="set"
                       data-device="sz_rollo"
                       data-set="50"
                       data-icon="">50</div></li>
              <li><div data-type="push"
                       data-cmd="set"
                       data-device="sz_rollo"
                       data-set="25"
                       data-icon="">25</div></li>
              <li><div data-type="push"
                       data-cmd="set"
                       data-device="sz_rollo"
                       data-set="off"
                       data-icon="">zu</div></li>
            </ul>
          </div>

Versucht habe ich das Symbol-Widget "um" das Label rum zu setzen, oder auch "in" das Label-div reinzusetzen. Beides klappt leider nicht.
Geht das was ich vorhabe überhaupt aktuell oder müsste ich mir das label-widget angucken?

[setstate]

Ein Label mit Kreis drum geht nicht so aus der "Kalten". Ich habe keine schnelle Lösung parat. Kreis geht zwar, aber die Größe passt nicht.

Code Auswählen Erweitern

<div data-type="label"
               data-limits='["0|off","[12]*[0-9]","[34][0-9]","[56][0-9]","[78][0-9]","([9][0-9]|100|on)"]'
               data-colors='["#FFFFFF","#666666","#999999","#BBBBBB","#DDDDDD","#FFFFFF"]'
               data-device='dummy1'
               class="fa-stack fa-2x">
               </div>
               <i class="fa fa-stack-2x fa-circle-o" id="bg"></i>


Muss ich noch etwas weiter probieren ...
Nachtrag: eventuell ist es einfacher, nur ein CSS border-radius beim Label zu benutzen. Ich werde mal eine entsprechende Klasse vorbereiten.

[ChrisK]

Ein Label mit Kreis drum geht nicht so aus der "Kalten". Ich habe keine schnelle Lösung parat. Kreis geht zwar, aber die Größe passt nicht.

Danke, das erleichtert ein bisschen, weil ich nicht zu blind war um es zu finden

Nachtrag: eventuell ist es einfacher, nur ein CSS border-radius beim Label zu benutzen. Ich werde mal eine entsprechende Klasse vorbereiten.

Super, vielen Dank!
Den css-Weg wäre ich dann auch angegangen, aber bis ich da durchgestiegen bin hast Du wahrscheinlich schon was fertig, wenn ich so Deine Response-Zeit in den letzten Seiten hier im Thread sehe

[Grimm80]

So ich hab mich mal an eine Handy-Version gewagt und hab es bis jetzt so hin bekommen (s. Anhang).
Wenn jemand noch Ideen hat dann mal her damit...

[nightstorm99]

So ich hab mich mal an eine Handy-Version gewagt und hab es bis jetzt so hin bekommen (s. Anhang).
Wenn jemand noch Ideen hat dann mal her damit...

Das sieht sehr NICE aus! Respekt...

Hast du das über einzelne Seite gemacht?
Hast du etwas Code??

Danke und Gruß
Denny

[setstate]

Schick schick !!
Womit sind die Sektionen gemacht? jQuery-UI ?
Sind diese auf und zuklappbar?

[dantist]

Wie kann man Tablet UI eigentlich rückstandslos löschen? Habe dazu nichts gefunden.

[bert]

Das Verzeichnis "tablet" löschen und dann das Device "TABLETUI" löschen. Schade!
--------------------------------------------------------------------------------------------------------

Wie kann ich aus 1.3 Std. 1 Std.18 Min. machen? Also einen dezimalen Stundenwert in das Timeformat wandeln, gibt es dafür ein Widget?

Gruß Bert

[Jewo]

Servus Freunde,

war meine Frage zu simple ? Oder einfach übersehen ?

Gruß
Jens

Hallo Zusammen,

wäre es im Simplechart machbar, das wie bei FHEM auch, die Min und Max.-Werte als Zahl angegeben werden ?

Gruß
Jens

[Grimm80]

Das UI ist mit jquery gemacht. Eigentlich recht simpel. Den Ordner "tablet" habe ich einfach nur kopiert und umbenannt (Ordner: "mobil") um damit etwas zu basteln.
Funktioniert aber direkt mit FHEM. Hoffe es gibt noch Ideen dazu.
Und ja, die Sektionen werden automatisch geschlossen wenn man die nächste anklickt. Akktuell bekomme ich aber nur immer 3 Gridster-Module da rein, da ich noch nicht fertig bin und die Höhe noch nicht dynamisch ist. Aber wenn jemand noch Tips oder ähnliches hat gebt Bescheid.
Viel spaß beim basteln.
Hier mal der Code zum bauen (index.html):

Code Auswählen Erweitern



<!doctype html>
<html lang="en">
<head>
    <title>FHEM-Mobil-UI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="115">
    <meta name="widget_base_height" content="170">
    <meta name="widget_margin" content="1">
    <meta name='gridster_disable' content='1'>
    <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=not output -->

<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/mobil/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/mobil/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/mobil/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/mobil/lib/powerange.min.css" />
<link rel="stylesheet" href="/fhem/mobil/fonts/nesges/style.css" />
<link rel="stylesheet" href="/fhem/mobil/css/jquery-ui.css" />

<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="/fhem/mobil/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/mobil/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/mobil/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/mobil/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/mobil/lib/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="/fhem/mobil/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/mobil/js/fhem-tablet-ui.js"></script>

<!-- Enable this lines for usage with WebViewControl -->
<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
<script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
<script type="text/javascript">var wvcDevices = {'12345': 'GalaxyTab4'}; var wvcUserCssFile="webviewcontrol.css"</script>
<!-- End for WebViewControl -->
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>

</head>
<body>
<div id="accordion">
    <h3>Musik</h3>
  <div>
<p>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="3" data-sizey="1">
<table cellspacing="0" cellpadding="0" border="0" width="100%" align="center">
<tr>
<td>
<div data-type="select" data-device="audio" data-items='["AM","AUX","DVD","BLUETOOTH","SAT","FM","GAME","NET","PC","PHONO","STB/DVR","SOURCE","TV","USB"]' data-get="input" data-set="input" class="cell w2x" ></div>
</td>
<td>
  <div data-type="circlemenu" class="cell circlemenu">
   <ul>
<li><div data-type="push" data-icon="fa-wrench"></div></li>
<li><div data-type="push" data-device="audio" data-get="subwoofer-temporary-level" data-set="remotecontrol subwoofer-temporary-level -6" data-icon="">-6</div></li>
<li><div data-type="push" data-device="audio" data-get="subwoofer-temporary-level" data-set="remotecontrol subwoofer-temporary-level -2" data-icon="">-2</div></li>
<li><div data-type="push" data-device="audio" data-get="subwoofer-temporary-level" data-set="remotecontrol subwoofer-temporary-level 0" data-icon="">0</div></li>
<li><div data-type="push" data-device="audio" data-get="subwoofer-temporary-level" data-set="remotecontrol subwoofer-temporary-level +3" data-icon="">2</div></li>
<li><div data-type="push" data-device="audio" data-get="subwoofer-temporary-level" data-set="remotecontrol subwoofer-temporary-level +9" data-icon="">9</div></li>
<li><div data-type="push" data-device="audio" data-get="subwoofer-temporary-level" data-set="remotecontrol subwoofer-temporary-level +C" data-icon="">12</div></li>
  </ul>
</div>
</td>
<td>
<div data-type="switch" data-device="audio" data-get="mute" data-get-on="on" data-get-off="off" data-set-on="mute on" data-set-off="mute off" data-icon="fa-volume-up" style="font-size:40px"></div>
</td>
<td>
<div data-type="switch" data-icon="fa-plug" data-device="audio"  style="font-size:40px" class="cell"></div>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="20%" align="left">
<tr>
<td>
<div data-type="volume" data-step="0.5" data-device="audio" data-set="volume" data-get="volume" data-min="0" data-max="80"  data-width="100" data-height="100" class="cell"></div>
</td>
</tr>
</table>
</li>
</ul>
</div> 
</p>
  </div>
  <h3>Dimmer</h3>
  <div>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-type="volume" data-step="0.5" data-device="WZ.Dimmer_Sw" data-get="pct" data-set="pct" data-min="0" data-max="100" data-width="100" data-height="100" class="dim-back"></div>
<div data-type="label" class="cell">Wohnzimmer</div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<div data-type="volume" data-step="0.5" data-device="EZ1_OG.Dimmer_Sw" data-get="pct" data-set="pct" data-min="0" data-max="100" data-width="100" data-height="100" class="dim-back"></div>
<div data-type="label" class="cell">Esszimmer</div>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1.5">
<table cellspacing="0" cellpadding="0" border="0" width="100%" align="center">
<tr>
<td>
<div data-type="switch" data-device="WZ.Dimmer_Sw" class="cell"></div>
</td>
</tr>
<tr>
<td>
<div data-type="label" class="cell">Wohnzimmer</div>
</td>
</tr>
<tr>
<td>
<div data-type="switch" data-device="EZ1_OG.Dimmer_Sw" class="cell"></div>
</td>
</tr>
<tr>
<td>
<div data-type="label" class="cell">Esszimmer</div>
</td>
</tr>
</table>
</li>
</ul>
</div> 
  </div>
    <h3>Schalter</h3>
  <div>
<p>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-type="switch" data-device="K1_Arbeit_Switch" class="cell"></div>
<div data-type="label" class="cell">Arbeitsplatte</div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<div data-type="switch" data-device="K2_Herd_Switch" class="cell"></div>
<div data-type="label" class="cell">Herd</div>
</li>
</ul>
</div> 
</p>
  </div>
  <h3>Heizungen Obergeschoss</h3>
  <div>
<p>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-type="thermostat" data-device="WZ1_OG.Heizung_Clima" data-valve="ValvePosition" data-boost="boost" data-off="off" data-min="5" data-max="30"></div>
<div data-type="label" data-device="WZ1_OG.Heizung_Clima" data-get="measured-temp" class="big"></div>
<div data-type="label">Wohnzimmer<br></div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<div data-type="thermostat" data-device="EZ1_OG.Heizung_Clima" data-valve="ValvePosition" data-boost="boost" data-off="off" data-min="5" data-max="30"></div>
<div data-type="label" data-device="EZ1_OG.Heizung_Clima" data-get="measured-temp" class="big"></div>
<div data-type="label">Esszimmer</div>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
<div data-type="thermostat" data-device="KZ1_OG.Heizung_Clima" data-valve="ValvePosition" data-boost="boost" data-off="off" data-min="5" data-max="30"></div>
<div data-type="label" data-device="KZ1_OG.Heizung_Clima" data-get="measured-temp" class="big"></div>
<div data-type="label">Kinderzimmer</div>
</li>
</ul>
</div> 
</p>
  </div>
  <h3>Heizungen Ergeschoss</h3>
  <div>
<p>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-type="thermostat" data-device="WZ1_EG.Heizung_Clima" data-valve="ValvePosition" data-boost="boost" data-off="off" data-min="5" data-max="30"></div>
<div data-type="label" data-device="WZ1_EG.Heizung_Clima" data-get="measured-temp" class="big"></div>
<div data-type="label">Wohnzimmer<br></div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<div data-type="thermostat" data-device="WZ2_EG.Heizung_Clima" data-valve="ValvePosition" data-boost="boost" data-off="off" data-min="5" data-max="30"></div>
<div data-type="label" data-device="WZ2_EG.Heizung_Clima" data-get="measured-temp" class="big"></div>
<div data-type="label">Esszimmer</div>
</li>
</ul>
</div> 
</p>
  </div>
  <h3>3D-Drucker</h3>
  <div>
<p>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
<img src="http://192.168.190.40/videostream.cgi?user=admin&pwd=03oktober&resolution=4&rate=1"></img>
</li>
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
<div data-type="switch" data-device="3D_Drucker" data-icon="fa-plug" class="cell"></div>
<div data-type="label" class="cell">3D-Drucker</div>
</li>
</ul>
</div> 
</p>
  </div>

</body>
</html>



Und Hier noch die Zeile für die FHEM-Übersicht:

Code Auswählen Erweitern



define MOBILEUI HTTPSRV mobil/ ./www/mobil/ Mobile (test)



[danieljo]

Wollte nur mal kurz nen Feedback an den Entwickler von Tablet UI geben ich glaub @setstate ist dafür verantwortlich.

Also ich find es Super Mega Geil was du da entwickelt hast. Somit kann ich aus meinen früheren HTML und CSS Kenntnissen von vor 10 Jahren eigentlich alles zusammenbauen was mir in den Sinn kommt. So nach und nach erkenne ich erst was überhaupt alles möglich ist mit dem Teil.

Also wirklich vielen vielen Dank dafür! Und weiter so!

Eine Idee hätte ich noch wenn es die nicht sogar schon gibt.

Wie wäre ist mit einer Art "hover" Wenn man mit dem Mauszeiger über einen Wert drüber fährt sagen wir mal die "Aussentemperatur" das man eine Box angezeigt bekommt mit beliebigen weiteren Werten z.B. "Min" & "Max" Werte. Und sobald man mit dem Mauszeiger weg fährt das die Box sich wieder schließt?

Mit freundlichen Grüßen, ein Glücklicher User

[harry66]

Dem Statement kann ich mich nur anschließen @setstate, @nesges und alle die sonst noch dazu beitragen Danke dafür! Und weiter so!

Für alle die Ihre Ideen auch anderen zur Verfügung stellen möchten kann ich noch folgendes empfehlen:

http://forum.fhem.de/index.php/topic,37378.msg296510.html#msg296510

Gruß Rolf

[dantist]

Das Verzeichnis "tablet" löschen und dann das Device "TABLETUI" löschen. Schade!

Danke! Das Modul ist sicher nicht schlecht, brauche aber etwas, das responsive ist und auf einem 320x240 Display gut aussieht Werde wohl was eigenes auf Bootstrap-Basis bauen.

[danieljo]

Eine Frage bleibt aber:

Ich würde gerne die openautomation icons/font in FHEM Tablet UI nutzen.

Folgende habe ich gemacht:

in meiner index.html:

Code Auswählen Erweitern

<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />

habe ich das eingefügt da wo auch die anderen stylesheet definiert sind.

Dann habe ich folgendes Device:

Code Auswählen Erweitern

<li data-row="7" data-col="1" data-sizex="2" data-sizey="1">
    <header>Akku</header>
<div data-type="symbol" data-device="Tablet" data-get="powerLevel"
data-icons='["fa-battery-empty","fa-battery-quarter","fa-battery-half","fa-battery-three-quarters","fa-battery-full"]'
data-get-on='["0","25","50","75","100"]'
data-on-colors='["#AB0404","#F64E01","#FDAF00","#ADB203","#38B003"]'>
</div>
</li>

mit den momentanen Icons klappt es. Sobald ich aber auf "oa-measure_battery_0" usw. wechsel, wird mir nur ein 4-eckiges Icon mit 4 Ziffern in der Mitte angezeigt. Siehe Anhang

Wo ist das Problem?

[ChrisK]

Ein Label mit Kreis drum geht nicht so aus der "Kalten". Ich habe keine schnelle Lösung parat. Kreis geht zwar, aber die Größe passt nicht.
...
Muss ich noch etwas weiter probieren ...
Nachtrag: eventuell ist es einfacher, nur ein CSS border-radius beim Label zu benutzen. Ich werde mal eine entsprechende Klasse vorbereiten.

So scheint es zu klappen:

Code Auswählen Erweitern

.circleborder {
  border-radius: 50% !important;
  border: 2px solid #ffffff;
}

Dabei kriegt das erste Listen-Element die Klasse circleborder verpasst:

Code Auswählen Erweitern

            <div data-type="circlemenu" class="cell circlemenu" data-direction="right-half" data-circle-radius="90">
              <ul class="menu">
                <li class="circleborder"><div data-type="label"
                         data-limits='["0|off","[12]*[0-9]","[34][0-9]","[56][0-9]","[78][0-9]","([9][0-9]|100|on)"]'
                         data-colors='["#FFFFFF","#666666","#999999","#BBBBBB","#DDDDDD","#FFFFFF"]'
                         data-device='ba_rollo2'
                         data-background-icon="fa-wrench"></div>
                </li>
                <li><div data-type="push"
                         data-cmd="set"
                         data-device="ba_rollo2"
                         data-set="on"
                         data-icon="">auf</div></li>
                <li><div data-type="push"
                         data-cmd="set"
                         data-device="ba_rollo2"
                         data-set="75"
                         data-icon="">75</div></li>
                <li><div data-type="push"
                         data-cmd="set"
                         data-device="ba_rollo2"
                         data-set="50"
                         data-icon="">50</div></li>
                <li><div data-type="push"
                         data-cmd="set"
                         data-device="ba_rollo2"
                         data-set="25"
                         data-icon="">25</div></li>
                <li><div data-type="push"
                         data-cmd="set"
                         data-device="ba_rollo2"
                         data-set="off"
                         data-icon="">zu</div></li>
              </ul>
            </div>


Jetzt stehe ich vor einer anderen Frage:
Ich würde gerne einem Symbol eine eigene JS-Funktion onClick zuweisen.
Das klappt auch prima in einer eigenen javascript-Datei mit data-type push, button oder symbol. Wobei es bei "push" in Dolphin auf dem Tablet nicht sauber klappt, da muss man neben dem Symbol "klicken" (also =touchen). Die JS-Funktion kommt dann per jQuery an das Element:

Code Auswählen Erweitern


$(document).on('ready', function() {
  $("#id-vom-button").click(function(){
    //mach was
  });
});

Hierzu die Frage:
Kann ich per JavaScript dem button oder dem symbol einen "on" Status verpassen ohne dass ein reales Device dahinter hängt?
Ich hoffe, es ist verständlich, was ich meine.