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 !

[Help] Création widget température

Cette partie est réservée à l'utilisation de l'interface web de configuration de JEEDOM
Micramaniac
Timide
Messages : 216
Inscription : 17 oct. 2017, 11:22

[Help] Création widget température

Message par Micramaniac » 19 déc. 2018, 00:05

Bonsoir le forum.
Je cherche à afficher mes températures sur mon design avec un widget qui aurait les décimales plus petite.
Mais impossible de trouver comment faire.

Avant :
widget_avant.png
widget_avant.png (5.79 Kio) Consulté 3047 fois
Après:
widget_après.png
widget_après.png (6.23 Kio) Consulté 3047 fois
Merci pour votre aide

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

Re: [Help] Création widget température

Message par winhex » 19 déc. 2018, 01:55

en gros faut différencié là ou tu veux mettre
par 2 span
et ensuite dans le script on récupére la valeur
on la sépare

on met se qui précède la virgule dans le span A
et aprés la virgule dans le span B

Code : Tout sélectionner

        		<div class="ValueFD#id# #Ombre#">
        			<span class="intFD#id#" id="intFDValue#id#"></span>
          			<span class="decFD#id#" id="decFDValue#id#"></span>
      			</div>
methode utilisé dans flatdesign
https://www.jeedom.com/market/index.php ... flatdesign

à toi de peaufiner car si les decimal = 0 ce n'est pas affiché dans se code (le if)

Code : Tout sélectionner

var valeur = "#state#";
var intNum = parseInt(valeur);
var decNum = Math.abs(Math.round((valeur - intNum) * 10));
$('#intFDValue#id#').text(intNum);
if (decNum != 0) {
   	$('#decFDValue#id#').text('.'+decNum);
}

voici la maj avec quelques ajjout pour un design avec parametre pour
bord,ombre et clic qui méne sur un autre design (ne marche pas sur dashboard)
flatdesign.png
flatdesign.png (96.56 Kio) Consulté 3037 fois

Code : Tout sélectionner

 <head>
       <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Audiowide">

    </head>
<div onClick="#OnClick#;" style="width:90px;min-height:100px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd-widget FD#id# temp" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="Valeur du #valueDate#, collectée le #collectDate#">
    <center>
        <span class='cmdName' style="font-weight: bold;font-size : 14px;#hideCmdName#">#name_display#</span><br/>
<br/>
         <div class='displayDF#id#'></div>
        	<div class='boxFD#id#'>
        		<div class="ValueFD#id# #Ombre#">
        			<span class="intFD#id#" id="intFDValue#id#"></span>
          			<span class="decFD#id#" id="decFDValue#id#"></span>
      			</div>
        		<div class='UniteFD#id#'>#unite#</div>
              </div>
<br/>
             <div style="#displayHistory# font-size: 14px;" class="col-xs-16 center-block">
            <span title='Min' class='tooltips'>#minHistoryValue# </span> | <span title='Max' class='tooltips'> #maxHistoryValue#</span> <i class="#tendance#"></i>
        <br/><br/><span class="timeCmd#uid#" style="padding : 3px;border-radius: 4px;"></span>

</div>
    </center>
</div>
<style>

div.displayFD#id# {
    position: relative;
}

