Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

Régression "design" en 3.3.19: plus de rafraîchissement automatique

Cette partie est réservée à l'utilisation de l'interface web de configuration de JEEDOM
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par winhex » 30 mars 2019, 19:56

j'allais le faire
j'ai modifié un id state#id# inutile mais sans conséquence
et le height#id# aussi via .cmd

Code : Tout sélectionner

code supprimé
ton max est sans actualisation c'est pas méchant
il est fixe lui
sinon faut le mettre dans l'update comme thermostats state est en valeur le tag #maxvalue#

par contre si on joue avec un curseur
mettre #slider# avant min/max
Pièces jointes
Screenshot_20190330-195725_Chrome.jpg
Screenshot_20190330-195725_Chrome.jpg (77.31 Kio) Consulté 1516 fois
Screenshot_20190330-200231_Chrome.jpg
Screenshot_20190330-200231_Chrome.jpg (113.46 Kio) Consulté 1516 fois
Dernière édition par winhex le 31 mars 2019, 01:03, édité 3 fois.

sba923
Timide
Messages : 143
Inscription : 27 avr. 2015, 13:29

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par sba923 » 30 mars 2019, 20:02

Ca a l'air bon avec le code de @winhex moins le </div> en trop et le <script> </script> vide :

Code : Tout sélectionner

<div style="width:120px;height:120px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<div class="row">
    <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
      <div class='col-xs-3 iconCmd#id#' style="padding:0px;height:90px;">
		<div class="row">
		  	<div class='col-xs-offset-1 col-xs-3' style="font-size: 0.6em;">
				<strong style="position: relative;top: 4px;">#maxValue#</strong>
				<strong style="position: relative;top: 46px;">#minValue#</strong>
  			</div>
		  	<div class='col-xs-8' id="thermo#id#" style="padding:0;margin:0;width:22px;height:90px;background:url('plugins/widget/core/template/dashboard/cmd.info.numeric.thermometre/thermo-2-0.png') no-repeat;background-size: 22px 90px;">
	    		<div style="position: absolute;width: 3px;height: 61px;border: none;border-radius: 3px;background-color: white;left: 10px;top: 10px;">
    				<div class="height#id#" style="position:absolute;bottom:0;width:100%;height: 0%;background-image: linear-gradient(to bottom, #fb0e0e, #1515b9);"></div>
  				</div>
  			</div>
      	</div>
      	</div>
		<div class="col-xs-offset-1 col-xs-8" id="stat#id#" style="padding-top:5px;line-height:18px;">
			<span class="thermometre_state" style="font-size: 1.5em;"></span>
		 	<span class="thermometre_unite" id="thermometreUnite#id#">#unite#</span>
                	</div>
       	<div>
          <span style="line-height:10px;font-size: 0.7em;font-weight: bold;display: inline-block;text-align: justify;#displayHistory#">
            <span title="Min" class="tooltips left">Min : </span><span style="float:right;">#minHistoryValue# #unite#</span><br/>
            <span title="Moyenne" class="tooltips">Moy: </span><span style="float:right;">#averageHistoryValue# #unite#</span><br/>
            <span title="Max" class="tooltips">Max: </span><span style="float:right;">#maxHistoryValue# #unite#</span><br/> <i class="#tendance#"></i>
          </span>
      	</div>
  		</div>
	</div>
	<script>
                   		jeedom.cmd.update['#id#'] = function(_options){
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
$('.cmd[data-cmd_id=#id#] .thermometre_state').empty().append(_options.display_value);  

  		height = Math.round( (_options.display_value - ('#minValue#')) * (68/('#maxValue#' - ('#minValue#'))) ) + 6;

	    $('.height#id#').css('height',height+'px');
                      }
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

	</script>
Juste un petit commentaire : la police pour la température n'est plus la même qu'avant, ça n'est plus "homogène" avec les autres widgets utilisés sur mon design :

Avant
jeedom - design - avant.png
jeedom - design - avant.png (122.39 Kio) Consulté 1516 fois
Après
Screenshot of rpi2-2 (rpi2-2) - VNC Viewer on 2019-03-30 20-00-33.png
Screenshot of rpi2-2 (rpi2-2) - VNC Viewer on 2019-03-30 20-00-33.png (71.93 Kio) Consulté 1516 fois
Je vais essayer de regarder tout seul ;-)

