[Gelöst] FTUI auf iPhone darstellen

uron · 12 April 2021, 13:40:54

Ja, wieder einmal das Thema, was hin und wieder hier im Forum diskutiert wird.
Warum nochmals? Mehrere Threads verweisen auf tote Links und ehrlich gesagt komme ich mit anderen Antworten aufgrund mangelnder Kenntnisse nicht klar.
Deshalb suche ich nach einer einfachen, für mich verständlichen Lösung!

Gegeben ist ein funktionierendes FTUI, was auf meinem iPad tadellos funktioniert.
Die eine oder andere Seite (im Moment erst einmal die PV-Anlage, s.u.) würde ich aber gerne direkt per Link von meinem iPhone aus aufrufen können, wobei ich dort nicht unbedingt eine Menüstruktur brauche.
Ich habe mir bereits testweise eine gesonderte index-Seite (index-mobil.html) gebaut, die ich, wenn ich sie in index.html umbenenne, in der korrekten Darstellung von meinem iPhone aus aufrufen kann.

Die eigentliche Frage ist folgende: Was muss ich tun, um diese index-mobil-Seite von meinem iPhone über die normale index.html (für das iPad) erreichen zu können. Wie erkennt denn FTUI, dass ich per iPhone zugreife?
Hier meine "normale" index.html für das iPad:

Code Auswählen

<!DOCTYPE html>
<html>
<head>
<!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 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/
     */
    -->
    <!--link rel="icon" href="favicon.ico" type="image/x-icon" /-->

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

    <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 -->
	
	<!--link rel="stylesheet" href="lib/fhemSVG.css"  type="text/css"/>
	<link rel="stylesheet" href="lib/openautomation.css"  type="text/css" />
	<link rel="stylesheet" href="lib/material-icons.css"  type="text/css"/>
	<link rel="stylesheet" href="lib/material-icons.min.css"  type="text/css"/>
	<link rel="stylesheet" href="lib/font-awesome.min.css"  type="text/css"/-->
	
	
	<title>FHEM-Tablet-UI</title>
	<meta name="lang" content="de"/>
	<meta name="viewport" content="width_device-width, initial-scale=1.0, maximun-scale=1.0, 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="gridster_cols" content="10"/>
    <meta name="gridster_rows" content="10"/>
	<meta name="gridster_disable" content="1"/>
	<meta name="gridster_margin" content="1"/>
	<meta name="longpoll" content="1">
	<meta name="longpoll_delay" content="1">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">

	<link rel="apple-touch-icon" href="images/apple-touch-icon.png"/>
</head>
<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="10">
                <header>Nav</header>
                <div class="sheet">
					<div class="row">
						<div class="cell">
							<div data-type="pagebutton" data-url="#1_Webradio.html" data-load="#1_Webradio" data-active-pattern=".*#1_Webradio.html" data-icon="" class="nocache" class="big top-space"></div>
							<div data-type="pagebutton" data-url="#1_start.html" data-load="#1_start" data-active-pattern="(.*/|.*index.html|.*#1_start.html)" data-icon="fa-home" class="nocache" class="big default top-space"></div>
							<div data-type="pagebutton" data-url="#1_Licht.html" data-load="#1_Licht" data-active-pattern=".*#1_Licht.html" data-icon="far fa-lightbulb" class="nocache" class="big top-space"></div>
							<div data-type="pagebutton" data-url="#1_Rollos.html" data-load="#1_Rollos" data-active-pattern=".*#1_Rollos.html" data-icon="oa-fts_shutter_40" class="nocache" class="big top-space"></div>
							<div data-type="pagebutton" data-url="#1_Kameras.html" data-load="#1_Kameras" data-active-pattern=".*#1_Kameras.html" data-icon="fas fa-video" class="nocache" class="big top-space"></div>
							<div data-type="pagebutton" data-url="#1_Auto.html" data-load="#1_Auto" data-active-pattern=".*#1_Auto.html" data-icon="fas fa-clock" class="nocache" class="big top-space"></div>
							<div data-type="pagebutton" data-url="#1_Resets.html" data-load="#1_Resets" data-active-pattern=".*#1_Resets.html" data-icon="fas fa-undo" class="nocache" class="big top-space"></div>
							<div data-type="pagebutton" data-url="#1_Heizung.html" data-load="#1_Heizung" data-active-pattern=".*#1_Heizung.html" data-icon="fa-line-chart" class="nocache" class="big top-space"></div>
							<div data-type="pagebutton" data-url="#1_PV-Anlage.html" data-load="#1_PV-Anlage" data-active-pattern=".*#1_PV-Anlage.html" data-icon="fa-solar-panel" class="nocache" class="big top-space"></div>
						</div>
					</div>
					<div class="row">
						<div class="cell bottom-align">
							<div data-type="clock" data-format="j.n." class="bigger darker"></div>
							<div data-type="clock" data-format="l" class="big darker wider"></div>
						</div>
					</div>
				</div>
            </li>
            <li data-row="1" data-col="2" data-sizex="9" data-sizey="10">
				<div class="page" id="1_start"></div>
				<div class="page" id="1_Licht"></div>
				<div class="page" id="1_Rollos"></div>
				<div class="page" id="1_Kameras"></div>
				<div class="page" id="1_Auto"></div>
				<div class="page" id="1_Resets"></div>
				<div class="page" id="1_Heizung"></div>
				<div class="page" id="1_PV-Anlage"></div>
			</li>
        </ul>
    </div>
</body>
</html>

uron · 14 April 2021, 10:06:17

Ist wahrscheinlich eine banale Frage, die Kopfschütteln verursacht, aber sicher beantwortbar ist oder?

Eisix · 14 April 2021, 12:37:20

Warum rufst du nicht einfach deine index-mobil.html vom iPhone Browser auf?
Verstehe nicht deinen Umweg über die index.html.

Gruß
Eisix

uron · 14 April 2021, 15:11:19

Danke Eisix, dass du dich gemeldet hast!
Um deine Frage zu beantworten: Weil ich zu flüchtig gearbeitet habe!

Bei meinem Versuch, diese Seite aufzurufen, hatte ich vergessen, den Port mit anzugeben - banaler Fehler meinerseits!
Sorry!

FHEM Forum

[Gelöst] FTUI auf iPhone darstellen

uron

uron

Eisix

uron