Salut,
Si tu sais coder, ce sont les paramètres width et heigth qu’il faut modifier en prenant garder à ne modifier que le widget en question.
Ce tag est normalement passé en paramètre optionnel dans l’onglet affichage de la commande ou de l’info.
On peut donc y saisir ce que l’on veut en espérant que ce sont bien des nombres qui sont saisis. Ce n’est pas ça qui devrait poser problème.
J’ai demandé à voir le reste du code parce que sans ça, je ne vois pas ce qu’on peut dire, si ce n’est d’affecter le tag à une variable et de faire ses tests sur cette variable.
Mais c’est juste de la forme et ça ne change rien à l’écriture.
Bonjour à tous,
**Mise à jour du code en utilisant des .find comme suggéré par @Salvialf j’espère que c’est ce qu’il voyait comme modification **
J’avais envie de m’amuser encore un peu avec les widget, donc après avoir adapter le température sans fichier images mais en css, je me suis donc attaqué au niveau de batterie.
La jauge de batterie du widget évolue en fonction du niveau de la batterie. Comme vous pouvez le voir sur les images, à noter que lorsque la batterie est rouge l’éclair et le niveau clignote.
Un paramétrage minimum est possible en début de script vous pouvez modifier deux valeurs, celles-ci sont les bornes afin de définir quand l’affichage passe en rouge et quand il passe en orange.
var niv_alert = 16; //Valeur rouge
var niv_warm = 32; // Valeur orange
Vous pouvez également modifier les couleurs assez facilement dans la section suivante,
:root {
--warn: #efaf13;
--alertniveau: #da3037;
--vert: #30b455;
--noir: #000000;
--gris: #838383;
--blanc: #ffffff;
--lightning-size: 18px;
}
J’ai testé plusieurs valeurs qui sont toujours ressorties correct visuellement. J’ai tester cela sous firefox et IE (oui on sait jamais), je n’ai pas encore testé sous chrome ni safari. N’hésitez pas a revenir vers moi si jamais vous l’utilisez et que vous constaté des bugs
Le code est dispo sur github : tarlak_battery_state.html
Mis à jour :
Version 0.2 : Ajout de la gestion des thèmes dark et light de jeedom pour le changement de couleur automatique de certain éléments
Soyons fou j’ai crée un petit repo github : Github des widgets
Bonjour,
Tu veux t’amuser, tu as raison, mais sache qu’avec le widget-core Multistate tu peux faire exactement la même chose sans écrire une ligne de code.
Juste connaître.un peu le CSS.
J’avais commencé avec un multistate mais je n’ai pas trouvé / compris comment je pouvais y mettre mon propre css, je pouvais juste sélectionner des images déjà dispos ou des images que je pouvais importer. Du coup j’ai cédé à la facilité et codé ça.
Il te suffit de mettre ton CSS à la suite des images à l’intérieur des <>
Et puis dire que coder c’est céder à la facilité, tu exagères.
J’essaierai d’en faire une version comme cela, mais honnêtement ça me semble moins pratique que ce que j’ai fait. Mais j’essaierai de trouve des exemples pour mieux comprendre ce qu’il est possible de faire
L’avantage d’utiliser les widgets-core, c’est en cas de maj du core ton design n’en sera pas affecté.
J’ai développé moi-même plusieurs widgets.
Je n’utilise presque plus de widgets-tiers, j’arrive à faire à peu près ce que je veux avec ceux du core.
Ha mais j’en doute pas, c’est juste que la je vois, pour le moment, vraiment pas comment faire pour que ce que j’ai fait en code soit transposable en widget corps vu que je n’utilise aucune image.
Je me doute que ça doit être possible mais pour le moment je ne vois pas comment ça viendra peut être
Salut,
Tu ne pourras jamais transposer ça dans un template de widget core.
Très bien ton widget !!
Tu pourrais juste optimiser la partie js en passant par des .find
au lieu de parcourir tout le DOM à chaque passage (inspires toi des wigdets core)
Merci @Salvialf,
J’avoue que je suis pas au top niveau JS je me suis inspiré de ce que j’ai trouvé et adapter. Je vais regarder ça, merci pour l’info
C’est exactement ça !!
Maintenant tu peux virer les #id#
sur tes classes elles n’ont plus besoin d’être référencées vu que tu vas les chercher explicitement dans le code …donc moins de remplacements à faire pour le navigateur c’est tout bénéf !
Edit: petite dédicace @kiboost qui m’avait expliqué tout cela il y a quelques temps
hello
intéressant ces petits widgets ça donne quoi en mode dark ?
+++
Alors pour le moment ce n’est pas terrible, même si c’est facilement transformable.
Je n’ai pas encore bien parcouru la doc jeedom pour voir comment détecter le mode dark pour justement adapter le contour de la batterie en blanc et mettre un fond transparent mais des que je trouves je rajoute cela car je suis plus interface dark que light
// Sélection du mode clair ou sombre
/*
if ($('body')[0].hasAttribute('data-theme')) {
if ($('body').attr('data-theme').endsWith('Light')) {
srcMode = "light";
} else {
srcMode = "dark";
}
}
*/
Bon recherche fructueuse voila ce que ca peut donner en black, sachant que ca s’adapte en fonction du thème utilisé
La question est : est-ce que la couleur gris du % de batterie est suffisant sur du noir
Ha ben j’ai trouvé une autre méthode en surchargeant le css, mais je garde ça en mémoire également au cas ou
.battery {
/* Declaration CSS pour le theme light et légacy */
}
[data-theme="core2019_Dark"] .battery {
/* déclaration CSS pour le thème Dark */
}
bien aussi
Comme je suis sur ma lancée et que j’ai un peu d’inspiration, voila deux autres widget
Les deux sont des widget binaire sont toujours en full CSS
Le premier permet d’afficher l’état de présence de quelqu’un il reprend le style de mes autre widget, ce qui permet une certaine armonie visuel :
Voici le visuel du premier widget:
Pour la version light et legacy du thème
Pour la version Dark
Voici le code est dispo sur github : tarlak_presence_state.html
Le deuxième et juste un tentative de « led » rouge ou verte en fonction de l’état binaire d’une information.
Edit : Merci @Domotech pour son aide sur le CSS sur le décalage des puces
Son visuel :
La version rouge bien entendu clignote.
Le code :
Le fichier à télécharger pour ce widget est dispo ici : tarlak_dot_binary_state.html
Et pour les retrouver facilement ils sont dispo sur github