Merci encore à tous !!!

P.S. comment faut-il "remonter" à l'auteur de "thermometre" qu'il faut qu'il modifie son code et mette à jour le market ?

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par winhex » 30 mars 2019, 20:08

<span class="thermometre_state" style="font-size: 1.5em;"></span>

dans le style de cette ligne (ta valeur)

pourquoi moi c'est ok
un style d'un autre widget thermometreIMG
en cours pour market

span.thermometre_state {
font-weight: bold;
font-size: 2em;
margin-top: 5px;
display: block;
}
Screenshot_20190330-201647_Chrome.jpg
Screenshot_20190330-201647_Chrome.jpg (175.41 Kio) Consulté 1499 fois
oublié le ps
@JAG le mettra sur le market je pense sinon je le ferais (j'en ai en cours)

Avatar de l’utilisateur
JAG
Actif
Messages : 597
Inscription : 21 mai 2016, 11:10

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par JAG » 30 mars 2019, 20:22

@Winhex
J'aime bien ton widget jour/nuit, il est sur le market ?
si non tu peux partager le widget merci par avance

en tout cas super boulot
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par winhex » 30 mars 2019, 20:35

un slider détourné (avec 2 valeurs)
repris de l'officiel button avec 2 3 trucs en plus
pour inspiration le sujet avec image (repris d'un nest)
viewtopic.php?f=29&t=41964&p=685214&hil ... on#p685160

tu le mets sur le market ?
sinon voici le dernier code

Code : Tout sélectionner

<div style="width:120px;height:120px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<div class="row">
    <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#
      </div>
      <div class='col-xs-3 iconCmd#id#' style="padding:0px;height:90px;">
		<div class="row">
		  	<div class='col-xs-offset-1 col-xs-3' style="font-size: 0.6em;">
				<strong style="position: relative;top: 4px;">#maxValue#</strong>
				<strong style="position: relative;top: 46px;">#minValue#</strong>
  			</div>
		  	<div class='col-xs-8' style="padding:0;margin:0;width:22px;height:90px;background:url('plugins/widget/core/template/dashboard/cmd.info.numeric.thermometre/thermo-2-0.png') no-repeat;background-size: 22px 90px;">
	    		<div style="position: absolute;width: 3px;height: 61px;border: none;border-radius: 3px;background-color: white;left: 10px;top: 10px;">
    				<div class="height" style="position:absolute;bottom:0;width:100%;height: 0%;background-image: linear-gradient(to bottom, #fb0e0e, #1515b9);">
                      </div>
  				</div>
  			</div>
      	</div>
      	</div>
		<div class="col-xs-offset-1 col-xs-8" style="padding-top:5px;line-height:18px;">
			<span class="thermometre_state" style="font-size: 1.5em;font-weight: bold;"></span><br/>
		 	<span class="thermometre_unite" style="font-size: 0.8em;">#unite#</span>
                	</div>
       	<div>
          <span style="line-height:10px;font-size: 0.7em;font-weight: bold;display: inline-block;text-align: justify;#displayHistory#">
            <span title="Min" class="tooltips left">Min : </span><span style="float:right;">#minHistoryValue# #unite#</span><br/>
            <span title="Moyenne" class="tooltips">Moy: </span><span style="float:right;">#averageHistoryValue# #unite#</span><br/>
            <span title="Max" class="tooltips">Max: </span><span style="float:right;">#maxHistoryValue# #unite#</span><br/> <i class="#tendance#"></i>
          </span>
      	</div>
  		</div>
	
	<script>

                   		jeedom.cmd.update['#id#'] = function(_options){
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+'\ncollectée le '+_options.collectDate);
$('.cmd[data-cmd_id=#id#] .thermometre_state').empty().append(_options.display_value);  
  		height = Math.round( (_options.display_value - ('#minValue#')) * (68/('#maxValue#' - ('#minValue#'))) ) + 6;
	    $('.cmd[data-cmd_id=#id#] .height').css('height',height+'px');
                      }
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

	</script>
</div>

A la fin de collecdate manque un ;
un id en + de supprimé
et dans le tooltip (non fonctionnant sur tab/phone) un retour à la ligne \n

sba923
Timide
Messages : 143
Inscription : 27 avr. 2015, 13:29

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par sba923 » 31 mars 2019, 08:20

J'ai profité de l'occasion pour forcer 1 chiffre après la virgule, je voulais avoir un formatage constant, pas "11°C" sur une seule ligne ou "11.1°C" sur deux lignes :

Code : Tout sélectionner

<div style="width:120px;height:120px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<div class="row">
    <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
      <div class='col-xs-3 iconCmd#id#' style="padding:0px;height:90px;">
		<div class="row">
		  	<div class='col-xs-offset-1 col-xs-3' style="font-size: 0.6em;">
				<strong style="position: relative;top: 4px;">#maxValue#</strong>
				<strong style="position: relative;top: 46px;">#minValue#</strong>
  			</div>
		  	<div class='col-xs-8' id="thermo#id#" style="padding:0;margin:0;width:22px;height:90px;background:url('plugins/widget/core/template/dashboard/cmd.info.numeric.thermometre/thermo-2-0.png') no-repeat;background-size: 22px 90px;">
	    		<div style="position: absolute;width: 3px;height: 61px;border: none;border-radius: 3px;background-color: white;left: 10px;top: 10px;">
    				<div class="height#id#" style="position:absolute;bottom:0;width:100%;height: 0%;background-image: linear-gradient(to bottom, #fb0e0e, #1515b9);"></div>
  				</div>
  			</div>
      	</div>
      	</div>
		<div class="col-xs-offset-1 col-xs-8" id="stat#id#" style="padding-top:5px;line-height:18px;">
			<span class="thermometre_state" style="font-size: 1.5em; font-weight: bold"></span>
		 	<span class="thermometre_unite" id="thermometreUnite#id#">#unite#</span>
                	</div>
       	<div>
          <span style="line-height:10px;font-size: 0.7em;font-weight: bold;display: inline-block;text-align: justify;#displayHistory#">
            <span title="Min" class="tooltips left">Min : </span><span style="float:right;">#minHistoryValue# #unite#</span><br/>
            <span title="Moyenne" class="tooltips">Moy: </span><span style="float:right;">#averageHistoryValue# #unite#</span><br/>
            <span title="Max" class="tooltips">Max: </span><span style="float:right;">#maxHistoryValue# #unite#</span><br/> <i class="#tendance#"></i>
          </span>
      	</div>
  		</div>
	</div>
	<script>
                   		jeedom.cmd.update['#id#'] = function(_options){
                          var display_value = parseFloat(_options.display_value).toFixed(1);
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
$('.cmd[data-cmd_id=#id#] .thermometre_state').empty().append(display_value);  

  		height = Math.round( (display_value - ('#minValue#')) * (68/('#maxValue#' - ('#minValue#'))) ) + 6;

	    $('.height#id#').css('height',height+'px');
                      }
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

	</script>
	
Ca serait évidemment mieux si c'était configurable, mais je n'ai aucune idée de la marche à suivre…
Dernière édition par sba923 le 31 mars 2019, 17:32, édité 1 fois.

Avatar de l’utilisateur
JAG
Actif
Messages : 597
Inscription : 21 mai 2016, 11:10

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par JAG » 31 mars 2019, 09:51

Salut à tous,

Je viens d'essayer de mettre à jour la version mobile "ThermometreMini", le code avant

Code : Tout sélectionner

<div style="width:117px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
  	<div style="font-size: 0.6em;font-weight: bold;color: black;position:relative;width:15px;height:80px;float: left;">
		<span style="text-align: right;position: relative;width:15px;float: right;top: 2px;">#maxValue#</span>
		<span style="text-align: right;position: relative;width:15px;float: right;top: 38px;">#minValue#</span>
  	</div>
  	<div id="thermo#id#" style="position:relative;width:22px;height:80px;float: left;background:url('plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/thermo-2-0-80.png') no-repeat;">
	    <div style="position: absolute;display:block;width: 3px;float:left;height: 61px;border: none;border-radius: 3px;background-color: white;left: 9px;top: 3px;">
    		<div id="height#id#" style="display:block;position:absolute;bottom:0;width:100%;height: 0%;background-image: linear-gradient(to bottom, #fb0e0e, #1515b9);"></div>
  		</div>
  	</div>
	<div id="thermoMarker#id#" style="top: 0px; font-weight: bold; color: black;float: left;position: relative; width: 80px; height: 44px;background: url('plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/Marker-Board-Azure-80.png') no-repeat;">
      <center style="padding: 7px 6px 1px 26px;line-height: 16px;">
		<span style="font-size: 1.2em;">#state#</span><br/>
      	<span style="font-size: 0.8em;">#unite#</span>
      </center>
  	</div>
    
<script>
	rangeMin = Math.round(0.3*parseInt('#maxValue#')); 
	rangeMax = Math.round(0.7*parseInt('#maxValue#'));
  	range = parseInt('#state#');
 	if( range <= rangeMin ) {
   		$('#thermoMarker#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/Marker-Board-Azure-80.png")');
    }
 	else if( range > rangeMin && range <= rangeMax ) {
   		$('#thermoMarker#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/Marker-Board-Green-80.png")');
    }
 	else {
   		$('#thermoMarker#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/Marker-Board-Pink-80.png")');
    }
  	height = Math.round( (#state# - (#minValue#)) * (49/(#maxValue# - (#minValue#))) ) + 6;
    topMarker = 49 - height;                         
    $('#height#id#').css('height',height+'px');
    $('#thermoMarker#id#').css('top',topMarker+'px');
</script>
</div>
Voici ma proposition

Code : Tout sélectionner

<div style="width:117px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
  	<div style="font-size: 0.6em;font-weight: bold;color: black;position:relative;width:15px;height:80px;float: left;">
		<span style="text-align: right;position: relative;width:15px;float: right;top: 2px;">#maxValue#</span>
		<span style="text-align: right;position: relative;width:15px;float: right;top: 38px;">#minValue#</span>
  	</div>
  	<div id="thermo#id#" style="position:relative;width:22px;height:80px;float: left;background:url('plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/thermo-2-0-80.png') no-repeat;">
	    <div style="position: absolute;display:block;width: 3px;float:left;height: 61px;border: none;border-radius: 3px;background-color: white;left: 9px;top: 3px;">
    		<div class="height" style="display:block;position:absolute;bottom:0;width:100%;height: 0%;background-image: linear-gradient(to bottom, #fb0e0e, #1515b9);"></div>
  		</div>
  	</div>
	<div id="thermoMarker#id#" style="top: 0px; font-weight: bold; color: black;float: left;position: relative; width: 80px; height: 44px;background: url('plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini//Marker-Board-Azure-80.png') no-repeat;">
      <center style="padding: 7px 6px 1px 26px;line-height: 16px;">
        <span class="thermometre_state" style="font-size: 1.2em;"></span><br/>
		<span class="thermometre_unite" id="thermometreUnite#id#">#unite#</span>
      </center>
  	</div>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          	var range 		= parseInt(_options.display_value);
          	var rangeMin	= Math.round(0.3*parseInt('#maxValue#')); 
			var rangeMax 	= Math.round(0.7*parseInt('#maxValue#')); 
          
           		if( range <= rangeMin ) {
   					$('thermoMarker#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/Marker-Board-Azure-80.png")');
    			} else if( range > rangeMin && range <= rangeMax ) {
   					$('thermoMarker#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/Marker-Board-Green-80.png")');
    			} else {
   					$('thermoMarker#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/Marker-Board-Pink-80.png")');
    			}
                
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .thermometre_state').empty().append(_options.display_value);  
        
  			height = Math.round( (_options.display_value - ('#minValue#')) * (49/('#maxValue#' - ('#minValue#'))) ) + 6;
			// alert(height)
          		topMarker = 49 - height; 
	    		$('.cmd[data-cmd_id=#id#] .height').css('height',height+'px');
         		$('thermoMarker#id#').css('top',topMarker+'px');
         }
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>  
</div>
Si quelqu'un voit une erreur
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par winhex » 31 mars 2019, 17:26

enlevé
// alert(height)
même si ça change rien

@sba923
devant var ] te sert a quoi ? "une erreur qui peux te figé l'actualisation

donc
var Vaalue = parseFloat(_options.display_value).toFixed(1);

et change
$('.cmd[data-cmd_id=#id#] .thermometre_state').empty().append(_options.display_value);
que tu remplaces par
$('.cmd[data-cmd_id=#id#] .thermometre_state').empty().append(Vaalue);

mais laisse @JAG le faire tranquillou
entre le faire fonctionné et apporté des modifs
le tarif change (effet jeedom = toujours +) :D

sba923
Timide
Messages : 143
Inscription : 27 avr. 2015, 13:29

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par sba923 » 31 mars 2019, 17:29

Mes utilisatrices voulaient le "°C" en gras comme avant ;-)

