bonjour
je seche a nouveau sur des problemes d’affichage de widget sur design suite au passage en 4.4.3
le widget assez classique ci-dessous utilise les librairies leaflet.js pour placer une position GPS (lat, long) sur une carte OpenMaps.
Il fonctionne parfaitement en 4.3, aussi bien sur dashboard que sur design, alors qu’en 4.4.3 il fonctionne uniquement sur dashboard.
sur le design 4.4.3, rien ne s’affiche au chargement de la page, il faut editer le design, parametres d’affichage du widget, sauver, et alors il devient visible jusqu’au refresh de la page…
le message d’erreur console browser est :
VM2773:18 Uncaught ReferenceError: L is not defined
qui semblerait indiquer que la librairie leaflet.js n’est pas encore chargee au moment de la creation des premiers objets l’utilisant
un post comparable Problème appel de function d'un javascript importé a ete fermé dernierement, mais la solution proposée ne fonctione pas ici, elle est d’ailleurs implémentée dans le widget ci-dessous.
Qu’est ce qui pourrait expliquer ce probleme en 4.4 ? quel changement majeur dans les designs cree ce probleme ? et comment le resoudre ?
d’autres custom widgets (comme le calendar ICS) souffrent des memes problemes sur design 4.4
Merci
<head>
<link rel="stylesheet" href="/plugins/volvooncall/3rdparty/leaflet_v1.7.1/leaflet.css"/>
<script src="core/php/getJS.php?file=plugins/volvooncall/3rdparty/leaflet_v1.7.1/leaflet.js"></script>
</head>
<div class="cmd cmd-widget #history# tooltips" data-type="info" data-subtype="string" data-cmd_id="#id#" data-template="default" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div id="myMap#id#">
<!-- Ici s'affichera la carte -->
</div>
<script type="text/javascript">
var map#id# = null;
$('#myMap#id#').css("width", "150px");
$('#myMap#id#').css("height", "150px");
jeedom.cmd.update['#id#'] = function(_options) {
hist = _options.display_value; // Position GPS
currentPos = hist.split(',');
var latCenter = currentPos[0];
var lonCenter = currentPos[1];
if (map#id# == null) {
map#id# = L.map('myMap#id#').setView([latCenter, lonCenter], 18 );
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
minZoom: 2,
maxZoom: 30,
attribution: 'OpenStreetMap'
}).addTo(map#id#);
}
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>