Demande pour rendre 2 widgets V3 compatible V4

[Spine]

Bonsoir à tous,

Je me suis monté une VM pour tester la V4 sur Debian 9 puis Buster et contrairement à ce que je pensais tout c’est très bien passé hormis quelques petits soucis de cosmétique.
J’aimerais récupérer 2 widgets V3 créés par @winhex (merci à lui), mais il faudrait les rendres compatibles V4, ce dont je suis incapable, donc si une âme charitable a un peu de temps libre…
Le 1er :
Le code :

<div class="tooltips cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="min-width:100px;">
<div class="input-group" style="width: 75px;">
<input style="height: 33px;border-radius: 5px;font-size : 16px;font-weight: Bold;background-color:#e4e2c2;" class="form-control input-sm value execute" type="time" placeholder="#title_placeholder#" value="#state#" data-cmd_id="#id#">

<style>
    /* Firefox */
input[data-cmd_id="#id#"] {
    -moz-appearance: textfield;
}

/* Chrome */
 input[data-cmd_id="#id#"]::-webkit-inner-spin-button,
input[data-cmd_id="#id#"]::-webkit-outer-spin-button { 
	-webkit-appearance: none;
	margin:0;
}

/* Opéra*/
input[data-cmd_id="#id#"]::-o-inner-spin-button,
input[data-cmd_id="#id#"]::-o-outer-spin-button { 
	-o-appearance: none;
	margin:0
}
    </style>
