Bonjour,
J’ai un équipement « Loto » dans le dashboard ou je récupère par des scripts le résultat du tirage de l’Euromillion
J’aimerais dans un design avoir un résultat qui ressemble à ça :
J’ai bien une idée effacer les numéro sur l’image tant attendue et rajouter par superposition mes numéro 1 par 1 sur le design.
Mais si y’a une astuce plus « pro » et qui soit moins lourde a la charge du design je suis preneur.
Merci et joyeux Noël
Hello,
un widget code devrait faire le boulot :
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="euromillions" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!--
Widget name : cmd.info.numeric.euromillions
Github : https://community.jeedom.com/t/affichage-personnalise-loto/117886
Création : @PhpVarious
Date : 25/12/2023 19h20
-->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm">
<span class="state">
<span class="number#id#" style=""></span>
</span>
</div>
<style>
:root {
--size#id#: 40px;
--color#id# : #001367;
--colorText#id# : white;
}
.number#id#.has-bgstar#id# {
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
border-radius: 0;
padding-top: 2px;
background-color: transparent;
}
.number#id# {
/*display: inline-block;*/
display: flex;
position: relative;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
margin: 5px;
height: var(--size#id#);
text-shadow: 1px 1px 0px #000;
width: var(--size#id#);
font-size: calc(0.52 * var(--size#id#));
color: var(--colorText#id#);
text-align: center;
line-height: var(--size#id#);
border-radius: 50%;
transition: all .2s;
transform: translateY(0px);
background: var(--color#id#);
font-weight: 500;
}
.number#id#.animate#id#:after {
content: "";
width: calc(var(--size#id#) - 10px);
height: calc(var(--size#id#) * 0.06);
background: var(--link-color);
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
filter: blur(1px);
z-index: 0;
bottom: -8px;
transition: all .2s;
opacity: 1;
}
.number#id#.animate#id#:hover {
transform: translateY(-8px);
}
.number#id#.animate#id#:hover:after {
width: calc(var(--size#id#) + 10px);
filter: blur(3px);
bottom: -18px;
height: calc(var(--size#id#) * 0.06);
opacity: 0.7;
}
div.cmd-widget[data-type="info"][data-subtype="numeric"][data-template="euromillions"][data-cmd_id="#id#"] {
min-width: calc(var(--size#id#) + 10px);
}
</style>
<template>
<div>size : Taille du widget [défaut : 40 | min : 40 ]</div>
<div>etoile : Charge le widget en étoile si valeur est 1 [défaut : 0]</div>
<div>color : Couleur de la boule ou étoile [défaut : #001367 si boule | #EEBB05 si étoile]</div>
<div>colorText : Couleur du texte [défaut : #FFFFFF]</div>
<div>animate : Active l'animation au survol [défaut : 0]</div>
</template>
<script>
var color#id# = '#001367'
var colorEtoile#id# = '#EEBB05'
if (is_object(cmd = document.querySelector('.cmd[data-cmd_uid="#uid#"]'))) {
if ('#color#' != '#'+'color#' && '#color#' != "") {
color#id# = '#color#'
colorEtoile#id# = '#color#'
document.documentElement.style.setProperty('--color#id#', color#id#)
}
if (is_numeric('#etoile#') && '#etoile#'=="1")
{
cmd.querySelector('.number#id#').classList.add('has-bgstar#id#')
var svg#id# = "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 25 25' enable-background='new 0 0 25 25' xml:space='preserve' height='25px' width='25px'><g fill='"+colorEtoile#id#+"'><path d='M24.937 9.45c-.152-.487-.555-.843-1.04-.917L16.82 7.458 13.656.751C13.438.291 12.99 0 12.5 0c-.49 0-.939.291-1.156.751L8.18 7.458 1.104 8.533c-.486.074-.89.43-1.04.918-.152.488-.026 1.023.325 1.382l5.12 5.22-1.208 7.371c-.083.506.116 1.017.513 1.319.396.301.923.341 1.357.102l6.329-3.48 6.329 3.48c.189.104.394.155.6.155.267 0 .533-.087.757-.257.397-.302.596-.813.513-1.319l-1.208-7.371 5.12-5.22c.351-.359.477-.894.326-1.382' transform='translate(-375 -342) translate(215 236) translate(10 106) translate(150)'/></g></svg>"
cmd.querySelector('.number#id#').style.backgroundImage = 'url("data:image/svg+xml;utf8,'+svg#id#.replace("#", '%23')+'")'
}
if (is_numeric('#size#')) document.documentElement.style.setProperty('--size#id#', ('#size#' < 40) ? '40px' : '#size#px')
if ('#animate#' == '1') cmd.querySelector('.number#id#').classList.add('animate#id#')
if ('#colorText#' != '#'+'colorText#') document.documentElement.style.setProperty('--colorText#id#', '#colorText#')
}
jeedom.cmd.addUpdateFunction('#id#',function(_options) {
$('.cmd[data-cmd_id=#id#]').attr('title', '{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate)
$('.cmd[data-cmd_id=#id#] .number#id#').empty().append(_options.value)
});
jeedom.cmd.refreshValue([{cmd_id :'#id#',value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#', unit: '#unite#'}])
</script>
</div>
Pour la partie « étoile » il suffit juste de mettre le paramètre optionnel :
Résultat :
avec animate :
Joyeux Noël 
Bonjour, oh 
.
Merci pour le cadeau de Noël. Je ne suis pas chez moi. Je vais essayer ça mon retour
C’est un widget code sur tu avais déjà?
Merci
Non, c’est les lutins qui l’ont fabriqué pour toi
Bonjour,
je suis trop content du résultat. 
Merci
J’ai essayé de l’adapter pour le loto. j’ai réussi à changer la couleur en bleu ciel dans le code et la place de l’etoile je cherche à avoir la boule rouge comme ci-dessous. la je bloque…
Merci pour ton aide
Hello,
Pas besoin de toucher au code pour ca, il suffit de renseigner le paramètre optionnel
Pour ceci aussi, c’est en paramètre optionnel.
Edit : Je croit comprendre, J’ai amélioré le widget, mais comme tu n’avais pas encore réagis sur celui-ci, j’ai pas jugé nécessaire de l’indiquer, tu as donc du copié la 1ère version.
Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.