New FHEM Tablet UI

fh168 · 04 Januar 2016, 23:57:46

Hallo Roman,

ich habe mir deine Website mal angesehen.
wo bekomme ich denn inc_home_button.html und alle weiteren inc.x her?

LG
/robin

viegener · 05 Januar 2016, 00:12:22

Zitat von: Gunther am 04 Januar 2016, 23:50:54
Leider klappt das nicht:
Ich hätte erwartet, dass mir drei Links oben links in FHEM angezeigt werden, sobei mir jetzt auffällt, dass dort FTUI steht und ich das nirgendwo definiert habe.

Geht das überhaupt mit 3 unterschiedlichen FTUIs? Freue mich über Hinweise.

Ja das geht problemlos, allerdings hast Du bei allen drei Definitionen ftui/ stehen

Das macht so keinen Sinn, da die Tablet uis ja unter unterschiedlichen URLs erreichbar sein sollen. Damit solltest Du dort die unterschiedlichen Namen unter denen dei verschiedenen UIs erreichbar sein sollen.

Also z.B.

Code Auswählen


define TABLETUI07 HTTPSRV ftui07 ./www/tablet07 Tablet-UI-07
define TABLETUI10 HTTPSRV ftui10 ./www/tablet10 Tablet-UI-10

kvo1 · 05 Januar 2016, 00:21:50

Zitat von: viegener am 04 Januar 2016, 22:25:07
Warum hast Du defer an den Javascript-Teilen (insbesondere am jquery selbst)?
Gab es irgendwo einen Hinweis defer zu verwenden?

Bei mir verrusacht das eine ganze Reihe von Fehlermeldungen beim Laden Deiner Seiten.
Nimm das defer heraus und dann schauen wir weiter...

Hallo Johannes,
das defer war so in der Vorlage die ich aus dem WIKI hatte , siehe link zuvor !

Werde mal testen !
klaus

roman1528 · 05 Januar 2016, 00:24:14

Zitat von: viegener am 04 Januar 2016, 23:46:54
Ich denke das lässt sich lösen, allerdings sprichst Du meines Wissens nach Dein tablet ui unter

.../www/tablet/...

an, das entspricht ja genau dem Fall, den ich oben nicht dargestellt habe, denn dafür benötigt man nicht unbedingt eine HTTPSRV definition.

Ob HTTPSRV oder Peng. Ob ich die direkt aufrufe oder über /ftui (also mit HTTPSRV) es ist schnuppe!

Packe ich keinen Slash hinten dran bekomm ich nur gewurste aus FHEM und FTUI! Das ist Fakt.

roman1528 · 05 Januar 2016, 00:25:33

Zitat von: justme1968 am 04 Januar 2016, 23:09:53
ich habe eben zusätzlich zu einem 7'' tablet noch ein 10'' in betrieb genommen. beide haben 1280x800 auflösung. wenn ich auf dem 10'' den bildschirm fülle wird auf dem 7'' in beide richtungen eine ganze menge abgeschnitten, wenn ich auf dem 7'' den bildschirm fülle ist auf dem 10'' noch massig platz. hat jemand ein idee warum das trotz gleicher auflösung passiert?

danke
andre

Dann haben sie NICHT die gleiche Auflösung!

roman1528 · 05 Januar 2016, 00:28:22

Zitat von: Gunther am 04 Januar 2016, 23:36:55
Ich möchte gerne für meine Devices unterschiedliche Tablet UIs aufbauen.
Oder besteht mittlerweile die Möglichkeit das Ganze Full Responsive aufzubauen?

Falls nein, kann ich das wie folgt machen?:
######## Frontends #########
# Tablet UI für 7" Tablets
define TABLETUI07 HTTPSRV ftui/ ./www/tablet07 Tablet-UI

# Tablet UI für 10" Tablets
define TABLETUI10 HTTPSRV ftui/ ./www/tablet10 Tablet-UI

# Tablet UI für IPhone
define TABLETUIIPHONE HTTPSRV ftui/ ./www/tabletIphone Tablet-UI

Nicht alle 3 Links gleich nennen (Tablet-UI)

Code Auswählen