.boxFD#id# {
    background-color: #00FF00 ;
    height: 60px;
    width: 80px;
	border-radius : 10px;
  	//top: 5px;
  	//left: 5px;
  	//position: absolute;
	text-align: center;
}
.ValueFD#id# {
    position: relative;
    text-align: center;
    top: 5px;
    z-index:1;
    border-radius : 10px;
  	display: block;
    overflow: hidden;
  	width: 80px;
	height : 55px;
    border-radius : 10px;
}
.intFD#id# {  
  	font-family: "Audiowide", helvetica, arial, sans-serif;
  	font-weight: bold;
    color: #fff;
    font-size: 24px;
}
.decFD#id# {
    font-family: "Audiowide", helvetica, arial, sans-serif;
    font-weight: bold;
    color: #fff;
    font-size: 18px;
}
.UniteFD#id# {
    font-family: "Helvetica Neue", helvetica, arial, sans-serif;
    font-weight: bold;
    color: #fff;
    height: 30px;
    width: 80px;
    font-size: 15px;
    top: -25px;
    text-align: center;
    display: block;
    overflow: hidden;
    position:relative;
    z-index:2;
    border-radius : 10px;
}
</style>
<script>
      jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#'));
    jeedom.cmd.update['#id#'] = function(_options){

var valeur = "#state#";
var intNum = parseInt(valeur);
var decNum = Math.abs(Math.round((valeur - intNum) * 10));
$('#intFDValue#id#').text(intNum);
if (decNum != 0) {
   	$('#decFDValue#id#').text('.'+decNum);
}
var LightenColor = function(color, percent) {
  	var num = parseInt(color,16),
		amt = Math.round(2.55 * percent),
		R = (num >> 16) + amt,
		B = (num >> 8 & 0x00FF) + amt,
		G = (num & 0x0000FF) + amt;
 
		return (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (B<255?B<1?0:B:255)*0x100 + (G<255?G<1?0:G:255)).toString(16).slice(1);
};  
  if ('#state#' < 0 ) {
   $('.decFD#id#').css('color', '#00004d');
       $('.intFD#id#').css('color', '#00004d');
      $('.UniteFD#id#').css('color', '#00004d'); 
     }
function TypeCouleur(valeur){
        var typeCouleur;
      	//console.log('Valeur : '+valeur);
        if(/true|false/.test(valeur)){
          typeCouleur = 'bool';
        }else if(/^#[a-zA-Z0-9]{3,6}$/.test(valeur)){
          typeCouleur = 'html';
        }else if(/^rgb\(?[012]?\d\d,?[012]?\d\d,?[012]?\d\d\)$/i.test(valeur)){
          typeCouleur = 'rgb';
        }else if(/^[a-zA-Z]{3,}$/i.test(valeur)){
          typeCouleur = 'nom';
        }else if(/[-+]?\d+:.+\&?/i.test(valeur)){
          typeCouleur = 'objet';
        }else if(/^[a-zA-Z0-9#\(\),\-]+\&/i.test(valeur)){
          typeCouleur = 'array';
        }else{
          typeCouleur = 'inconnu';
        }
        return typeCouleur;
    }  
  
color2 = "#color#";
testcolor = ("#color#" == '#'+'color#');
var test = TypeCouleur(color2);
console.log(testcolor);
console.log(test);
if(test == 'objet'){
 	var arrayVal = color2.split('&'), cleVal;
    para = new Object();
    for(var cle in arrayVal){
    	cleVal = arrayVal[cle].split(':');
       	para[cleVal[0]] = cleVal[1];
       	if(parseFloat("#state#") >= parseFloat(cleVal[0])){
           	color2 = para[cleVal[0]];
       	}
    }
}
console.log(color2);

if (testcolor == false) {
	couleur = LightenColor(color2, -30);
    boxColor = LightenColor(color2, -60);
  	$('.boxFD#id#').css('background-color', '#'+color2);
    //console.log("couleur : " +color2);
} else {
  	couleur = LightenColor('00FF00', -30);
	boxColor = LightenColor('00FF00', -60);
    //console.log("couleur : " +couleur);
}
valeur = '';

for (var iter = 1; iter < 99; iter++) {
    couleur = LightenColor(couleur, 0.5);
    valeur = valeur + '#' + couleur + ' ' + iter + 'px' + ' ' + iter + 'px, ';
}
valeur = valeur + '#' + couleur +' 100px 100px';

  
  if ('#Bord#' == "non") {
}else {
$('.boxFD#id#').css('box-shadow', '#' +boxColor+' 4px 4px');
};
  
if ('#Ombre#' == '0') {
}else {
$('.ValueFD#id#').css('text-shadow', valeur);
  $('.UniteFD#id#').css('text-shadow', valeur);
};
        }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

</script>
flatdesign2.png
flatdesign2.png (48.16 Kio) Consulté 3037 fois

Micramaniac
Timide
Messages : 216
Inscription : 17 oct. 2017, 11:22

Re: [Help] Création widget température

Message par Micramaniac » 19 déc. 2018, 08:01

Merci Winhex!
Ca m'a la'air top ça!

romanais
Actif
Messages : 1999
Inscription : 21 août 2014, 21:36
Localisation : Drôme

Re: [Help] Création widget température

Message par romanais » 19 déc. 2018, 10:27

La vache, la puissance de ce que l'on peut faire, j'utilise pas 5% de tout ça moi :o
Merci à toute l'équipe pour le taf

Mon matériel

Micramaniac
Timide
Messages : 216
Inscription : 17 oct. 2017, 11:22

Re: [Help] Création widget température

Message par Micramaniac » 19 déc. 2018, 14:29

Re Winhex,
grâce à ton code j'ai compris comment importer une police de caractère.
J'ai plus ou moins compris le fonctionnement des options bord ombre et clic (pas compris pour la couleur).
Malgré tout, j'ai beau faire des essais au niveau du code, je ne comprends pas tout le code et je n'arrive pas à faire ce que je veux.
Je n'arrive pas à avoir le fond transparent (à la place du bleu dans l'exemple ci-dessous)et uniquement les chiffres en blanc.
Et impossible de mettre le °C en exposant comme dans mon exemple.
widget_après.png
widget_après.png (6.23 Kio) Consulté 3003 fois

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

Re: [Help] Création widget température

Message par winhex » 19 déc. 2018, 21:28

le transparent c'est dans le paramètre avancé
couleur aussi
mais on peux le faire via le style de chaque span