Code : Tout sélectionner

<div style="width:120px;height:120px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<div class="row">
    <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
      <div class='col-xs-3 iconCmd#id#' style="padding:0px;height:90px;">
		<div class="row">
		  	<div class='col-xs-offset-1 col-xs-3' style="font-size: 0.6em;">
				<strong style="position: relative;top: 4px;">#maxValue#</strong>
				<strong style="position: relative;top: 46px;">#minValue#</strong>
  			</div>
		  	<div class='col-xs-8' id="thermo#id#" style="padding:0;margin:0;width:22px;height:90px;background:url('plugins/widget/core/template/dashboard/cmd.info.numeric.thermometre/thermo-2-0.png') no-repeat;background-size: 22px 90px;">
	    		<div style="position: absolute;width: 3px;height: 61px;border: none;border-radius: 3px;background-color: white;left: 10px;top: 10px;">
    				<div class="height#id#" style="position:absolute;bottom:0;width:100%;height: 0%;background-image: linear-gradient(to bottom, #fb0e0e, #1515b9);"></div>
  				</div>
  			</div>
      	</div>
      	</div>
		<div class="col-xs-offset-1 col-xs-8" id="stat#id#" style="padding-top:5px;line-height:18px;">
			<span class="thermometre_state" style="font-size: 1.5em; font-weight: bold"></span>
		 	<span class="thermometre_unite" id="thermometreUnite#id#" style="font-weight: bold">#unite#</span>
                	</div>
       	<div>
          <span style="line-height:10px;font-size: 0.7em;font-weight: bold;display: inline-block;text-align: justify;#displayHistory#">
            <span title="Min" class="tooltips left">Min : </span><span style="float:right;">#minHistoryValue# #unite#</span><br/>
            <span title="Moyenne" class="tooltips">Moy: </span><span style="float:right;">#averageHistoryValue# #unite#</span><br/>
            <span title="Max" class="tooltips">Max: </span><span style="float:right;">#maxHistoryValue# #unite#</span><br/> <i class="#tendance#"></i>
          </span>
      	</div>
  		</div>
	</div>
	<script>
                   		jeedom.cmd.update['#id#'] = function(_options){
                          var display_value = parseFloat(_options.display_value).toFixed(1); 
$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
$('.cmd[data-cmd_id=#id#] .thermometre_state').empty().append(display_value);  

  		height = Math.round( (display_value - ('#minValue#')) * (68/('#maxValue#' - ('#minValue#'))) ) + 6;

	    $('.height#id#').css('height',height+'px');
                      }
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

	</script>

