FTUI und JQuery UI bzw. "Standard" HTML

Begonnen von Thorsten Pferdekaemper, 22 Dezember 2017, 12:22:30

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

Thorsten Pferdekaemper

22 Dezember 2017, 12:22:30
Hi,
ich bin gerade dabei so eine Art Tablet-UI Generierer/Konfigurator zu entwickeln. Dabei will ich ein paar Sachen aus dem FTUI heraus selbst konfigurieren können. Beispielsweise sollen in einem Popup irgendwelche Werte eingegeben bzw. ausgewählt werden können. Ich dachte, dass das keine große Kunst ist Da das ganze eh auf JQuery basiert habe ich gedacht, dass ich JQuery UI benutzen kann. Dummerweise geht das nicht. Das JQuery Popup (Dialog) kommt erstmal unsichtbar hoch. Wenn man die JQuery UI CSS einbindet, dann stimmen andere Sachen im Tablet UI nicht mehr. Das bekommt man jetzt vielleicht mit einem eigenen CSS oder direkten Formatangaben hin, auch wenn das unnötiger Aufwand ist.
Ganz blöd wird es dann aber mit den Eingabefeldern. Die "input" Widgets vom Tablet-UI funktionieren im Prinzip, aber wenn ich direkt mit HTML "form" und "input" arbeite, dann kommt erstmal gar nichts. Erst mit "visibility: visible" werden die Felder wenigstens angezeigt, aber eingeben kann man nichts. Auch per Entwicklertools habe ich nicht herausgefunden, was da falsch läuft.

Im Prinzip könnte ich mir das ganze vielleicht per Tablet-UI Widgets zusammenbauen, aber die sind meistens auf Devices und Readings ausgelegt und ich will mir nicht für alles "Dummy"-Readings bauen. Außerdem müsste ich mit relativ viel JavaScript eingreifen, glaube ich. Schöner wäre es, wenn ich mit JQuery UI arbeiten könnte oder mir das ganze zumindest mit "normalem" HTML/CSS/JavaScript zusammenbauen könnte. JQuery UI wäre mir dabei lieber.

Hat dazu jemand eine gute Idee?

Gruß,
    Thorsten
FUIP

setstate

#1
22 Dezember 2017, 13:27:29
Gute Idee erstmal ...

Ich müsste die historisch gewachsene CSS mal aufräumen.

Kannst du mir ein einfaches Demo HTML geben, womit ich die ersten Themen angehen kann?

Thorsten Pferdekaemper

#2
22 Dezember 2017, 17:04:42
Hi,
erstmal Danke für die schnelle Antwort!
Zitat von: setstate am 22 Dezember 2017, 13:27:29
Ich müsste die historisch gewachsene CSS mal aufräumen.
Kannst du mir ein einfaches Demo HTML geben, womit ich die ersten Themen angehen kann?
Das kann ich machen, aber ich bin mir momentan noch nicht so sicher, wie ich weitermachen soll. Was meinst Du dazu? Wie gesagt wäre mir am liebsten, das ganze per JQuery UI zu machen, aber ob ich da das JQuery UI CSS verwende oder etwas von Dir ist mir eher egal. Wenn Du aber sagst, dass das mit dem JQuery UI sehr schwierig wird, dann kann ich mir auch was anderes vorstellen.
Gruß,
   Thorsten
FUIP

Thorsten Pferdekaemper

#3
22 Dezember 2017, 20:20:20
Hi,
ich habe jetzt mal ein paar Sachen zusammengestellt.

1. Dialog mit Tablet-UI Widgets
Code Auswählen

<!DOCTYPE html>
<!--
So ungefaehr soll es funktionieren.
-->
<html>
<head>
            <title>room/test</title>
<link rel="shortcut icon" href="/fhem/icons/favicon" />
            <script type="text/javascript" src="/fhem/ui/lib/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/ui/lib/jquery.gridster.min.js"></script>
                <script src="/fhem/ui/js/fhem-tablet-ui.js"></script>
                <style type="text/css">
                td {
                color: #808080;
                    }
