Widgets HTML
Documentation eedomus
Cette fonctionnalité est expérimentale et est susceptible d'évoluer.
Sommaire |
A quoi ça sert ?
Un "Widget" est la représentation d'un périphérique dans l'interface eedomus (Portail web ou apps pour smartphones)
Les widgets sont relativement figés, particulièrement sur les apps eedomus pour smartphones, les widgets HTML permettent de réaliser et afficher des contenus plus riches.
Avantages
- Possibilités d'affichage étendues et personnalisables
- Plusieurs périphériques peuvent être affichés dans un même widget
Inconvénients
- Nécessite un développement ou de la configuration
- L'affichage est plus lent qu'un widget "natif"
- Le nombre de widgets affichés peut être limité (selon les performances du smartphone)
Création d'un widget HTML
Exemple 1 : simple contenu HTML statique:
Cliquez sur Configuration / Ajouter ou supprimer un périphérique / Ajouter un autre type de périphérique / Réseau - Contenu HTML / Créer
Sélectionnez la pièce dans laquelle le périphérique sera affiché, puis dans le champ Contenu HTML saisissez :
<span style="color:red">Je suis un widget HTML !</span>
Cliquez sur Sauver et rendez vous dans la pièce choisie pour observer ce nouveau widget.
Exemple 2 : contenu PHP hébergé sur la box (script eedomus):
Cliquez sur Configuration / Ajouter ou supprimer un périphérique / Ajouter un autre type de périphérique / Réseau - Contenu HTML / Créer
Sélectionnez la pièce dans laquelle le périphérique sera affiché, puis sous URL du contenu cliquer sur Script
Créez un nouveau script appelé script.php et saisissez ce contenu :
<? echo "Hello eedomus ! il est ".date('G:i:s'); ?>
Sauvegardez le script.
De retour sur la page de configuration du widget HTML, cliquez sur Sauver et rendez vous dans la pièce choisie pour observer ce nouveau widget.
Si le résultat est acceptable sur le portail eedomus, on peut constater que le contenu du widget est peu adapté une fois affiché dans une app pour smartphone.
Pour cela vous pouvez remplacer le contenu par le suivant, qui rajoute des caractéristiques de style sur le widget.
Exemple 2B : script hébergé avec amélioration du style
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width,user-scalable=no">
</head><body>
<style><? sdk_get_widget_default_style(); ?></style>
<span><? echo "Hello eedomus ! il est ".date('G:i:s'); ?></span>
</body></html>
La plupart des fonctions de script "classiques" sont utilisables afin de réaliser des widgets aux fonctionnalités avancées.
Voici un exemple de widget qui permet de piloter un périphérique, il pourra vous servir de base pour un widget plus complexe.
Exemple 2C : script hébergé avec fonctions avancées
Les fonctions de scripts pour widgets
La plupart des fonctions de script "classiques" sont utilisables afin de réaliser des widgets aux fonctionnalités avancées, et il existe quelques fonctions utiles pour la construction de widgets :
- sdk_get_widget_default_style() est une fonction qui renvoi un style CSS optimisé pour l'affichage sur smartphone. La couleur du fond et du texte est notamment adaptée au style de l'app (Thème sombre ou clair)
Cette fonction doit être apellée dans une balise <style> (voir exemple ci dessus), d'autre styles CSS peuvent être ajoutés avant de refermer la balise.
- sdk_widget_refresh_url() permet de construire une URL de rafraichissement, utile pour les widgets d'actionneurs notamment comme dans l'exemple ci dessus.
Les variables $_GET
Les variables suivantes peuvent être utilisées pour tenir compte de certaines conditions d'affichage du widget.
- $_GET['dark_theme'] Renvoi 0 si le thème sombre n'est pas activé, 1 sinon (Peut être utilisé pour adapter le style du widget en fonction)
- $_GET['app'] Renvoi ios si le widget est affiché depuis l'app pour iOS, 'android' depuis l'app Android, rien s'il s'agit du portail web.
Utilisation d'URL tierce
L'URL du contenu d'un widget HTML peut également être celui d'un site tiers (site web ou page d'un objet communiquant de votre réseau) mais cela comporte des limitations.
Dans certains cas les pages ne s'afficheront que de manière incomplète ou pas du tout en raison de contrainte de sécurité sur les browsers (notamment sur smartphone). Vous pouvez essayer l'option Utiliser eedomus.com comme proxy dans certains cas.
