TabletUI auf iPad als Homescreen"App"

Garbsen · 06 Dezember 2016, 15:55:25

Hallo

Bekanntermaßen kann man auf dem iPad (und iPhone) sich Webseiten auf den Home-Bildschirm (quasi als App) ablegen.
Dabei habe ich folgendes für mich nicht erklärbares Verhalten der mit Tabletui erstellten Seiten.
Lege ich eine solche auf dem Himebildschirm ab und öffne sie, bekomme ich die Swite automatisch im Vollbildmodus, völlig ohne Safari-Bestandteile (Menüleiste etc.) klicke ich jetzt in der Seite auf einen PageButton, um eine andere Tabletui Seite zu öffnen, öffnet sich ganz normal Safari und stellt die Seite in einem tab dar.
Das kann ich mit allen meinen Tabletui Seiten reproduzieren. Andere angelegte Web-Siten öffnen sich immer gleich in Safari.
Jemand eine Idee wodurch das gesteuert wird? Fände es am besten, wenn alle Tabletui pages im Vollbild öffnen würden und am besten immer im gleichen.
Wie geht das?

oliverr · 08 Dezember 2016, 15:58:56

Hi,

also mit meiner neu erstellten TabletUI hat es auf anhieb funktioniert, deswegen habe ich mich über Deine Frage gewundert.

Ich gebe mal ein paar Punkte als mögliche Ansatzpunkte, da ich das auch nicht 100% weiß. Und man ja nicht den Aufbau der Seiten bei Dir kennt.

Wenn ich die nachfolgenden Zeilen (in meiner (Haupt-)index.html Datei) auf no ändere, dann gibt es bei mir auch kein Fullscreen mehr.

Deswegen ist die Frage, existieren die beiden Zeilen bei Dir und sind sie auf yes?

Code Auswählen


<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

Bei mir wird alles von der Haupt-index.html Datei übernommen (die Unterseiten haben ja kein Header), evt. könnte das auch eine Ursache sein.

Gruß,
Oliver

Garbsen · 08 Dezember 2016, 20:05:42

Danke für die Antwort.
Bin leider bei HTML (auch) Anfänger. Das Problem liegt wohl (so deute ich Deine Antwort) daran, dass meine Seiten alle gleich aufgebUT SIND, D.H. alle mit dem kompletten Header.
Ich habe halt Anfänger der ich bin, einfach mit copy paste gearbeitet

Da muss ich wohl noch etwas lernen, wie man eine Startseite mit mehreren Unterseiten richtig verknüpft. Da bin ich völlig blank, jedenfalls mache ich es anacheinend falsch. Was muss ich denn alles weglassen?
Hast Du einen Link für mich (nur wenn Du ihn spontan hast, sonst muss ich halt selber suchen)

oliverr · 08 Dezember 2016, 20:43:42

Hi,
bevor ich suche wo ich es her habe, kopiere ich das Grundgerüst mal hier rein.

Schau es Dir an und übernimm es, soweit es für Dich passt.

index.html (So leer lassen wie es ist. Hier sind die Header Einträge)

Code Auswählen


<!DOCTYPE html>
<html>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.2.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2016 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 TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="widget_base_width" content="68">
    <meta name="widget_base_height" content="77">
    <meta name="widget_margin" content="1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_disable" content="1">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->

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


    <link rel="stylesheet" href="/fhem/tablet/fonts/roman/style.css" />
    <link rel="stylesheet" href="/fhem/tablet/fonts/material/style.css" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="/fhem/pgm2/jquery.min.js"></script>
    <script src="lib/jquery.toast.min.js"></script>
    <script src="lib/jquery.gridster.min.js"></script>
    <script src="js/fhem-tablet-ui.js" defer></script>



    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>FHEM-Tablet-UI</title>
</head>
<body>

<div class="gridster">
<ul>
  <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
    <header class="headerTransparent">HOME</header>
    <div data-type="pagetab"
       data-device="st_alert"
       data-get-on='["off","[1-9]{1}|[0-9]{2}"]'
       data-url="index_home.html"
       data-background-icon="fa-circle-thin"
       data-on-background-color="#aa6900"
       data-on-color="#808080"
       data-off-color="#808080"
       data-icon="fa-home"
       data-icons='["fa-home","fa-home warn"]'
       class="bigger top-space">
    </div>

  </li>

</ul>
</div>
</body>
</html>

index_home.html das ist quasi die HOME (Hauptseite)

Code Auswählen


<!DOCTYPE html>
<html>
<head>
        <title>HOME</title>
</head>
<body>

<div class="gridster">
<ul>
<li class="halbTransparent border-left border-right" data-row="1" data-col="1" data-sizex="2" data-sizey="2">
	<header class="headerTransparent">HOME</header>
	<div data-type="pagetab"
		 data-device="st_alert"
		 data-get-on='["off","[1-9]{1}|[0-9]{2}"]'
		 data-url="index_home.html"
		 data-background-icon="fa-circle-thin"
		 data-on-background-color="#aa6900"
		 data-on-color="#808080"
		 data-off-color="#808080"
		 data-icon="fa-home"
		 data-icons='["fa-home","fa-home warn"]'
		 class="bigger top-space">
	</div>