.gridster ul li {
border-radius:8px;
}
.gridster ul li header {
border-radius:8px;
}
                </style>
<meta name="widget_base_width" content="142">
<meta name="widget_base_height" content="108">
            </head>
            <body>
                <div class="gridster" style="width:1070px">
                    <ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Home
<div data-type="popup"
data-height="250px"
data-width="300px">
<div>
<span style="position: absolute; right: 0; top: 0;" class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-cog fa-stack-1x"></i>
</span>
</div>
<div class="dialog">
<header>View Settings</header>
<table>
<tr>
<td>Device:</td>
<td>
<div data-type="input"
data-value="Hier was eingeben..."
class="notransmit">
</div>
</td>
</tr>
</table>
</div>
</div>
</header>
Irgendein Inhalt
</li>
</ul>
           </div>
</body>
       </html>

Das sieht dann so aus wie auf dem ersten Screenshot, wenn man das Zahnrad im Header der einzigen Zelle anklickt. Wie schon gesagt, das funktioniert zwar im Prinzip, aber es dürfte zumindest umständlich werden, auf dieser Basis einen Konfigurationsdialog zusammenzubasteln.

2. JQuery-UI Popup ohne JQuery-UI CSS
Code Auswählen

<!DOCTYPE html>
<!--
Probleme hier:
Formatierung des Popup (fast unsichtbar)
Eingabefeld nicht sichtbar (vorhanden?)
Popup ist nicht wirklich "modal"
-->
<html>
<head>
        <title>room/test</title>
<link rel="shortcut icon" href="/fhem/icons/favicon" />
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
        <script src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
        <style type="text/css">
            td {
                color: #808080;
            }
.gridster ul li {
border-radius:8px;
}
.gridster ul li header {
border-radius:8px;
}
        </style>
<meta name="widget_base_width" content="142">
<meta name="widget_base_height" content="108">

<script>
$( function() {
$( "#viewsettings" ).dialog({
autoOpen: false,
height: 250,
width: 300,
modal: true,
});
});
</script>

    </head>
    <body>
        <div class="gridster" style="width:1070px">
            <ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Home
<span style="position: absolute; right: 0; top: 0;" class="fa-stack fa-lg"
  onclick="$('#viewsettings').dialog('open')">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-cog fa-stack-1x"></i>
</span>
</header>
Irgendein Inhalt
</li>
</ul>
    </div>
       
<div id="viewsettings" title="View Settings">
<form>
<fieldset>
<label for="device">Device</label>
<input type="text" name="device" id="device" value="Hier was eingeben...">
</fieldset>
</form>
</div>
</body>
</html>

Siehe auch den zweiten Screenshot.
Das ist im Prinzip so, wie es die JQuery-UI Demos zeigen, nur ohne die JQuery UI CSS einzubinden. Ich hatte die Hoffnung, dass die JQuery UI mit Tablet UI einfach so funktioniert, da JQuery UI im lib-Verzeichnis auftaucht. Leider funktioniert das nicht so richtig. Das Popup ist "durchsichtig" und insgesamt nicht gescheit formatiert. Außerdem ist es nicht wirklich modal und das Eingabefeld wird nicht angezeigt.

3. JQuery-UI Popup mit JQuery-UI CSS
Code Auswählen

<!DOCTYPE html>
<!--
Probleme hier:
Input braucht explizit "visible"
Input immer noch nicht eingabebereit
-->
<html>
<head>
        <title>room/test</title>
<link rel="shortcut icon" href="/fhem/icons/favicon" />
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/fhem/tablet/lib/jquery-ui/jquery-ui.css">
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
        <script src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
        <style type="text/css">
            td {
                color: #808080;
            }
.gridster ul li {
border-radius:8px;
}
.gridster ul li header {
border-radius:8px;
}
        </style>
<meta name="widget_base_width" content="142">
<meta name="widget_base_height" content="108">