exposant °C un span avec le style
relative et en jouant avec le positionnement
(comme ton exemple j'imagine)

t'inquiète moi non plus je ne comprends pas tous le code

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

Re: [Help] Création widget température

Message par Antoinekl1 » 14 juin 2019, 13:52

Je me suis permis de modifier un peu le code

cela s'affiche bien dans le design avec l'ombre

Code : Tout sélectionner

<div onClick="#lien#;" style="width:90px;min-height:65px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd-widget FD#id# temp" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="Valeur du #valueDate#, collectée le #collectDate#">
    <center>
        <span class='cmdName' style="font-weight: bold;font-size : 14px;#hideCmdName#">#name_display#</span>
        <div class='displayDF#id#'></div>
        <div class='boxFD#id#'>
        	<div class="ValueFD#id# #Ombre#">
        		<span class="intFD#id#" id="intFDValue#id#"></span>
        		<span class="decFD#id#" id="decFDValue#id#"></span>
      		</div>
        	<div class='UniteFD#id#'>#unite#</div>
        </div>
        <div style="#displayHistory# font-size: 14px;" class="col-xs-16 center-block">
        	<span title='Min' class='tooltips'>#minHistoryValue# </span> | <span title='Max' class='tooltips'> #maxHistoryValue#</span> <i class="#tendance#"></i>
        	<span class="timeCmd#uid#" style="padding : 3px;border-radius: 4px;"></span>
		</div>
    </center>

<style>
	@font-face {
  		font-family: 'Audiowide';
  		font-style: normal;
  		font-weight: 400;
  		src: local('Audiowide Regular'), local('Audiowide-Regular'), url(https://fonts.gstatic.com/s/audiowide/v7/l7gdbjpo0cum0ckerWCdmA_OIxo.woff2) format('woff2');
  		unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}
	@font-face {
  		font-family: 'Audiowide';
  		font-style: normal;
  		font-weight: 400;
  		src: local('Audiowide Regular'), local('Audiowide-Regular'), url(https://fonts.gstatic.com/s/audiowide/v7/l7gdbjpo0cum0ckerWCdlg_O.woff2) format('woff2');
  		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}
  
	div.displayFD#id# {
	    position: relative;
	}

	.boxFD#id# {
	    background-color: #00FF00 ;
	    height: 60px;
	    width: 80px;
		border-radius : 10px;
	  	//top: 5px;
  		//left: 5px;
  		//position: absolute;
		text-align: center;
	}
  
	.ValueFD#id# {
	    position: relative;
	    text-align: center;
	    top: 5px;
	    z-index:1;
	    border-radius : 10px;
	  	display: block;
	    overflow: hidden;
	  	width: 80px;
		height : 55px;
	    border-radius : 10px;
	}
  
	.intFD#id# {  
	  	font-family: "Audiowide", helvetica, arial, sans-serif;
	  	font-weight: bold;
	    color: #fff;
	    font-size: 24px;
	}
  
	.decFD#id# {
	    font-family: "Audiowide", helvetica, arial, sans-serif;
	    font-weight: bold;
	    color: #fff;
	    font-size: 18px;
	}
  
	.UniteFD#id# {
	    font-family: "Helvetica Neue", helvetica, arial, sans-serif;
	    font-weight: bold;
	    color: #fff;
	    height: 30px;
	    width: 80px;
	    font-size: 15px;
	    top: -25px;
	    text-align: center;
	    display: block;
	    overflow: hidden;
	    position:relative;
	    z-index:2;
	    border-radius : 10px;
	}
</style>

