Partage Widget V4

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 :stuck_out_tongue: **

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.

battery_08 battery_07 battery_06 battery_04 battery_03 battery_02 battery_01

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

3 « J'aime »

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. :stuck_out_tongue:

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 :stuck_out_tongue: ça viendra peut être

Salut,

Tu ne pourras jamais transposer ça dans un template de widget core.

Très bien ton widget :+1:t4: :+1:t4: :+1:t4: !!

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)

1 « J'aime »

Merci @Salvialf,

J’avoue que je suis pas au top niveau JS :stuck_out_tongue: je me suis inspiré de ce que j’ai trouvé et adapter. Je vais regarder ça, merci pour l’info

C’est exactement ça !! :star_struck:

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 ! :innocent:

Edit: petite dédicace @kiboost qui m’avait expliqué tout cela il y a quelques temps :wink:

Voila cette fois ça devrait être bon , merci à toi et indirectement @kiboost alors :slight_smile:

1 « J'aime »

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.

Screenshot_1

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 :wink:

 // 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";
    }
  }
*/

@nawak86

Bon recherche fructueuse voila ce que ca peut donner en black, sachant que ca s’adapte en fonction du thème utilisé

battery_black_03 battery_black_02 battery_black_01

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 */
}

:+1: bien aussi

1 « J'aime »

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 :

exemple_widget

Voici le visuel du premier widget:

Pour la version light et legacy du thème
presence_light_present presence_light_absent

Pour la version Dark
presence_dark_present presence_dark_absent

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 :
2020-03-03_17h21_42

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