<script>
$( function() {
$( "#viewsettings" ).dialog({
autoOpen: false,
height: 250,
width: 300,
modal: true,
});
});
</script>

    </head>
    <body>
        <div class="gridster" style="width:1070px">
            <ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Home
<span style="position: absolute; right: 0; top: 0;" class="fa-stack fa-lg"
  onclick="$('#viewsettings').dialog('open')">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-cog fa-stack-1x"></i>
</span>
</header>
Irgendein Inhalt
</li>
</ul>
    </div>
       
<div id="viewsettings" title="View Settings">
<form>
<fieldset>
<label for="device">Device</label>
<input type="text" name="device" id="device" value="Hier was eingeben..." style="visibility: visible;">
</fieldset>
</form>
</div>
</body>
</html>

Siehe auch Screenshot 3.
Hier habe ich das JQuery UI CSS eingebunden und das input-Element explizit auf "visible" gesetzt. Jetzt sieht das Popup ganz ansehnlich aus, man könnte nur anmeckern, dass es nicht zum Tablet UI passt. Letzteres finde ich allerdings ganz gut, da die Konfigurationsdialoge sich vom eigentlichen UI abheben sollen. Das Popup ist jetzt auch wirklich modal.
Das Eingabefeld ist dummerweise immer noch nicht eingabebereit. Man kann es nicht einmal richtig anklicken (d.h. man kann den Cursor nicht reinsetzen.)

Beispiel Wdtimer Widget mit JQuery UI CSS
Code Auswählen

<!DOCTYPE html>
<!--
Probleme hier:
Das wdtimer-Popup ist kaputt
-->
<html>
<head>
        <title>room/test</title>
<link rel="shortcut icon" href="/fhem/icons/favicon" />
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/fhem/tablet/lib/jquery-ui/jquery-ui.css">
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
        <script src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
        <style type="text/css">
            td {
                color: #808080;
            }
.gridster ul li {
border-radius:8px;
}
.gridster ul li header {
border-radius:8px;
}
        </style>
<meta name="widget_base_width" content="142">
<meta name="widget_base_height" content="108">

<script>
$( function() {
$( "#viewsettings" ).dialog({
autoOpen: false,
height: 250,
width: 300,
modal: true,
});
});
</script>

    </head>
    <body>
        <div class="gridster" style="width:1070px">
            <ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Home
<span style="position: absolute; right: 0; top: 0;" class="fa-stack fa-lg"
  onclick="$('#viewsettings').dialog('open')">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-cog fa-stack-1x"></i>
</span>
</header>
Irgendein Inhalt
</li>

<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<header>KitchenShutter</header>
<div data-type="wdtimer"
data-device="KitchenShutterTimer"   
data-style="round"
data-theme="dark"
data-title="KitchenShutter" 
data-sortcmdlist="MANUELL"
data-cmdlist='{"Zu":"0","Auf":"100","10%":"10","20%":"20","30%":"30","40%":"40","50%":"50","60%":"60","70%":"70","80%":"80","90%":"90"}'>
<div data-type="button" class="cell small readonly" data-icon="oa-edit_settings" data-background-icon="fa-square-o"
data-on-color="#505050" data-on-background-color="#505050">
</div>
</div>
</li>
</ul>
    </div>
       
<div id="viewsettings" title="View Settings">
<form>
<fieldset>
<label for="device">Device</label>
<input type="text" name="device" id="device" value="Hier was eingeben..." style="visibility: visible;">
</fieldset>
</form>
</div>
</body>
</html>

Siehe auch Screenshot 4. So sieht es aus nachdem man auf die Zahnräder in der zweiten Zelle klickt.
Hier sieht man, dass die JQuery UI CSS zumindest eins der FTUI Widgets kaputt macht. Anscheinend beißen sich die Formatierung sowie die Icons.

5. So sollte das Wdtimer Widget aussehen
Code Auswählen

<!DOCTYPE html>
<!--
Probleme hier:
Wdtimer-Popup ist ok, aber das Settings-Popup ist kaputt
-->
<html>
<head>
        <title>room/test</title>