sba923
Timide
Messages : 143
Inscription : 27 avr. 2015, 13:29

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par sba923 » 31 mars 2019, 17:34

@winhex; le ] doit venir d'une fausse manip de copier/coller, je ne l'ai pas dans Jeedom ==> j'édite le post

Avatar de l’utilisateur
JAG
Actif
Messages : 597
Inscription : 21 mai 2016, 11:10

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par JAG » 31 mars 2019, 17:44

Salut
Voici mes 3 améliorations, il y a peut être encore qq erreurs mais à tester

merci de vos retours
Pour le widget Dashboard "Thermometre"

Code : Tout sélectionner

<div style="width:120px;height:120px;" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<div class="row">
    <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
      <div class='col-xs-3 iconCmd#id#' style="padding:0px;height:90px;">
		<div class="row">
		  	<div class='col-xs-offset-1 col-xs-3' style="font-size: 0.6em;">
				<strong style="position: relative;top: 4px;">#maxValue#</strong>
				<strong style="position: relative;top: 46px;">#minValue#</strong>
  			</div>
		  	<div class='col-xs-8' id="thermo#id#" style="padding:0;margin:0;width:22px;height:90px;background:url('plugins/widget/core/template/dashboard/cmd.info.numeric.Thermometre/thermo-2-0.png') no-repeat;background-size: 22px 90px;">
	    		<div style="position: absolute;width: 3px;height: 61px;border: none;border-radius: 3px;background-color: white;left: 10px;top: 10px;">
    				<div class="height#id#" style="position:absolute;bottom:0;width:100%;height: 0%;background-image: linear-gradient(to bottom, #fb0e0e, #1515b9);"></div>
  				</div>
  			</div>
      	</div>
      	</div>
		<div class="col-xs-offset-1 col-xs-8" id="stat#id#" style="padding-top:5px;line-height:18px;">
			<span class="thermometre_state" style="font-size: 1.5em;font-weight: bold"></span>
        </div>
       	<div>
          <span style="line-height:10px;font-size: 0.7em;font-weight: bold;display: inline-block;text-align: justify;#displayHistory#">
            <span title="Min" class="tooltips left">Min : </span><span style="float:right;">#minHistoryValue# #unite#</span><br/>
            <span title="Moyenne" class="tooltips">Moy: </span><span style="float:right;">#averageHistoryValue# #unite#</span><br/>
            <span title="Max" class="tooltips">Max: </span><span style="float:right;">#maxHistoryValue# #unite#</span><br/> <i class="#tendance#"></i>
          </span>
      	</div>
  		</div>
	</div>
