Intégration d'un widget externe html/js

[Jerome_Lescure]

Bonjour,

Je souhaiterais pouvoir intégrer un widget dans une tuile (ou éventuellement page entière). Il s’agit d’un widget procuré par un service en ligne externe pour lequel j’ai un bout de code javascript et un div. Je l’utilise déjà pour agrémenter mon site web et c’est super pour intégrer pleins de choses (météo, gallerie, chat, …)

J’ai essayé surJC sans succès

• avec webview mais il semble que l’on puisse seulement intégrer une page entière via une url. On peut bien mettre du javascript mais je ne vois pas de possibilité de mettre du html directement
  Comment est ce possible ?
• avec un générique texte: mais je ne sais pas ou mettre mon code html/js et s’il va être interprété

Quelqu’un a t-il une solution ?

Jeedom Core : 4.3.15
Version JC : 1.7.0+ stable
DNS Jeedom : oui
Statut Démon : Stoppé - ()

Equipements :
  Mobile Isabel : v1.7.0 stable sur android [os : 31] (polling)
  Mobile Jérôme : v1.7.0 stable sur android [os : 33] (polling)

[tomitomas]

Salut

@Jerome_Lescure

générique texte

Depend d une commande de type info/autre → il faut donc que ton html soit dans une commande de ce type

Le composant texte pourrait peut etre etre + approprié.

Dans les 2 cas, le JS n est pas inclus…
Donc…

[yoyouri]

Salut,
Si vous pouvez l’afficher sur le Dashboard de Jeedom via un Widget ou autre il vu suffirait ensuite juste de l’insérer sur une page de spécifique afin d’utiliser cette page pour y accéder sur via JC
Je ne sais pas si j’ai étais clair et si c’est possible, mais dans le cas excusez moi je ne suis pas encore bien réveillé

[Jerome_Lescure]

Effectivement sans le JS, ça ne peut pas fonctionner.
Dommage qu’il n’y ai pas (encore) un widget HTML dédié dans lequel on puisse mettre du code html et du code JS (ensemble et/ou séparément). Avec les nombreux widgets de ce type disponibles sur le web, ce serait fantastique pour enrichir nos apps JC avec des infos, visuels et autres outils digitaux extérieurs.

[Jerome_Lescure]

Merci Yoyouri, désolé d’interrompre ton réveil ! Hum, pour être honnete, c’est pas tout à fait clair. Parles tu de widget jeedom ou de design ? Si je fait un design, le contenu html/js sera t-il responsive à la taille du widget JC ? J’ai pas du tout testé les Design ayant découvert entre temps JC…

[tomitomas]

@Jerome_Lescure

Dommage

tout est systématiquement « dommage » dans tes posts … c’est un peu « compliqué » …

@Jerome_Lescure

n’y ai pas (encore) un widget HTML dédié dans lequel on puisse mettre du code html et du code JS (ensemble et/ou séparément)

du coup je te confirme que ca n’est pas prévu (et oui … « dommage » …)
je n’ai pas franchement envie de faire (plus) de SAV sur des bouts de code qu’un utilisateur aura été bêtement copier/coller sans savoir ce qu’il fait et derrière lire « roooo l’app ne fonctionne plus, alors qu’hier tout était OK et que j’ai rien fait » …!

[tomitomas]

@Jerome_Lescure

c’est pas tout à fait clair.

comme ton idée de départ
on n’a pas franchement plus d’infos …

@Jerome_Lescure

Parles tu de widget jeedom ou de design

d’un design jeedom
que tu intégres dans un widget « webview » de JC => que tu peux placer sur une page entière par exemple

@Jerome_Lescure

responsive à la taille du widget JC

non

[Jerome_Lescure]

Je suis désolé @tomitomas si j’ai pu t’offenser d’une manière ou d’une autre, Toutes mes excuses, ce n’était aucunement mon intention. « Dommage » n’a rien d’accusatoire à mon sens. Je ne crois pas avoir manqué de respect aucunement sur le travail réalisé sur ce projet dont j’ai pleinement conscience travaillant moi même depuis de nombreuses années avec des développeurs dans mon métier.
Nous sommes sur un forum ouvert où il me semble normal d’explorer les possibilités et les limites de l’application et d’échanger avec des gens plus ou moins avertis.