<script>
	jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#'));
  
    jeedom.cmd.update['#id#'] = function(_options){

		var valeur = "#state#";
		var intNum = parseInt(valeur);
		var decNum = Math.abs(Math.round((valeur - intNum) * 10));
		$('#intFDValue#id#').text(intNum);
		if (decNum != 0) {
		   	$('#decFDValue#id#').text('.'+decNum);
		}

	    var LightenColor = function(color, percent) {
	  		var num = parseInt(color,16),
				amt = Math.round(2.55 * percent),
				R = (num >> 16) + amt,
				B = (num >> 8 & 0x00FF) + amt,
				G = (num & 0x0000FF) + amt;
			return (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (B<255?B<1?0:B:255)*0x100 + (G<255?G<1?0:G:255)).toString(16).slice(1);
		};  
  
	    if ('#state#' < 0 ) {
			$('.decFD#id#').css('color', '#00004d');
	   		$('.intFD#id#').css('color', '#00004d');
	   		$('.UniteFD#id#').css('color', '#00004d'); 
	   	}

	   	function TypeCouleur(valeur){
	        var typeCouleur;
	      	//console.log('Valeur : '+valeur);
	        if(/true|false/.test(valeur)){
	        	typeCouleur = 'bool';
	        }else if(/^#[a-zA-Z0-9]{3,6}$/.test(valeur)){
	          	typeCouleur = 'html';
	        }else if(/^rgb\(?[012]?\d\d,?[012]?\d\d,?[012]?\d\d\)$/i.test(valeur)){
	          	typeCouleur = 'rgb';
	        }else if(/^[a-zA-Z]{3,}$/i.test(valeur)){
	        	  typeCouleur = 'nom';
	        }else if(/[-+]?\d+:.+\&?/i.test(valeur)){
	        	  typeCouleur = 'objet';
	        }else if(/^[a-zA-Z0-9#\(\),\-]+\&/i.test(valeur)){
	        	  typeCouleur = 'array';
	        }else{
	        	  typeCouleur = 'inconnu';
	        }
	        return typeCouleur;
	    }  
  
		color2 = "#color#";
		testcolor = ("#color#" == '#'+'color#');
		var test = TypeCouleur(color2);
		console.log(testcolor);
		console.log(test);
		if(test == 'objet'){
		 	var arrayVal = color2.split('&'), cleVal;
		    para = new Object();
		    for(var cle in arrayVal){
		    	cleVal = arrayVal[cle].split(':');
		       	para[cleVal[0]] = cleVal[1];
		       	if(parseFloat("#state#") >= parseFloat(cleVal[0])){
		           	color2 = para[cleVal[0]];
		       	}
		    }
		}
		console.log(color2);

		if (testcolor == false) {
			couleur = LightenColor(color2, -30);
		    boxColor = LightenColor(color2, -60);
		  	$('.boxFD#id#').css('background-color', '#'+color2);
		    //console.log("couleur : " +color2);
		} else {
		  	couleur = LightenColor('00FF00', -30);
			boxColor = LightenColor('00FF00', -60);
		    //console.log("couleur : " +couleur);
		}
		valeur = '';

		for (var iter = 1; iter < 99; iter++) {
		    couleur = LightenColor(couleur, 0.5);
		    valeur = valeur + '#' + couleur + ' ' + iter + 'px' + ' ' + iter + 'px, ';
		}
		valeur = valeur + '#' + couleur +' 100px 100px';

    	if ('#Bord#' != "non") {
			$('.boxFD#id#').css('box-shadow', '#' +boxColor+' 4px 4px');
		}
  
		if ('#Ombre#' != '0') {
			$('.ValueFD#id#').css('text-shadow', valeur);
	  		$('.UniteFD#id#').css('text-shadow', valeur);
		}
    
    }
  
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Dernière édition par Antoinekl1 le 14 juin 2019, 15:58, édité 1 fois.
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

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

Re: [Help] Création widget température

Message par Antoinekl1 » 14 juin 2019, 14:43

et si ca intéresse qqun

la même chose avec le choix de la couleur du fond, à passer dans un paramètre color, avec juste le numéro de la couleur

si le paramètre n'existe pas, le défaut est 0099ff

pareil pour bord et ombre (j'ai enlevé les majuscules), par défaut oui, sinon mettre non

et un param : lien, si besoin

Code : Tout sélectionner

<div onClick="#lien#;" style="width:90px;min-height:65px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd-widget FD#id# temp" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="Valeur du #valueDate#, collectée le #collectDate#">
    <center>
        <span class='cmdName' style="font-weight: bold;font-size : 14px;#hideCmdName#">#name_display#</span>
        <div class='displayDF#id#'></div>
        <div class='boxFD#id#'>
        	<div class="ValueFD#id# #Ombre#">
        		<span class="intFD#id#" id="intFDValue#id#"></span>
        		<span class="decFD#id#" id="decFDValue#id#"></span>
      		</div>
        	<div class='UniteFD#id#'>#unite#</div>
        </div>
        <div style="#displayHistory# font-size: 14px;" class="col-xs-16 center-block">
        	<span title='Min' class='tooltips'>#minHistoryValue# </span> | <span title='Max' class='tooltips'> #maxHistoryValue#</span> <i class="#tendance#"></i>
        	<span class="timeCmd#uid#" style="padding : 3px;border-radius: 4px;"></span>
		</div>
    </center>

<style>
	@font-face {
  		font-family: 'Audiowide';
  		font-style: normal;
  		font-weight: 400;
  		src: local('Audiowide Regular'), local('Audiowide-Regular'), url(https://fonts.gstatic.com/s/audiowide/v7/l7gdbjpo0cum0ckerWCdmA_OIxo.woff2) format('woff2');
  		unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}
	@font-face {
  		font-family: 'Audiowide';
  		font-style: normal;
  		font-weight: 400;
  		src: local('Audiowide Regular'), local('Audiowide-Regular'), url(https://fonts.gstatic.com/s/audiowide/v7/l7gdbjpo0cum0ckerWCdlg_O.woff2) format('woff2');
  		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}
  
	div.displayFD#id# {
	    position: relative;
	}

	.boxFD#id# {
	    height: 60px;
	    width: 80px;
		border-radius : 10px;
	  	//top: 5px;
  		//left: 5px;
  		//position: absolute;
		text-align: center;
	}
  
	.ValueFD#id# {
	    position: relative;
	    text-align: center;
	    top: 5px;
	    z-index:1;
	    border-radius : 10px;
	  	display: block;
	    overflow: hidden;
	  	width: 80px;
		height : 55px;
	    border-radius : 10px;
	}
  
	.intFD#id# {  
	  	font-family: "Audiowide", helvetica, arial, sans-serif;
	  	font-weight: bold;
	    color: #fff;
	    font-size: 24px;
	}
  
	.decFD#id# {
	    font-family: "Audiowide", helvetica, arial, sans-serif;
	    font-weight: bold;
	    color: #fff;
	    font-size: 18px;
	}
  
	.UniteFD#id# {
	    font-family: "Helvetica Neue", helvetica, arial, sans-serif;
	    font-weight: bold;
	    color: #fff;
	    height: 30px;
	    width: 80px;
	    font-size: 15px;
	    top: -25px;
	    text-align: center;
	    display: block;
	    overflow: hidden;
	    position:relative;
	    z-index:2;
	    border-radius : 10px;
	}