# Tablet UI für 7" Tablets
define TABLETUI07 HTTPSRV ftui/ ./www/tablet07 Tablet-UI-07

# Tablet UI für 10" Tablets
define TABLETUI10 HTTPSRV ftui/ ./www/tablet10 Tablet-UI-10

# Tablet UI für IPhone
define TABLETUIIPHONE HTTPSRV ftui/ ./www/tabletIphone Tablet-UI-APFEL

roman1528 · 05 Januar 2016, 00:30:11

Zitat von: fh168 am 04 Januar 2016, 23:57:46
Hallo Roman,

ich habe mir deine Website mal angesehen.
wo bekomme ich denn inc_home_button.html und alle weiteren inc.x her?

LG
/robin

Für meine Tablet-Version sind die Files jetzt auch oben. Am Ende der Seite sie *.zip Datei herunterladen. Da ist alles drin^^

Grüße^^

Gunther · 05 Januar 2016, 00:37:48

Zitat von: viegener am 05 Januar 2016, 00:12:22
Ja das geht problemlos, allerdings hast Du bei allen drei Definitionen ftui/ stehen

Das macht so keinen Sinn, da die Tablet uis ja unter unterschiedlichen URLs erreichbar sein sollen. Damit solltest Du dort die unterschiedlichen Namen unter denen dei verschiedenen UIs erreichbar sein sollen.

Also z.B.

Code Auswählen Erweitern
define TABLETUI07 HTTPSRV ftui07 ./www/tablet07 Tablet-UI-07 define TABLETUI10 HTTPSRV ftui10 ./www/tablet10 Tablet-UI-10

Leider ist das bei mir nicht so problemlos:

So sieht es bei mir jetzt aus:

Code Auswählen

# Tablet UI für 7" Tablets
define TABLETUI07 HTTPSRV ftui07 ./www/tablet07 Tablet-UI-07

# Tablet UI für 10" Tablets
define TABLETUI10 HTTPSRV ftui10 ./www/tablet10 Tablet-UI-10

# Tablet UI für IPhone
define TABLETUIIPHONE HTTPSRV ftuiiphone ./www/tabletIphone Tablet-UI-Iphone

Ich habe auch ftui07/ versucht.

Unter www habe ich meinen ursprünglichen Ordner tablet in tablet07 umbenannt und kopiert in die Ordner tablet10 und tabletIphone.

Leider kommt nur folgendes zum Vorschein: vgl. Anhang.

roman1528 · 05 Januar 2016, 00:42:13

Zitat von: Gunther am 05 Januar 2016, 00:37:48
Leider ist das bei mir nicht so problemlos:

So sieht es bei mir jetzt aus:
Code Auswählen Erweitern
# Tablet UI für 7" Tablets define TABLETUI07 HTTPSRV ftui07 ./www/tablet07 Tablet-UI-07 # Tablet UI für 10" Tablets define TABLETUI10 HTTPSRV ftui10 ./www/tablet10 Tablet-UI-10 # Tablet UI für IPhone define TABLETUIIPHONE HTTPSRV ftuiiphone ./www/tabletIphone Tablet-UI-Iphone

Ich habe auch ftui07/ versucht.

Unter www habe ich meinen ursprünglichen Ordner tablet in tablet07 umbenannt und kopiert in die Ordner tablet10 und tabletIphone.

Leider kommt nur folgendes zum Vorschein: vgl. Anhang.

du musst die verweise in deine index <head> bearbeiten.

Code Auswählen

        <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
        <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
        <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
		<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
		<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-tablet.css" />

        <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>

Grüße^^

Schau dir von meinen beiden versionen die index.html an

http://ueberueck.com/index.php/fhem-hausautomatisierung/fhem-tablet-ui

Gunther · 05 Januar 2016, 01:03:50

Danke, das bringt mich einen kleinen Schritt weiter.

Nun sieht es wie im Anhang aus.

Meine Index (head), z. B. für 7 Zoll sieht so aus:

Code Auswählen