</div>
	<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('.cmd[data-cmd_uid=#uid#] .execute').on("change", function () {
        jeedom.cmd.execute({id:'#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val().replace("#unite#", "").replace(" ", "")}});
                });
             } else {
$('.cmd[data-cmd_uid=#uid#]:last .execute').keypress(function( event ) {
           if(event.which == 13) {
        jeedom.cmd.execute({id:'#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val().replace("#unite#", "").replace(" ", "")}});
                }});
}

	</script>
</div>

La doc : https://www.jeedom.com/forum/viewtopic.php?t=32321
Le souci : il fonctionne parfaitement mais il est beaucoup trop petit :

Le 2ème :
Le code :

<!-- WIDGET SPECIFIQUE adapté des widgets standards "cmd.info.numeric.default" et "cmd.action.slider.default"
Modifications : 

Mise à jour :
- Le 2019/03/31	: conteneur github 
- Le 2018/10/10	: rev 1.2 Beta ajout variable name 
- Le 2018/02/08 : Création
-->
<div style="min-width:115px;min-height:100px;position: relative; top : -7px;padding:0px !important;" class="container-fluid cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#"  >
	<div style="width:115px;height : 90px;" class="gauge cursor"></div>
	<span style="#displayHistory#" class="col-xs-12 center-block cmdStats"></span>
      	<span class="timeCmd#uid# center-block" style="text-align: center;font-size:12px;padding : 3px;border-radius: 4px;"></span>
<script>
  
          
//    couleur(black) = "white,gray,gray,gray,#999999,white,#ccd6eb,#006ca9,gray,#fff,#006CA9,red";
//    couleur(default) = "white,WhiteSmoke,WhiteSmoke,WhiteSmoke,WhiteSmoke,WhiteSmoke,WhiteSmoke,green,gray,WhiteSmoke,#006CA9,red";  

// test si        Paramètres optionnels widget		existe et mise en variable
testname = ("#name#" == '#'+'name#');
	
	if (testname == true) {
		var name#id# = '>#name_display#';
	} else { 
		var name#id# = '#name#';
	} 
  
testdecimal = ("#decimal#" == '#'+'decimal#');
	
	if (testdecimal == true) {
		var dec#id# = parseFloat(1);
	} else { 
		var dec#id# = parseFloat('#decimal#');
	} 

min_max = ("#min_max#" == '#'+'min_max#');

	if (min_max == true) {
		var mini#id# = #minHistoryValue#-0.5;
		var max#id# = #maxHistoryValue#+0.5;
	} else { 
		var min_max = '#min_max#' ;
		var min_max_liste = min_max.split(",");
		var mini#id# = parseFloat(min_max_liste[0]);
		var max#id# = parseFloat(min_max_liste[1]);
	}

testinterval = ("#interval#" == '#'+'interval#');

	if (testinterval == true) {
		var tick_Interval#id# = Math.abs(Math.round(((#maxHistoryValue# - #minHistoryValue# )+1)/3)) ;
	} else { 
  		var tick_Interval#id# = '#interval#';
    }

testcolor = ("#couleur#" == '#'+'couleur#');

	if (testcolor == true) {
		var couleur = "white,WhiteSmoke,WhiteSmoke,WhiteSmoke,WhiteSmoke,WhiteSmoke,WhiteSmoke,green,gray,WhiteSmoke,#006CA9,red"; 
	} else { 
		var couleur = '#couleur#' ;
    }

var couleurListe = couleur.split(",");

var color_value#id# = (couleurListe[0]) ; 
var color_unite#id# = (couleurListe[1]) ; 
var color_time#id# = (couleurListe[2]) ;
var color_tickColor#id# = (couleurListe[3]) ; 
var color_minorTick#id# = (couleurListe[4]) ;
var color_tick_label_Color#id# = (couleurListe[5]) ; 
var color_line#id# = (couleurListe[6]) ;


var color_bord#id# = (couleurListe[7]);  // default #006ca9
var color_valueDate#id# = (couleurListe[8]) ;
var color_background#id# = (couleurListe[9]) ;
var color_mini#id# = (couleurListe[10]) ;
var color_maxi#id# = (couleurListe[11]) ;

testcolors = ("#couleur_jauge#" == '#'+'couleur_jauge#');
	if (testcolors == true) {
		var couleurs = "Cyan,green,yellow,orange,OrangeRed"; 
	} else { 
  		var couleurs = '#couleur_jauge#' ;
    }

var couleursListe = couleurs.split(",");

var color_A#id# = (couleursListe[0]) ; 
var color_B#id# = (couleursListe[1]) ; 
var color_C#id# = (couleursListe[2]) ;
var color_D#id# = (couleursListe[3]) ; 
var color_E#id# = (couleursListe[4]) ;



$('.timeCmd#uid#').css('color', color_time#id#);

      // actualisation
jeedom.cmd.update['#id#'] = function(_options){

        jeedom.cmd.displayDuration(_options.valueDate,  $('.cmd[data-cmd_id=#id#] .timeCmd#uid#'));
      	$('.cmd[data-cmd_uid=#uid#] .gauge').highcharts().series[0].points[0].update(_options.display_value);
          
        $('.cmd[data-cmd_uid=#uid#] .gauge').highcharts().tooltip.options.formatter = function() {

  			return 	'<div class="tooltip#id#" style="background-color:'+color_background#id#+';border-color:'+color_bord#id#+';"><span style="color:'+color_mini#id#+';font-size:12px;">mini :' + parseFloat('#minHistoryValue#').toFixed(dec#id#) + ' #unite#</span><br>' +
                   	'<span style="color:'+color_maxi#id#+';font-size:12px;">max :' + parseFloat('#maxHistoryValue#').toFixed(dec#id#) + ' #unite# </span><br>' +
					'<span style="color:'+color_valueDate#id#+';font-size:11px;">Valeur du '+ _options.valueDate + '</span></div>' ;
  													}  
    }
 
// creation 
 if (is_numeric('#state#')) {
   jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#'));

 var valueDate#id# = '#valueDate#';

	$('.cmd[data-cmd_uid=#uid#] .gauge').empty().highcharts({
	chart: {
		type: 'solidgauge',
		backgroundColor: null,
		spacingTop: 0,
		spacingLeft: 0,
		spacingRight: 0,
		spacingBottom: 0,
		borderWidth : 0
            },
          
	title: null,
	pane: {
		center: ['35%', '110%'],
		size: '140%',
		startAngle: -30,
		endAngle: 90,
		background: {
			innerRadius: '',
			outerRadius: '',
			shape: 'arc'
					}
		},
	yAxis: {
		stops: [ 
			[0.15, color_A#id# ],
			[0.35, color_B#id# ],
			[0.55, color_C#id# ],
			[0.75, color_D#id# ],
			[0.95, color_E#id# ],
				],
		lineWidth: 1,
      	lineColor: color_line#id# ,
		minorTickLength: 5,
		minorTickInterval: 'auto',
      	minorTickColor: color_minorTick#id#,
		tickWidth: 2,
		tickColor: color_tickColor#id# , // color bar deg
		labels: {
          	className: 'compteur',
			style: {color: color_tick_label_Color#id#,
      				fontSize:'8px'},
			enabled: true,
			distance: 3,
			useHTML: true,
			rotation: 'auto',
       			},
                                                            
		min:  mini#id#, 
		max: max#id#,

		tickInterval: [tick_Interval#id#], //3
                          title: {
                        text: '<span style="color:'+color_value#id#+';font-weight: bold;font-family : Helvetica Neue,Helvetica,Arial,sans-serif;#hideCmdName#">'+name#id#+'</span>',
                        y: - 48,
      					x: 15,
                    }
	},	
		plotOptions: {
		series: {
			dataLabels: {
				formatter: function () {
					return '<span style="color:'+color_value#id#+';font-size:24px;font-family : Roboto-Light,Helvetica Neue,Arial,sans-serif;">' 
                      + this.point.y.toFixed(dec#id#) + '<span style="color:'+color_unite#id#+';font-size:10px;"> #unite#</span>' ;
 },  
				style: {textOutline: '2'},
				x: 5,
				y: 13,
				borderWidth: 0, 
				}
			},       
		},
	credits: {enabled: false},
	exporting : {enabled: false},
    tooltip: {   
		useHTML: true,
                          enabled: true,
                backgroundColor: "rgba(255,255,255,0)",
                borderWidth: 0,
               shadow: false,
   
 formatter: function () {
  			return 	'<div class="tooltip#id#" style="background-color:'+color_background#id#+';border-color:'+color_bord#id#+';"><span style="color:'+color_mini#id#+';font-size:12px;">mini :' + parseFloat('#minHistoryValue#').toFixed(dec#id#)+ ' #unite#</span><br>' +
                   	'<span style="color:'+color_maxi#id#+';font-size:12px;">max :' + parseFloat('#maxHistoryValue#').toFixed(dec#id#) + ' #unite#</span><br>' +
					'<span style="color:'+color_valueDate#id#+';font-size:11px;">Valeur du '+ valueDate#id# + '</span></div>' ;
          	},
		},
          chart : {
                type: 'solidgauge',
                height : 105,
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                backgroundColor: null,
                    events :{
					click : function(e){
					    e.preventDefault(); 
                        if (!$.mobile && '#history#' == 'history cursor') {
							$('#md_modal2').dialog({title: "Historique"});
							$("#md_modal2").load('index.php?v=d&modal=cmd.history&id=#id#').dialog('open');
																			}
										}
							}
				},
	series: [{
		name: '#name_display#',
		 data: [Math.round(parseFloat('#state#') * 10) / 10],
		radius: '95%',
		innerRadius: '80%',
		},
           ],   

     exporting: { enabled: false },

});
   } else {
       $('.cmd[data-cmd_uid=#uid#] .gauge').append('<center><span class="label label-danger" style="margin-top : 5px;">#state#</span></center>');
   }

</script>
<style>
.highcharts-container {
    overflow: visible !important;
}

.tooltip#id# {  
    position: relative;
 z-index: 9999 !important;
    border-width:2px;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    font-size: 9pt;
  text-align: center;
    height:auto !important;
    width:100px !important;
    max-width:100px !important;
    overflow:auto !important;
    white-space:normal !important;
}

  </style>
</div>

La doc : https://www.jeedom.com/forum/viewtopic.php?f=29&t=39076
Le souci : il n’y a aucun affichage :

En éspérant que ça inspire quelqu’un, la fonction d’échelle automatique est vraiment top!

Merci d’avance.

[snoopyfb]

Bonjour

J’ai exactement le même besoin

[snoopyfb]

Bonjour

Après vérification, si tu colle le code dans le munu widget V4, cela fonctionne en version dashboard et en version mobile

[snoopyfb]

Bonjour

Peux tu me dire comment tu changes la couleur de la jauge (en vert et jaune sur la copie d’écran) ?

[Spine]

Bonjour @snoopyfb,

Merci pour ton retour, pourtant je viens d’essayer à nouveau de coller le code dans un widget « code » et ça ne fonctionne pas chez moi, en tout cas pour le deuxième… Tant pis, je me suis finalement rabattu sur d’autres widgets depuis…
Pour le changement de couleur c’est automatique, tu peux choisir les couleurs via les paramètres optionnels du widget : widget jauge sur une echelle du mini/max des dernieres 24h - Forum Communauté Jeedom mais si ça ne marche pas, c’est sûrement dû à un problème de compatibilité V4/Buster…