</style>

<script>
	jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#'));
  
    jeedom.cmd.update['#id#'] = function(_options){
      	// Récupération des valeurs des paramètres
		var chxcolor = ('#color#' !='#'+'color#') ? "#color#":"0099ff";
        var chxbord = ('#bord#' !='#'+'bord#') ? "#bord#":"oui";
        var chxombre = ('#ombre#' !='#'+'ombre#') ? "#ombre#":"oui";
      
		var valeur = "#state#";
		var intNum = parseInt(valeur);
		var decNum = Math.abs(Math.round((valeur - intNum) * 10));
		$('#intFDValue#id#').text(intNum);
		if (decNum != 0) {
		   	$('#decFDValue#id#').text('.'+decNum);
		}
      
		$('.boxFD#id#').css('background-color', '#'+chxcolor);
      
	    var LightenColor = function(color, percent) {
	  		var num = parseInt(color,16),
				amt = Math.round(2.55 * percent),
				R = (num >> 16) + amt,
				B = (num >> 8 & 0x00FF) + amt,
				G = (num & 0x0000FF) + amt;
			return (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (B<255?B<1?0:B:255)*0x100 + (G<255?G<1?0:G:255)).toString(16).slice(1);
		};  
  

	  	couleur = LightenColor(chxcolor, -30);
		boxColor = LightenColor(chxcolor, -60);
		valeur = '';

		for (var iter = 1; iter < 99; iter++) {
		    couleur = LightenColor(couleur, 0.5);
		    valeur = valeur + '#' + couleur + ' ' + iter + 'px' + ' ' + iter + 'px, ';
		}
		valeur = valeur + '#' + couleur +' 100px 100px';

    	if (chxbord != "non") {
			$('.boxFD#id#').css('box-shadow', '#' +boxColor+' 4px 4px');
		}
  
		if (chxombre != "non") {
			$('.ValueFD#id#').css('text-shadow', valeur);
	  		$('.UniteFD#id#').css('text-shadow', valeur);
		}
    
    }
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

</script>
</div>
Dernière édition par Antoinekl1 le 14 juin 2019, 15:55, édité 4 fois.
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

Micramaniac
Timide
Messages : 216
Inscription : 17 oct. 2017, 11:22

Re: [Help] Création widget température

Message par Micramaniac » 14 juin 2019, 14:53

Tu peux mettre le résultat en image stp

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

Re: [Help] Création widget température

Message par Antoinekl1 » 14 juin 2019, 15:13

Micramaniac a écrit :
14 juin 2019, 14:53
Tu peux mettre le résultat en image stp

c'est la même rendu que la code d'origine

voici un bout de mon design, avec la couleur par défaut,

fastdesign.jpg
fastdesign.jpg (11.83 Kio) Consulté 2691 fois

ou avec une couleur passée en paramètre, mais vous pouvez mettre n'importe quel code couleur sans le #

fastdesign2.jpg
fastdesign2.jpg (77.23 Kio) Consulté 2689 fois
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

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

Re: [Help] Création widget température

Message par winhex » 14 juin 2019, 15:56

tu peux en faire un binaire icône (info /action) aussi
vu qu'un icon c'est du texte tu aura le même effet ombre et couleurs differentes pour rester sur le même style
param avancé icon_on/off color_on/off taille position top,..
j'ai tellement joué avec que je ne sais même plus quel est le dernier

pour base de travail info binaire (sonette)

Code : Tout sélectionner

<!icone http://fontawesome.io/examples/ et http://www.w3schools.com/icons/default.asp et icone jeedom !>
<! http://www.flaticon.com/free-icon/ac_95252 !>
<div style="width:90px;min-height:100px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget FD#id#" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" title="Valeur du #valueDate#, collectée le #collectDate#">
    <center>
        <span class='cmdName' style="font-weight: bold;font-family : Helvetica Neue,Helvetica,Arial,sans-serif;font-size : 11px;#hideCmdName#;">#name_display#</span><br/>
         <div class='displayDF#id#'></div>
        	<div class='boxFD#id#'>
        		<div class="ValueFD#id# #Ombre# fa-stack fa-lg">
                   <span style="font-size: #size#;top: #top#;" class="iconCmd#uid# fa-stack-1x"></span>
      			</div>
              </div>
      <br/><span class="collect#uid# #collect_Date#" style="font-size: 12px;">#collectDate#</span>
        <br/><span class="timeCmd#uid# timeCmd" style="padding : 3px;border-radius: 4px;font-size: 12px;"></span>

    </center>

<style>

div.displayFD#id# {
    position: relative;
}

