Hauptmenü

Framework7 + FTUI

Begonnen von Standarduser, 02 Juli 2017, 16:31:08

Vorheriges Thema - Nächstes Thema

Standarduser

Hallo zusammen,
hallo setstate,

es gab ja hier im Forum schon an der einen oder anderen Stelle Ansätze, wie FTUI mit Framework7 kombiniert werden kann. Aber so richtig viel verwertbares konnte ich nicht finden.
Ich habe mich jetzt auch mal an der Umsetzung versucht und eine kleine Inkompatibilität gefunden.

Eine in fhem-tablet-ui.js verwendete Funktion verursacht einen schwarzen Bildschirm, nachdem alles gerendert wurde.
// -------- Framework7---------
// https://framework7.io/docs/

if (typeof Framework7 === 'function') {
    var f7 = {
        ftui: new Framework7({
            animateNavBackIcon: true
        }),
        options: {
            dynamicNavbar: true,
            domCache: true
        },
        views: []
    };
    Dom7('.view').each(function (index) {
        var view = f7.ftui.addView('#' + Dom7(this)[0].id, {
            dynamicNavbar: true

        });
        f7.ftui.views.push(view);
    });
    f7.ftui.onPageInit('*', function (page) {
        ftui.log(1,page.name + ' initialized');
        ftui.initWidgets('[data-page="' + page.name + '"]');
    });
}


Für den moment hat es geholfen, folgenden Teil auszukommentieren:
/*
    Dom7('.view').each(function (index) {
        var view = f7.ftui.addView('#' + Dom7(this)[0].id, {
            dynamicNavbar: true
        });
        f7.ftui.views.push(view);

    });
*/


Gibt es eine bessere Möglichkeit, beides gemeinsam laufen zu lassen, als diesen Code auszukommentieren?

setstate

So sieht mein Header für eine F7 Seite aus


<head>
    <!-- FTUI with Framework7 Demo (draft) 2016 by Mario Stephan
        ftui:  https://github.com/knowthelist/fhem-tablet-ui
        f7:    https://github.com/nolimits4web/Framework7
        docs:  http://idangero.us/framework7/docs/

        this demo page is still under construction

    -->

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta name="longpoll" content="1">
    <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="1">
    <!-- verbose level 1-6 = output to console;0 = not output -->

    <title>FTUI-F7</title>

    <link rel="stylesheet" href="lib/framework7/framework7.ios.min.css">
    <link rel="stylesheet" href="lib/framework7/framework7.ios.colors.min.css">
    <link rel="stylesheet" href="css/fhem-tablet-ui-f7.css" />

    <script src="lib/framework7/framework7.min.js" defer></script>
    <script src="js/fhem-tablet-ui.js" defer></script>
    <!--script src="js/my-app.js" defer></script-->
   

</head>

Standarduser

Hast Du eigentlich etwas spezielles in der fhem-tablet-ui-f7.css stehen?
Und würdest Du die mit uns teilen?

setstate

#3
Klar mach ich.
Ich bin aber noch nicht weit damit :-(
Hier der Stand

Standarduser

Sehr cool.
Ich hänge auch mal einen ersten Screenshot an.
Gibt noch viel zu tun...

Standarduser

#5
Ich kämpfe gerade damit, dass die Widgets Slider und Medialist überhaupt nicht funktionieren.

Beim Slider-Widget hab ich den Grund schon gefunden:
Es liegt an der Klasse "tab", die vom Slider genau wie von f7 verwendet wird. Nur dass f7 sie auf "display:none" setzt.
Im Moment kann ich gut darauf verzichten, aber wäre es möglich, da noch eine zweite Klasse mit gleicher Funktion aber anderem Namen einzubauen?

//Edit: Scheint so, als hätte Medialist ein Problem damit, wenn man es auf einer Unterseite einbindet. Wenn es in der index.html definiert wird, funktioniert alles, auf beliebigen anderen Seiten scheint das Widget den nötigen Code nicht zu generieren. Das hier kommt dabei heraus:


<div class="page-content">
<!-- Medialist -->
<div data-type="medialist" data-device="DG.ku.MM.Squeezebox" data-set="track" data-get="ftuiMedialist" data-pos="playlistCurrentTrack" data-height="85%" data-width="95%" class="autoscroll index1 centered">
</div>
</div>

Standarduser

Ich bin wieder ein Stück weiter gekommen.

Die neuesten Erkenntnisse:
Auf der Hauptseite funktionieren alle Widgets, auf Unterseiten nicht. Das liegt daran, dass Unterseiten per Ajax geparst werden und so standardmäßig keine Scripte ausgeführt werden.
Also hab ich die Funktion für das Initialisieren der Seiten in der my-app.js wie folgt angepasst:

$$(document).on('pageInit', function(e) {
var page = e.detail.page;

$$(page.container).find("script").each(function(el) {
if ($(this).attr('src')) {
jQuery.getScript($(this).attr('src'));
}
else {
eval($(this).text());
}
});
});


Damit werden auf Unterseiten eingebundene Scripte beim Aufruf der Seite ausgeführt.
Zusätzlich habe ich meine Unterseite, die die Medialist enthält, um einen erneuten Aufruf von fhem-tablet-ui.js erweitert, sodass sie im Moment wie folgt aussieht:


<!-- Navigationsleiste oben -->
<div class="navbar">
<div class="navbar-inner">
<div class="left"><a href="#" class="back link"><i class="icon icon-back"></i><span>Zurück</span></a></div>
<div class="center sliding">aktuelle Wiedergabeliste</div>
<div class="right"><a href="#" class="link icon-only"><i class="icon demo-icon"></i></a></div>
</div>
</div>

<div data-page="mplayer_ku_playlist" class="page navbar-fixed">
<div class="page-content">
<!-- Medialist -->
<div data-type="medialist"
data-device="DG.ku.MM.Squeezebox"
data-set="track"
data-get="ftuiMedialist"
data-pos="playlistCurrentTrack"
data-height="85%"
data-width="95%"
class="autoscroll index1 centered media-list">
</div>
</div>
<script type="text/javascript" src="js/fhem-tablet-ui.js" defer></script>
</div>


Beim Aufruf der Unterseite wird nun die Medialist erzeugt.
Der erneute Aufruf hat nun jedoch auch Auswirkungen auf die ursprüngliche Seite. Da bewirkt der Aufruf nun, dass das Cover doppelt generiert und ausgeblendet wird.

Der ursprünglich generierte Code für das Coverbild nach dem Laden der Seite sieht so aus:

<div data-type="image" data-device="DG.ku.MM.Squeezebox" data-get="coverarturl" data-size="100%" data-opacity="1" class="middle nocache"><img alt="img" src="http://www.mysqueezebox.com/public/imageproxy?u=https%3A%2F%2Fi.scdn.co%2Fimage%2F65ddbfe0908400f797bb2c90d619ebf3594e42fd&amp;h=700&amp;w=700" style="opacity: 1; height: auto; width: 100%; max-width: 100%;"></div>

In dem Moment, wo ich die Unterseite aufrufe und fhem-tablet-ui.js erneut geladen wird, wird daraus das hier:

<div data-type="image" data-device="DG.ku.MM.Squeezebox" data-get="coverarturl" data-size="100%" data-opacity="1" class="middle nocache" style="display: none;"><img alt="img" src="http://www.mysqueezebox.com/public/imageproxy?u=https%3A%2F%2Fi.scdn.co%2Fimage%2F65ddbfe0908400f797bb2c90d619ebf3594e42fd&amp;h=700&amp;w=700" style="opacity: 1; height: auto; width: 100%; max-width: 100%;"><img alt="img" src="http://www.mysqueezebox.com/public/imageproxy?u=https%3A%2F%2Fi.scdn.co%2Fimage%2F65ddbfe0908400f797bb2c90d619ebf3594e42fd&amp;h=700&amp;w=700" style="opacity: 1; height: auto; width: 100%; max-width: 100%;"></div>

Gehe ich nun auf die vorherige Seite zurück, ist das Cover (und einige andere Steuerelemente) weg.
Siehe angehängte Bilder.

Das Problem ist mir jetzt klar. Aber wie ich das lösen soll ... keine Ahnung

setstate

Die ganze fhem-tablet-ui.js muss nicht neu geladen werden. Es reicht, wenn man ftui.initWidgets(<selector>) ruft.
Das habe ich aber schon in der  fhem-tablet-ui.js so eingebaut

    f7.ftui.onPageInit('*', function (page) {
        ftui.log(1,page.name + ' initialized');
        ftui.initWidgets('[data-page="' + page.name + '"]');
    });


Dafür muss die Unterseite ein data-page Attribute haben


<div data-page="abouty" class="page">
...


Dieser Teil wird dann Widget-technisch initialisiert.

Standarduser

Könntest Du bitte nochmal etwas ins Detail gehen?

Ich hab jetzt den Script-Aufruf von der Unterseite entfernt und in my-app.js folgendes eingebaut:

myApp.onPageInit('mplayer_ku_playlist', function (page) {
ftui.initWidgets('[data-page="mplayer_ku_playlist"]');
});


Jetzt kommt die Playlist auf der Unterseite, aber nach 1x hin und her sieht die Ursprungsseite wieder komisch aus.

Standarduser

#9
Ich hab jetzt nochmal alle möglichen Kombinationen ausprobiert, die mir in den Sinn gekommen sind. Aber im Ergebnis ändert sich nichts.
Ich fasse mal zusammen:

Ich verwende folgenden Header:
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

<link rel="stylesheet" href="css/framework7.ios.min.css" />
<link rel="stylesheet" href="css/framework7.ios.colors.min.css" />
<link rel="stylesheet" href="css/my-app.css" />

<link rel="stylesheet" href="css/fhem-tablet-ui-f7.css" />
<link rel="stylesheet" href="styles_colors-ui.css" />

<script src="js/framework7.min.js" defer></script>
<script src="js/fhem-tablet-ui.js" defer></script>
<script src="js/my-app.js" defer></script>

<title>Home</title>
</head>


Wenn ich, wie im ersten Post erwähnt, den Code in fhem-tablet-ui.js nicht auskommentiere, kommt der Fehler
[Error] TypeError: undefined is not an object (evaluating 'l[0].f7View=o')
o (framework7.min.js:16:8345)
addView (framework7.min.js:16:19457)
(anonyme Funktion) (fhem-tablet-ui.js:33)
each (framework7.min.js:15:22542)
Globaler Code (fhem-tablet-ui.js:32)


Im Ergebnis funktioniert kein einziges FTUI-Widget.
Also sieht meine fhem-tablet-ui.js im Moment so aus:

...
// global Framework7:true, jQuery:true

"use strict";


// -------- Framework7---------
// https://framework7.io/docs/

if (typeof Framework7 === 'function') {
    var f7 = {
        ftui: new Framework7({
            animateNavBackIcon: true
        }),
        options: {
            dynamicNavbar: true,
            domCache: true
        },
        views: []
    };

/*
    Dom7('.view').each(function (index) {
        var view = f7.ftui.addView('#' + Dom7(this)[0].id, {
            dynamicNavbar: true
        });
        f7.ftui.views.push(view);

    });
*/

    f7.ftui.onPageInit('*', function (page) {
        ftui.log(1,page.name + ' initialized');
        ftui.initWidgets('[data-page="' + page.name + '"]');
    });
}
...

Ich hatte auch mal zum Spaß // global Framework7:true, jQuery:true wieder einkommentiert. Aber da kommt nur ein anderer Fehler

In der my-app.js steht folgender Code:

// Initialize app and store it to myApp variable for futher access to its methods
// See https://framework7.io/docs/init-app.html
var myApp = new Framework7({
sortable: 'false', // If you don't use sortable lists you can disable it for potentially better performance.
//panelLeftBreakpoint: '1000', // Minimal app width when left panel becomes always visible
swipePanel: 'left', // If you want to enable ability to open side panels with swipe you can pass here "left" (for left panel) or "right" (for right panel) or "both" (for both panels).
scrollTopOnStatusbarClick: 'true', // Set to true and each click on Status bar ("status-bar-overlay") will scroll currently active page to top
hideNavbarOnPageScroll: 'true', // Set to true and Navbar will be hidden automatically on page scroll down, and become visible on scroll up
hideToolbarOnPageScroll: 'true', // Set to true and Toolbar will be hidden automatically on page scroll down, and become visible on scroll up
hideTabbarOnPageScroll: 'true', // Set to true and Tab bar will be hidden automatically on page scroll down, and become visible on scroll up. Note that this is only for Tab Bar app layout, otherwise use hideToolbarOnPageScroll
showBarsOnPageScrollEnd: 'false', // Set to true to show hidden Navbar and Toolbar when scrolling reaches end of the page
showBarsOnPageScrollTop: 'false', // Set to false and bars will not become visible when you scroll page to top everytime. They will become visible only on the most top scroll position, in the beginning of the page
scrollTopOnNavbarClick: 'false', // Set to true and each click on Navbar's "center" element will scroll currently active page to top
});

// We need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;

// Add view
var mainView = myApp.addView('.view-main', {
// Because we want to use dynamic navbar, we need to enable it for this view:
dynamicNavbar: true
});

$$(document).on('pageInit', function(e) {
var page = e.detail.page;

ftui.initWidgets('[data-page="' + page.name + '"]');
});


Du hattest geschrieben, dass ftui.initWidgets... bereits in FTUI eingebaut ist. Hab ich auch gesehen, aber ohne eine weiteren expliziten Aufruf funktioniert es bei mir nicht. Die Widgets auf den Unterseiten werden dann nicht initialisiert.
Die Subpage besitzt die Seitendefinition <div data-page="..." class="page ...">, nun jedoch keinen eigenen Script-Aufruf mehr.

So, wie es jetzt ist, funktionieren alle Widgets auf der Hauptseite. Beim Aufruf von Unterseiten funktionieren diese auch, allerdings gibt es nach dem Aufruf der Unterseite Probleme mit den Widgets auf der Hauptseite.

Was ich auch probiert habe:
my-app.js komplett weglassen, fhem-tablet-ui.js wieder in Ursprungszustand versetzt. Funktioniert trotzdem nicht.

Framework7 ist bei mir Version 1.6.4, FTUI letzter Stand.

Standarduser

Hi setstate,

ich hänge immer noch an der gleichen Stelle.
Könntest Du mir mal Dein komplettes Projekt anhängen, damit ich mal vergleichen kann, wo die unterschiede sind und warum es bei Dir scheinbar läuft, bei mir jedoch nicht?

setstate

Wie gesagt: ich habe da noch nicht viel gemacht. Nur diese eine Seite mit einer einfachen Sub-Page für View-1. Alle anderen Views sind direkt in der Main-Page dabei.

fhem-tablet-ui-f7.css: wie oben
fhem-tablet-ui.js: Standard (wie in Github)
f7_main.html und f7_sub_mates.html: anbei

Standarduser

#12
Interessant ist, dass es bei Deinen Dateien scheinbar problemlos und auf Anhieb funktioniert. Ich werde mal den Aufbau der Dateien analysieren.

Nach weiteren Versuchen stelle ich fest, dass es wohl ein grundsätzliches Problem zu geben scheint, denn es treten die gleiche Effekte auf.

Ich habe Dein Layout genommen und direkt über <div class="content-block-title">Übersicht</div> im view-1 folgenden Block eingebaut:

<div class="center top-space-10px">
<div data-type="push"   class="inline" data-device="DG.ku.MM.Squeezebox" data-icon="fa-step-backward" data-on-color="mplayer-on" data-off-color="mplayer-off" data-set-on="prev" data-background-icon="-"></div>
<div data-type="switch" class="inline" data-device="DG.ku.MM.Squeezebox" data-get-off="!on" data-set-off="" data-get="playStatus" data-get-on="playing" data-set-on="play"  data-icon="fa-play"  data-background-icon="-" data-on-color="mplayer-on" data-off-color="mplayer-off"></div>
<div data-type="switch" class="inline" data-device="DG.ku.MM.Squeezebox" data-get-off="!on" data-set-off="" data-get="playStatus" data-get-on="paused"  data-set-on="pause" data-icon="fa-pause" data-background-icon="-" data-on-color="mplayer-on" data-off-color="mplayer-off"></div>
<div data-type="push"   class="inline" data-device="DG.ku.MM.Squeezebox" data-icon="fa-step-forward"  data-on-color="mplayer-on" data-off-color="mplayer-off" data-set-on="next" data-background-icon="-"></div>
</div>


Wenn ich dann die Seite für Anwesenheit (f7_sub_mates.html) aufrufe und zurückkehre, sind meine Buttons wieder weg. So sieht dann der Code aus:

<div class="center top-space-10px">
<div data-type="push" class="inline" data-device="DG.ku.MM.Squeezebox" data-icon="fa-step-backward" data-on-color="mplayer-on" data-off-color="mplayer-off" data-set-on="prev" data-background-icon="-" style="display: none;"><div class="famultibutton fa-stack fa-2x"><i id="bg" class="fa fa-stack-2x -" style="color: rgb(80, 80, 80);"></i><i id="fg" class="fa fa-stack-1x fa-step-backward"></i><div class="famultibutton fa-stack fa-2x fa-stack-1x" id="fg"><i id="bg" class="fa fa-stack-2x -" style="color: rgb(80, 80, 80);"></i><i id="fg" class="fa fa-stack-1x fa-step-backward"></i><div id="fg" class="fa-stack-1x"></div></div></div></div>
<div data-type="switch" class="inline" data-device="DG.ku.MM.Squeezebox" data-get-off="!on" data-set-off="" data-get="playStatus" data-get-on="playing" data-set-on="play" data-icon="fa-play" data-background-icon="-" data-on-color="mplayer-on" data-off-color="mplayer-off" style="display: none;"><div class="famultibutton fa-stack fa-2x"><i id="bg" class="fa fa-stack-2x -" style="color: rgb(80, 80, 80);"></i><i id="fg" class="fa fa-stack-1x fa-play"></i><div class="famultibutton fa-stack fa-2x fa-stack-1x" id="fg"><i id="bg" class="fa fa-stack-2x -" style="color: rgb(80, 80, 80);"></i><i id="fg" class="fa fa-stack-1x fa-play"></i><div id="fg" class="fa-stack-1x"></div></div></div></div>
<div data-type="switch" class="inline" data-device="DG.ku.MM.Squeezebox" data-get-off="!on" data-set-off="" data-get="playStatus" data-get-on="paused" data-set-on="pause" data-icon="fa-pause" data-background-icon="-" data-on-color="mplayer-on" data-off-color="mplayer-off" style="display: none;"><div class="famultibutton fa-stack fa-2x"><i id="bg" class="fa fa-stack-2x -" style="color: rgb(80, 80, 80);"></i><i id="fg" class="fa fa-stack-1x fa-pause"></i><div class="famultibutton fa-stack fa-2x fa-stack-1x" id="fg"><i id="bg" class="fa fa-stack-2x -" style="color: rgb(80, 80, 80);"></i><i id="fg" class="fa fa-stack-1x fa-pause"></i><div id="fg" class="fa-stack-1x"></div></div></div></div>
<div data-type="push" class="inline" data-device="DG.ku.MM.Squeezebox" data-icon="fa-step-forward" data-on-color="mplayer-on" data-off-color="mplayer-off" data-set-on="next" data-background-icon="-" style="display: none;"><div class="famultibutton fa-stack fa-2x"><i id="bg" class="fa fa-stack-2x -" style="color: rgb(80, 80, 80);"></i><i id="fg" class="fa fa-stack-1x fa-step-forward"></i><div class="famultibutton fa-stack fa-2x fa-stack-1x" id="fg"><i id="bg" class="fa fa-stack-2x -" style="color: rgb(80, 80, 80);"></i><i id="fg" class="fa fa-stack-1x fa-step-forward"></i><div id="fg" class="fa-stack-1x"></div></div></div></div>
</div>


Man beachte, dass hier scheinbar die Push- und Switch-Widgets ein zweites mal erzeugt und jedes Widget per display: none; ausgeblendet wird.

---

Der Code in der fhem-tablet-ui.js, den ich bei meiner Variante auskommentieren musste, scheint damit garnichts zu tun zu haben. Ich vermute dass es daher kommt, dass ich meinen Seitenaufbau ganz anders gestaltet habe. Du hast für jeden Tab-Link in in der Tab-Bar ein view/page erzeugt, während ich nur ein view/page habe und stattdessen mit dem Tab-Wrapper gearbeitet habe.

Also zwei getrennte Dinge.

takaze

Ich hab mich in letzter Zeit auch mal verstärkt mit der Thematik F7 + FTUI beschäftigt.
Die kleine Starthilfe weiter oben von setstate hat mir dabei wirklich sehr geholfen, Danke schonmal dafür :)