<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .thermometre_state').empty().append(_options.display_value+'#unite#');  
  			height = Math.round( (_options.display_value - ('#minValue#')) * (68/('#maxValue#' - ('#minValue#'))) ) + 6;

	    	$('.height#id#').css('height',height+'px');
                      }
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
Pour le widget mobile "ThermometreMini"

Code : Tout sélectionner

<div style="width:117px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
  	<div style="font-size: 0.6em;font-weight: bold;color: black;position:relative;width:15px;height:80px;float: left;">
		<span style="text-align: right;position: relative;width:15px;float: right;top: 2px;">#maxValue#</span>
		<span style="text-align: right;position: relative;width:15px;float: right;top: 38px;">#minValue#</span>
  	</div>
  	<div id="thermo#id#" style="position:relative;width:22px;height:80px;float: left;background:url('plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/thermo-2-0-80.png') no-repeat;">
	    <div style="position: absolute;display:block;width: 3px;float:left;height: 61px;border: none;border-radius: 3px;background-color: white;left: 9px;top: 3px;">
    		<div class="height" style="display:block;position:absolute;bottom:0;width:100%;height: 0%;background-image: linear-gradient(to bottom, #fb0e0e, #1515b9);"></div>
  		</div>
  	</div>
	<div id="thermoMarker#id#" style="top: 0px; font-weight: bold; color: black;float: left;position: relative; width: 80px; height: 44px;background: url('plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini//Marker-Board-Azure-80.png') no-repeat;">
      <center style="padding: 7px 6px 1px 26px;line-height: 16px;">
        <span class="thermometre_state" style="font-size: 1.2em;"></span><br/>
      </center>
  	</div>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          	var range 		= parseInt(_options.display_value);
          	var rangeMin	= Math.round(0.3*parseInt('#maxValue#')); 
			var rangeMax 	= Math.round(0.7*parseInt('#maxValue#')); 
          
           		if( range <= rangeMin ) {
   					$('thermoMarker#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/Marker-Board-Azure-80.png")');
    			} else if( range > rangeMin && range <= rangeMax ) {
   					$('thermoMarker#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/Marker-Board-Green-80.png")');
    			} else {
   					$('thermoMarker#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.ThermometreMini/Marker-Board-Pink-80.png")');
    			}
                
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .thermometre_state').empty().append(_options.display_value+'#unite#');  
        
  			height = Math.round( (_options.display_value - ('#minValue#')) * (49/('#maxValue#' - ('#minValue#'))) ) + 6;
          		topMarker = 49 - height; 
	    		$('.cmd[data-cmd_id=#id#] .height').css('height',height+'px');
         		$('thermoMarker#id#').css('top',topMarker+'px');
         }
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>  
</div>