.boxFD#id# {
    background-color: #7f7599 ;
    height: 60px;
    width: 80px;
	border-radius : 10px;
  	//top: 5px;
  	//left: 5px;
  	//position: absolute;
	text-align: center;
}
.ValueFD#id# {
    position: relative;
    text-align: center;
    top: 5px;
    z-index:1;
    border-radius : 10px;
  	display: block;
    overflow: hidden;
  	width: 80px;
	height : 55px;
    border-radius : 10px;
}
</style>
<script>
    jeedom.cmd.update['#id#'] = function(_options){
    //           jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#'));
        jeedom.cmd.displayDuration(_options.valueDate,  $('.cmd[data-cmd_id=#id#] .timeCmd'));



        $('.iconCmd#uid#').empty();
        if (_options.display_value == '0') {
 $('.iconCmd#uid#').append('<i class="icon #binaire_on#"></i>'); 
                  }else {
            $('.iconCmd#uid#').append('<i class="icon #binaire_off#"></i>');
}
      
if ('#collect_Date#' == '1') {
$('.collect#uid#').show();
  $('.timeCmd#uid#').hide();
}
else if ('#collect_Date#' == '0') {
            $('.collect#uid#').hide();
    $('.timeCmd#uid#').hide();
}

else {
            $('.collect#uid#').hide();
    $('.timeCmd#uid#').show();
}
      
//    if (_options.display_value != undefined){ var valeur = '0';}  else { var valeur = _options.display_value;} 
        if (_options.display_value == '') {
var valeur = '0';
   //      alert(valeur);
       }else {
var valeur = _options.display_value;
                  }
//var valeur = _options.display_value;
var intNum = parseInt(valeur);
var decNum = Math.abs(Math.round((valeur - intNum) * 10));

var LightenColor = function(color, percent) {
  	var num = parseInt(color,16),
		amt = Math.round(2.55 * percent),
		R = (num >> 16) + amt,
		B = (num >> 8 & 0x00FF) + amt,
		G = (num & 0x0000FF) + amt;
 
		return (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (B<255?B<1?0:B:255)*0x100 + (G<255?G<1?0:G:255)).toString(16).slice(1);
};  

function TypeCouleur(valeur){
        var typeCouleur;
      	//console.log('Valeur : '+valeur);
        if(/true|false/.test(valeur)){
          typeCouleur = 'bool';
        }else if(/^#[a-zA-Z0-9]{3,6}$/.test(valeur)){
          typeCouleur = 'html';
        }else if(/^rgb\(?[012]?\d\d,?[012]?\d\d,?[012]?\d\d\)$/i.test(valeur)){
          typeCouleur = 'rgb';
        }else if(/^[a-zA-Z]{3,}$/i.test(valeur)){
          typeCouleur = 'nom';
        }else if(/[-+]?\d+:.+\&?/i.test(valeur)){
          typeCouleur = 'objet';
        }else if(/^[a-zA-Z0-9#\(\),\-]+\&/i.test(valeur)){
          typeCouleur = 'array';
        }else{
          typeCouleur = 'inconnu';
        }
        return typeCouleur;
    }  
  
color2 = "#color#";
testcolor = ("#color#" == '#'+'color#');
var test = TypeCouleur(color2);
console.log(testcolor);
console.log(test);
if(test == 'objet'){
 	var arrayVal = color2.split('&'), cleVal;
    para = new Object();
    for(var cle in arrayVal){
    	cleVal = arrayVal[cle].split(':');
       	para[cleVal[0]] = cleVal[1];
       	if(parseFloat(_options.display_value) >= parseFloat(cleVal[0])){
           	color2 = para[cleVal[0]];
       	}
    }
}
console.log(color2);

if (testcolor == false) {
	couleur = LightenColor(color2, -30);
    boxColor = LightenColor(color2, -60);
  	$('.boxFD#id#').css('background-color', '#'+color2);
    //console.log("couleur : " +color2);
} else {
  	couleur = LightenColor('00FF00', -30);
	boxColor = LightenColor('00FF00', -60);
    //console.log("couleur : " +couleur);
}
valeur = '';

for (var iter = 1; iter < 99; iter++) {
    couleur = LightenColor(couleur, 0.5);
    valeur = valeur + '#' + couleur + ' ' + iter + 'px' + ' ' + iter + 'px, ';
}
valeur = valeur + '#' + couleur +' 100px 100px';

  
if ('#Ombre#' == '0') {
}else {
$('.ValueFD#id#').css('text-shadow', valeur);
}
        }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Pièces jointes
Screenshot_20190614-160144_Chrome.jpg
Screenshot_20190614-160144_Chrome.jpg (87.33 Kio) Consulté 2660 fois
Screenshot_20190614-155211_Chrome.jpg
Screenshot_20190614-155211_Chrome.jpg (225.99 Kio) Consulté 2671 fois
Dernière édition par winhex le 14 juin 2019, 16:06, édité 2 fois.

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

Re: [Help] Création widget température

Message par Antoinekl1 » 14 juin 2019, 15:59

winhex a écrit :
14 juin 2019, 15:56
tu peux en faire un binaire icône (info /action) aussi
vu qu'un icon c'est du texte tu aura le même effet ombre et couleurs differentes pour rester sur le même style
param avancé icon_on/off color_on/off taille position top,..
en effet, c'est génial, merci

voici le code d'un info binaire

avec 2 paramètres en plus

icone0, par défau ticon jeedom-garage-ferme
icone 1, par défau ticon jeedom-garage-ouvert

Code : Tout sélectionner

<div onClick="#lien#;" style="padding:0px;width:90px;min-height:75px;" class="cmd #history# container-fluid tooltips cmd-widget" data-type="info" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" title="Valeur du #valueDate#, collectée le #collectDate#">
    <center>
        <span class='cmdName' style="font-weight: bold;font-size: 14px;#hideCmdName#">#name_display#</span>
        <div class='displayDF#id#'></div>
        <div class='boxFD#id#'>
        	<div class="ValueFD#id# #Ombre#">
        		<span class="iconeFD#id#" id="iconeFDValue#id#"></span>
      		</div>
        </div>
    </center>

<style>
	@font-face {
  		font-family: 'Audiowide';
  		font-style: normal;
  		font-weight: 400;
  		src: local('Audiowide Regular'), local('Audiowide-Regular'), url(https://fonts.gstatic.com/s/audiowide/v7/l7gdbjpo0cum0ckerWCdmA_OIxo.woff2) format('woff2');
  		unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}
	@font-face {
  		font-family: 'Audiowide';
  		font-style: normal;
  		font-weight: 400;
  		src: local('Audiowide Regular'), local('Audiowide-Regular'), url(https://fonts.gstatic.com/s/audiowide/v7/l7gdbjpo0cum0ckerWCdlg_O.woff2) format('woff2');
  		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}
  
	div.displayFD#id# {
	    position: relative;
	}

	.boxFD#id# {
	    height: 70px;
	    width: 80px;
		border-radius : 10px;
		text-align: center;
	}
  
	.ValueFD#id# {
	    position: relative;
	    text-align: center;
	    top: -5px;
	    z-index:1;
	    border-radius : 10px;
	  	display: block;
	    overflow: hidden;
	  	width: 80px;
		height : 75px;
	    border-radius : 10px;
	}
  
	.iconeFD#id# {  
	  	font-family: "Audiowide", helvetica, arial, sans-serif;
	  	font-weight: bold;
	    color: #fff;
	    font-size: 4em;
	}

