La carte IPX800 V2 comporte plus de mémoire que les anciennes versions, ce qui permet une personnalisation du Site Web Embarqué beaucoup plus avancée qu’auparavant.
Vous pouvez donc modifier ou créer vos propres pages HTML en modifiant les fonctions Javascript et ou inclure les vôtres, modifier ou ajouter votre propre CSS ou en encore de belles images ou logos pour vos relais et entrées.
Vous trouverez le dossier original des pages Web de l’IPX800 sur l’archive que vous avez téléchargez dans ce chemin :
gce.electronics/web_relay_board
Toute modification du site web devra être compiler avec l’utilitaire MPFS2.exe pour être Uploader vers la carte IPX800.
N’oubliez pas de configurer votre répertoire source et destination et modifier les paramètres de l’Upload. Il ne vous restera plus qu’à cliquer sur Generate and Upload pour que la carte prenne en compte vos modifications.
Après avoir suivi ce petit préambule , je vous conseille de faire une sauvegarde du répertoire web avant de vous lancer dans une modification.
Si toutefois vous rencontriez un problème de fonctionnement de l’ IPX800 après une modification, vous pourrez toujours refaire un Upload du Fichier Bin original via la page web Upload de la carte en tapant directement son adresse comme suit http://adressedelacarte/mpfsupload.
Avant de vous lancer dans des modifications compliquées , faites de petits essais avec le logo… et si tout se passe bien c’est que vous avez compris comment personnaliser votre site web embarqué.
Vous pouvez utiliser un simple éditeur de texte pour modifier vos pages ou alors un logiciel de conception Web comme Kompozer qui est disponible gratuitement.
Voyons maintenant en détail le CSS, les fonctions Java et les actions.
Le code HTML de la page d’accueil d’origine en détail :
Entre les balises « head » vous avez le titre de l’onglet de votre page web « title », le fichier « css » qui correspond à la feuille de style et le fichier « js » qui correspond au fichier Javascript.
L’ouverture d’un balise commence par <…> et la fermeture par </…>.
Passons maintenant au code situé entre les balises <body> et </body>, tout ce qui sera affiché sur votre page web.
…
<div style= »padding:0 0 5px 5px »><a href= »http://www.gce-electronics.com »><img src= »/gce.png » border= »0″ /></a> </div>
Positionnement du logo sur la page, le lien vers les site GCE et l’emplacement du logo.
—
<div id= »title »><div class= »right »>IPX-800 V2.00</div><span id= »hello »> </span></div>
Le titre de votre page.
—
<div id= »menu »>
<a href= »/index1.htm »>Home</a>
<a href= »/preset.htm »>Preset</a>
<a href= »/index.html »>Mobile</a>
<a href= »/protect/timers.htm »>Timers</a>
<a href= »/dyndns »>Dynamic DNS</a>
<a href= »/mpfsupload »>Upload new site</a>
<a href= »/protect/assign.htm »>I/O Configuration</a>
<a href= »/protect/advanced.htm »>Advanced settings</a>
<a href= »/protect/config.htm »>Lan settings</a>
<a href= »/protect/servport.htm »>M2M</a>
</div>
Le menu des liens pointant vers les autres pages.
—
<div id= »content »>
<div id= »status »>
<div id= »loading » style= »display:none »>Error:<br />Connection to relay board was lost.</div>
<div id= »display »>
La zone du contenu qui contient le chargement et l’affichage dynamique. En cas d’erreur de chargement le message à afficher.
—
<span class= »leds »>
<a id= »led0″ onclick= »newAJAXCommand(‘leds.cgi?led=0′); »>•</a>
<a id= »led1″ onclick= »newAJAXCommand(‘leds.cgi?led=1′); »>•</a>
<a id= »led2″ onclick= »newAJAXCommand(‘leds.cgi?led=2′); »>•</a>
<a id= »led3″ onclick= »newAJAXCommand(‘leds.cgi?led=3′); »>•</a>
<a id= »led4″ onclick= »newAJAXCommand(‘leds.cgi?led=4′); »>•</a>
<a id= »led5″ onclick= »newAJAXCommand(‘leds.cgi?led=5′); »>•</a>
<a id= »led6″ onclick= »newAJAXCommand(‘leds.cgi?led=6′); »>•</a>
<a id= »led7″ onclick= »newAJAXCommand(‘leds.cgi?led=7′); »>•</a>
</span>
Les commandes Javascript qui vont prendre en compte le clic d’action sur les relais et l’actualisation de leur statut.
id= »ledX » est l’identifiant du relais.
« led0″ correspond au relais 1 ……… et « led7″ au relais 8.
‘leds.cgi?led=5′ étant le script CGI d’action On/Off du relais 6.
• est le voyant d’état du relais.
—
L’utilitaire WebPreview vous permet de visualiser vos modifications de page avant d’uploader votre carte. Cet exécutable (WebPreview.exe) est fournis dans le dossier « Utilitaires » de l’archive IPX.
Sélectionner la page Html et le répertoire de vos modifications et lancer Preview Page.
Attention, vous ne voyez que vos modifications HTML dans ce mini navigateur, les fonctions ne sont pas actives et l’affichage des données de la carte ne peuvent pas apparaître, vous n’êtes pas sur le serveur embarqué…
—