Pour le widget mobile "Humidite"

Code : Tout sélectionner

<div style="margin-left: 5px;width:110px;min-height:75px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
    <div class='cmdName' style="font-weight: bold;font-size : 0.8em;left: 32px;width: 100px;height: 17px;overflow: hidden;" title="#name#">#name#</div>
  	<div style="position:relative;width:21px;height:60px;float: left;">
  		<div style="position:absolute;width:21px;height:60px;">
    		<div class="height" style="border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; width: 12px; height: 75px;top: 21px; left: 5px; background: url(plugins/widget/core/template/mobile/cmd.info.numeric.humidite/eau.png) no-repeat;position: absolute;">
    			<div class="eprouvette" style="position: absolute;width: 21px;float:left; left: -5px;height: 60px;background:url('plugins/widget/core/template/mobile/cmd.info.numeric.humidite/eprouvette.png') no-repeat;background-size: 21px 60px;"></div>
			</div>
	  	</div>
  	</div>
	<div id="couleur#id#" style="font-weight: bold; color: black;float: left;position: relative;top :6px; width: 80px; height: 44px;background: url('plugins/widget/core/template/mobile/cmd.info.numeric.humidite/Marker-Board-Azure-80.png') no-repeat;">
      <center style="padding: 7px 6px 1px 26px;line-height: 16px;">
		<span class="humidite_state" style="font-size: 1.2em;"></span>
      </center>
  	</div>
