Bonjour à tous,
ça vous dit le code pour un widget de switch pas mal paramétrable?
Basé sur nooNeonButton de @noodom
Quelques exemples avec différents paramétrages 
Code à venir
Silkarion
Réservé pour le code…
Je vous laisse jouer avec cette v1.0
Il restera une sécurisation des paramètres pour éviter les résultats étranges…
Toute idée d’amélioration/correction est la bienvenue
<div class="silkButton#id#">
<!-- ################ _GenericSwitchButton ################
Versionnage :
V1.0 - 24/02/2025 : Création
########### by @Silkarion
########### inspiré par nooNeonButton de @noodom #############
-->
<template>
<div></div>
<div></div>
<div></div>
<div>/*************************************/</div>
<div>/* ******* Button parameters ******* */</div>
<div>/*************************************/</div>
<div>ButtonWidth : largeur du bouton (defaut: 120px)</div>
<div>ButtonHeight : hauteur du bouton (defaut: 40px)</div>
<div>BouttonOrient : angle du bouton (defaut: 0deg)</div>
<div></div>
<div>NeonLevelOn : niveau néon du bouton à On en multiple de 10px (defaut: 0.0)</div>
<div>NeonLevelOff : niveau néon du bouton à Off en multiple de 10px (defaut: 0.0)</div>
<div>BouttonRadius : Radius du bouton en % ou px (defaut: 20px)</div>
<div></div>
<div>backgroundColorFromOn : couleur de début du dégradé du bouton On ('#70a1ff' si non renseigné)</div>
<div>backgroundColorToOn : couleur de fin du dégradé du bouton On ('#1e90ff' si non renseigné)</div>
<div>backgroundColorFromOff : couleur de début du dégradé du bouton Off ('#333' si non renseigné)</div>
<div>backgroundColorToOff : couleur de fin du dégradé du bouton Off ('#252525' si non renseigné)</div>
<div></div>
<div></div>
<div></div>
<div>/*************************************/</div>
<div>/* ******* Mover parameters ******* */</div>
<div>/*************************************/</div>
<div>MoverWidth : Largeur du bouton mobile (defaut: 40px) </div>
<div></div>
<div></div>
<div></div>
<div>/*************************************/</div>
<div>/* ******* LED parameters ******* */</div>
<div>/*************************************/</div>
<div>MoverLedWidthRatio : Ratio de largeur par rapport au bouton (defaut: 0.2)</div>
<div>MoverLedHeightRatio : Ratio de hauteur par rapport au bouton (defaut: 0.2)</div>
<div></div>
<div>LedRadius : Radius de la led (defaut: 10px)</div>
<div></div>
<div></div>
<div></div>
<div>/*************************************/</div>
<div>/* ******* Texte parameters ******** */</div>
<div>/*************************************/</div>
<div>nameTextOn : contenu du texte du bouton On (vide si non renseigné)</div>
<div>nameTextOff : contenu du texte du bouton Off (nameTextOn si non renseigné, vide si nameTextOn non renseigné)</div>
<div></div>
<div>colorTextOn : couleur du texte du bouton On (backgroundColorFromOn si non renseigné)</div>
<div>colorTextOff : couleur du texte du bouton Off (colorTextOn si non renseigné, '#000' si colorTextOn non renseigné)</div>
<div></div>
<div></div>
<div></div>
</template>
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<input type="checkbox" id="neonInput#id#" class="neonInput#id#" class="toggle cursor cmd tooltips cmd-widget"
data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#">
<span id="neonText#id#" data-on="On" data-off="Off"></span>
</div>
<script type="text/javascript">
/*************************************/
/* ******* Button parameters ******* */
/*************************************/
var buttonWidth#uid# = (('#ButtonWidth#' !='#'+'ButtonWidth#')) ? parseInt("#ButtonWidth#") : 120;
if(buttonWidth#uid#=='') {buttonWidth#uid#=120;}
document.documentElement.style.setProperty('--button-size-width#uid#', parseInt(buttonWidth#uid#) + 'px');
var buttonHeight#uid# = (('#ButtonHeight#' !='#'+'ButtonHeight#')) ? parseInt("#ButtonHeight#") : 40;
if(buttonHeight#uid#=='') {buttonHeight#uid#=40;}
document.documentElement.style.setProperty('--button-size-height#uid#', parseInt(buttonHeight#uid#) + 'px');
var buttonDeg#id# = ('#BouttonOrient#' != '#' + 'BouttonOrient#') ? "#BouttonOrient#" : "0deg";
if (buttonDeg#id# != '')
{ document.documentElement.style.setProperty('--buttonDeg#id#', buttonDeg#id#);}
else
{ document.documentElement.style.setProperty('--buttonDeg#id#', "0deg");}
var neonLevelOn#uid# = (('#NeonLevelOn#' !='#'+'NeonLevelOn#')) ? parseFloat("#NeonLevelOn#") : 0;
if(neonLevelOn#uid#=='') {neonLevelOn#uid#=0;}
document.documentElement.style.setProperty('--neon-levelOn#uid#', parseInt(neonLevelOn#uid# * 10) + 'px');
var neonLevelOff#uid# = (('#NeonLevelOff#' !='#'+'NeonLevelOff#')) ? parseFloat("#NeonLevelOff#") : 0;
if(neonLevelOff#uid#=='') {neonLevelOff#uid#=0;}
document.documentElement.style.setProperty('--neon-levelOff#uid#', parseInt(neonLevelOff#uid# * 10) + 'px');
var buttonRadius#uid# = ('#BouttonRadius#' != '#' + 'BouttonRadius#') ? "#BouttonRadius#" : '20px';
if (buttonRadius#uid# != '')
{ document.documentElement.style.setProperty('--button-radius#uid#', buttonRadius#uid#);}
else
{ document.documentElement.style.setProperty('--button-radius#uid#', '20px');}
// Dégradé pour bouton On
var backgroundColorFromOn#id# = ('#backgroundColorFromOn#' != '#' + 'backgroundColorFromOn#') ? "#backgroundColorFromOn#" : '#70a1ff';
if (backgroundColorFromOn#id# != '') {
document.documentElement.style.setProperty('--background-color-from-on#id#', backgroundColorFromOn#id#);
}
var backgroundColorToOn#id# = ('#backgroundColorToOn#' != '#' + 'backgroundColorToOn#') ? "#backgroundColorToOn#" : '#1e90ff';
if (backgroundColorToOn#id# != '') {
document.documentElement.style.setProperty('--background-color-to-on#id#', backgroundColorToOn#id#);
}
// Dégradé pour bouton Off
var backgroundColorFromOff#id# = ('#backgroundColorFromOff#' != '#' + 'backgroundColorFromOff#') ? "#backgroundColorFromOff#" : '#333';
if (backgroundColorFromOff#id# != '') {
document.documentElement.style.setProperty('--background-color-from-off#id#', backgroundColorFromOff#id#);
}
var backgroundColorToOff#id# = ('#backgroundColorToOff#' != '#' + 'backgroundColorToOff#') ? "#backgroundColorToOff#" : '#252525';
if (backgroundColorToOff#id# != '') {
document.documentElement.style.setProperty('--background-color-to-off#id#', backgroundColorToOff#id#);
}
/*************************************/
/* ******** Mover parameters ******* */
/*************************************/
var moverWidth#uid# = ('#MoverWidth#' != '#' + 'MoverWidth#') ? "#MoverWidth#" : '40px';
if (moverWidth#uid# != '')
{ document.documentElement.style.setProperty('--mover-width#uid#', parseInt(moverWidth#uid#) +'px');}
else
{ document.documentElement.style.setProperty('--mover-width#uid#', '40px');}
/*************************************/
/* ******* LED parameters ********** */
/*************************************/
var moverLedWidthRatio#uid# = ('#MoverLedWidthRatio#' !='#'+'MoverLedWidthRatio#') ? parseFloat("#MoverLedWidthRatio#") : 0.2;
if (moverLedWidthRatio#uid# != '')
{ document.documentElement.style.setProperty('--mover-led-width-ratio#uid#', moverLedWidthRatio#uid#);}
else
{ document.documentElement.style.setProperty('--mover-led-width-ratio#uid#', 0.2);}
var moverLedHeightRatio#uid# = ('#MoverLedHeightRatio#' !='#'+'MoverLedHeightRatio#') ? parseFloat("#MoverLedHeightRatio#") : 0.2;
if (moverLedHeightRatio#uid# != '')
{ document.documentElement.style.setProperty('--mover-led-height-ratio#uid#', moverLedHeightRatio#uid#);}
else
{ document.documentElement.style.setProperty('--mover-led-height-ratio#uid#', 0.2);}
var ledRadius#uid# = ('#LedRadius#' != '#' + 'LedRadius#') ? "#LedRadius#" : '10px';
if (ledRadius#uid# != '')
{ document.documentElement.style.setProperty('--mover-led-radius#uid#', ledRadius#uid#);}
else
{ document.documentElement.style.setProperty('--mover-led-radius#uid#', '10px');}
/*************************************/
/* ******** Texte parameters ******* */
/*************************************/
// Couleur texte pour bouton On
var colorTextOn#id# = ('#colorTextOn#' != '#' + 'colorTextOn#') ? "#colorTextOn#" : backgroundColorFromOn#id#;
// Couleur texte pour bouton Off
var colorTextOff#id# = ('#colorTextOff#' != '#' + 'colorTextOff#') ? "#colorTextOff#" : ((colorTextOn#id# != '')?colorTextOn#id#: '#000');
// Texte pour bouton On
var nameTextOn#id# = ('#nameTextOn#' != '#' + 'nameTextOn#') ? "#nameTextOn#" : '';
// Texte pour bouton Off
var nameTextOff#id# = ('#nameTextOff#' != '#' + 'nameTextOff#') ? "#nameTextOff#" : ((nameTextOn#id# != '')?nameTextOn#id#: '');
jeedom.cmd.update['#id#'] = function (_options) {
document.getElementById('neonText#id#').style.display = (nameTextOn#id# == '' && nameTextOn#id# == '')?"none":"block";
if (_options.display_value == '1' || _options.display_value == 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
document.getElementById('neonInput#id#').checked = true;
document.documentElement.style.setProperty('--text-color#id#', colorTextOn#id#);
document.getElementById('neonText#id#').innerHTML = nameTextOn#id#;
} else {
document.getElementById('neonInput#id#').checked = false;
document.documentElement.style.setProperty('--text-color#id#', colorTextOff#id#);
document.getElementById('neonText#id#').innerHTML = nameTextOff#id#;
}
}
jeedom.cmd.update['#id#']({ display_value: '#state#' });
$('#neonInput#id#').off().on('click', function () {
jeedom.cmd.execute({ id: '#id#' });
});
</script>
<style>
:root {
--text-color-on#id#: green;
--text-color-off#id#: red;
--background-color-from-on#id#: #70a1ff;
--background-color-to-on#id#: #1e90ff;
--background-color-from-off#id#: #333;
--background-color-to-off#id#: #000;
--buttonDeg#id#: 0deg;
--button-size-width#uid#: 120px;
--button-size-height#uid#: 40px;
--button-radius#uid#: 10px;
--mover-width#uid#: 60px;
--mover-Xpos#uid#: 20px;
--mover-led-width-ratio#uid#: 0.2;
--mover-led-height-ratio#uid#: 0.2;
--mover-led-width#uid#: calc(var(--mover-led-width-ratio#uid#)*min(var(--mover-width#uid#), var(--button-size-width#uid#), var(--button-size-height#uid#)));
--mover-led-height#uid#: calc(var(--mover-led-height-ratio#uid#)*min(var(--mover-width#uid#), var(--button-size-width#uid#), var(--button-size-height#uid#)));
--mover-led-radius#uid#: 50%;
--border-color-in#uid#:#3e3e3e;
--border-color-center#uid#:#353535;
--border-color-out#uid#:#3e3e3e;
--neon-levelOn#uid#: 10px;
--neon-levelOff#uid#: 10px;
}
/******* Contenaire principal ****/
.silkButton#id# {
-webkit-transform-origin-x: center;
-webkit-transform-origin-y: center;
transform: rotate(calc(-1 * var(--buttonDeg#id#)));
min-height: max(var(--button-size-width#uid#),calc(var(--button-size-width#uid#)*Math.sin(var(--buttonDeg#id#)))) !important;
min-width: var(--button-size-width#uid#) !important;
margin: 5px 10px 5px 10px !important ;
}
/******* Element ****/
.neonInput#id#[type="checkbox"] {
/* Marge autour de l'élément > ce qui adaptera la taille du container principal */
margin: 5px 5px 5px 5px !important;
position: relative !important;
width: var(--button-size-width#uid#) !important;
height: var(--button-size-height#uid#) !important;
-webkit-appearance: none !important;
outline: none !important;
border-radius: var(--button-radius#uid#) !important;
}
/* affichage spécifique à l'état ON */
.neonInput#id#:checked[type="checkbox"] {
background: linear-gradient(calc(-1 * var(--buttonDeg#id#)), var(--background-color-from-on#id#), var(--background-color-to-on#id#)) !important;
/* box bordure*/
box-shadow: 0 0 0 2px var(--border-color-in#uid#), 0 0 var(--neon-levelOn#uid#) 4px var(--background-color-to-on#id#), 0 0 0 6px var(--border-color-out#uid#), inset 0 0 10px rgba(0, 0, 0, 1) !important;
}
/* affichage spécifique à l'état OFF */
.neonInput#id#:not(:checked)[type="checkbox"] {
background: linear-gradient(calc(-1 * var(--buttonDeg#id#)), var(--background-color-from-off#id#), var(--background-color-to-off#id#)) !important;
/* box bordure*/
box-shadow: 0 0 0 2px var(--border-color-in#uid#), 0 0 var(--neon-levelOff#uid#) 4px var(--background-color-to-off#id#), 0 0 0 6px var(--border-color-out#uid#), inset 0 0 10px rgba(0, 0, 0, 1) !important;
}
/* Le bouton mobile*/
.neonInput#id#[type="checkbox"]:before {
content: '' !important;
position: absolute;
top: 0;
left: 0;
width: var(--mover-width#uid#);
height: var(--button-size-height#uid#);
border-radius: var(--button-radius#uid#);
box-shadow: 0 0 0 1px #232323;
transform: scale(.98, .96);
transition: .5s;
background: linear-gradient(calc(-1 * var(--buttonDeg#id#)), #000 0%, #3e3e3e 75%, #6b6b6b 100%);
}
/* Effet sur le bouton quand il est activé */
.neonInput#id#:checked[type="checkbox"]:before {
background: linear-gradient(calc(-1 * var(--buttonDeg#id#)), #000 0%, #3e3e3e 75%, #6b6b6b 100%);
left: var(--mover-Xpos#uid#) !important;
left: calc(var(--button-size-width#uid#) - var(--mover-width#uid#) ) !important;
}
/* La led */
.neonInput#id#[type="checkbox"]:after {
content: '' !important;
position: absolute;
top: calc(50% - var(--mover-led-height#uid#)/2);
left: calc(var(--mover-width#uid#)/2 - var(--mover-led-width#uid#)/2);
width: var(--mover-led-width#uid#);
height: var(--mover-led-height#uid#);
border-radius: var(--mover-led-radius#uid#);
transition: .5s;
}
/* La led quand activé */
.neonInput#id#:checked[type="checkbox"]:after {
content: '' !important;
left: calc((var(--button-size-width#uid#) - (var(--mover-width#uid#)/2) - var(--mover-led-width#uid#)/2)) !important;
background: linear-gradient(calc(-1 * var(--buttonDeg#id#)), var(--background-color-to-on#id#) 0%, var(--background-color-from-on#id#) 25%, #000) !important;
box-shadow: 0px 0px 10px 2px var(--background-color-to-on#id#) !important;
}
/* La led quand non activé */
.neonInput#id#:not(:checked)[type="checkbox"]:after {
content: '' !important;
background: linear-gradient(calc(-1 * var(--buttonDeg#id#)), var(--background-color-to-off#id#) 0%, var(--background-color-from-off#id#) 25%, #000) !important;
}
#neonText#id# {
position: relative;
margin: 0;
font-family: sans-serif;
text-align: center;
color: var(--text-color#id#);
font-size: 16px;
padding: 15px 0;
text-transform: uppercase;
letter-spacing: 4px;
}
</style>
Bonjour,
Une V1.1 avec des paramétrages supplémentaires et une animation de la LED paramétrable…
Je prends toutes remarques, propositions et corrections.
<div class="silkButton#id#">
<!-- ################ _GenericSwitchButton ################
Versionnage :
V1.0 - 24/02/2025 : Création
V1.1 - 02/03/2025 : Ajout de paramétrages et animation Led
########### by @Silkarion
########### inspiré par nooNeonButton de @noodom #############
-->
<template>
<div></div>
<div></div>
<div></div>
<div>/*************************************/</div>
<div>/* ******* Button parameters ******* */</div>
<div>/*************************************/</div>
<div>ButtonWidth : largeur du bouton (defaut: 120px)</div>
<div>ButtonHeight : hauteur du bouton (defaut: 40px)</div>
<div>BouttonOrient : angle du bouton (defaut: 0deg)</div>
<div></div>
<div>NeonLevelOn : niveau néon du bouton à On en multiple de 10px (defaut: 0.0)</div>
<div>NeonLevelOff : niveau néon du bouton à Off en multiple de 10px (defaut: 0.0)</div>
<div>BouttonRadius : Radius du bouton en % ou px (defaut: 20px)</div>
<div></div>
<div>backgroundColorFromOn : couleur de début du dégradé du bouton On ('#70a1ff' si non renseigné)</div>
<div>backgroundColorToOn : couleur de fin du dégradé du bouton On ('#1e90ff' si non renseigné)</div>
<div>backgroundColorFromOff : couleur de début du dégradé du bouton Off ('#333' si non renseigné)</div>
<div>backgroundColorToOff : couleur de fin du dégradé du bouton Off ('#252525' si non renseigné)</div>
<div></div>
<div></div>
<div></div>
<div>/*************************************/</div>
<div>/* ******* Mover parameters ******* */</div>
<div>/*************************************/</div>
<div>MoverWidth : Largeur du bouton mobile (defaut: 40px) </div>
<div>MoverHeight : Hauteur du bouton mobile (defaut: ButtonHeight) </div>
<div>MoverRadius : Radius du bouton mobile en % ou px (defaut: BouttonRadius)</div>
<div></div>
<div></div>
<div>/*************************************/</div>
<div>/* ******* LED parameters ******* */</div>
<div>/*************************************/</div>
<div>LedWidthRatio : Ratio de largeur par rapport au bouton (defaut: 0.2)</div>
<div>LedHeightRatio : Ratio de hauteur par rapport au bouton (defaut: 0.2)</div>
<div>LedRadius : Radius du de la led en % ou px (defaut: MoverRadius)</div>
<div></div>
<div>LedRadius : Radius de la led (defaut: 10px)</div>
<div>LedOffsetX : Offset X en px de positionnement de la LED par rapport au centre (défaut: 0px) </div>
<div>LedOffsetY : Offset Y en px de positionnement de la LED par rapport au centre (défaut: 0px) </div>
<div>LedColorFromOn : Couleur degradé From de la Led (défaut: backgroundColorFromOn)</div>
<div>LedColorToOn : Couleur degradé To de la Led (défaut: backgroundColorToOn)</div>
<div>LedEffectOn : Effet appliqué à la LED (défaut : 0)</div>
<div> 0 : aucun</div>
<div> 1 : balayage vertical</div>
<div> 2 : balayage circulaire</div>
<div>LedEffectSpeed : Vitesse de l'effet (défaut : 1s)</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>/*************************************/</div>
<div>/* ******* Texte parameters ******** */</div>
<div>/*************************************/</div>
<div>nameTextOn : contenu du texte du bouton On (vide si non renseigné)</div>
<div>nameTextOff : contenu du texte du bouton Off (nameTextOn si non renseigné, vide si nameTextOn non renseigné)</div>
<div></div>
<div>colorTextOn : couleur du texte du bouton On (backgroundColorFromOn si non renseigné)</div>
<div>colorTextOff : couleur du texte du bouton Off (colorTextOn si non renseigné, '#000' si colorTextOn non renseigné)</div>
<div></div>
<div></div>
<div></div>
</template>
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<input type="checkbox" id="neonInput#id#" class="neonInput#id#" class="toggle cursor cmd tooltips cmd-widget"
data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#">
<span id="neonText#id#" data-on="On" data-off="Off"></span>
</div>
<script type="text/javascript">
/*************************************/
/* ******* Button parameters ******* */
/*************************************/
var buttonWidth#uid# = (('#ButtonWidth#' !='#'+'ButtonWidth#')) ? parseInt("#ButtonWidth#") : 120;
if(buttonWidth#uid#=='') {buttonWidth#uid#=120;}
document.documentElement.style.setProperty('--button-size-width#uid#', parseInt(buttonWidth#uid#) + 'px');
var buttonHeight#uid# = (('#ButtonHeight#' !='#'+'ButtonHeight#')) ? parseInt("#ButtonHeight#") : 40;
if(buttonHeight#uid#=='') {buttonHeight#uid#=40;}
document.documentElement.style.setProperty('--button-size-height#uid#', parseInt(buttonHeight#uid#) + 'px');
var buttonDeg#id# = ('#BouttonOrient#' != '#' + 'BouttonOrient#') ? "#BouttonOrient#" : "0deg";
if (buttonDeg#id# != '')
{ document.documentElement.style.setProperty('--buttonDeg#id#', buttonDeg#id#);}
else
{ document.documentElement.style.setProperty('--buttonDeg#id#', "0deg");}
var neonLevelOn#uid# = (('#NeonLevelOn#' !='#'+'NeonLevelOn#')) ? parseFloat("#NeonLevelOn#") : 0;
if(neonLevelOn#uid#=='') {neonLevelOn#uid#=0;}
document.documentElement.style.setProperty('--neon-levelOn#uid#', parseInt(neonLevelOn#uid# * 10) + 'px');
var neonLevelOff#uid# = (('#NeonLevelOff#' !='#'+'NeonLevelOff#')) ? parseFloat("#NeonLevelOff#") : 0;
if(neonLevelOff#uid#=='') {neonLevelOff#uid#=0;}
document.documentElement.style.setProperty('--neon-levelOff#uid#', parseInt(neonLevelOff#uid# * 10) + 'px');
var buttonRadius#uid# = ('#BouttonRadius#' != '#' + 'BouttonRadius#') ? "#BouttonRadius#" : '20px';
if (buttonRadius#uid# == '') { buttonRadius#uid# = '20px';}
document.documentElement.style.setProperty('--button-radius#uid#', buttonRadius#uid#);
// Dégradé pour bouton On
var backgroundColorFromOn#id# = ('#backgroundColorFromOn#' != '#' + 'backgroundColorFromOn#') ? "#backgroundColorFromOn#" : '#70a1ff';
if (backgroundColorFromOn#id# == '') {backgroundColorFromOn#id# = '#70a1ff';}
document.documentElement.style.setProperty('--background-color-from-on#id#', backgroundColorFromOn#id#);
var backgroundColorToOn#id# = ('#backgroundColorToOn#' != '#' + 'backgroundColorToOn#') ? "#backgroundColorToOn#" : '#1e90ff';
if (backgroundColorToOn#id# == '') {backgroundColorToOn#id# = '#1e90ff';}
document.documentElement.style.setProperty('--background-color-to-on#id#', backgroundColorToOn#id#);
// Dégradé pour bouton Off
var backgroundColorFromOff#id# = ('#backgroundColorFromOff#' != '#' + 'backgroundColorFromOff#') ? "#backgroundColorFromOff#" : '#333';
if (backgroundColorFromOff#id# != '') {
document.documentElement.style.setProperty('--background-color-from-off#id#', backgroundColorFromOff#id#);
}
var backgroundColorToOff#id# = ('#backgroundColorToOff#' != '#' + 'backgroundColorToOff#') ? "#backgroundColorToOff#" : '#252525';
if (backgroundColorToOff#id# != '') {
document.documentElement.style.setProperty('--background-color-to-off#id#', backgroundColorToOff#id#);
}
/*************************************/
/* ******** Mover parameters ******* */
/*************************************/
var moverWidth#uid# = ('#MoverWidth#' != '#' + 'MoverWidth#') ? "#MoverWidth#" : '40px';
if (moverWidth#uid# != '')
{ document.documentElement.style.setProperty('--mover-width#uid#', parseInt(moverWidth#uid#) +'px');}
else
{ document.documentElement.style.setProperty('--mover-width#uid#', '40px');}
var moverHeight#uid# = ('#MoverHeight#' != '#' + 'MoverHeight#') ? "#MoverHeight#" : buttonHeight#uid#;
if (moverHeight#uid# == '') {moverHeight#uid# = buttonHeight#uid#}
document.documentElement.style.setProperty('--mover-height#uid#', parseInt(moverHeight#uid#) +'px');
var moverRadius#uid# = ('#MoverRadius#' != '#' + 'MoverRadius#') ? "#MoverRadius#" : buttonRadius#uid#;
if (moverRadius#uid# == '') { moverRadius#uid# = buttonRadius#uid#;}
document.documentElement.style.setProperty('--mover-radius#uid#', moverRadius#uid#);
document.documentElement.style.setProperty('--mover-Ypos#uid#', (parseInt(buttonHeight#uid#)-parseInt(moverHeight#uid#))/2 +'px');
document.documentElement.style.setProperty('--full-size-height#uid#', Math.max(parseInt(buttonHeight#uid#), parseInt(moverHeight#uid#)) +'px');
/*************************************/
/* ******* LED parameters ********** */
/*************************************/
var moverLedWidthRatio#uid# = ('#LedWidthRatio#' !='#'+'LedWidthRatio#') ? parseFloat("#LedWidthRatio#") : 0.2;
if (moverLedWidthRatio#uid# != '')
{ document.documentElement.style.setProperty('--mover-led-width-ratio#uid#', moverLedWidthRatio#uid#);}
else
{ document.documentElement.style.setProperty('--mover-led-width-ratio#uid#', 0.2);}
var moverLedHeightRatio#uid# = ('#LedHeightRatio#' !='#'+'LedHeightRatio#') ? parseFloat("#LedHeightRatio#") : 0.2;
if (moverLedHeightRatio#uid# != '')
{ document.documentElement.style.setProperty('--mover-led-height-ratio#uid#', moverLedHeightRatio#uid#);}
else
{ document.documentElement.style.setProperty('--mover-led-height-ratio#uid#', 0.2);}
var ledRadius#uid# = ('#LedRadius#' != '#' + 'LedRadius#') ? "#LedRadius#" : moverRadius#uid#;
if (ledRadius#uid# != '')
{ document.documentElement.style.setProperty('--mover-led-radius#uid#', ledRadius#uid#);}
else
{ document.documentElement.style.setProperty('--mover-led-radius#uid#', moverRadius#uid#);}
var ledOffsetX#uid# = ('#LedOffsetX#' != '#' + 'LedOffsetX#') ? "#LedOffsetX#" : '0px';
if (ledOffsetX#uid# != '')
{ document.documentElement.style.setProperty('--mover-led-offset-x#uid#', ledOffsetX#uid#);}
else
{ document.documentElement.style.setProperty('--mover-led-offset-x#uid#', '0px');}
var ledOffsetY#uid# = ('#LedOffsetY#' != '#' + 'LedOffsetY#') ? "#LedOffsetY#" : '0px';
if (ledOffsetY#uid# != '')
{ document.documentElement.style.setProperty('--mover-led-offset-y#uid#', ledOffsetY#uid#);}
else
{ document.documentElement.style.setProperty('--mover-led-offset-y#uid#', '0px');}
// Dégradé pour led On
var ledColorFromOn#uid# = ('#LedColorFromOn#' != '#' + 'LedColorFromOn#') ? "#LedColorFromOn#" : backgroundColorFromOn#id#;
if (ledColorFromOn#uid# == '') {ledColorFromOn#uid# = backgroundColorFromOn#id#;}
document.documentElement.style.setProperty('--mover-led-color0#uid#', ledColorFromOn#uid#);
var ledColorToOn#uid# = ('#LedColorToOn#' != '#' + 'LedColorToOn#') ? "#LedColorToOn#" : backgroundColorToOn#id#;
if (ledColorToOn#uid# == '') {ledColorToOn#uid# = backgroundColorToOn#id#;}
document.documentElement.style.setProperty('--mover-led-color1#uid#', ledColorToOn#uid#);
var ledEffectOn#uid# = (('#LedEffectOn#' !='#'+'LedEffectOn#')) ? parseInt("#LedEffectOn#") : 0;
if(ledEffectOn#uid#=='') {ledEffectOn#uid#=0;}
var ledEffectSpeed#uid# = ('#LedEffectSpeed#' != '#' + 'LedEffectSpeed#') ? "#LedEffectSpeed#" : '1s';
if (ledEffectSpeed#uid# == '')
{ ledEffectSpeed#uid# = '1s';}
if (ledEffectOn#uid# == 1){
document.documentElement.style.setProperty('--led-animation#uid#', 'linearwave#uid# ' + ledEffectSpeed#uid# + ' infinite');
}
else if (ledEffectOn#uid# == 2){
document.documentElement.style.setProperty('--led-animation#uid#', 'circlewave#uid# ' + ledEffectSpeed#uid# + ' alternate infinite');
}
/*************************************/
/* ******** Texte parameters ******* */
/*************************************/
// Couleur texte pour bouton On
var colorTextOn#id# = ('#colorTextOn#' != '#' + 'colorTextOn#') ? "#colorTextOn#" : backgroundColorFromOn#id#;
// Couleur texte pour bouton Off
var colorTextOff#id# = ('#colorTextOff#' != '#' + 'colorTextOff#') ? "#colorTextOff#" : ((colorTextOn#id# != '')?colorTextOn#id#: '#000');
// Texte pour bouton On
var nameTextOn#id# = ('#nameTextOn#' != '#' + 'nameTextOn#') ? "#nameTextOn#" : '';
// Texte pour bouton Off
var nameTextOff#id# = ('#nameTextOff#' != '#' + 'nameTextOff#') ? "#nameTextOff#" : ((nameTextOn#id# != '')?nameTextOn#id#: '');
jeedom.cmd.update['#id#'] = function (_options) {
document.getElementById('neonText#id#').style.display = (nameTextOn#id# == '' && nameTextOn#id# == '')?"none":"block";
if (_options.display_value == '1' || _options.display_value == 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
document.getElementById('neonInput#id#').checked = true;
document.documentElement.style.setProperty('--text-color#id#', colorTextOn#id#);
document.getElementById('neonText#id#').innerHTML = nameTextOn#id#;
} else {
document.getElementById('neonInput#id#').checked = false;
document.documentElement.style.setProperty('--text-color#id#', colorTextOff#id#);
document.getElementById('neonText#id#').innerHTML = nameTextOff#id#;
}
}
jeedom.cmd.update['#id#']({ display_value: '#state#' });
$('#neonInput#id#').off().on('click', function () {
jeedom.cmd.execute({ id: '#id#' });
});
</script>
<style>
:root {
--text-color-on#id#: green;
--text-color-off#id#: red;
--background-color-from-on#id#: #70a1ff;
--background-color-to-on#id#: #1e90ff;
--background-color-from-off#id#: #333;
--background-color-to-off#id#: #000;
--full-size-height#uid#: 40px;
--buttonDeg#id#: 0deg;
--button-size-width#uid#: 120px;
--button-size-height#uid#: 40px;
--button-radius#uid#: 10px;
--mover-width#uid#: 60px;
--mover-height#uid#: 60px;
--mover-Xpos#uid#: 20px;
--mover-Ypos#uid#: 0px;
--mover-radius#uid#: 0px;
--mover-led-width-ratio#uid#: 0.2;
--mover-led-height-ratio#uid#: 0.2;
--mover-led-width#uid#: calc(var(--mover-led-width-ratio#uid#)*var(--mover-width#uid#));
--mover-led-height#uid#: calc(var(--mover-led-height-ratio#uid#)*var(--mover-height#uid#));
--mover-led-radius#uid#: 50%;
--mover-led-offset-x#uid#: 0px;
--mover-led-offset-y#uid#: 0px;
--mover-led-color0#uid#: var(--background-color-to-on#id#);
--mover-led-color1#uid#: var(--background-color-from-on#id#);
--led-animation#uid#: none;
--led-animation-speed#uid#: '1s';
--border-color-in#uid#:#3e3e3e;
--border-color-center#uid#:#353535;
--border-color-out#uid#:#3e3e3e;
--neon-levelOn#uid#: 10px;
--neon-levelOff#uid#: 10px;
}
@-webkit-keyframes linearwave#uid# {
0% { background: linear-gradient(90deg, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 0%, var(--mover-led-color0#uid#) 10% , var(--mover-led-color0#uid#) 100% ) !important; }
10% { background: linear-gradient(90deg, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 10%, var(--mover-led-color0#uid#) 20% , var(--mover-led-color0#uid#) 100% ) !important; }
20% { background: linear-gradient(90deg, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 20%, var(--mover-led-color0#uid#) 30% , var(--mover-led-color0#uid#) 100% ) !important; }
30% { background: linear-gradient(90deg, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 30%, var(--mover-led-color0#uid#) 40% , var(--mover-led-color0#uid#) 100% ) !important; }
40% { background: linear-gradient(90deg, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 40%, var(--mover-led-color0#uid#) 50% , var(--mover-led-color0#uid#) 100% ) !important; }
50% { background: linear-gradient(90deg, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 50%, var(--mover-led-color0#uid#) 60% , var(--mover-led-color0#uid#) 100% ) !important; }
60% { background: linear-gradient(90deg, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 60%, var(--mover-led-color0#uid#) 70% , var(--mover-led-color0#uid#) 100% ) !important; }
70% { background: linear-gradient(90deg, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 70%, var(--mover-led-color0#uid#) 80% , var(--mover-led-color0#uid#) 100% ) !important; }
80% { background: linear-gradient(90deg, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 80%, var(--mover-led-color0#uid#) 90% , var(--mover-led-color0#uid#) 100% ) !important; }
90% { background: linear-gradient(90deg, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 90%, var(--mover-led-color0#uid#) 100% , var(--mover-led-color0#uid#) 100% ) !important; }
100% { background: linear-gradient(90deg, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 100%, var(--mover-led-color0#uid#) 100% , var(--mover-led-color0#uid#) 100% ) !important; }
}
@-webkit-keyframes circlewave#uid# {
0% { background: radial-gradient(circle, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 0%, var(--mover-led-color0#uid#) 100% , var(--mover-led-color0#uid#) 100% ) !important; }
10% { background: radial-gradient(circle, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 10%, var(--mover-led-color0#uid#) 100% , var(--mover-led-color0#uid#) 100% ) !important; }
20% { background: radial-gradient(circle, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 20%, var(--mover-led-color0#uid#) 100% , var(--mover-led-color0#uid#) 100% ) !important; }
30% { background: radial-gradient(circle, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 30%, var(--mover-led-color0#uid#) 100% , var(--mover-led-color0#uid#) 100% ) !important; }
40% { background: radial-gradient(circle, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 40%, var(--mover-led-color0#uid#) 100% , var(--mover-led-color0#uid#) 100% ) !important; }
50% { background: radial-gradient(circle, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 50%, var(--mover-led-color0#uid#) 100% , var(--mover-led-color0#uid#) 100% ) !important; }
60% { background: radial-gradient(circle, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 60%, var(--mover-led-color0#uid#) 100% , var(--mover-led-color0#uid#) 100% ) !important; }
70% { background: radial-gradient(circle, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 70%, var(--mover-led-color0#uid#) 100% , var(--mover-led-color0#uid#) 100% ) !important; }
80% { background: radial-gradient(circle, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 80%, var(--mover-led-color0#uid#) 100% , var(--mover-led-color0#uid#) 100% ) !important; }
90% { background: radial-gradient(circle, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 90%, var(--mover-led-color0#uid#) 100% , var(--mover-led-color0#uid#) 100% ) !important; }
100% { background: radial-gradient(circle, var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 100%, var(--mover-led-color0#uid#) 100% , var(--mover-led-color0#uid#) 100% ) !important; }
}
/******* Contenaire principal ****/
.silkButton#id# {
-webkit-transform-origin-x: center;
-webkit-transform-origin-y: center;
transform: rotate(calc(-1 * var(--buttonDeg#id#)));
min-width: calc(-1 * min(0px, var(--mover-Ypos#uid#)) * 2 + var(--button-size-width#uid#)) !important;
min-height: calc( 20px + var(--full-size-height#uid#)) !important;
margin: 5px 5px 5px 5px !important ;
}
/******* Element ****/
.neonInput#id#[type="checkbox"] {
/* Marge autour de l'élément > ce qui adaptera la taille du container principal */
margin: 5px 5px 5px 5px !important;
position: relative !important;
vertical-align: middle !important;
top:10px;
width: var(--button-size-width#uid#) !important;
height: var(--button-size-height#uid#) !important;
-webkit-appearance: none !important;
outline: none !important;
border-radius: var(--button-radius#uid#) !important;
}
/* affichage spécifique à l'état ON */
.neonInput#id#:checked[type="checkbox"] {
background: linear-gradient(calc(-1 * var(--buttonDeg#id#)), var(--background-color-from-on#id#), var(--background-color-to-on#id#)) !important;
box-shadow: 0 0 0 2px var(--border-color-in#uid#), 0 0 var(--neon-levelOn#uid#) 4px var(--background-color-to-on#id#), 0 0 0 6px var(--border-color-out#uid#), inset 0 0 10px rgba(0, 0, 0, 1) !important;
}
/* affichage spécifique à l'état OFF */
.neonInput#id#:not(:checked)[type="checkbox"] {
background: linear-gradient(calc(-1 * var(--buttonDeg#id#)), var(--background-color-from-off#id#), var(--background-color-to-off#id#)) !important;
box-shadow: 0 0 0 2px var(--border-color-in#uid#), 0 0 var(--neon-levelOff#uid#) 4px var(--background-color-to-off#id#), 0 0 0 6px var(--border-color-out#uid#), inset 0 0 10px rgba(0, 0, 0, 1) !important;
}
/* Le bouton mobile*/
.neonInput#id#[type="checkbox"]:before {
content: '' !important;
position: absolute;
top: var(--mover-Ypos#uid#);
left: 0px;
left: var(--mover-Ypos#uid#);
vertical-align: middle !important ;
width: var(--mover-width#uid#);
height: var(--mover-height#uid#);
border-radius: var(--mover-radius#uid#);
box-shadow: 0 0 0 1px #232323;
transform: scale(.98, .96);
transition: .5s;
background: linear-gradient(calc(-1 * var(--buttonDeg#id#)), #000 0%, #3e3e3e 75%, #6b6b6b 100%);
}
/* Effet sur le bouton quand il est activé */
.neonInput#id#:checked[type="checkbox"]:before {
background: linear-gradient(calc(-1 * var(--buttonDeg#id#)), #000 0%, #3e3e3e 75%, #6b6b6b 100%);
left: calc(var(--button-size-width#uid#) - var(--mover-width#uid#) - var(--mover-Ypos#uid#)) !important;
}
/* La led */
.neonInput#id#[type="checkbox"]:after {
content: '' !important;
position: absolute;
top: calc(50% - var(--mover-led-height#uid#)/2 - var(--mover-led-offset-y#uid#));
left: calc(var(--mover-width#uid#)/2 - var(--mover-led-width#uid#)/2 + var(--mover-led-offset-x#uid#) + var(--mover-Ypos#uid#));
width: var(--mover-led-width#uid#);
height: var(--mover-led-height#uid#);
border-radius: var(--mover-led-radius#uid#);
transition: .5s;
}
/* La led quand activé */
.neonInput#id#:checked[type="checkbox"]:after {
content: '' !important;
left: calc((var(--button-size-width#uid#) - (var(--mover-width#uid#)/2) - var(--mover-led-width#uid#)/2) + var(--mover-led-offset-x#uid#) - var(--mover-Ypos#uid#)) !important;
background: linear-gradient(calc(-1 * var(--buttonDeg#id#)), var(--mover-led-color0#uid#) 0%, var(--mover-led-color1#uid#) 25%, #000);
box-shadow: 0px 0px 10px 2px var(--mover-led-color1#uid#) !important;
animation : var(--led-animation#uid#) !important;
}
/* La led quand non activé */
.neonInput#id#:not(:checked)[type="checkbox"]:after {
content: '' !important;
background: linear-gradient(calc(-1 * var(--buttonDeg#id#)), var(--background-color-to-off#id#) 0%, var(--background-color-from-off#id#) 25%, #000);
}
#neonText#id# {
position: relative;
margin: 0;
font-family: sans-serif;
text-align: center;
color: var(--text-color#id#);
font-size: 16px;
padding: 15px 0;
text-transform: uppercase;
letter-spacing: 4px;
}
</style>