Par ailleurs, pour ma part, je ne crois pas jamais m’être plein d’une quelconque fonctionnalité qui ne marchait plus, ni pour quoi que ce soit d’autre.

Ces échanges et l’intérêt que chacun peut porter sur des suggestions de fonctionnalité ou bugs aident aussi à identifier de bonnes idées et à potentiellement prioriser des développement à venir pour ceux qui y contribuent.

Encore une fois, désolé si j’ai pu t’offenser d’une quelconque manière et merci pour tes retours

[Jerome_Lescure]

merci @tomitomas pour ton intervention, c’est plus clair.

[Jerome_Lescure]

Pour mon idée de départ, voici quelques précisions.

Mon objectif est de réaliser une applications pour mes guests dans le cadre de locations de quelques studios. Je souhaiterias que tout soit centralisé au maximum sur cette app, aussi bien la gestion domotique que des informations ou services pratiques que je peux leur mettre à disposition.

Par exemple, par un widget du type de ceux fourni par Elfsight.com, il est possible d’intégrer un chat de Whatsapp pour échanger directement avec le propriétaire, ou encore une gallerie de photos pour montrer des idées de lieux à visiter, ou meme un résumé météo pour avoir un coup d’oeil sur la journée ou la semaine du séjour.
C’est extrémement pratique et évite de tout développer; cela permet aussi d’investir le temps sur ce qui relève pleinement de la domotique.

Voici un exemple de code pour un widget météo (je sais qu’il existe aussi par ailleurs un excellent tuto JC que j’ai d’ailleurs intégré dors et déjà, merci à son auteur)

<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-f171cf28-522b-44d3-ba8b-7cb752db2d85"></div>

[tomitomas]

@Jerome_Lescure

une gallerie de photos pour montrer des idées de lieux à visiter

Widget diaporama

my 2 cts: $scenario->setLog('Start sBuildImgGallery'); $pathfolderGalleryImg='/var/www/html/plugins/JeedomConnect/data/img'; // <<---- à modifier pour indiquer où chercher les images $extensionImg= ".png"; // <<---- à modifier en fonction du type d'images recherchée $filename = 'monDiaporama' . $extensionImg; $pathTargetImg='/var/www/html/plugins/JeedomConnect/data/img/'.$filename; $pathTargetConfig='/var/www/html/plugins/JeedomConnect/data/img/monDiaporama.txt'; $creat…

---

@Jerome_Lescure

meme un résumé météo pour avoir un coup d’oeil sur la journée ou la semaine du séjour.

Tuto : créer une page météo sur Jeedom Connect

Pour cette semaine qui s’annonce encore froide et nuageuse, je vous offre un petit tuto pour créer une page météo sur plugin-jeedomconnect UPDATE du 21/05 : meilleur formatage des notifications des alertes météo UPDATE du 06/09 : rajout d’un scenario pour gerer le changement d’icone pour la phase de la lune : Tuto : créer une page météo sur Jeedom Connect - #151 par ngrataloup UPDATE du 27/09 : rajout des probabilités de pluie, gel, orage et neige sur la journée : Tuto : créer une page météo …

---

@tomitomas

d’un design jeedom
que tu intégres dans un widget « webview » de JC => que tu peux placer sur une page entière par exemple

la solution proposée par yoyouri peut donc etre en envisagé
tu fais un design jeedom à la taille de l’écran de ton mobile, et ca devrait aller

[ngrataloup]

Pour la partie integration d’un design, tu peux t’inspirer du tuto RTEecowatt : Tuto intégration des infos ecoWatt de RTE

Par contre, j’ai un doute sur le fait qu’on puisse encore intégrer une page extérieure dans un design avec la Content Sécurity Policy !

Norbert

[tomitomas]

@ngrataloup

Content Sécurity Policy !

il peut toujours la désactiver … si c’est absolument ce qu’il veut !..

