Bonjour,
Depuis 2020, je monte petit à petit mon jeedom. J’arrive à un moment où il faut mettre les mains dans le cambouie pour le design. je suis actuellement sur jeedomconnect mais je souhaite basculer sur les designs et l’appli jeedom V2 qui me convient.
donc pour ca je dois mettre les mains dans le HTML et Css. et la ca devient dur.
j’ai chercher pendant des semaines un type de design qui pourrais me plaire. simple, minimaliste et sobre. et voila celui qui m’a donné des idées.
j’ai donc commencé à écrire des tuiles en Html, et a vrai dire le rendu me plait vraiment.
mais les problèmes sont la :
- comment isoler les html les un des autres ? en effet quand je change la taille du carré, ca change la taille de tout les html de la page. j’imagine qu’il manque des div mais je n’arrive pas à les placer?
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Widget Porte et fenetre</title>
<style>
.carre {
width: 150px; /* Largeur du carré */
height: 150px; /* Hauteur du carré */
background-color: black; /* Couleur de fond du carré */
border-radius: 15px; /* Arrondir les coins */
display: flex;
flex-direction: column; /* Aligner les éléments verticalement */
justify-content: flex-start; /* Aligner le contenu en haut */
align-items: center; /* Centrer horizontalement */
position: relative;
padding-top: 10px; /* Espacement en haut pour le texte */
}
.texte {
font-size: 20px; /* Taille du texte */
color: white; /* Couleur du texte */
font-family: Arial, sans-serif; /* Police du texte */
margin-bottom: 20px; /* Espacement entre le texte et l'icône */
}
.carre i {
font-size: 80px; /* Taille de l'icône */
color: white; /* Couleur de l'icône */
}
</style>
</head>
<body>
<div class="carre">
<p class="texte">Porte d'entrée</p> <!-- Texte en haut centré -->
<i class="fas fa-door-closed"></i> <!-- Icône centrée -->
</div>
</a>
</body>
</html>
- je voudrais afficher sur certains tuiles une valeurs binaires, numériques ou autres en bas a gauche de la tuile.
j’ai vu dans la documentation que pour avoir une valeur dynamique et en temps réel il fallait utiliser le code dessous mais je n’arrive pas à le placer correctement dans mon widget.
<script>
jeedom.cmd.addUpdateFunction('#id#', function(_options) {
if (is_object(cmd = document.querySelector('.cmd[data-cmd_id="#id#"]'))) {
cmd.setAttribute('title', ': ' + _options.valueDate + '<br>: ' + _options.collectDate)
cmd.querySelector('.value').innerHTML = _options.display_value
cmd.querySelector('.unit').innerHTML = _options.unit
}
}
jeedom.cmd.refreshValue([{ cmd_id: '#id#', value: '#value#', display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#' }])
</script>`Texte préformaté`
- en fonction du code du dessus et donc de la valeur afficher, sur certains widgets en html je souhaiterais changer l’icone FA. Idem je n’ai pas trouvé d’exemple pour m’inspirer.
pour conclure, j’ai choisis de faire un HTML par widget pour me simplifier la tache en terme de maintenance. Ayant des compétences limitées, c’est plus facile pour moi de lire le code.
Et voila ou j’en suis 
Ma première fierté malgré tout a été de réussir à faire des boutons accueil ou autres qui amène vers un design
ce sont les premières questions que je dois résoudre avant d’avancer et de vous en poser d’autres.
