Bonjour,
reprise du sujet de l’ancien forum https://www.jeedom.com/forum/viewtopic.php?f=29&t=37451
j’ai repris ce widget que @Laco avait créé pour le rendre compatible avec Jeedom V3.2, V3.3 (disponible sur le market) et V4 (en bas de ce poste) et j’en ai profité pour faire quelques modifications pour mes besoins perso. j’ai essayé de faire à ce que mes changements ne perturbent pas le fonctionnement précédent du widget c’est à dire que si vous faite la mise à jour en ne changeant rien le widget devrait fonctionner comme avant.
Voici la liste des fonctionnalités que j’ai rajouté.
- prise compte des valeurs min et max.
- ajout d’un paramètre qui permet de modifier la valeur de l’incrément des minutes (de 1 à 59 minute)
- Modification de style du widget si la valeur max est inférieur à 60min (suppression des boutons ± pour les heures)
voici l’aperçu du widget
voici comment le widget se configure :
-
Configuration de l’équipement
La configuration de l’équipement se fait comme celle d’un slider normale.
Les valeurs Max permettent de borner les valeurs. Ces valeurs sont du type #time# (HHMM). Par défaut min est mise à 0 et Max à 100 ( 1 heure valeur max d’un slider dans Jeedom par défaut ). Si ces valeurs sont incorrectes elles sont automatiquement corrigées et il y a une entrée dans la console de debug.
Si la valeur Max est inférieur 60 le format d’affichage change automatiquement de xhyy à yy min. -
Paramètres optionnels widget
il est possible d’ajouter un paramètre optionnel au widget afin de modifier la valeur de l’incrémentation/la décrémentation . Pour cela il faut rajouter le nom incrementdecrement avec la valeur que l’on souhaite.
Cette valeur est fixée à maximum 59.
16/05/2018 : je vais publier le widget en Beta ce jour
19/05/2018 : Passage de la beta en stable
20/05/2018 : bug fix suite aux remarques de @Fabrice
22/05/2019 : bug fix si valeur mini différente de 0
si jamais il y aurait un fonctionnement qui vous pause problème merci de me le remonté ici
Pour Jeedom V4 Version Desktop
<!-- WIDGET SPECIFIQUE adapté du widget standard "cmd.action.slider.button"
Widget créé par @Laco
Widget modifié et maintenu par @yogui
Mise à jour :
- Le 2016/11/11 : Création
- Le 2018/05/10 : Passage jeedom V3
- Le 2018/05/20 : bug fix si valeur seter par un autre virtueel
- Le 2019/10/22 : bug fix si valeur mini différente de 0
- Le 2019/10/23 : Passage jeedom V4
-->
<div style="min-width:90px;min-height:62px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# #minValue# #maxValue# tooltips cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#">
<center>
<input id="stateTime#id#" type="text" class="value form-control input-sm" value="#state#" style="display:none"/>
<div class="title #hide_name#">
<span class="cmdName" style="font-weight: bold;font-size : 12px;">#name_display#</span><br/>
</div><br/>
<div class="affichage">
<span class="affichagechaineComplete" style="font-size: 2em;font-weight: bold;" id="chaineComplete#id#"></span><br/>
</div><br/>
<div class="btn-group">
<a class="btn-sm bt_minusH" style="font-size: 1.1em;" ><i class="fa fa-minus-circle"></i></a>
<a class="btn-sm bt_plusH" style="font-size: 1.1em;" ><i class="fa fa-plus-circle"></i></a>
<a class="btn-sm bt_minusM" style="font-size: 1.1em;" ><i class="fa fa-minus-circle"></i></a>
<a class="btn-sm bt_plusM" style="font-size: 1.1em;" ><i class="fa fa-plus-circle"></i></a>
</div>
</center>
<script>
/******************************************************************************************************************************************************/
/******************************************* Options de personnalisation Valeur par defaut ************************************************************/
/******************************************************************************************************************************************************/
/**** Increment decrement **/ var incrementdecrement = ("#incrementdecrement#" != '#'+'incrementdecrement#') ? parseInt("#incrementdecrement#") : 1 ; //
/******************************************************************************************************************************************************/
/******************************************************************************************************************************************************/
/******************************************************************************************************************************************************/
var heure;
var minute;
var chaineHeure;
var chaineMinute;
var chaineComplete;
var Min;
var Max;
// Lit les valeurs min et max
Min =('#minValue#' == '') ? 0 : '#minValue#';
Max =('#maxValue#' == '') ? 2359: '#maxValue#';
// Assure que les valeurs increment min et max sont dans la bonne plage
if (incrementdecrement > 59 || incrementdecrement < 0 ){
console.log("Valeur incrementdecrement incorrecte ", incrementdecrement);
incrementdecrement =1;
}
if (incrementdecrement > Max ){
console.log("Valeur incrementdecrement incorrecte ", incrementdecrement);
incrementdecrement =1;
}
var Min_Heure =Math.floor(parseInt(Min) / 100);
var Min_Minute =parseInt(Min) - Min_Heure*100;
if ( Min < 0 || Min > Max || Min > 2359){
console.log("Valeur Min incorrecte ", Min);
Min =0;
}
if ( Min_Minute > 59){
console.log("Valeur Min incorrecte ", Min);
Min =Min_Heure*100 + 59;
}
var Max_Heure =Math.floor(parseInt(Max) / 100);
var Max_Minute =parseInt(Max) - Max_Heure*100;
if (Max>2359){
console.log("Valeur Max incorrecte ", Max);
Max = 2359;
}
if ( Max_Minute > 59){
console.log("Valeur Max incorrecte ", Max);
Max =Max_Heure*100 + 59;
}
//sauvegarde les valeurs
$('head').prepend('<meta name="Max_#id#" content=' +Max+ '>');
$('head').prepend('<meta name="Min_#id#" content=' +Min+ '>');
$('head').prepend('<meta name="incrementdecrement_#id#" content=' +incrementdecrement+ '>');
//masque les boutons + et - pour les heures si max <60
if (Max < 60){
$('.cmd[data-cmd_id=#id#] .bt_minusH').hide();
$('.cmd[data-cmd_id=#id#] .bt_plusH').hide();
}
//Application de la valeur Min
if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) < Min){
$('.cmd[data-cmd_uid=#uid#] .value').val((parseInt(Min )));
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
// Identification des valeurs Heure et Minute avant modification
if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) >= 0) {
heure = (Max < 60)? 0 : Math.floor(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) / 100);
minute = parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - heure*100;
}
//sauvegarde Heures et minutes
$('head').prepend('<meta name="heure_#id#" content=' +heure+ '>');
$('head').prepend('<meta name="minute_#id#" content=' +minute+ '>');
// Modification des heures
$('.cmd[data-cmd_uid=#uid#] .bt_minusH').on('click', function () {
//relie les valeurs min et max
Max = parseInt($('meta[name="Max_#id#"]').attr('content'));
Min = parseInt($('meta[name="Min_#id#"]').attr('content'));
if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) >= Min+100) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - 100)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
});
$('.cmd[data-cmd_uid=#uid#] .bt_plusH').on('click', function () {
//re1lie les valeurs min et max
Max = parseInt($('meta[name="Max_#id#"]').attr('content'));
Min = parseInt($('meta[name="Min_#id#"]').attr('content'));
if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) <= Max-100) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) + 100)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
});
// Modification des minutes
$('.cmd[data-cmd_uid=#uid#] .bt_minusM').on('click', function () {
//relie les valeurs min max heure minute seconde incrementdecrement
Max = parseInt($('meta[name="Max_#id#"]').attr('content'));
Min = parseInt($('meta[name="Min_#id#"]').attr('content'));
heure = parseInt($('meta[name="heure_#id#"]').attr('content'));
minute = parseInt($('meta[name="minute_#id#"]').attr('content'));
incrementdecrement = parseInt($('meta[name="incrementdecrement_#id#"]').attr('content'));
if ( minute>=incrementdecrement && (heure*100)+ minute > Min ) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - incrementdecrement)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
else if ( heure >=1 && (heure*100)+ minute > Min) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - 40 - incrementdecrement)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
});
$('.cmd[data-cmd_uid=#uid#] .bt_plusM').on('click', function () {
//relie les valeurs min max heure minute seconde incrementdecrement
Max = parseInt($('meta[name="Max_#id#"]').attr('content'));
Min = parseInt($('meta[name="Min_#id#"]').attr('content'));
heure = parseInt($('meta[name="heure_#id#"]').attr('content'));
minute = parseInt($('meta[name="minute_#id#"]').attr('content'));
incrementdecrement = parseInt($('meta[name="incrementdecrement_#id#"]').attr('content'));
if ( (minute < (60-incrementdecrement)) && (heure*100)+ minute < Max) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) + incrementdecrement)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
else if( (heure*100)+ minute < Max ) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) + 40 + incrementdecrement)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
});
// Commande execute
$('.cmd[data-cmd_uid=#uid#] .value').on('change', function () {
if (typeof timerHandle !== 'undefined') {
clearTimeout(timerHandle);
timerHandle = setTimeout(function() {
jeedom.cmd.execute({id: '#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val()}});
}, 1000)
} else {
timerHandle = setTimeout(function() {
jeedom.cmd.execute({id: '#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val()}});
}, 1000)
}
});
//Fonction update
jeedom.cmd.update['#id#'] = function(_options){
// Affichage des heures et des minutes sous forme de chaine de caractères
if (_options.display_value>= 0) {
// Mise à jour de la valeur
$('.cmd[data-cmd_uid=#uid#] .value').val(_options.display_value);
// Formatage de la chaine de caractères heure
heure = Math.floor(parseInt(_options.display_value) / 100);
chaineHeure = heure;
// Calcul valeur minute
minute = parseInt( _options.display_value) - heure*100;
// Formatage de la chaine de caractères minute
if (minute >= 10) {
chaineMinute = minute;
}
else {
chaineMinute = "0" + minute;
}
//Affichage au format Heure-minutes ou juste minutes
if (Max < 60){
chaineComplete = chaineMinute + " min";
}
else{
// Calcul de la chaine complète
chaineComplete = chaineHeure + "h" +chaineMinute;
}
//mise a jour de la valeure
$('#chaineComplete#id#').text(chaineComplete);
}
//Sauvegarde des valeures heure et minutes
$('head').prepend('<meta name="heure_#id#" content=' +heure+ '>');
$('head').prepend('<meta name="minute_#id#" content=' +minute+ '>');
}
jeedom.cmd.update['#id#']({display_value:'#state#'});
</script>
</div>
Pour Jeedom V4 version Mobile
<!-- WIDGET SPECIFIQUE adapté du widget standard "cmd.action.slider.button"
Widget créé par @Laco
Widget modifié et maintenu par @yogui
Mise à jour :
- Le 2016/11/11 : Création
- Le 2018/05/10 : Passage jeedom V3
- Le 2018/05/20 : bug fix si valeur seter par un autre virtuel
- Le 2018/05/22 : augmentation de la taille des bouttons et de l'espace entre eux
- Le 2019/10/22 : bug fix si valeur mini différente de 0
- Le 2019/10/23 : Passage jeedom V4
-->
<div style="min-width:90px;min-height:62px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# #minValue# #maxValue# tooltips cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#">
<center>
<input id="stateTime#id#" type="text" class="value form-control input-sm" value="#state#" style="display:none"/>
<div class="title #hide_name#">
<span class="cmdName" style="font-weight: bold;font-size : 12px;">#name_display#</span><br/>
</div><br/>
<div class="affichage">
<span class="affichagechaineComplete" style="font-size: 2em;font-weight: bold;" id="chaineComplete#id#"></span><br/>
</div><br/>
<div class="btn-group">
<a class="btn-sm bt_minusH" style="font-size: 1.6em;" ><i class="fa fa-minus-circle"></i></a>
<a class="btn-sm bt_plusH" style="font-size: 1.6em ;margin-left: 10px ;" ><i class="fa fa-plus-circle"></i></a>
<a class="btn-sm bt_minusM" style="font-size: 1.6em;;margin-left: 10px" ><i class="fa fa-minus-circle"></i></a>
<a class="btn-sm bt_plusM" style="font-size: 1.6em;margin-left: 10px ;" ><i class="fa fa-plus-circle"></i></a>
</div>
</center>
<script>
/******************************************************************************************************************************************************/
/******************************************* Options de personnalisation Valeur par defaut ************************************************************/
/******************************************************************************************************************************************************/
/**** Increment decrement **/ var incrementdecrement = ("#incrementdecrement#" != '#'+'incrementdecrement#') ? parseInt("#incrementdecrement#") : 1 ; //
/******************************************************************************************************************************************************/
/******************************************************************************************************************************************************/
/******************************************************************************************************************************************************/
var heure;
var minute;
var chaineHeure;
var chaineMinute;
var chaineComplete;
var Min;
var Max;
// Lit les valeurs min et max
Min =('#minValue#' == '') ? 0 : '#minValue#';
Max =('#maxValue#' == '') ? 2359: '#maxValue#';
// Assure que les valeurs increment min et max sont dans la bonne plage
if (incrementdecrement > 59 || incrementdecrement < 0 ){
console.log("Valeur incrementdecrement incorrecte ", incrementdecrement);
incrementdecrement =1;
}
if (incrementdecrement > Max ){
console.log("Valeur incrementdecrement incorrecte ", incrementdecrement);
incrementdecrement =1;
}
var Min_Heure =Math.floor(parseInt(Min) / 100);
var Min_Minute =parseInt(Min) - Min_Heure*100;
if ( Min < 0 || Min > Max || Min > 2359){
console.log("Valeur Min incorrecte ", Min);
Min =0;
}
if ( Min_Minute > 59){
console.log("Valeur Min incorrecte ", Min);
Min =Min_Heure*100 + 59;
}
var Max_Heure =Math.floor(parseInt(Max) / 100);
var Max_Minute =parseInt(Max) - Max_Heure*100;
if (Max>2359){
console.log("Valeur Max incorrecte ", Max);
Max = 2359;
}
if ( Max_Minute > 59){
console.log("Valeur Max incorrecte ", Max);
Max =Max_Heure*100 + 59;
}
//sauvegarde les valeurs
$('head').prepend('<meta name="Max_#id#" content=' +Max+ '>');
$('head').prepend('<meta name="Min_#id#" content=' +Min+ '>');
$('head').prepend('<meta name="incrementdecrement_#id#" content=' +incrementdecrement+ '>');
//masque les boutons + et - pour les heures si max <60
if (Max < 60){
$('.cmd[data-cmd_id=#id#] .bt_minusH').hide();
$('.cmd[data-cmd_id=#id#] .bt_plusH').hide();
}
//Application de la valeur Min
if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) < Min){
$('.cmd[data-cmd_uid=#uid#] .value').val((parseInt(Min )));
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
// Identification des valeurs Heure et Minute avant modification
if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) >= 0) {
heure = (Max < 60)? 0 : Math.floor(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) / 100);
minute = parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - heure*100;
}
//sauvegarde Heures et minutes
$('head').prepend('<meta name="heure_#id#" content=' +heure+ '>');
$('head').prepend('<meta name="minute_#id#" content=' +minute+ '>');
// Modification des heures
$('.cmd[data-cmd_uid=#uid#] .bt_minusH').on('click', function () {
//relie les valeurs min et max
Max = parseInt($('meta[name="Max_#id#"]').attr('content'));
Min = parseInt($('meta[name="Min_#id#"]').attr('content'));
if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) >= Min+100) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - 100)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
});
$('.cmd[data-cmd_uid=#uid#] .bt_plusH').on('click', function () {
//relie les valeurs min et max
Max = parseInt($('meta[name="Max_#id#"]').attr('content'));
Min = parseInt($('meta[name="Min_#id#"]').attr('content'));
if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) <= Max-100) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) + 100)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
});
// Modification des minutes
$('.cmd[data-cmd_uid=#uid#] .bt_minusM').on('click', function () {
//relie les valeurs min max heure minute seconde incrementdecrement
Max = parseInt($('meta[name="Max_#id#"]').attr('content'));
Min = parseInt($('meta[name="Min_#id#"]').attr('content'));
heure = parseInt($('meta[name="heure_#id#"]').attr('content'));
minute = parseInt($('meta[name="minute_#id#"]').attr('content'));
incrementdecrement = parseInt($('meta[name="incrementdecrement_#id#"]').attr('content'));
if ( minute>=incrementdecrement && (heure*100)+ minute > Min ) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - incrementdecrement)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
else if ( heure >=1 && (heure*100)+ minute > Min ) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - 40 - incrementdecrement)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
});
$('.cmd[data-cmd_uid=#uid#] .bt_plusM').on('click', function () {
//relie les valeurs min max heure minute seconde incrementdecrement
Max = parseInt($('meta[name="Max_#id#"]').attr('content'));
Min = parseInt($('meta[name="Min_#id#"]').attr('content'));
heure = parseInt($('meta[name="heure_#id#"]').attr('content'));
minute = parseInt($('meta[name="minute_#id#"]').attr('content'));
incrementdecrement = parseInt($('meta[name="incrementdecrement_#id#"]').attr('content'));
if ( (minute < (60-incrementdecrement)) && (heure*100)+ minute < Max) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) + incrementdecrement)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
else if( (heure*100)+ minute < Max ) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) + 40 + incrementdecrement)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
});
// Commande execute
$('.cmd[data-cmd_uid=#uid#] .value').on('change', function () {
if (typeof timerHandle !== 'undefined') {
clearTimeout(timerHandle);
timerHandle = setTimeout(function() {
jeedom.cmd.execute({id: '#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val()}});
}, 1000)
} else {
timerHandle = setTimeout(function() {
jeedom.cmd.execute({id: '#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val()}});
}, 1000)
}
});
//Fonction update
jeedom.cmd.update['#id#'] = function(_options){
// Affichage des heures et des minutes sous forme de chaine de caractères
if (_options.display_value>= 0) {
// Mise à jour de la valeur
$('.cmd[data-cmd_uid=#uid#] .value').val(_options.display_value);
// Formatage de la chaine de caractères heure
heure = Math.floor(parseInt(_options.display_value) / 100);
chaineHeure = heure;
// Calcul valeur minute
minute = parseInt( _options.display_value) - heure*100;
// Formatage de la chaine de caractères minute
if (minute >= 10) {
chaineMinute = minute;
}
else {
chaineMinute = "0" + minute;
}
//Affichage au format Heure-minutes ou juste minutes
if (Max < 60){
chaineComplete = chaineMinute + " min";
}
else{
// Calcul de la chaine complète
chaineComplete = chaineHeure + "h" +chaineMinute;
}
//mise a jour de la valeure
$('#chaineComplete#id#').text(chaineComplete);
}
//Sauvegarde des valeures heure et minutes
$('head').prepend('<meta name="heure_#id#" content=' +heure+ '>');
$('head').prepend('<meta name="minute_#id#" content=' +minute+ '>');
}
jeedom.cmd.update['#id#']({display_value:'#state#'});
</script>
</div>