[Jerome_Lescure]

Intéressant ce tuto, je vais regarder !
Au sujet de la content security policy, je suppose qu’il s’agit d’une limitation jeedom exclusivement (et volontaire) et que JC n’y est pas sujet car sinon le widget webView ne fonctionnerait pas.

[ngrataloup]

Oui, le CSP concerne Jeedom mais pourra t’empêcher de mettre ton URL dans un widget (au sens DESIGN)

[jared-94]

Il y a le widget WebView qui peut convenir.
Tu peux même y injecter du code JS

[Jerome_Lescure]

J’ai vu qu’on pouvait y injecter du code JS mais on ne peut pas renseigner du code html à ma connaissance, seulement l’url d’une page…
J’ai un workaround que je veux tester qui consiste à faire une page vierge sur mon site web (rendue non visible) avec le code html du widget à l’intérieur, puis à utiliser cette url dans le widget JC WebView. L’inconvenient, c’est juste que:

• ça va polluer mes stats du sites (je peux y remédier en excluant la page de mes analytics)
• ça crée une dépendance de l’app JC avec mon site web (un peu usine à gaz quoi )

[jared-94]

Tu peux sinon déposer ton fichier HTML dans jeedom (dossier data par exemple)

[Jerome_Lescure]

Oh dis donc, ça c’est vraiment pas c** !! C’est la qu’on voit la différence entre un mec dans le produit et un autre dans le dév. Y en a un qui ne pense qu’aux besoins fonctionnels et l’autres qui est brillant pour trouver des solutions techniques !

[Jerome_Lescure]

Alors, au final, voilà le rendu de l’intégration de widgets web dans JC:

ici, sur la vidéo, je clique sur une page météo avec plusieurs widget par localisation, puis je clique sur une page avec un widget de chat pour donner un accès à Whatsapp.

Voilà, je suis assez content du rendu même si je constate quelques désagréments:

• le widget webview est (re)rendus à chaque fois que l’on se rend sur la page où il est installé ce qui a pour conséquence d’avoir au mieux un scintillement de rafraichissement de la page et au pire une page blanche qui mouline infiniment pour charger la page. Le widget finit par s’afficher au bout d’un moment sans explication après avoir navigué entre temps sur l’app.

Bon, bien sur, je n’enseigne pas grand chose aux utilisateurs ou développeurs avertis de JC mais voilà un moyen très pragmatique et efficace de rajouter quelques fonctionnalités avant peut être qu’elles ne soient directement disponibles par la suite.

Pour l’aspect pratique:

j’ai opté pour un fichier html appelé par exemple « monwidget.html » qui contient le code fourni par le fournisseur du service de widget web (par exemple: elfsight.com) et une petite custo de la feuille de style (ici un zoom) pour que le rendu sur mobile soit niquel.

le miens ressemble à ceci:

<html>
  <script src="https://apps.elfsight.com/p/platform.js" defer></script>
  <div class="elfsight-app-0360f406-6fef-4550-b169-41bf7ac31d58"></div>
  <style>
    .joSrve {
      zoom:300%;
    }
  </style>
</html>

Ensuite, j’ai renoncé à déposer le fichier html dans jeedom car comme mentionné plus haut, la Content Security Policy de jeedom empêche le traitement de la page.
Pour ceux que ça intéresse toutefois, ça marche en passant le serveur Apache en non sécurisé (à vos risques) ici: Réglage(jeedom) > configuration > Système > OS DB > Ouvrir administration system > click sur « Apache non sécurisé ».

J’ai donc préféré stocker le fichier sur mon hébergement ovh (rien ne vous empeche de le mettre sur un serveur local).

Après, grâce au fantastique widget WebView, il suffit de pointer l’url de notre fichier html, et soit

• régler l’édition de widget en forcé « détail » si on souhaite que le widget occupe toute la page (hors menus).
• soit cocher « afficher dans la grille » pour un affichage du widget dans une tuile

Voilà, enjoy et je suis preneurs de vos retours concernant les désagréments évoqué plus haut.

Jérôme