<script>
  		jeedom.cmd.update['#id#'] = function(_options){
 			if( '#eprouvette#' == 'Black' ) {
   				$('#eprouvette#id#').css('background-image','url("plugins/widget/core/template/dashboard/cmd.info.numeric.humidite/eprouvette-noir.png")');
    		}
 			if( '#couleur#' == 'Pink' ) {
   				$('#couleur#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.humidite/Marker-Board-Green-80.png")');
    		} else if( '#couleur#' == 'Green' ) {
   				$('#couleur#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.humidite/Marker-Board-Pink-80.png")');
    		} else {
   				$('#couleur#id#').css('background-image','url("plugins/widget/core/template/mobile/cmd.info.numeric.humidite/Marker-Board-Azure-80.png")');
    		}

			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .humidite_state').empty().append(_options.display_value+'#unite#');  
          
          	height = parseInt( (_options.display_value * 60)/#maxValue# );
    		topPosition = 60 - height;
    		$('.cmd[data-cmd_id=#id#] .height').css('top',topPosition+'px');
          	$('.cmd[data-cmd_id=#id#] .height').css('height',height+'px'); 
    
          	$('.cmd[data-cmd_id=#id#] .eprouvette').css('top','-'+topPosition+'px');
           
         }
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});          
</script>
</div>
Box : Jeedom Smart + Jeedom VM-Synology (avec Jeedom en beta)
Protocoles : Z-wave - RFXcom - Hue - Bluetooth - Xiaomi
Mon Matériel
Widgets développés

winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par winhex » 31 mars 2019, 22:13

si tu veux t'inspiré pour evolution
thermometreIMG2
https://www.jeedom.com/market/index.php ... ometreIMG2
1 décimal de fixé