<link rel="shortcut icon" href="/fhem/icons/favicon" />
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
        <script src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
        <style type="text/css">
            td {
                color: #808080;
            }
.gridster ul li {
border-radius:8px;
}
.gridster ul li header {
border-radius:8px;
}
        </style>
<meta name="widget_base_width" content="142">
<meta name="widget_base_height" content="108">

<script>
$( function() {
$( "#viewsettings" ).dialog({
autoOpen: false,
height: 250,
width: 300,
modal: true,
});
});
</script>

    </head>
    <body>
        <div class="gridster" style="width:1070px">
            <ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Home
<span style="position: absolute; right: 0; top: 0;" class="fa-stack fa-lg"
  onclick="$('#viewsettings').dialog('open')">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-cog fa-stack-1x"></i>
</span>
</header>
Irgendein Inhalt
</li>

<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<header>KitchenShutter</header>
<div data-type="wdtimer"
data-device="KitchenShutterTimer"   
data-style="round"
data-theme="dark"
data-title="KitchenShutter" 
data-sortcmdlist="MANUELL"
data-cmdlist='{"Zu":"0","Auf":"100","10%":"10","20%":"20","30%":"30","40%":"40","50%":"50","60%":"60","70%":"70","80%":"80","90%":"90"}'>
<div data-type="button" class="cell small readonly" data-icon="oa-edit_settings" data-background-icon="fa-square-o"
data-on-color="#505050" data-on-background-color="#505050">
</div>
</div>
</li>
</ul>
    </div>
       
<div id="viewsettings" title="View Settings">
<form>
<fieldset>
<label for="device">Device</label>
<input type="text" name="device" id="device" value="Hier was eingeben..." style="visibility: visible;">
</fieldset>
</form>
</div>
</body>
</html>

Siehe auch Screenshot 5. Dieses Beispiel zeigt nur, wie das Wdtimer Widget Popup normalerweise aussieht.


So, das ist jetzt ein bisschen Material zum betrachten. Ich würde mir wünschen, dass JQuery UI mit Tablet UI kompatibel ist und auch normale HTML Elemente wie gewohnt funktionieren. Wenn es aber eine andere Möglichkeit gibt, dann ist mir das auch Recht. Ich will nur komplizierte JavaScript- und CSS-Orgien vermeiden, wenn möglich.

Gruß,
  Thorsten
FUIP

Thorsten Pferdekaemper

#4
23 Dezember 2017, 12:56:49
Hi,
ich habe jetzt mal mit der Version "JQuery UI mit JQuery UI CSS" weitergemacht. Wenn ich das input Element erst beim Anklicken des Zahnrads dynamisch erzeuge, dann funktioniert es. D.h. das input Element ist tatsächlich eingabebereit.
Das Coding sieht in etwa so aus:
Code Auswählen

function openSettingsDialog(name, pageId, viewId) {
var settingsDialog = \$( \"#viewsettings\" );
settingsDialog.dialog(\"option\",\"title\",\"Settings view \" + viewId + \" (blabla)\");
// XMLHTTP request to get config options with current values
var cmd = \"get \" + name + \" viewsettings \" + pageId + \"_\" + viewId;
ftui.sendFhemCommand(cmd)
.done(function(settingsJson){
var settings = JSON.parse(settingsJson);
var html = \"<form><fieldset><table>\";
for(var i = 0; i < settings.length; i++){
html += \"<tr><td><label for='\" + settings[i].id + \"'>\" + settings[i].id + \"</label></td>\" +
\"<td><input type='text' name='\" + settings[i].id + \"' id='\" + settings[i].id + \"' value='\" + settings[i].value + \"' style='visibility: visible;'></td></tr>\";
};
html += \"</table></fieldset></form>\";
settingsDialog.html(html);
settingsDialog.dialog(\"open\");
});
};

Falls gewünscht kann ich versuchen, das ganze zu vereinfachen, so dass es auch "standalone" nachvollziehbar ist.
Gruß,
   Thorsten

FUIP
Drucken
Nach oben Seiten1
Benutzer-Aktionen