OpenHAB
/
openhab-webui
mirror of https://github.com/openhab/openhab-webui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

[BasicUI] Reload the chart with higher dimensions when zooming (#3183) 

When zooming, instead of just upscaling the previously loaded chart, a
new chart is built using available width as new chart width. Upscale is
kept and will be used in case the user defined a maximum width for
charts that is lower than the available width.

Closes #3139

Signed-off-by: Laurent Garnier <lg.hc@free.fr>
pull/3180/merge
lolodomo 2025-06-14 13:55:46 +02:00 committed by GitHub
parent c12c18cdde
commit f1bc650743
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bundles/org.openhab.ui.basic/snippets-src/chart.html
View File

@ -21,7 +21,7 @@
%period_rows%
</div>
</script>
<button id="button3-%widget_id%" class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect image-upscale-button">
<button id="button3-%widget_id%" class="mdl-button mdl-button--raised mdl-js-button mdl-js-ripple-effect chart-upscale-button">
<!-- fullscreen -->
<i class="material-icons">&#xE5D0;</i>
</button>

45
bundles/org.openhab.ui.basic/web-src/smarthome.js
View File

@ -973,10 +973,12 @@
_t.legendButton = null;
_t.periodButton = null;
_t.chartUpscaleButton = null;
if (_t.headerRow !== null && _t.headerRow !== "") {
_t.legendButton = _t.formHeaderRow.querySelector(o.image.legendButton);
_t.periodButton = _t.formHeaderRow.querySelector(o.image.periodButton);
_t.chartUpscaleButton = _t.formHeaderRow.querySelector(o.image.chartUpscaleButton);
if (_t.legendButton !== null) {
_t.displayLegend = _t.parentNode.getAttribute("data-legend") === "true";
if (_t.displayLegend) {
@ -988,6 +990,9 @@
if (_t.periodButton !== null) {
_t.period = null;
}
if (_t.chartUpscaleButton !== null) {
_t.upscale = false;
}
}
function onLegendClick() {
@ -1022,6 +1027,38 @@
}, 300);
}
function onUpscaleClick() {
var
splittedSize,
width,
height;
_t.upscale = !_t.upscale;
if (_t.upscale) {
_t.chartUpscaleButton.classList.add(o.buttonActiveClass);
} else {
_t.chartUpscaleButton.classList.remove(o.buttonActiveClass);
}
_t.url = _t.url.replace(/&w=\w+/, "");
_t.url = _t.url.replace(/&h=\w+/, "");
if (_t.upscale) {
height = Math.floor(_t.parentNode.parentNode.offsetWidth / 2);
width = height * 2;
_t.url = _t.url + "&w=" + width;
_t.url = _t.url + "&h=" + height;
} else if (smarthome.UI.chartSize !== null) {
splittedSize = smarthome.UI.chartSize.split("x");
_t.url = _t.url + "&w=" + splittedSize[0];
_t.url = _t.url + "&h=" + splittedSize[1];
}
_t.image.setAttribute("src", _t.url + "&t=" + Date.now());
if (_t.upscale) {
_t.parentNode.classList.add(o.image.upscaleClass);
} else {
_t.parentNode.classList.remove(o.image.upscaleClass);
}
}
_t.showModalPeriods = function() {
var
content = _t.formHeaderRow.querySelector(o.image.periodRows).innerHTML;
@ -1098,6 +1135,10 @@
componentHandler.downgradeElements([ _t.periodButton ]);
_t.periodButton.removeEventListener("click", _t.showModalPeriods);
}
if (_t.chartUpscaleButton !== null) {
componentHandler.downgradeElements([ _t.chartUpscaleButton ]);
_t.chartUpscaleButton.removeEventListener("click", onUpscaleClick);
}
};
_t.applyLocalSettingsPrivate();
@ -1108,6 +1149,9 @@
if (_t.periodButton !== null) {
_t.periodButton.addEventListener("click", _t.showModalPeriods);
}
if (_t.chartUpscaleButton !== null) {
_t.chartUpscaleButton.addEventListener("click", onUpscaleClick);
}
}
/* class ControlMap */
@ -4075,6 +4119,7 @@
image: {
legendButton: ".chart-legend-button",
periodButton: ".chart-period-button",
chartUpscaleButton: ".chart-upscale-button",
periodRows: ".mdl-form__header-rows",
upscaleButton: ".image-upscale-button",
upscaleClass: "mdl-form__image-upscale",