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?
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>
Hast Du eigentlich etwas spezielles in der fhem-tablet-ui-f7.css stehen?
Und würdest Du die mit uns teilen?
Klar mach ich.
Ich bin aber noch nicht weit damit :-(
Hier der Stand
Sehr cool.
Ich hänge auch mal einen ersten Screenshot an.
Gibt noch viel zu tun...
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>
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&h=700&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&h=700&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&h=700&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
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.
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.
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.
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?
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
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.
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
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 + '"]');
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.
Bei deinen <div data-type="... fehlt immer die abschließende ">"
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>
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
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?
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
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\
Framework7 kannst du auch auf der offiziellen Seite laden: framework7.io
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
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.
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
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=" " data-post-text=" " class="center big top-space-10px"></div>
<div data-type="label" data-device="DG.ku.MM.Squeezebox" data-get="currentArtist" data-pre-text=" " data-post-text=" " 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;
}
Die Doku findest Du übrigens hier: https://framework7.io/docs/
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
Das Ding heißt "toast"-irgendwas und die passende CSS müsste im lib Ordner liegen. Ich kann aber leider gerade nicht nachschauen
Hallo Zusammen,
ich würde gerne das Smart Selected nutzen und es soll als POPUP aufgehen:
https://framework7.io/docs/smart-select.html (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
Hallo Zusammen,
nutzt keiner das Selected ..... Popup, wäre sehr an einem Beispiel interessiert.
Gruss
lewej
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>
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.
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>
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
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
Hallo,
hat vielleicht jemand eine Idee wie man Weekprofil und Weeddaytimer lauffähig bekommt?
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.
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
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!
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
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:
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 ;)
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
Hallo Zusammen,
hat jemand eine funktionierende Variante wo Templates genutzt werden können?
Gruß
lewej
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.
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
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=" " data-post-text=" " class="center big top-space-10px"></div>
<div data-type="label" data-device="Sonos_Bad" data-get="currentAlbumArtist" data-pre-text=" " data-post-text=" " 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!!!
Hallo Pi_Newbie,
welche Plugin nutzt da, damit du die Auflösungen im Browser auf Iphone 7 und andere einstellen kannst?
gruss
lewej
Hi lewej,
das ist der normale Safari Browser, ohne spezielles Plugin. Unter dem Tab "Entwickler", in Modus "Responsive Design" wechseln.
Grüße
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!!!
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>
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=" " data-post-text=" " class="center big top-space-10px"></div>
<div data-type="label" data-device="Sonos_Bad" data-get="currentArtist" data-pre-text=" " data-post-text=" " 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.
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=" " data-post-text=" " class="center big top-space-10px"></div>
<div data-type="label" data-device="Sonos_Bad" data-get="currentArtist" data-pre-text=" " data-post-text=" " 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.
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.
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"}'>