Allerdings bin ich auch recht schnell auf ein Problem gestoßen, welches ich aufgrund mangelnder coding Skills offenbar nicht lösen kann  ::)

Ausgehend von den Dateien, die setstate bereitgestellt, habe ich einfach ein symbol-widget auf die erste seite hinzugefügt. Wird jetzt die Subpage aufgerufen und anschließend wieder verlassen, wird offenbar das Widget erneut erstellt (?). Das würde sich mit dem Fehlerbild von Standarduser decken, allerdings denke ich, dass hier die Widgets "verschwinden", da einfach nicht genug platz ist und diese somit von der Seite rutschen. Da in meinem Fall genug Platz ist, wird das neue einfach darüber erstellt. Ist so aber glaube ich auch nicht im Sinne des Erfinders :P

Gibt es den mittlerweile jemanden der sich schon näher mit der Sache beschäftigt hat?

Grüße,
Florian
RPi 3B, Add-On Board mit 1.8" TFT LCD, FHEM V5.8, CULFW v1.65 RPIAddOn_CSM, Jeelink v3, Selbstbau CUL433 MHz (signalduino), z-Wave (Fibaro), 8'' WIN10 Wand-Infoboard mit FTUI

setstate

Sowas habe ich noch garnicht ausprobiert, Symbol Widget einzusetzen. Mein Ziel war es, nur die F7 Controls zu benutzen und mit dem data-type="html" zu beeinflussen.

Im jetzigen Stand wird nicht nur die Subpage initiiert, sondern durch einen falschen Filter die ganze Seite neu. Dadurch zerhaut es die Symbol-Widgets so.

Abhilfe schafft die Korrektur des Context-Selectors beim initWidgets

them-tablet-ui.js Zeile 40 muss so geändert werden:

ftui.initWidgets('.page[data-page="' + page.name + '"]');

Standarduser

#15
Hi Setstate,

ich hab mal wieder etwas an meiner F7-UI gearbeitet und heute einen Switch und eine Push eingebaut.

Der in F7 am Widget hinterlegte Befehl wird korrekt gesendet und kommt auch bei FHEM an. Jedoch scheint die Rückmeldung von FHEM nicht in der F7-UI anzukommen. Weder beim Push, noch beim Switch gibt es einen Farbumschlag, wenn das Device eingeschaltet ist.
Füge ich beide in der normalen UI ein, klappt es bestens. Das Ganze lässt sich auch mit jedem beliebigen Dummy nachvollziehen.

Könntest Du Dir das bitte einmal anschauen? Vielen Dank.

Code der Widgets

<div data-type="push"
data-device="NW.DiskStation.WOL"
data-get="STATE"
data-get-on="on"
data-get-off="!on"
data-on-color="orange"
data-on-background-color="orange"
data-icon="fa-server"
</div>

<div data-type="switch"
data-device="NW.DiskStation.WOL"
data-get="STATE"
data-get-on="on"
data-get-off="!on"
data-on-color="orange"
data-on-background-color="orange"
data-icon="fa-server"
</div>



Gesamter Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<link rel="stylesheet" href="css/fhem-tablet-ui-f7.css" />
<link rel="stylesheet" href="../lib/font-awesome.min.css" />
<link rel="stylesheet" href="css/framework7.ios.min.css">
<link rel="stylesheet" href="css/framework7.ios.colors.min.css">

<link rel="stylesheet" href="css/my-app.css" />
<link rel="stylesheet" href="styles_colors-ui.css" />

