Depuis le passage à Jeedom 4.4, les widgets hygromètre, dioxyde de carbone et bruit de @Supermilk (présentés ici [Partage] Widget station météo) ne fonctionnent plus tout à fait, les infos numériques s’affichant sous les images et non à droite de celles-ci. Quelqu’un a-t-il adapté ces widgets à v4.4 ?
Je cherchais justement une solution à ce problème, nous sommes 2!
Bonjour,
Je ne savais pas qu’on utilisait encore mes adaptations.
Je l’ai fait pour mon Jeedom. Je suis reparti des widgets d’origine pour les adapter.
Là je suis au boulot, mais j’essaie de vous mettre ça à dispo d’ici ce week-end.
En espérant que ça aille sur vos Jeedom.
2 « J'aime »
Bonsoir,
est-ce que ces versions fonctionnes ?
hygrometer
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!--
Jeedom Compatibility: v4.4
Version: Dashboard/Mobile
Type: Info
SubType: Numeric
Name: cmd.info.numeric.hygrometer.html
Comment: An hygrometer image with a current value (+stats).
Parameters:
- largeurDashboardPx - Resize the dashboard widget image to the real width - default 20px - [range 20-29px]
- largeurMobilePx - Resize the mobile widget image to the real width - default 20px - [range 20-29px]
Date: 2020-04-13
Source: https://github.com/Heliospeed/jeedom_widget_v4/
Remarks: The template and the images have been modified and come from these repositories:
Template : https://github.com/jeedom/core/blob/V4-stable/core/template/dashboard/cmd.info.numeric.tile.html
Images : widget v3 Dany21000
Last update : 2024/04/17 (Phpvarious)
https://community.jeedom.com/t/adaptation-des-widgets-hygrometre-co2-et-bruit-de-superlink-a-jeedom-4-4/124383
-->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm-#uid#">
<div class="pull-left">
<span id="hygro#id#"></span>
</div>
<div class="pull-right">
<div>
<span class="pull-right unitValue">#unite#</span>
<span class="pull-right state currentValue"></span>
</div>
<div class="statsPart1 #hide_history#">
<div class="stats"><span title='Min' class="tooltips">Min : #minHistoryValue#</span></div>
<div class="stats"><span title='Max' class="tooltips">Max : #maxHistoryValue#</span></div>
<div class="stats"><span title='Moyenne' class="tooltips">Moy : #averageHistoryValue#</span></div>
</div>
</div>
</div>
<div class="#hide_history#">
<div class="stats"><span title='Tendance' class='tooltips'>Tendance : <i class="#tendance#"></i></span></div>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
var imgNumber = '';
var taux = parseFloat(_options.value);
var hideHistory = ('#hide_history#'!='#'+'hide_history#') ? "#hide_history#" : "off";
var version = ('#version#'!='#'+'version#') ? "#version#" : "";
var largeurPx = "20";
if (version === 'dashboard'){
largeurPx = ('#largeurDashboardPx#'!='#'+'largeurDashboardPx#') ? "#largeurDashboardPx#" : "20";
}else{
largeurPx = ('#largeurMobilePx#'!='#'+'largeurMobilePx#') ? "#largeurMobilePx#" : "20";
}
// borne Min et max largeur
if (largeurPx<20){
largeurPx = 20;
}else if (largeurPx>29){
largeurPx = 29;
}
var largeurWidget = 60 + parseInt(largeurPx);
largeurPx = largeurPx + 'px';
var hasCommandIcon = cmd.find('.title div.cmdName i').is('i');
var hasCommandName = cmd.find('.title div.cmdName').text().length > 0;
var pos =10;
if (hasCommandName || hasCommandIcon){
cmd.find('.title').css('cssText', 'padding-bottom: ' + pos + 'px !important;');
pos=0;
}
if (taux >= 0 && taux < 10){
imgNumber = '00';
}else if (taux >= 10 && taux < 20) {
imgNumber = '01';
}else if (taux >= 20 && taux < 30) {
imgNumber = '02';
}else if (taux >= 30 && taux < 40) {
imgNumber = '03';
}else if (taux >= 40 && taux < 50) {
imgNumber = '04';
}else if (taux >= 50 && taux < 60) {
imgNumber = '05';
}else if (taux >= 60 && taux < 70) {
imgNumber = '06';
}else if (taux >= 70 && taux < 80) {
imgNumber = '07';
}else if (taux >= 80 && taux < 90) {
imgNumber = '08';
}else if (taux >= 90 && taux < 100) {
imgNumber = '09';
}else{
imgNumber = '10';
}
cmd.find('#hygro#id#').empty().append('<img class="hygroImg" src="data/customTemplates/dashboard/cmd.info.numeric.hygrometer/hygrometer' + imgNumber + '.png"></img>');
cmd.find('.hygroImg').css('cssText', 'width:' + largeurPx + ' !important;');
var imgHeight = document.querySelector(".hygroImg").clientHeight;
var imgMaxHeight = 93;
var imgMinHeight = 70;
//cmd.find('div.content-sm-#uid#').css('cssText','height: ' + imgMinHeight +'px !important;min-height: ' + imgMinHeight +'px !important; max-height: ' + imgMaxHeight + 'px !important;')
if (imgHeight>imgMinHeight){
pos = (imgHeight - imgMinHeight)/2;
}
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(_options.display_value);
var positionTop = 0;
if (hideHistory == 'hidden'){
var positionTop = 25 + pos;
}
else{
cmd.find('div.statsPart1').css('cssText', 'padding-top: ' + (20 + pos) + 'px !important;text-align: left !important');
var positionTop = pos;
}
cmd.find('.stats').css('line-height', '10px');
var cssCurrentValue = 'position: relative !important;top: ' + positionTop + 'px !important;';
cmd.find('.unitValue').css('cssText', cssCurrentValue );
cmd.find('.state').css('cssText', cssCurrentValue + 'font-size: 15px !important;');
cmd.find('div span.tooltips').css('cssText', 'font-size: 10px !important;font-weight: normal !important;');
cmd.css("padding-bottom", "15px");
//cmd.css("min-width", largeurWidget + "px");
}
jeedom.cmd.update['#id#']({value: '#value#', display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
<style>
.content-sm-#uid# {
height: 70px !important;
min-height: 70px !important;
max-height: 93px !important;
display: table-cell;
vertical-align: middle !important;
width: 100%;
}
.cmd[data-cmd_id='#id#'] .state {
line-height: 12px !important;
}
.cmd[data-cmd_id='#id#'] .stats {
line-height: 10px;
}
</style>
</div>
sonometre
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!--
Jeedom Compatibility: v4.4
Version: Dashboard/Mobile
Type: Info
SubType: Numeric
Name: cmd.info.numeric.sonometre.html
Comment: An sonometre image with a current value (+stats).
Parameters:
- largeurDashboardPx - Resize the dashboard widget image to the real width - default 20px - [range 20-29px]
- largeurMobilePx - Resize the mobile widget image to the real width - default 20px - [range 20-29px]
Date: 2020-04-13
Source: https://github.com/Heliospeed/jeedom_widget_v4/
Remarks: The template and the images have been modified and come from these repositories:
Template : https://github.com/jeedom/core/blob/V4-stable/core/template/dashboard/cmd.info.numeric.tile.html
Images : widget v3 Dany21000
Last update : 2024/04/17 (Phpvarious)
https://community.jeedom.com/t/adaptation-des-widgets-hygrometre-co2-et-bruit-de-superlink-a-jeedom-4-4/124383
-->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm-#uid#">
<div class="pull-left">
<span id="son#id#"></span>
</div>
<div class="pull-right">
<div>
<span class="pull-right unitValue">#unite#</span>
<span class="pull-right state currentValue"></span>
</div>
<div class="statsPart1 #hide_history#">
<div class="stats"><span title='Min' class='tooltips'>Min : #minHistoryValue#</span></div>
<div class="stats"><span title='Max' class='tooltips'>Max : #maxHistoryValue#</span></div>
<div class="stats"><span title='Moyenne' class='tooltips'>Moy : #averageHistoryValue#</span></div>
</div>
</div>
</div>
<div class="#hide_history#">
<div class="stats"><span title='Tendance' class='tooltips'>Tendance : <i class="#tendance#"></i></span></div>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
var imgNumber = '';
var taux = parseFloat(_options.display_value);
var hideHistory = ('#hide_history#'!='#'+'hide_history#') ? "#hide_history#" : "off";
var version = ('#version#'!='#'+'version#') ? "#version#" : "";
var largeurPx = "20";
if (version === 'dashboard'){
largeurPx = ('#largeurDashboardPx#'!='#'+'largeurDashboardPx#') ? "#largeurDashboardPx#" : "20";
}else{
largeurPx = ('#largeurMobilePx#'!='#'+'largeurMobilePx#') ? "#largeurMobilePx#" : "20";
}
// borne Min et max largeur
if (largeurPx<20){
largeurPx = 20;
}else if (largeurPx>29){
largeurPx = 29;
}
var largeurWidget = 65 + parseInt(largeurPx);
largeurPx = largeurPx + 'px';
var hasCommandIcon = cmd.find('.title div.cmdName i').is('i');
var hasCommandName = cmd.find('.title div.cmdName').text().length > 0;
var pos =10;
if (hasCommandName || hasCommandIcon){
cmd.find('.title').css('cssText', 'padding-bottom: ' + pos + 'px !important;');
pos=0;
}
if (taux >= 0 && taux < 37){
imgNumber = '00';
}else if (taux >= 37 && taux < 60) {
imgNumber = '01';
}else if (taux >= 60 && taux < 80) {
imgNumber = '02';
}else if (taux >= 80 && taux < 95) {
imgNumber = '03';
}else if (taux >= 95 && taux < 105) {
imgNumber = '04';
}else{
imgNumber = '05';
}
cmd.find('#son#id#').empty().append('<img class="sonImg" src="data/customTemplates/dashboard/cmd.info.numeric.sonometre/sonometre' + imgNumber + '.png"></img>');
cmd.find('.sonImg').css('cssText', 'width:' + largeurPx + ' !important;');
var imgHeight = document.querySelector(".sonImg").clientHeight;
var imgMaxHeight = 93;
var imgMinHeight = 70;
//cmd.find('div.content-sm').css('cssText','height: ' + imgMinHeight +'px !important;min-height: ' + imgMinHeight +'px !important; max-height: ' + imgMaxHeight + 'px !important;')
if (imgHeight>imgMinHeight){
pos = (imgHeight - imgMinHeight)/2;
}
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(_options.display_value);
var positionTop = 0;
if (hideHistory == 'hidden'){
var positionTop = 25 + pos;
}
else{
cmd.find('div.statsPart1').css('cssText', 'padding-top: ' + (20 + pos) + 'px !important;text-align: left !important');
var positionTop = pos;
}
cmd.find('.stats').css('line-height', '10px');
var cssCurrentValue = 'position: relative !important;top: ' + positionTop + 'px !important;';
cmd.find('.unitValue').css('cssText', cssCurrentValue );
cmd.find('.state').css('cssText', cssCurrentValue + 'font-size: 15px !important;');
cmd.find('div span.tooltips').css('cssText', 'font-size: 10px !important;font-weight: normal !important;');
cmd.css("padding-bottom", "15px");
//cmd.css("width", largeurWidget + "px");
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
<style>
.content-sm-#uid# {
height: 70px !important;
min-height: 70px !important;
max-height: 93px !important;
display: table-cell;
vertical-align: middle !important;
width: 100%;
}
.cmd[data-cmd_id='#id#'] .state {
line-height: 12px !important;
}
.cmd[data-cmd_id='#id#'] .stats {
line-height: 10px;
}
</style>
</div>
dioxydecarbone
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!--
Jeedom Compatibility: v4.4
Version: Dashboard/Mobile
Type: Info
SubType: Numeric
Name: cmd.info.numeric.dioxydecarbone.html
Comment: An dioxydecarbone image with a current value (+stats).
Parameters:
- largeurDashboardPx - Resize the dashboard widget image to the real width - default 20px - [range 20-29px]
- largeurMobilePx - Resize the mobile widget image to the real width - default 20px - [range 20-29px]
Date: 2020-04-13
Source: https://github.com/Heliospeed/jeedom_widget_v4/
Remarks: The template and the images have been modified and come from these repositories:
Template : https://github.com/jeedom/core/blob/V4-stable/core/template/dashboard/cmd.info.numeric.tile.html
Images : widget v3 Dany21000
Last update : 2024/04/17 (Phpvarious)
https://community.jeedom.com/t/adaptation-des-widgets-hygrometre-co2-et-bruit-de-superlink-a-jeedom-4-4/124383
-->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm-#uid#">
<div class="pull-left">
<span id="co2#id#"></span>
</div>
<div class="pull-right">
<div>
<span class="pull-right unitValue">#unite#</span>
<span class="pull-right state currentValue"></span>
</div>
<div class="statsPart1 #hide_history#">
<div class="stats"><span title='Min' class='tooltips'>Min : #minHistoryValue#</span></div>
<div class="stats"><span title='Max' class='tooltips'>Max : #maxHistoryValue#</span></div>
<div class="stats"><span title='Moyenne' class='tooltips'>Moy : #averageHistoryValue#</span></div>
</div>
</div>
</div>
<div class="#hide_history#">
<div class="stats"><span title='Tendance' class='tooltips'>Tendance : <i class="#tendance#"></i></span></div>
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
var imgNumber = '';
var taux = parseFloat(_options.display_value);
var hideHistory = ('#hide_history#'!='#'+'hide_history#') ? "#hide_history#" : "off";
var version = ('#version#'!='#'+'version#') ? "#version#" : "";
var largeurPx = "20";
if (version === 'dashboard'){
largeurPx = ('#largeurDashboardPx#'!='#'+'largeurDashboardPx#') ? "#largeurDashboardPx#" : "20";
}else{
largeurPx = ('#largeurMobilePx#'!='#'+'largeurMobilePx#') ? "#largeurMobilePx#" : "20";
}
// borne Min et max largeur
if (largeurPx<20){
largeurPx = 20;
}else if (largeurPx>29){
largeurPx = 29;
}
var largeurWidget = 95 + parseInt(largeurPx);
largeurPx = largeurPx + 'px';
var hasCommandIcon = cmd.find('.title div.cmdName i').is('i');
var hasCommandName = cmd.find('.title div.cmdName').text().length > 0;
var pos =10;
if (hasCommandName || hasCommandIcon){
cmd.find('.title').css('cssText', 'padding-bottom: ' + pos + 'px !important;');
pos=0;
}
if (taux >= 0 && taux < 500){
imgNumber = '00';
}else if (taux >= 500 && taux < 1000) {
imgNumber = '01';
}else if (taux >= 1000 && taux < 1500) {
imgNumber = '02';
}else if (taux >= 1500 && taux < 2000) {
imgNumber = '03';
}else if (taux >= 2000 && taux < 2500) {
imgNumber = '04';
}else{
imgNumber = '05';
}
cmd.find('#co2#id#').empty().append('<img class="co2Img" src="data/customTemplates/dashboard/cmd.info.numeric.dioxydecarbone/dioxydecarbone' + imgNumber + '.png"></img>');
cmd.find('.co2Img').css('cssText', 'width:' + largeurPx + ' !important;');
var imgHeight = document.querySelector(".co2Img").clientHeight;
var imgMaxHeight = 93;
var imgMinHeight = 70;
//cmd.find('div.content-sm').css('cssText','height: ' + imgMinHeight +'px !important;min-height: ' + imgMinHeight +'px !important; max-height: ' + imgMaxHeight + 'px !important;')
if (imgHeight>imgMinHeight){
pos = (imgHeight - imgMinHeight)/2;
}
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(_options.display_value);
var positionTop = 0;
if (hideHistory == 'hidden'){
var positionTop = 25 + pos;
}
else{
cmd.find('div.statsPart1').css('cssText', 'padding-top: ' + (20 + pos) + 'px !important;text-align: left !important');
var positionTop = pos;
}
cmd.find('.stats').css('line-height', '10px');
var cssCurrentValue = 'position: relative !important;top: ' + positionTop + 'px !important;';
cmd.find('.unitValue').css('cssText', cssCurrentValue );
cmd.find('.state').css('cssText', cssCurrentValue + 'font-size: 15px !important;');
cmd.find('div span.tooltips').css('cssText', 'font-size: 10px !important;font-weight: normal !important;');
cmd.css("padding-bottom", "15px");
//cmd.css("width", largeurWidget + "px");
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
<style>
.content-sm-#uid# {
height: 70px !important;
min-height: 70px !important;
max-height: 93px !important;
display: table-cell;
vertical-align: middle !important;
width: 100%;
}
.cmd[data-cmd_id='#id#'] .state {
line-height: 12px !important;
}
.cmd[data-cmd_id='#id#'] .stats {
line-height: 10px;
}
</style>
</div>
Bonjour,
Voilà les versions adaptées et qui fonctionnent sur ma Jeedom Atlas en 4.4.3.
Je suis reparti des versions disponibles ici (mais adaptées car il y avait des décalages) :
GitHub - Heliospeed/jeedom_widget_v4: My Jeedom widgets
Attention, avec ces nouvelles versions, il faut déplacer les images dans le répertoire des images html/data/img (celui utilisé par les widgets standards).
thermometer
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!--
Jeedom Compatibility: v4.4
Version: Dashboard/Mobile
Type: Info
SubType: Numeric
Name: cmd.info.numeric.thermometer.html
Comment: A thermometer image with a current value (+stats).
Parameters:
- largeurDashboardPx - Resize the dashboard widget image to the real width - default 20px - [range 20-29px]
- largeurMobilePx - Resize the mobile widget image to the real width - default 20px - [range 20-29px]
Date: 2023-01-06
Source: https://github.com/Heliospeed/jeedom_widget_v4/
Remarks: The template and the images have been modified and come from these repositories:
Template : https://github.com/jeedom/core/blob/V4-stable/core/template/dashboard/cmd.info.numeric.tile.html
Images : https://github.com/ajja17/thermometreIMG/tree/master/cmd.info.numeric.thermometreIMG2
-->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm">
<div class="pull-left img">
<span id="thermo#id#"></span>
</div>
<div class="pull-right val">
<div>
<span class="pull-right unitValue">#unite#</span>
<span class="pull-right state currentValue"></span>
</div>
<div class="statsPart1 #hide_history#">
<div class="stats"><span title='Min' class='tooltips'>Min : #minHistoryValue#</span></div>
<div class="stats"><span title='Max' class='tooltips'>Max : #maxHistoryValue#</span></div>
<div class="stats"><span title='Moyenne' class='tooltips'>Moy : #averageHistoryValue#</span></div>
</div>
</div>
</div>
<div class="#hide_history#">
<div class="stats"><span title='Tendance' class='tooltips'>Tendance : <i class="#tendance#"></i></span></div>
</div>
<script>
function getJeedomVersion(){
return $('#bt_jeedomAbout').text().split(' ')[2];
}
function isEarlierVersion(compareVersion){
var jeedomVesion = getJeedomVersion();
if (jeedomVesion === compareVersion) {
return true;
}
var tabJeedomVesion = jeedomVesion.split(".");
var tabCompareVersion = compareVersion.split(".");
var minLen = Math.min(tabJeedomVesion.length, tabCompareVersion.length);
for (var i = 0; i < minLen; i++) {
if (parseInt(tabJeedomVesion[i]) > parseInt(tabCompareVersion[i])) {
return true;
}
if (parseInt(tabJeedomVesion[i]) < parseInt(tabCompareVersion[i])) {
return false;
}
}
return true;
}
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
var imgNumber = '';
var temperature = (parseFloat(_options.display_value).toFixed(1) - parseInt(_options.display_value)) === 0 ? parseInt(_options.display_value) : parseFloat(_options.display_value).toFixed(1);
var hideHistory = ('#hide_history#'!='#'+'hide_history#') ? "#hide_history#" : "off";
var version = ('#version#'!='#'+'version#') ? "#version#" : "";
var largeurPx = "20";
if (version === 'dashboard'){
largeurPx = ('#largeurDashboardPx#'!='#'+'largeurDashboardPx#') ? "#largeurDashboardPx#" : "20";
}else{
largeurPx = ('#largeurMobilePx#'!='#'+'largeurMobilePx#') ? "#largeurMobilePx#" : "20";
}
// borne Min et max largeur
if (largeurPx<20){
largeurPx = 20;
}else if (largeurPx>29){
largeurPx = 29;
}
var largeurWidget = 80 + parseInt(largeurPx);
var hauteurPx = (largeurPx * 64 / 20);
largeurPx = largeurPx + 'px';
var hasCommandIcon = cmd.find('.title div.cmdName i').is('i');
var hasCommandName = cmd.find('.title div.cmdName').text().length > 0;
var pos =10;
if (hasCommandName || hasCommandIcon){
cmd.find('.title').css('cssText', 'padding-bottom: ' + pos + 'px !important;');
pos=0;
}
if (temperature <=0){
imgNumber = '00';
}else if (temperature > 0 && temperature <= 5) {
imgNumber = '01';
}else if (temperature > 5 && temperature <= 10) {
imgNumber = '02';
}else if (temperature > 10 && temperature <= 13) {
imgNumber = '03';
}else if (temperature > 13 && temperature <= 16) {
imgNumber = '04';
}else if (temperature > 16 && temperature <= 18) {
imgNumber = '05';
}else if (temperature > 18 && temperature <= 20) {
imgNumber = '06';
}else if (temperature > 20 && temperature <= 22) {
imgNumber = '07';
}else if (temperature > 22 && temperature <= 24) {
imgNumber = '08';
}else if (temperature > 24 && temperature <= 26) {
imgNumber = '09';
}else if (temperature > 26 && temperature <= 28) {
imgNumber = '10';
}else if (temperature > 28 && temperature <= 34) {
imgNumber = '11';
}else{
imgNumber = '12';
}
cmd.find('#thermo#id#').empty().append('<img class="thermoImg" src="data/img/thermometer' + imgNumber + '.png"></img>');
cmd.find('.thermoImg').css('cssText', 'width:' + largeurPx + ' !important;');
var imgMaxHeight = 93;
var imgMinHeight = 70;
cmd.find('div.content-sm').css('cssText','height: ' + imgMinHeight +'px !important;min-height: ' + imgMinHeight +'px !important; max-height: ' + imgMaxHeight + 'px !important;display: table-cell !important')
if (hauteurPx>imgMinHeight){
pos = (hauteurPx - imgMinHeight)/2;
}
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(temperature);
var positionTop = 0;
if (hideHistory == 'hidden'){
var positionTop = 25 + pos;
}
else{
cmd.find('div.statsPart1').css('cssText', 'padding-top: ' + (20 + pos) + 'px !important;text-align: left !important');
var positionTop = pos;
}
cmd.find('.stats').css('line-height', '10px');
var cssCurrentValue = 'position: relative !important;top: ' + positionTop + 'px !important;';
var cssCurrentValueUnit = 'position: relative !important;top: ' + (positionTop+5) + 'px !important;';
var widthValue = 59;
if ('#version#' === 'dashboard') {
if (!isEarlierVersion('4.4.0')){
var cssCurrentValueUnit = cssCurrentValue;
var widthValue = 59;
}
}
cmd.find('.unitValue').css('cssText', cssCurrentValueUnit );
cmd.find('.state').css('cssText', cssCurrentValue + 'font-size: 15px !important;');
cmd.find('div span.tooltips').css('cssText', 'word-break:normal;font-size: 10px !important;font-weight: normal !important;');
cmd.css("padding-bottom", "15px");
cmd.css("width", largeurWidget + "px");
cmd.find('.img').css('height', hauteurPx + 'px');
cmd.find('.img').css('width', largeurPx);
cmd.find('.val').css('height', hauteurPx + 'px');
cmd.find('.val').css('width', widthValue + 'px');
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
sonometre
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!--
Jeedom Compatibility: v4.4
Version: Dashboard/Mobile
Type: Info
SubType: Numeric
Name: cmd.info.numeric.sonometre.html
Comment: An sonometre image with a current value (+stats).
Parameters:
- largeurDashboardPx - Resize the dashboard widget image to the real width - default 20px - [range 20-29px]
- largeurMobilePx - Resize the mobile widget image to the real width - default 20px - [range 20-29px]
Date: 2023-01-06
Source: https://github.com/Heliospeed/jeedom_widget_v4/
Remarks: The template and the images have been modified and come from these repositories:
Template : https://github.com/jeedom/core/blob/V4-stable/core/template/dashboard/cmd.info.numeric.tile.html
Images : widget v3 Dany21000
-->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm">
<div class="pull-left img">
<span id="son#id#"></span>
</div>
<div class="pull-right val">
<div>
<span class="pull-right unitValue">#unite#</span>
<span class="pull-right state currentValue"></span>
</div>
<div class="statsPart1 #hide_history#">
<div class="stats"><span title='Min' class='tooltips'>Min : #minHistoryValue#</span></div>
<div class="stats"><span title='Max' class='tooltips'>Max : #maxHistoryValue#</span></div>
<div class="stats"><span title='Moyenne' class='tooltips'>Moy : #averageHistoryValue#</span></div>
</div>
</div>
</div>
<div class="#hide_history#">
<div class="stats"><span title='Tendance' class='tooltips'>Tendance : <i class="#tendance#"></i></span></div>
</div>
<script>
function getJeedomVersion(){
return $('#bt_jeedomAbout').text().split(' ')[2];
}
function isEarlierVersion(compareVersion){
var jeedomVesion = getJeedomVersion();
if (jeedomVesion === compareVersion) {
return true;
}
var tabJeedomVesion = jeedomVesion.split(".");
var tabCompareVersion = compareVersion.split(".");
var minLen = Math.min(tabJeedomVesion.length, tabCompareVersion.length);
for (var i = 0; i < minLen; i++) {
if (parseInt(tabJeedomVesion[i]) > parseInt(tabCompareVersion[i])) {
return true;
}
if (parseInt(tabJeedomVesion[i]) < parseInt(tabCompareVersion[i])) {
return false;
}
}
return true;
}
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
var imgNumber = '';
var taux = (parseFloat(_options.display_value).toFixed(1) - parseInt(_options.display_value)) === 0 ? parseInt(_options.display_value) : parseFloat(_options.display_value).toFixed(1);
var hideHistory = ('#hide_history#'!='#'+'hide_history#') ? "#hide_history#" : "off";
var version = ('#version#'!='#'+'version#') ? "#version#" : "";
var largeurPx = "20";
if (version === 'dashboard'){
largeurPx = ('#largeurDashboardPx#'!='#'+'largeurDashboardPx#') ? "#largeurDashboardPx#" : "20";
}else{
largeurPx = ('#largeurMobilePx#'!='#'+'largeurMobilePx#') ? "#largeurMobilePx#" : "20";
}
// borne Min et max largeur
if (largeurPx<20){
largeurPx = 20;
}else if (largeurPx>29){
largeurPx = 29;
}
var largeurWidget = 90 + parseInt(largeurPx);
var hauteurPx = (largeurPx * 64 / 20);
largeurPx = largeurPx + 'px';
var hasCommandIcon = cmd.find('.title div.cmdName i').is('i');
var hasCommandName = cmd.find('.title div.cmdName').text().length > 0;
var pos =10;
if (hasCommandName || hasCommandIcon){
cmd.find('.title').css('cssText', 'padding-bottom: ' + pos + 'px !important;');
pos=0;
}
if (taux >= 0 && taux < 500){
imgNumber = '00';
}else if (taux >= 500 && taux < 1000) {
imgNumber = '01';
}else if (taux >= 1000 && taux < 1500) {
imgNumber = '02';
}else if (taux >= 1500 && taux < 2000) {
imgNumber = '03';
}else if (taux >= 2000 && taux < 2500) {
imgNumber = '04';
}else{
imgNumber = '05';
}
cmd.find('#son#id#').empty().append('<img class="sonImg" src="data/img/sonometre' + imgNumber + '.png"></img>');
cmd.find('.sonImg').css('cssText', 'width:' + largeurPx + ' !important;');
var imgMaxHeight = 93;
var imgMinHeight = 70;
cmd.find('div.content-sm').css('cssText','height: ' + imgMinHeight +'px !important;min-height: ' + imgMinHeight +'px !important; max-height: ' + imgMaxHeight + 'px !important;display: table-cell !important')
if (hauteurPx>imgMinHeight){
pos = (hauteurPx - imgMinHeight)/2;
}
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(taux);
var positionTop = 0;
if (hideHistory == 'hidden'){
var positionTop = 25 + pos;
}
else{
cmd.find('div.statsPart1').css('cssText', 'padding-top: ' + (20 + pos) + 'px !important;text-align: left !important');
var positionTop = pos;
}
cmd.find('.stats').css('line-height', '10px');
var cssCurrentValue = 'position: relative !important;top: ' + positionTop + 'px !important;';
var cssCurrentValueUnit = 'position: relative !important;top: ' + (positionTop+5) + 'px !important;';
var widthValue = 75;
if ('#version#' === 'dashboard') {
if (!isEarlierVersion('4.4.0')){
var cssCurrentValueUnit = cssCurrentValue;
var widthValue = 59;
}
}
cmd.find('.unitValue').css('cssText', cssCurrentValueUnit );
cmd.find('.state').css('cssText', cssCurrentValue + 'font-size: 15px !important;');
cmd.find('div span.tooltips').css('cssText', 'word-break:normal;font-size: 10px !important;font-weight: normal !important;');
cmd.css("padding-bottom", "15px");
cmd.css("width", largeurWidget + "px");
cmd.find('.img').css('height', hauteurPx + 'px');
cmd.find('.img').css('width', largeurPx);
cmd.find('.val').css('height', hauteurPx + 'px');
cmd.find('.val').css('width', widthValue + 'px');
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
hygrometer
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!--
Jeedom Compatibility: v4.4
Version: Dashboard/Mobile
Type: Info
SubType: Numeric
Name: cmd.info.numeric.hygrometer.html
Comment: An hygrometer image with a current value (+stats).
Parameters:
- largeurDashboardPx - Resize the dashboard widget image to the real width - default 20px - [range 20-29px]
- largeurMobilePx - Resize the mobile widget image to the real width - default 20px - [range 20-29px]
Date: 2023-01-06
Source: https://github.com/Heliospeed/jeedom_widget_v4/
Remarks: The template and the images have been modified and come from these repositories:
Template : https://github.com/jeedom/core/blob/V4-stable/core/template/dashboard/cmd.info.numeric.tile.html
Images : widget v3 Dany21000
-->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm">
<div class="pull-left img">
<span id="hygro#id#"></span>
</div>
<div class="pull-right val">
<div>
<span class="pull-right unitValue">#unite#</span>
<span class="pull-right state currentValue"></span>
</div>
<div class="statsPart1 #hide_history#">
<div class="stats"><span title='Min' class='tooltips'>Min : #minHistoryValue#</span></div>
<div class="stats"><span title='Max' class='tooltips'>Max : #maxHistoryValue#</span></div>
<div class="stats"><span title='Moyenne' class='tooltips'>Moy : #averageHistoryValue#</span></div>
</div>
</div>
</div>
<div class="#hide_history#">
<div class="stats"><span title='Tendance' class='tooltips'>Tendance : <i class="#tendance#"></i></span></div>
</div>
<script>
function getJeedomVersion(){
return $('#bt_jeedomAbout').text().split(' ')[2];
}
function isEarlierVersion(compareVersion){
var jeedomVesion = getJeedomVersion();
if (jeedomVesion === compareVersion) {
return true;
}
var tabJeedomVesion = jeedomVesion.split(".");
var tabCompareVersion = compareVersion.split(".");
var minLen = Math.min(tabJeedomVesion.length, tabCompareVersion.length);
for (var i = 0; i < minLen; i++) {
if (parseInt(tabJeedomVesion[i]) > parseInt(tabCompareVersion[i])) {
return true;
}
if (parseInt(tabJeedomVesion[i]) < parseInt(tabCompareVersion[i])) {
return false;
}
}
return true;
}
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
var imgNumber = '';
var taux = (parseFloat(_options.display_value).toFixed(1) - parseInt(_options.display_value)) === 0 ? parseInt(_options.display_value) : parseFloat(_options.display_value).toFixed(1);
var hideHistory = ('#hide_history#'!='#'+'hide_history#') ? "#hide_history#" : "off";
var version = ('#version#'!='#'+'version#') ? "#version#" : "";
var largeurPx = "20";
if (version === 'dashboard'){
largeurPx = ('#largeurDashboardPx#'!='#'+'largeurDashboardPx#') ? "#largeurDashboardPx#" : "20";
}else{
largeurPx = ('#largeurMobilePx#'!='#'+'largeurMobilePx#') ? "#largeurMobilePx#" : "20";
}
// borne Min et max largeur
if (largeurPx<20){
largeurPx = 20;
}else if (largeurPx>29){
largeurPx = 29;
}
var largeurWidget = 80 + parseInt(largeurPx);
var hauteurPx = (largeurPx * 64 / 20);
largeurPx = largeurPx + 'px';
var hasCommandIcon = cmd.find('.title div.cmdName i').is('i');
var hasCommandName = cmd.find('.title div.cmdName').text().length > 0;
var pos =10;
if (hasCommandName || hasCommandIcon){
cmd.find('.title').css('cssText', 'padding-bottom: ' + pos + 'px !important;');
pos=0;
}
if (taux >= 0 && taux < 10){
imgNumber = '00';
}else if (taux >= 10 && taux < 20) {
imgNumber = '01';
}else if (taux >= 20 && taux < 30) {
imgNumber = '02';
}else if (taux >= 30 && taux < 40) {
imgNumber = '03';
}else if (taux >= 40 && taux < 50) {
imgNumber = '04';
}else if (taux >= 50 && taux < 60) {
imgNumber = '05';
}else if (taux >= 60 && taux < 70) {
imgNumber = '06';
}else if (taux >= 70 && taux < 80) {
imgNumber = '07';
}else if (taux >= 80 && taux < 90) {
imgNumber = '08';
}else if (taux >= 90 && taux < 100) {
imgNumber = '09';
}else{
imgNumber = '10';
}
cmd.find('#hygro#id#').empty().append('<img class="hygroImg" src="data/img/hygrometer' + imgNumber + '.png"></img>');
cmd.find('.hygroImg').css('cssText', 'width:' + largeurPx + ' !important;');
var imgMaxHeight = 93;
var imgMinHeight = 70;
cmd.find('div.content-sm').css('cssText','height: ' + imgMinHeight +'px !important;min-height: ' + imgMinHeight +'px !important; max-height: ' + imgMaxHeight + 'px !important;display: table-cell !important')
if (hauteurPx>imgMinHeight){
pos = (hauteurPx - imgMinHeight)/2;
}
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(taux);
var positionTop = 0;
if (hideHistory == 'hidden'){
var positionTop = 25 + pos;
}
else{
cmd.find('div.statsPart1').css('cssText', 'padding-top: ' + (20 + pos) + 'px !important;text-align: left !important');
var positionTop = pos;
}
cmd.find('.stats').css('line-height', '10px');
var cssCurrentValue = 'position: relative !important;top: ' + positionTop + 'px !important;';
var cssCurrentValueUnit = 'position: relative !important;top: ' + (positionTop+5) + 'px !important;';
var widthValue = 58;
if ('#version#' === 'dashboard') {
if (!isEarlierVersion('4.4.0')){
var cssCurrentValueUnit = cssCurrentValue;
var widthValue = 59;
}
}
cmd.find('.unitValue').css('cssText', cssCurrentValueUnit );
cmd.find('.state').css('cssText', cssCurrentValue + 'font-size: 15px !important;');
cmd.find('div span.tooltips').css('cssText', 'word-break:normal;font-size: 10px !important;font-weight: normal !important;');
cmd.css("padding-bottom", "15px");
cmd.css("width", largeurWidget + "px");
cmd.find('.img').css('height', hauteurPx + 'px');
cmd.find('.img').css('width', largeurPx);
cmd.find('.val').css('height', hauteurPx + 'px');
cmd.find('.val').css('width', widthValue + 'px');
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
dioxydecarbone
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!--
Jeedom Compatibility: v4.4
Version: Dashboard/Mobile
Type: Info
SubType: Numeric
Name: cmd.info.numeric.dioxydecarbone.html
Comment: An dioxydecarbone image with a current value (+stats).
Parameters:
- largeurDashboardPx - Resize the dashboard widget image to the real width - default 20px - [range 20-29px]
- largeurMobilePx - Resize the mobile widget image to the real width - default 20px - [range 20-29px]
Date: 2023-01-06
Source: https://github.com/Heliospeed/jeedom_widget_v4/
Remarks: The template and the images have been modified and come from these repositories:
Template : https://github.com/jeedom/core/blob/V4-stable/core/template/dashboard/cmd.info.numeric.tile.html
Images : widget v3 Dany21000
-->
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="content-sm">
<div class="pull-left img">
<span id="co2#id#"></span>
</div>
<div class="pull-right val">
<div>
<span class="pull-right unitValue">#unite#</span>
<span class="pull-right state currentValue"></span>
</div>
<div class="statsPart1 #hide_history#">
<div class="stats"><span title='Min' class='tooltips'>Min : #minHistoryValue#</span></div>
<div class="stats"><span title='Max' class='tooltips'>Max : #maxHistoryValue#</span></div>
<div class="stats"><span title='Moyenne' class='tooltips'>Moy : #averageHistoryValue#</span></div>
</div>
</div>
</div>
<div class="#hide_history#">
<div class="stats"><span title='Tendance' class='tooltips'>Tendance : <i class="#tendance#"></i></span></div>
</div>
<script>
function getJeedomVersion(){
return $('#bt_jeedomAbout').text().split(' ')[2];
}
function isEarlierVersion(compareVersion){
var jeedomVesion = getJeedomVersion();
if (jeedomVesion === compareVersion) {
return true;
}
var tabJeedomVesion = jeedomVesion.split(".");
var tabCompareVersion = compareVersion.split(".");
var minLen = Math.min(tabJeedomVesion.length, tabCompareVersion.length);
for (var i = 0; i < minLen; i++) {
if (parseInt(tabJeedomVesion[i]) > parseInt(tabCompareVersion[i])) {
return true;
}
if (parseInt(tabJeedomVesion[i]) < parseInt(tabCompareVersion[i])) {
return false;
}
}
return true;
}
jeedom.cmd.update['#id#'] = function(_options){
var cmd = $('.cmd[data-cmd_id=#id#]');
var imgNumber = '';
var taux = (parseFloat(_options.display_value).toFixed(1) - parseInt(_options.display_value)) === 0 ? parseInt(_options.display_value) : parseFloat(_options.display_value).toFixed(1);
var hideHistory = ('#hide_history#'!='#'+'hide_history#') ? "#hide_history#" : "off";
var version = ('#version#'!='#'+'version#') ? "#version#" : "";
var largeurPx = "20";
if (version === 'dashboard'){
largeurPx = ('#largeurDashboardPx#'!='#'+'largeurDashboardPx#') ? "#largeurDashboardPx#" : "20";
}else{
largeurPx = ('#largeurMobilePx#'!='#'+'largeurMobilePx#') ? "#largeurMobilePx#" : "20";
}
// borne Min et max largeur
if (largeurPx<20){
largeurPx = 20;
}else if (largeurPx>29){
largeurPx = 29;
}
var largeurWidget = 90 + parseInt(largeurPx);
var hauteurPx = (largeurPx * 64 / 20);
largeurPx = largeurPx + 'px';
var hasCommandIcon = cmd.find('.title div.cmdName i').is('i');
var hasCommandName = cmd.find('.title div.cmdName').text().length > 0;
var pos =10;
if (hasCommandName || hasCommandIcon){
cmd.find('.title').css('cssText', 'padding-bottom: ' + pos + 'px !important;');
pos=0;
}
if (taux >= 0 && taux < 500){
imgNumber = '00';
}else if (taux >= 500 && taux < 1000) {
imgNumber = '01';
}else if (taux >= 1000 && taux < 1500) {
imgNumber = '02';
}else if (taux >= 1500 && taux < 2000) {
imgNumber = '03';
}else if (taux >= 2000 && taux < 2500) {
imgNumber = '04';
}else{
imgNumber = '05';
}
cmd.find('#co2#id#').empty().append('<img class="co2Img" src="data/img/dioxydecarbone' + imgNumber + '.png"></img>');
cmd.find('.co2Img').css('cssText', 'width:' + largeurPx + ' !important;');
var imgMaxHeight = 93;
var imgMinHeight = 70;
cmd.find('div.content-sm').css('cssText','height: ' + imgMinHeight +'px !important;min-height: ' + imgMinHeight +'px !important; max-height: ' + imgMaxHeight + 'px !important;display: table-cell !important')
if (hauteurPx>imgMinHeight){
pos = (hauteurPx - imgMinHeight)/2;
}
cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
cmd.find('.state').empty().append(taux);
var positionTop = 0;
if (hideHistory == 'hidden'){
var positionTop = 25 + pos;
}
else{
cmd.find('div.statsPart1').css('cssText', 'padding-top: ' + (20 + pos) + 'px !important;text-align: left !important');
var positionTop = pos;
}
cmd.find('.stats').css('line-height', '10px');
var cssCurrentValue = 'position: relative !important;top: ' + positionTop + 'px !important;';
var cssCurrentValueUnit = 'position: relative !important;top: ' + (positionTop+5) + 'px !important;';
var widthValue = 75;
if ('#version#' === 'dashboard') {
if (!isEarlierVersion('4.4.0')){
var cssCurrentValueUnit = cssCurrentValue;
var widthValue = 59;
}
}
cmd.find('.unitValue').css('cssText', cssCurrentValueUnit );
cmd.find('.state').css('cssText', cssCurrentValue + 'font-size: 15px !important;');
cmd.find('div span.tooltips').css('cssText', 'word-break:normal;font-size: 10px !important;font-weight: normal !important;');
cmd.css("padding-bottom", "15px");
cmd.css("width", largeurWidget + "px");
cmd.find('.img').css('height', hauteurPx + 'px');
cmd.find('.img').css('width', largeurPx);
cmd.find('.val').css('height', hauteurPx + 'px');
cmd.find('.val').css('width', widthValue + 'px');
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>
Voilà, amusez vous bien
1 « J'aime »
Merci pour les adaptations.