</style>

<script>
	jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#'));
  
    jeedom.cmd.update['#id#'] = function(_options){
      	// Récupération des valeurs des paramètres
		var chxcolor = ('#color#' !='#'+'color#') ? "#color#":"0099ff";
        var chxbord = ('#bord#' !='#'+'bord#') ? "#bord#":"oui";
        var chxombre = ('#ombre#' !='#'+'ombre#') ? "#ombre#":"oui";
      	var chxicone0 = ('#icone0#' !='#'+'icone0#') ? "#icone0#":"icon jeedom-garage-ouvert";
       	var chxicone1 = ('#icone1#' !='#'+'icone1#') ? "#icone1#":"icon jeedom-garage-ferme";  
      
		var valeur = "#state#";
		var intNum = parseInt(valeur);
		var decNum = Math.abs(Math.round((valeur - intNum) * 10));
		
		if (parseInt(valeur) == 1) {
			$(".iconeFD#id#").append("<i class='"+chxicone1+"'></i>");
		} else {
			$(".iconeFD#id#").append("<i class='"+chxicone0+"'></i>");
		}
      
		$('.boxFD#id#').css('background-color', '#'+chxcolor);
      
	    var LightenColor = function(color, percent) {
	  		var num = parseInt(color,16),
				amt = Math.round(2.55 * percent),
				R = (num >> 16) + amt,
				B = (num >> 8 & 0x00FF) + amt,
				G = (num & 0x0000FF) + amt;
			return (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (B<255?B<1?0:B:255)*0x100 + (G<255?G<1?0:G:255)).toString(16).slice(1);
		};  
  

	  	couleur = LightenColor(chxcolor, -30);
		boxColor = LightenColor(chxcolor, -60);
		valeur = '';

		for (var iter = 1; iter < 99; iter++) {
		    couleur = LightenColor(couleur, 0.5);
		    valeur = valeur + '#' + couleur + ' ' + iter + 'px' + ' ' + iter + 'px, ';
		}
		valeur = valeur + '#' + couleur +' 100px 100px';

    	if (chxbord != "non") {
			$('.boxFD#id#').css('box-shadow', '#' +boxColor+' 4px 4px');
		}
  
		if (chxombre != "non") {
			$('.ValueFD#id#').css('text-shadow', valeur);
	  		$('.UniteFD#id#').css('text-shadow', valeur);
		}
    
    }
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

</script>
</div>
Dernière édition par Antoinekl1 le 05 juil. 2019, 07:28, édité 3 fois.
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

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

Re: [Help] Création widget température

Message par winhex » 14 juin 2019, 16:08

j'ai mis le code.

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

Re: [Help] Création widget température

Message par Antoinekl1 » 14 juin 2019, 16:30

winhex a écrit :
14 juin 2019, 16:08
j'ai mis le code.
désolé, j'ai vu trop tard :-)
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6

Micramaniac
Timide
Messages : 216
Inscription : 17 oct. 2017, 11:22

Re: [Help] Création widget température

Message par Micramaniac » 04 juil. 2019, 18:47