<script src="js/framework7.min.js" defer></script>
<script src="../js/fhem-tablet-ui.js" defer></script>
<!--script src="js/my-app.js" defer></script-->

<meta name="longpoll" content="1">
<meta name="longpoll_maxage" content="240">
<meta name="debug" content="1">

<title>Home</title>
</head>

<body class="layout-dark theme-orange">
<div class="statusbar-overlay"></div>

<!-- Sidepanels -->
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<h1>Hauptmenü</h1>
<p><a href="index.html" class="close-panel">Start</a></p>
<p><a href="content_rooms.html" class="close-panel">Räume</a></p>
</div>
</div>

<!-- Ansichten -->
<div class="views tabs toolbar-through">
<div id="view-1" class="view view-main tab active">

<!-- Navigationsleiste oben -->
<div class="navbar">
<div class="navbar-inner">
<div class="left"><a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a></div>
<div class="center sliding">Übersicht</div>
<div class="right"><a href="#" class="link icon-only"><i class="icon demo-icon"></i></a></div>
<!-- <div class="right"><a href="#" data-panel="right" class="link icon-only open-panel"><i class="icon icon-bars"></i></a></div> -->
</div>
</div>

<!-- Seiten -->
<div class="pages navbar-through">
<div data-page="index-1" class="page">

<!-- Navigationsleiste unten -->
<div class="toolbar tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#tab1" class="tab-link active"> <i class="icon fa fa-home"><span class="badge bg-red" data-type="html" data-content="family:residentsTotalPresent"  data-class="family:residentsTotalPresent" data-map-class='{"0":"hide", ".*":"show"}'>0</span></i><span class="tabbar-label">Übersicht</span></a>
<a href="#tab2" class="tab-link"><i class="icon fa fa-music"></i><span class="tabbar-label">Musik</span></a>
<a href="#tab3" class="tab-link"><i class="icon fa fa-lightbulb-o"></i><span class="tabbar-label">Licht</span></a>
<a href="#tab4" class="tab-link"><i class="icon fa fa-sliders"></i><span class="tabbar-label">Einstellungen</span></a>
</div>
</div>

<!-- Seiteninhalte -->
<div class="page-content">

<!-- Tabs, tabs wrapper -->
<div class="tabs">

<!-- Tab 1: Übersicht -->
<div id="tab1" class="tab active">
TAB 1
</div>

<!-- Tab 2: Musik -->
<div id="tab2" class="tab">
TAB 2
</div>

<!-- Tab 3: Licht -->
<div id="tab3" class="tab">
TAB 3
</div>

<!-- Tab 4: Einstellungen -->
<div id="tab4" class="tab">

<div class="content-block-title">Netzwerk / WOL</div>
<div class="content-block">
<div class="content-block-inner">

<!-- DiskStation WOL -->
<div data-type="push"
data-device="NW.DiskStation.WOL"
data-get="STATE"
data-get-on="on"
data-get-off="!on"
data-on-color="orange"
data-on-background-color="orange"
data-icon="fa-server"
</div>

</div>
</div>

<div class="content-block-title">Netzwerk / WOL</div>
<div class="content-block">
<div class="content-block-inner">

<!-- DiskStation WOL -->
<div data-type="switch"
data-device="NW.DiskStation.WOL"
data-get="STATE"
data-get-on="on"
data-get-off="!on"
data-on-color="orange"
data-on-background-color="orange"
data-icon="fa-server"
</div>

</div>
</div>


</div>

</div>

</div>

</div>
</div>
</div>
</div>
</body>

</html>


--------------------------------------------------------------------------------------------
EDIT:

Ich nehme das zurück. Habe gerade eben das Update von gestern (?) eingespielt. Jetzt funktioniert es.
Allerdings wird das Widget nur aktualisiert, wenn ich die Seite neu lade.

Könntest Du Dir das stattdessen mal anschauen?  ;)

--------------------------------------------------------------------------------------------
EDIT_2:

Wie ich gerade Festellen musste, werden bei einem Refresh überhaupt keine Daten aktualisiert.

setstate

Bei deinen <div data-type="... fehlt immer die abschließende ">"

Standarduser

Danke für den Hinweis. Das ist wohl irgendwie durch das viele Probieren und Testen gekommen.

Der Zustand ist jetzt folgender:

- Push und Switch setzen ihre Befehle ab, die auch in FHEM ankommen
- Weder Push noch Switch reagieren auf Zustandsänderungen
- Exakt der gleiche Code funktioniert ohne F7 genau so, wie er soll

Die Console in Chrome wirft auch einen Fehler. Vielleicht kannst Du damit etwas anfangen?


