Bonjour
J’ai vu la possibilité de mettre un template Ecowatt(RTE) sur 2 colonnes en utilisant le template custom (fichier custom.rte_ecowatt.html)
Je l’ai aussi vu sur une vidéo mais impossible de le reproduire
Ceci ressemble à :
Avez vous le fichier HTML pour cette mise en forme sur 2 colonnes (à l’horizontal) ?
Merci
Bonjour
Ci joint le code
<div class="eqLogic eqLogic-widget allowResize allowReorderCmd #custom_layout# #eqLogic_class# #class#" data-eqType="#eqType#" data-eqLogic_id="#id#" data-eqLogic_uid="#uid#" data-version="#version#" data-translate-category="#translate_category#" data-category="#category#" data-tags="#tags#" style="width: #width#;height: #height#;#style#">
<center class="widget-name">
<span class="warning" title="#alert_name#">
<i class='#alert_icon#'></i>
</span>
<span class="cmd refresh pull-right cursor" data-cmd_id="#refresh_id#">
<i class="fas fa-sync"></i>
</span>
<span class="reportModeVisible">#name_display# <span class="object_name">#object_name#</span></span>
<a href="#eqLink#" class="reportModeHidden">#name_display# <span class="object_name">#object_name#</span></a>
</center>
<div style="display: grid;">
<div class="#isVerticalAlign#" style="grid-column: 1 / 2;grid-row: 1;margin-top: 8px;width:300px;">
<center>
<!-- HEURE ACTUELLE Prochaine alerte
-->
<div style="border-bottom:2px solid #curAlertColor#;margin-bottom:0px">
#valueNow# #datenow#<br>#nextAlert#
</div>
<!-- Titres des jours uniquement
<div class="cmd cmd-widget" style="width: calc(100% - 10px) !important;text-align: left;margin-left: 5px;margin-right: 5px;margin-top:5px;margin-bottom:0px">
<div class="cmd cmd-widget" style="margin:5px"><i title = "#messageD0#" class="fa fa-circle fa-lg" style="color:#dayColor0#"></i> #date0#
</div>
<div class="cmd cmd-widget" style="margin:5px"><i title = "#messageD1#" class="fa fa-circle fa-lg" style="color:#dayColor1#"></i> #date1#
</div>
<div class="cmd cmd-widget" style="margin:5px"><i title = "#messageD2#" class="fa fa-circle fa-lg" style="color:#dayColor2#"></i> #date2#
</div>
<div class="cmd cmd-widget" style="margin:5px"><i title = "#messageD3#" class="fa fa-circle fa-lg" style="color:#dayColor3#"></i> #date3#
</div>
</div>
-->
<!-- JOUR 0 -->
<!-- Titre J0
-->
<div class="cmd cmd-widget" style="width: calc(100% - 10px) !important;text-align: left;margin-left: 5px;margin-right: 5px;margin-top:5px;margin-bottom:0px">
<i title = "#messageD0#" class="fa fa-circle fa-lg" style="color:#dayColor0#"></i>
#date0#
</div>
<!-- Camemberts
-->
<div class="cmd cmd-widget" style="text-align: left;margin: 5px;">
<div id="highchartDataHourD0AM-#id#" style="width: 130px; height: 140px;margin-left: 5px;">
</div>
</div>
<div class="cmd cmd-widget" style="text-align: left;margin: 5px;">
<div id="highchartDataHourD0PM-#id#" style="width: 130px; height: 140px;margin-left: 5px;">
</div>
</div>
<!-- Table html J0
<div class="cmd cmd-widget" style="width: calc(100% - 10px) !important;text-align: left;margin-left: 5px;margin-right: 5px;">
#dataHourD0#
</div>
-->
<!-- JOUR 1 -->
<!-- Titre J1
-->
</center>
</div>
<div class="#isVerticalAlign#" style="grid-column: 2 / 2;grid-row: 1;margin-top: 8px;width:250px;">
<center>
<div class="cmd cmd-widget" style="width: calc(100% - 10px) !important;text-align: left;margin-left: 5px;margin-right: 5px;margin-top:5px;margin-bottom:0px">
<i title = "#messageD1#" class="fa fa-circle fa-lg" style="color:#dayColor1#"></i> #date1#
</div>
<!-- Table html J1
-->
<div class="cmd cmd-widget" style="width: calc(100% - 10px) !important;text-align: left;margin-left: 5px;margin-right: 5px;margin-top:0px">
#dataHourD1#
</div>
<!-- JOUR 2 -->
<!-- Titre J2
-->
<div class="cmd cmd-widget" style="width: calc(100% - 10px) !important;text-align: left;margin-left: 5px;margin-right: 5px;margin-top:5px;margin-bottom:0px">
<i title = "#messageD2#" class="fa fa-circle fa-lg" style="color:#dayColor2#"></i> #date2#
</div>
<!-- Table html
-->
<div class="cmd cmd-widget" style="width: calc(100% - 10px) !important; text-align: left;margin-left: 5px;margin-right: 5px;margin-top:0px">
#dataHourD2#
</div>
<!-- JOUR 3 -->
<!-- Titre J3
-->
<div class="cmd cmd-widget" style="width: calc(100% - 10px) !important;text-align: left;margin-left: 5px;margin-right: 5px;margin-top:5px;margin-bottom:0px">
<i title = "#messageD3#" class="fa fa-circle fa-lg" style="color:#dayColor3#"></i> #date3#
</div>
<!-- Table html J3
-->
<div class="cmd cmd-widget" style="width: calc(100% - 10px) !important;text-align: left;margin-left: 5px;margin-right: 5px;margin-top:0px">
#dataHourD3#
</div>
<!-- Heure par heure à partir de l'heure actuelle
-->
<br>
<div class="cmd cmd-widget" style="width: calc(100% - 10px) !important;text-align: left;margin: 5px">
Niveaux d'alerte sur #numCmdsHour# heures.
#dataHoursJson#
</div>
</center>
<div style="font-size: 10px; font-style: italic; text-align:left;margin-left: 5px">
#dataActuEcowatt#
</div>
</div>
</div>
<script>
if ('#refresh_id#' != '') {
$('.eqLogic[data-eqLogic_uid=#uid#] .refresh').on('click', function () {
jeedom.cmd.execute({id: '#refresh_id#'})
})
} else {
$('.eqLogic[data-eqLogic_uid=#uid#] .refresh').remove()
}
Highcharts.chart('highchartDataHourD0AM-#id#', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
width: 130, height: 130,
spacingTop: -5, spacingLeft: 4, spacingRight: 4, spacingBottom: 4
},
credits: { enabled: false },
exporting : { enabled: false },
legend: { enabled: false },
title: {
text: 'Minuit - midi',
margin: 0,
style: { "color": "var(--txt-color)", "fontSize": "12px" },
y: 16
},
tooltip: { pointFormat: '{series.name}' },
accessibility: { point: { valueSuffix: '' } },
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: { enabled: false },
slicedOffset: 6,
}
},
series: [
{ name: '#date0dm#',
colorByPoint: false,
colorIndex: 999,
innerSize: '#innerSizeAM#',
data: [ #dataHour0HCpieAM# ]
}
]
});
Highcharts.chart('highchartDataHourD0PM-#id#', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
width: 130, height: 130,
spacingTop: -5, spacingLeft: 4, spacingRight: 4, spacingBottom: 4
},
credits: { enabled: false },
exporting : { enabled: false },
legend: { enabled: false },
title: {
text: 'Midi - minuit',
margin: 0,
style: { "color": "var(--txt-color)", "fontSize": "12px" },
y: 16
},
tooltip: { pointFormat: '{series.name}' },
accessibility: { point: { valueSuffix: '' } },
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: { enabled: false },
slicedOffset: 6,
// borderWidth: 1, borderColor: 'var(--bg-color)'
}
},
series: [
{ name: '#date0dm#',
colorByPoint: false,
colorIndex: 999,
innerSize: '#innerSizePM#',
data: [ #dataHour0HCpiePM# ]
},
]
});
</script>
</div>
Ci joint la présentation finale
Bonjour,
Il y a un </div> en trop à la fin qui parfois peut casser la page où cet équipement sera affiché.
Sinon l’information est parfois en double.
Je préfère ce template:
Merci pour l’information
Correction faite
Ton affichage est effectivement très bien (et esthétique) mais nous n’avons pas les plages horaires sur les jours à venir.
De ce fait, les 2 sont intéressants
J’utilise ton plugin qui est très sincèrement très esthétique et très utile.
J’ai transféré l’information rteEcowatt sur une autre box via le plugin Jeedom link
Malheureusement tout la mise en forme est perdu en cours de route sur la box cible
Sais tu s’il y a une méthode pour garder la mise en forme de la box source ?
J’ai utilisé Jeedom Link pour éviter les appels multiples sur le site RTE
Le détail des heures sur les derniers jours n’est pas très important. Ce n’est pas dans l’immédiat.
Le plugin va afficher:
On est prévenu de l’heure de la prochaine alerte dans le message en haut.
Pas d’alerte dans les 36 heures.
N’en faites pas trop. Ca va se voir. 
C’est le plugin qui fait le formatage via la fonction toHtml().
AMHA le plus simple est d’installer le plugin sur la 2ème box en décalant son cron pullDataEcowatt de plus de 15 minutes par rapport à la 1ère box pour éviter l’erreur 429 de RTE ou 2ème compte chez RTE.
Non très sincèrement ton plugin est réellement très esthétique
Je ne fait pas de compliment pour rien ou quand cela n’est pas sincèrement
Je risque d’avoir plusieurs box donc la solution que tu proposes n’est pas une solution optimale pour moi
Pour des plugins qui utilisent des templates, comme par exemple meteofrance et sa commande de pluie 1h, vous faites comment?
Il ne faut pas non plus que ça prenne trop de temps à faire. Il y a un pb de production elec cet hiver, mais ça ne devrait pas durer. 
Sinon, il va falloir faire chauffer votre clavier. Vous vous débrouillez en programmation php, js ?
Dans la mesure où les boxs ne sont pas sur le même secteur géographique, j’ai le plugin météo sur chaque box.
Mais j’utilise les plugin avec la localisation Jeedom sans la notion de clé (enregistrement sur un site).
Pour le plugin RteEcowatt il est difficile de mettre le plugin sur chaque box alors que le résultat est le même. Donc cela a du sens d’avoir une box maître qui envoie les infos
Mais dans ce cas, je dois faire la mise ne forme du widget sur les boxs cibles
Je ne suis pas du tout un informaticien (php, js) mais plutôt spécialiser dans le contrôle et la régulation du bâtiment
Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.