Hello le forum,
J'ai à nouveau besoin d'un coup de main pour un widget.

J'ai un widget binaire qui affiche une led verte sur 1 et une led rouge sur 0. Jusque là rien d'extraordinaire.
mon widget ressemble à ça :
Capture.PNG
Capture.PNG (3.75 Kio) Consulté 2558 fois
et je voudrais que le nom de la commande soit aligné avec la led comme ça :
Capture1.png
Capture1.png (3.89 Kio) Consulté 2558 fois
Après avoir essayer de modifier le code dans tous les sens, je n'y arrive pas.

voilà mon code

Code : Tout sélectionner

<link href="https://fonts.googleapis.com/css?family=Work+Sans:300" rel="stylesheet">
<div align=center style="min-width:100px;min-height:60px;margin-right: 3px;margin-left: 3px;padding:0px !important;font-family:Work Sans, Arial; font-weight:normal;color:rgba(255,255,255,1);" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" title="#collectDate#">
	<div class="row">
	  	<div style="font-weight: normal;font-size : 20px;#hideCmdName#">#name_display#</div>
      	<div class="center-block col-xs-12 iconCmd#uid#"></div>
      	</div>
<!-- Ne Pas Supprimer -->
	<script>
      jeedom.cmd.update['#id#'] = function(_options)
        {
          $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate + ' state '+_options.display_value)
          if (_options.display_value == '1' || _options.display_value == 1)
          {
              $('.iconCmd#uid#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.binary.Led/Led_verte.png" />');
          }
          else
          {
              $('.iconCmd#uid#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.binary.Led/Led_rouge.png" />');
          }
    	}
    	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    </script>
</div>
 
Merci d'avance pour votre aide

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

Re: [Help] Création widget température

Message par Salvialf » 04 juil. 2019, 21:16

Micramaniac a écrit :
04 juil. 2019, 18:47
Hello le forum,
J'ai à nouveau besoin d'un coup de main pour un widget.

J'ai un widget binaire qui affiche une led verte sur 1 et une led rouge sur 0. Jusque là rien d'extraordinaire.
mon widget ressemble à ça et je voudrais que le nom de la commande soit aligné avec la led comme ça

Après avoir essayer de modifier le code dans tous les sens, je n'y arrive pas.

Merci d'avance pour votre aide
Salut,

Il faut remplacer les div par des spans... Essaies avec ce code si tu veux et dis-moi (non testé):

Code : Tout sélectionner

<link href="https://fonts.googleapis.com/css?family=Work+Sans:300" rel="stylesheet">
<div align=center style="min-width:100px;min-height:60px;margin-right: 3px;margin-left: 3px;padding:0px !important;font-family:Work Sans, Arial; font-weight:normal;color:rgba(255,255,255,1);" class="cmd #history# tooltips cmd-widget container-fluid" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" title="#collectDate#">
	<div class="row">
      <span class="iconCmd#uid#"></span>
	  	<span style="font-weight: normal;font-size : 20px;#hideCmdName#">#name_display#</span>
      	</div>
<!-- Ne Pas Supprimer -->
	<script>
      jeedom.cmd.update['#id#'] = function(_options)
        {
          $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate + ' state '+_options.display_value)
          if (_options.display_value == '1' || _options.display_value == 1)
          {
              $('.iconCmd#uid#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.binary.Led/Led_verte.png" />');
          }
          else
          {
              $('.iconCmd#uid#').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.binary.Led/Led_rouge.png" />');
          }
    	}
    	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    </script>
</div>
 
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)

Micramaniac
Timide
Messages : 216
Inscription : 17 oct. 2017, 11:22

Re: [Help] Création widget température

Message par Micramaniac » 04 juil. 2019, 22:07

Ca fonctionne!
LE texte est pas tout à fait aligné au voyant mais ça je devrai trouver.
Tu peux m'expliquer la différence entre div et span?

Merci pour l'astuce

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

Re: [Help] Création widget température

Message par Salvialf » 04 juil. 2019, 22:17

Une div est un bloc qui prend toute la largeur alors qu'un span ne prend que la place de ce qu'il contient... sans styles spécifiques les div sont donc l'une au dessus de l'autre alors que les span peuvent être côte à côte s'il y a de la place.

J'ai aussi enlevé des classes bootstrap qui positionnaient l'icône centrée sous le texte.

Si besoin mets une copie d'écran que je vois comment bien aligner l'icône et le texte.
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)

Micramaniac
Timide
Messages : 216
Inscription : 17 oct. 2017, 11:22

Re: [Help] Création widget température

Message par Micramaniac » 04 juil. 2019, 22:21

Merci pour ton aide!
VOilà ce que ça donne.
J'arrive pas à centrer, je ne trouve pas le bon paramètre.
Capture2.PNG
Capture2.PNG (4.26 Kio) Consulté 2523 fois

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

Re: [Help] Création widget température

Message par Salvialf » 04 juil. 2019, 22:27

Je vais essayer de regarder ça demain soir... je veux bien que tu partages les 2 images de ton widget ça me sera utile!
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)

Répondre

Revenir vers « Portail web classique (Desktop) »

Qui est en ligne ?

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