Base dir: ../
fhem-tablet-ui.js:2167 jQuery dynamically loaded
jquery.min.js:2 jQuery.Deferred exception: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'. TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at o (http://192.168.243.20:8083/fhem/ftui/lib/swiper.jquery.min.js:15:852)
    at a.x.initObservers (http://192.168.243.20:8083/fhem/ftui/lib/swiper.jquery.min.js:16:14522)
    at a.x.init (http://192.168.243.20:8083/fhem/ftui/lib/swiper.jquery.min.js:17:17056)
    at new a (http://192.168.243.20:8083/fhem/ftui/lib/swiper.jquery.min.js:17:19212)
    at Object.init_ui (http://192.168.243.20:8083/fhem/ftui/js/widget_swiper.js:68:22)
    at HTMLDivElement.<anonymous> (http://192.168.243.20:8083/fhem/ftui/js/fhem-tablet-ui.js:191:23)
    at Function.each (http://192.168.243.20:8083/fhem/ftui/lib/jquery.min.js:2:2815)
    at r.fn.init.each (http://192.168.243.20:8083/fhem/ftui/lib/jquery.min.js:2:1003)
    at Object.init (http://192.168.243.20:8083/fhem/ftui/js/fhem-tablet-ui.js:188:21)
    at http://192.168.243.20:8083/fhem/ftui/js/fhem-tablet-ui.js:1379:36 undefined
r.Deferred.exceptionHook @ jquery.min.js:2
DevTools failed to parse SourceMap: http://192.168.243.20:8083/fhem/ftui/lib/maps/swiper.jquery.min.js.map
fhem-tablet-ui.js:837 get jsonlist2: 18.476806640625ms
fhem-tablet-ui.js:922 read jsonlist2: 0.546875ms
fhem-tablet-ui.js:837 get jsonlist2: 17.804931640625ms
fhem-tablet-ui.js:922 read jsonlist2: 0.278076171875ms


Mich wundert, dass hier immer der Swiper auftaucht. Den hab ich garnicht verwendet.

Außerdem hab ich folgende Beobachtung gemacht (Chrome -> Network)

Auf der normalen FTUI-Seite sieht das Longpoll-Paket (nennt man das so?) so aus:
{,...}
Arg:
"WEB,NW.DiskStation.WOL,dummy,DG.wz.HZ.Heizungsventil_Clima,dummy3,DG.ku.MM.Squeezebox,dummy2,WZ.Fernseher,DG.wz.HZ.Heizungsventil,WZ.Deckenventilator,dummy1,EG.wz.SW.AllesAus,FHEM.Heartbeat STATE longpoll active desired-temp measured-temp controlMode hue volume ValvePosition batteryLevel playStatus coverarturl currentTitle currentArtist"
Results: [{Name: "WEB", Internals: {STATE: "Initialized"}, Readings: {}, Attributes: {longpoll: "1"}},...]
0:{Name: "WEB", Internals: {STATE: "Initialized"}, Readings: {}, Attributes: {longpoll: "1"}}
1:{Name: "NW.DiskStation.WOL", Internals: {STATE: "on"},...}
2:{Name: "dummy", Internals: {STATE: "off"}, Readings: {}, Attributes: {}}
3:{Name: "DG.wz.HZ.Heizungsventil_Clima", Internals: {STATE: "T: 23.3 °C Tg: 22.5 °C V: 51 % / auto"},...}
4:{Name: "dummy3", Internals: {STATE: "hue 27775"}, Readings: {}, Attributes: {}}
5:{Name: "DG.ku.MM.Squeezebox", Internals: {STATE: "on"},...}
6:{Name: "dummy2", Internals: {STATE: "off"},...}
7:{Name: "WZ.Fernseher", Internals: {STATE: "disconnected"}, Readings: {}, Attributes: {}}
8:{Name: "DG.wz.HZ.Heizungsventil", Internals: {STATE: "CMDs_done"},...}
9:{Name: "WZ.Deckenventilator", Internals: {STATE: "0"}, Readings: {}, Attributes: {}}
10:{Name: "FHEM.Heartbeat", Internals: {STATE: "2"}, Readings: {}, Attributes: {}}
totalResultsReturned:11


Hier ist etwas mehr eingebaut, die relevanten Informationen sind 1 und 2.

Auf der F7-Seite kommt einfach nur das hier:
{Arg: "undefined", Results: [], totalResultsReturned: 0}
Arg:"undefined"
Results:[]
totalResultsReturned:0


Ich habe bei beiden folgenden Code verwendet:
<div data-type="push"
data-device="NW.DiskStation.WOL"
data-get="active"
data-get-on="on"
data-get-off="!on"
data-on-color="orange"
data-on-background-color="orange"
data-icon="fa-server">
</div>


<div data-type="switch"
data-device="dummy"
data-get="STATE"
data-get-on="on"
data-get-off="!on"
data-on-color="orange"
data-on-background-color="orange"
data-icon="fa-server">
</div>

setstate

warum widget_swiper.js initialisiert wird, kann ich mir auch nicht erklären. Ist es vielleicht auf einer Unterseite in Benutzung?

Der Fehler muss aber erst einmal weg, bevor wir weitersuchen



Standarduser

Ich hab nochmal den gesamten Code durchsucht und nun doch noch einen swiper gefunden.

<div data-type="swiper" data-device="dummy"></div>

Das war der Übeltäter, wobei ich aber nicht erkennen kann, wo das Problem liegen soll. Klar fehlt da was, aber dass dadurch der ganze Rest nicht mehr funktioniert?
Wenn ich den in die normale UI einbaue, ist das auch kein Problem, wenngleich die selbe Meldung erscheint.

Wenn ich den entferne, funktioniert es - Push und Switch zeigen eine Rückmeldung.
Danke für den Denkanstoß.

--------------------------------------------------------------------

Jetzt hab ich noch eine andere Sache festgestellt.

Wenn Code per Template eingebunden wird, dann wird beim Laden der Seite alles korrekt angezeigt. Wenn ich dann eine andere Seite (nicht Tab, siehe im Code den Abschnitt "Sidepanels" unmittelbar nach dem <body>-tag) aufrufe und anschließend zur Startseite zurück wechsle, wird das, was zuvor per Template geladen wurde, nicht mehr angezeigt. Der HTML-Code fehlt dann auch an dieser Stelle.
Wenn der Code aus dem Template direkt eingebaut wird, gibt es dieses Problem nicht.

Es scheint auch nicht wirklich etwas auszumachen, wenn etwas in der my-app.js steht, denn die ist ja im moment auskommentiert.

Müssen die Seiten in einer speziellen Form initialisiert werden oder werden Templates hier einfach nicht unterstützt?

lewej

Zitat von: setstate am 03 Juli 2017, 20:00:12
Klar mach ich.
Ich bin aber noch nicht weit damit :-(
Hier der Stand

Hallo setstate,

könntest du noch js und css files bereit stellen?


<link rel="stylesheet" href="lib/framework7/framework7.ios.min.css">
    <link rel="stylesheet" href="lib/framework7/framework7.ios.colors.min.css">
    <link rel="stylesheet" href="css/fhem-tablet-ui-f7.css" />

    <script src="lib/framework7/framework7.min.js" defer></script>
    <script src="js/fhem-tablet-ui.js" defer></script>


Bzw, wo finde ich diese, falls die in deinem github sind?

Gruß
lewej

lewej

Zitat von: lewej am 27 September 2017, 21:02:12
Hallo setstate,

könntest du noch js und css files bereit stellen?


<link rel="stylesheet" href="lib/framework7/framework7.ios.min.css">
    <link rel="stylesheet" href="lib/framework7/framework7.ios.colors.min.css">
    <link rel="stylesheet" href="css/fhem-tablet-ui-f7.css" />

    <script src="lib/framework7/framework7.min.js" defer></script>
    <script src="js/fhem-tablet-ui.js" defer></script>


Bzw, wo finde ich diese, falls die in deinem github sind?

Gruß
lewej

Hab es gefunden, falls es jemand auch sucht, es liegt unter:
Framework7-2.0.0-beta.8.zip\Framework7-2.0.0-beta.8\dist\

Standarduser

Framework7 kannst du auch auf der offiziellen Seite laden: framework7.io

lewej

Hallo,

ich hab hier einige HUE Lampen und würde auch gerne einen Color Picker einbauen, geht das auch, hat jemand einen Schnippsel für mich?

Gruß
lewej

Standarduser

Du kannst die Schnipsel aus dem Wiki verwenden.
https://wiki.fhem.de/wiki/FTUI_Widget_Colorwheel

<div data-type="colorwheel"
     data-device="HUEDevice3"
     data-get="rgb"
     data-set="rgb"></div>


Im Prinzip funktionieren so gut wie alle Widgets genau so, wie sonst auch, nur dass das Gerüst rings herum ein anderes ist.
Nur Templates machen derzeit Probleme.

lewej

Hallo Zusammen,

hat jemand schon "left content goes here" als Menü bestückt. Ich hab irgendwie keine Idee, wie ich das angehen soll.

Hat jemand ein Beispiel?

Gruß
lewej

Standarduser

Ich nutze das linke Menü, um zwischen den Seiten zu wechseln.

<!-- Sidepanels -->
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<h1>Hauptmenü</h1>
<p><a href="index.html" class="close-panel big">Start</a></p>
<p><a href="content_rooms.html" class="close-panel big">Räume</a></p>
<p><a href="content_system.html" class="close-panel big">System</a></p>
</div>
</div>


Mein Strukturansatz sieht im Moment so aus:
Über das linke Seitenmenü rufe ich die Hauptseiten auf, wobei die erste Seite eine Übersichtsseite mit den wichtigsten Funktionen ist. Die darauf folgenden Seiten entstehen nach und nach.
Jede Seite ist dann in Tabs unterteilt, die die einzelnen Inhalte bringen. Die Tabs werden über die Toolbar umgeschaltet.
Ob das auf lange Zeit mit den Räumen so funktioniert, weiß ich noch nicht. Vielleicht mache ich dann auch Hauptseiten je Raum. Ist derzeit alles noch Baustelle.

Ich lass Dir mal etwas Code da:

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<link rel="apple-touch-icon" sizes="16x16" href="../icon/apple-touch-icon-16x16.png" />
<link rel="apple-touch-icon" sizes="20x20" href="../icon/apple-touch-icon-20x20.png" />
<link rel="apple-touch-icon" sizes="29x29" href="../icon/apple-touch-icon-29x29.png" />
<link rel="apple-touch-icon" sizes="32x32" href="../icon/apple-touch-icon-32x32.png" />
<link rel="apple-touch-icon" sizes="40x40" href="../icon/apple-touch-icon-40x40.png" />
<link rel="apple-touch-icon" sizes="48x48" href="../icon/apple-touch-icon-48x48.png" />
<link rel="apple-touch-icon" sizes="50x50" href="../icon/apple-touch-icon-50x50.png" />
<link rel="apple-touch-icon" sizes="55x55" href="../icon/apple-touch-icon-55x55.png" />
<link rel="apple-touch-icon" sizes="57x57" href="../icon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="58x58" href="../icon/apple-touch-icon-58x58.png" />
<link rel="apple-touch-icon" sizes="64x64" href="../icon/apple-touch-icon-64x64.png" />
<link rel="apple-touch-icon" sizes="72x72" href="../icon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="../icon/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="80x80" href="../icon/apple-touch-icon-80x80.png" />
<link rel="apple-touch-icon" sizes="87x87" href="../icon/apple-touch-icon-87x87.png" />
<link rel="apple-touch-icon" sizes="88x88" href="../icon/apple-touch-icon-88x88.png" />
<link rel="apple-touch-icon" sizes="100x100" href="../icon/apple-touch-icon-100x100.png" />
<link rel="apple-touch-icon" sizes="114x114" href="../icon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="../icon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="128x128" href="../icon/apple-touch-icon-128x128.png" />
<link rel="apple-touch-icon" sizes="144x144" href="../icon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="../icon/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="167x167" href="../icon/apple-touch-icon-167x167.png" />
<link rel="apple-touch-icon" sizes="172x172" href="../icon/apple-touch-icon-172x172.png" />
<link rel="apple-touch-icon" sizes="180x180" href="../icon/apple-touch-icon-180x180.png" />
<link rel="apple-touch-icon" sizes="196x196" href="../icon/apple-touch-icon-196x196.png" />
<link rel="apple-touch-icon" sizes="256x256" href="../icon/apple-touch-icon-256x256.png" />
<link rel="apple-touch-icon" sizes="512x512" href="../icon/apple-touch-icon-512x512.png" />
<link rel="apple-touch-icon" sizes="1024x1024" href="../icon/apple-touch-icon-1024x1024.png" />

<meta name="longpoll" content="1">
<meta name="longpoll_maxage" content="240">

<link rel="stylesheet" href="css/fhem-tablet-ui-f7.css" />
<link rel="stylesheet" href="../lib/font-awesome.min.css" />
<link rel="stylesheet" href="css/framework7.ios.min.css">
<link rel="stylesheet" href="css/framework7.ios.colors.min.css">

<link rel="stylesheet" href="css/my-app.css" />
<link rel="stylesheet" href="styles_colors-ui.css" />

<script src="js/framework7.min.js" defer></script>
<script src="../js/fhem-tablet-ui.js" defer></script>
<script src="js/my-app.js" defer></script>

<title>Home</title>
</head>

<body class="layout-dark theme-orange">
<div class="statusbar-overlay"></div>

<!-- Sidepanels -->
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">
<div class="content-block">
<h1>Hauptmenü</h1>
<p><a href="index.html" class="close-panel big">Start</a></p>
<p><a href="content_rooms.html" class="close-panel big">Räume</a></p>
<p><a href="content_system.html" class="close-panel big">System</a></p>
</div>
</div>

<!--div class="panel panel-right panel-cover">
<div class="content-block">
<p>Right panel content goes here</p>
</div>
</div-->

<!-- Ansichten -->
<div class="views tabs toolbar-through">
<div id="view-1" class="view view-main tab active">

<!-- Navigationsleiste oben -->
<div class="navbar">
<div class="navbar-inner">
<div class="left"><a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a></div>
<div class="center sliding">Übersicht</div>
<div class="right"><a href="#" class="link icon-only"><i class="icon demo-icon"></i></a></div>
<!-- <div class="right"><a href="#" data-panel="right" class="link icon-only open-panel"><i class="icon icon-bars"></i></a></div> -->
</div>
</div>

<!-- Seiten -->
<div class="pages navbar-through">
<div data-page="index-1" class="page">

<!-- Navigationsleiste unten -->
<div class="toolbar tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#tab1" class="tab-link active"> <i class="icon fa fa-home"><span class="badge bg-red" data-type="html" data-content="family:residentsTotalPresent"  data-class="family:residentsTotalPresent" data-map-class='{"0":"hide", ".*":"show"}'>0</span></i><span class="tabbar-label">Übersicht</span></a>
<a href="#tab2" class="tab-link"><i class="icon fa fa-music"></i><span class="tabbar-label">Musik</span></a>
<a href="#tab3" class="tab-link"><i class="icon fa fa-lightbulb-o"></i><span class="tabbar-label">Licht</span></a>
<a href="#tab4" class="tab-link"><i class="icon fa fa-sliders"></i><span class="tabbar-label">Einstellungen</span></a>
</div>
</div>

<!-- Seiteninhalte -->
<div class="page-content">

<!-- Tabs, tabs wrapper -->
<div class="tabs">

<!-- Tab 1: Übersicht -->
<div id="tab1" class="tab active">

<div class="content-block-title">Übersicht</div>

<div data-template="template_weather_small.html" data-parameter='{"§device":"AU.xx.WE.WeatherUnderground.INORDERS46"}' class="center"></div>

<div class="content-block-title">Some other stuff</div>
<div class="content-block">
<div class="content-block-inner">
<p>This is tab 1 content</p>
...
</div>
</div>

<div data-type="switch" data-device="dummy"></div>
<div data-type="thermostat" data-device="dummy"></div>

<div class="card">
<div class="card-content">
<div class="list-block media-list">
<ul>
<li>
<a href="f7_sub_mates.html" class="item-link item-content">
<div class="item-media"><i class="icon fa fa-fw fa-user-circle-o color-blue"></i></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Anwesenheit</div>
<div class="item-after" data-type="html" data-content="family:STATE" data-map-content='{"home":"Home","absent":"Away"}'>STATE</div>
</div>
<div class="item-subtitle" data-type="html" data-content="family:residentsHomeNames">residentsHomeNames</div>

</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-media"><i class="icon fa fa-fw ftui-window color-blue"></i></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Fenster</div>
<div class="item-after" data-type="html" data-content="AllWindows:STATE">STATE</div>
</div>
<div class="item-subtitle" data-type="html" data-content="AllWindows:text">text</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-media"><i class="icon fa fa-fw fa-thermometer color-blue"></i></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Temperatur</div>
<div class="item-after" data-type="html" data-content="THSensorWZ:temperature" data-unit="°C">temperature</div>
</div>
<div class="item-subtitle" data-type="html" data-content="THSensorWZ:humidity" data-pre-text="Humidity: " data-unit="%">humidity</div>

</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-media"><i class="icon fa fa-fw fa-lightbulb-o color-blue"></i></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Licht</div>
<div class="item-after" data-type="html" data-content="AllLamps:STATE">temperature</div>
</div>


</div>
</a>
</li>
</ul>
</div>
</div>
</div>

</div>

<!-- Tab 2: Musik -->
<div id="tab2" class="tab">

<!-- Cover -->
<div data-type="image" data-device="DG.ku.MM.Squeezebox" data-get="coverarturl" data-size="100%" data-opacity="1" class="middle nocache"></div>

<!-- now playing -->
<div data-type="label" data-device="DG.ku.MM.Squeezebox" data-get="currentTitle"  data-pre-text="&nbsp;" data-post-text="&nbsp;" class="center big top-space-10px"></div>
<div data-type="label" data-device="DG.ku.MM.Squeezebox" data-get="currentArtist" data-pre-text="&nbsp;" data-post-text="&nbsp;" class="center thin"></div>

<!-- Progress -->
<div class="center top-space-10px">
<div data-type="label" data-device="DG.ku.MM.Squeezebox" data-get="currentTrackPosition" data-color="mplayer-progress" data-substitution="toMinFromSec()" class="thin inline"></div>
<div data-type="level" data-device="DG.ku.MM.Squeezebox" data-get="currentTrackPosition" data-color="mplayer-progress" data-max="duration" data-width="60%" data-timer-state="DG.ku.MM.Squeezebox:STATE" data-timer-state-on="play" data-timer-state-off="!on" data-timer-step="1" data-timer-interval="1000" data-margin="15px" class="horizontal inline"></div>
<div data-type="label" data-device="DG.ku.MM.Squeezebox" data-get="duration"             data-color="mplayer-off"      data-substitution="toMinFromSec()" class="thin inline"></div>
</div>

<!-- Player Controls -->
<div class="center top-space-10px">
<div data-type="push"   class="inline" data-device="DG.ku.MM.Squeezebox" data-icon="fa-step-backward" data-on-color="mplayer-on" data-off-color="mplayer-off" data-set-on="prev" data-background-icon="-"></div>
<div data-type="switch" class="inline" data-device="DG.ku.MM.Squeezebox" data-get-off="!on" data-set-off="" data-get="playStatus" data-get-on="playing" data-set-on="play"  data-icon="fa-play"  data-background-icon="-" data-on-color="mplayer-on" data-off-color="mplayer-off"></div>
<div data-type="switch" class="inline" data-device="DG.ku.MM.Squeezebox" data-get-off="!on" data-set-off="" data-get="playStatus" data-get-on="paused"  data-set-on="pause" data-icon="fa-pause" data-background-icon="-" data-on-color="mplayer-on" data-off-color="mplayer-off"></div>
<div data-type="push"   class="inline" data-device="DG.ku.MM.Squeezebox" data-icon="fa-step-forward"  data-on-color="mplayer-on" data-off-color="mplayer-off" data-set-on="next" data-background-icon="-"></div>
</div>

<!-- Volume -->
<div id="mp-volume">
<div class="middle">
<div data-type="push"   class="inline small"            data-device="DG.ku.MM.Squeezebox" data-set-on="volumeDown" data-icon="fa-volume-down"  data-on-color="mplayer-on" data-off-color="mplayer-off" data-background-icon="none"></div>
<div data-type="slider" class="inline horizontal mini" data-device="DG.ku.MM.Squeezebox" data-width="200" data-get="volume" data-set="volume" data-color="mplayer-progress" data-touch-diameter="30"></div>
<div data-type="push"   class="inline small"            data-device="DG.ku.MM.Squeezebox" data-set-on="volumeUp"   data-icon="fa-volume-up"    data-on-color="mplayer-on" data-off-color="mplayer-off" data-background-icon="none"></div>
</div>

</div>

<!-- Wiedergabeliste, Playliste, Favoriten -->
<div class="content-block-title">Musik</div>
<div class="list-block">
<ul>
<li>
<a href="mplayer_ku_playlist.html" class="item-link">
<div class="item-content">
<div class="item-media"><i class="icon fa fa-play"></i></div>
<div class="item-inner">
<div class="item-title">aktuelle Wiedergabeliste</div>
</div>
</div>
</a>
</li>
<li>
<a href="z_index_sub.html" class="item-link">
<div class="item-content">
<div class="item-media"><i class="icon fa fa-list-ol"></i></div>
<div class="item-inner">
<div class="item-title">Playlisten</div>
</div>
</div>
</a>
</li>
<li>
<a href="z_index_sub.html" class="item-link">
<div class="item-content">
<div class="item-media"><i class="icon fa fa-heart-o"></i></div>
<div class="item-inner">
<div class="item-title">Favoriten</div>
</div>
</div>
</a>
</li>
</ul>
</div>

<!-- Synchronisation -->
<div class="content-block-title">Multiroom-Audio</div>
<div class="list-block">
<ul>
<li>
<a href="z_index_sub.html" class="item-link">
<div class="item-content">
<div class="item-media"><i class="icon fa fa-link"></i></div>
<div class="item-inner">
<div class="item-title">Synchronisieren</div>
</div>
</div>
</a>
</li>
</ul>
</div>

</div>

<!-- Tab 3: Licht -->
<div id="tab3" class="tab">
TAB 3
</div>

<!-- Tab 4: Einstellungen -->
<div id="tab4" class="tab">
TAB 4
</div>

</div>

</div>

</div>
</div>
</div>
</div>
</body>

</html>


content_rooms.html
<!-- Navigationsleiste oben -->
<div class="navbar">
<div class="navbar-inner">
<div class="left"><a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a></div>
<div class="center">Räume</div>
<div class="right"><a href="#" class="link icon-only"><i class="icon demo-icon"></i></a></div>
<!-- <div class="right"><a href="#" data-panel="right" class="link icon-only open-panel"><i class="icon icon-bars"></i></a></div> -->
</div>
</div>

<!-- Seite -->
<div class="pages">
<div data-page="content_rooms" class="page navbar-fixed toolbar-fixed">

<!-- Navigationsleiste unten -->
<div class="toolbar tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#tab_wz" class="tab-link active"><i class="icon fa fa-television"></i><span class="tabbar-label">Wohnzimmer</span></a>
<a href="#tab_ku" class="tab-link"><i class="icon fa fa-coffee"></i><span class="tabbar-label">Küche</span></a>
<a href="#tab_sz" class="tab-link"><i class="icon fa fa-bed"></i><span class="tabbar-label">Schlafzimmer</span></a>
<a href="#tab_bz" class="tab-link"><i class="icon fa fa-bath"></i><span class="tabbar-label">Badezimmer</span></a>
</div>
</div>

<!-- Seiteninhalte -->
<div class="page-content">

<!-- Tabs, tabs wrapper -->
<div class="tabs">

<!-- Tab 1: Wohnzimmer -->
<div id="tab_wz" class="tab active">
<div class="content-block">
</div>

<!-- Licht -->
<div class="content-block-title">Licht</div>
<div class="list-block media-list">
<ul>

<!-- Deckenlicht Couch -->
<li><div class="item-content"><div class="item-media">
<i class="icon fa fa-fw fa-lightbulb-o"></i></div><div class="item-inner"><div class="item-title-row">
<div><div class="item-title">Deckenlicht</div><div class="item-subtitle">Couch</div></div><div class="item-after">

<div data-type="checkbox"
data-device="dummy"
data-get="STATE"
data-get-on="on"
data-get-off="!on"
class="">
</div>

</div>
</div></div></div>
</li>

<!-- Deckenlicht Esstisch -->
<li><div class="item-content"><div class="item-media">
<i class="icon fa fa-fw fa-lightbulb-o"></i></div><div class="item-inner"><div class="item-title-row">
<div><div class="item-title">Deckenlicht</div><div class="item-subtitle">Esstisch</div></div><div class="item-after">

<div data-type="checkbox"
data-device="dummy"
data-get="STATE"
data-get-on="on"
data-get-off="!on"
class="">
</div>

</div>
</div></div></div>
</li>

<!-- Ambiente -->
<li><div class="item-content"><div class="item-media">
<i class="icon fa fa-fw fa-lightbulb-o"></i></div><div class="item-inner"><div class="item-title-row">
<div><div class="item-title">Ambientebeleuchtung</div><div class="item-subtitle">Couch</div></div><div class="item-after">

<div data-type="checkbox"
data-device="dummy"
data-get="STATE"
data-get-on="on"
data-get-off="!on"
class="small">
</div>

</div>
</div></div></div>
</li>

</ul>
</div>





<!-- Rollläden -->
<div class="content-block-title">Rollläden</div>
<div class="list-block media-list">
<ul>

<!-- Rollo links -->
<li>
<div class="item-content">
<div class="item-media">
<i class="icon fa fa-fw fa-lightbulb-o"></i>
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Terrassentür links</div>
<div class="item-after"><div>test</div></div>
</div>
<div data-type="slider" class="inline horizontal mini top-space" data-device="DG.ku.MM.Squeezebox" data-width="100%" data-get="volume" data-set="volume" data-color="mplayer-progress" data-handle-diameter="15"></div>
</div>
</div>
</li>

<!-- Rollo mitte -->
<li>
<div class="item-content">
<div class="item-media">
<i class="icon fa fa-fw fa-lightbulb-o"></i>
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Terrassentür mitte</div>
<div class="item-after"><div>test</div></div>
</div>
<div data-type="slider" class="inline horizontal mini top-space" data-device="DG.ku.MM.Squeezebox" data-width="100%" data-get="volume" data-set="volume" data-color="mplayer-progress" data-handle-diameter="15"></div>
</div>
</div>
</li>

<!-- Rollo rechts -->
<li>
<div class="item-content">
<div class="item-media">
<i class="icon fa fa-fw fa-lightbulb-o"></i>
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Terrassentür rechts</div>
<div class="item-after"><div>test</div></div>
</div>
<div data-type="slider" class="inline horizontal mini top-space" data-device="DG.ku.MM.Squeezebox" data-width="100%" data-get="volume" data-set="volume" data-color="mplayer-progress" data-handle-diameter="15"></div>
</div>
</div>
</li>


</ul>
</div>







<div class="card">
<div class="card-content">
<div class="list-block media-list">
<ul>

<li>
<div class="item-content">
<div class="item-media"><i class="icon fa fa-fw fa-lightbulb-o"></i></div>
<div class="item-inner">

<div class="item-title-row">
<div class="item-title">Switch</div>
<div class="item-after">

<div data-type="checkbox"
data-device="dummy"
data-get="STATE"
data-get-on="on"
data-get-off="!on">
</div>

</div>
</div>
<div class="item-subtitle">residentsHomeNames</div>
</div>
</div>
</li>




<li>
<a href="f7_sub_mates.html" class="item-link item-content">
<div class="item-media"><i class="icon fa fa-fw fa-user-circle-o color-blue"></i></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Anwesenheit</div>
<div class="item-after" data-type="html" data-content="dummy:STATE" data-map-content='{"home":"Home","absent":"Away"}'>STATE</div>
</div>
<div class="item-subtitle" data-type="html" data-content="family:residentsHomeNames">residentsHomeNames</div>

</div>
</a>
</li>

<!-- Temperatur -->
<li>
<a href="#" class="item-link item-content">
<div class="item-media"><i class="icon fa fa-fw ftui-window color-blue"></i></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Fenster</div>
<div class="item-after" data-type="html" data-content="AllWindows:STATE">STATE</div>
</div>
<div class="item-subtitle" data-type="html" data-content="AllWindows:text">text</div>
</div>
</a>
</li>

</ul>
</div>
</div>
</div>


<div class="card">
<div class="card-content">
<div class="list-block media-list">
<ul>

<li>
<a href="#" class="item-link item-content">
<div class="item-media"><i class="icon fa fa-fw fa-thermometer color-blue"></i></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Temperatur</div>
<div class="item-after" data-type="html" data-content="THSensorWZ:temperature" data-unit="°C">temperature</div>
</div>
<div class="item-subtitle" data-type="html" data-content="THSensorWZ:humidity" data-pre-text="Humidity: " data-unit="%">humidity</div>

</div>
</a>
</li>
<li>
<a href="#" class="item-link item-content">
<div class="item-media"><i class="icon fa fa-fw fa-lightbulb-o color-blue"></i></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Licht</div>
<div class="item-after" data-type="html" data-content="AllLamps:STATE">temperature</div>
</div>


</div>
</a>
</li>
</ul>
</div>
</div>
</div>


<div class="content-block">
</div>

</div>

<!-- Tab 2 -->
<div id="tab_ku" class="tab">
<div class="content-block">
<p>Küche</p>
...
</div>
</div>

<!-- Tab 3 -->
<div id="tab_sz" class="tab">
<div class="content-block">
<p>Schlafzimmer</p>
...
</div>
</div>

<!-- Tab 4 -->
<div id="tab_bz" class="tab">
<div class="content-block">
<p>Badezimmer</p>
...
</div>
</div>

</div>

</div>

</div>
</div>


content_system.html
<!-- Navigationsleiste oben -->
<div class="navbar">
<div class="navbar-inner">
<div class="left"><a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a></div>
<div class="center">System</div>
<div class="right"><a href="#" class="link icon-only"><i class="icon demo-icon"></i></a></div>
<!-- <div class="right"><a href="#" data-panel="right" class="link icon-only open-panel"><i class="icon icon-bars"></i></a></div> -->
</div>
</div>

<!-- Seite -->
<div class="pages">
<div data-page="content_system" class="page navbar-fixed toolbar-fixed">

<!-- Navigationsleiste unten -->
<div class="toolbar tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#tab_system1" class="tab-link active"><i class="icon fa fa-sitemap"></i><span class="tabbar-label">Netzwerk</span></a>
<a href="#tab_system2" class="tab-link"><i class="icon fa fa-server"></i><span class="tabbar-label">Geräte</span></a>
<a href="#tab_system3" class="tab-link"><i class="icon fa demo-icon"></i><span class="tabbar-label">???</span></a>
<a href="#tab_system4" class="tab-link"><i class="icon fa demo-icon"></i><span class="tabbar-label">???</span></a>
</div>
</div>

<!-- Seiteninhalte -->
<div class="page-content">

<!-- Tabs, tabs wrapper -->
<div class="tabs">

<!-- Tab 1: Netzwerk -->
<div id="tab_system1" class="tab active">
<div class="content-block">
<p>Netzwerk</p>
...
</div>
</div>

<!-- Tab 2: Geräte -->
<div id="tab_system2" class="tab">

<div class="content-block-title">Netzwerk / WOL</div>
<div class="content-block">
<div class="content-block-inner">

<!-- DiskStation WOL -->
<div data-type="push"
data-device="NW.DiskStation.WOL"
data-get="active"
data-get-on="on"
data-get-off="!on"
data-on-color="orange"
data-on-background-color="orange"
data-icon="fa-server">
</div>

</div>
</div>

</div>
<!-- Tab 3: ??? -->
<div id="tab_system3" class="tab">
<div class="content-block">
<p>???</p>
...
</div>
</div>

<!-- Tab 4: ??? -->
<div id="tab_system4" class="tab">
<div class="content-block">
<p>???</p>
...
</div>
</div>

</div>
</div>
</div>
</div>


player_ku_playlist.html
<!-- Navigationsleiste oben -->
<div class="navbar">
<div class="navbar-inner">
<div class="left"><a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a></div>
<div class="center">System</div>
<div class="right"><a href="#" class="link icon-only"><i class="icon demo-icon"></i></a></div>
<!-- <div class="right"><a href="#" data-panel="right" class="link icon-only open-panel"><i class="icon icon-bars"></i></a></div> -->
</div>
</div>

<!-- Seite -->
<div class="pages">
<div data-page="content_system" class="page navbar-fixed toolbar-fixed">

<!-- Navigationsleiste unten -->
<div class="toolbar tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#tab_system1" class="tab-link active"><i class="icon fa fa-sitemap"></i><span class="tabbar-label">Netzwerk</span></a>
<a href="#tab_system2" class="tab-link"><i class="icon fa fa-server"></i><span class="tabbar-label">Geräte</span></a>
<a href="#tab_system3" class="tab-link"><i class="icon fa demo-icon"></i><span class="tabbar-label">???</span></a>
<a href="#tab_system4" class="tab-link"><i class="icon fa demo-icon"></i><span class="tabbar-label">???</span></a>
</div>
</div>

<!-- Seiteninhalte -->
<div class="page-content">

<!-- Tabs, tabs wrapper -->
<div class="tabs">

<!-- Tab 1: Netzwerk -->
<div id="tab_system1" class="tab active">
<div class="content-block">
<p>Netzwerk</p>
...
</div>
</div>

<!-- Tab 2: Geräte -->
<div id="tab_system2" class="tab">

<div class="content-block-title">Netzwerk / WOL</div>
<div class="content-block">
<div class="content-block-inner">

<!-- DiskStation WOL -->
<div data-type="push"
data-device="NW.DiskStation.WOL"
data-get="active"
data-get-on="on"
data-get-off="!on"
data-on-color="orange"
data-on-background-color="orange"
data-icon="fa-server">
</div>

</div>
</div>

</div>
<!-- Tab 3: ??? -->
<div id="tab_system3" class="tab">
<div class="content-block">
<p>???</p>
...
</div>
</div>

<!-- Tab 4: ??? -->
<div id="tab_system4" class="tab">
<div class="content-block">
<p>???</p>
...
</div>
</div>

</div>
</div>
</div>
</div>


my-app.css
.tab-link .icon.fa {
    font-size: 25px;
}

Standarduser


lewej

Hallo Zusammen,

ich hab schon alles durchsucht, aber ich finde den CSS Bereich für das Notification Popup nicht. Bei mir ist der Text weiss auf schwarzen Hintergrund. Das Popup hat als Hintergrund auch weiss und mit weisser Schrift, sieht man da nichts:(.

Eine Idee?

gruss
lewej

Standarduser

Das Ding heißt "toast"-irgendwas und die passende CSS müsste im lib Ordner liegen. Ich kann aber leider gerade nicht nachschauen

lewej

#30
Hallo Zusammen,

ich würde gerne das Smart Selected nutzen und es soll als POPUP aufgehen:
https://framework7.io/docs/smart-select.html

Aber irgendwie funktioniert es nicht. Ich würde gerne folgendes umsetzen:


<div class="list-block">
<ul>
<!-- Smart select item -->
<li>
<!-- Additional "smart-select" class -->
<a href="#" class="item-link smart-select">
<!-- select -->
<select name="WohnzimmerLampe">
<option value="on" selected>An</option>
<option value="off">Aus</option>
<option value="Blau">Blau</option>
<option value="Rot">Rot</option>
</select>
<div class="item-content">
<div class="item-inner">
<!-- Select label -->
<div class="item-title">Licht Wohnzimmer</div>
<!-- Selected value, not required -->
<div class="item-after">Rot</div>
</div>
</div>
</a>
</li>
</ul>
</div>   


Wo muss man data-content oder data-map-checked hier einsetzen, und muss hier noch javascript geschrieben werden?

Falls jemand bereits sowas ähnliches am laufen? Ein Beispiel, wäre Super.

Gruß und Danke
Vitali


lewej

Hallo Zusammen,

nutzt keiner das Selected ..... Popup, wäre sehr an einem Beispiel interessiert.

Gruss
lewej

setstate

Ich nutze das (noch) nicht, habe aber mal schnell versucht das zusammen zu klickern.
So funktioniert das bei mir


<li>
    <!-- Additional "smart-select" class -->
    <a href="#" class="item-link smart-select">
        <!-- select -->
        <select data-type="html" data-value="AvReceiver:input" data-changed="AvReceiver:input">
            <option value="Webradio" selected>Webradio</option>
            <option value="Sat">Sat</option>
            <option value="BD/DVD">BD/DVD</option>
            <option value="Spotify">Spotify</option>
            <option value="FireTv">FireTv</option>
            <option value="Phono">Phono</option>
            <option value="FM">FM</option>
        </select>
        <div class="item-content">
            <div class="item-inner">
                <!-- Select label -->
                <div class="item-title">Input</div>
                <!-- Selected value, not required -->
                <div class="item-after" data-type="html" data-value="AvReceiver:input"></div>
            </div>
        </div>
    </a>
</li>

l3skon3

#33
da war jemand schneller  ;D
aber eine Ergänzung hab ich noch... um es als Popup zu öffnen.


<li>
    <!-- Additional "smart-select" class -->
    <a href="#" class="item-link smart-select" data-open-in="popup">
        <!-- select -->
        <select data-type="html" data-value="AvReceiver:input" data-changed="AvReceiver:input">
            <option value="Webradio" selected>Webradio</option>
            <option value="Sat">Sat</option>
            <option value="BD/DVD">BD/DVD</option>
            <option value="Spotify">Spotify</option>
            <option value="FireTv">FireTv</option>
            <option value="Phono">Phono</option>
            <option value="FM">FM</option>
        </select>
        <div class="item-content">
            <div class="item-inner">
                <!-- Select label -->
                <div class="item-title">Input</div>
                <!-- Selected value, not required -->
                <div class="item-after" data-type="html" data-value="AvReceiver:input"></div>
            </div>
        </div>
    </a>
</li>


also grad das  data-open-in="popup" wird ergänzt.

edit: ich persönlich finde data-open-in="picker" data-picker-close-text="zurück" eine schöne Lösung.

lewej

Zitat von: l3skon3 am 03 Oktober 2017, 09:01:50
da war jemand schneller  ;D
aber eine Ergänzung hab ich noch... um es als Popup zu öffnen.


<li>
    <!-- Additional "smart-select" class -->
    <a href="#" class="item-link smart-select" data-open-in="popup">
        <!-- select -->
        <select data-type="html" data-value="AvReceiver:input" data-changed="AvReceiver:input">
            <option value="Webradio" selected>Webradio</option>
            <option value="Sat">Sat</option>
            <option value="BD/DVD">BD/DVD</option>
            <option value="Spotify">Spotify</option>
            <option value="FireTv">FireTv</option>
            <option value="Phono">Phono</option>
            <option value="FM">FM</option>
        </select>
        <div class="item-content">
            <div class="item-inner">
                <!-- Select label -->
                <div class="item-title">Input</div>
                <!-- Selected value, not required -->
                <div class="item-after" data-type="html" data-value="AvReceiver:input"></div>
            </div>
        </div>
    </a>
</li>


also grad das  data-open-in="popup" wird ergänzt.

edit: ich persönlich finde data-open-in="picker" data-picker-close-text="zurück" eine schöne Lösung.

Super es funktioniert, so wie es soll. Ich habe es noch etwas erweitert, um auto close und als Picker:


<!-- Beginn Popup Wolf Stufe -->
<li>
<!-- Additional "smart-select" class picker -->
<a href="#" class="item-link smart-select" data-back-on-select="true" data-open-in="picker">
<!-- select -->
<select data-type="html" data-value="WOLF_CWL_STATE_STUFE:STATE" data-changed="WOLF_CWL_STATE_STUFE:STATE">
<option value="0" selected>Aus</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="item-content">
<div class="item-inner">
<!-- Select label -->
<div class="item-title">Stufe</div>
<!-- Selected value, not required -->
<div class="item-after" data-type="html" data-content="WOLF_CWL_STATE_STUFE:STATE"></div>
</div>
</div>
</a>
</li>

lewej

Hallo Zusammen,

ich versuche in den icons die Symbol Farbe zu ändern, je nach Status, klappt aber nicht.

Ein Beispiel, wo die Farben bzw. Zahlen geändert werden, habe ich :

<i class="icon fa oa-fts_window_1w">
<span class="badge theme-green bg-red" data-type="html" data-content="dmy_ZE.OPEN_Fenster:STATE"  data-class="dmy_ZE.OPEN_Fenster:STATE" data-map-class='{"0":"hide", ".*":"show"}'>0</span>
</i>


Ich möchte aber jetzt nur ein Lampen Symbol haben und die Farbe von der Lampe soll geändert werden.

In der alten FTUI habe ich das so gemacht:

<div data-type="symbol"
data-device="HUEDevice14"
data-get="state"
data-get-on="on.*"
data-get-off="off"
data-icon="fa-lightbulb-o"
data-on-color="#eee"
data-off-color="#f0f0e1"
data-on-background-color="HUEDevice14:rgb"
data-off-background-color="#cacad9"
class="item-media fa fa-fw">
</div>


Wenn ich das nutze, zerreist es mir das ganze Layout.


Kann ich die Datenfelder auch in der i class bzw. span class nutzen? Hat jemand ein Beispiel ?

Gibt es auch eine Übersicht wie die ganzen neuen data Variablen heißen, zu data-content oder data-map-class, habe ich im git nichts gefunden.

Gruß
lewej

lewej

Hallo Zusammen,

ich bekomme es einfach nicht hin. Was muss ich eintragen, damit die FTUI folgende Sachen absetzt:


1. set KuecheSchraenkeLedStripe rgb FARBE
2. set SKuecheSchraenkeLedStripe on
3. KuecheSchraenkeLedStripe off
4. KuecheSchraenkeLedStripe 6fe600


Ich habe folgenden code, der setzt immer nur die Farbe, egal ob ich an oder aus wähle.


<li>
<!-- Additional "smart-select" class picker -->
<a href="#" class="item-link smart-select" data-back-on-select="true" data-open-in="picker">
<!-- select -->
<select data-type="html" data-value=""= data-checked="KuecheSchraenkeLedStripe" data-map-checked='{"6fe600":"rgb 6fe600","an":"on", "aus":"off"}' data-changed="KuecheSchraenkeLedStripe:STATE" data-map-changed='{"6fe600":"rgb 6fe600","an":"on", "aus":"off"}'>
<option value="aus">Aus</option>
<option value="an">An</option>
<option value="6fe600">grün</option>
</select>
<div class="item-content">
<div data-type="symbol"
data-device="KuecheSchraenkeLedStripe"
data-get="state"
data-get-on="on.*"
data-get-off="off"
data-icon="fa-lightbulb-o"
data-on-color="KuecheSchraenkeLedStripe:rgb"
data-off-color="#f0f0e1"
data-on-background-color="KuecheSchraenkeLedStripe:rgb"
data-off-background-color="#cacad9"
class="item-media fa fa-fw">
</div>


<div class="item-inner">
<div class="item-title-row">
<div class="item-title">LedStripes</div>
<div class="item-subtitle">
<div class="range-slider">
<input data-type="html" data-value="KuecheSchraenkeLedStripe:val" data-changed="KuecheSchraenkeLedStripe:val" type="range" min="0" max="100" value="3" step="10">
</div>
</div>
</div>
<div class="item-after" data-type="html" data-content="KuecheSchraenkeLedStripe:stateLight"></div>
</div>
</div>
</a>
</li>


Gruß
lewej

l3skon3

Hallo,

hat vielleicht jemand eine Idee wie man Weekprofil und Weeddaytimer lauffähig bekommt?


l3skon3

Zitat von: lewej am 07 Oktober 2017, 13:09:08
Hallo Zusammen,

ich bekomme es einfach nicht hin. Was muss ich eintragen, damit die FTUI folgende Sachen absetzt:


1. set KuecheSchraenkeLedStripe rgb FARBE
2. set SKuecheSchraenkeLedStripe on
3. KuecheSchraenkeLedStripe off
4. KuecheSchraenkeLedStripe 6fe600


Ich habe folgenden code, der setzt immer nur die Farbe, egal ob ich an oder aus wähle.


<li>
<!-- Additional "smart-select" class picker -->
<a href="#" class="item-link smart-select" data-back-on-select="true" data-open-in="picker">
<!-- select -->
<select data-type="html" data-value=""= data-checked="KuecheSchraenkeLedStripe" data-map-checked='{"6fe600":"rgb 6fe600","an":"on", "aus":"off"}' data-changed="KuecheSchraenkeLedStripe:STATE" data-map-changed='{"6fe600":"rgb 6fe600","an":"on", "aus":"off"}'>
<option value="aus">Aus</option>
<option value="an">An</option>
<option value="6fe600">grün</option>
</select>
<div class="item-content">
<div data-type="symbol"
data-device="KuecheSchraenkeLedStripe"
data-get="state"
data-get-on="on.*"
data-get-off="off"
data-icon="fa-lightbulb-o"
data-on-color="KuecheSchraenkeLedStripe:rgb"
data-off-color="#f0f0e1"
data-on-background-color="KuecheSchraenkeLedStripe:rgb"
data-off-background-color="#cacad9"
class="item-media fa fa-fw">
</div>


<div class="item-inner">
<div class="item-title-row">
<div class="item-title">LedStripes</div>
<div class="item-subtitle">
<div class="range-slider">
<input data-type="html" data-value="KuecheSchraenkeLedStripe:val" data-changed="KuecheSchraenkeLedStripe:val" type="range" min="0" max="100" value="3" step="10">
</div>
</div>
</div>
<div class="item-after" data-type="html" data-content="KuecheSchraenkeLedStripe:stateLight"></div>
</div>
</div>
</a>
</li>


Gruß
lewej

hm, probier mal

Zitatdata-value=""=

auszubessern.

lewej

Hallo,

aktuell habe ich hinbekommen, das die Farben gesetzt werden können. Ich frage mich jedoch, ob das so richtig ist und ob man das doch besser anders angehen sollte.


<!-- Beginn Popup TVLEDS -->
<li>
<!-- Additional "smart-select" class picker -->
<a href="#" class="item-link smart-select" data-back-on-select="true" data-open-in="picker">
<!-- select -->
<select data-type="html" data-checked="WZTVLEDSTRIPE:STATE" data-content="WZTVLEDSTRIPE" data-changed="WZTVLEDSTRIPE:STATE">
<option value="off">Aus</option>
<option value="rgb ffffff" selected>An</option>
<option value="rgb 6fe600">gruen</option>
<option value="rgb efefef">rgb2</option>
</select>
<div class="item-content">


<div data-type="symbol"
data-device="WZTVLEDSTRIPE"
data-get="STATE"
data-get-on="on.*"
data-get-off="off"
data-icon="fa-lightbulb-o"
data-on-color="#ffbf00"
data-off-color="#f0f0e1"
data-on-background-color="#004000"
data-off-background-color="#cacad9"
class="item-media fa fa-fw">
</div>



<div class="item-inner">
<div class="item-title-row">
<div class="item-title">TV-LedStripes</div>
<div class="item-subtitle">
<div class="range-slider">
<input data-type="html" data-value="WZTVLEDSTRIPE" data-changed="WZTVLEDSTRIPE:val" type="range" min="0" max="254" value="3" step="20">
</div>
</div>
</div>
<div class="item-after" data-type="html" data-content="WZTVLEDSTRIPE:stateLight"></div>
</div>
</div>
</a>
</li>


gruß
lewej

Pi_Newbie

Hallo zusammen,

ich bin dabei verschiedenste UI's für mich auszuprobieren, da ich nicht so der coding freak bin. Würde gerne auch dieses mal testen. Würde jemand mal seine gesamten .html hierzu bereitstellen? Das wäre super!

Besten Dank an alle!
Pi3 mit Jessie lite, KNX-Installation

viper2033

Hallo,

wäre auch brennend an deinen Files interessiert, sieht echt gut aus was du bis jetzt gebaut hast.
Wäre echt top wenn du mir diese auch zusenden könntest

lewej

Hallo Zusammen,

ich habe ein Problem mit einem html/label:

Folgenden Code habe ich:


<li>
<!-- Additional "smart-select" class picker -->
<a href="#" class="item-link smart-select" data-back-on-select="true" data-open-in="picker">
<!-- select -->
<select data-type="html" data-checked="KuecheDeckeLedStripe" data-content="KuecheDeckeLedStripe" data-changed="KuecheDeckeLedStripe:STATE">
<option value="off">Aus</option>
<option value="rgb ffffff">An</option>
<option value="hsv 328.97,16.03,100" selected data-option-icon="fa fa-lightbulb-o color-pink">pink-white</option>
<option value="hsv 180,21.02,100" selected data-option-icon="fa fa-lightbulb-o color-lightblue">aqua-white</option>
<option value="hsv 238.01,29.03,100" selected data-option-icon="fa fa-lightbulb-o color-blue">blue-white</option>
<option value="hsv 131.03,29.03,100" selected data-option-icon="fa fa-lightbulb-o color-cyan">mint-white</option>
</select>
<div class="item-content">
<div data-type="symbol"
data-device="KuecheDeckeLedStripe"
data-get="stateLight"
data-get-on="on.*"
data-get-off="off"
data-icon="fa-lightbulb-o"
data-on-color="#ffe599"
data-off-color="#f0f0e1"
class="item-media fa fa-fw">
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">LEDStripes</div>
<div class="item-subtitle">
<div class="item-content"></div>
<div class="range-slider">
<input data-type="html" data-value="KuecheDeckeLedStripe:val" data-changed="KuecheDeckeLedStripe:val" type="range" min="0" max="100" value="3" step="20">
</div>
</div>
</div>
<div class="item-after"  data-type="label"
data-device="KuecheDeckeLedStripe"
data-get="KuecheDeckeLedStripe:state"
data-substitution='["opened","An","disconnected","Aus"]'
</div>
</div>
</div>
</div>
</a>
</li>


Wenn irgend eine Farbe auswähle, überschreibt es mir rechts den state status, eigentlich sollte dort immer nur an und aus stehen. Wenn ich die Seite reloade dann steht wieder das richtige dort.

Hat jemand eine Idee?
Siehe Bilder:

Standarduser

Zitat von: viper2033 am 11 Oktober 2017, 18:49:06
Hallo,

wäre auch brennend an deinen Files interessiert, sieht echt gut aus was du bis jetzt gebaut hast.
Wäre echt top wenn du mir diese auch zusenden könntest

Meintest Du mich?

Ist noch die totale Baustelle und viel zusehen gibts eigentlich auch nicht, aber ich teile gern, was ich bereits habe.
Insbesondere eine funktionierende Struktur hinzubekommen war stellenweise echt anstrengend. Also greift zu und macht etwas draus  ;)

lewej

Zitat von: lewej am 12 Oktober 2017, 20:29:58
Hallo Zusammen,

ich habe ein Problem mit einem html/label:

Folgenden Code habe ich:


<li>
<!-- Additional "smart-select" class picker -->
<a href="#" class="item-link smart-select" data-back-on-select="true" data-open-in="picker">
<!-- select -->
<select data-type="html" data-checked="KuecheDeckeLedStripe" data-content="KuecheDeckeLedStripe" data-changed="KuecheDeckeLedStripe:STATE">
<option value="off">Aus</option>
<option value="rgb ffffff">An</option>
<option value="hsv 328.97,16.03,100" selected data-option-icon="fa fa-lightbulb-o color-pink">pink-white</option>
<option value="hsv 180,21.02,100" selected data-option-icon="fa fa-lightbulb-o color-lightblue">aqua-white</option>
<option value="hsv 238.01,29.03,100" selected data-option-icon="fa fa-lightbulb-o color-blue">blue-white</option>
<option value="hsv 131.03,29.03,100" selected data-option-icon="fa fa-lightbulb-o color-cyan">mint-white</option>
</select>
<div class="item-content">
<div data-type="symbol"
data-device="KuecheDeckeLedStripe"
data-get="stateLight"
data-get-on="on.*"
data-get-off="off"
data-icon="fa-lightbulb-o"
data-on-color="#ffe599"
data-off-color="#f0f0e1"
class="item-media fa fa-fw">
</div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">LEDStripes</div>
<div class="item-subtitle">
<div class="item-content"></div>
<div class="range-slider">
<input data-type="html" data-value="KuecheDeckeLedStripe:val" data-changed="KuecheDeckeLedStripe:val" type="range" min="0" max="100" value="3" step="20">
</div>
</div>
</div>
<div class="item-after"  data-type="label"
data-device="KuecheDeckeLedStripe"
data-get="KuecheDeckeLedStripe:state"
data-substitution='["opened","An","disconnected","Aus"]'
</div>
</div>
</div>
</div>
</a>
</li>


Wenn irgend eine Farbe auswähle, überschreibt es mir rechts den state status, eigentlich sollte dort immer nur an und aus stehen. Wenn ich die Seite reloade dann steht wieder das richtige dort.

Hat jemand eine Idee?
Siehe Bilder:

@state: Hast du eine Idee, warum der Status überschrieben wird?

Gruss
lewej

lewej

Hallo Zusammen,

hat jemand eine funktionierende Variante wo Templates genutzt werden können?

Gruß
lewej

Standarduser

Zitat von: lewej am 23 Oktober 2017, 20:50:30
Hallo Zusammen,

hat jemand eine funktionierende Variante wo Templates genutzt werden können?

Gruß
lewej

Nein. Mit templates scheint es ein Problem zu geben.
Beim ersten Aufruf der Seite funktioniert alles. Wechselt man die Seite und kommt zurück, sind die Inhalte, die mit Templates eingebaut sind, weg.

lewej

Zitat von: Standarduser am 24 Oktober 2017, 21:28:04
Nein. Mit templates scheint es ein Problem zu geben.
Beim ersten Aufruf der Seite funktioniert alles. Wechselt man die Seite und kommt zurück, sind die Inhalte, die mit Templates eingebaut sind, weg.


Hi,

@state: Hast du schon eine Idee, woran es liegen könnte?

grüsse
lewej

Pi_Newbie

Hi,

@Standarduser: Erstmal vielen Dank das Du deine Dateien zur Verfügung stellst. Ich habe diese mal bei mir ausprobiert und ehrlich gesagt werden kaum Änderungen übernommen. Ist mir leider völlig rätselhaft!

Ändere ich Beschriftungen, wie zum Beispiel "Einstellungen" in "System", werden diese Änderungen angezeigt. Jedoch keinerlei abgeänderte Devices, wie z.B. Musik-Cover oder ähnliches. Die Devices sind korrekt, die URL ist korrekt, etc. Es wird mir unter Musik jedoch keinerlei Cover, Titel oder ähnliches angezeigt. Auf einer parallelen Tablet-Ui funktionieren diese jedoch.

Habe ich irgendwo einen gravierenden Fehler? Anbei mal einen Screenshot und dazugehöriges .html (deine devices auf meine angepasst!)

<!-- Tab 2: Musik -->
<div id="tab2" class="tab">

<!-- Cover -->
<div data-type="image" data-device="Spotify" data-get="track_album_cover_small" data-size="100%" data-opacity="1"></div>


<!-- now playing -->
<div data-type="label" data-device="Sonos_Bad" data-get="currentTitle"  data-pre-text="&nbsp;" data-post-text="&nbsp;" class="center big top-space-10px"></div>
<div data-type="label" data-device="Sonos_Bad" data-get="currentAlbumArtist" data-pre-text="&nbsp;" data-post-text="&nbsp;" class="center thin"></div>

<!-- Progress -->
<div class="center top-space-10px">
<div data-type="label" data-device="Sonos_Bad" data-get="currentTrackPosition" data-color="mplayer-progress" data-substitution="toMinFromSec()" class="thin inline"></div>
<div data-type="level" data-device="Sonos_Bad" data-get="currentTrackPosition" data-color="mplayer-progress" data-max="duration" data-width="60%" data-timer-state="Sonos_Bad" data-timer-state-on="play" data-timer-state-off="!on" data-timer-step="1" data-timer-interval="1000" data-margin="15px" class="horizontal inline"></div>
<div data-type="label" data-device="Sonos_Bad" data-get="track_duration" data-color="mplayer-off" data-substitution="toMinFromSec()" class="thin inline"></div>
</div>


Des Weiteren fehlen mir seltsamerweise auch die Icon's in der unteren Menüleiste.

Danke für deine Hilfe!!!

Pi3 mit Jessie lite, KNX-Installation

lewej

Hallo Pi_Newbie,

welche Plugin nutzt da, damit du die Auflösungen im Browser auf Iphone 7 und andere einstellen kannst?

gruss
lewej

Pi_Newbie

Hi lewej,

das ist der normale Safari Browser, ohne spezielles Plugin. Unter dem Tab "Entwickler", in Modus "Responsive Design" wechseln.

Grüße

Pi3 mit Jessie lite, KNX-Installation

Pi_Newbie

#51
Hallo Standarduser,

ich bin etwas weitergekommen beim abändern der Visu, jedoch ist die Musik-Seite total zerschossen. Auch wenn ich deine Devices nehme (bzw. die Originaldatei) sieht die Musik-Seite identisch aus, siehe Screenshot.

Hat jemand eine Idee wieso die Player-Controls so zerschossen sind? Das Cover ziehe ich aus dem Spotify-Device.

Die Buttons für Pause, Play, etc. sind alle untereinander angeordnet.

Vielen Dank für Eure Hilfe!!!
Pi3 mit Jessie lite, KNX-Installation

l3skon3

Zitat von: Pi_Newbie am 02 November 2017, 19:56:58
Hallo Standarduser,

ich bin etwas weitergekommen beim abändern der Visu, jedoch ist die Musik-Seite total zerschossen. Auch wenn ich deine Devices nehme (bzw. die Originaldatei) sieht die Musik-Seite identisch aus, siehe Screenshot.

Hat jemand eine Idee wieso die Player-Controls so zerschossen sind? Das Cover ziehe ich aus dem Spotify-Device.

Die Buttons für Pause, Play, etc. sind alle untereinander angeordnet.

Vielen Dank für Eure Hilfe!!!

Hallo,

ohne Code kann ich nur raten. Ich habe meine Controlle Panel so mittig und in reihe gesetzt.

<!-- Player Controls -->
<div class="center row">
<div data-type="push" data-device="Spotify" data-icon="fa-step-backward" data-on-color="mplayer-on" data-off-color="mplayer-off" data-set-on="prev" data-background-icon="-"></div>
<div data-type="switch" data-device="Spotify" data-icon="fa-play" data-get-off="is_playing" data-set-off="is_playing" data-get="playStatus" data-get-on="togglePlayback" data-set-on="togglePlayback" data-background-icon="-" data-on-color="mplayer-on" data-off-color="mplayer-off"></div>
<div data-type="switch" data-device="Spotify" data-get-off="!on" data-set-off="" data-get="playStatus" data-get-on="paused"  data-set-on="pause" data-icon="fa-pause" data-background-icon="-" data-on-color="mplayer-on" data-off-color="mplayer-off"></div>
<div data-type="push" data-device="Spotify" data-icon="fa-step-forward"  data-on-color="mplayer-on" data-off-color="mplayer-off" data-set-on="next" data-background-icon="-"></div>
</div>



Pi_Newbie

Habe gerade mal deinen Code eingesetzt, dann sieht es wie auf dem beigefügten Screenshot aus.

Anbei auch der Code hierzu
<!-- Tab 2: Musik -->
<div id="tab2" class="tab">

<!-- Cover -->
<div data-type="image" data-device="Spotify" data-get="track_album_cover_medium" data-size="100%" data-opacity="1" class="middle nocache"></div>

<!-- now playing -->
<div data-type="label" data-device="Sonos_Bad" data-get="currentTitle"  data-pre-text="&nbsp;" data-post-text="&nbsp;" class="center big top-space-10px"></div>
<div data-type="label" data-device="Sonos_Bad" data-get="currentArtist" data-pre-text="&nbsp;" data-post-text="&nbsp;" class="center thin"></div>

<!-- Progress -->
<div class="center top-space-10px">
<div data-type="label" data-device="Sonos_Bad" data-get="currentTrackPosition" data-color="mplayer-progress" data-substitution="toMinFromSec()" class="thin inline"></div>
<div data-type="level" data-device="Sonos_Bad" data-get="currentTrackPosition" data-color="mplayer-progress" data-max="duration" data-width="60%" data-timer-state="Sonos_Bad:STATE" data-timer-state-on="play" data-timer-state-off="!on" data-timer-step="1" data-timer-interval="1000" data-margin="15px" class="horizontal inline"></div>
<div data-type="label" data-device="Sonos_Bad" data-get="duration" data-color="mplayer-off" data-substitution="toMinFromSec()" class="thin inline"></div>
</div>

<!-- Player Controls -->
<div class="center row">
<div data-type="push" data-device="Spotify" data-icon="fa-step-backward" data-on-color="mplayer-on" data-off-color="mplayer-off" data-set-on="prev" data-background-icon="-"></div>
<div data-type="switch" data-device="Spotify" data-icon="fa-play" data-get-off="is_playing" data-set-off="is_playing" data-get="playStatus" data-get-on="togglePlayback" data-set-on="togglePlayback" data-background-icon="-" data-on-color="mplayer-on" data-off-color="mplayer-off"></div>
<div data-type="switch" data-device="Spotify" data-get-off="!on" data-set-off="" data-get="playStatus" data-get-on="paused"  data-set-on="pause" data-icon="fa-pause" data-background-icon="-" data-on-color="mplayer-on" data-off-color="mplayer-off"></div>
<div data-type="push" data-device="Spotify" data-icon="fa-step-forward"  data-on-color="mplayer-on" data-off-color="mplayer-off" data-set-on="next" data-background-icon="-"></div>
</div>

<!-- Volume -->


Vielleicht kannst Du da etwas erkennen.
Pi3 mit Jessie lite, KNX-Installation

l3skon3

Zitat von: Pi_Newbie am 02 November 2017, 20:40:03
Habe gerade mal deinen Code eingesetzt, dann sieht es wie auf dem beigefügten Screenshot aus.

Anbei auch der Code hierzu
<!-- Tab 2: Musik -->
<div id="tab2" class="tab">

<!-- Cover -->
<div data-type="image" data-device="Spotify" data-get="track_album_cover_medium" data-size="100%" data-opacity="1" class="middle nocache"></div>

<!-- now playing -->
<div data-type="label" data-device="Sonos_Bad" data-get="currentTitle"  data-pre-text="&nbsp;" data-post-text="&nbsp;" class="center big top-space-10px"></div>
<div data-type="label" data-device="Sonos_Bad" data-get="currentArtist" data-pre-text="&nbsp;" data-post-text="&nbsp;" class="center thin"></div>

<!-- Progress -->
<div class="center top-space-10px">
<div data-type="label" data-device="Sonos_Bad" data-get="currentTrackPosition" data-color="mplayer-progress" data-substitution="toMinFromSec()" class="thin inline"></div>
<div data-type="level" data-device="Sonos_Bad" data-get="currentTrackPosition" data-color="mplayer-progress" data-max="duration" data-width="60%" data-timer-state="Sonos_Bad:STATE" data-timer-state-on="play" data-timer-state-off="!on" data-timer-step="1" data-timer-interval="1000" data-margin="15px" class="horizontal inline"></div>
<div data-type="label" data-device="Sonos_Bad" data-get="duration" data-color="mplayer-off" data-substitution="toMinFromSec()" class="thin inline"></div>
</div>

<!-- Player Controls -->
<div class="center row">
<div data-type="push" data-device="Spotify" data-icon="fa-step-backward" data-on-color="mplayer-on" data-off-color="mplayer-off" data-set-on="prev" data-background-icon="-"></div>
<div data-type="switch" data-device="Spotify" data-icon="fa-play" data-get-off="is_playing" data-set-off="is_playing" data-get="playStatus" data-get-on="togglePlayback" data-set-on="togglePlayback" data-background-icon="-" data-on-color="mplayer-on" data-off-color="mplayer-off"></div>
<div data-type="switch" data-device="Spotify" data-get-off="!on" data-set-off="" data-get="playStatus" data-get-on="paused"  data-set-on="pause" data-icon="fa-pause" data-background-icon="-" data-on-color="mplayer-on" data-off-color="mplayer-off"></div>
<div data-type="push" data-device="Spotify" data-icon="fa-step-forward"  data-on-color="mplayer-on" data-off-color="mplayer-off" data-set-on="next" data-background-icon="-"></div>
</div>

<!-- Volume -->


Vielleicht kannst Du da etwas erkennen.

Ok. Ersetze den <div class="center top-space-10px">, da wo nötig durch <div class="center row">.

Dann solle es ok aussehen.

bjoernbo

Hallo, bin heute auf dieses Thema gestoßen. Ich gehe mal davon aus, dass es auch mit einen Tablet läuft, da die Bildschirmfotos ja alle von einem Smartphone-Device sind. Ich suche allerdings noch Hintergrundinformation im Bezug auf die Einrichtung auf dem FHEM Server etc. Gibt es hierzu im forum irgendwo eine Quelle. Die suche hat mich immer hierhin verwiesen.

Danke.
Raspberry Pi 3 - FB6490C - Synology NAS DS916+ - NETATMO - HUE - SIEMENS G-Tag'S - FTUI - EchoDOT -

setstate

1. Suche dir ein Framework7 Layout aus
    https://framework7.io/examples/
2. Füge die FTUI JS und CSS in den Header hinzu

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta name="longpoll" content="1">
    <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="1">
    <!-- verbose level 1-6 = output to console;0 = not output -->

    <title>FTUI-F7</title>

    <link rel="stylesheet" href="lib/framework7/framework7.ios.min.css">
    <link rel="stylesheet" href="lib/framework7/framework7.ios.colors.min.css">
    <link rel="stylesheet" href="css/fhem-tablet-ui-f7.css" />

    <script src="lib/framework7/framework7.min.js" defer></script>
    <script src="js/fhem-tablet-ui.js" defer></script>
    <!--script src="js/my-app.js" defer></script-->


3. Mache aus den Framework7 Controls (Button, Check usw.) Elemente, die mit FHEM kommunizieren
    Durch hinzufügen von data-type="html" und anderen data-* zu den vorhandenen Framework7 Elementen
data-type="html" ...


HTML Inhalt ändern (ähnlich Label-Widget)
data-type="html" data-content="Device:Reading" data-map-content='{"von":"Nach","from":"To"}'

Beispiel
data-type="html" data-content="family:STATE" data-map-content='{"home":"Home","absent":"Away"}'

Checkbox
data-checked           Device:Reading voher die Info kommt, ob die Checkbox an oder aus ist
data-map-checked    Key-Value Object für die Werteumwandlung der Werte, aus dem data-checked Reading
data-changed           Device:Reading was geschrieben wird, wenn die Checkbox geschaltet wird
data-map-changed    Key-Value Object für die Werteumwandlung der Werte, die an FHEM beim Umschalten geschickt werden

Beispiel
data-type="html" data-checked="SchrankLicht_Sw:STATE" data-map-checked='{"on":"true","set_on":"true", "off":"false"}' data-changed="SchrankLicht_Sw:STATE" data-map-changed='{"true":"on", "false":"off"}'>