Copyright by Peter Leibling, LTCS Leibling Tech Consult Service 2006
Inhaltsverzeichnis Cover 1 Inhaltsverzeichnis 2 3 2 1 mein eigenes Plugin 3 Vorwort 4 Danksagung 4 Vorraussetzungen 4 Aufbau des Workshops 4 Vorbereitungen 4 Einrichten des mcedemoplugins 4 Aufbau der Plugin Datei 4 Der Headerabschnitt 5 Der Adressbereich 5 Der Beschriftungsbereich 6 Die Buttons 7 Der Footer 7 Positionieren der Schriftzüge und Buttons 8 Steuern mit der Fernbedienung 8 Weitere Seiten 9 Einbinden des Plugins 9 Anpassen des Plugins 10 Tips 10 Bekannte Probleme 10 Abschlusswort 10 Weitere Quellen 11 Copyright by Peter Leibling, LTCS Leibling Tech Consult Service 2006 Seite 2 von 11
3 2 1 mein eigenes Plugin Ein Plugin zu erstellen ist gar nicht so einfach denken viele, doch das ist falsch. Ein eigenes Plugin ist relativ schnell erstellt. In diesem Workshop werden wir ein eigenes Plugin erstellen. Hier seht ihr zum Beispiel meine Plugins mcehomecontrol und mcehomecam. Copyright by Peter Leibling, LTCS Leibling Tech Consult Service 2006 Seite 3 von 11
Vorwort Dieses Beispiel basiert auf dem MCE SDK 2004. Mittlerweile gibt es schon das MCE 2005 SDK, dieses soll einfacher sein jedoch habe ich da noch nicht reingeschaut. Danksagung Besonders danken möchte ich usa, dank seiner Community habe ich schon viel lernen können und auch hoffentlich weitergeben können. Danke sagen möchte ich auch gerne scendix und olcay, die mir schon oft weitergeholfen haben in Sachen Pluginerstellung. Voraussetzungen Dieses Dokument sowie die Beispieldateien Eine Idee die man als Plugin umsetzen möchte Ein wenig Zeit Aufbau des Workshop Die Erstellung des Plugins setzt sich aus 2 abschnitten zusammen. 1. Einrichten des mcedemoplugin Plugins 2. Einbinden ins Media Center Einrichten des mcedemoplugin Jetzt kommt das eigentliche Plugin. Laden Sie das Plugin Archiv herunter unter http://www.ltcs.de/files/mcedemoplugin.zip und entpacken Sie das Archiv nach C:\Programme\Demoplugin. Öffnen Sie die Datei Default.html mit einem Editor (z.b. mit dem Notepad). Aufbau der Plugin Datei Damit Sie nun Ihr Plugin individuell anpassen können, müssen Sie erstmal wissen wie die Plugin Datei aufgebaut ist. Copyright by Peter Leibling, LTCS Leibling Tech Consult Service 2006 Seite 4 von 11
Der Headerabschnitt Der Header ist der Kopf, hier werden persönliche Daten eingegeben (diese in der blauen Markierung). <html> <head> <title>mcedemoplugin</title> <meta name="author" content="peter Leibling"> <meta name="publisher" content="peter Leibling"> <meta name="copyright" content=" 2005 Peter Leibling (www.ltcs.de)"> <meta name="robots" content="noindex"> <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetschema"> <LINK id="csslink" href="require/blue/style.css" type="text/css" rel="stylesheet"> <LINK href="require/main.css" type="text/css" rel="stylesheet"> <script language="jscript" src="require/script.js"></script> </head> <div style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -10"><img src="require/blue/common.background.jpg" width="100%" height="100%"></div> <script language="jscript" id="clienteventhandlersjs"> //<!-- var nitems = 3; var ncurfocus = 1; var strscrollpage = "yes" var nvisiblebtns = 3; var nscrollmenustartno = 2; var nscrollmenuendno = 4; var nbtnheight = 240; var ntotalbtns = ((nscrollmenuendno - nscrollmenustartno) + 1) var strenforceditem = "" var strenforceditemnofocusstyle = "btn_nofocus_enforced" var strenforceditemfocusstyle = "btn_focus_enforced" var strenforceditemdormantstyle = "btn_dormant_enforced" var strdormantpage = "yes" var nmouseevent = 0 //up, dn, left, right, focus state, non-focus, dormant state, dormant text state, non-focus text,enforced radio, URL or function call var afocustablearray = new Array( Der Adressbereich Im Adressbereich werden die eigentlichen Adressen aufgerufen (z.b. seite2.html). Bitte beachten Sie, dass hinter dem letzten Array Abschnitt am Ende hinter der Klammer kein Komma stehen darf. Der Bereich der Rot ist, kann angepasst werden. Copyright by Peter Leibling, LTCS Leibling Tech Consult Service 2006 Seite 5 von 11
new Array("-1", "-1", "-1", "-1", "btn_focus", "btn_nofocus", "btn_dormant", "leftbuttontable_dormant", "leftbuttontable_nofocus","_enforced","seite2.html"), new Array("-1", "-1", "-1", "-1", "btn_focus", "btn_nofocus", "btn_dormant", "leftbuttontable_dormant", "leftbuttontable_nofocus","_enforced","seite3.html") ); // up, down, L, R, backup var asharedviewportarray = new Array("1", "2", "1", "1", "1") //--> </script> <body id="body" scroll="no" onload="initialize(true);" onkeydown="onremoteevent(window.event.keycode)"> <bgsound id="btnsound"/> Der Beschriftungsbereich In dem Bereich werden die Beschriftungen und die Überschrift angepasst. Rote Schriftzüge können wieder angepasst werden. Wenn Sie weitere Punkte benötigen, kopieren Sie einfach unten den Teil zwischen <span > und </span>. Wenn Sie eine Zeile kopieren, werden später im Media Center Fenster Beschriftungen übereinander liegen, zum positionieren kommen wir weiter unten. <span id="logospan" class="headline"></span> <span class="currentselectname" style="position: absolute; top: 0; left: -10; color: #BBD0F2; fontsize=60pt; filter: alpha(opacity=15)">mcedemoplugin</span> <span id="logospan" class="headline"></span> <span class="currentselectname" style="position: absolute; top: 40; left: 49; color: black;">mcedemoplugin...</span> <span id="logospan" class="headline"></span> <span class="currentselectname" style="position: absolute; top: 43; left: 52; color: white;">mcedemoplugin...</span> <span id="logospan" class="logo mylogo"></span> <span class="currentselectname" style="position: absolute; top: 94; left: 49;">Seite2:</span> <span id="logospan" class="logo mylogo"></span> <span class="currentselectname" style="position: absolute; top: 148; left: 49;">Seite3:</span> Copyright by Peter Leibling, LTCS Leibling Tech Consult Service 2006 Seite 6 von 11
Die Buttons Damit Sie auch schalten können, benötigen Sie auch Buttons. Rote Schriftzüge können auch hier wieder angepasst werden. Die blauen Punkte müssen durchnummeriert werden (z.b. item1, item2, item3 usw.). Jeder Abschnitt zwischen <table > und </table> ist ein Knopf. Wenn Sie weitere Knöpfe benötigen, fügen Sie eigene hinzu. Die Buttons werden später im Media Center Fenster übereinander liegen, zum positionieren kommen wir weiter unten. <table border="0" class="leftbuttontable_nofocus" cellpadding="0" cellspacing="3" id="leftmenu" style="position: absolute; top: 84; left: 280;"> <tr><td class="btntext_nofocus" onmouseover="usemouse(this)" onmousedown="btnhilite(this.children(0),'btn_pressed')" onmouseup="btnhilite(this.children(0),'btn_focus')" onclick="donavigation()">aufrufen<span class="btn_nofocus" id="item1"></span></td></tr> </table> <table border="0" class="leftbuttontable_nofocus" cellpadding="0" cellspacing="3" id="leftmenu" style="position: absolute; top: 140; left: 280;"> <tr><td class="btntext_nofocus" onmouseover="usemouse(this)" onmousedown="btnhilite(this.children(0),'btn_pressed')" onmouseup="btnhilite(this.children(0),'btn_focus')" onclick="donavigation()">aufrufen<span class="btn_nofocus" id="item2"></span></td></tr> </table> <span id="listspan" class="rightlistbuttonspan"> <table class="btnnewstable_dormant" id="listtable" border="0" cellpadding="0" cellspacing="0"> <tr> <td><span class="headline"> </span> </span> </td> </tr> </table> </span> Der Footer Der Footer kommt ans Ende der Datei. </body> </html> Copyright by Peter Leibling, LTCS Leibling Tech Consult Service 2006 Seite 7 von 11
Positionieren der Schriftzüge und Buttons Damit die Schriftzüge und Buttons genau platziert werden können, werden sie mit <table > und <pan > mit einer Erweiterung versehen. Diese lautet: style="position: absolute; top: 84; left: 540;" Damit wird Pixelgenau jedes Element platziert. Top ist die Anzahl der Pixel von oben und left von links. Um ein Gefühl für die Positionen bekommen können, spielen sie ein wenig mit den Werten und aktualisieren Sie die Pluginseite wenn Sie fertig sind im Media Center (mit F5 Taste auf der Tastatur). Steuern mit der Fernbedienung Damit Sie das Plugin auch genau mit der Fernbedienung steuern können, müssen wir noch die Steuerungsdaten anpassen. Die Anpassungen werden im Adressbereich vorgenommen. Im blauen Feld werden die Anpassungen vorgenommen: new Array("-1", "-1", "-1", "-1", "btn_focus", "btn_nofocus", "btn_dormant", "leftbuttontable_dormant", "leftbuttontable_nofocus","_enforced","index.php?befehl=1"), Die Aufteilung ist recht einfach. Stellen Sie sich vor, Sie haben 2 Reihen mit je 2 Knöpfen. In Reihe 1, sind Knopf 1 und 1. In Reihe 2 sind Knopf 3 und 4. Im ersten blauen Feld geben Sie den Wert für den Knopf über den aktuellen Knopf ein. Ist dort keiner geben Sie -1 ein. Im zweiten blauen Feld geben Sie den Wert für den Knopf unter dem aktuellen Knopf ein. Ist dort keiner geben Sie wieder -1 ein. Im dritten blauen Feld geben Sie den Wert für den Knopf links von dem aktuellen Knopf ein. Ist dort keiner geben Sie wieder -1 ein. Im vierten blauen Feld geben Sie den Wert für den Knopf rechts von dem aktuellen Knopf ein. Ist dort keiner geben Sie wieder -1 ein. So ergibt sich folgendes Beispiel: new Array("-1", "3", "-1", "2", "btn_focus", "btn_nofocus", "btn_dormant", "leftbuttontable_dormant", "leftbuttontable_nofocus","_enforced","seite2.html"), Copyright by Peter Leibling, LTCS Leibling Tech Consult Service 2006 Seite 8 von 11
new Array("-1", "4", "1", "-1", "btn_focus", "btn_nofocus", "btn_dormant", "leftbuttontable_dormant", "leftbuttontable_nofocus","_enforced","seite3.html"), new Array("1", "-1", "-1", "4", "btn_focus", "btn_nofocus", "btn_dormant", "leftbuttontable_dormant", "leftbuttontable_nofocus","_enforced","seite4.html"), new Array("2", "-1", "3", "-1", "btn_focus", "btn_nofocus", "btn_dormant", "leftbuttontable_dormant", "leftbuttontable_nofocus","_enforced","seite5.html") Auch hier wieder nicht vergessen, im letzten Array kein Komma setzen. Weitere Seiten Wenn Sie weitere Seiten benötigen, kopieren Sie die Datei Default.html und benennen Sie entsprechend (z.b. seite2.html). Im Adressabschnitt ändern Sie den entsprechenden Link, z.b. so (siehe rote Beschriftung): new Array("-1", "-1", "-1", "-1", "btn_focus", "btn_nofocus", "btn_dormant", "leftbuttontable_dormant", "leftbuttontable_nofocus","_enforced","seite2.html"), und Beschriften Sie den Button im Buttonbereich entsprechend, z.b. so (siehe rote Beschriftung): <table border="0" class="leftbuttontable_nofocus" cellpadding="0" cellspacing="3" id="leftmenu" style="position: absolute; top: 84; left: 280;"> <tr><td class="btntext_nofocus" onmouseover="usemouse(this)" onmousedown="btnhilite(this.children(0),'btn_pressed')" onmouseup="btnhilite(this.children(0),'btn_focus')" onclick="donavigation()">aufrufen<span class="btn_nofocus" id="item1"></span></td></tr> </table> Natürlich müssen Sie noch die blauen Werte anpassen. Einbinden des Plugins Nachdem die Seite fertig ist, muss Sie noch dem MCE bekannt gegeben werden. Öffnen Sie den Ordner C:\Dokumente und Einstellungen\All Users\Startmenü\ Programme\Zubehör\Media Center\Media Center-Programme. Öffnen Sie dazu noch den Ordner C:\Programme\mcedemoplugin\other. Gehen Sie mit der rechten Maustaste in dem letzteren Ordner auf mcedemoplugin.mcl, halten Sie die rechte Maustaste gedrückt und ziehen Sie das Icon in das obere Fenster. Lassen Sie die rechte Maustaste los und wählen Sie im Kontextmenü Verknüpfung erstellen. Das war es schon. Copyright by Peter Leibling, LTCS Leibling Tech Consult Service 2006 Seite 9 von 11
Anpassen des Plugins Sie können nicht nur das eigentliche Plugin (die Seite Default.html) anpassen, sondern auch den Schriftzug und das Bild unter Mehr Programme. Die Änderungen werden in der Datei C:\Programme\mcedemoplugin\ other\mcedemoplugin.mcl vorgenommen. Öffnen Sie die Datei in einem Editor (z.b. dem Notepad). Fertig ist das Plugin! Tips Das anpassen der Dateien ist sehr aufwendig. Sichern Sie Pluginverszerzeichnis in regelmäßigen Abständen. Sichern Sie vor jeder Änderung und vor jedem Test ihre PHP Seiten. Bekannte Probleme Manchmal lässt sich das Plugin nicht starten. Schließen Sie das MCE und warten Sie einen kleinen Augenblick meistens ist das Problem dann gelöst. Sollte es immer noch nicht gehen, dann melden Sie sich bitte einmal ab und wieder an. Ein Neustart war bis jetzt noch nicht nötig. Das liegt aber nicht am Plugin selber, sondern wahrscheinlich am MCE. Tests zeigten das sich dann auch andere HTML basierte Plugins ebenfalls nicht starten lassen (z.b. My Movies usw.). Abschlusswort Ich hoffe das Plugin macht ihnen soviel Spaß wie mir. Mit ein wenig basteln kann man damit die schönsten Dinge machen, wie z.b. die Kameraerweiterung (Net Cam: http://www.mce-community.de/forum/index.php?showtopic=9712 oder USB Cam: http://www.mce-community.de/forum/index.php?showtopic=10023). Auch lassen sich andere Komponenten, Programme usw. damit steuern. Schaut im IP-Symcon Forum mal vorbei. Sollten Sie auf Probleme stoßen, dann wenden Sie sich bitte an das mcehomecontrol Forum. Schauen Sie auch in bestimmten Intervallen auf der Seite http://www.ltcs.de/ files/mcedemoplugin.zip nach, dort wird es regelmäßige Aktualisierungen geben. Copyright by Peter Leibling, LTCS Leibling Tech Consult Service 2006 Seite 10 von 11
Weitere Quellen LTCS: http://www.ltcs.de mcehomecontrol Webseite: http://www.mcehomecontrol.de/ mcehomecontrol Forum: http://www.mce-community.de/ forum/ index.php?showforum =169 Media Center Community: http://www.mce-community.de/forum/index.php Peter Leibling http://www.leibling.de Copyright by Peter Leibling, LTCS Leibling Tech Consult Service 2006 Seite 11 von 11