Tastenfeld / Navigationswippe / dynamische Webseiten im Webfront darstellen

In einem anderen Thread
Combobox

wurde ursprünglich die Frage gestellt wie man z.B. ein Tastenfeld darstellen kann. Eine Möglichkeit besteht darin externe Zusatzsoftware wie IPSView oder NEO zu benutzten, die beide separate Apps und einen Editor zur Verfügung stellen, damit man solche Dinge einfach anordnen kann.

Hier wird auf die Möglichkeit eingegangen wie man selber Webseiten erstellt, diese ins Webfront einbindet und damit Befehle an IP-Symcon schickt und dann die Statusrückmeldung wieder in der Webseite visualisiert.

Die Lösung besteht aus mehreren Teilen die jeweils nach Anwendungszweck angepasst werden müssen.

[ul]
[li]eigene Webseite im User Ordner von IP-Symcon[/li][li]CSS Datei für Layout der eigenen Webseite[/li][li]Javascript Datei um die Befehle die man senden will anzupassen[/li][li]Eine PHP Seite, die die Befehle der Webseite entgegennimmt, die Befehle in IPS ausführt und den Response an die Webseite zurückgibt[/li][li]Einer String Variable mit dem Profil HTMLBox um die Seite im Webfront anzuzeigen[/li][/ul]

Den Weg über die Seite im user Ordner wählen wir, weil IP-Symcon teilweise Probleme damit hat den gleichen Inhalt nur in einer HTMLBox anzuzeigen. Außerdem hat dies den Vorteil das man die Webseite auch einfach extern aufrufen kann oder in externe Anwendungen einbinden kann.

Navigation.jpg


das soll nun erstellt werden und muss dann später an individuelle Bedürfnisse angepasst werden.

Im Anhang befinden sich zip Files die jeweils die Seite enthalten. Da es ja individuell unterschiedlich ist was den passieren soll wenn eine Zahl oder eine Navigationstaste gedrückt wird muss dann noch der eigentliche Befehl in IP-Symcon angepasst werden.

Installation:

Zahlenfeld.zip (274 KB)
JS CSS PHP.zip (172 KB)
Background.zip (674 KB)
Navigation.zip (840 KB)

Dateien:

[ul]
[li]alle Zip Dateien herunterladen und entpacken[/li][li]der Ordner neo mit Unterverzeichnissen muss in das Verzeichnis webfront/user kopiert werden[/li][li]Background.zip enthält die Hintergrundsgrafik, für beide Seiten benötigt[/li][li]JS CSS PHP.zip enthält die CSS, Javascript und PHP Datei, für beide Seiten benötigt[/li][li]Zahlenfeld.zip enthält die Datei für das Nummernfeld und die Grafiken[/li][li]Navigation.zip enthält die Datei für die Navigationswippe und die Grafiken[/li][/ul]

Konfiguration:

Die Webseite naviundbuttons.html und tastenfeld.html im user Ordner enthält jeweils die Ansicht die im Webfront später eingebunden wird.

tastenfeld.html


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Combobox</title>
<link href="css/dreambox.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/jquery.ajax-ips.js"></script>
<link href="css/jquerytest.css" rel="stylesheet" type="text/css">
<!--<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet" type="text/css">-->
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css">
<link href="css/hover.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n6:default;bilbo:n4:default;acme:n4:default.js" type="text/javascript"></script>
</head>

<body>
<div data-role="page" id="page">
  <div data-role="content">
  <section>
  		<main id="dreamboxleft" class="left">
       
             <div><a href="#" id="dreamboxzap-einblenden"><img src="images/buttons/toggle_expand_small.png" width="9" height="9" alt=""/></a>
         <a href="#" id="dreamboxzap-ausblenden"><img src="images/buttons/toggle_collapse_small.png" width="9" height="9" alt=""/></a></div>
            <div id="togglezap">
            <!--<div id="togglezap" data-role="collapsible" data-collapsed="false">-->
                 <h3>Fernbedienung</h3>
                 <div id="pushedbutton" class="channelbutton">Sender</div>
<link async href="http://fonts.googleapis.com/css?family=Warnes" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
                 <section class="dreamboxzapbuttons">
                 <section id="zaprow1">
                 	 <div class="zapbutton hvr-glow zaptab" id="ARDZap"><img class="zapimage" src="images/buttons/Translucent & Metall/1_HD.png" id="ARDZapLogo" alt="ARDZapLogo"></div>
                     <div class="zapbutton hvr-glow zaptab" id="ZDFZap"><img class="zapimage" src="images/buttons/Translucent & Metall/ZDF_HD.png" id="ZDFZapLogo" alt="ZDFZapLogo"></div>
                     <div class="zapbutton hvr-glow zaptab" id="RTLZap"><img class="zapimage" src="images/buttons/Translucent & Metall/RTL.png" id="RTLZapLogo" alt="RTLZapLogo"></div>
                     <div class="zapbutton hvr-glow zaptab" id="Pro7Zap"><img class="zapimage" src="images/buttons/Translucent & Metall/Pro7.png" id="Pro7ZapLogo" alt="Pro7ZapLogo"></div>
                 </section>    
                 <section id="zaprow2">
                     <div class="zapbutton hvr-glow zaptab" id="Sat1Zap"><img class="zapimage" src="images/buttons/Translucent & Metall/Sat1.png" id="Sat1ZapLogo" alt="Sat1ZapLogo"></div>
                     <div class="zapbutton hvr-glow zaptab" id="VoxZap"><img class="zapimage" src="images/buttons/Translucent & Metall/Vox.png" id="VoxZapLogo" alt="VoxZapLogo"></div>
                     <div class="zapbutton hvr-glow zaptab" id="Kabel1Zap"><img class="zapimage" src="images/buttons/Translucent & Metall/kabel1.png" id="Kabel1ZapLogo" alt="Kabel1ZapLogo"></div>
                     <div class="zapbutton hvr-glow zaptab" id="RTL2Zap"><img class="zapimage" src="images/buttons/Translucent & Metall/RTL2.png" id="RTL2ZapLogo" alt="RTL2ZapLogo"></div>
                 </section>
                 <section id="zaprow3">
                 <div class="zapbutton hvr-glow zaptab" id="HRZap"><img class="zapimage" src="images/buttons/Translucent & Metall/HR.png" id="HRZapLogo" alt="HRZapLogo"></div>
                 <div class="zapbutton hvr-glow zaptab" id="NDRZap"><img class="zapimage" src="images/buttons/Translucent & Metall/NDR_HD.png" id="NDRZapLogo" alt="NDRZapLogo"></div>
                 <div class="zapbutton hvr-glow zaptab" id="SWRZap"><img class="zapimage" src="images/buttons/Translucent & Metall/SWR_HD.png" id="SWRZapLogo" alt="SWRZapLogo"></div>
                 <div class="zapbutton hvr-glow zaptab" id="WDRZap"><img class="zapimage" src="images/buttons/Translucent & Metall/WDR_HD.png" id="WDRZapLogo" alt="WDRZapLogo"></div>
                 </section>
                 <section id="zaprow4">
                 <div class="zapbutton hvr-glow zaptab" id="BRZap"><img class="zapimage" src="images/buttons/Translucent & Metall/BR_HD.png" id="BRZapLogo" alt="BRZapLogo"></div>
                 <div class="zapbutton hvr-glow zaptab" id="NeoHDZap"><img class="zapimage" src="images/buttons/Translucent & Metall/neo_HD.png" id="NeoHDZapLogo" alt="NeoHDZapLogo"></div>
                 <div class="zapbutton hvr-glow zaptab" id="SixxZap"><img class="zapimage" src="images/buttons/Translucent & Metall/SIXX.png" id="SixxZapLogo" alt="SixxZapLogo"></div>
                 <div class="zapbutton hvr-glow zaptab" id="Tageschau24Zap"><img class="zapimage" src="images/buttons/Translucent & Metall/tagesschau24.png" id="Tageschau24ZapLogo" alt="Tageschau24ZapLogo"></div>
                 </section>
                  <section id="zaprow5">
                  <div class="zapbutton hvr-glow zaptab" id="KikaHDZap"><img class="zapimage" src="images/buttons/Translucent & Metall/KiKA_HD.png" id="KikaHDZapLogo" alt="KikaHDZapLogo"></div>
                  <div class="zapbutton hvr-glow zaptab" id="SuperRTLZap"><img class="zapimage" src="images/buttons/Translucent & Metall/Super_RTL.png" id="SuperRTLZapLogo" alt="SuperRTLZapLogo"></div>
                  <div class="zapbutton hvr-glow zaptab" id="DisneyChannelZap"><img class="zapimage" src="images/buttons/Translucent & Metall/Disney-HD.png" id="DisneyChannelZapLogo" alt="DisneyChannelZapLogo"></div>
                  <div class="zapbutton hvr-glow zaptab" id="Tele5Zap"><img class="zapimage" src="images/buttons/Translucent & Metall/Tele5.png" id="Tele5ZapLogo" alt="Tele5ZapLogo"></div>
                 </section>
                 <div class="zaptabbottom"></div>
                 	
                 </section>
                 </div>		
      
       </main>
             
  </section>
         
  </div>
</div>


</body>
</html>

naviundbuttons.html


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Navigation und Buttons</title>
<link href="css/dreambox.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/jquery.ajax-ips.js"></script>
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css">
<link href="css/neo.css" rel="stylesheet" type="text/css">
<link href="css/hover.css" rel="stylesheet" media="all">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n6:default;bilbo:n4:default;acme:n4:default.js" type="text/javascript"></script>
</head>

<body>
<div data-role="page" id="pageindex">
  <div data-role="content">
    <main class="neoremotepage">
<section id="navdreambox">
        <img class="hvr-shrink" src="images/buttons/steuerkreuz-links.png" id="navdreamleft" width="70" height="144" alt="left"/>
        <img class="hvr-shrink" src="images/buttons/steuerkreuz-oben.png" id="navdreamup" width="147" height="71" alt="up"/>
        <img class="hvr-shrink" src="images/buttons/steuerkreuz-rechts.png" alt="right" width="69" height="144" id="navdreamright"/>
        <img class="hvr-bounce-out" src="images/buttons/steuerkreuz-ok.png" id="navdreamenter" width="115" height="115" alt="enter"/>
        <img class="hvr-shrink" src="images/buttons/steuerkreuz-unten.png" id="navdreamdown" width="143" height="68" alt="down"/>
        </section>
            <section id="remotecolourdreambox">
            <img src="images/buttons/spherered.png" alt="red" width="90" height="83" class="hvr-float" id="dreamred"/>
            <img src="images/buttons/spheregelb.png" alt="yellow" width="90" height="83" class="hvr-float" id="dreamyellow"/>
            <img src="images/buttons/spheregreen.png" alt="green" width="90" height="83" class="hvr-float" id="dreamgreen"/>
            <img src="images/buttons/sphereblue.png" alt="blue" width="90" height="83" class="hvr-float" id="dreamblue"/>
            </section>
            <div id="testclick">Hier klicken</div>
      <div id="testchange">Raum für den Inhalt des neuen Div-Tags</div>
      <div id="responseips">Raum für den Inhalt IPS Response</div>
	</main>

  </div>
</div>


</body>
</html>


CSS Beispiel Klasse zapbutton


.zapbutton {
	/* [disabled]background-color: #0A0A0A; */
	border-radius: 13px;
	-webkit-box-shadow: 4px 4px 7px #272424;
	box-shadow: 4px 4px 7px #272424;
	text-align: center;
	vertical-align: middle;
	color: #D6D8CF;
	font-family: acme;
	font-style: normal;
	font-weight: 400;
	font-size: xx-large;
	text-shadow: 2px 2px 4px #252323;
	background-image: url(../images/buttons/Metall.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 80px;
	height: 80px;
}

Hier kann z.B. mit border-radius die Rundung der Tastenecken verändert werden, 0 entspricht einem Rechteck.
box-shadow gibt den Schattenwurf an und die Farbe des Schattens.

Die Javascript Datei ist an die eigenen Bedürfnisse anzupassen.

Javascript


$('#ARDZap').click(function(){
		$('#pushedbutton').html('ARD');
    	ajaxrequest('cmd/dreambox/dreamboxrequest.php', 'get', 'command=ARD');		
	});

Diese Funktion sendet den Befehl und verändert z.B. ein Element der Webseite


$('#ARDZap').click(function(){

#ARDZap ist die ID des Tags der die Funktion auslöst bei einem Klick.


$('#pushedbutton').html('ARD');

#pushedbutton ist die ID eines div Tags der unmittelbar nach dem Drücken des Buttons verändert wird. Dies ist direkt und keine Rückmeldung von IP-Symcon.
Dies kann man nutzten wenn man mit JS direkt etwas verändern will ohne auf eine Rückmeldung von IP-Symcon zu warten.


ajaxrequest('cmd/dreambox/dreamboxrequest.php', 'get', 'command=ARD');		

Ruft die Funktion ajaxrequest auf. Diese schickt an die PHP Datei per get einen Request mit dem command. Das command ist so zu wählen das man dies am besten in der PHP Datei gleich weiterverwenden kann.
Sobald IP-Symcon einen Response gesendet hat nimmt die Funktion wieder den Response entgegen und leitet diesen zur Auswertung an eine weitere Funktion weiter.


// Zap ein und Ausblenden
$('#dreamboxzap-ausblenden').click(function(){
    	$('#togglezap').hide('slow');
    });
	
		
		$('#dreamboxzap-einblenden').click(function(){
    	$('#togglezap').show('slow');
    });	

Die Funktion blendet ein Tag ein oder aus. dreamzap-ausblenden ist die ID des Tag der angeklickt werden muss damit der Tag mit der ID togglezap ein bzw. ausgeblendet wird.


//Ajax aufrufen
	function ajaxrequest(action, method, data)
		{
			// Der eigentliche AJAX Aufruf
			$.ajax({
				url : action,
				type : method,
				//contentType: "application/x-www-form-urlencoded; charset=UTF-8";
				data : data,
				//dataType: "xml",
			}).done(function (data) {
				// Bei Erfolg
					//alert("Erfolgreich:
 XML Response:
" + data);
					
					//Daten auswerten
					// Antwort des Servers -> als XML-Dokument
					e2response(data);	
					return data;
			}).fail(function() {
				// Bei Fehler
				alert("Fehler Ajax!");
				
			}).always(function() {
				// Immer
				 //alert("Beendet!");
				// Funktionen bei Beenden
				//cue the page loader
				//$.mobile.loading( 'hide' );
			});
		}	

Diese Funktion kann unverändert bleiben. Sie schickt den Ajax Request, nimmt den Response entgegen und leitet diesen an die Funktion e2response weiter. Wenn ein Fehler auftritt wirft die Funktion eine Fehlermeldung.


//XML Response auswerten
//*
//Dreambox
// Auf command prüfen und die passende function aufrufen 
	function e2response(data)
		{
			// Dreambox Funktionsanfrage prüfen und passende Auswertung aufrufen
			// XML Antworten Child names sind je nach Funktion unterschiedlich daher muss der Name vom ersten Child geprüft werden
			//alert ("e2response: Ok");
			
			// Prüft auf den ersten Childname des XML
			var firstnode = data.documentElement.nodeName;
			//alert ("Name der ersten Node:
" + firstnode);
						
			if (firstnode === "statuslist")
			{
				
				$(data).find('status').each(function()
				{
						var status = $(this).find('neostatus').text();
						alert (status);
						if (status === "Alles Prima")
							{
								
								$("#responseips").html(status);
								alert ("Status "+status+" !");
								
							}
						if (status === "Alles Bunt")
							{
								
								$("#responseips").html(status);
								alert ("Status "+status+" !");
								
							}
				
				});
		
			}
	
		}		

Diese Funktion muss individuell angepasst werden. Sie nimmt den Response von IP-Symcon entgegen und macht dann etwas Aufgrund vom Response z.B eine Aktion in der Webseite. So kann man dann Aufgrund eines zurückgemeldeten Response von IP-Symcom z.B. Dinge ein oder ausblenden, CSS Atribute verändern oder eben ein Response in einem Tag zurückgeben.
In dem Beispiel gibt es eine Meldung aus wenn der Status Alles Prima oder Alles Bunt von IP-Symcon zurückgesendet wurde wenn einer der farbigen Kugeln oder Tastenwippe gedrückt worden ist. Man kann dann natürlich aufgrund vom Response auch wieder mit Funktionen Inhalte der Seite verändern oder CSS Atribute ändern (siehe oben).

Wichtig ist wenn man selber Seiten erstellt, das jedem Tag eine eindeutige ID zugewiesen wird, dies ist notwendig um mit Javascript eine eindeutige Zuordnung zu ermöglichen.
Das Layout setzten wir in der separten CSS Datei (dreambox.css).
Um Effekte zu nutzen können wir eigene CSS Klassen erstellen oder auch auf vorhandene zurückgreifen.
Für die Hover Effekte wir hier
Hover.css - A collection of CSS3 powered hover effects
benutzt. Hier kann jeder Hover Effekt zugewiesen werden indem man einfach dem Tag die passende Klasse zuweist.

Beispiel


<div class="zapbutton hvr-glow zaptab" id="ARDZap"><img class="zapimage" src="images/buttons/Translucent & Metall/1_HD.png" id="ARDZapLogo" alt="ARDZapLogo"></div>

Hier wurde dem Tag die Klasse hvr-glow zugewiesen. Die Klasse zaptab dient der Einstellung des Abstands zwischen den Buttons, die Klasse zapbutton dient der Einstellung des Buttons wie Rundung der Ecken, Schattenwurf, Hintergrund usw.

Die PHP Datei dreamboxrequest.php ist individuell an das anzupassen was dann in IP-Symcon passieren soll und was IP-Symcon als Response an die Seite zurückgeben soll


<?php
header('Content-Type: text/xml; charset=utf-8'); // sorgt für die korrekte XML-Kodierung
header('Cache-Control: must-revalidate, pre-check=0, no-store, no-cache, max-age=0, post-check=0'); // ist mal wieder wichtig wegen IE
// Alert Anzeige zeigt XML nicht an.
// FUNKTIONIERT ! XML


/***********************************************************************************************/

//Prüft ob POST oder GET

//POST
if (isset($_POST["command"]))
	{
		//echo "Es wurde POST verwendet";	
		
		// Command auslesen
		$command  = $_POST["command"];
		getdataips($command);
				
		// Leerzeichen vor und hinter den namen entfernen, sowie alles zu Kleinschreibung ändern
		//$vorname  = trim(strtolower($vorname));
		//$nachname = trim(strtolower($nachname));
		
	}
//GET
elseif (isset($_GET["command"]))
	{
		//echo "Es wurde GET verwendet";
		// Command auslesen
		
		$command = $_GET["command"];
		getdataips($command);
	}
//kein GET oder POST
else 
	{
		echo "Es wurden keine Daten empfangen";
	}

function sendstatusresponse($command, $status)
	{
		echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>
";
		echo "<statuslist>
";
		echo "<status>
";
		echo "<command>".$command."</command>
";
		echo "<neostatus>".$status."</neostatus>
";
		echo "</status>
";
		echo "</statuslist>
";
	}

function getdataips($command)
	{
		// Den gesendeten Befehl prüfen und passende Daten liefern
				
		// Skript starten
		if ($command == "ARD")// Befehl ausführen
			{
				//IPS_RunScript(48973 /*[Erdgeschoss\Wohnzimmer\Dreambox 8000\Status\Standby]*/);	
				SetValue(22247, "ARD");
				//$status = GetValue(12345); /* Status Dreambox */
				$status = "ARD";
				//Code to create XML file
				sendstatusresponse($command, $status);
			}
		elseif ($command == "ZDF")// Befehl ausführen
			{
				//IPS_RunScript(44490 /*[Erdgeschoss\Wohnzimmer\Dreambox 8000\Status\Wakeup form Standby]*/);
				SetValue(22247, "ZDF");
				//$status = GetValue(53181 /*[Erdgeschoss\Wohnzimmer\Dreambox 8000\Status]*/); /* Status Dreambox */
				$status = "ZDF";
				sendstatusresponse($command, $status);
			}
		elseif ($command == "neooff")// Befehl ausführen
			{
			
				$status = $rpc->GetValue(22705 /*[Mediola\Testdevice\MediolaTest\Status]*/);
				//Code to create XML file
				if ($status == "true")
				{
					SetValue(22705 /*[Mediola\Testdevice\MediolaTest\Status]*/, false);
				}
				$status = "false";
				sendstatusresponse($command, $status);

			}
		elseif ($command == "neoon")// Befehl ausführen
			{
			
				$status = $rpc->GetValue(22705 /*[Mediola\Testdevice\MediolaTest\Status]*/);
				//Code to create XML file
				if ($status == "false")
				{
					SetValue(22705 /*[Mediola\Testdevice\MediolaTest\Status]*/, true);
				}
				$status = "true";
				sendstatusresponse($command, $status);
			}
		elseif ($command == "neostatus?")// Befehl ausführen
			{
				$status = $rpc->GetValue(22705 /*[Mediola\Testdevice\MediolaTest\Status]*/);
				sendstatusresponse($command, $status);
			}			
		
		//Dreambox Cursor
		else if ($command == "dreamleft" OR $command == "dreamright" OR $command == "dreamup" OR $command == "dreamdown" OR $command == "dreamenter" )
			{
				//Befehl absetzten
				$status = "Alles Prima";
				sendstatusresponse($command, $status);
			}
		
		//Dreambox Remote
		else if ($command == "dreamred" OR $command == "dreamblue" OR $command == "dreamyellow" OR $command == "dreamred")
			{
				//Befehl absetzten
				$status = "Alles Bunt";
				sendstatusresponse($command, $status);
			}
												
	}

?>

Die PHP Seite nimmt den Ajax Request von der Webseite entgegen und führt dann eine Aktion aus und sendet einen Response und die Webseite zurück.
Als Aktion können hier ganz normal alle in der Dokumentation von IP-Symcon aufgeführten Befehle ausgeführt werden.


function getdataips($command)
	{
		// Den gesendeten Befehl prüfen und passende Daten liefern
				
		// Skript starten
		if ($command == "ARD")// Befehl ausführen
			{
				//IPS_RunScript(48973 /*[Erdgeschoss\Wohnzimmer\Dreambox 8000\Status\Standby]*/);	
				SetValue(22247, "ARD");
				//$status = GetValue(12345); /* Status Dreambox */
				$status = "ARD";
				//Code to create XML file
				sendstatusresponse($command, $status);
			}
	}

In dem Beispiel wird der Request entgegen genommen, geprüft ob das command was von jquery.ajax-ips.js geschickt wurde übereinstimmt dann eine Variable verändert.
Was IP-Symcon dann machen soll wenn das command eingegangen ist ist individuell hier kann auf die dokumentieren Befehle in IP-Symcon zurückgegriffen werden.
In dem Fall wird jetzt der Status ARD zurückgegeben, es kann aber logischerweise jeder von IP-Symcon ermittelte Wert zurückgesendet werden.

Der Wert wird an die Funktion sendstatusresponse übergeben und dann als XML zurück an die Funktion ajaxrequest (s.o) gegeben die diesen dann an die funktion e2response übergibt zur Auswertung (s.o.).

Die JS Datei ajax.jquery-ips.js und die PHP Datei dreamboxrequest.php sind also individuell nach User Bedürfnis mit den passenden Funktionen zu ergänzen.

Zuletzt muss jetzt noch die fertig angepasste Seite in den Webfront eingebunden werden. Dazu wird eine String Variable mit dem Profil ~HTMLBox erstellt und ein Skript das die Var dann beschreibt.

In das Skript fügen wir ein


$HTML = '<iframe src="user/neo/naviundbuttons.html" border="0" frameborder="0" style= "width: 400px; height: 450px;"/></iframe>';
 SetValue(21483 /*[Geräte\Heimkino\Video\Dreambox\Dreambox Weitere Anzeige\Navigation]*/, $HTML); // Anpassen an ObjektID der zu schreibenden Var


$HTML = '<iframe src="user/neo/tastenfeld.html" border="0" frameborder="0" style= "width: 550px; height: 700px;"/></iframe>';
SetValue(18637 /*[Geräte\Heimkino\Video\Dreambox\Dreambox Weitere Anzeige\Tastenfeld]*/, $HTML); // Anpassen an ObjektID der zu beschreibenden Var

Dann also viel Spass beim Basteln.

Im Übrigen nutzte ich selber kein Tastenfeld mehr zum Umschalten sondern mit der Dreambox die Kanalliste, dann sehe ich wenigstens was zur Zeit läuft.