<head>
	<!-- 
	 /* FHEM tablet ui */
	 /*
	 * Just another dashboard for FHEM
	 *
         * Version: 1.3.5
	 * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
	 * URL: https://github.com/knowthelist/fhem-tablet-ui
	 *
	 * Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
	 * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
	 *
	 * - create a new folder named 'tablet' in /<fhem-path>/www
	 * - copy all files incl. sub folders into /<fhem-path>/www/tablet
	 * - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
	 * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
	 */
	-->
	<title>FHEM-Tablet-UI</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="widget_base_width" content="144">
	<meta name="widget_base_height" content="112">
	<meta name="widget_margin" content="2">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
	<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
	<meta name='gridster_disable' content='1'>
	
	<link rel="stylesheet" href="/fhem/tablet07/lib/jquery.gridster.min.css" />
	<link rel="stylesheet" href="/fhem/tablet07/css/fhem-tablet-ui.css" />
	<link rel="stylesheet" href="/fhem/tablet07/lib/font-awesome.min.css" />
	<link rel="stylesheet" href="/fhem/tablet07/lib/jquery.toast.min.css" />
	<link rel="stylesheet" href="/fhem/tablet07/lib/powerange.min.css" />
	<link rel="stylesheet" href="/fhem/tablet07/lib/openautomation.css" />
	<link rel="stylesheet" href="/fhem/tablet07/eigenefonts/gk/style.css">
	<link rel="stylesheet" href="./css/wopr.css">
	<link rel="stylesheet" href="./css/style.css">
	<link rel="stylesheet" href="./css/own.css">
	
	<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet07/lib/jquery.knob.mod.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet07/lib/jquery.toast.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet07/lib/jquery.circlemenu.js"></script>
	<script type="text/javascript" src="/fhem/tablet07/lib/powerange.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet07/lib/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet07/lib/fa-multi-button.min.js"></script>
	<script type="text/javascript" src="/fhem/tablet07/js/fhem-tablet-ui.js"></script>
	<script type="text/javascript" src="/fhem/tablet07/js/widget_calview.js"></script>	
	
	<!-- Enable this lines for usage with WebViewControl --><!-- -->
	<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
	<script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
	<script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
	<!-- End for WebViewControl -->


</head>

Meine fhem.cfg so:

Code Auswählen

# Tablet UI für 7" Tablets
define TABLETUI07 HTTPSRV ftui07/ ./www/tablet07 Tablet-UI-7

# Tablet UI für 10" Tablets
define TABLETUI10 HTTPSRV ftui10/ ./www/tablet10 Tablet-UI-10

# Tablet UI für IPhone
define TABLETUIIPHONE HTTPSRV ftuiiphone/ ./www/tabletiphone Tablet-UI-Iphone

Muss hier z. B. bei 7 Zoll nun
ftui07/ oder ftui07 stehen?

Was mache ich noch falsch?

Habe die Seiten mal in einem anderen Browser mit geleertem Cache geöffnet. Leider wird das auch nichts.

viegener · 05 Januar 2016, 01:10:38

Zitat von: kvo1 am 05 Januar 2016, 00:21:50
Hallo Johannes,
das defer war so in der Vorlage die ich aus dem WIKI hatte , siehe link zuvor !

Werde mal testen !
klaus

Ich denke warum setstate das defer aufgenommen hat, kann er vermutlich selber besser erklären.
In Deinem HTML ist aber wohl eine Mischung von Skripts die sofort ausgeführt werden und welchen die defer verwenden. Problem ein grosser Teil der Skripte setzt aufeinander auf und insbesondere das jquery.min.js ist elementar für alle widgets und auch alle anderen Skripte die jquery im Namen haben.

Eine Alternatvie wäre also alle Skripte auf defer zu setzen.

roman1528 · 05 Januar 2016, 01:13:45

Zitat von: Gunther am 05 Januar 2016, 01:03:50
Danke, das bringt mich einen kleinen Schritt weiter.

Nun sieht es wie im Anhang aus.