Paramètres optionnels widget
- position : position du thermostat (left ou right) / default : left
- oneLine : Valeur et Unité sur la même ligne (on / off) / default off
- heightImage : hauteur de l'image du thermostat / default 80
- widthImage : largeur de l'image du thermostat / default 22
- fontsizeState : taille de la police de caractére pour la valeur / default : 2em
- fontsizeUnite : taille de la police de caractére pour l'unité/ default : 1em
le developpeur avait déjà intégré tous cela (j'ai fait que trés peu de modif)

Djal94
Actif
Messages : 1228
Inscription : 09 août 2016, 09:21

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par Djal94 » 01 avr. 2019, 12:11

Bon c'est quand même la merde cette histoire de Widget.

Mais je me suis dis, c'est pas grave, on va créer le Widget avec le mode de création Facile.
Et bah même en le créant comme ça, ça s'actualise pas. Ils auraient pu mettre à jour ce mode non l'équipe??? J'entends déjà les arguments....je sais même pas lesquels du coup. Peuvent pas mettre à jour leur trucs pour que ça soit compatible sérieux? incroyable....
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

Avatar de l’utilisateur
PrFalKeN
Actif
Messages : 936
Inscription : 27 nov. 2017, 18:51

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par PrFalKeN » 01 avr. 2019, 12:48

'Jour,

Je n'ai pas de souci quand je crée un widget avec le mode de création facile...
Beaucoup de bonnes volontés ont modifiés les widgets et les ont publiés v3 sur le market.
Cette modification est annoncée depuis 1 an voir plus. Pourtant les auteurs de certains widgets n'ont pas bougés durant tout ce temps.

Ensuite avec les widget core il n'y a pas de souci

Djal94
Actif
Messages : 1228
Inscription : 09 août 2016, 09:21

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par Djal94 » 01 avr. 2019, 12:49

PrFalKeN a écrit :
01 avr. 2019, 12:48
'Jour,

Je n'ai pas de souci quand je crée un widget avec le mode de création facile...
Beaucoup de bonnes volontés ont modifiés les widgets et les ont publiés v3 sur le market.
Cette modification est annoncée depuis 1 an voir plus. Pourtant les auteurs de certains widgets n'ont pas bougés durant tout ce temps.

Ensuite avec les widget core il n'y a pas de souci
Tes widget créés avec le mode création facile, s'update automatiquement meme sans refresh??
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

Avatar de l’utilisateur
PrFalKeN
Actif
Messages : 936
Inscription : 27 nov. 2017, 18:51

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par PrFalKeN » 01 avr. 2019, 12:52

Oui oui j'ai refait des widgets avec ce principe et cela fonctionne et je ne suis pas le seul

Djal94
Actif
Messages : 1228
Inscription : 09 août 2016, 09:21

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par Djal94 » 01 avr. 2019, 12:53

Bah ecoute je vais refaire un test , mais hier soir ca ne fonctionnait pas. Merci
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par Salvialf » 01 avr. 2019, 13:00

Salut,

Pour info le plugin widget bug de plus en plus et oblige à réappliquer le widget sur les commandes, sauvegarder commande par commande + l'équipement entier pour prise en compte du nouveau code.

Sinon j'ai réalisé un widget info/binaire universel dans lequel il suffit d'ajouter ses icônes: IconInfo et un action/autre: IconAction.

HS: Le plugin virtuel bug énormément aussi suite à la dernière mise à jour. Je passe plus de temps à réappliquer les widgets et sauvegarder les commandes qu'à coder c'est saoulant et ça n'augure rien de bon pour l'avenir.
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

Avatar de l’utilisateur
Antoinekl1
Actif
Messages : 3927
Inscription : 23 mai 2015, 08:14

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par Antoinekl1 » 01 avr. 2019, 13:08

Il y a une mise à jour du plugin ; .numeric.thermometreIMG mais il plante à la décompression

chez vous aussi ?
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

SeaWood
Timide
Messages : 51
Inscription : 11 janv. 2018, 18:53
Localisation : Morbihan

Re: Régression "design" en 3.3.19: plus de rafraîchissement automatique

Message par SeaWood » 01 avr. 2019, 14:43

Antoinekl1 a écrit :
01 avr. 2019, 13:08
Il y a une mise à jour du plugin ; .numeric.thermometreIMG mais il plante à la décompression

chez vous aussi ?
Idem

Répondre

Revenir vers « Portail web classique (Desktop) »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités