[Help] Création widget température
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
[Help] Création widget température
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 : Après: Merci pour votre aide
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 : Après: Merci pour votre aide
Re: [Help] Création widget température
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
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)
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)
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>
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)
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>
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [Help] Création widget température
Merci Winhex!
Ca m'a la'air top ça!
Ca m'a la'air top ça!
Re: [Help] Création widget température
La vache, la puissance de ce que l'on peut faire, j'utilise pas 5% de tout ça moi
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [Help] Création widget température
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.
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.
Re: [Help] Création widget température
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
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
- Antoinekl1
- Actif
- Messages : 3927
- Inscription : 23 mai 2015, 08:14
Re: [Help] Création widget température
Je me suis permis de modifier un peu le code
cela s'affiche bien dans le design avec l'ombre
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
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6
- Antoinekl1
- Actif
- Messages : 3927
- Inscription : 23 mai 2015, 08:14
Re: [Help] Création widget température
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
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
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [Help] Création widget température
Tu peux mettre le résultat en image stp
- Antoinekl1
- Actif
- Messages : 3927
- Inscription : 23 mai 2015, 08:14
Re: [Help] Création widget température
c'est la même rendu que la code d'origine
voici un bout de mon design, avec la couleur par défaut,
ou avec une couleur passée en paramètre, mais vous pouvez mettre n'importe quel code couleur sans le #
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6
Re: [Help] Création widget température
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)
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 (87.33 Kio) Consulté 2739 fois
-
- Screenshot_20190614-155211_Chrome.jpg (225.99 Kio) Consulté 2750 fois
Dernière édition par winhex le 14 juin 2019, 16:06, édité 2 fois.
- Antoinekl1
- Actif
- Messages : 3927
- Inscription : 23 mai 2015, 08:14
Re: [Help] Création widget température
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
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6
Re: [Help] Création widget température
j'ai mis le code.
- Antoinekl1
- Actif
- Messages : 3927
- Inscription : 23 mai 2015, 08:14
Re: [Help] Création widget température
JEEDOM Smart Ultimate + 40 modules zwave
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6
A vendre ; pack POWER jeedom - Jeedom Mini+ - Console Clazio sous Android 6
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [Help] Création widget température
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.
voilà mon code
Merci d'avance pour votre aide
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.
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>
Re: [Help] Création widget température
Salut,Micramaniac a écrit : ↑04 juil. 2019, 18:47Hello 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
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)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [Help] Création widget température
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
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
Re: [Help] Création widget température
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.
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)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)
-
- Timide
- Messages : 216
- Inscription : 17 oct. 2017, 11:22
Re: [Help] Création widget température
Merci pour ton aide!
VOilà ce que ça donne.
J'arrive pas à centrer, je ne trouve pas le bon paramètre.
VOilà ce que ça donne.
J'arrive pas à centrer, je ne trouve pas le bon paramètre.
Re: [Help] Création widget température
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)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 16 invités