Meine Index (head), z. B. für 7 Zoll sieht so aus:
Code Auswählen Erweitern
<head>  <title>FHEM-Tablet-UI</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="widget_base_width" content="144"> <meta name="widget_base_height" content="112"> <meta name="widget_margin" content="2"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="longpoll" content="1">  <meta name="debug" content="0">  <meta name='gridster_disable' content='1'> <link rel="stylesheet" href="/fhem/tablet07/lib/jquery.gridster.min.css" /> <link rel="stylesheet" href="/fhem/tablet07/css/fhem-tablet-ui.css" /> <link rel="stylesheet" href="/fhem/tablet07/lib/font-awesome.min.css" /> <link rel="stylesheet" href="/fhem/tablet07/lib/jquery.toast.min.css" /> <link rel="stylesheet" href="/fhem/tablet07/lib/powerange.min.css" /> <link rel="stylesheet" href="/fhem/tablet07/lib/openautomation.css" /> <link rel="stylesheet" href="/fhem/tablet07/eigenefonts/gk/style.css"> <link rel="stylesheet" href="./css/wopr.css"> <link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/own.css"> <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script> <script type="text/javascript" src="/fhem/tablet07/lib/jquery.knob.mod.min.js"></script> <script type="text/javascript" src="/fhem/tablet07/lib/jquery.toast.min.js"></script> <script type="text/javascript" src="/fhem/tablet07/lib/jquery.circlemenu.js"></script> <script type="text/javascript" src="/fhem/tablet07/lib/powerange.min.js"></script> <script type="text/javascript" src="/fhem/tablet07/lib/jquery.gridster.min.js"></script> <script type="text/javascript" src="/fhem/tablet07/lib/fa-multi-button.min.js"></script> <script type="text/javascript" src="/fhem/tablet07/js/fhem-tablet-ui.js"></script> <script type="text/javascript" src="/fhem/tablet07/js/widget_calview.js"></script>  <script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script> <script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script> <script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>  </head>

Meine fhem.cfg so:
Code Auswählen Erweitern
# Tablet UI für 7" Tablets define TABLETUI07 HTTPSRV ftui07/ ./www/tablet07 Tablet-UI-7 # Tablet UI für 10" Tablets define TABLETUI10 HTTPSRV ftui10/ ./www/tablet10 Tablet-UI-10 # Tablet UI für IPhone define TABLETUIIPHONE HTTPSRV ftuiiphone/ ./www/tabletiphone Tablet-UI-Iphone

Muss hier z. B. bei 7 Zoll nun
ftui07/ oder ftui07 stehen?

Was mache ich noch falsch?

Habe die Seiten mal in einem anderen Browser mit geleertem Cache geöffnet. Leider wird das auch nichts.

hinter ftui07
UND
hinter ./www/tablet07

also so:

define TABLETUI07 HTTPSRV ftui07/ ./www/tablet07/ Tablet-UI-7

Slash am Ende sonst gibt's Wurstsalat.

Grüße^^

viegener · 05 Januar 2016, 01:16:20

Zitat von: roman1528 am 05 Januar 2016, 00:24:14
Ob HTTPSRV oder Peng. Ob ich die direkt aufrufe oder über /ftui (also mit HTTPSRV) es ist schnuppe!

Packe ich keinen Slash hinten dran bekomm ich nur gewurste aus FHEM und FTUI! Das ist Fakt.

Ich will natürlich nicht das Gewurste kommt oder gar Peng

Insofern packe ich mal in meiner Beschreibung oben noch einen / hintendran als Alternative.

roman1528 · 05 Januar 2016, 01:18:10

Zitat von: viegener am 05 Januar 2016, 01:16:20
Ich will natürlich nicht das Gewurste kommt oder gar Peng

Insofern packe ich mal in meiner Beschreibung oben noch einen / hintendran als Alternative.

Alternative klingt gut.
Probieren geht über studieren.

Gunther · 05 Januar 2016, 01:23:12

Leute, Ihr seid super. Und das um diese Zeit!

Das / hinter dem www... hat gefehlt.

Danke Euch!
Dann geht es nun ums umbauen, oder sagen wir mal neu aufbauen für 10 Zoll.
Bin mal gespannt, ob mein Kram von vor einigen Wochen nach dem Update noch geht.

Muss ich eigentlich etwas beachten, wenn ich update und mehrere Versionen (7, 10 Zoll und Iphone) habe, oder wird das Update immer global gemacht?
Kommt es vor, dass neue css-Dateien oder ähnliches dazukommt und ich das ggf. gar nicht mitbekomme, diese aber in meine index.html-Dateien intergrieren müsste?