Hauptmenü

Framework7 + FTUI

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

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten 1 2 3 4 Alle
Benutzer-Aktionen

Standarduser

#15
23 September 2017, 16:52:17 Letzte Bearbeitung: 23 September 2017, 17:46:47 von Standarduser
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
Code Auswählen

<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
Code Auswählen

<!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

#16
24 September 2017, 00:19:34
Bei deinen <div data-type="... fehlt immer die abschließende ">"

Standarduser

#17
24 September 2017, 10:14:07
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?

Code Auswählen

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:
Code Auswählen
{,...}
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:
Code Auswählen
{Arg: "undefined", Results: [], totalResultsReturned: 0}
Arg:"undefined"
Results:[]
totalResultsReturned:0

Ich habe bei beiden folgenden Code verwendet:
Code Auswählen
<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

#18
24 September 2017, 13:58:50
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

#19
24 September 2017, 14:49:02
Ich hab nochmal den gesamten Code durchsucht und nun doch noch einen swiper gefunden.

Code Auswählen
<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

#20
27 September 2017, 21:02:12
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?

Code Auswählen

<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

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

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

Code Auswählen

<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

#22
27 September 2017, 21:46:22
Framework7 kannst du auch auf der offiziellen Seite laden: framework7.io

lewej

#23
27 September 2017, 22:05:10
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

#24
28 September 2017, 06:24:32
Du kannst die Schnipsel aus dem Wiki verwenden.
https://wiki.fhem.de/wiki/FTUI_Widget_Colorwheel

Code Auswählen
<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

#25
29 September 2017, 13:00:50
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

#26
29 September 2017, 18:54:05
Ich nutze das linke Menü, um zwischen den Seiten zu wechseln.

Code Auswählen
<!-- 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
Code Auswählen
<!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
Code Auswählen
<!-- 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
Code Auswählen
<!-- 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
Code Auswählen
<!-- 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
Code Auswählen
.tab-link .icon.fa {
    font-size: 25px;
}

Standarduser

#27
29 September 2017, 18:57:07
Die Doku findest Du übrigens hier: https://framework7.io/docs/

lewej

#28
30 September 2017, 08:49:24
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

#29
30 September 2017, 09:24:18
Das Ding heißt "toast"-irgendwas und die passende CSS müsste im lib Ordner liegen. Ich kann aber leider gerade nicht nachschauen
Drucken
Nach oben Seiten 1 2 3 4 Alle
Benutzer-Aktionen