node-red-contrib-knx-ultimate
Version:
Control your KNX and KNX Secure intallation via Node-Red! A bunch of KNX nodes, with integrated Philips HUE control, ETS group address importer, and KNX routing between interfaces. Easy to use and highly configurable.
923 lines (847 loc) • 49.6 kB
HTML
<script type="text/javascript">
(function () {
RED.plugins.registerPlugin("knxUltimateMonitor-sidebar-plugin", {
onadd: function () {
const tabId = "knxUltimateMonitorTab";
const actionId = "knxUltimateMonitor:show";
const debugTabId = "knxUltimateDebugTab";
const debugActionId = "knxUltimateDebug:show";
if (!document.getElementById('knx-monitor-style')) {
$('<style>', {
id: 'knx-monitor-style',
text: `
#knx-monitor-table { font-size: 0.85em; table-layout: fixed; }
#knx-monitor-table thead th { padding: 2px 4px; }
#knx-monitor-table tbody td { padding: 2px 4px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
#knx-monitor-table tbody tr:nth-child(even) { background-color: #fafafa; }
#knx-monitor-table tbody tr.knx-monitor-highlight { background-color: #c9f5d4 !important; }
#knx-monitor-toolbar { padding: 4px 6px !important; }
#knx-monitor-toolbar select { margin-right: 4px; }
#knx-monitor-empty { font-size: 0.85em; }
#knx-monitor-table tbody td.knx-monitor-value-cell { display: flex; align-items: center; gap: 4px; height: 100%; min-height: 24px; }
#knx-monitor-table tbody td.knx-monitor-value-cell span.knx-monitor-value-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#knx-monitor-table tbody td.knx-monitor-value-cell button.knx-monitor-toggle { padding: 0 4px; min-width: 22px; min-height: 18px; font-size: 0.75em; line-height: 1; }
#knx-monitor-table thead th { position: relative; }
#knx-monitor-table thead th .knx-monitor-col-handle { position: absolute; top: 0; right: -3px; width: 6px; cursor: col-resize; user-select: none; height: 100%; }
#knx-monitor-table thead th .knx-monitor-col-handle::after { content: ''; display: block; width: 1px; height: 100%; margin: 0 auto; background: rgba(0,0,0,0.2); }
`
}).appendTo('head');
}
if (!document.getElementById('knx-debug-style')) {
$('<style>', {
id: 'knx-debug-style',
text: `
#knx-debug-toolbar { padding: 4px 6px !important; display: flex; align-items: center; gap: 6px; }
#knx-debug-toolbar .knx-debug-toolbar-left { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#knx-debug-toolbar .knx-debug-toolbar-right { margin-left: auto; font-size: 0.8em; color: var(--red-ui-text-color-secondary, #666); }
#knx-debug-toolbar button.red-ui-button { min-height: 24px; }
#knx-debug-log-wrapper { flex: 1 1 auto; position: relative; background: #fff; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }
#knx-debug-log { position: absolute; inset: 0; overflow: auto; padding: 6px; font-family: Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; background: #fff; color: #202020; }
#knx-debug-log.empty::after { content: 'Nessuna riga di log disponibile al momento.'; color: var(--red-ui-text-color-secondary, #666); font-style: italic; }
.knx-debug-line { padding: 2px 4px; border-left: 3px solid transparent; margin: 0 0 2px; }
.knx-debug-line.level-error { border-left-color: #f44336; background-color: rgba(244, 67, 54, 0.1); color: #b71c1c; }
.knx-debug-line.level-warn { border-left-color: #ff6f00; background-color: #fff3e0; color: #bf360c; }
.knx-debug-line.level-info { border-left-color: #607d8b; background-color: rgba(96, 125, 139, 0.08); color: #37474f; }
.knx-debug-line.level-debug { border-left-color: #2196f3; background-color: rgba(33, 150, 243, 0.08); color: #0d47a1; }
.knx-debug-line.level-success { border-left-color: #4caf50; background-color: rgba(76, 175, 80, 0.08); color: #1b5e20; }
.knx-debug-line.session-start { font-weight: 600; border-left-color: #9c27b0; background-color: rgba(156, 39, 176, 0.08); color: #4a148c; }
.knx-debug-status { padding: 4px 6px; font-size: 0.85em; color: var(--red-ui-text-color-secondary, #666); border-top: 1px solid rgba(0,0,0,0.06); }
`
}).appendTo('head');
}
const getLocale = () => {
const lang = (RED.settings && RED.settings.lang) ? RED.settings.lang : (navigator.language || navigator.userLanguage || 'en');
return (lang || 'en').toLowerCase();
};
const translations = {
en: {
tip: 'Tip: use the icon beside boolean values to toggle them on the KNX bus.',
refresh: 'Refresh',
auto: 'Auto',
reorder: 'Reorder',
search: 'Filter...',
noData: 'No data available.',
inferredDptHint: 'Values with * use an inferred datapoint from the payload.',
colValue: 'Value',
colName: 'Name',
colUpdated: 'Updated'
},
it: {
tip: 'Suggerimento: usa l\'icona accanto ai valori booleani per inviarne il toggle sul bus KNX.',
refresh: 'Aggiorna',
auto: 'Auto',
reorder: 'Riordina',
search: 'Filtra...',
noData: 'Nessun dato disponibile.',
inferredDptHint: 'I valori con * usano un datapoint dedotto dal payload.',
colValue: 'Valore',
colName: 'Nome',
colUpdated: 'Aggiornato'
},
fr: {
tip: 'Astuce : utilisez l\'icône à côté des valeurs booléennes pour les basculer sur le bus KNX.',
refresh: 'Actualiser',
auto: 'Auto',
reorder: 'Réordonner',
search: 'Filtrer...',
noData: 'Aucune donnée disponible.',
inferredDptHint: 'Les valeurs avec * utilisent un datapoint déduit du payload.',
colValue: 'Valeur',
colName: 'Nom',
colUpdated: 'Mis à jour'
},
es: {
tip: 'Consejo: usa el icono junto a los valores booleanos para alternarlos en el bus KNX.',
refresh: 'Actualizar',
auto: 'Auto',
reorder: 'Reordenar',
search: 'Filtrar...',
noData: 'No hay datos disponibles.',
inferredDptHint: 'Los valores con * usan un datapoint inferido del payload.',
colValue: 'Valor',
colName: 'Nombre',
colUpdated: 'Actualizado'
},
de: {
tip: 'Tipp: Verwenden Sie das Symbol neben booleschen Werten, um sie auf dem KNX-Bus umzuschalten.',
refresh: 'Aktualisieren',
auto: 'Auto',
reorder: 'Neu ordnen',
search: 'Filtern...',
noData: 'Keine Daten verfügbar.',
inferredDptHint: 'Werte mit * verwenden einen aus dem Payload abgeleiteten Datenpunkt.',
colValue: 'Wert',
colName: 'Name',
colUpdated: 'Aktualisiert'
},
'zh-CN': {
tip: '提示：使用布尔值旁边的图标，在 KNX 总线上切换它们。',
refresh: '刷新',
auto: '自动',
reorder: '重新排序',
search: '筛选…',
noData: '暂无数据。',
inferredDptHint: '带 * 的值使用从 payload 推断的数据点。',
colValue: '值',
colName: '名称',
colUpdated: '更新时间'
}
};
const resolveMessage = (key) => {
const locale = getLocale();
if (translations[locale] && translations[locale][key]) return translations[locale][key];
const short = locale.split('-')[0];
if (translations[short] && translations[short][key]) return translations[short][key];
return translations.en[key];
};
const columnDefs = [
{ key: 'ga', label: 'GA', width: 50, minWidth: 40 },
{ key: 'value', label: resolveMessage('colValue'), width: 100, minWidth: 70 },
{ key: 'dpt', label: 'DPT', width: 50, minWidth: 40 },
{ key: 'name', label: resolveMessage('colName'), width: 280, minWidth: 150 },
{ key: 'updated', label: resolveMessage('colUpdated'), width: 160, minWidth: 120 }
];
const container = $("<div>").css({ height: "100%", display: "flex", flexDirection: "column" });
const header = $("<div>", { class: "red-ui-sidebar-header" }).appendTo(container);
const toolbar = $("<div>").css({ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "4px 6px" }).attr('id', 'knx-monitor-toolbar').appendTo(header);
const toolbarStack = $('<div>').css({ display: 'flex', flexDirection: 'column', gap: '6px' }).appendTo(toolbar);
const rowTop = $('<div>').css({ display: 'flex', alignItems: 'center', gap: '8px', justifyContent: 'space-between' }).appendTo(toolbarStack);
const topLeft = $('<div>').css({ display: 'flex', alignItems: 'center', gap: '6px' }).appendTo(rowTop);
const statusSpan = $("<span>").css({ fontSize: "0.8em", color: "#555" }).appendTo(rowTop);
const serverSelect = $("<select>").css({ minWidth: "200px" }).appendTo(topLeft);
const refreshButton = $("<button>", { class: "red-ui-button" }).append($('<i>', { class: 'fa fa-refresh' })).append(` ${resolveMessage('refresh')}`).appendTo(topLeft);
const rowBottom = $('<div>').css({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px' }).appendTo(toolbarStack);
const bottomLeft = $('<div>').css({ display: 'flex', alignItems: 'center', gap: '12px' }).appendTo(rowBottom);
const bottomRight = $('<div>').css({ display: 'flex', alignItems: 'center' }).appendTo(rowBottom);
const autoLabel = $("<label>").css({ display: "flex", alignItems: "center", gap: "6px", fontSize: '0.9em' }).appendTo(bottomLeft);
const autoCheckbox = $("<input>", { type: "checkbox", checked: true }).appendTo(autoLabel);
autoLabel.append($('<span>').text(resolveMessage('auto')));
const reorderLabel = $("<label>").css({ display: "flex", alignItems: "center", gap: "6px", fontSize: '0.9em' }).appendTo(bottomLeft);
const reorderCheckbox = $("<input>", { type: "checkbox", checked: true }).appendTo(reorderLabel);
reorderLabel.append($('<span>').text(resolveMessage('reorder')));
const searchWrapper = $('<div>').css({ display: 'flex', alignItems: 'center', gap: '6px', border: '1px solid #c9c9c9', borderRadius: '4px', padding: '4px 8px', backgroundColor: '#fff', minWidth: '200px' }).appendTo(bottomRight);
$('<i>', { class: 'fa fa-search', style: 'color:#666;font-size:0.9em;' }).appendTo(searchWrapper);
const searchInput = $('<input>', { type: 'text', placeholder: resolveMessage('search') }).css({ border: 'none', outline: 'none', padding: 0, background: 'transparent', flex: '1 1 auto', fontSize: '0.9em', minWidth: '120px' }).appendTo(searchWrapper);
const body = $("<div>", { class: "red-ui-sidebar-content" }).css({ flex: "1 1 auto", overflow: "auto", padding: "0 6px 4px" }).appendTo(container);
const emptyNotice = $("<div>").css({ margin: "8px 4px", color: "#888" }).text(resolveMessage('noData')).attr('id', 'knx-monitor-empty').appendTo(body);
const hintIcon = $('<div>').css({ fontSize: '0.8em', color: '#555', margin: '4px 4px 8px' }).text(resolveMessage('tip')).appendTo(body);
const table = $("<table>").css({ width: "100%", borderCollapse: "collapse", display: "none" }).attr('id', 'knx-monitor-table').appendTo(body);
const colGroup = $('<colgroup></colgroup>').appendTo(table);
columnDefs.forEach(def => {
$('<col>').attr('data-key', def.key).css('width', def.width + 'px').appendTo(colGroup);
});
const thead = $("<thead>").appendTo(table);
const headerRow = $("<tr>").appendTo(thead);
columnDefs.forEach(def => {
const cell = $("<th>").attr('data-key', def.key).css({ textAlign: "left", borderBottom: "1px solid #ccc", padding: "4px", fontWeight: "600" }).text(def.label);
const handle = $('<span class="knx-monitor-col-handle"></span>');
cell.append(handle);
headerRow.append(cell);
});
const tbody = $("<tbody>").appendTo(table);
const hint = $("<div>").css({ fontSize: "0.75em", color: "#777", margin: "6px 4px 0" }).text(resolveMessage('inferredDptHint')).appendTo(body);
const initColumnResize = () => {
let currentHandle = null;
let startX = 0;
let startWidth = 0;
let colElement = null;
let columnMeta = null;
const onMouseMove = (evt) => {
if (!currentHandle || !colElement || !columnMeta) return;
const delta = evt.pageX - startX;
const newWidth = Math.max(columnMeta.minWidth || 60, startWidth + delta);
colElement.css('width', newWidth + 'px');
};
const onMouseUp = () => {
if (!currentHandle) return;
$(document).off('mousemove', onMouseMove);
$(document).off('mouseup', onMouseUp);
currentHandle = null;
colElement = null;
columnMeta = null;
};
thead.find('.knx-monitor-col-handle').off('mousedown').on('mousedown', function (evt) {
evt.preventDefault();
evt.stopPropagation();
currentHandle = $(this);
const th = currentHandle.closest('th');
const key = th.data('key');
columnMeta = columnDefs.find(c => c.key === key);
colElement = colGroup.find(`col[data-key="${key}"]`);
startX = evt.pageX;
startWidth = parseInt(colElement.width(), 10) || (columnMeta ? columnMeta.width : 120);
$(document).on('mousemove', onMouseMove);
$(document).on('mouseup', onMouseUp);
});
};
const levelClassMap = {
error: 'level-error',
warn: 'level-warn',
warning: 'level-warn',
info: 'level-info',
debug: 'level-debug',
success: 'level-success'
};
const DEBUG_REFRESH_INTERVAL = 1000;
const debugAutoStorageKey = 'knxUltimateDebug:autoRefresh';
let debugLogWrapper = null;
let debugLogContainer = null;
let debugEntries = [];
let debugActive = false;
let debugLatestSeq = 0;
let debugAutoRefreshHandle = null;
let debugLimit = 5000;
let debugStatusEl = null;
let debugInfoCounter = null;
let debugAutoCheckbox = null;
let debugFetching = false;
let debugPendingForceRefresh = false;
let debugRenderedPlainText = '';
const loadDebugAutoPreference = () => {
try {
if (window.localStorage) {
const stored = window.localStorage.getItem(debugAutoStorageKey);
if (stored === 'true') return true;
if (stored === 'false') return false;
}
} catch (error) { }
return false;
};
const storeDebugAutoPreference = (value) => {
try {
if (window.localStorage) {
window.localStorage.setItem(debugAutoStorageKey, value ? 'true' : 'false');
}
} catch (error) { }
};
const setDebugStatus = (message) => {
if (debugStatusEl) {
debugStatusEl.text(message);
}
};
const ensureDebugLogContainer = () => {
if (debugLogContainer) return;
if (!debugLogWrapper) return;
debugLogContainer = $('<div>', { id: 'knx-debug-log', class: 'empty' }).appendTo(debugLogWrapper);
};
const formatDebugLine = (entry) => {
const level = (entry.level || 'info').toUpperCase();
const prefix = entry.prefix ? `[${entry.prefix}] ` : '';
let timestampText = '';
if (typeof entry.timestamp === 'number') {
const date = new Date(entry.timestamp);
if (!Number.isNaN(date.getTime())) {
timestampText = date.toLocaleString();
}
}
if (!timestampText && entry.isoTimestamp) {
timestampText = entry.isoTimestamp;
}
const message = entry.message || '';
return `${timestampText} [${level}] ${prefix}${message}`.trim();
};
const isLogNearBottom = () => {
if (!debugLogContainer || !debugLogContainer[0]) return true;
const el = debugLogContainer[0];
const gap = el.scrollHeight - el.scrollTop - el.clientHeight;
return gap < 40;
};
const renderDebugEntries = () => {
ensureDebugLogContainer();
if (!debugLogContainer) return;
const autoRefreshActive = !!(debugAutoCheckbox && debugAutoCheckbox.is(':checked'));
const shouldStick = autoRefreshActive ? true : isLogNearBottom();
const lines = debugEntries.map(formatDebugLine);
debugRenderedPlainText = lines.join('\n');
debugLogContainer.empty();
if (!lines.length) {
debugLogContainer.addClass('empty');
return;
}
debugLogContainer.removeClass('empty');
const fragment = document.createDocumentFragment();
debugEntries.forEach((entry, index) => {
const lineText = lines[index] || '';
const div = document.createElement('div');
div.className = 'knx-debug-line';
const level = (entry.level || 'info').toLowerCase();
const mapped = levelClassMap[level] || levelClassMap.info;
div.classList.add(mapped);
if (entry.sessionStart) div.classList.add('session-start');
div.textContent = lineText;
fragment.appendChild(div);
});
debugLogContainer[0].appendChild(fragment);
if (shouldStick) {
const el = debugLogContainer[0];
el.scrollTop = el.scrollHeight;
}
};
const updateDebugInfoCounter = (total) => {
if (debugInfoCounter) {
debugInfoCounter.text(`Rows: ${total}/${debugLimit}`);
}
};
const stopDebugAutoRefresh = () => {
if (debugAutoRefreshHandle) {
clearInterval(debugAutoRefreshHandle);
debugAutoRefreshHandle = null;
}
};
const ensureDebugAutoRefresh = () => {
if (debugAutoRefreshHandle) return;
if (!debugAutoCheckbox || !debugAutoCheckbox.is(':checked')) return;
debugAutoRefreshHandle = setInterval(() => {
if (!debugAutoCheckbox || !debugAutoCheckbox.is(':checked')) {
stopDebugAutoRefresh();
return;
}
if (!debugActive) return;
if (debugFetching) return;
fetchDebugLog({ triggeredByTimer: true, forceFull: true });
}, DEBUG_REFRESH_INTERVAL);
};
const copyDebugToClipboard = () => {
ensureDebugLogContainer();
if (!debugLogContainer) {
setDebugStatus('Debug viewer non disponibile.');
return;
}
const text = debugRenderedPlainText || '';
if (!text || text.trim() === '') {
setDebugStatus('Nessun testo da copiare.');
return;
}
const handleSuccess = () => {
setDebugStatus('Log copiato negli appunti.');
try { RED.notify('KNX Debug log copiato negli appunti.', 'success'); } catch (error) { }
};
const handleFailure = () => {
setDebugStatus('Impossibile copiare il log.');
try { RED.notify('Impossibile copiare il KNX Debug log.', 'error'); } catch (error) { }
};
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(handleSuccess).catch(handleFailure);
} else {
const temp = $('<textarea>').css({ position: 'fixed', top: '-2000px', left: '-2000px' }).val(text).appendTo('body');
try {
temp[0].select();
const ok = document.execCommand('copy');
temp.remove();
if (ok) handleSuccess();
else handleFailure();
} catch (error) {
temp.remove();
handleFailure();
}
}
};
const fetchDebugLog = (options = {}) => {
const { forceFull = false } = options;
if (debugFetching) {
if (forceFull) {
debugPendingForceRefresh = true;
}
return;
}
debugFetching = true;
const params = {};
if (!forceFull && debugLatestSeq > 0) {
params.sinceSeq = debugLatestSeq;
} else if (forceFull) {
debugLatestSeq = 0;
}
const query = $.param(params);
const url = query ? `knxUltimateDebugLog?${query}` : 'knxUltimateDebugLog';
if (forceFull) {
setDebugStatus('Aggiornamento log...');
}
$.getJSON(url, function (response) {
if (!response || !Array.isArray(response.entries)) {
setDebugStatus(response && response.error ? response.error : 'Impossibile leggere il log.');
return;
}
const incoming = response.entries;
debugLimit = response.limit || debugLimit;
if (forceFull || (!params.sinceSeq && debugEntries.length === 0)) {
debugEntries = incoming.slice();
} else if (params.sinceSeq) {
if (incoming.length) {
debugEntries = debugEntries.concat(incoming);
}
} else {
debugEntries = incoming.slice();
}
if (debugEntries.length > debugLimit) {
debugEntries = debugEntries.slice(debugEntries.length - debugLimit);
}
debugLatestSeq = response.latestSeq || debugLatestSeq;
renderDebugEntries();
updateDebugInfoCounter(debugEntries.length);
if (debugEntries.length === 0) {
setDebugStatus('Nessuna riga di log disponibile al momento.');
} else {
const now = new Date();
setDebugStatus(`Aggiornato alle ${now.toLocaleTimeString()}`);
}
}).fail(function () {
setDebugStatus('Impossibile caricare il KNX Debug log.');
}).always(function () {
debugFetching = false;
if (debugActive && debugAutoCheckbox && debugAutoCheckbox.is(':checked')) {
ensureDebugAutoRefresh();
} else {
stopDebugAutoRefresh();
}
if (debugPendingForceRefresh) {
debugPendingForceRefresh = false;
fetchDebugLog({ forceFull: true });
}
});
};
const initDebugTab = () => {
const container = $("<div>").css({ height: "100%", display: "flex", flexDirection: "column" });
const header = $("<div>", { class: "red-ui-sidebar-header" }).appendTo(container);
const toolbar = $("<div>", { id: "knx-debug-toolbar" }).appendTo(header);
const left = $("<div>", { class: "knx-debug-toolbar-left" }).appendTo(toolbar);
const copyButton = $('<button>', { type: 'button', class: 'red-ui-button', title: 'Copy log to clipboard' }).html('<i class="fa fa-copy"></i>').appendTo(left);
const refreshButton = $('<button>', { type: 'button', class: 'red-ui-button', title: 'Refresh log' }).html('<i class="fa fa-sync"></i>').appendTo(left);
const autoWrapper = $('<label>').css({ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '0.9em' }).appendTo(left);
debugAutoCheckbox = $('<input>', { type: 'checkbox' }).appendTo(autoWrapper);
autoWrapper.append($('<span>').text('Auto'));
debugAutoCheckbox.prop('checked', loadDebugAutoPreference());
const right = $("<div>", { class: "knx-debug-toolbar-right" }).appendTo(toolbar);
debugInfoCounter = $('<span>').text('Rows: 0/5000').appendTo(right);
debugLogWrapper = $('<div>', { id: 'knx-debug-log-wrapper' }).appendTo(container);
ensureDebugLogContainer();
debugStatusEl = $('<div>', { class: 'knx-debug-status' }).text('Pronto.').appendTo(container);
copyButton.on('click', function () {
copyDebugToClipboard();
});
refreshButton.on('click', function () {
fetchDebugLog({ forceFull: true });
});
debugAutoCheckbox.on('change', function () {
const enabled = $(this).is(':checked');
storeDebugAutoPreference(enabled);
if (enabled) {
debugActive = true;
fetchDebugLog({ forceFull: true });
ensureDebugAutoRefresh();
} else {
stopDebugAutoRefresh();
}
});
RED.actions.add(debugActionId, function () {
RED.sidebar.show(debugTabId);
});
if (RED.sidebar.containsTab(debugTabId)) {
RED.sidebar.removeTab(debugTabId);
}
RED.sidebar.addTab({
id: debugTabId,
label: "KNX Debug",
name: "KNX Debug",
iconClass: "fa fa-bug",
content: container,
action: debugActionId,
onchange: function (show) {
debugActive = !!show;
if (debugActive) {
ensureDebugLogContainer();
const shouldForceFull = debugEntries.length === 0;
fetchDebugLog({ forceFull: shouldForceFull });
if (debugAutoCheckbox && debugAutoCheckbox.is(':checked')) {
ensureDebugAutoRefresh();
}
} else {
stopDebugAutoRefresh();
}
}
});
};
RED.actions.add(actionId, function () {
RED.sidebar.show(tabId);
});
if (RED.sidebar.containsTab(tabId)) {
RED.sidebar.removeTab(tabId);
}
initColumnResize();
let active = false;
let timer = null;
let currentServer = "";
let lastDataMap = new Map();
let reorderEnabled = true;
const placeholderValue = '';
const disabledValue = 'NONE';
const listPlaceholderOption = () => $('<option>', { value: disabledValue }).text('-----');
const storageKey = 'knxUltimateMonitor:selectedGateway';
const loadStoredGateway = () => {
try {
if (window.localStorage) {
return window.localStorage.getItem(storageKey);
}
} catch (err) { }
return disabledValue;
};
const storeGateway = (val) => {
try {
if (window.localStorage) {
window.localStorage.setItem(storageKey, val || disabledValue);
}
} catch (err) { }
};
let storedGateway = loadStoredGateway();
let lastItems = [];
let filterTerm = '';
const matchesFilter = (item) => {
if (!filterTerm) return true;
const term = filterTerm;
if (item.ga && item.ga.toLowerCase().includes(term)) return true;
if (item.devicename && item.devicename.toLowerCase().includes(term)) return true;
if (item.valueText && item.valueText.toLowerCase().includes(term)) return true;
return false;
};
const renderRows = (items) => {
lastItems = Array.isArray(items) ? items.slice() : [];
const filteredItems = lastItems.filter(matchesFilter);
tbody.empty();
if (!filteredItems.length) {
table.hide();
emptyNotice.show();
return;
}
emptyNotice.hide();
table.show();
const highlightSet = new Set();
lastItems.forEach((item) => {
const key = item.ga || '';
const stamp = item.updatedAt === undefined ? '' : String(item.updatedAt);
const previousStamp = lastDataMap.get(key);
if (stamp && stamp !== previousStamp) {
highlightSet.add(key);
}
});
let sortedItems;
if (reorderEnabled) {
sortedItems = filteredItems.slice().sort((a, b) => {
const aChanged = highlightSet.has(a.ga);
const bChanged = highlightSet.has(b.ga);
if (aChanged !== bChanged) return aChanged ? -1 : 1;
if (aChanged && bChanged) {
const aTime = Number(a.updatedAt || 0);
const bTime = Number(b.updatedAt || 0);
return bTime - aTime;
}
return (a.ga || '').localeCompare(b.ga || '');
});
} else {
sortedItems = filteredItems.slice().sort((a, b) => (a.ga || '').localeCompare(b.ga || ''));
}
sortedItems.forEach((item) => {
const row = $("<tr>");
const appendCell = (text, extra) => {
const cell = $("<td>").text(text || "");
if (extra) cell.css(extra);
row.append(cell);
};
appendCell(item.ga || "", { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' });
let valueDisplay = item.valueText || '';
const valueStyle = { fontWeight: '600' };
if (typeof item.value === 'boolean') {
valueDisplay = item.value ? 'TRUE' : 'FALSE';
valueStyle.color = item.value ? '#0b5d1e' : '#c22929';
} else if (item.value !== null && item.value !== undefined && item.value !== '') {
const numericValue = Number(item.value);
if (!Number.isNaN(numericValue) && Number.isFinite(numericValue)) {
valueDisplay = numericValue.toFixed(2);
}
}
const appliedValueStyle = { ...valueStyle };
const textColor = appliedValueStyle.color;
const textWeight = appliedValueStyle.fontWeight;
delete appliedValueStyle.color;
delete appliedValueStyle.fontWeight;
const valueCell = $("<td>").addClass('knx-monitor-value-cell').css(appliedValueStyle);
valueCell.css({ alignItems: 'center', height: '100%', maxWidth: 'none', width: '100%' });
const valueSpan = $("<span>").addClass('knx-monitor-value-text').text(valueDisplay);
valueSpan.css({ color: textColor || '', fontWeight: textWeight || '', display: 'inline-flex', alignItems: 'center', height: '100%', flex: '0 0 auto', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' });
valueCell.append(valueSpan);
if (typeof item.value === 'boolean') {
const toggleBtn = $('<button>', {
type: 'button',
class: 'knx-monitor-toggle red-ui-button red-ui-button-small',
title: 'Toggle value'
}).append($('<i>', { class: 'fa fa-exchange' }));
toggleBtn.css({ alignSelf: 'center', marginLeft: '4px' });
toggleBtn.on('click', function (evt) {
evt.preventDefault();
evt.stopPropagation();
toggleValue(item.ga, toggleBtn);
});
valueCell.append(toggleBtn);
}
row.append(valueCell);
let dptLabel = item.dpt || "";
if (item.dptGuessed) {
dptLabel = dptLabel ? dptLabel + " *" : "*";
}
appendCell(dptLabel);
appendCell(item.devicename || "", { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' });
appendCell(item.updatedAt ? new Date(Number(item.updatedAt)).toLocaleString() : "");
if (highlightSet.has(item.ga)) {
row.addClass('knx-monitor-highlight');
setTimeout(() => {
row.removeClass('knx-monitor-highlight');
}, 500);
}
tbody.append(row);
});
const newMap = new Map();
lastItems.forEach((item) => {
if (item.ga) newMap.set(item.ga, item.updatedAt === undefined ? '' : String(item.updatedAt));
});
lastDataMap = newMap;
};
const setStatus = (text) => {
statusSpan.text(text || "");
};
const fetchData = (force) => {
if (!active && !force) return;
const serverId = currentServer;
if (!serverId || serverId === disabledValue) {
renderRows([]);
setStatus("Select a KNX gateway to view values.");
return;
}
setStatus("Loading...");
refreshButton.prop("disabled", true);
$.getJSON("knxUltimateMonitor", { serverId, _: Date.now() }, function (response) {
const items = (response && Array.isArray(response.items)) ? response.items : [];
renderRows(items);
if (response && response.error && response.error === 'NO_SERVER') {
setStatus("Gateway not found. Deploy and try again.");
} else if (response && response.error) {
setStatus(response.error);
} else if (items.length === 0) {
setStatus("No telegrams received yet.");
} else {
setStatus("Updated: " + new Date().toLocaleTimeString());
}
}).fail(function (jqXHR) {
let message = "Unable to load values.";
try {
if (jqXHR && jqXHR.responseJSON && jqXHR.responseJSON.error) {
message = jqXHR.responseJSON.error;
}
} catch (err) { /* empty */ }
renderRows([]);
setStatus(message);
}).always(function () {
refreshButton.prop("disabled", false);
});
};
const stopTimer = () => {
if (timer) {
clearInterval(timer);
timer = null;
}
};
const startTimer = () => {
stopTimer();
if (!autoCheckbox.prop("checked")) return;
if (!currentServer || currentServer === disabledValue) return;
timer = setInterval(function () { fetchData(false); }, 1000);
fetchData(true);
};
const populateServers = () => {
const options = [];
try {
RED.nodes.eachConfig(function (configNode) {
if (configNode.type === 'knxUltimate-config') {
const label = configNode.name || configNode.host || configNode.id;
options.push({ id: configNode.id, label });
}
});
} catch (err) { /* empty */ }
serverSelect.empty();
serverSelect.append(listPlaceholderOption());
if (options.length === 0) {
serverSelect.prop('disabled', true);
currentServer = disabledValue;
renderRows([]);
setStatus("No KNX gateways in the current flow.");
return false;
}
serverSelect.prop('disabled', false);
options.sort((a, b) => a.label.localeCompare(b.label));
options.forEach((item) => {
serverSelect.append($('<option>', { value: item.id }).text(item.label));
});
const candidate = storedGateway && options.some(opt => opt.id === storedGateway) ? storedGateway : disabledValue;
serverSelect.val(candidate);
currentServer = candidate;
storedGateway = candidate;
if (currentServer === disabledValue) {
renderRows([]);
}
return true;
};
serverSelect.on('change', function () {
currentServer = $(this).val();
storeGateway(currentServer);
if (!currentServer || currentServer === disabledValue) {
currentServer = disabledValue;
renderRows([]);
setStatus("Select a KNX gateway to view values.");
return;
}
fetchData(true);
setTimeout(() => refreshButton.trigger('click'), 1000);
});
refreshButton.on('click', function (evt) {
evt.preventDefault();
fetchData(true);
});
autoCheckbox.on('change', function () {
if (autoCheckbox.prop('checked')) {
startTimer();
} else {
stopTimer();
}
});
reorderCheckbox.on('change', function () {
reorderEnabled = reorderCheckbox.prop('checked');
if (reorderEnabled) fetchData(true);
});
searchInput.on('input', function () {
filterTerm = ($(this).val() || '').toString().trim().toLowerCase();
renderRows(lastItems);
});
const toggleValue = (ga, button) => {
if (!currentServer) {
setStatus('Select a KNX gateway to view values.');
return;
}
if (!ga) return;
if (reorderEnabled) {
reorderEnabled = false;
reorderCheckbox.prop('checked', false);
}
button.prop('disabled', true);
$.post('knxUltimateMonitorToggle', { serverId: currentServer, ga }, function (response) {
if (response && response.status === 'ok') {
setStatus('Toggled ' + ga + '.');
fetchData(true);
} else {
const errMsg = (response && response.error) ? response.error : 'Toggle failed.';
setStatus(errMsg);
}
}).fail(function () {
setStatus('Toggle request failed.');
}).always(function () {
button.prop('disabled', false);
});
};
const handleFlowChange = () => {
const hadServers = populateServers();
if (active && hadServers) {
if (autoCheckbox.prop('checked')) {
startTimer();
} else {
fetchData(true);
}
}
};
RED.events.on('flows:started', handleFlowChange);
RED.events.on('nodes:add', function (node) {
if (node && node.type === 'knxUltimate-config') {
handleFlowChange();
}
});
RED.events.on('nodes:remove', function (node) {
if (node && node.type === 'knxUltimate-config') {
handleFlowChange();
}
});
initDebugTab();
RED.sidebar.addTab({
id: tabId,
label: "KNX Monitor",
name: "KNX Monitor",
iconClass: "fa fa-eye",
content: container,
action: actionId,
onchange: function (show) {
active = !!show;
if (active) {
const hasServers = populateServers();
if (!hasServers) {
setStatus("No KNX gateways in the current flow.");
stopTimer();
return;
}
if (!currentServer) {
setStatus("Select a KNX gateway to view values.");
}
if (autoCheckbox.prop('checked')) {
startTimer();
} else {
fetchData(true);
}
} else {
stopTimer();
}
}
});
setTimeout(() => {
populateServers();
setStatus("Select a KNX gateway to view values.");
if (autoCheckbox.prop('checked')) {
startTimer();
}
}, 300);
}
});
})();
</script>