</li>



  <li class="halbTransparent border-left border-right" data-row="3" data-col="1" data-sizex="2" data-sizey="7">
  	<header class="headerTransparent">RÄUME</header>
  	<div class="centered">
  		<div data-type="pagetab"
  			 data-device="bad_alert"
  			 data-icon="fa-tint"
  			 data-states='["off","on"]'
  			 data-url="bad.html"
  			 data-background-icon="fa-circle-thin"
  			 data-on-background-color="#aa6900"
  			 data-on-color="#808080"
  			 data-off-color="#808080"
  			 data-icons='["fa-tint","fa-tint warn"]'
  			 class="bigger">
  		</div>
      

  		<div data-type="pagetab"
  			 data-device="az_alert"
  			 data-icon="ro-pc"
  			 data-states='["off","on"]'
  			 data-url="arbeit.html"
  			 data-background-icon="fa-circle-thin"
  			 data-on-background-color="#aa6900"
  			 data-on-color="#808080"
  			 data-off-color="#808080"
  			 data-icons='["ro-pc","ro-pc warn"]'
  			 class="bigger">
  		</div>
  		<div data-type="pagetab"
  			 data-device="ku_alert"
  			 data-icon="fa-cutlery"
  			 data-states='["off","on"]'
  			 data-url="kuche.html"
  			 data-background-icon="fa-circle-thin"
  			 data-on-background-color="#aa6900"
  			 data-on-color="#808080"
  			 data-off-color="#808080"
  			 data-icons='["fa-cutlery" ,"fa-cutlery warn"]'
  			 class="bigger">
  		</div>
  		<div data-type="pagetab"
  			 data-device="sz_alert"
  			 data-icon="fa-bed"
  			 data-states='["off","on"]'
  			 data-url="schlafzimmer.html"
  			 data-background-icon="fa-circle-thin"
  			 data-on-background-color="#aa6900"
  			 data-on-color="#808080"
  			 data-off-color="#808080"
  			 data-icons='["fa-bed","fa-bed warn"]'
  			 class="bigger">
  		</div>
  		<div data-type="pagetab"
  			 data-device="wz_alert"
  			 data-icon="ro-sofa"
  			 data-states='["off","on"]'
  			 data-url="wohnzimmer.html"
  			 data-background-icon="fa-circle-thin"
  			 data-on-background-color="#aa6900"
  			 data-on-color="#808080"
  			 data-off-color="#808080"
  			 data-icons='["ro-sofa","ro-sofa warn"]'
  			 class="bigger">
  		</div>
  		<div data-type="pagetab"
  			 data-device="dr_ga_alert"
  			 data-icon="fa-tree"
  			 data-states='["off","on"]'
  			 data-url="draussen_garage.html"
  			 data-background-icon="fa-circle-thin"
  			 data-on-background-color="#aa6900"
  			 data-on-color="#808080"
  			 data-off-color="#808080"
  			 data-icons='["fa-tree","fa-tree warn"]'
  			 class="bigger">
  		</div>
  	</div>
  </li>


   Hier kommt der weitere Haupt-Seiten Inhalt rein.


</ul>
</div>
</body>
</html>

bad.html das ist eine Unterseite (von Grundgerüst auch wie index_home.html

Code Auswählen



<!DOCTYPE html>
<html>
<head>
        <title>BAD</title>
</head>
<body>

<div class="gridster">
<ul>
<li class="halbTransparent border-left border-right" data-row="1" data-col="1" data-sizex="2" data-sizey="2">
	<header class="headerTransparent">HOME</header>
	<div data-type="pagetab"
		 data-device="st_alert"
		 data-get-on='["off","[1-9]{1}|[0-9]{2}"]'
		 data-url="index_home.html"
		 data-background-icon="fa-circle-thin"
		 data-on-background-color="#aa6900"
		 data-on-color="#808080"
		 data-off-color="#808080"
		 data-icon="fa-home"
		 data-icons='["fa-home","fa-home warn"]'
		 class="bigger top-space">
	</div>
</li>

 Hier kommt der weitere Unter-Seiten Inhalt rein.

</ul>
</div>
</body>
</html>

Grüße,
Oliver

Garbsen · 08 Dezember 2016, 21:09:49

Danke!
War schon am suchen und bisher nicht wirklich erfolgreich,
Werde das gleich mal ausprobieren

Garbsen · 08 Dezember 2016, 21:32:07

Nochmal Danke, so geht es.
Hoffe, dass das auch anderen hilft
Ich bin immer wieder fasziniert, wie toll hier der "Support" klappt

Garbsen · 08 Dezember 2016, 21:51:38

Jetzt habe ich aber doch noch eine Frage (du weißt ja, kleiner Finger = ganze Hand)
In der index_home ist bei den Buttons ein Device angegeben und abhängig vom State dieses Devices verschiedne icons.
Ich gehe davon aus, dass das jeweilige Device in FHEM angelegt sein muss. Ich habe das natürlich (derzeit) nicht, was ja zum Glück beim Anzeigen der Seite kein Problem macht.
Mich interessiert aber was dieses Device macht, bzw. wie es getriggered wird.
Danke
K-H

oliverr · 08 Dezember 2016, 22:20:08

Ja das kann ich so auf Anhieb auch nicht erklären, denn ich habe das ja auch nur kopiert.

Aber auf http://ueberueck.com/index.php/fhem-hausautomatisierung/14-fhem-konfiguration kannst Du sehen, woher das kommt, denn da habe ich das etwas abgeschaut. Und Roman hat da Dummy Devices angelegt um Alarme damit anzuzeigen. (Batterie)

Gruß,
Oliver

Garbsen · 09 Dezember 2016, 09:41:15

Danke, schaue ich mir an