Design
Misc
Fundamentals Overview + User Extensions Widget Assistant Appliances Replacing deprecated Widgets diff --git a/pages/docu/misc/extensions.html b/pages/docu/misc/extensions.html new file mode 100644 index 00000000..e51c5061 --- /dev/null +++ b/pages/docu/misc/extensions.html @@ -0,0 +1,112 @@ +/** +* ----------------------------------------------------------------------------- +* @package smartVISU +* @author Martin Gleiß +* @copyright 2012 - 2023 +* @license GPL [http://www.gnu.de] +* ----------------------------------------------------------------------------- +*/ + + +{% extends "index.html" %} +{% block content %} + +User Extensions
+ +
+
+ Depending on the update method used, smartVISU files can get overwritten during the update, so changes and extensions written by the user can get lost. Therefore it is highly recommended to not change any
+ of the original files and folders that come with smartVISU. There are special protected areas reserved for user-written code.
+
+
+ +
+ + +
+ Widgets can also be placed in a subfolder of your pages folder: ./pages/<yourPages>/widgets. They will get imported from there but the docu page in the folder will not be found. +
+ +
+ Keep in mind that SVG icons need a certain format to enable dynamic colorization in smartVISU. The forum and also the GitHub wiki provide some hints for that. +
+ +
+ +
+ +
+ +
+ Please contribute there if you like to share your knowledge. We'll integrate the contents into this inline documentation later. + +
+
+{% endblock %}
From 3ac291852400b579f274dc8f57af386a18636ba1 Mon Sep 17 00:00:00 2001
From: wvhn <17801971+wvhn@users.noreply.github.com>
Date: Wed, 27 Dec 2023 18:22:33 +0100
Subject: [PATCH 005/112] improve spline display
and clip to xmin / xmax boundaries
---
changelog.md | 2 +
pages/base/base.css | 11 +-
widgets/device.js | 496 ++++++++++++++++++++++++--------------------
3 files changed, 279 insertions(+), 230 deletions(-)
diff --git a/changelog.md b/changelog.md
index e15f3d16..f749ea9e 100755
--- a/changelog.md
+++ b/changelog.md
@@ -2,6 +2,7 @@
### New / Changed Widgets
### Other New Features
+- improved spline display for the starting point in device.uzsugraph
### Improvements
@@ -14,6 +15,7 @@
### Fixed Bugs
- system page was not shown due to missing infoblock.html if pages were configured to "Smarthome" but pages had not been created yet by the "smartvisu" plugin of smarthomeNG.
- behaviour of device.uzsugraph interpolation style was inconsistent if more than one uzsugraph widget was on a page.
+- device.uzsugraph threw an error while a point was dragged
### Known Bugs
- if item contains a stringified number (e.g. with leading zero). widget.set converts it back to numeric format - so basic.print can not print it as text
diff --git a/pages/base/base.css b/pages/base/base.css
index 86885173..df979342 100644
--- a/pages/base/base.css
+++ b/pages/base/base.css
@@ -1609,7 +1609,10 @@ div.ui-slider-switch{
.uzsuCell [data-tip]:after {
left: -190px;
}
-.highcharts-root .uzsu-event-sunrise {
+/**
+ * ---------- UZSU Graph ------------------------------------------------
+ */
+ .highcharts-root .uzsu-event-sunrise {
fill: #ffffff;
stroke: rgba(255, 255, 255, 0.5);
}
@@ -1629,6 +1632,12 @@ div.ui-slider-switch{
fill: #808080;
stroke: #808080;
}
+[data-widget="device.uzsugraph"] .highcharts-navigator,
+[data-widget="device.uzsugraph"] .highcharts-navigator-series,
+[data-widget="device.uzsugraph"] .highcharts-navigator-xaxis,
+[data-widget="device.uzsugraph"] .highcharts-navigator-yaxis {
+ display: none;
+}
/**
* --- W i d g e t s : M U L T I M E D I A ----------------------------------
diff --git a/widgets/device.js b/widgets/device.js
index 99211076..36a77727 100755
--- a/widgets/device.js
+++ b/widgets/device.js
@@ -1215,7 +1215,7 @@ $.widget("sv.device_uzsu", $.sv.widget, {
},
//----------------------------------------------------------------------------
- // Funktionen für das Sortrieren der Tabelleneinträge
+ // Funktionen für das Sortieren der Tabelleneinträge
//----------------------------------------------------------------------------
_uzsuSortTime: function(response, e) {
// erst aus dem Widget zurücklesen, sonst kann nicht im Array sortiert werden (alte daten)
@@ -1742,11 +1742,10 @@ $.widget("sv.device_uzsugraph", $.sv.device_uzsu, {
Highcharts.VMLRenderer.prototype.symbols.sunset = Highcharts.SVGRenderer.prototype.symbols.sunset;
}
- // draw the plot
+ // prepare the plot
var chart = this.element.highcharts({
title: { text: this.options.headline },
legend: false,
- scrollbar: {enabled: this.options.scrollbar},
series: [
{ // active
name: 'active',
@@ -1816,13 +1815,12 @@ $.widget("sv.device_uzsugraph", $.sv.device_uzsu, {
],
xAxis: {
type: 'datetime',
- min: this._startTimestamp,
+ ordinal:false,
+ min: this._startTimestamp,
max: 1000*60*60*24 + this._startTimestamp,
showLastLabel: false,
crosshair: { snap: false },
- dateTimeLabelFormats: {
- day: '%a'
- }
+ dateTimeLabelFormats: { day: '%a' }
},
yAxis: {
title: false,
@@ -1844,10 +1842,22 @@ $.widget("sv.device_uzsugraph", $.sv.device_uzsu, {
var value = (this.series.yAxis.categories) ? this.series.yAxis.categories[this.y] : this.y;
return '' + value + ' (' + this.series.name + ')Custom Pages
+ + Folders with indiviual visu pages shall be added to the folder ./pages. Such a folder is named ./pages/<yourPages> in the present docuemntation. All subfolders in ./pages not originating from smartVISU + sources will be protected from being overwritten during an update. Pages can also be added to the ./dropins folder but in favour of a clear page structure and origin this is not recommended. + ++ +
Dropins Folder for User generated Content
+ + All user generated code should be placed into the ./dropins folder and its subfolders which are protected, too. Generally, the ./dropins folders will be read at the very end of the page loading process. + This will result in different behaviour of duplicate filenames depending on the file type. +-
+
- html pages will be found as the first hit in the following order: ./apps, ./pages/<yourPages>, ./pages/smarthome (if smarthomeNG is configured as backend), ./dropins and ./pages/base. +
- html widgets as well as .svg, .css and .js files will be imported at the end of the page loading process and overwrite definitions made before. +
+ + +
Custom Widgets
+ + Place your own widgets .html and .js files in ./dropins/widgets. They will be imported automatically from there. See custom widget docu for the generation + of your own documentation page for the widget. If you need to import certain widgets within your own widgets use the '@widgets' namespace: +
+
+ SmarthomeNG - if auto page generation is activated - places plugin widgets in ./dropins/shwidgets. Don't place your own widgets there since smarthomeNG will empty the folder on startup.{% filter trim|escape|nl2br %}{% verbatim %}
+ {% import "@widgets/mywidget.html" as mywidget %}
+ {% endverbatim %}{% endfilter %}
+ + Widgets can also be placed in a subfolder of your pages folder: ./pages/<yourPages>/widgets. They will get imported from there but the docu page in the folder will not be found. +
+ +
Additional Icons
+ + Place your own icons in ./dropins/icons. They will be found automatically there. Normally, white icons are sufficient and should be placed in ./dropins/icons/ws. smartVISU widgets will not use black icons + unless you force them to do so by specifying the full path. Black icons should then be placed in ./dropins/icons/sw.+ Keep in mind that SVG icons need a certain format to enable dynamic colorization in smartVISU. The forum and also the GitHub wiki provide some hints for that. +
+ +
Language Customization
+ + smartVISU loads the language information recursively, starting with the configured language file and continuing with the language in the "extends = xx" statement. Extensions of the language files + can be placed in the folder ./dropins/lang. The procedure is described in ./lang/readme.txt. Create a file named e.g. "custom.ini", define the base language and fill in your individual formats and texts. + +
+
+ The custom language will be displayed in the configuration menu with its file name or - if the @label line is present - with the defined label. Select this item to activate the language extension.
+
+ {% filter trim|escape|nl2br %}{% verbatim %}
+ ;define a title or delete the following line
+ ;@label My Language
+ ;define the base language
+ extends = "en"
+
+ ;do not forget the category names
+ [format]
+ kwh = "%01,3f kWh"
+ ...
+ {% endverbatim %}{% endfilter %}
+ + +
Custom CSS definitions
+ + There are many options to place custom CSS definitions for styling pages and widgets. +-
+
- small changes can be made in ./pages/<yourPages>/visu.css to override definitions made in the official smartVISU CSS files. +
- CSS belonging to custom widgets should be placed with the widgets in the same folders. They have a higher priority than visu.css in case of conflicts. +
- further custom CSS definitions can be placed in the ./dropins folder or in ./pages/<yourPages>/css. The latter has the highest priority in case of conflicts. +
+ +
Javascript Extensions
+ + JavaScript extensions besides the .js widget files can be made in the following ways: +-
+
- integrate small JavaScript extensions in ./pages/<yourPages>/visu.js. These are prioritized over the basic smartVISU functions and drivers but below all widgets. +
- putting .js extensions in the widget folders is not recommended but will work. +
- higher priority in case of conflicts is given to JavaScript files in the folders ./dropins or in ./pages/<yourPages>/js. The latter has the highest priority. +
+ +
More Information
+ + More information can be found on the wiki pages.+ Please contribute there if you like to share your knowledge. We'll integrate the contents into this inline documentation later. + +
'; } - }, + navigator: { + enabled: true, + min: this._startTimestamp, + max: 1000*60*60*24*7 + this._startTimestamp, + }, + rangeSelector: { + enabled: false, + }, + scrollbar: { + enabled: this.options.scrollbar, + showFull: false + }, chart: { styledMode: true, + marginBottom: 0, exporting: { enabled: false }, @@ -1884,39 +1894,39 @@ $.widget("sv.device_uzsugraph", $.sv.device_uzsu, { dragPrecisionY: step, dragMinY: min, dragMaxY: max - }, - cursor: this.options.editable ? 'move' : null, - marker: { enabled: true }, - stickyTracking: false, - findNearestPointBy: 'xy', - type: 'scatter', - lineWidth: 2, - point: { - events: { - click: function (e) { - if(self.justDragged) { // prevent click event after drop - self.justDragged = false; - return; - } - if(e.point.uzsuEntry !== undefined) - self._uzsuRuntimePopup(e.point.uzsuEntry) - }, - drag: function (e) { - }, - drop: function (e) { - self.justDragged = true; // used to prevent click event after drop - if(e.target.uzsuEntry !== undefined) { - e.target.uzsuEntry.value = e.target.y; - if(e.target.uzsuEntry.event == 'time') - e.target.uzsuEntry.timeCron = self.element.highcharts().time.dateFormat('%H:%M', e.target.x); - else // sunrise or sunset - e.target.uzsuEntry.timeOffset = Math.round(((e.target.x % (1000*60*60*24)) - (self._getSunTime(e.target.uzsuEntry.event, 0) % (1000*60*60*24)))/1000/60); - //uzsuEntry.active - self._save(); - } - } - } - } + }, + cursor: this.options.editable ? 'move' : null, + marker: { enabled: true }, + dataGrouping: { enabled: false }, + stickyTracking: false, + findNearestPointBy: 'xy', + type: 'scatter', + lineWidth: 2, + point: { + events: { + click: function (e) { + if(self.justDragged) { // prevent click event after drop + self.justDragged = false; + return; + } + if(e.point.uzsuEntry !== undefined) + self._uzsuRuntimePopup(e.point.uzsuEntry) + }, + drag: function (e) { + }, + drop: function (e) { + self.justDragged = true; // used to prevent click event after drop + if(e.target.uzsuEntry !== undefined) { + e.target.uzsuEntry.value = e.target.y; + if(e.target.uzsuEntry.event == 'time') + e.target.uzsuEntry.timeCron = self.element.highcharts().time.dateFormat('%H:%M', e.target.x); + else // sunrise or sunset + e.target.uzsuEntry.timeOffset = Math.round(((e.target.x % (1000*60*60*24)) - (self._getSunTime(e.target.uzsuEntry.event, 0) % (1000*60*60*24)))/1000/60); + self._save(); + } + } + } + } } }, }, @@ -2009,14 +2019,14 @@ $.widget("sv.device_uzsugraph", $.sv.device_uzsu, { // Zoom buttons self.customZoomButtons = [ - { day: 'mo', shape: 'square', xMin: self._startTimestamp, xMax: self._startTimestamp + 24*60*60*1000 }, - { day: 'tu', shape: 'square', xMin: self._startTimestamp + 24*60*60*1000, xMax: self._startTimestamp + 2*24*60*60*1000 }, - { day: 'we', shape: 'square', xMin: self._startTimestamp + 24*60*60*1000, xMax: self._startTimestamp + 2*24*60*60*1000 }, - { day: 'th', shape: 'square', xMin: self._startTimestamp + 24*60*60*1000, xMax: self._startTimestamp + 2*24*60*60*1000 }, - { day: 'fr', shape: 'square', xMin: self._startTimestamp + 24*60*60*1000, xMax: self._startTimestamp + 2*24*60*60*1000 }, - { day: 'sa', shape: 'square', xMin: self._startTimestamp + 24*60*60*1000, xMax: self._startTimestamp + 2*24*60*60*1000 }, - { day: 'su', shape: 'square', xMin: self._startTimestamp + 24*60*60*1000, xMax: self._startTimestamp + 2*24*60*60*1000 }, - { day: 'w', shape: 'circle', langKey: 'week', xMin: self._startTimestamp, xMax: self._startTimestamp + 7 *24*60*60*1000 }, + { day: 'mo', shape: 'square', xMin: 0, xMax: 24*60*60*1000 }, + { day: 'tu', shape: 'square', xMin: 24*60*60*1000, xMax: 2*24*60*60*1000 }, + { day: 'we', shape: 'square', xMin: 2*24*60*60*1000, xMax: 3*24*60*60*1000 }, + { day: 'th', shape: 'square', xMin: 3*24*60*60*1000, xMax: 4*24*60*60*1000 }, + { day: 'fr', shape: 'square', xMin: 4*24*60*60*1000, xMax: 5*24*60*60*1000 }, + { day: 'sa', shape: 'square', xMin: 5*24*60*60*1000, xMax: 6*24*60*60*1000 }, + { day: 'su', shape: 'square', xMin: 6*24*60*60*1000, xMax: 7*24*60*60*1000 }, + { day: 'w', shape: 'circle', xMin: 0, xMax: 7 *24*60*60*1000, langKey: 'week' }, ]; chart.text = []; @@ -2032,7 +2042,7 @@ $.widget("sv.device_uzsugraph", $.sv.device_uzsu, { button.element = chart.renderer.button('', null, null, function(e) { chart.xAxis[0].setExtremes(); - chart.xAxis[0].update({min: button.xMin, max: button.xMax}, false); + chart.xAxis[0].update({min: self._startTimestamp + button.xMin, max: self._startTimestamp + button.xMax}, false); chart.redraw(); }, {}, {}, {}, {}, button.shape) .attr({ @@ -2059,22 +2069,26 @@ $.widget("sv.device_uzsugraph", $.sv.device_uzsu, { }, draw: function() { - var chart = this.element.highcharts(); + var chart = this.element.highcharts(); - if(this._uzsudata.active) - this.element.removeClass('uzsu-all-inactive'); - else - this.element.addClass('uzsu-all-inactive'); + if(this._uzsudata.active) + this.element.removeClass('uzsu-all-inactive'); + else + this.element.addClass('uzsu-all-inactive'); - var hasDays = false; - var hasSunrise = false; - var hasSunset = false; + var hasDays = false; + var hasSunrise = false; + var hasSunset = false; var hasBurst = false; - var seriesData = { active: [], inactive: [], range: [] }; - var linetype = this._uzsudata.interpolation.type == 'cubic' ? 'spline' : 'line'; - // Highcharts.seriesTypes.scatter.prototype.getPointSpline = Highcharts.seriesTypes[linetype].prototype.getPointSpline; - - // as from v3.2 we start with "today" instead of Monday + var seriesData = { active: [], inactive: [], range: [] }; + var linetype = this._uzsudata.interpolation.type == 'cubic' ? 'spline' : 'line'; + var self = this; + + + // ****************************************************************************** + // set start timestamp for the graph and texts for weekdays in zoom buttons - + // as from v3.2 the graph starts with current day instead of Monday + // ****************************************************************************** var today = new Date().getDay(); // delivers SU = 0 this._startTimestamp = (4 + today - 1) % 7 *1000*60*60*24 + new Date(0).getTimezoneOffset()*1000*60; @@ -2084,186 +2098,210 @@ $.widget("sv.device_uzsugraph", $.sv.device_uzsu, { this.rruleDays[day] += 7; this.customZoomButtons[this.rruleDays[day]].day = day.toLowerCase(); } + $.each(this.customZoomButtons, function(idx, button) { + chart.text[idx].attr({ text: sv_lang.uzsu[button.day] }); + }); + + + // ****************************************************************************** + // highlight active interpolation button + // ****************************************************************************** + $.each(this.interpolationButtons, function(idx, button) { + if(button.interpolationType == self._uzsudata.interpolation.type) + button.element.addClass("icon1"); + else + button.element.removeClass("icon1"); + }); - var self = this; + // ****************************************************************************** + // create timeline with all events from UZSU data + // ****************************************************************************** $.each(this._uzsudata.list, function(responseEntryIdx, responseEntry) { - // in der Tabelle die Werte der rrule, dabei gehe ich von dem Standardformat FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR,SA,SU aus und setze für jeden Eintrag den Button. - var x, xMin, xMax, xSeriesEndMin, xSeriesEndMax; - var burstTimes = []; - hasBurst = responseEntry.hasOwnProperty('series'); - hasSunrise = hasSunrise || responseEntry.event == 'sunrise'; - hasSunset = hasSunset ||responseEntry.event == 'sunset'; - if(!hasBurst){ - x = self._calculateEventTime(responseEntry); + var x, xMin, xMax, xSeriesEndMin, xSeriesEndMax; + hasBurst = responseEntry.hasOwnProperty('series'); + hasSunrise = hasSunrise || responseEntry.event == 'sunrise'; + hasSunset = hasSunset ||responseEntry.event == 'sunset'; + if(!hasBurst){ + x = self._calculateEventTime(responseEntry); if(responseEntry.timeMin) xMin = self._timeToTimestamp(responseEntry.timeMin); if(responseEntry.timeMax) xMax = self._timeToTimestamp(responseEntry.timeMax); - } - else { - x = self._calculateEventTime(responseEntry.series.start); - if(responseEntry.series.start.timeMin) - xMin = self._timeToTimestamp(responseEntry.series.start.timeMin); - if(responseEntry.series.start.timeMax) - xMax = self._timeToTimestamp(responseEntry.series.start.timeMax); - - // determine uzsu series times - var seriesEnd; - var seriesIntervall = new Date('1970-01-01T' + responseEntry.series.timeSeriesIntervall + ':00Z').getTime(); - if (responseEntry.series.hasOwnProperty('timeSeriesCount')) // series end defined by count of cycles - seriesEnd = x + (parseInt(responseEntry.series.end.timeCron) - 1) * seriesIntervall; - else - seriesEnd = self._calculateEventTime(responseEntry.series.end); - if(responseEntry.series.end.timeMin) + } + else { + x = self._calculateEventTime(responseEntry.series.start); + if(responseEntry.series.start.timeMin) + xMin = self._timeToTimestamp(responseEntry.series.start.timeMin); + if(responseEntry.series.start.timeMax) + xMax = self._timeToTimestamp(responseEntry.series.start.timeMax); + + // determine uzsu series times + var seriesEnd; + var seriesIntervall = new Date('1970-01-01T' + responseEntry.series.timeSeriesIntervall + ':00Z').getTime(); + if (responseEntry.series.hasOwnProperty('timeSeriesCount')) // series end defined by count of cycles + seriesEnd = x + (parseInt(responseEntry.series.end.timeCron) - 1) * seriesIntervall; + else + seriesEnd = self._calculateEventTime(responseEntry.series.end); + if(responseEntry.series.end.timeMin) xSeriesEndMin = self._timeToTimestamp(responseEntry.series.end.timeMin); - if(responseEntry.series.end.timeMax) + if(responseEntry.series.end.timeMax) xSeriesEndMax = self._timeToTimestamp(responseEntry.series.end.timeMax); - } + } - var rrule = responseEntry.rrule; - if (!rrule) - rrule = 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR,SA,SU'; - var ind = rrule.indexOf('BYDAY='); - // if RRULE BYDAY is included - if (ind > 0) { - var days = rrule.substring(ind+6).split(','); - if (days.length < 7) - hasDays = true; - - // push all events into the timeline - - $.each(days, function(dayIdx, day) { - var rruleOffset = self.rruleDays[day]*1000*60*60*24; - var sunOffset = 0; - if (responseEntry.event.indexOf('sun') >= 0 ) - sunOffset = self._getSunTime(responseEntry.event, self.rruleDays[day]) - self._getSunTime(responseEntry.event, 0); - else if (hasBurst && responseEntry.series.start.event.indexOf('sun') >= 0 ) - sunOffset = self._getSunTime(responseEntry.series.start.event, self.rruleDays[day]) - self._getSunTime(responseEntry.series.start.event, 0); - sunOffset = (x + sunOffset < xMin ? xMin - x : sunOffset); - sunOffset = (x + sunOffset > xMax ? xMax - x : sunOffset); - - var xRecurring = x + rruleOffset + sunOffset; - var yValue = Number(responseEntry.value); - seriesData[responseEntry.active ? 'active' : 'inactive'].push({ x: xRecurring, y: yValue, className: 'uzsu-'+responseEntryIdx+' uzsu-event-'+responseEntry.event, entryIndex: responseEntryIdx, uzsuEntry: responseEntry }); - if (hasBurst){ - var sunSeriesEndOffset = 0; - if (responseEntry.series.end.event.indexOf('sun') >= 0 ) - sunSeriesEndOffset = self._getSunTime(responseEntry.series.end.event, self.rruleDays[day]) - self._getSunTime(responseEntry.series.end.event, 0); - sunSeriesEndOffset = (seriesEnd + sunSeriesEndOffset < xSeriesEndMin ? xSeriesEndMin - seriesEnd : sunSeriesEndOffset); - sunSeriesEndOffset = (seriesEnd + sunSeriesEndOffset > xSeriesEndMax ? xSeriesEndMax - seriesEnd : sunSeriesEndOffset); - - xBurstRecurring = xRecurring; - while (xBurstRecurring + seriesIntervall <= seriesEnd + rruleOffset + sunSeriesEndOffset) { - xBurstRecurring += seriesIntervall; - seriesData['active'].push({ x: xBurstRecurring, y: yValue, className: 'uzsu-'+responseEntryIdx+' uzsu-event-'+responseEntry.event, entryIndex: responseEntryIdx, uzsuEntry: responseEntry }); - } - } - if(!hasBurst && (xMin !== undefined || xMax !== undefined)) { - if(xMin !== undefined) - seriesData.range.push({ x: xMin+rruleOffset, y: yValue, name: sv_lang.uzsu.earliest, uzsuEntry: responseEntry, className: 'uzsu-min' }); - else - seriesData.range.push({ x: xRecurring, y: yValue, uzsuEntry: responseEntry, className: 'uzsu-min uzsu-hidden', marker: { enabled: false } }); - if(xMax !== undefined) - seriesData.range.push({ x: xMax+rruleOffset, y: yValue, name: sv_lang.uzsu.latest, uzsuEntry: responseEntry, className: 'uzsu-max' }); - else - seriesData.range.push({ x: xRecurring, y: yValue, uzsuEntry: responseEntry, className: 'uzsu-max uzsu-hidden', marker: { enabled: false } }); - seriesData.range.push({ x: xMax+rruleOffset+1, y: null, uzsuEntry: responseEntry }); - } - }); - } - }); + var rrule = responseEntry.rrule; + if (!rrule) + rrule = 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR,SA,SU'; + var ind = rrule.indexOf('BYDAY='); + // if RRULE BYDAY is included + if (ind > 0) { + var days = rrule.substring(ind+6).split(','); + // memorize whether at least one data point is not repeating every day so the initial display will be a week graph + if (days.length < 7) + hasDays = true; + + // push all events into the timeline + $.each(days, function(dayIdx, day) { + var rruleOffset = self.rruleDays[day]*1000*60*60*24; + var sunOffset = 0; + if (responseEntry.event.indexOf('sun') >= 0 ) + sunOffset = self._getSunTime(responseEntry.event, self.rruleDays[day]) - self._getSunTime(responseEntry.event, 0); + else if (hasBurst && responseEntry.series.start.event.indexOf('sun') >= 0 ) + sunOffset = self._getSunTime(responseEntry.series.start.event, self.rruleDays[day]) - self._getSunTime(responseEntry.series.start.event, 0); + sunOffset = (x + sunOffset < xMin ? xMin - x : sunOffset); + sunOffset = (x + sunOffset > xMax ? xMax - x : sunOffset); + + var xRecurring = x + rruleOffset + sunOffset; + var yValue = Number(responseEntry.value); + seriesData[responseEntry.active ? 'active' : 'inactive'].push({ x: xRecurring, y: yValue, className: 'uzsu-'+responseEntryIdx+' uzsu-event-'+responseEntry.event, entryIndex: responseEntryIdx, uzsuEntry: responseEntry }); + if (hasBurst){ + var sunSeriesEndOffset = 0; + if (responseEntry.series.end.event.indexOf('sun') >= 0 ) + sunSeriesEndOffset = self._getSunTime(responseEntry.series.end.event, self.rruleDays[day]) - self._getSunTime(responseEntry.series.end.event, 0); + sunSeriesEndOffset = (seriesEnd + sunSeriesEndOffset < xSeriesEndMin ? xSeriesEndMin - seriesEnd : sunSeriesEndOffset); + sunSeriesEndOffset = (seriesEnd + sunSeriesEndOffset > xSeriesEndMax ? xSeriesEndMax - seriesEnd : sunSeriesEndOffset); + + xBurstRecurring = xRecurring; + while (xBurstRecurring + seriesIntervall <= seriesEnd + rruleOffset + sunSeriesEndOffset) { + xBurstRecurring += seriesIntervall; + seriesData['active'].push({ x: xBurstRecurring, y: yValue, className: 'uzsu-'+responseEntryIdx+' uzsu-event-'+responseEntry.event, entryIndex: responseEntryIdx, uzsuEntry: responseEntry }); + } + } + if(!hasBurst && (xMin !== undefined || xMax !== undefined)) { + if(xMin !== undefined) + seriesData.range.push({ x: xMin+rruleOffset, y: yValue, name: sv_lang.uzsu.earliest, uzsuEntry: responseEntry, className: 'uzsu-min' }); + else + seriesData.range.push({ x: xRecurring, y: yValue, uzsuEntry: responseEntry, className: 'uzsu-min uzsu-hidden', marker: { enabled: false } }); + if(xMax !== undefined) + seriesData.range.push({ x: xMax+rruleOffset, y: yValue, name: sv_lang.uzsu.latest, uzsuEntry: responseEntry, className: 'uzsu-max' }); + else + seriesData.range.push({ x: xRecurring, y: yValue, uzsuEntry: responseEntry, className: 'uzsu-max uzsu-hidden', marker: { enabled: false } }); + seriesData.range.push({ x: xMax+rruleOffset+1, y: null, uzsuEntry: responseEntry }); + } + }); + } + }); - var xMax = 1000*60*60*24 * (hasDays ? 7 : 1) + this._startTimestamp; + var navigatorMin = this._startTimestamp + var navigatorMax = navigatorMin + 7*24*60*60*1000; - // active points - var data = seriesData.active; - data.sort(function(a,b) { return a.x - b.x }); + // ****************************************************************************** + // set plot data for active points + // ****************************************************************************** + var data = seriesData.active; + data.sort(function(a,b) { return a.x - b.x }); - // add graph points at the ends (not clickable since entryIndex and uzsuEntry are missing) - if(data.length > 0) { - data.unshift({ x: data[data.length-1].x-1000*60*60*24*7, y: data[data.length-1].y, className: data[data.length-1].className }); - data.push({ x: data[1].x+1000*60*60*24*7, y: data[1].y, className: data[1].className }); - } + // add graph points at the ends (not clickable since entryIndex and uzsuEntry are missing) + // 2 points at start in order to improve fitting of spline to UZSU interpolation - chart.get('active').setData(data, false, null, false); - chart.get('active').update({ - type: this._uzsudata.interpolation.type == 'cubic' ? 'spline' : 'line', - step: this._uzsudata.interpolation.type != 'cubic' && this._uzsudata.interpolation.type != 'linear' ? 'left' : false, - }, false); - - // inactive points - data = seriesData.inactive; - data.sort(function(a,b) { return a.x - b.x }); - chart.get('inactive').setData(data, false, null, false); - - // min/max times on sun events - chart.get('range').setData(seriesData.range, false, null, false); - - plotLines = []; - sunData = []; - if(hasSunrise || hasSunset) { - for(dayIdx = 0; dayIdx < 7; dayIdx++) { - if(hasSunrise) { - plotLines.push({ - value: self._getSunTime('sunrise', dayIdx)+dayIdx*1000*60*60*24, - className: 'uzsu-event-sunrise', - label: { text: sv_lang.uzsu.sunrise } - }); - sunData.push({ x: self._getSunTime('sunrise', dayIdx)+dayIdx*1000*60*60*24, y: chart.yAxis[0].min, name: sv_lang.uzsu.sunrise, className: 'uzsu-event-sunrise', uzsuEvent: 'sunrise', marker: { symbol: 'sunrise' } }); - } - if(hasSunset) { - plotLines.push({ - value: self._getSunTime('sunset', dayIdx)+dayIdx*1000*60*60*24, - className: 'uzsu-event-sunset', - label: { text: sv_lang.uzsu.sunset } - }); - sunData.push({ x: self._getSunTime('sunset', dayIdx)+dayIdx*1000*60*60*24, y: chart.yAxis[0].min, name: sv_lang.uzsu.sunset, className: 'uzsu-event-sunset', uzsuEvent: 'sunset', marker: { symbol: 'sunset' } }) - } - } - } - chart.xAxis[0].update({ - min: this._startTimestamp, - max: 1000*60*60*24 * (hasDays ? 7 : 1) + this._startTimestamp, - plotLines: plotLines - }, false); - chart.get('sun').setData(sunData, false); - - //set active interpolation button - $.each(this.interpolationButtons, function(idx, button) { - if(button.interpolationType == self._uzsudata.interpolation.type){ - button.element.addClass("icon1"); - // button.element.attr('style', 'cursor:pointer;'); - } - else { - button.element.removeClass("icon1"); - // button.element.attr('style', 'cursor:pointer;fill:transparent;'); - } - }); + if(data.length > 0) { + navigatorMin = data[data.length-1].x-1000*60*60*24*7; + data.unshift({ x: navigatorMin, y: data[data.length-1].y, className: data[data.length-1].className }); + data.unshift({ x: data[data.length-2].x-1000*60*60*24*7, y: data[data.length-2].y, className: data[data.length-2].className }); + navigatorMax = data[2].x+1000*60*60*24*7; + data.push({ x: navigatorMax, y: data[2].y, className: data[2].className }); + // 2nd point at end would cause highcharts to break the plot area boundaries during dragging -> omit this for now + // and wait for the solution for https://github.com/highcharts/highcharts/issues/20351 + // data.push({ x: data[3].x+1000*60*60*24*7, y: data[3].y, className: data[3].className }); + } - $.each(this.customZoomButtons, function(idx, button) { - if (idx < self.customZoomButtons.length -1){ - button.xMin = self._startTimestamp + idx * 1000*60*60*24; - button.xMax = button.xMin + 1000*60*60*24; - } else { - button.xMin = self._startTimestamp; - button.xMax = button.xMin + 7 * 1000*60*60*24; + chart.get('active').setData(data, false, null, false); + chart.get('active').update({ + type: this._uzsudata.interpolation.type == 'cubic' ? 'spline' : 'line', + step: this._uzsudata.interpolation.type != 'cubic' && this._uzsudata.interpolation.type != 'linear' ? 'left' : false, + }, false); + + + // ****************************************************************************** + // set plot data for inactive points + // ****************************************************************************** + data = seriesData.inactive; + data.sort(function(a,b) { return a.x - b.x }); + chart.get('inactive').setData(data, false, null, false); + + + // ****************************************************************************** + // set plot data for min/max times on sun events and the sun times themselves + // ****************************************************************************** + chart.get('range').setData(seriesData.range, false, null, false); + + plotLines = []; + sunData = []; + if(hasSunrise || hasSunset) { + for(dayIdx = 0; dayIdx < 7; dayIdx++) { + if(hasSunrise) { + plotLines.push({ + value: self._getSunTime('sunrise', dayIdx)+dayIdx*1000*60*60*24, + className: 'uzsu-event-sunrise', + label: { text: sv_lang.uzsu.sunrise } + }); + sunData.push({ x: self._getSunTime('sunrise', dayIdx)+dayIdx*1000*60*60*24, y: chart.yAxis[0].min, name: sv_lang.uzsu.sunrise, className: 'uzsu-event-sunrise', uzsuEvent: 'sunrise', marker: { symbol: 'sunrise' } }); + } + if(hasSunset) { + plotLines.push({ + value: self._getSunTime('sunset', dayIdx)+dayIdx*1000*60*60*24, + className: 'uzsu-event-sunset', + label: { text: sv_lang.uzsu.sunset } + }); + sunData.push({ x: self._getSunTime('sunset', dayIdx)+dayIdx*1000*60*60*24, y: chart.yAxis[0].min, name: sv_lang.uzsu.sunset, className: 'uzsu-event-sunset', uzsuEvent: 'sunset', marker: { symbol: 'sunset' } }) + } } - chart.text[idx].attr({ - text: sv_lang.uzsu[button.day], - }); - }); + } + chart.get('sun').setData(sunData, false); + + + // ****************************************************************************** + // update the plot boundaries and draw the plot + // ****************************************************************************** + chart.xAxis[0].update({ + min: this._startTimestamp, + max: 1000*60*60*24 * (hasDays ? 7 : 1) + this._startTimestamp, + // floor: this._startTimestamp, + plotLines: plotLines + }, false); + + chart.update({ + navigator: { + xAxis: { + min: navigatorMin, + max: navigatorMax, + } + } + }); + + chart.xAxis[0].setExtremes(this._startTimestamp, 1000*60*60*24 * (hasDays ? 7 : 1) + this._startTimestamp) - chart.redraw(); + chart.redraw(); - self._plotNowLine(); + self._plotNowLine(); }, _save: function() { this._uzsuCollapseTimestring(this._uzsudata); this._write(this._uzsudata); - if(this._uzsuParseAndCheckResponse(this._uzsudata)) - this.draw(); + // this causes a highcharts error and is not necessary since _update() will be called anyway after writing + // if(this._uzsuParseAndCheckResponse(this._uzsudata)) + // this.draw(); }, _timeToTimestamp: function(time) { @@ -2271,19 +2309,19 @@ $.widget("sv.device_uzsugraph", $.sv.device_uzsu, { }, _getSunTime: function(event, dayIndex) { - if(!this.sunTimes){ - this.sunTimes = { 'sunrise': [], 'sunset': [] }; - for (var day in this.rruleDays){ + if(!this.sunTimes){ + this.sunTimes = { 'sunrise': [], 'sunset': [] }; + for (var day in this.rruleDays){ if (this._uzsudata.hasOwnProperty('SunCalculated')){ this.sunTimes.sunrise[this.rruleDays[day]] = this._uzsudata.SunCalculated.sunrise[day]; this.sunTimes.sunset[this.rruleDays[day]] = this._uzsudata.SunCalculated.sunset[day]; } else { - this.sunTimes.sunrise[this.rruleDays[day]] = (this._uzsudata.sunrise == undefined) ? '06:00' : this._uzsudata.sunrise; - this.sunTimes.sunset[this.rruleDays[day]] = (this._uzsudata.sunset == undefined) ? '19:30' : this._uzsudata.sunset; + this.sunTimes.sunrise[this.rruleDays[day]] = (this._uzsudata.sunrise == undefined) ? '06:00' : this._uzsudata.sunrise; + this.sunTimes.sunset[this.rruleDays[day]] = (this._uzsudata.sunset == undefined) ? '19:30' : this._uzsudata.sunset; } - } - } - return this._timeToTimestamp(this.sunTimes[event][dayIndex]); + } + } + return this._timeToTimestamp(this.sunTimes[event][dayIndex]); }, _calculateEventTime: function(timeEvent){ @@ -2314,7 +2352,7 @@ $.widget("sv.device_uzsugraph", $.sv.device_uzsu, { axis.removePlotLine('now'); axis.addPlotLine({ id: 'now', - value: (this._timeToTimestamp(String(new Date().getHours()).padStart(2,'0')+':'+String(new Date().getMinutes()).padStart(2,'0')) - this._startTimestamp + 1000*60*60*24*((new Date().getDay() + 6) % 7)) % (axis.max - this._startTimestamp) + this._startTimestamp, + value: (this._timeToTimestamp(String(new Date().getHours()).padStart(2,'0')+':'+String(new Date().getMinutes()).padStart(2,'0')) - this._startTimestamp) + this._startTimestamp, className: 'uzsu-now highcharts-color-0', label: 'now' }); From 5c399ccf11457048b0217966b76df7ecf6431d86 Mon Sep 17 00:00:00 2001 From: wvhn <17801971+wvhn@users.noreply.github.com> Date: Wed, 27 Dec 2023 18:30:36 +0100 Subject: [PATCH 006/112] remove template search path deprecated in v3.3 --- changelog.md | 1 + index.php | 27 +++++++++++++-------------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/changelog.md b/changelog.md index f749ea9e..df7c9415 100755 --- a/changelog.md +++ b/changelog.md @@ -11,6 +11,7 @@ ### Deprecated ### Removed Features +- old wiget pathnames w/o namespace (deprecated in v3.3) ### Fixed Bugs - system page was not shown due to missing infoblock.html if pages were configured to "Smarthome" but pages had not been created yet by the "smartvisu" plugin of smarthomeNG. diff --git a/index.php b/index.php index 661ffe91..b8ebc65e 100644 --- a/index.php +++ b/index.php @@ -2,8 +2,8 @@ /** * ----------------------------------------------------------------------------- * @package smartVISU - * @author Martin Gleiss - * @copyright 2012 - 2015 + * @author Martin Gleiß + * @copyright 2012 - 2023 * @license GPL [http://www.gnu.de] * ----------------------------------------------------------------------------- */ @@ -44,39 +44,39 @@ // init template engine require_once const_path.'vendor/autoload.php'; + //---------------------------------------------------------- + // create search path for all templates + //---------------------------------------------------------- $loader = new \Twig\Loader\FilesystemLoader(const_path.'apps'); if (is_dir(const_path.'pages/'.$actual_pages)) $loader->addPath(const_path.'pages/'.$actual_pages); - if (is_dir(const_path.'pages/'.$actual_pages.'/widgets')) - $loader->addPath(const_path.'pages/'.$actual_pages.'/widgets'); // deprecated as of v3.3 - remove in a later version - if (dirname($request['page']) != '.' && is_dir(const_path.'pages/'.$actual_pages.'/'.dirname($request['page']))) $loader->addPath(const_path.'pages/'.$actual_pages.'/'.dirname($request['page'])); - // add smarthome dir if it is not directly chosen. - // allows combination of custom pages with auto-generated pages from smarthomeNG + // add smarthome dir if it is not directly chosen - allows combination of custom pages with auto-generated pages from smarthomeNG if (substr(config_driver, 0, 9) == 'smarthome' and $actual_pages != 'smarthome' and is_dir(const_path."pages/smarthome")) $loader->addPath(const_path.'pages/smarthome'); - // make sure SV doesn't load stuff from dropins unless pages are configured + // make sure SV doesn't load stuff from dropins unless pages are configured if ($actual_pages != '') { $loader->addPath(const_path.'dropins'); - $loader->addPath(const_path.'dropins/widgets'); // deprecated as of v3.3 - remove in a later version - $loader->addPath(const_path.'dropins/shwidgets'); // deprecated as of v3.3 - remove in a later version } $loader->addPath(const_path.'pages/base'); - $loader->addPath(const_path.'widgets'); // deprecated as of v3.3 - remove in a later version + //---------------------------------------------------------- // create widgets path in namespace @widgets + //---------------------------------------------------------- $loader->addPath(const_path.'widgets', 'widgets'); $loader->addPath(const_path.'dropins/widgets', 'widgets'); $loader->addPath(const_path.'dropins/shwidgets', 'widgets'); if (is_dir(const_path.'pages/'.$actual_pages.'/widgets')) $loader->addPath(const_path.'pages/'.$actual_pages.'/widgets', 'widgets'); + //---------------------------------------------------------- // create icons path in namespace @icons + //---------------------------------------------------------- $loader->addPath(const_path.'icons/ws', 'icons'); $loader->addPath(const_path.'dropins/icons/ws', 'icons'); @@ -112,8 +112,7 @@ $twig->addGlobal($key, $val); } - // TO DO: better global concept for "config_pages" in order to distinguish between actual pages and configured pages - // today global value in php can be different from value with same name in Twig if the "pages" parameter is set + // attention: global value for config_pages in php can be different from value with same name in Twig if the "pages" parameter is set $twig->addGlobal('config_pages', $actual_pages); $twig->addGlobal('configured_pages', config_pages); $twig->addGlobal('pagepath', dirname($request['page'])); @@ -187,7 +186,7 @@ echo str_repeat(" ", 60).date('H:i, d.m').", v".config_version_full."\n"; echo str_repeat("-", 80)."\n\n"; echo "Error loading Page '".$request['page']."' !\n\n"; - echo "Check config.php -> 'config_pages' for correct Pages/Project configuration\n"; + echo "Check configuration page for correct pages / project configuration\n"; echo "or try the index page!\n\n"; echo str_repeat("-", 80)."\n\n"; echo "\n"; From d98e70d1a4cfafb5e751a4440c648175da3d6a08 Mon Sep 17 00:00:00 2001 From: wvhn <17801971+wvhn@users.noreply.github.com> Date: Wed, 27 Dec 2023 18:36:03 +0100 Subject: [PATCH 007/112] specify allowed database modes in the individual drivers --- changelog.md | 1 + driver/_io_template.js | 7 +++++++ driver/io_eibd.js | 15 ++++++--------- driver/io_fhem.js | 6 ++++++ driver/io_iobroker.js | 13 +++++++++++++ driver/io_json.js | 14 ++++++-------- driver/io_linknx.js | 15 +++++++-------- driver/io_offline.js | 6 ++++++ driver/io_openhab.js | 9 ++++++++- driver/io_smarthomeng.js | 7 +++++++ lib/base/base.js | 2 +- 11 files changed, 68 insertions(+), 27 deletions(-) diff --git a/changelog.md b/changelog.md index df7c9415..8f78ff79 100755 --- a/changelog.md +++ b/changelog.md @@ -5,6 +5,7 @@ - improved spline display for the starting point in device.uzsugraph ### Improvements +- allowed database modes for series moved into the individual backend drivers ### Updated Libraries diff --git a/driver/_io_template.js b/driver/_io_template.js index 7346c2bd..b1fd259b 100644 --- a/driver/_io_template.js +++ b/driver/_io_template.js @@ -81,6 +81,13 @@ var io = { // only be called from the public functions above. You may add or delete some // to fit your requirements and your connected system. + + /** + * supported aggregate functions in the backends database + * TODO: check which aggregates are valid for the backend and adapt the array + */ + aggregates: ['avg', 'min', 'max', 'sum', 'diff', 'rate', 'on', 'raw', 'count'], + // TODO /** diff --git a/driver/io_eibd.js b/driver/io_eibd.js index fd676016..7dc05b2c 100644 --- a/driver/io_eibd.js +++ b/driver/io_eibd.js @@ -110,6 +110,11 @@ var io = { lastRequestStarted: 0, reloadAllDataTime: 1800, restartRequestTime: 60, + + /** + * supported aggregate functions in the backends database + */ + aggregates: [], checkRequest: function () { @@ -374,14 +379,6 @@ var io = { requestItem = itemArray[0] + '/' + itemArray[1] + '/' + itemArray[2]; return requestItem; - }, - - /** - * stop all subscribed series - */ - stopseries: function () { - // TODO - $.noop; } - + }; diff --git a/driver/io_fhem.js b/driver/io_fhem.js index ef9d6405..3219e10a 100755 --- a/driver/io_fhem.js +++ b/driver/io_fhem.js @@ -153,6 +153,12 @@ var io = { addon: null, socketErrorNotification: null, + /** + * supported aggregate functions in the backends database + * modes implemented in the fronthem file "99_fronthemUtils.pm" + */ + aggregates: ['avg', 'min', 'max', 'sum', 'raw'], + log: function(level, text) { if (io.logLevel >= level) { console.log("[io.fhem]: " + text); diff --git a/driver/io_iobroker.js b/driver/io_iobroker.js index 6208b64c..6c088a8e 100644 --- a/driver/io_iobroker.js +++ b/driver/io_iobroker.js @@ -192,6 +192,19 @@ var io = { }, listeners: [], + + /** + * supported aggregate functions in the backends database + * https://www.iobroker.net/docu/index-83.htm?page_id=4531&lang=en + * - minmax - is ordered as 2 series: min and max + * - min + * - max + * - avergage = avg + * - total = on + * - count + */ + aggregates: ['avg', 'min', 'max', 'on', 'count'], + /** * Opens the connection and add some handlers diff --git a/driver/io_json.js b/driver/io_json.js index dc34e0a8..0c21dd7f 100644 --- a/driver/io_json.js +++ b/driver/io_json.js @@ -104,6 +104,12 @@ var io = { timer: 0, timer_run: false, errorNotification: null, + + /** + * supported aggregate functions in the backends database + */ + aggregates: [], + /** * The real-time polling loop, only if there are listeners @@ -221,12 +227,4 @@ var io = { } }, - /** - * stop all subscribed series - */ - stopseries: function () { - // TODO - $.noop; - } - }; diff --git a/driver/io_linknx.js b/driver/io_linknx.js index 44e415bf..640bbfa2 100644 --- a/driver/io_linknx.js +++ b/driver/io_linknx.js @@ -103,6 +103,13 @@ var io = { timer: 0, timer_run: false, + + /** + * supported aggregate functions in the backends database + * TODO: check which aggregates are valid for ioBroker + */ + aggregates: [], + /** * The real-time polling loop, only if there are listeners @@ -202,12 +209,4 @@ var io = { } }, - /** - * stop all subscribed series - */ - stopseries: function () { - // TODO - $.noop; - } - }; diff --git a/driver/io_offline.js b/driver/io_offline.js index 89a44d3e..869bc4cd 100644 --- a/driver/io_offline.js +++ b/driver/io_offline.js @@ -125,6 +125,12 @@ var io = { seriesTimer: [], listeners: [], + /** + * supported aggregate functions in the backends database + */ + aggregates: ['avg', 'min', 'max', 'sum', 'diff', 'rate', 'on', 'raw', 'count'], + + /** * The real-time polling loop, only if there are listeners */ diff --git a/driver/io_openhab.js b/driver/io_openhab.js index a30542c9..24e9136c 100644 --- a/driver/io_openhab.js +++ b/driver/io_openhab.js @@ -4,7 +4,7 @@ * @author Martin Gleiß, Patrik Germann * @copyright 2012 - 2022 * @license GPL [http://www.gnu.de] - * @version 2.5.1 + * @version 2.5.2 * ----------------------------------------------------------------------------- * @label openHAB * @@ -189,6 +189,13 @@ var io = { auth : false, serverTimeout : 10, serverResponseTime : 0, + + /** + * supported aggregate functions in the backends database + * since this must be configured by the user in the backend we leave some common modes as dummies + */ + aggregates: ['avg', 'min', 'max', 'sum', 'diff', 'on', 'raw', 'count'], + /** * convert states from openHAB diff --git a/driver/io_smarthomeng.js b/driver/io_smarthomeng.js index 9647e970..b1118fc7 100644 --- a/driver/io_smarthomeng.js +++ b/driver/io_smarthomeng.js @@ -135,6 +135,13 @@ var io = { */ version: 4, shngProto: null, + + /** + * supported aggregate functions in the backends database + * https://smarthomeng.github.io/smarthome/plugins/database/README.html + * TODO: check how comparator for count can be implemented, e.g. "count>10" + */ + aggregates: ['avg', 'min', 'max', 'sum', 'on', 'raw', 'count', 'countall', 'integrate', 'differentiate'], /** * This is the websocket module / plugin and the websocket opening time diff --git a/lib/base/base.js b/lib/base/base.js index 741bd02a..13fe1ded 100755 --- a/lib/base/base.js +++ b/lib/base/base.js @@ -1476,7 +1476,7 @@ var widget = { aggregate = aggregate.substr(5); if(aggregate != undefined && aggregate.length > 5 && aggregate.substr(0,5) == 'count') aggregate = aggregate.substr(0,5); - return ($.inArray(aggregate, Array('avg', 'min', 'max', 'sum', 'diff', 'rate', 'on', 'raw', 'count')) >= 0); + return ($.inArray(aggregate, io.aggregates) >= 0); }, /** From 9296e38ada7c5f7444ca531ad89de8c24e679ed4 Mon Sep 17 00:00:00 2001 From: wvhn <17801971+wvhn@users.noreply.github.com> Date: Sun, 7 Jan 2024 14:03:22 +0100 Subject: [PATCH 008/112] database mode check for templatechecker --- changelog.md | 1 + driver/io_smarthomeng.js | 2 +- lib/templatechecker/class.Config.php | 14 ++++++++++ lib/templatechecker/class.TemplateChecker.php | 15 +++++++++++ .../class.WidgetParameterChecker.php | 26 +++++++++++++++++-- readme.md | 2 +- widgets/plot.html | 4 +-- 7 files changed, 58 insertions(+), 6 deletions(-) diff --git a/changelog.md b/changelog.md index 8f78ff79..f5371d6d 100755 --- a/changelog.md +++ b/changelog.md @@ -6,6 +6,7 @@ ### Improvements - allowed database modes for series moved into the individual backend drivers +- parameter type "mode" introduced. Templatechecker reads available database modes individually for configured backend. ### Updated Libraries diff --git a/driver/io_smarthomeng.js b/driver/io_smarthomeng.js index b1118fc7..0f0b2be9 100644 --- a/driver/io_smarthomeng.js +++ b/driver/io_smarthomeng.js @@ -141,7 +141,7 @@ var io = { * https://smarthomeng.github.io/smarthome/plugins/database/README.html * TODO: check how comparator for count can be implemented, e.g. "count>10" */ - aggregates: ['avg', 'min', 'max', 'sum', 'on', 'raw', 'count', 'countall', 'integrate', 'differentiate'], + aggregates: ['avg', 'min', 'max', 'diff', 'sum', 'on', 'raw', 'count', 'countall', 'integrate', 'differentiate', 'duration'], /** * This is the websocket module / plugin and the websocket opening time diff --git a/lib/templatechecker/class.Config.php b/lib/templatechecker/class.Config.php index dfe32474..50a78567 100644 --- a/lib/templatechecker/class.Config.php +++ b/lib/templatechecker/class.Config.php @@ -66,5 +66,19 @@ class TemplateCheckerConfig { * of plot parameter sets which must be given */ const ArrayDimensionSetter = array ('quad.stateswitch' => 2, 'quad.select' => 2, 'quad.symbol' => 5, 'quad.print' => 1 ); + + /** + * Array of aggregation modes provided for plots by the individual backend systems + */ + const aggregationModes = array( + 'eibd' => array(), + 'fhem' => array('avg', 'min', 'max', 'minmax', 'minmaxavg', 'sum', 'raw'), + 'iobroker' => array('avg', 'min', 'max', 'minmax', 'minmaxavg', 'on', 'count'), + 'json' => array(), + 'linknx' => array(), + 'offline' => array('avg', 'min', 'max', 'minmax', 'minmaxavg', 'sum', 'diff', 'rate', 'on', 'raw', 'count'), + 'openhab' => array('avg', 'min', 'max', 'minmax', 'minmaxavg', 'sum', 'diff', 'on', 'raw', 'count'), + 'smarthomeng' => array('avg', 'min', 'max', 'minmax', 'minmaxavg', 'diff', 'sum', 'on', 'raw', 'count', 'countall', 'integrate', 'differentiate', 'duration') + ); } \ No newline at end of file diff --git a/lib/templatechecker/class.TemplateChecker.php b/lib/templatechecker/class.TemplateChecker.php index 644e6e09..6c9e57c8 100644 --- a/lib/templatechecker/class.TemplateChecker.php +++ b/lib/templatechecker/class.TemplateChecker.php @@ -30,6 +30,8 @@ class TemplateChecker { * @var type */ private $fileName; + + private $driver; /** * DOMDocument object for file @@ -41,6 +43,14 @@ class TemplateChecker { * Object for the Icons */ private $items; + + /** + * get configured driver + * @return string + */ + public function getDriver() { + return $this->driver; + } /** * Perform template checks for single file @@ -74,6 +84,11 @@ public function __construct($fileName, MessageCollection $messages, $checkItems) $this->items = new Items(pathinfo($fileName)["dirname"]); //new if ($checkItems == "false") { $this->items->setState(FALSE);} + + // some checks require info of the configured driver (e.g. database aggregation modes in backend) + // get the configured driver if templaechecker is called from the configured pages or use offline driver instead + $fileFolder = str_replace('/widgets', '', $widgetFolder); + $this->driver = (substr($fileFolder, 6, ) == config_pages ? config_driver : 'offline'); } /** diff --git a/lib/templatechecker/class.WidgetParameterChecker.php b/lib/templatechecker/class.WidgetParameterChecker.php index 9f0b406b..fd5b3468 100644 --- a/lib/templatechecker/class.WidgetParameterChecker.php +++ b/lib/templatechecker/class.WidgetParameterChecker.php @@ -119,7 +119,7 @@ public static function performChecks($widget, $paramIndex, $paramConfig, $messag * @param array $paramConfig Config for parameter to check * @param MessageCollection $messages Collection of messages to add messages to */ - private function __construct($widget, $paramIndex, $paramConfig, $messages,$items, $templateCecker) { + private function __construct($widget, $paramIndex, $paramConfig, $messages, $items, $templateCecker) { $this->widget = $widget; $this->paramIndex = $paramIndex; $this->paramConfig = $paramConfig; @@ -165,7 +165,7 @@ private function run() { $uzsuitem = $this->widget->getParam($this->paramIndex - 1); if ($uzsuitem == null || $uzsuitem == '') return; - // we can check only one of the items as dummy in the recursive uzsu eidget check + // we can check only one of the items as dummy in the recursive uzsu widget check // so item names in the info lines may differ from the real items // items have been checked as individual parameters before if (is_array($uzsuitem)){ @@ -200,6 +200,9 @@ private function run() { case 'item': $this->checkParameterTypeItem($value); //new break; + case 'mode': + $this->checkParameterTypeMode($value); //new + break; case 'type': $this->checkParameterTypeType($value); break; @@ -499,6 +502,25 @@ private function checkParameterTypeType($value) { $this->addError('WIDGET TYPE PARAM CHECK', 'Unknown type', $value); } + + /** + * Check widget parameter of type "mode" (database aggregations provided by the backend) + * @param $value mixed parameter value + */ + private function checkParameterTypeMode($value) { + if (!$this->checkParameterNotEmpty($value)) + return; + + $driver = $this->templateCecker->getDriver(); + if (in_array($value, TemplateCheckerConfig::aggregationModes[$driver])) + return; + + // additional widget-specific valid values + if ($this->checkParameterValidValues($value)) + return; + + $this->addError('WIDGET MODE PARAM CHECK', 'Mode not supported by backend "'.$driver.'"', $value); + } /** * Check widget parameter of type "color" diff --git a/readme.md b/readme.md index dd197458..a1a37162 100644 --- a/readme.md +++ b/readme.md @@ -26,7 +26,7 @@ SEE: [smartvisu.de](http://www.smartvisu.de) ## SYSTEM REQUIREMENTS * IP-Network, KNX-Bus * [smarthomeNG](https://github.com/smarthomeNG), [linknx](http://sourceforge.net/projects/linknx/), [ioBroker](https://github.com/ioBroker/ioBroker), [openHAB](https://www.openhab.org/), [FHEM](https://fhem.de/) or [knxd](https://github.com/knxd/knxd) (deprecated: [eibd](http://www.auto.tuwien.ac.at/~mkoegler/index.php/eibd) ) backend or JSON interface - * Webserver with PHP 7.3.2 and above. Compatibility with php v8.0 is verified. PHP packages required: libawl-php php-curl php php-json php-xml php-mbstring + * Webserver with PHP 7.3.2 and above. Compatibility with php v8.2 is verified. PHP packages required: libawl-php php-curl php php-json php-xml php-mbstring * Firefox, Chrome, IE, Safari, iPhone, iPad, Android Phone or Android Tablet diff --git a/widgets/plot.html b/widgets/plot.html index 05011536..20106fc0 100644 --- a/widgets/plot.html +++ b/widgets/plot.html @@ -74,7 +74,7 @@ * * @param {id=} unique id for this widget. Add the string "plotpopup" to activate on-demand plot data loading, i.e. plot data are not loaded during page creation but when the popup containing the plot is opened. (optional) * @param {item[?](bool,num,list)} series of item(s); multiple items in array form: [ item1 , item2 ] -* @param {text[?](avg,sum,min,max,minmax,minmaxavg,raw,on)=avg} the aggregation mode (optional, default 'avg') +* @param {mode[?]=avg} the aggregation mode (optional, default 'avg') May be a single mode or an array with separate mode per item. Available modes depend on backend, common ones are 'avg', 'sum', 'min', 'max', 'minmax', 'minmaxavg', 'on', 'raw'. See backend's documentation for further information. * @param {duration=1h} the minimum time (x-axis): '1h', '2h'... (duration-format) Value is interpreted as timestamp if no unit is given (e.g. 1629109298731). @@ -234,7 +234,7 @@ * * @param {id=} unique id for this widget (optional) * @param {item(bool,num,list)} series of item(s); multiple items in array form: [ item1 , item2 ] -* @param {text(avg,sum,min,max,raw,on)=avg} the aggregation mode (optional, default 'avg') +* @param {mode[?]=avg} the aggregation mode (optional, default 'avg') Available modes depend on backend, common ones are 'avg', 'sum', 'min', 'max', 'minmax', 'minmaxavg', 'on', 'raw'. See backend's documentation for further information. * @param {duration=1h} the minimum time (x-axis): '1h', '2h'... (duration-format) Value is interpreted as timestamp if no unit is given (e.g. 1629109298731). * @param {duration=now} the maximum time (x-axis): '', '1h', '2h'... (duration-format, default: now). Value is interpreted as timestamp if no unit is given (e.g. 1629109298731). From 1c30329d1f1726d40269be169d5e8d82d5cef829 Mon Sep 17 00:00:00 2001 From: wvhn <17801971+wvhn@users.noreply.github.com> Date: Sun, 7 Jan 2024 19:10:16 +0100 Subject: [PATCH 009/112] fix status.activelist w/ default png icon --- changelog.md | 1 + pages/base/base.css | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/changelog.md b/changelog.md index f5371d6d..838b44f6 100755 --- a/changelog.md +++ b/changelog.md @@ -19,6 +19,7 @@ - system page was not shown due to missing infoblock.html if pages were configured to "Smarthome" but pages had not been created yet by the "smartvisu" plugin of smarthomeNG. - behaviour of device.uzsugraph interpolation style was inconsistent if more than one uzsugraph widget was on a page. - device.uzsugraph threw an error while a point was dragged +- status.activelist did not display texts if no svg icon was selected, i.e. the default icon "trans.png" was displayed ### Known Bugs - if item contains a stringified number (e.g. with leading zero). widget.set converts it back to numeric format - so basic.print can not print it as text diff --git a/pages/base/base.css b/pages/base/base.css index df979342..b7c4554c 100644 --- a/pages/base/base.css +++ b/pages/base/base.css @@ -250,7 +250,8 @@ a:hover { .ui-listview .ui-li-has-thumb > svg:first-child, .ui-listview .ui-li-has-thumb>.ui-btn>svg:first-child, -.ui-listview .ui-btn>svg.icon +.ui-listview .ui-btn>svg.icon, +.ui-listview .ui-btn>img.icon { position: absolute; left: 0; From 579ba800e5d1247b82681b5dadca30cd511467ed Mon Sep 17 00:00:00 2001 From: pacifica15
Examples
{{ basic.tank('tank4', 'bath.value', 0, 255, 5, 'water') }} {{ basic.tank('tank5', 'bath.value', 0, 255, 5, 'water', '#0c0') }} {{ basic.tank('tank6', 'bath.value', 0, 255, 5, 'pallets') }} - + {{ basic.tank('tank7', 'bath.value', 0, 255, 5, 'cylinder', ['#c00','#cc0','#0c0','#cc0','#c00'], [80,100,155,200]) }} {% endverbatim %}{% endfilter %}@@ -32,7 +32,8 @@
Examples
{{ basic.slider('slider1', 'bath.value', 0, 255, 5) }} - From left to right: 'none', 'cylinder', 'cylinder' orange, 'water', 'water' green, 'pallets' + From left to right: 'none', 'cylinder', 'cylinder' orange, 'water', 'water' green, 'pallets', 'cylinder'+ The last one will have different colors depending on the value <80: red, 80-99: yellow, 100-154: green, 155-199: yellow, >=200: red
{{ basic.tank('tank1', 'bath.value') }}
@@ -41,6 +42,7 @@
diff --git a/widgets/basic.html b/widgets/basic.html
index 5ea3058f..c48c000b 100755
--- a/widgets/basic.html
+++ b/widgets/basic.html
@@ -618,7 +618,7 @@
* If more than one item is given, they will be combined with formula.
*
* @param {id=} unique id for this widget (optional)
-* @param {item[?](bool,num,list,scene)=} zero, one or more item(s). More items in array form: [item1, item2] (optional)
+* @param {item[?](bool,num,str,list,scene)=} zero, one or more item(s). More items in array form: [item1, item2] (optional)
* @param {text[?]=} the text, printed when item has value val (optional)
* @param {image[?]=control_on_off} the icon shown when item has value val (optional, default 'control_on_off' if text is empty)
dynamic icons can be used, e.g. icon.light('', '', value_item); please note: these must not be wrapped by apostrophs (')
@@ -684,23 +684,26 @@
* @param {value=255} the value for full (optional, default 255)
* @param {value=5} step between two values (optional, default 5, for future use)
* @param {text(none,cylinder,water,pallets)=none} the mode: 'none', 'cylinder', 'water', 'pallets' (optional, default 'none')
-* @param {color=grey} the color of the filling e. g. '#f00' for red (optional, default grey)
+* @param {color[?]=} array of colors; e. g. '#f00' for red (optional)
+* @param {text[]=} array of upper thresholds; the color according to greatest reached threshold is applied (optional)
*/
-{% macro tank(id, item_pos, min, max, step, mode, color) %}
- Examples
{{ basic.tank('tank4', 'bath.value', 0, 255, 5, 'water') }} {{ basic.tank('tank5', 'bath.value', 0, 255, 5, 'water', '#0c0') }} {{ basic.tank('tank6', 'bath.value', 0, 255, 5, 'pallets') }} + {{ basic.tank('tank7', 'bath.value', 0, 255, 5, 'cylinder', ['#c00','#cc0','#0c0','#cc0','#c00'], [80,100,155,200]) }}Examples
{{ basic.tank('tank3', 'bath.value', 0, 255, 5, 'cylinder', '#f90' ) }} {{ basic.tank('tank4', 'bath.value', 0, 255, 5, 'water') }} {{ basic.tank('tank5', 'bath.value', 0, 255, 5, 'water', '#0c0') }} - {{ basic.tank('tank6', 'bath.value', 0, 255, 5, 'pallets') }} + {{ basic.tank('tank6', 'bath.value', 0, 255, 5, 'pellets') }} {{ basic.tank('tank7', 'bath.value', 0, 255, 5, 'cylinder', ['#c00','#cc0','#0c0','#cc0','#c00'], [80,100,155,200]) }} {% endverbatim %}{% endfilter %} @@ -32,7 +32,7 @@Examples
{{ basic.slider('slider1', 'bath.value', 0, 255, 5) }} - From left to right: 'none', 'cylinder', 'cylinder' orange, 'water', 'water' green, 'pallets', 'cylinder'+ From left to right: 'none', 'cylinder', 'cylinder' orange, 'water', 'water' green, 'pellets', 'cylinder'
The last one will have different colors depending on the value <80: red, 80-99: yellow, 100-154: green, 155-199: yellow, >=200: red
@@ -41,7 +41,7 @@
diff --git a/widgets/basic.html b/widgets/basic.html
index c48c000b..6f80504b 100755
--- a/widgets/basic.html
+++ b/widgets/basic.html
@@ -618,7 +618,7 @@
* If more than one item is given, they will be combined with formula.
*
* @param {id=} unique id for this widget (optional)
-* @param {item[?](bool,num,str,list,scene)=} zero, one or more item(s). More items in array form: [item1, item2] (optional)
+* @param {item[?](bool,num,list,scene)=} zero, one or more item(s). More items in array form: [item1, item2] (optional)
* @param {text[?]=} the text, printed when item has value val (optional)
* @param {image[?]=control_on_off} the icon shown when item has value val (optional, default 'control_on_off' if text is empty)
dynamic icons can be used, e.g. icon.light('', '', value_item); please note: these must not be wrapped by apostrophs (')
@@ -683,22 +683,23 @@
* @param {value=0} the value for empty (optional, default 0)
* @param {value=255} the value for full (optional, default 255)
* @param {value=5} step between two values (optional, default 5, for future use)
-* @param {text(none,cylinder,water,pallets)=none} the mode: 'none', 'cylinder', 'water', 'pallets' (optional, default 'none')
-* @param {color[?]=} array of colors; e. g. '#f00' for red (optional)
-* @param {text[]=} array of upper thresholds; the color according to greatest reached threshold is applied (optional)
+* @param {text(none,cylinder,water,pellets)=none} the mode: 'none', 'cylinder', 'water', 'pellets' (optional, default 'none')
+* @param {color[?]=} single color or array of colors; e. g. '#f00' for red. If thresholds are used provide one color more than thresholds (optional)
+* @param {text[]=} array of upper thresholds; the color according to highest reached threshold is applied (optional)
*/
{% macro tank(id, item_pos, min, max, step, mode, color, threshold) %}
- Examples
{{ basic.tank('tank3', 'bath.value', 0, 255, 5, 'cylinder', '#f90' ) }} {{ basic.tank('tank4', 'bath.value', 0, 255, 5, 'water') }} {{ basic.tank('tank5', 'bath.value', 0, 255, 5, 'water', '#0c0') }} - {{ basic.tank('tank6', 'bath.value', 0, 255, 5, 'pallets') }} + {{ basic.tank('tank6', 'bath.value', 0, 255, 5, 'pellets') }} {{ basic.tank('tank7', 'bath.value', 0, 255, 5, 'cylinder', ['#c00','#cc0','#0c0','#cc0','#c00'], [80,100,155,200]) }}Examples
Icons located in "{{ icon0 }}"
-
Important: These images are available as .svg-image only. By default smartVisu does not come with .png-images. +
Important: These images are available as .svg-image only. By default smartVISU does not come with .png-images.
{% set cat = 'au' %}
@@ -205,6 +205,19 @@ Important: These images are available as .svg-image only. By default smartVisu does not come with .png-images. +
Important: These images are available as .svg-image only. By default smartVISU does not come with .png-images.
Examples
{{ file.name }}
{% endfor %}
+
+ Custom SVG icons provided by you in "dropins/{{ icon0 }}"
+
+ {% set iconlist = dir('dropins/'~icon0, '(.*\.svg)') %}
+ {% for file in iconlist %}
+
+ {{ lib.svgimg('', file.name, 'icon0') }}
+
+ {% endfor %}
+
-
- {% if export == 2 %}
-
- {% endif %}
- {% endif %}
- {% set source = source|default('database') %}
- {% set tmax = (tmax|default('now')|lower=='0h' or tmax==0 or tmax is empty) ? 'now' : tmax %}
- {% set tmin = tmin|default('1h') %}
-
- {% set mode = (mode is iterable ? mode : [mode|default('avg')]) %}
- {% set count = (count is iterable ? count : [count|default(100)]) %}
- {% set unit = (unit is iterable ? unit : [unit|default('')]) %}
- {% set units = [] %}
- {% for uniti in unit %}
- {% set units = units|merge([uniti|replace({',' : ';'})]) %} /** hide comma before implode/explode to allow format strings, e.g. %01,02f% */
- {% endfor %}
- {% set stacking = (stacking is iterable ? stacking : [stacking|default('normal')]) %}
- {% set stacks = (stacks is iterable ? stacks : [stacks|default('0')]) %}
- {% set item = (item is iterable ? item : [item]) %}
- {% set seriesitems = [] %}
- {% for itemi in item %}
- {% if mode|length < loop.index %}
- {% set mode = mode|merge([mode|last]) %}
- {% endif %}
- {% set modei = mode[loop.index0] %}
-
- {% if count|length < loop.index %}
- {% set count = count|merge([count|last]) %}
- {% endif %}
- {% set counti = count[loop.index0] %}
-
- {% if source == 'database' %}
- {% if modei == 'minmax' %}
- {% set seriesitems = seriesitems|merge([ implode(itemi, ['min', tmin, tmax, counti]), implode(itemi, ['max', tmin, tmax, counti]) ]) %}
- {% elseif modei == 'minmaxavg' %}
- {% set seriesitems = seriesitems|merge([ implode(itemi, ['min', tmin, tmax, counti]), implode(itemi, ['max', tmin, tmax, counti]), implode(itemi, ['avg', tmin, tmax, counti]) ]) %}
- {% else %}
- {% set seriesitems = seriesitems|merge([implode(itemi, [modei, tmin, tmax, counti])]) %}
- {% endif %}
- {% else %}
- {% set seriesitems = seriesitems|merge([itemi]) %}
- {% endif %}
- {% endfor %}
+ {%- if (not export is empty) and export > 0 -%}
+ {%- if once('plotimageexport') -%}
+
+
+ {%- endif -%}
+ {%- if export == 2 -%}
+ {%- if once('plotdataexport') -%}
+
+ {%- endif -%}
+ {%- endif -%}
+ {%- endif -%}
+
+ {%- set source = source|default('database') -%}
+ {%- set tmax = (tmax|default('now')|lower=='0h' or tmax==0 or tmax is empty) ? 'now' : tmax -%}
+ {%- set tmin = tmin|default('1h') -%}
+
+ {%- set mode = (mode is iterable ? mode : [mode|default('avg')]) -%}
+ {%- set count = (count is iterable ? count : [count|default(100)]) -%}
+ {%- set unit = (unit is iterable ? unit : [unit|default('')]) -%}
+ {%- set units = [] -%}
+ {%- for uniti in unit -%}
+ {%- set units = units|merge([uniti|replace({',' : ';'})]) -%} /** hide comma before implode/explode to allow format strings, e.g. %01,02f% */
+ {%- endfor -%}
+ {%- set stacking = (stacking is iterable ? stacking : [stacking|default('normal')]) -%}
+ {%- set stacks = (stacks is iterable ? stacks : [stacks|default('0')]) -%}
+ {%- set item = (item is iterable ? item : [item]) -%}
+ {%- set seriesitems = [] -%}
+ {%- for itemi in item -%}
+ {%- if mode|length < loop.index -%}
+ {%- set mode = mode|merge([mode|last]) -%}
+ {%- endif -%}
+ {%- set modei = mode[loop.index0] -%}
+
+ {%- if count|length < loop.index -%}
+ {%- set count = count|merge([count|last]) -%}
+ {%- endif -%}
+ {%- set counti = count[loop.index0] -%}
+ {%- if mode == 'raw' or counti >= 5000 -%}
+ {%- if once('plotboost') -%}
+
+ {%- endif -%}
+ {%- endif -%}
+ {%- if source == 'database' -%}
+ {%- if modei == 'minmax' -%}
+ {%- set seriesitems = seriesitems|merge([ implode(itemi, ['min', tmin, tmax, counti]), implode(itemi, ['max', tmin, tmax, counti]) ]) -%}
+ {%- elseif modei == 'minmaxavg' -%}
+ {%- set seriesitems = seriesitems|merge([ implode(itemi, ['min', tmin, tmax, counti]), implode(itemi, ['max', tmin, tmax, counti]), implode(itemi, ['avg', tmin, tmax, counti]) ]) -%}
+ {%- else -%}
+ {%- set seriesitems = seriesitems|merge([implode(itemi, [modei, tmin, tmax, counti])]) -%}
+ {%- endif -%}
+ {%- else -%}
+ {%- set seriesitems = seriesitems|merge([itemi]) -%}
+ {%- endif -%}
+ {%- endfor -%}
{{ file.name }}
+ '; - } - }, - navigation: { // options for export context menu + yAxis: yaxis, + legend: { + enabled: label.length > 0, + align: 'center', + verticalAlign: 'top', + floating: true, + }, + boost: { + debug: { + timeRendering:false, + timeSeriesProcessing:false, + timeSetup:false + }, + enabled:true + }, + tooltip: { + shared: true, + split: false, + pointFormatter: function() { + var unit = this.series.yAxis.userOptions.svUnit; + var value = (this.series.yAxis.categories) ? this.series.yAxis.categories[this.y] : parseFloat(this.y).transUnit(unit); + return '\u25CF ' + this.series.name + ': ' + value + '
'; + } + }, + navigation: { // options for export context menu buttonOptions: { enabled: exportmenu, height: 22, @@ -1851,8 +1872,12 @@ $.widget("sv.plot_xyplot", $.sv.widget, { var itemCount = response.length; for (var i = 0; i < itemCount; i++) { - if (response[i]) - chart.series[i].setData(response[i], false); + if (response[i]){ + chart.series[i].setData(response[i], false); + // disable data grouping for series with 5000 points and more if boost mode is enabled in order to let boost mode work + if (response[i].length >= 5000 && chart.series[i].options.dataGrouping.enabled && chart.options.boost.enabled) + chart.series[i].update({"dataGrouping": {"enabled": false}}, false); + } } chart.redraw(); }, From 964a6432b35755d7864fcbfa6bec8fdabe177a62 Mon Sep 17 00:00:00 2001 From: wvhn <17801971+wvhn@users.noreply.github.com> Date: Fri, 8 Mar 2024 08:33:50 +0100 Subject: [PATCH 039/112] swap min/max temp in forecast --- lib/weather/service/open-meteo.com.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/weather/service/open-meteo.com.php b/lib/weather/service/open-meteo.com.php index bb4b94bc..ca56c41f 100644 --- a/lib/weather/service/open-meteo.com.php +++ b/lib/weather/service/open-meteo.com.php @@ -112,7 +112,7 @@ public function run() $this->data['forecast'][$i]['date'] = $day; $this->data['forecast'][$i]['conditions'] = translate(WMO::weatherCode[$parsed_json->{'daily'}->{'weather_code'}[$index]]['condition'], 'met.no'); $this->data['forecast'][$i]['icon'] = WMO::weatherCode[$parsed_json->{'daily'}->{'weather_code'}[$index]]['icon']; - $this->data['forecast'][$i]['temp'] = round((float)$parsed_json->{'daily'}->{'temperature_2m_min'}[$index], 0) . '°/' . round((float)$parsed_json->{'daily'}->{'temperature_2m_max'}[$index], 0) . '°'; + $this->data['forecast'][$i]['temp'] = round((float)$parsed_json->{'daily'}->{'temperature_2m_max'}[$index], 0) . '°/' . round((float)$parsed_json->{'daily'}->{'temperature_2m_min'}[$index], 0) . '°'; $i++; } From a69607bb110d59d71482414596f32bc13c87ca66 Mon Sep 17 00:00:00 2001 From: wvhn <17801971+wvhn@users.noreply.github.com> Date: Mon, 18 Mar 2024 18:27:30 +0100 Subject: [PATCH 040/112] check twig syntax of html pages --- changelog.md | 1 + lib/templatechecker/class.TemplateChecker.php | 55 +++++++++++++++++++ lib/templatechecker/templatechecker.php | 4 +- 3 files changed, 58 insertions(+), 2 deletions(-) diff --git a/changelog.md b/changelog.md index b642df41..ddb4700c 100755 --- a/changelog.md +++ b/changelog.md @@ -15,6 +15,7 @@ - parameter type "mode" introduced. Templatechecker reads available database modes individually for configured backend. - docu page design>icons shows all icons in dropins/icons/ws (or .../sw, whatever is configured) - Highcharts module boost.js is activated on demand for series with 5000 or more data points to speed up rendering (plot.period, plot.sparkline). In plot.xyplot we can not do this since there is no size info. But most likely list items with xy-data are not so big. +- templatechecker now checks the twig syntax of html pages ### Updated Libraries diff --git a/lib/templatechecker/class.TemplateChecker.php b/lib/templatechecker/class.TemplateChecker.php index 6c9e57c8..8379c983 100644 --- a/lib/templatechecker/class.TemplateChecker.php +++ b/lib/templatechecker/class.TemplateChecker.php @@ -121,12 +121,62 @@ public function performTests() { return; } + if (!$this->checkTwigTemplate($absFile)) + return; + if (!$this->readFile($absFile)) return; $this->checkNode($this->domDocument->documentElement); } + private function checkTwigTemplate($absFile) { + $templatePath = pathinfo($absFile, PATHINFO_DIRNAME); + $loader = new \Twig\Loader\FilesystemLoader($templatePath); + $twig = new \Twig\Environment($loader); + $twig->addFilter( new \Twig\TwigFilter('_', 'twig_concat')); + $twig->addFilter( new \Twig\TwigFilter('bit', 'twig_bit')); + $twig->addFilter( new \Twig\TwigFilter('substr', 'twig_substr')); + $twig->addFilter( new \Twig\TwigFilter('smartdate', 'twig_smartdate')); + $twig->addFilter( new \Twig\TwigFilter('deficon', 'twig_deficon', array('needs_environment' => true))); + $twig->addFilter( new \Twig\TwigFilter('md5', 'twig_md5')); + $twig->addFilter( new \Twig\TwigFilter('preg_replace', 'twig_preg_replace')); + + $twig->addFunction( new \Twig\TwigFunction('uid', 'twig_uid')); + $twig->addFunction( new \Twig\TwigFunction('once', 'twig_once')); + $twig->addFunction( new \Twig\TwigFunction('isfile', 'twig_isfile')); + $twig->addFunction( new \Twig\TwigFunction('isdir', 'twig_isdir')); + $twig->addFunction( new \Twig\TwigFunction('dir', 'twig_dir')); + $twig->addFunction( new \Twig\TwigFunction('docu', 'twig_docu')); + $twig->addFunction( new \Twig\TwigFunction('configmeta', 'twig_configmeta')); + $twig->addFunction( new \Twig\TwigFunction('lang', 'twig_lang')); + $twig->addFunction( new \Twig\TwigFunction('read_config', 'twig_read_config')); + $twig->addFunction( new \Twig\TwigFunction('timezones', 'twig_timezones')); + $twig->addFunction( new \Twig\TwigFunction('implode', 'twig_implode', array('is_safe' => array('html')))); + $twig->addFunction( new \Twig\TwigFunction('items', 'twig_items')); + $twig->addFunction( new \Twig\TwigFunction('asset_exists', 'twig_asset_exists')); + $twig->addFunction( new \Twig\TwigFunction('localize_svg', 'twig_localize_svg')); + + // init lexer comments + $lexer = new \Twig\Lexer($twig, array('tag_comment' => array('/**', '*/'))); + $twig->setLexer($lexer); + $templateName = pathinfo($absFile, PATHINFO_BASENAME); + + try { + // Lade das Template + $template = $twig->load($templateName); + + // Prüfe die Syntax des Templates + $template->getSourceContext()->getCode(); + + //if (Settings::SHOW_SUCCESS_TOO) + // $this->messages->addInfo('TWIG PARSER', 'Twig syntax is valid.'); + } catch (\Twig\Error\SyntaxError $e) { + $this->messages->addError('TWIG TEMPLATE PARSER', 'Twig syntax error: '. $e->getMessage(), $e->getLine()); + } + return true; + } + /** * Open file * @return \DOMDocument @@ -244,8 +294,13 @@ public function checkWidget($node, $macro) { return; $widgetName = $widget->getName(); + + // strip calling macros name in recursive check if (strpos($widgetName, '->') > 0 ) $widgetName = substr($widgetName, strpos($widgetName, '->') + 2); + + // a test with twig tokenize as marcro syntax checker in this place showed no significant advantage + // https://stackoverflow.com/questions/27191916/check-if-string-has-valid-twig-syntax $widgetConfig = $this->getWidgetConfig($widgetName); diff --git a/lib/templatechecker/templatechecker.php b/lib/templatechecker/templatechecker.php index 363ad563..95dd49c6 100644 --- a/lib/templatechecker/templatechecker.php +++ b/lib/templatechecker/templatechecker.php @@ -4,7 +4,7 @@ * ----------------------------------------------------------------------------- * @package smartVISU * @author Thomas Ernst - * @copyright 2016 + * @copyright 2016 - 2024 * @license GPL [http://www.gnu.de] * ----------------------------------------------------------------------------- */ @@ -19,7 +19,7 @@ require_once 'class.Items.php'; require_once 'class.OldWidgets.php'; require_once 'class.itemProperties.php'; - +require_once const_path.'vendor/autoload.php'; RequestHandler::run(); From 8ea179ae01ae08a99224d58aa375ad4ad211f84c Mon Sep 17 00:00:00 2001 From: wvhn <17801971+wvhn@users.noreply.github.com> Date: Sat, 23 Mar 2024 19:36:53 +0100 Subject: [PATCH 041/112] deactivate console.log suppression in debug mode --- assets.php | 2 +- changelog.md | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/assets.php b/assets.php index 9012ee09..8898ce25 100644 --- a/assets.php +++ b/assets.php @@ -28,7 +28,7 @@ require_once $path . '/path-converter/src/ConverterInterface.php'; require_once $path . '/path-converter/src/Converter.php'; -if($type == 'javascript') +if($type == 'javascript' && !config_debug) array_unshift($request['files'], 'console.log = function() {};'); foreach($request['files'] as $fileName) { diff --git a/changelog.md b/changelog.md index ddb4700c..86118cf0 100755 --- a/changelog.md +++ b/changelog.md @@ -16,6 +16,7 @@ - docu page design>icons shows all icons in dropins/icons/ws (or .../sw, whatever is configured) - Highcharts module boost.js is activated on demand for series with 5000 or more data points to speed up rendering (plot.period, plot.sparkline). In plot.xyplot we can not do this since there is no size info. But most likely list items with xy-data are not so big. - templatechecker now checks the twig syntax of html pages +- console.log is activated in cache mode if parameter "debug" is set to "1" in config.ini ### Updated Libraries From 04465b344d1f7f75f014566facbda7f180568685 Mon Sep 17 00:00:00 2001 From: wvhn <17801971+wvhn@users.noreply.github.com> Date: Sat, 23 Mar 2024 19:48:50 +0100 Subject: [PATCH 042/112] Revert "deactivate console.log suppression in debug mode" This reverts commit 8ea179ae01ae08a99224d58aa375ad4ad211f84c. --- assets.php | 2 +- changelog.md | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/assets.php b/assets.php index 8898ce25..9012ee09 100644 --- a/assets.php +++ b/assets.php @@ -28,7 +28,7 @@ require_once $path . '/path-converter/src/ConverterInterface.php'; require_once $path . '/path-converter/src/Converter.php'; -if($type == 'javascript' && !config_debug) +if($type == 'javascript') array_unshift($request['files'], 'console.log = function() {};'); foreach($request['files'] as $fileName) { diff --git a/changelog.md b/changelog.md index 86118cf0..ddb4700c 100755 --- a/changelog.md +++ b/changelog.md @@ -16,7 +16,6 @@ - docu page design>icons shows all icons in dropins/icons/ws (or .../sw, whatever is configured) - Highcharts module boost.js is activated on demand for series with 5000 or more data points to speed up rendering (plot.period, plot.sparkline). In plot.xyplot we can not do this since there is no size info. But most likely list items with xy-data are not so big. - templatechecker now checks the twig syntax of html pages -- console.log is activated in cache mode if parameter "debug" is set to "1" in config.ini ### Updated Libraries From bfaca2a82dc447fe4856b59b76abf1fb7a1fefa8 Mon Sep 17 00:00:00 2001 From: wvhn <17801971+wvhn@users.noreply.github.com> Date: Sat, 23 Mar 2024 19:51:40 +0100 Subject: [PATCH 043/112] deactivate console.log() suppression in debug mode --- assets.php | 2 +- changelog.md | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/assets.php b/assets.php index 9012ee09..a9188491 100644 --- a/assets.php +++ b/assets.php @@ -28,7 +28,7 @@ require_once $path . '/path-converter/src/ConverterInterface.php'; require_once $path . '/path-converter/src/Converter.php'; -if($type == 'javascript') +if($type == 'javascript' && defined('config_debug') && !config_debug) array_unshift($request['files'], 'console.log = function() {};'); foreach($request['files'] as $fileName) { diff --git a/changelog.md b/changelog.md index ddb4700c..86118cf0 100755 --- a/changelog.md +++ b/changelog.md @@ -16,6 +16,7 @@ - docu page design>icons shows all icons in dropins/icons/ws (or .../sw, whatever is configured) - Highcharts module boost.js is activated on demand for series with 5000 or more data points to speed up rendering (plot.period, plot.sparkline). In plot.xyplot we can not do this since there is no size info. But most likely list items with xy-data are not so big. - templatechecker now checks the twig syntax of html pages +- console.log is activated in cache mode if parameter "debug" is set to "1" in config.ini ### Updated Libraries From 903547812db4a8185cf0681e4d8b4474aea3d495 Mon Sep 17 00:00:00 2001 From: wvhn <17801971+wvhn@users.noreply.github.com> Date: Sun, 24 Mar 2024 17:00:40 +0100 Subject: [PATCH 044/112] fix notify.add() --- changelog.md | 1 + lib/base/base.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/changelog.md b/changelog.md index 86118cf0..ff92bd5d 100755 --- a/changelog.md +++ b/changelog.md @@ -39,6 +39,7 @@ - template checker gave faulty replacement hint for removed widget basic.text - template checker threw errors if an item property was not in the properties class - plot.period and plot.xyplot drawed the plots twice after series update +- notify.add() notification threw errors if message was not of type "text" ### Known Bugs - if item contains a stringified number (e.g. with leading zero). widget.set converts it back to numeric format - so basic.print can not print it as text diff --git a/lib/base/base.js b/lib/base/base.js index 83029008..60eae453 100755 --- a/lib/base/base.js +++ b/lib/base/base.js @@ -1032,7 +1032,7 @@ var notify = { * Add a new message */ add: function (level, signal, title, text, ackitem, ackval) { - if (text.toLowerCase().trim().substr(-16 ) == 'operation failed') + if (text.toString().toLowerCase().trim().substr(-16 ) == 'operation failed') text += '
Notice:
The message "operation failed" is thrown if a connect fails before the request can be executed. ' +'Very often, this is due to failed ssl communication. Try calling the service directly in debug mode for more information.
' +'Example:
YourIP/YourSmartvisuDir/lib/weather/service/YourService.php?debug=1'; From 1293d03389d8a3bcd6d5409e424b8ab8e2214cf9 Mon Sep 17 00:00:00 2001 From: wvhn <17801971+wvhn@users.noreply.github.com> Date: Mon, 25 Mar 2024 10:38:35 +0100 Subject: [PATCH 045/112] new functions for ioBroker driver - series subscribing/unsubscribing for individual plots (-> plot.timeshift) - busy signal until loading of items is completed --- changelog.md | 3 +- driver/io_iobroker.js | 146 +++++++++++++++++++++++++++++++----------- 2 files changed, 112 insertions(+), 37 deletions(-) diff --git a/changelog.md b/changelog.md index ff92bd5d..be9d9d0b 100755 --- a/changelog.md +++ b/changelog.md @@ -7,8 +7,9 @@ ### Other New Features - improved spline display for the starting point in device.uzsugraph - new icons scene_cooking_drink and scene_robovac_dock (thanks to @Pacifia15)) -- smarthomeNG driver: new configurable option "signalBusy" lets "VISU" logo in the top-right corner blink after a new page is loaded (i.e. "monitor" command has been sent) until all subscribed items have been received. +- smarthomeNG and ioBroker drivers: new configurable option "signalBusy" lets "VISU" logo in the top-right corner blink after a new page is loaded (i.e. "monitor" command has been sent) until all subscribed items have been received. - new weatherservice open-meteo.com +- ioBroker driver now supports subscribing and unsubscribing series for individual plots which enables usage of plot.timeshift with ioBroker (thanks to YellowFlash for testing!) ### Improvements - allowed database modes for series moved into the individual backend drivers diff --git a/driver/io_iobroker.js b/driver/io_iobroker.js index 8b862848..ca032a95 100644 --- a/driver/io_iobroker.js +++ b/driver/io_iobroker.js @@ -19,7 +19,6 @@ * @hide driver_username * @hide driver_password * @hide driver_loopback - * @hide driver_signalBusy * @hide sv_hostname */ @@ -204,7 +203,9 @@ var io = { * - total = on * - count */ - aggregates: ['avg', 'min', 'max', 'on', 'count'], + aggregates: ['avg', 'average', 'min', 'max', 'total', 'on', 'count'], + monitorComplete: null, + openItems: [], /** @@ -262,6 +263,11 @@ var io = { io.socket.on('stateChange', function (id, state) { if (!id || state === null || typeof state !== 'object') return; io.stateChanged(id, state); + if (io.monitorCompleted == false && io.openItems.length == 0){ + io.monitorCompleted = true; + $('.smartvisu .visu').removeClass('blink'); + } + /* if (that._connCallbacks.onCommand && id === that.namespace + '.control.command') { if (state.ack) return; @@ -319,12 +325,23 @@ var io = { val.push([state.ts, state.val]); }); widget.update(plot[1], val); + io.openItems.removeEntry(plot[1]); }); }, - delayPlots: function() { + subscribePlots: function(plotitem) { + var plotItems = []; var items = Array(); - io.plots.forEach(plot => { + + if (plotitem == undefined) + plotItems = io.plots; + else + plotItems = plotitem; + + //DEBUG: + console.log('[io_iobroker] subscribing series: ', plotItems); + + plotItems.forEach(plot => { io.updatePlot(plot); plot[2] = true; // enable stateChanged items.push(plot[0]); @@ -337,6 +354,7 @@ var io = { }, monitor: function() { + io.monitorCompleted = false; io.listeners = []; var listeners = widget.listeners(); var listenItem; @@ -348,35 +366,23 @@ var io = { io.listeners[listenItem] = listeners[i]; } var items = Object.keys(io.listeners); + io.openItems = Object.keys(io.listeners); + - if (io.checkConnected() && items.length) { - io.socket.emit('subscribe', items); - io.read(items); + if (io.checkConnected()) { + if (items.length) { + io.socket.emit('subscribe', items); + io.read(items); + } // plot io.plots = Array(); clearTimeout(io.firstPlotTimeout); io.firstPlotTimeout = 0; - var unique = Array(); - widget.plot().each(function (idx) { - var items = widget.explode($(this).attr('data-item')); - $.each(items, function() { - var item = String(this); - var pt = item.split('.'); - if (!unique[item] && (pt instanceof Array) && widget.checkseries(item)) { - unique[item] = 1; - if (io.plots.find(plot => plot[1] === item) === undefined) { - var id = item.substr(0, item.length - 4 - pt[pt.length - 4].length - pt[pt.length - 3].length - pt[pt.length - 2].length - pt[pt.length - 1].length); - io.plots.push([id, item, false]); - } - io.firstPlotTimeout = -1; - } - }); - }); + io.startseries(); - // Start subscribing and draw with a delay in the plots so the "normal" widgets are populated with data first. - // This speeds up page loading when there is a lot of data in the plots. - if (io.firstPlotTimeout == -1) io.firstPlotTimeout = setTimeout(io.delayPlots, 1000); + if (sv.config.driver.signalBusy) + $('.smartvisu .visu').addClass('blink'); } }, @@ -432,25 +438,93 @@ var io = { } widget.update(item, val); + io.openItems.removeEntry(item); if (item != io.listeners[item]) widget.update(io.listeners[item], val); } }, /** - * stop all subscribed series + * start subscriptions for all plots in a page or a single specified plot */ - stopseries: function () { - if (io.isConnected) { - var items = io.listeners != [] ? Object.keys(io.listeners) : widget.listeners(); - io.plots.forEach(plot => { - items.push(plot[0]); + startseries: function(plotwidget){ + var unique = Array(); + var plotWidgets = []; + var plotsLength = io.plots.length; + var reorderPlots = []; + if (plotwidget === undefined) + plotWidgets = widget.plot(); + else + plotWidgets = plotwidget; + + plotWidgets.each(function (idx) { + var items = widget.explode($(this).attr('data-item')); + $.each(items, function() { + var item = String(this); + var pt = item.split('.'); + if (!unique[item] && (pt instanceof Array) && widget.checkseries(item)) { + unique[item] = 1; + var id = item.substr(0, item.length - 4 - pt[pt.length - 4].length - pt[pt.length - 3].length - pt[pt.length - 2].length - pt[pt.length - 1].length); + if (io.plots.find(plot => plot[1] === item) === undefined) { + io.plots.push([id, item, false]); + io.openItems.push(item); + } + else + reorderPlots.push([id, item, false]); + + io.firstPlotTimeout = -1; + } }); - io.socket.emit('unsubscribe', items); - io.read(items); + }); + if (plotwidget == undefined){ + // Start subscribing the plots with delay so the "normal" widgets are populated with data first. + // This speeds up page loading when there is a lot of data in the plots. + if (io.firstPlotTimeout == -1) + io.firstPlotTimeout = setTimeout(io.subscribePlots, 1000); + } + else { + io.subscribePlots(reorderPlots.concat(io.plots.slice(plotsLength))); + } + }, + + + /** + * stop subscriptions for all plots in a page or a single specified plot + * plotwidget is the jQuery object representing a specific plot widget + */ + stopseries: function (plotwidget) { + var items = Array(); + if (io.isConnected) { + if (plotwidget != undefined){ + var plotitems = widget.explode(plotwidget.attr('data-item')); + $.each(plotitems, function() { + if (widget.plot(this).length == 1){ // stop series if plotitem is used only once + var item = String(this); + var plotIndex = io.plots.findIndex(plot => plot[1] === item); + //DEBUG: + console.log('[io_iobroker] cancelling series: '+ item + ' at index: ' + plotIndex); + + // delete entry in the plots array so plot update is skipped even if base item is updated + io.plots.splice(plotIndex, 1); + delete widget.buffer[item]; + } + }) + } + else { + // all items - Cancelling on page change is OK but we should find a more suitable location (ToDo) + items = io.listeners != [] ? Object.keys(io.listeners) : widget.listeners(); + + io.valueType = Array(); // clear list + // all series items + io.plots.forEach(plot => { + items.push(plot[0]); + }); + io.socket.emit('unsubscribe', items); + io.read(items); + } } - valueType = Array(); // clear list - } + + }, /* logout: function() { From 8eecec0604f611c4cbf7a1b7af885a64323e8480 Mon Sep 17 00:00:00 2001 From: wvhn <17801971+wvhn@users.noreply.github.com> Date: Thu, 11 Apr 2024 19:44:10 +0200 Subject: [PATCH 046/112] new app for analysing plots --- apps/app_analyse_plots.html | 351 ++++++++++++++++++++++++++++++++++++ 1 file changed, 351 insertions(+) create mode 100644 apps/app_analyse_plots.html diff --git a/apps/app_analyse_plots.html b/apps/app_analyse_plots.html new file mode 100644 index 00000000..357f471a --- /dev/null +++ b/apps/app_analyse_plots.html @@ -0,0 +1,351 @@ +/** +* ----------------------------------------------------------------------------- +* @package smartVISU +* @author Wolfram v. Hülsen +* @copyright 2012 - 2024 +* @license GPL [http://www.gnu.de] +* @version 1.0 +* +* @title Plot Analyser +* @category visu +* @icon icons/ws/measure_power_meter.svg +* @color #b00 +* @description Analyse plots with flexible configuration of series parameters +* +* ----------------------------------------------------------------------------- +*/ + + +{% extends "apps.html" %} + +{% block sidebar %} + +
+
+
+
+ 
+
+ Plot Analyser
+Global Plot Settings:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
| Y Axis 1 | Y Axis 2 | Y Axis 3 | Y Axis 4 | +|
| Activate axis | + | |||
| Y-axis min value | + | |||
| Y-axis max value | + | |||
| Y-axis position | ++ | + | + | + |
| Y-axis scale type | ++ | + | + | + |
| Y-axis unit | + |
+
+
+
+ +
Item specific Settings:
+ {% + set sources = { + '1': 'Item 1', + '2': 'Item 2', + '3': 'Item 3', + '4': 'Item 4', + '5': 'Item 5' + } + %} + +
+
+ {% for source, title in sources %} +
+
+
+ -
+ {% for source, title in sources %}
+
- {{ title }} + {% endfor %} +
+ {% for source, title in sources %} +
+
+
+ {% endfor %}
+ + + +{% endblock %} + + +{% block content %} + + + + {% set mode = "raw" %} /** just init to activate boost mode */ + {% set zoom = "advanced" %} /** enable navigator */ + {% set export = 2 %} /** activate export menu */ + +
+
+ {{ plot.period('analyse-plotpopup', item, mode, tmin, tmax, ymin, ymax, count, label, color, exposure, axis, zoom, assign, opposite, ycolor, ytype, unit, chartoptions, stacking, stacks, export, source) }}
+
+
+/** options not (yet) used
+ data-axis = [ x axix name and y axis name(s) ]
+ data-ycolor = [colors of y axes ]
+*/
+
+
+
+
+ +{% endblock %} + + From 1a780c9e2a555d35c3a34d90d5eb0f8d29ec11bd Mon Sep 17 00:00:00 2001 From: wvhn <17801971+wvhn@users.noreply.github.com> Date: Fri, 12 Apr 2024 21:37:56 +0200 Subject: [PATCH 047/112] display final widget code in app analyse_plots --- apps/app_analyse_plots.html | 59 +++++++++++++++++++++++++++++++------ changelog.md | 1 + 2 files changed, 51 insertions(+), 9 deletions(-) diff --git a/apps/app_analyse_plots.html b/apps/app_analyse_plots.html index 357f471a..33cf0fd6 100644 --- a/apps/app_analyse_plots.html +++ b/apps/app_analyse_plots.html @@ -166,13 +166,23 @@
Item specific Settings:
{% block content %} {% set mode = "raw" %} /** just init to activate boost mode */ @@ -182,6 +192,13 @@Item specific Settings:
{{ plot.period('analyse-plotpopup', item, mode, tmin, tmax, ymin, ymax, count, label, color, exposure, axis, zoom, assign, opposite, ycolor, ytype, unit, chartoptions, stacking, stacks, export, source) }}
+
+
/** options not (yet) used
@@ -216,7 +233,7 @@ +
Generated widget code:
+
+ {% filter trim|escape|nl2br %}{% verbatim %}
+ {{ plot.period(...) }}
+ {% endverbatim %}{% endfilter %}
+
Item specific Settings:
if (io.stopseries ) io.stopseries(plot); that.element.highcharts().destroy(); - var apSeries = "", apCount = "", apExposure = "", apColor = "", apMode = "", apLabel = "", apAssign = "", apStacking = "", apStacks = ""; + var apSeries = "", apCount = "", apExposure = "", apColor = "", apMode = "", apLabel = "", apAssign = "", apStacking = "", apStacks = "", apBaseItems = ""; // Data source: database or item var apDataSource = $('#apDataSource').val().toString() || 'database'; @@ -227,13 +244,18 @@Item specific Settings:
//y-axis parameters for 4 axes var apYmins = [], apYmaxs = [], apYtypes = [],apYposs = [], apYunits = []; + // check active axis with highest number for (var i=1; i<5; i++){ - console.log($('#apYact'+i).val().toString()) - apYmins[i-1] = $('#apYact'+i).prop('checked') ? $('#apYmin'+i).val().toString() || '' : ''; - apYmaxs [i-1] = $('#apYact'+i).prop('checked') ? $('#apYmax'+i).val().toString() || '' : ''; - apYtypes[i-1] = $('#apYact'+i).prop('checked') ? $('#apYtype'+i).val().toString() || '' : ''; - apYposs[i-1] = $('#apYact'+i).prop('checked') ? $('#apYpos' +i).val().toString() || '' : ''; - apYunits[i-1] = $('#apYact'+i).prop('checked') ? $('#apYunit' +i).val().toString() || '' : ''; + if ($('#apYact'+i).prop('checked')) + var apMaxYaxis = i; + } + // evaluate settings up to highest active axis + for (var i=1; iItem specific Settings:
// start new series subscription if (io.startseries) io.startseries(plot); - }) + + // update widget code display field + var widgetCode = ["''", setWidgetParam(apBaseItems, ''), setWidgetParam(apMode, 'avg'), setWidgetParam(apTmin, '1h'), setWidgetParam(apTmax, 'now'), setWidgetParam(apYmin, ''), setWidgetParam(apYmax, ''), + setWidgetParam(apCount, '100'), setWidgetParam(apLabel, ''), setWidgetParam(apColor, ''), setWidgetParam(apExposure, 'line'), "''", "'advanced'", setWidgetParam(apAssign, ''), + setWidgetParam(apYpos, ''), "''", setWidgetParam(apYtype, 'linear'), setWidgetParam(apYunit, ''), apChartopts ? apChartopts: "''", setWidgetParam(apStacking, 'normal'), setWidgetParam(apStacks, ''), "2", + "'"+apDataSource+"'" ].join(', '); + var widgetCodeHtml = $('#apWidgetCode').html(); + $('#apWidgetCode').html(widgetCodeHtml.replace(/period\(.*\)/, 'period('+widgetCode+')')); + }); + + function setWidgetParam(widgetParam, defaultValue){ + if (widgetParam.split(/,\s*/).every(function(element){return element == defaultValue})) + widgetParam = ''; + var paramLength = widgetParam.split(',').length; + var ret = paramLength > 1 ? "['":"'"; + ret += widgetParam.split(/,\s*/).join("', '"); + ret += paramLength > 1 ? "']" : "'"; + return ret; + } }); diff --git a/changelog.md b/changelog.md index be9d9d0b..f6c610fe 100755 --- a/changelog.md +++ b/changelog.md @@ -3,6 +3,7 @@ - basic.tank is now able to change colors according to reached thresholds - additional option for basic.select to support activity indicator like basic.stateswitch - basic.icon accepts alpha values for rgb(a)/hsl(a)/hsv(a) and also hex rgb(a) values in items +- new app analyse_plots enables live parametrizing of plot.period ### Other New Features - improved spline display for the starting point in device.uzsugraph From 7482e4b014d02635100ceccd4b63e2dfc4cdebc6 Mon Sep 17 00:00:00 2001 From: wvhn <17801971+wvhn@users.noreply.github.com> Date: Wed, 17 Apr 2024 14:04:35 +0200 Subject: [PATCH 048/112] generate tooltip with basic.print --- changelog.md | 1 + widgets/basic.html | 11 ++++++----- widgets/basic.js | 12 ++++++++++-- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/changelog.md b/changelog.md index f6c610fe..84b2e9fe 100755 --- a/changelog.md +++ b/changelog.md @@ -4,6 +4,7 @@ - additional option for basic.select to support activity indicator like basic.stateswitch - basic.icon accepts alpha values for rgb(a)/hsl(a)/hsv(a) and also hex rgb(a) values in items - new app analyse_plots enables live parametrizing of plot.period +- basic.print can be used to generate a tooltip on a linked widget (parameter href = widget-id, rel = 'tooltip') ### Other New Features - improved spline display for the starting point in device.uzsugraph diff --git a/widgets/basic.html b/widgets/basic.html index f88355cf..af0b6617 100755 --- a/widgets/basic.html +++ b/widgets/basic.html @@ -337,8 +337,8 @@ * @param {color[?](icon0to5,hidden,blank)=icon0} array of colors; 'icon0' through 'icon5' or e. g. '#f00' for red (optional, default = icon0 ) additionally you can use 'hidden' to not diplay at all or 'blank' to make it invisible but preserve the space that would be used. the first one is the base color for values below first threshold, so pass one color more than thresholds. -* @param {text=} URL to use as link (optional) -* @param {text=} used in combination with href as data-rel attribute {e.g. to open a popup} (optional) +* @param {text=} URL to use as link or id of a widget to add a tooltip (optional) +* @param {text=} use 'tooltip' in combination with a widget id as href in order to attach a tooltip to that widget. Any other text will interpret href as link to a popup (optional) * * @see misc/fundamentals#Array-Form * @@ -347,11 +347,12 @@ */ {% macro print(id, item, format, formula, threshold, color, href, rel) %} {% set color = color|default('icon0') %} -{% if href is empty %}{% else %}{% endif %} +{% if href is not empty and rel != 'tooltip' %}{% endif %}Colors
{{ basic.print('', 'bath.light.value', '', '', '', '#f00') }}{{ basic.print('', 'bath.light.value', '', '', [100,200], ['green', '', 'icon1']) }}
- +
Usage as Tooltip
+ By giving any other widget an id and referencing this in the parameter href, a dynamic tooltip can be created on that widget by passing the value 'tooltip' to the parameter "rel". Some widgets need to be wrapped in a span containing the id. + Hover with the mouse over the flipswitch to see the effect. (Note: Will not work on Android devices wich do not support hover effects) +
+
+ {% filter trim|escape|nl2br %}{% verbatim %}
+ {{ basic.flip('', 'bath.light.switch') }}
+ {{ basic.print('', 'bath.light.switch', 'text', 'VAR=="1"?"Schaltuhr ist an":"Schalter ist aus"','','','myFlip1','tooltip') }} {% endverbatim %}{% endfilter %}
+
+ {{ basic.flip('myFlip1', 'bath.light.switch') }}
+ {{ basic.print('', 'bath.light.switch', 'text', 'VAR=="1"?"Schalter ist an":"Schalter ist aus"','','','myFlip1','tooltip') }}
+
+
+
Advanced Scripting
basic.print can also be used for some "hacks".This example shows how to update the color of a widget text based on the value of ANOTHER item. Click on the heater icon and change the temperature. The temperature print will turn red if the heater is off and green if it is on.
From 5cd06198850675203f7d0e41397d314c3ae97895 Mon Sep 17 00:00:00 2001 From: wvhn <17801971+wvhn@users.noreply.github.com> Date: Wed, 24 Apr 2024 13:40:46 +0200 Subject: [PATCH 050/112] add color and indicator options to basic.trigger --- changelog.md | 2 ++ widgets/basic.html | 21 ++++++++++++++++----- widgets/basic.js | 24 +++++++++++++++++++++++- 3 files changed, 41 insertions(+), 6 deletions(-) diff --git a/changelog.md b/changelog.md index 84b2e9fe..cd125428 100755 --- a/changelog.md +++ b/changelog.md @@ -5,6 +5,7 @@ - basic.icon accepts alpha values for rgb(a)/hsl(a)/hsv(a) and also hex rgb(a) values in items - new app analyse_plots enables live parametrizing of plot.period - basic.print can be used to generate a tooltip on a linked widget (parameter href = widget-id, rel = 'tooltip') +- additional color and indicator options for basic.trigger ### Other New Features - improved spline display for the starting point in device.uzsugraph @@ -43,6 +44,7 @@ - template checker threw errors if an item property was not in the properties class - plot.period and plot.xyplot drawed the plots twice after series update - notify.add() notification threw errors if message was not of type "text" +- basic.trigger showed oversized button instead of specified type "icon" ### Known Bugs - if item contains a stringified number (e.g. with leading zero). widget.set converts it back to numeric format - so basic.print can not print it as text diff --git a/widgets/basic.html b/widgets/basic.html index af0b6617..59e11d87 100755 --- a/widgets/basic.html +++ b/widgets/basic.html @@ -733,18 +733,29 @@ * @param {text=1} value to send if the button is pressed (optional, default 1) * @param {type=mini} type: 'micro', 'mini', 'midi' (optional, default: mini) * @param {text(button,page,both)=button} trigger event: 'button', 'page', 'both' (optional, default: button) +* @param {color(icon0to5)=} single color e. g. '#f00' for red or icon class. (optional) +* @param {color(icon0to5,blink,:)=} activity indicator which is active until the timeout is reached; pass either a color, icon class or 'blink'. Timeout is 3s by default and can be set globally using the configuration key "indicator_duration". Add a colon and integer number to specify an individual timeout, e.g. 'blink:15' (optional) */ -{% macro trigger(id, name, txt, icon, val, type, event) %} +{% macro trigger(id, name, txt, icon, val, type, event, color, indicator) %} {% import _self as basic %} + {% set iconstyles = ['icon0', 'icon1', 'icon2', 'icon3', 'icon4', 'icon5'] %} + {% if ":" in indicator %} + {% set indicatorparms = indicator|split(":") %} + {% set indicator = indicatorparms[0] %} + {% set indicator_duration = indicatorparms[1] %} + {% else %} + {% set indicator_duration = config_indicator_duration|default(3) %} + {% endif %}
{% else%}
- 
+ {{ lib.svgimg ('', 'phone_call.svg', 'icon0', '') }}
- 
+ {{ lib.svgimg ('', 'phone_missed_out.svg', 'icon0', '') }}
Telefonliste - letzten 10 verpassten
+ {{ lib.svgimg ('', 'sani_pump.svg', 'icon0', '') }}
+ {{ lib.svgimg ('', 'control_building_control.svg', 'icon0', '') }}
+ {{ lib.svgimg ('', 'time_calendar.svg', 'icon0', '') }}
Kategorien
Items loaded
- 
{{ basic.print('sunrise', 'env.location.sunrise', 'time') }}
@@ -60,7 +60,7 @@ 
{{ basic.print('moonset', 'env.location.moonset', 'time') }},
- moonphase: {{ basic.print('moonphase', 'env.location.moonphase') }}, moonlight: {{ basic.print('moonlight', 'env.location.moonlight', '%') }}
+ {{ lang('system', 'moonphase') }}: {{ basic.print('moonphase', 'env.location.moonphase') }}, {{ lang('system', 'moonlight') }}: {{ basic.print('moonlight', 'env.location.moonlight', '%') }}