Modification Avancé du code HTML d'un design

Utilisation du core de Jeedom Design
1

Bonjour,

Je souhaite créer un design en fournissant moi même un template HTML du design.
Pour cela, je crée un design et j’ajoute un objet HTML en insérant mon propre code.
J’ai ainsi tout l’habillage de mon design avec tous les menus, cadres, etc… prêt à recevoir l’ensemble des équipements.
Vient le temps de l’ajout des équipements sur cette page template et le placement au bon endroit .
Je pensais ajouter ces équipements sur ce design, identifier les div générées (par le data-plan_id) et les placer dans les div de mon template avec du jquery (.append()). Cela me parait bien plus propre et efficace que de placer un equipement en utilisant juste les cordonnées X,Y…
La problématique est que l’ajout d’un équipement sur un design entraine la création automatique de propriété CSS (par exemple du position: absolute !important;) qui pour certaines m’empêchent de faire ce que je souhaite.
J’ai essayé de rajouter des css personnalisés dans l’affichage avancée de l’équipement mais cela ne supprime pas la surcouche css de base générée par Jeedom…

Je comprends bien que l’interface de configuration du design est orientée « grand public » mais est il possible de pouvoir juste gérer des équipements sans le CSS du positionnement et les gérer par nous même avec nos propres CSS (en sorte pouvoir désactiver la surcouche CSS en mode avancé…)

PS: pour info, j’ai également rencontré ce genre de problème pour gérer facilement des popup à cause des zorder qui sont appliqués d’office. Ca serat pas mal de pouvoir le gérer nous même pour ceux qui le veulent…

J’espère que mon charabia est clair… :smiley:

2

Je réponds à ma question.
C’est un peu lourd mais il faut utiliser la fonction .css()
Dans mon jquery, j’ai donc des lignes du genre:

$('.eqLogic-widget[data-eqLogic_id="146').css('top','unset');
$('.eqLogic-widget[data-eqLogic_id="146').css('left','unset');
$('[data-plan_id="44"]').appendTo("#MA_DIV");
3

Je dois etre dans le meme cas que toi, et ton post va m’interesser. Je fais un peu tout à l’envers de mon coté, je fait d’abord le design en statique sur Sketch et je l’intégrerai a la main dans cet outil la. J’avais checké quelles étaient les possibilités de surchage avec un bon gros html * { all: unset }, ca avait l’air d’avoir bien tout peté, ce qui était le but.
Chez toi ca ne marche pas ? Il y a quand meme une surchage qui se fait par dessus ?

4

Effectivement, c’est dommage de ne pas avoir une possibilité de créer un design « statique » pour ceux qui savent coder une page HTML/CSS/JS sans toutes les surcouches liées à Jeedom…
Du coup pour le moment, je n’ai pas trouvé d’autres moyens que la méthode que j’ai citée au dessus.
De la même manière (et il y a un tuto sur le sujet sur le forum), c’est assez archaïque pour gérer les popups mais on y arrive…
Je montrerai le résultat de ce que j’ai fait par la suite. Pour le moment, je me bats sur la création de widget perso! :smiley:

1 « J'aime »
6

Bonjour,
En effet c’est dommage que l’on ne puisse pas créer notre design sans toute la surcouche Jeedom (qui est quand même lourde…) J’ai essayé de faire mon design directement dans un fichier .html et d’accéder à ce fichier directement par son url : https://monjeedom/mondesign.html. Le problème est que nous ne sommes plus vraiment sur Jeedom et donc je n’ai plus les scripts pour lancer mes commandes… Y a t-il une solution pour intégrer les scripts de Jeedom dans mon fichier html ??
Ce serait une bonne méthode pour créer un design html/css sans être embêté par la surcouche de Jeedom mais je ne sais pas si c’est faisable…