Toujours les mêmes classes du core (cmd-widget et container-fluid) ) qui imposent un largeur mini ou des marges G D importantes.
Je ne suis pas non plus fan de la modification d’attributs à la racine du document.
Par contre, je continue à utiliser ce code pour la colorisation en fonction des niveaux. Je vais voir pour passer sur un widget propre du core mais je me rappelle qu’il y avait un souci.
Oui, dans la même cellule. Il faut tout reprendre avec colspan et rowspan. C’est peut être mieux comme cela. Mais je vais surtout passer sur des widgets du core car sincèrement ça sera la dernière fois que je fais ce type de correction donc je veux que ce soit pérenne.
Ce n’était pas le cas, il y a quelques heures:
Le widget que j’ai corrigé a toujours occupé toute la largeur de la cellule. Un 2ème widget provoque un saut de ligne.
Rien d’urgent si le widget line avec couleur et range fonctionne.
Il utilise jQuery. Il sera à reprendre lorsque Jeedom décidera de supprimer son chargement par le core…
Cela dépend des tableaux que j’ai fait. Certains étaient dans la même cellule, d’autres pas.
Merci pour ton aide.
Je vais reprendre peu à peu, mais c’est un travail de dingue pas glop du tout…
Par contre, j’ai un souci sur « binary switch » du core.
Il prend une place de dingue.
Si je le remplace par un Toggle, beaucoup moins joli, le tableau prend bien une taille minimale.
J’ai cherché sur le forum et personne n’a rencontré cela, après c’est vrai que la tendance est de faire des images avec des interr pour designer ce qu’on utilise, mais je trouve ce widget simple et efficace.
Je ne trouve pas la propriété à modifier pour réduire la largeur pour le CSS avancé.
J’aurai cru que c’était .content-xs mais j’ai beau mettre width à une valeur basse, il me modifie tout.
On ne peut pas forcer la propriété uniquement pour le bouton ?
Comme écrit plus haut, je déteste les perso avancées.
Je vous propose un widget à placer dans data/customTemplates/dashboard
Ca aurait pu être fait par un paramètre optionnel du widget binarySwitch du core.
Son nom est cmd.action.other.binarySwitchLabelOnTop.html à affecter aux commandes en remplacement du binarySwitch trop large.
Bonjour,
Celui là a résisté un peu plus. Il utilise encore jQuery.
Code du widget cmd.info. ( numeric ou binary? ).sonNomAdefinir.html
Code supprimé. Evolution en cours. Utilisait jQuery.
Si besoin, il est récupérable dans l'historique de ce post.
Largeur mini 80px
Il ne fait que vert fixe et rouge clignotant. Je ne vois pas le code qui changerait la couleur.
Comment la changez-vous?
Il faut aussi mettre le paramètre blink à 1 pour arrêter le clignotement
C’est un numeric ou un binary ?
Vous êtes certain d’avoir fourni le code du bon widget ?
J’avais modifié le code pour changer la couleur directement (pour le givre) et ensuite j’avais fait un numeric pour l’alerte météo.
Je vais me débrouiller, tu as déjà bien bossé.
Grâce à ton travail, je rajoute deux widgets au cas où pour quelqu’un qui fait une pierre deux coups. Givre (1) et alerte météo (2 à 4)
cette même LED qui clignote en fonction du niveau d’alerte météo.
0 = vert
1 = bleu clignotement
2 = jaune fixe
3 = orange clignotement
4 = rouge clignotement
cmd.info.numeric.Info dot meteo
Code du widget
<div style="margin:0px; padding:0px; width:40px; height: 28px;" class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="line" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!--
https://github.com/Desaydrone/jeedom_v4_widget/blob/master/dashboard/tarlak_dot_binary_state.html
Maj: 28 04 2020 14:13:13
Tarlak :
Version 0.1 :
Avec l'aide de Domotech pour l'amélioration css, grand merci a lui : http://youtube.com/domotech
** Paramètres option du widget
blink : si valeur à 1 alors la pastille rouge ne clignotera plus*
Maj: 25 01 2025 Passage à Jeedom 4.4
-->
<div class="led#id#">
</div>
<style>
:root {
--couleuractualisee#id#: #838383;
--orange: #FFB82B;
--rouge: #da3037;
--jaune: #FFF600;
--vert: #30b455;
--gris: #838383;
--noir: #000000;
--blanc: #ffffff;
--bleu: #5078AA;
--offset: -8px;
--element-size: 8px;
}
@keyframes glowing {
0% {
box-shadow: 0 0 -10px var(--blanc);
}
40% {
box-shadow: 0 0 20px var(--blanc);
}
60% {
box-shadow: 0 0 20px var(--blanc);
}
100% {
box-shadow: 0 0 -10px var(--blanc);
}
}
@-webkit-keyframes blinker {
from {
opacity: 1.0;
}
to {
opacity: 0.0;
}
}
.led#id# {
position: relative;
margin: 1em;
width: var(--element-size);
height: var(--element-size);
border-radius: 50%;
color: #fff;
background: var(--couleuractualisee#id#);
line-height: var(--element-size);
border: 3px solid var(--couleuractualisee#id#);
text-align: center;
}
.led#id#:after {
content: '';
position: absolute;
top: var(--offset);
bottom: var(--offset);
left: var(--offset);
right: var(--offset);
border-radius: 50%;
border: 2px solid var(--couleuractualisee#id#);
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
var cmd = $('.cmd[data-cmd_id=#id#]');
var blink#id# = ('#blink#' !='#'+'blink#') ? parseInt("#blink#") :0;
// Récupération des valeurs
var valeur = _options.display_value;
if (valeur == 0) {
// pas de clignotement, affichage d'une LED vert !
document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--vert');
cmd.find('.led#id#').css('animation', 'none');
}
else if (valeur == 1) {
// clignotement, affichage d'une LED bleu !
document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--bleu');
if (blink#id#==0)
{
cmd.find('.led#id#').css('animation', 'blinker 0.8s linear infinite');
}
}
else if (valeur == 2) {
// pas de clignotement, affichage d'une LED jaune !
document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--jaune');
cmd.find('.led#id#').css('animation', 'none');
}
else if (valeur == 3) {
document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--orange');
if (blink#id#==0)
{
cmd.find('.led#id#').css('animation', 'blinker 0.8s linear infinite');
}
}
else if (valeur == 4) {
document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--rouge');
if (blink#id#==0)
{
cmd.find('.led#id#').css('animation', 'blinker 0.8s linear infinite');
}
}
$('.cmd[data-cmd_id=#id#]').attr('title', 'Valeur du ' + _options.valueDate + ', collectée le ' + _options.collectDate);
}
jeedom.cmd.update['#id#']({
display_value: '#state#',
valueDate: '#valueDate#',
collectDate: '#collectDate#',
alertLevel: '#alertLevel#'
});
</script>
</div>
Il faudra juste un scénario pour « capter » et traduire votre alerte météo avec le bon nombre.
Par exemple :
Il y a quand même des trucs que je ne m’explique pas.
Je suis passé au rowspan et colspan car avant mes widgets quand je mettais deux infos prenaient deux lignes.
Je n’ai pourtant rien changé et les tableaux prennent beaucoup plus de place.
Il faudrait presque faire sauter 2 lignes pour avoir la même occupation que l’ancien qui aurait deux lignes de plus. Sachant que j’ai réduit la hauteur de ton widget car sinon il prenait vraiment beaucoup.
)
pas glop du tout…
