iobroker.sbfspot
Version:
sbfspot (SMA inverter) Adapter
1,598 lines • 68.7 kB
HTML
<!--
ioBroker.vis sbfspot Widget-Set
Copyright 10.2015-2017 René G. <info@rg-engineering.eu>
-->
<!--
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.js"></script>
-->
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/lib/jquery.event.drag.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/lib/jquery.mousewheel.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.canvaswrapper.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.colorhelpers.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.flot.saturated.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.flot.browser.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.flot.drawSeries.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.flot.uiConstants.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.flot.time.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.flot.legend.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.flot.navigate.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.flot.touchNavigate.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.flot.hover.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.flot.touch.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.flot.selection.js"></script>
<script language="javascript" type="text/javascript" src="widgets/sbfspot/lib/js/flot/jquery.flot.axislabels.js"></script>
<!-- doku for flot : -->
<!-- https://github.com/flot/flot/blob/master/API.md -->
<style>
.chart-placeholder {
width: 100%;
height: 100%;
font-size: 14px;
line-height: 1.2em;
}
.legendLayer .background {
fill: rgba(255, 255, 255, 0.85);
stroke: rgba(0, 0, 0, 0.85);
stroke-width: 1;
}
</style>
<script type="text/javascript">
'use strict';
var MarkingColor = "eaebe5";
if (vis.editMode) {
// Add words for basic widgets
$.extend(true, systemDictionary, {
"sbfspot": {
"en": "sbfspot",
"de": "sbfspot",
"ru": "sbfspot",
"pt": "sbfspot",
"nl": "sbfspot",
"fr": "sbfspot",
"it": "sbfspot",
"es": "sbfspot",
"pl": "sbfspot",
"zh-cn": "sbfspot"
},
"1 second": {
"en": "1 second",
"de": "1 Sekunde",
"ru": "1 секунда",
"pt": "1 segundo",
"nl": "1 seconde",
"fr": "1 seconde",
"it": "1 secondo",
"es": "1 segundo",
"pl": "1 sekunda",
"zh-cn": "1秒"
},
"10 seconds": {
"en": "10 seconds",
"de": "10 Sekunden",
"ru": "10 секунд",
"pt": "10 segundos",
"nl": "10 seconden",
"fr": "10 secondes",
"it": "10 secondi",
"es": "10 segundos",
"pl": "10 sekund",
"zh-cn": "10秒"
},
"30 seconds": {
"en": "30 seconds",
"de": "30 Sekunden",
"ru": "30 секунд",
"pt": "30 segundos",
"nl": "30 seconden",
"fr": "30 secondes",
"it": "30 secondi",
"es": "30 segundos",
"pl": "30 sekund",
"zh-cn": "30秒"
},
"1 minute": {
"en": "1 minute",
"de": "1 Minute",
"ru": "1 минута",
"pt": "1 minuto",
"nl": "1 minuut",
"fr": "1 minute",
"it": "1 minuto",
"es": "1 minuto",
"pl": "1 minuta",
"zh-cn": "1分钟"
},
"2 minutes": {
"en": "2 minutes",
"de": "2 Minuten",
"ru": "2 минуты",
"pt": "2 minutos",
"nl": "2 minuten",
"fr": "2 minutes",
"it": "2 minuti",
"es": "2 minutos",
"pl": "2 minuty",
"zh-cn": "2分钟"
},
"5 minutes": {
"en": "5 minutes",
"de": "5 Minuten",
"ru": "5 минут",
"pt": "5 minutos",
"nl": "5 minuten",
"fr": "5 minutes",
"it": "5 minuti",
"es": "5 minutos",
"pl": "5 minut",
"zh-cn": "5分钟"
},
"10 minutes": {
"en": "10 minutes",
"de": "10 Minuten",
"ru": "10 минут",
"pt": "10 minutos",
"nl": "10 minuten",
"fr": "10 minutes",
"it": "10 minuti",
"es": "10 minutos",
"pl": "10 minut",
"zh-cn": "10分钟"
},
"30 minutes": {
"en": "30 minutes",
"de": "30 Minuten",
"ru": "30 минут",
"pt": "30 minutos",
"nl": "30 minuten",
"fr": "30 minutes",
"it": "30 minuti",
"es": "30 minutos",
"pl": "30 minut",
"zh-cn": "30分钟"
},
"1 hour": {
"en": "1 hour",
"de": "1 Stunde",
"ru": "1 час",
"pt": "1 hora",
"nl": "1 uur",
"fr": "1 heure",
"it": "1 ora",
"es": "1 hora",
"pl": "1 godzina",
"zh-cn": "1小时"
},
"2 hours": {
"en": "2 hours",
"de": "2 Stunden",
"ru": "два часа",
"pt": "2 horas",
"nl": "twee uur",
"fr": "2 heures",
"it": "2 ore",
"es": "2 horas",
"pl": "2 godziny",
"zh-cn": "2小时"
},
"4 hours": {
"en": "4 hours",
"de": "4 Stunden",
"ru": "4 часа",
"pt": "4 horas",
"nl": "4 uur",
"fr": "4 heures",
"it": "4 ore",
"es": "4 horas",
"pl": "4 godziny",
"zh-cn": "4个小时"
},
"8 hours": {
"en": "8 hours",
"de": "8 Stunden",
"ru": "8 часов",
"pt": "8 horas",
"nl": "8 uur",
"fr": "8 heures",
"it": "8 ore",
"es": "8 horas",
"pl": "8 godzin",
"zh-cn": "8小时"
},
"12 hours": {
"en": "12 hours",
"de": "12 Stunden",
"ru": "12 часов",
"pt": "12 horas",
"nl": "12 uren",
"fr": "12 heures",
"it": "12 ore",
"es": "12 horas",
"pl": "12 godzin",
"zh-cn": "12小时"
},
"24 hours": {
"en": "24 hours",
"de": "24 Stunden",
"ru": "24 часа",
"pt": "24 horas",
"nl": "24 uur",
"fr": "24 heures",
"it": "24 ore",
"es": "24 horas",
"pl": "24 godziny",
"zh-cn": "24小时"
},
"sbfspotinstance": {
"en": "sbfspot instance",
"de": "sbfspot-Instanz",
"ru": "экземпляр sbfspot",
"pt": "instância sbfspot",
"nl": "sbfspot-instantie",
"fr": "instance de sbfspot",
"it": "istanza sbfspot",
"es": "instancia de sbfspot",
"pl": "instancja sbfspot",
"zh-cn": "sbfspot实例"
},
"time_interval": {
"en": "Time interval",
"de": "Zeitintervall",
"ru": "Интервал времени",
"pt": "Intervalo de tempo",
"nl": "Tijdsinterval",
"fr": "Intervalle de temps",
"it": "Intervallo di tempo",
"es": "Intervalo de tiempo",
"pl": "Przedział czasowy",
"zh-cn": "时间间隔"
},
"withxaxix": {
"en": "show X axis",
"de": "X-Achse anzeigen",
"ru": "показать ось X",
"pt": "mostre o eixo X",
"nl": "X-as weergeven",
"fr": "afficher l'axe X",
"it": "mostra l'asse X.",
"es": "mostrar eje X",
"pl": "pokaż oś X.",
},
"sel_today": {
"en": "today",
"de": "heute",
"ru": "Cегодня",
"pt": "hoje",
"nl": "vandaag",
"fr": "aujourd'hui",
"it": "oggi",
"es": "hoy",
"pl": "dzisiaj",
"zh-cn": "今天"
},
"sel_last30days": {
"en": "last 30 days",
"de": "letzte 30 Tage",
"ru": "последние 30 дней",
"pt": "últimos 30 dias",
"nl": "laatste 30 dagen",
"fr": "les 30 derniers jours",
"it": "ultimi 30 giorni",
"es": "últimos 30 días",
"pl": "ostatnie 30 dni",
"zh-cn": "最近30天"
},
"sel_last12months": {
"en": "last 12 months",
"de": "letzten 12 Monate",
"ru": "последние 12 месяцев",
"pt": "últimos 12 meses",
"nl": "laatste 12 maanden",
"fr": "12 derniers mois",
"it": "ultimi 12 mesi",
"es": "últimos 12 meses",
"pl": "ostatnie 12 miesięcy",
"zh-cn": "最近12个月"
},
"sel_years": {
"en": "years",
"de": "Jahre",
"ru": "лет",
"pt": "anos",
"nl": "jaar",
"fr": "ans",
"it": "anni",
"es": "años",
"pl": "lat",
"zh-cn": "年份"
},
"serial": {
"en": "inverter serial No.",
"de": "Seriennummer des Wechselrichters",
"ru": "серийный номер инвертора",
"pt": "número de série do inversor",
"nl": "serienummer van de omvormer",
"fr": "n ° de série de l'onduleur",
"it": "numero di serie dell'inverter",
"es": "número de serie del inversor",
"pl": "numer seryjny falownika",
"zh-cn": "变频器序列号"
},
"valueselect": {
"en": "select",
"de": "wählen",
"ru": "Выбрать",
"pt": "selecionar",
"nl": "kiezen",
"fr": "sélectionner",
"it": "selezionare",
"es": "seleccionar",
"pl": "Wybierz",
"zh-cn": "选择"
},
"axislabelcolor": {
"en": "color of axis label",
"de": "Farbe der Achsenbeschriftung",
"ru": "цвет метки оси",
"pt": "cor do rótulo do eixo",
"nl": "kleur van aslabel",
"fr": "couleur de l'étiquette de l'axe",
"it": "colore dell'etichetta dell'asse",
"es": "color de la etiqueta del eje",
"pl": "kolor etykiety osi",
"zh-cn": "轴标颜色"
},
"tickscolor": {
"en": "color of axis ticks",
"de": "Farbe der Achsenstriche",
"ru": "цвет отметок оси",
"pt": "cor dos tiques do eixo",
"nl": "kleur van as tikken",
"fr": "couleur des tiques des axes",
"it": "colore delle zecche degli assi",
"es": "color de las garrapatas del eje",
"pl": "kolor znaczników osi",
"zh-cn": "轴刻度的颜色"
},
"graphcolor": {
"en": "color",
"de": "Farbe",
"ru": "цвет",
"pt": "cor",
"nl": "kleur",
"fr": "Couleur",
"it": "colore",
"es": "color",
"pl": "kolor",
"zh-cn": "颜色"
},
"nobgcolor": {
"en": "no background color on grid",
"de": "Keine Hintergrundfarbe im Raster",
"ru": "нет цвета фона на сетке",
"pt": "sem cor de fundo na grade",
"nl": "geen achtergrondkleur op het raster",
"fr": "pas de couleur d'arrière-plan sur la grille",
"it": "nessun colore di sfondo sulla griglia",
"es": "sin color de fondo en la cuadrícula",
"pl": "brak koloru tła na siatce",
"zh-cn": "网格上没有背景色"
},
"bgcolor": {
"en": "background color on grid",
"de": "Hintergrundfarbe auf Raster",
"ru": "цвет фона на сетке",
"pt": "cor de fundo na grade",
"nl": "achtergrondkleur op het raster",
"fr": "couleur de fond sur la grille",
"it": "colore di sfondo sulla griglia",
"es": "color de fondo en la cuadrícula",
"pl": "kolor tła na siatce",
"zh-cn": "网格上的背景色"
},
"bordercolor": {
"en": "color of grid border",
"de": "Farbe des Gitterrandes",
"ru": "цвет границы сетки",
"pt": "cor da borda da grade",
"nl": "kleur van de rasterrand",
"fr": "couleur de la bordure de la grille",
"it": "colore del bordo della griglia",
"es": "color del borde de la cuadrícula",
"pl": "kolor obramowania siatki",
"zh-cn": "网格边框的颜色"
},
"borderWidth": {
"en": "width of grid border",
"de": "Breite des Gitterrandes",
"ru": "ширина границы сетки",
"pt": "largura da borda da grade",
"nl": "breedte van de rasterrand",
"fr": "largeur de la bordure de la grille",
"it": "larghezza del bordo della griglia",
"es": "ancho del borde de la cuadrícula",
"pl": "szerokość granicy siatki",
"zh-cn": "网格边框的宽度"
},
"withyaxix": {
"en": "show y axis",
"de": "y-Achse anzeigen",
"ru": "показать ось у",
"pt": "mostre o eixo y",
"nl": "y-as weergeven",
"fr": "afficher l'axe y",
"it": "mostra l'asse y",
"es": "mostrar eje y",
"pl": "pokaż oś y",
"zh-cn": "显示y轴"
},
"graphDateFormat": {
"en": "Date Format for X axis",
"de": "Datumsformat für die X-Achse",
"ru": "Формат даты для оси X",
"pt": "Formato de data para o eixo X",
"nl": "Datumnotatie voor X-as",
"fr": "Format de date pour l'axe X",
"it": "Formato data per asse X.",
"es": "Formato de fecha para el eje X",
"pl": "Format daty dla osi X.",
"zh-cn": "X轴的日期格式"
},
"group_graph": {
"en": "graph",
"de": "Graph",
"ru": "график",
"pt": "gráfico",
"nl": "diagram",
"fr": "graphique",
"it": "grafico",
"es": "grafico",
"pl": "wykres",
"zh-cn": "图形"
},
"group_oids": {
"en": "OID's",
"de": "OID's",
"ru": "OID-х",
"pt": "OID's",
"nl": "OID's",
"fr": "OID",
"it": "di OID",
"es": "OID",
"pl": "OID",
"zh-cn": "OID的"
},
"oid_value": {
"en": "OID values",
"de": "OID-Werte",
"ru": "Значения OID",
"pt": "Valores OID",
"nl": "OID-waarden",
"fr": "Valeurs OID",
"it": "Valori OID",
"es": "Valores OID",
"pl": "Wartości OID",
"zh-cn": "OID值"
},
"markingcolor": {
"en": "color of marking",
"de": "Farbe der Markierung",
"ru": "цвет маркировки",
"pt": "cor da marcação",
"nl": "kleur van markering",
"fr": "couleur de marquage",
"it": "colore della marcatura",
"es": "color de marcado",
"pl": "kolor oznakowania",
"zh-cn": "标记颜色"
},
"withmarking": {
"en": "with marking",
"de": "mit Markierung",
"ru": "с маркировкой",
"pt": "com marcação",
"nl": "met markering",
"fr": "avec marquage",
"it": "con marcatura",
"es": "con marcado",
"pl": "z oznaczeniem",
"zh-cn": "带标记"
},
"graphName": {
"en": "name on legend",
"de": "Name auf Legende",
"ru": "имя по легенде",
"pt": "nome na legenda",
"nl": "naam op legende",
"fr": "nom sur la légende",
"it": "nome sulla leggenda",
"es": "nombre en la leyenda",
"pl": "imię na legendzie",
"zh-cn": "传说中的名字"
},
"LabelFontSize": {
"en": "size of Label Font",
"de": "Größe der Beschriftungsschrift",
"ru": "размер шрифта метки",
"pt": "tamanho da fonte da etiqueta",
"nl": "grootte van het lettertype",
"fr": "taille de la police d'étiquette",
"it": "dimensione del carattere dell'etichetta",
"es": "tamaño de la fuente de la etiqueta",
"pl": "rozmiar czcionki etykiety",
"zh-cn": "标签字体的大小"
},
"LabelFontFamily": {
"en": "family of label font",
"de": "Schriftfamilie",
"ru": "семейство меток шрифта",
"pt": "família de fontes de rótulo",
"nl": "familie van lettertype",
"fr": "famille de polices d'étiquettes",
"it": "famiglia di caratteri etichetta",
"es": "familia de fuente de etiquetas",
"pl": "rodzina czcionek etykiet",
"zh-cn": "标签字体家族"
},
"tickLength": {
"en": "length of tick",
"de": "Länge des Ticks",
"ru": "длина тика",
"pt": "comprimento do carrapato",
"nl": "lengte van de teek",
"fr": "longueur de tique",
"it": "lunghezza del segno di spunta",
"es": "longitud de la garrapata",
"pl": "długość kleszcza",
"zh-cn": "tick的长度"
},
"showMinorTicks": {
"en": "show minor tick",
"de": "zeige kleine Ticks",
"ru": "показать небольшую галочку",
"pt": "mostre carrapato menor",
"nl": "toon kleine vinkjes",
"fr": "montrer une tique mineure",
"it": "mostra segno di spunta minore",
"es": "mostrar marca menor",
"pl": "pokaż drobne kleszcze",
"zh-cn": "显示小勾"
},
"showTicks": {
"en": "show tick",
"de": "zeige ticks",
"ru": "показать галочку",
"pt": "show tick",
"nl": "vinkje tonen",
"fr": "montrer tique",
"it": "mostra tick",
"es": "mostrar marca",
"pl": "pokaż tik",
"zh-cn": "显示刻度"
},
"tickDecimals": {
"en": "decimals",
"de": "Dezimalstellen",
"ru": "десятичные",
"pt": "decimais",
"nl": "decimalen",
"fr": "décimales",
"it": "decimali",
"es": "decimales",
"pl": "miejsca po przecinku",
"zh-cn": "小数点"
},
"tickSize": {
"en": "tick size",
"de": "Tick-Größe",
"ru": "размер галочки",
"pt": "tamanho do carrapato",
"nl": "teken grootte",
"fr": "taille de la tique",
"it": "dimensione tick",
"es": "tamaño de la garrapata",
"pl": "rozmiar kleszcza",
"zh-cn": "刻度大小"
},
"minTickSize": {
"en": "min. tick size",
"de": "Mindest. Tick-Größe",
"ru": "минимум размер галочки",
"pt": "min. tamanho do carrapato",
"nl": "min. teken grootte",
"fr": "min. taille de la tique",
"it": "min. dimensione tick",
"es": "min. tamaño de la garrapata",
"pl": "min. rozmiar kleszcza",
"zh-cn": "分钟刻度大小"
},
"labelwidth": {
"en": "label width",
"de": "Labelbreite",
"ru": "ширина этикетки",
"pt": "largura da etiqueta",
"nl": "labelbreedte",
"fr": "largeur d'étiquette",
"it": "larghezza dell'etichetta",
"es": "ancho de etiqueta",
"pl": "szerokość etykiety",
"zh-cn": "标签宽度"
},
"coloraxis": {
"en": "color of axis",
"de": "Farbe der Achse",
"ru": "цвет оси",
"pt": "cor do eixo",
"nl": "kleur van de as",
"fr": "couleur de l'axe",
"it": "colore dell'asse",
"es": "color del eje",
"pl": "kolor osi",
"zh-cn": "轴的颜色"
},
"colorticklabel": {
"en": "color tick label",
"de": "Farbe Tick Label",
"ru": "цветная метка",
"pt": "etiqueta de escala de cores",
"nl": "kleur maatlabel",
"fr": "étiquette de couleur tique",
"it": "etichetta con segno di spunta di colore",
"es": "etiqueta de marca de color",
"pl": "kolorowa etykieta kleszczowa",
"zh-cn": "彩色刻度标签"
},
"withlegend": {
"en": "show legend",
"de": "Legende anzeigen",
"ru": "показать легенду",
"pt": "mostrar legenda",
"nl": "toon legende",
"fr": "montrer la légende",
"it": "mostra legenda",
"es": "Mostrar leyenda",
"pl": "pokaż legendę",
"zh-cn": "显示传奇"
},
"legendposition": {
"en": "legend position",
"de": "Legendenposition",
"ru": "положение легенды",
"pt": "posição da legenda",
"nl": "legende positie",
"fr": "position de la légende",
"it": "posizione della legenda",
"es": "posición de leyenda",
"pl": "pozycja legendy",
"zh-cn": "图例位置"
},
"WithHOver": {
"en": "With Value box",
"de": "Mit Wertbox",
"ru": "С коробкой ценности",
"pt": "Com caixa de valor",
"nl": "Met Value box",
"fr": "Avec boîte de valeur",
"it": "Con Valore",
"es": "Con caja de valor",
"pl": "Wagon z Value",
"zh-cn": "价值箱"
},
"WithPoints": {
"en": "with points",
"de": "mit Punkten",
"ru": "с точками",
"pt": "com pontos",
"nl": "met punten",
"fr": "avec points",
"it": "con punti",
"es": "con puntos",
"pl": "punkty",
"zh-cn": "要点"
}
});
}
vis.binds.sbfspot = {
version: "4.0.7",
showVersion: function () {
if (vis.binds.sbfspot.version) {
console.log('Version vis-sbfspot: ' + vis.binds.sbfspot.version);
vis.binds.sbfspot.version = null;
}
},
setup: {
intervals: {
'1 second': 1000,
'10 seconds': 10000,
'30 seconds': 30000,
'1 minute': 60000,
'2 minutes': 120000,
'5 minutes': 300000,
'10 minutes': 600000,
'30 minutes': 1800000,
'1 hour': 3600000,
'2 hours': 7200000,
'4 hours': 14400000,
'8 hours': 28800000,
'12 hours': 43200000,
'24 hours': 86400000
},
datasel: {
'sel_today': 1,
'sel_last30days': 2,
'sel_last12months': 3,
'sel_years': 4
}
},
history: {
init: function (widgetID, view, data1, style) {
var $div = $('#' + widgetID);
console.log("sbfspot history (" + widgetID + ")");
var data = {};
for (var s in data1) {
if (s[0] !== '_' && data1.hasOwnProperty(s) && typeof data1[s] !== 'object' && typeof data1[s] !== 'function') {
data[s] = data1[s];
}
}
//****************************************************************************************
//hover
if (data.WithHOver) {
//das muss in's init...
$("<div id='sbfspottooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 1
}).appendTo("body");
//****************************************************************************************
}
function SetMarkingColor(color) {
MarkingColor = color;
}
function xwhFormatter(val, axis) {
let myval;
if (typeof val == "string") {
console.log('xwhFormatter convert to number ');
myval = Number(val);
}
else {
myval = val;
}
console.log('xwhFormatter for ' + val + " " + typeof val);
if (myval > 1000000)
return (myval / 1000000).toFixed(axis.tickDecimals) + " MWh";
else if (myval > 1000)
return (myval / 1000).toFixed(axis.tickDecimals) + " kWh";
else
return (myval*1).toFixed(axis.tickDecimals) + " Wh";
}
function legendformater(label, series) {
//wenn keine Daten, dann ausblenden -> (return null)
if (series.data == null || typeof series.data == "undefined" || typeof series.data[0] == "undefined") {
console.log('legendformater no label because no data ');
return null;
}
else {
console.log('legendformater label ' + label);
return label;
}
}
//===============================================================
//Attention: this is different to sbfspot and vis-weather!!! we have much longer time periods here
function GridMarkings(axes) {
var markings = [];
var minDate = new Date(axes.xaxis.min);
const dayDiff = (axes.xaxis.max - axes.xaxis.min) / 1000 / 60 / 60 / 24;
console.log('GridMarkings: DayDiff ' + dayDiff + ' (' + axes.xaxis.max + ' ' + axes.xaxis.min + ')');
var i = minDate.getTime();
if (dayDiff > 400) { //in years
console.log('for year');
minDate.setHours(0);
minDate.setMinutes(0);
minDate.setDate(1);
minDate.setMonth(0);
var i = minDate.getTime();
var curDate;
let limit = 0;
do {
markings.push({ xaxis: { from: i, to: i + 12 * 30 * 24 * 60 * 60 * 1000 }, color: MarkingColor });
i += 2 * 12 * 31 * 24 * 60 * 60 * 1000; //plus two year
curDate = new Date(i);
minDate = curDate;
minDate.setHours(0);
minDate.setMinutes(0);
minDate.setDate(1);
minDate.setMonth(0);
console.log('GridMarkings (1): ' + minDate.toLocaleString());
i = minDate.getTime();
limit++;
} while (i < axes.xaxis.max || limit > 200);
}
else if (dayDiff > 30) { // in months
console.log('for months');
minDate.setHours(0);
minDate.setMinutes(0);
minDate.setDate(1);
var i = minDate.getTime();
var curDate;
let limit = 0;
do {
markings.push({ xaxis: { from: i, to: i + 30 * 24 * 60 * 60 * 1000 }, color: MarkingColor });
i += 2 * 31 * 24 * 60 * 60 * 1000; //plus one month
curDate = new Date(i);
minDate = curDate;
minDate.setHours(0);
minDate.setMinutes(0);
minDate.setDate(1);
console.log('GridMarkings (2): ' + minDate.toLocaleString());
i = minDate.getTime();
limit++;
} while (i < axes.xaxis.max || limit > 200);
}
else if (dayDiff > 10) {
console.log('for more than days');
//if (dayDiff > 2) {
minDate.setHours(12);
minDate.setMinutes(0);
var i = minDate.getTime();
let limit = 0;
do {
markings.push({ xaxis: { from: i, to: i + 5 * 24 * 60 * 60 * 1000 }, color: MarkingColor });
i += 2 * 5 * 24 * 60 * 60 * 1000; //plus 5 days
limit++;
} while (i < axes.xaxis.max || limit > 200);
}
//if we only few hours then we need markings per hour otherwise per day
else if (dayDiff > 2) {
console.log('for more than 2 days');
let limit = 0;
do {
markings.push({ xaxis: { from: i, to: i + 24 * 60 * 60 * 1000 }, color: MarkingColor });
i += 2 * 24 * 60 * 60 * 1000;
limit++;
} while (i < axes.xaxis.max || limit > 200);
}
else {
console.log('for hours');
let limit = 0;
do {
markings.push({ xaxis: { from: i, to: i + 60 * 60 * 1000 }, color: MarkingColor });
i += 2 * 60 * 60 * 1000;
limit++;
} while (i < axes.xaxis.max || limit > 200);
}
return markings;
}
//===============================================================
//Attention: this is different to sbfspot and vis-weather!!! we have much longer time periods here
function CalcTicks4X(axis) {
var ticks = [];
var minDate = new Date(axis.min);
const dayDiff = (axis.max - axis.min) / 1000 / 60 / 60 / 24;
console.log('CalcTicks4X: DayDiff ' + dayDiff + ' (' + axis.max + ' ' + axis.min + ')');
if (dayDiff > 400) { //in years
minDate.setHours(12);
minDate.setMinutes(0);
minDate.setDate(15);
minDate.setMonth(5);
var i = minDate.getTime();
var curDate;
let limit = 0;
do {
ticks.push([i]);
i += 12 * 30 * 24 * 60 * 60 * 1000; //plus one year
curDate = new Date(i);
minDate = curDate;
minDate.setHours(12);
minDate.setMinutes(0);
minDate.setDate(15);
minDate.setMonth(5);
//console.log('CalcTicks4X (1): ' + minDate.toLocaleString());
i = minDate.getTime();
limit++;
} while (i < axis.max || limit > 200);
}
else if (dayDiff > 30) { // in months
minDate.setHours(12);
minDate.setMinutes(0);
minDate.setDate(15);
var i = minDate.getTime();
var curDate;
let limit = 0;
do {
ticks.push([i]);
i += 30 * 24 * 60 * 60 * 1000; //plus one month
curDate = new Date(i);
minDate = curDate;
minDate.setHours(12);
minDate.setMinutes(0);
minDate.setDate(15);
//console.log('CalcTicks4X (2): ' + minDate.toLocaleString());
i = minDate.getTime();
limit++;
} while (i < axis.max || limit > 200);
}
else if (dayDiff > 10) {
//if (dayDiff > 2) {
minDate.setHours(12);
minDate.setMinutes(0);
var i = minDate.getTime();
let limit = 0;
do {
ticks.push([i]);
i += 5 * 24 * 60 * 60 * 1000; //plus 5 days
limit++;
} while (i < axis.max || limit > 200);
}
else if (dayDiff > 2) {
//if (dayDiff > 2) {
minDate.setHours(12);
minDate.setMinutes(0);
var i = minDate.getTime();
let limit = 0;
do {
ticks.push([i]);
i += 24 * 60 * 60 * 1000; //plus a day
limit++;
} while (i < axis.max || limit > 200);
}
else {
minDate.setHours(0);
minDate.setMinutes(0);
var i = minDate.getTime();
let limit = 0;
do {
ticks.push([i]);
i += 6 * 60 * 60 * 1000; //plus 6 hours
limit++;
} while (i < axis.max || limit > 200);
}
return ticks;
}
//should avoid endles loops
let UpdateRetryCounter = 0;
function update() {
console.log("ShowChart sbfspot (" + widgetID + ") retry counter " + UpdateRetryCounter);
var $div = $('#' + widgetID);
// if nothing found => wait
if (!$div.length) {
return setTimeout(function () {
console.log("need to wait... (" + widgetID + ")");
if (UpdateRetryCounter < 5) {
UpdateRetryCounter++;
update();
}
}, 1000);
}
UpdateRetryCounter = 0;
console.log("ShowChart sbfspot begin (" + widgetID + ")");
if (!data || !data.sbfspotinstance) {
console.log("keine instanz (" + widgetID + ")");
$div.html("<br> <center> <font color='red'> no instance for sbfspot specified </font> </center></br>");
}
else if (!data.serial) {
console.log("keine seriennummer (" + widgetID + ")");
$div.html("<br> <center> <font color='red'> no inverter serial number for sbfspot specified </font> </center></br>");
}
if ($div[0].clientHeight < 50 || $div[0].clientWidth < 50) {
console.log("widget too small (" + widgetID + ")");
$div.html("<br> <center> <font color='red'> widget too small, please increase size (heigth or width) </font> </center></br>");
if ($div[0].clientHeight < 50) {
$div[0].style.height = "50px";
}
if ($div[0].clientWidth < 50) {
$div[0].style.width = "50px";
}
}
else {
SetMarkingColor(data.markingcolor);
var dateMin = -1;
var dateMax = -1;
var values = [];
var maxY = -9999;
var minY = 9999;
try {
var oid_value = data.oid_value;
var oData = JSON.parse(vis.states[oid_value + '.val']);
if (oData === null || typeof oData == "undefined" || oData.length < 1) {
$div.html("<br> <center> <font color='red'>no data available yet for sbfspot</font> </center></br>");
return;
}
//console.log("oData " + oData.length);
//console.log(JSON.stringify(oData));
var $sel = vis.binds.sbfspot.setup.datasel[data.valueselect];
console.log("sel " + $sel);
var oldValue = 0;
for (var i = 0; i < oData.length; i++) {
//[{"time":"06:08","value":0},{"time":"07:08","value":60},{"time":"08:08","value":181},{"time":"09:08","value":401},{"time":"10:08","value":1917},{"time":"11:08","value":3839},{"time":"12:08","value":5905},{"time":"13:08","value":8025},{"time":"14:08","value":10052},{"time":"15:08","value":11844},{"time":"16:08","value":13159},{"time":"17:08","value":13773},{"time":"18:08","value":13875},{"time":"19:08","value":13911},{"time":"20:08","value":13911}] kW
//[{ "date": "2017-07-27", "value": 4045 }, { "date": "2017-07-28", "value": 10050 }, { "date": "2017-07-29", "value": 10442 }, { "date": "2017-07-30", "value": 13448 }, { "date": "2017-07-31", "value": 13476 }, { "date": "2017-08-01", "value": 12294 }, { "date": "2017-08-02", "value": 9084 }, { "date": "2017-08-03", "value": 3626 }, { "date": "2017-08-04", "value": 8504 }, { "date": "2017-08-05", "value": 12037 }, { "date": "2017-08-06", "value": 9725 }, { "date": "2017-08-07", "value": 13577 }, { "date": "2017-08-08", "value": 13310 }, { "date": "2017-08-09", "value": 12120 }, { "date": "2017-08-10", "value": 1391 }, { "date": "2017-08-11", "value": 2447 }, { "date": "2017-08-12", "value": 5659 }, { "date": "2017-08-13", "value": 5388 }, { "date": "2017-08-14", "value": 11364 }, { "date": "2017-08-15", "value": 12985 }, { "date": "2017-08-16", "value": 7504 }, { "date": "2017-08-17", "value": 9294 }, { "date": "2017-08-18", "value": 8594 }, { "date": "2017-08-19", "value": 10459 }, { "date": "2017-08-20", "value": 7991 }, { "date": "2017-08-21", "value": 10881 }, { "date": "2017-08-22", "value": 9715 }, { "date": "2017-08-23", "value": 13911 }, { "date": "2017-08-24", "value": 9016 }, { "date": "2017-08-25", "value": 11051 }, { "date": "2017-08-26", "value": 155 }]
//[{"month":"2016-09","value":17886174},{"month":"2016-10","value":17973503},{"month":"2016-11","value":18020416},{"month":"2016-12","value":18052202},{"month":"2017-01","value":18077080},{"month":"2017-02","value":18171050},{"month":"2017-03","value":18384397},{"month":"2017-04","value":18602474},{"month":"2017-05","value":18909431},{"month":"2017-06","value":19236280},{"month":"2017-07","value":19522862},{"month":"2017-08","value":19754944}]
//[{"year":"2016","value":18052202},{"year":"2017","value":19754944}]
if ($sel == 1) {
var oVals = oData[i];
var sDate = oVals["time"];
var value = parseInt(oVals["value"], 10);
var diff = value - oldValue;
oldValue = value;
var DateArray = sDate.split(":");
var minute = parseInt(DateArray[1], 10);
var hour = parseInt(DateArray[0], 10);
var oDate = new Date();
oDate.setHours(hour);
oDate.setMinutes(minute);
if (diff < minY) minY = diff;
if (diff > maxY) maxY = diff;
//console.log(oDate.toString() + " : " + diff);
var date = oDate.getTime();
if (dateMin === -1) {
dateMin = date;
}
dateMax = date;
values.push([oDate, diff]);
}
else if ($sel == 2) {
var oVals = oData[i];
var sDate = oVals["date"];
var value = parseInt(oVals["value"]);
var value = value;
//2017-08-12
var DateArray = sDate.split("-");
var day = parseInt(DateArray[2], 10);
var month = parseInt(DateArray[1], 10);
var year = parseInt(DateArray[0], 10);
month--;
var oDate = new Date(year, month, day, 12, 0, 0, 0);
if (value < minY) minY = value;
if (value > maxY) maxY = value;
//console.log(oDate.toDateString() + " : " + value);
var date = oDate.getTime();
if (dateMin === -1) {
dateMin = date;
}
dateMax = date;
values.push([oDate, value]);
}
else if ($sel == 3) {
var oVals = oData[i];
var sDate = oVals["month"];
var value = parseInt(oVals["value"], 10);
var value = value;
//2016-09
//console.log(sDate);
//on new android app this goas fail; don't know why...
//var month = parseInt(sDate.substring(5, 7));
//var year = parseInt(sDate.substring(0, 4));
var DateArray = sDate.split("-");
var month = parseInt(DateArray[1], 10);
var year = parseInt(DateArray[0], 10);
console.log("array " + DateArray[0] + " / " + DateArray[1]);
month--;
//mid of month
var oDate = new Date(year, month, 15, 12, 0, 0, 0);
var diff = value - oldValue;
if (oldValue > 0) {
if (diff < minY) minY = diff;
if (diff > maxY) maxY = diff;
console.log(oDate.toDateString() + " : " + diff + " (" + year + "," + month + ")");
var date = oDate.getTime();
if (dateMin === -1) {
dateMin = date;
}
dateMax = date;
values.push([oDate, diff]);
}
oldValue = value;
}
else if ($sel == 4) {
var oVals = oData[i];
var year = parseInt(oVals["year"], 10);
var value = parseInt(oVals["value"], 10);
var value = value;
//2016
// mid of year
var oDate = new Date(year, 5, 30, 12, 0, 0, 0);
var diff = value - oldValue;
if (oldValue > 0) {
if (diff < minY) minY = diff;
if (diff > maxY) maxY = diff;
console.log(oDate.toDateString() + " : " + diff);
var date = oDate.getTime();
if (dateMin === -1) {
dateMin = date;
}
dateMax = date;
values.push([oDate, diff]);
}
else {
console.log(oDate.toDateString() + " : " + value);
var date = oDate.getTime();
if (dateMin === -1) {
dateMin = date;
}
dateMax = date;
values.push([oDate, value]);
}
oldValue = value;
}
}
} catch (e) {
console.log('exception catch in parse data [' + e + ']');
}
var barwidth = 0;
if ($sel == 1) {
barwidth = 1000 * 60 * 60 * 0.25; //0,25 h
}
else if ($sel == 2) {
barwidth = 1000 * 60 * 60 * 12; //12 h
}
else if ($sel == 3) {
barwidth = 1000 * 60 * 60 * 24 * 15; //15 days
}
else if ($sel == 4) {
barwidth = 1000 * 60 * 60 * 24 * 182; //365/2=182 days
}
console.log("barwidth = " + barwidth); // in ms
//sbfspot.0.2000562095.history.last30Days
/*
var ticksX = data.ticksonxaxix > 0 ? parseInt(data.ticksonxaxix, 10) : 5;
if (ticksX > values.length) {
ticksX = values.length;
console.log('reduce ticks on X to ' + ticksX);
}
*/
$.plot($div,
[{
data: values,
color: data.graphcolor,
label: data.graphName,
xaxis: 1,
yaxis: 1,
lines: { show: false },
points: { show: data.WithPoints },
bars:
{
show: true,
barWidth: [barwidth, true],
align: "center",
horizontal: false
}
},
],
{
xaxes:
[{
axisLabelUseCanvas: true,
axisLabelColour: 'orange',
show: data.withxaxix,
mode: "time",
timeBase: "milliseconds",
tickLength: 5,
min: dateMin,
max: dateMax,
//ticks: data.ticksonxaxix > 0 ? parseInt(data.ticksonxaxix, 10) : 5,
ticks: CalcTicks4X,
autoScale: "none",
timeformat: data.graphDateFormat,
monthNames: ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
color: data.tickscolor,
tickColor: data.tickscolor,
font: {
size: data.LabelFontSize,
lineHeight: 13,
style: "normal", //"italic",
weight: "bold",
family: data.LabelFontFamily,
variant: "small-caps",
color: data.axislabelcolor,
},
timezone: "browser"
},
],
yaxes:
[{
axisLabelUseCanvas: true,
axisLabelColour: 'orange',
show: data.withyaxix,
max: maxY,
min: minY,
autoScale: "none", // Available modes: "none", "loose", "exact"
showTickLabels: "major",
alignTicksWithAxis: 1,
position: 'left',
//ticks: 3,
tickLength: parseFloat(data.tickLength), //20, // size in pixels of major tick marks
showMinorTicks: data.showMinorTicks, //false, // true = show minor tick marks, false = hide minor tick marks
showTicks: data.showTicks, //true, // true = show tick marks, false = hide all tick marks
tickDecimals: data.tickDecimals, //1, // no. of decimals, null means auto
tickSize: data.tickSize, //3, // number or [number, "unit"]
minTickSize: data.minTickSize, //1, // number or [number, "unit"]
color: data.coloraxis,
tickColor: data.coloraxis,
labelWidth: parseFloat(data.labelwidth),
font: {
size: data.LabelFontSize,
lineHeight: 13,
style: "normal", //"italic",
weight: "bold",
family: data.LabelFontFamily,
variant: "small-caps",
color: data.colorticklabel,
},
tickFormatter: xwhFormatter
},
],
grid:
{
//hover
hoverable: true, //to trigger plothover event on mouse hover or tap on a point
clickable: true, //to trigger plotclick event on mouse hover
markings: data.withmarking ? GridMarkings : null,
// backgroundColor: data.nobgcolor ? null : { colors: ["#fff", "#eee"] },
backgroundColor: data.nobgcolor ? null : data.bgcolor,
borderWidth: parseFloat(data.borderWidth), //data.withborder,
borderColor: data.bordercolor,
margin: 1,
/*
borderWidth: {
top: data.withborder ? 1 : 0,
right: data.withborder ? 1 : 0,
bottom: data.withborder ? 2 : 0,
left: data.withborder ? 2 : 0
},*/
},
legend: {
show: data.withlegend,
labelFormatter: legendformater,
//labelBoxBorderColor: color,
//noColumns: number,
position: data.legendposition,
//margin: number of pixels or [x margin, y margin]
backgroundColor: null,
backgroundOpacity: 0,
container: null,
sorted: false
}
}
);
//****************************************************************************************
//hover
console.log("hover start " + widgetID + " " + data.WithHOver);
if (data.WithHOver) {
console.log("hover start " + widgetID);
$('#' + widgetID).bind("plotclick", function (event, pos, item) {
console.log("clicked at " + pos.x + ", " + pos.y);
// axis coordinates for other axes, if present, are in pos.x2, pos.x3, ...
// if you need global screen coordinates, they are pos.pageX, pos.pageY
if (item) {
let x = item.datapoint[0];
let y = item.datapoint[1].toFixed(2);
var xDate = new Date(x);
console.log("clicked a point!" + item.series.label + " " + y + " on " + xDate.toLocaleString() + " = " + $.plot.formatDate(xDate, data.graphDateFormat));
let zindex = $div.css("z-index");
zindex++;
console.log("z-index " + zindex);
//damit Tooltip in Vordergrund erscheind, muss z-index vom widget kleiner sein...
$("#sbfspottooltip").html($.plot.formatDate(xDate, data.graphDateFormat) + "<br> " + item.series.yaxis.tickFormatter(y, item.series.yaxis))
.css({ top: item.pageY + 5, left: item.pageX + 5, "z-index": zindex })
.fadeIn(200);
}
else {
$("#sbfspottooltip").stop().hide();
}
});
}
//****************************************************************************************
}
};
if (data.sbfspotinstance) {
var oid_value = data.oid_value;
console.log("bind " + oid_value);
vis.states.bind(oid_value + '.val', function () {
update();
});
// update every x seconds
if (!vis.editMode) {
console.log("interval " + vis.binds.sbfspot.setup.intervals[data.time_interval]);
$div.data('timer', setInterval(function () {
update();
}, parseInt(vis.binds.sbfspot.setup.intervals[data.time_interval] / (parseInt(data.points, 10) || 10), 10)));
}
}
else {
console.log("instance not set ");
}
update();
if (vis.editMode) {
console.log("flot version " + $.plot.version + " for sbfspot");
}
}
},
};
if (vis.editMode) {
vis.binds.sbfspot.onInstanceChanged = function (widgetID, view, newId, fields) {
console.log('---------: ' + widgetID + ' - ' + view + ' - ' + newId + ' - ' + fields);
var changed = [];
//delete all oid's
vis.views[view].widgets[widgetID].data.oid_value = "";
vis.widgets[widgetID].data.oid_value = "";
//sbfspot.0.2000562095.history.last30Days
//then copy new values into oid
if ((fields.indexOf("serial") > -1) || (fields.indexOf("sbfspotinstance") > -1) || fields.indexOf("valueselect") > -1) {
var sSerial = vis.widgets[widgetID].data.serial;
var sInstance = vis.widgets[widgetID].data.sbfspotinstance;
var sValueSet = "today";
var $sel = vis.widgets[widgetID].data.valueselect;
console.log("+++++++ " + $sel + " " + vis.binds.sbfspot.setup.datasel[$sel]);
switch (vis.binds.sbfspot.setup.datasel[$sel]) {
case 1:
vis.views[view].widgets[widgetID].data.graphDateFormat = "%H:%M";
vis.widgets[widgetID].data.graphDateFormat = "%H:%M";
sValueSet = "today";
break;
case 2:
vis.views[view].widgets[widgetID].data.graphDateFormat = "%d.%b";
vis.widgets[widgetID].data.graphDateFormat = "%d.%b";
sValueSet = "last30Days";
break;
case 3:
vis.views[view].widgets[widgetID].data.graphDateFormat = "%b %Y";
vis.widgets[widgetID].data.graphDateFormat = "%b %Y";
sValueSet = "last12Months";
break;
case 4:
vis.views[view].widgets[widgetID].data.graphDateFormat = "%Y";
vis.widgets[widgetID].data.graphDateFormat = "%Y";
sValueSet = "years";
break;
default: break;
}
console.log('calc new oids with serial ' + sSerial + " Instance " + sInstance + " " + sValueSet);
vis.views[view].widgets[widgetID].data.oid_value = sInstance + "." + sSerial + ".history." + sValueSet;
vis.widgets[widgetID].data.oid_value = sInstance + "." + sSerial + ".history." + sValueSet;
}
return changed;
}
}
vis.binds.sbfspot.showVersion();
</script>
<script id="tplSbfspotShowInstance"
type="text/ejs"
class="vis-tpl"
data-vis-set="sbfspot"
data-vis-name="sbfspot"
data-vis-type="sbfspot"
data-vis-update-style="true"
data-vis-prev='<img src="widgets/sbfspot/img/Prev_tplSbfspot.png"></img>'
data-vis-attrs="sbfspotinstance/sbfspot/onInstanceChanged;time_interval[30 minutes]/select,1 second,10 seconds,30 seconds,1 minute,2 minutes,5 minutes,10 minutes,30 minutes,1 hour,2 hours,4 hours,8 hours,12 hours,24 hours;serial//onInstanceChanged;valueselect[sel_today]/select,sel_today,sel_last30days,sel_last12months,sel_years/onInstanceChanged;WithHOver[true]/checkbox;WithPoints[true]/checkbox;"
data-vis-attrs0="withxaxix[true]/checkbox;axislabelcolor[#f1f113]/color;tickscolor[#f1f113]/color;LabelFontSize[8];LabelFontFamily[Arial]/fontname;withmarking[true]/checkbox;markingcolor[#eaebe5]/color;"
data-vis-attrs1="borderWidth[1];bordercolor[#000000]/color;nobgcolor[true]/checkbox;bgcolor[#FFFFFF]/color;withlegend[false]/checkbox;legendposition[ne]/select,ne,nw,se,sw;"
data-vis-attrs2="group.graph;graphName;graphcolor[#f1f113]/color;coloraxis[#f1f113]/color;colorticklabel[#f1f113]/color;withyaxix[true]/checkbox;graphDateFormat[%H:%M];tickLength[5];showMinorTicks[true]/checkbox;showTicks[true]/checkbox;tickDecimals[1];tickSize[3];minTickSize[2];labelwidth[30];"
data-vis-attrs3="group.oids;oid_value/id;">
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow: hidden;" id="<%= this.data.attr('wid') %>">
<div class="vis-sbfspot-widget-body"
<%= vis.binds.sbfspot.history.init(this.data.wid, this.view, this.data, this.style) %>>
</div>
</div>
</script>