Framework7 + FTUI

lewej · 23 Oktober 2017, 20:50:30

Hallo Zusammen,

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

Gruß
lewej

Standarduser · 24 Oktober 2017, 21:28:04

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

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

Gruß
lewej

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

lewej · 28 Oktober 2017, 20:54:13

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

Hi,

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

grüsse
lewej

Pi_Newbie · 01 November 2017, 10:23:28

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

Code Auswählen

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

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

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

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

Danke für deine Hilfe!!!

lewej · 01 November 2017, 11:10:49

Hallo Pi_Newbie,

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

gruss
lewej

Pi_Newbie · 01 November 2017, 11:29:16

Hi lewej,

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

Grüße

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

l3skon3 · 02 November 2017, 20:29:05

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.

Code Auswählen

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

Pi_Newbie · 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

Code Auswählen

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

								<!-- Cover -->
								<div data-type="image" data-device="Spotify" data-get="track_album_cover_medium" data-size="100%" data-opacity="1" class="middle nocache"></div>
		
								<!-- now playing -->
								<div data-type="label" data-device="Sonos_Bad" data-get="currentTitle"  data-pre-text="&nbsp;" data-post-text="&nbsp;" class="center big top-space-10px"></div>
								<div data-type="label" data-device="Sonos_Bad" data-get="currentArtist" data-pre-text="&nbsp;" data-post-text="&nbsp;" class="center thin"></div>
		
								<!-- Progress -->
								<div class="center top-space-10px">
									<div data-type="label" data-device="Sonos_Bad" data-get="currentTrackPosition" data-color="mplayer-progress" data-substitution="toMinFromSec()" class="thin inline"></div>
									<div data-type="level" data-device="Sonos_Bad" data-get="currentTrackPosition" data-color="mplayer-progress" data-max="duration" data-width="60%" data-timer-state="Sonos_Bad:STATE" data-timer-state-on="play" data-timer-state-off="!on" data-timer-step="1" data-timer-interval="1000" data-margin="15px" class="horizontal inline"></div>
									<div data-type="label" data-device="Sonos_Bad" data-get="duration" data-color="mplayer-off" data-substitution="toMinFromSec()" class="thin inline"></div>
								</div>
		
								<!-- Player Controls -->
								<div class="center row">
								<div data-type="push" data-device="Spotify" data-icon="fa-step-backward" data-on-color="mplayer-on" data-off-color="mplayer-off" data-set-on="prev" data-background-icon="-"></div>
								<div data-type="switch" data-device="Spotify" data-icon="fa-play" data-get-off="is_playing" data-set-off="is_playing" data-get="playStatus" data-get-on="togglePlayback" data-set-on="togglePlayback" data-background-icon="-" data-on-color="mplayer-on" data-off-color="mplayer-off"></div>
								<div data-type="switch" data-device="Spotify" data-get-off="!on" data-set-off="" data-get="playStatus" data-get-on="paused"  data-set-on="pause" data-icon="fa-pause" data-background-icon="-" data-on-color="mplayer-on" data-off-color="mplayer-off"></div>
								<div data-type="push" data-device="Spotify" data-icon="fa-step-forward"  data-on-color="mplayer-on" data-off-color="mplayer-off" data-set-on="next" data-background-icon="-"></div>
								</div>
		
								<!-- Volume -->

Vielleicht kannst Du da etwas erkennen.

l3skon3 · 02 November 2017, 22:09:03

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
Code Auswählen Erweitern
 <div id="tab2" class="tab">  <div data-type="image" data-device="Spotify" data-get="track_album_cover_medium" data-size="100%" data-opacity="1" class="middle nocache"></div>  <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>  <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>  <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> 

Vielleicht kannst Du da etwas erkennen.

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

Dann solle es ok aussehen.

bjoernbo · 10 November 2017, 20:15:19

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.

setstate · 11 November 2017, 21:02:19

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

Code Auswählen


    <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

Code Auswählen

data-type="html" ...

HTML Inhalt ändern (ähnlich Label-Widget)

Code Auswählen

data-type="html" data-content="Device:Reading" data-map-content='{"von":"Nach","from":"To"}'

Beispiel

Code Auswählen

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

Code Auswählen

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"}'>