iobroker.zigbee 3.1.4 → 3.1.5

package/admin/admin.js

@@ -64,23 +64,89 @@ const savedSettings = [
     'adapterType', 'debugHerdsman', 'disableBackup', 'external', 'startWithInconsistent','pingTimeout','listDevicesAtStart',
     'warnOnDeviceAnnouncement', 'baudRate', 'flowCTRL', 'autostart', 'readAtAnnounce', 'startReadDelay', 'readAllAtStart','pingCluster'
 ];
+const lockout = {
+    timeoutid:undefined,
+    isActive:false,
+};
+
+const connectionStatus = {
+    connected: false,
+    lastcheck: Date.now(),
+}
+
+
+////
+//
+//. section Alive
+//
+////
+
+function keepAlive(callback) {
+    const responseTimeout = setTimeout(function() {
+        UpdateAdapterAlive(false); }, 500);
+    sendTo(namespace, 'aliveCheck', {}, function(msg) {
+        clearTimeout(responseTimeout);
+        UpdateAdapterAlive(true);
+        if (callback) callback();
+    });
+}
+
+function startKeepalive() {
+    return setInterval(keepAlive, 10000);
+}
+
+function UpdateAdapterAlive(state) {
+    if (connectionStatus.connected === state) return;
+    connectionStatus.time = Date.now();
+    if (state) {
+        $('#adapterStopped_btn').addClass('hide');
+        $('#code_pairing').removeClass('disabled');
+        $('#touchlink_btn').removeClass('disabled');
+        $('#add_grp_btn').removeClass('disabled');
+        $('#fw_check_btn').removeClass('disabled');
+        $('#ErrorNotificationBtn').removeClass('disabled');
+        $('#show_errors_btn').removeClass('disabled');
+        $('#download_icons_btn').removeClass('disabled');
+        $('#pairing').removeClass('disabled');
+    }
+    else {
+        $('#adapterStopped_btn').removeClass('hide');
+        $('#code_pairing').addClass('disabled');
+        $('#touchlink_btn').addClass('disabled');
+        $('#add_grp_btn').addClass('disabled');
+        $('#fw_check_btn').addClass('disabled');
+        $('#ErrorNotificationBtn').addClass('disabled');
+        $('#show_errors_btn').addClass('disabled');
+        $('#pairing').addClass('disabled');
+        $('#download_icons_btn').addClass('disabled');
+    }
+    connectionStatus.connected = state;
+}
+
+
+////
+//
+// Utility functions
+//
+////
+function sendToWrapper(target,command,msg,callback) {
+    if (connectionStatus.connected)
+        sendTo(target,command,msg,callback);
+    else if (callback) callback({error:'Cannot execute command - adapter is not running'});
+}
 
 function getDeviceByID(ID) {
     if (devices) return devices.find((devInfo) => {
-        try {
-            return devInfo._id == ID;
-        } catch (e) {
-            //console.log("No dev with ieee " + ieeeAddr);
-        }
+        return (devInfo ? devInfo._id : '') == ID;
     });
 }
 
-function getDevice(ieeeAddr) {
+function getDeviceByIEEE(ieeeAddr) {
     return devices.find((devInfo) => {
         try {
             return devInfo.info.device.ieee == ieeeAddr;
         } catch (e) {
-            //console.log("No dev with ieee " + ieeeAddr);
+            return false;
         }
     });
 }
@@ -91,7 +157,7 @@ function getDeviceByNetwork(nwk) {
         try {
             return devInfo.info.device.nwk == nwk;
         } catch (e) {
-            //console.log("No dev with nwkAddr " + nwk);
+            return false;
         }
     });
 }
@@ -112,6 +178,198 @@ function getLQICls(value) {
     return 'icon-green';
 }
 
+function sanitizeModelParameter(parameter) {
+    const replaceByUnderscore = /[\s/]/g;
+    return parameter.replace(replaceByUnderscore, '_');
+}
+
+/////
+//
+// Section Local Data
+//
+////
+
+
+function getModelData(data) {
+    console.warn(JSON.stringify(data));
+    const devicesByModel = {};
+    for (const dev of data) {
+        const modelID = dev.info?.mapped?.model || dev.info.device.modelZigbee || dev.info.device.name || 'unknown';
+        if (devicesByModel[modelID])
+            devicesByModel[modelID].devices.push(dev);
+        else devicesByModel[modelID] = {devices:[dev], icon:dev.common.icon};
+    }
+    console.warn(JSON.stringify(devicesByModel));
+    const Html = [];
+    // Html.push(`<ul class="collapsible">`);
+    Html.push(`<ul class="collection">`)
+    for (const key of Object.keys(devicesByModel)) {
+        const model = devicesByModel[key];
+        Html.push(`<li class="collection-item avatar>`);
+        //Html.push(`<li>`)
+        //Html.push(`<div class="collapsible-header"><img src=${model.iccon} alt="" class="circle" width="40" height="auto">&nbsp;Paired Models</div>`);
+        //Html.push(`<div class="collapsile-body"<span>${getDeviceData(model.devices)}</span></div>`);
+        Html.push(`<img src = ${model.iccon} alt="" class="circle" width="40" height="auto">`);
+        Html.push(`<span class=title></p>`);
+        Html.push(getDeviceData(model.devices).join('<br>'))
+        Html.push(`</p><a href="#!" class="secondary-content"><i class="material-icons">grade</i></a></li>`)
+    }
+    Html.push('</ul>');
+    return Html;
+}
+function getDeviceData(deviceList, withIcon) {
+    const Html = [`<div class="container">`];
+    for (const dev of deviceList) {
+        const iconLink = `<img src=${dev.common.icon} class="circle" width="40" height="auto">`;
+        Html.push(`<div="row"><div class="col s4">${withIcon ? iconLink : ''}<br>${dev.info.device.ieee}<br>connectedInfo</div>`)
+        Html.push(`<div class=col s4>Device Name:${dev.common.name}</div><div class=col s4>Connected: true</div></div>`);
+        if (dev.options) {
+            Html.push(`<div="row"><div class="col s3">Options</div>`)
+            for (const o of dev.options) {
+                Html.push(`<div class=col s4>${o.key}</div><div class=col s4>${o.value}</div><div>`);
+            }
+            Html.push(`</div>`);
+        }
+        Html.push(`</div>`)
+    }
+    Html.push(`</div>`)
+    return Html;
+}
+function getGlobalOptionData() {
+    return ['No Data Yet'];
+}
+
+function showLocalData() {
+    return;
+    /*
+    const Html = [];
+
+    Html.push(`<ul class="collapsible">`);
+    Html.push('<li>')
+    Html.push (`<li class="active"><div class="collapsible-header">
+                    Paired Models
+                </div>`);
+    Html.push (`<div class="collapsible-body">
+                    <span>${getModelData(devices).join('')}</span>
+                </div>`);
+    Html.push ('</li><li>')
+    Html.push (`<div class="collapsible-header">
+                    Paired Devices
+                </div>`);
+    Html.push (`<div class="collapsible-body">
+                    <span>${getDeviceData(devices, true).join('')}</span>
+                </div>`);
+    Html.push ('</li><li>')
+    Html.push (`<div class="collapsible-header">
+                   Global Options
+                </div>`);
+    Html.push (`<div class="collapsible-body">
+                    <span>${getGlobalOptionData(devices).join('')}</span>
+                </div>`);
+    Html.push ('</li>')
+    Html.push (`</ul>`);
+    $('#tab-overrides').html(Html.join(''));
+    $('.collapsible').collapsible();
+    */
+}
+
+/////
+//
+// Section Cards
+//
+////
+
+function getCard(dev) {
+    if (!dev._id) return '';
+    const title = dev.common.name,
+        id = (dev._id ? dev._id : ''),
+        type = (dev.common.type ? dev.common.type : 'unknown'),
+        type_url = (dev.common.type ? sanitizeModelParameter(dev.common.type) : 'unknown'),
+        img_src = dev.common.icon || dev.icon,
+        rooms = [],
+        isActive = (dev.common.deactivated ? false : true),
+        lang = systemLang || 'en',
+        ieee = id.replace(namespace + '.', ''),
+        isDebug = checkDebugDevice(ieee);
+    for (const r in dev.rooms) {
+        if (dev.rooms[r].hasOwnProperty(lang)) {
+            rooms.push(dev.rooms[r][lang]);
+        } else {
+            rooms.push(dev.rooms[r]);
+        }
+    }
+    const paired = (dev.paired) ? '' : '<i class="material-icons right">leak_remove</i>';
+    const rid = id.split('.').join('_');
+    const modelUrl = (!type) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${type_url}.html" target="_blank" rel="noopener noreferrer">${type}</a>`;
+    const groupInfo = dev.groupNames ? `<li><span class="labelinfo">groups:</span><span>${dev.groupNames || ''}</span></li>` : '';
+    const roomInfo = rooms.length ? `<li><span class="labelinfo">rooms:</span><span>${rooms.join(',') || ''}</span></li>` : '';
+    const image = `<img src="${img_src}" width="80px" onerror="this.onerror=null;this.src='img/unavailable.png';">`,
+        nwk = (dev.info && dev.info.device) ? dev.info.device.nwk : undefined,
+        battery_cls = (isActive ? getBatteryCls(dev.battery) : ''),
+        lqi_cls = getLQICls(dev.link_quality),
+        battery = (dev.battery && isActive) ? `<div class="col tool"><i id="${rid}_battery_icon" class="material-icons ${battery_cls}">battery_std</i><div id="${rid}_battery" class="center" style="font-size:0.7em">${dev.battery}</div></div>` : '',
+        lq = (dev.link_quality > 0)
+            ? `<div class="col tool"><i id="${rid}_link_quality_icon" class="material-icons ${lqi_cls}">network_check</i><div id="${rid}_link_quality" class="center" style="font-size:0.7em">${dev.link_quality}</div></div>`
+            : `<div class="col tool"><i class="material-icons icon-black">leak_remove</i></div>`,
+        status = (isActive ? lq : `<div class="col tool"><i class="material-icons icon-red">cancel</i></div>`),
+        info = `<div style="min-height:88px; font-size: 0.8em" class="truncate">
+                    <ul>
+                        <li><span class="labelinfo">ieee:</span><span>0x${ieee}</span></li>
+                        <li><span class="labelinfo">nwk:</span><span>${(nwk) ? nwk.toString() + ' (0x' + nwk.toString(16) + ')' : ''}</span></li>
+                        <li><span class="labelinfo">model:</span><span>${modelUrl}</span></li>
+                        ${groupInfo}
+                        ${roomInfo}
+                    </ul>
+                </div>`,
+        deactBtn = `<button name="swapactive" class="right btn-flat btn-small tooltipped" title="${(isActive ? 'Deactivate' : 'Activate')}"><i class="material-icons ${(isActive ? 'icon-green' : 'icon-red')}">power_settings_new</i></button>`,
+        debugBtn = `<button name="swapdebug" class="right btn-flat btn-small tooltipped" title="${(isDebug > -1 ? (isDebug > 0) ?'Automatic by '+debugDevices[isDebug-1]: 'Disable Debug' : 'Enable Debug')}"><i class="material-icons icon-${(isDebug > -1 ? (isDebug > 0 ? 'orange' : 'green') : 'gray')}">bug_report</i></button>`,
+        infoBtn = (nwk) ? `<button name="info" class="left btn-flat btn-small"><i class="material-icons icon-blue">info</i></button>` : '';
+
+    const dashCard = getDashCard(dev);
+    const card = `<div id="${id}" class="device">
+                  <div class="card hoverable flipable  ${isActive ? '' : 'bg_red'}">
+                    <div class="front face">${dashCard}</div>
+                    <div class="back face">
+                        <div class="card-content zcard">
+                            <div class="flip" style="cursor: pointer">
+                            <span class="top right small" style="border-radius: 50%">
+                                ${battery}
+                                <!--${lq}-->
+                                ${status}
+                            </span>
+                            <!--/a--!>
+                            <span id="dName" class="card-title truncate">${title}</span><!--${paired}--!>
+                            </div>
+                            <i class="left">${image}</i>
+                            ${info}
+                            <div class="footer right-align"></div>
+                        </div>
+                        <div class="card-action">
+                            <div class="card-reveal-buttons">
+                                ${infoBtn}
+
+                                <span class="left fw_info"></span>
+                                <button name="delete" class="right btn-flat btn-small tooltipped" title="Delete">
+                                    <i class="material-icons icon-red">delete</i>
+                                </button>
+                                <button name="edit" class="right btn-flat btn-small tooltipped" title="Edit">
+                                    <i class="material-icons icon-black">edit</i>
+                                </button>
+                                <button name="swapimage" class="right btn-flat btn-small tooltipped" title="Select Image">
+                                    <i class="material-icons icon-black">image</i>
+                                </button>
+                                <button name="reconfigure" class="right btn-flat btn-small tooltipped" title="Reconfigure">
+                                    <i class="material-icons icon-red">sync</i>
+                                </button>
+                                ${deactBtn}
+                                ${debugBtn}
+                            </div>
+                        </div>
+                    </div>
+                  </div>
+                </div>`;
+    return card;
+}
 
 function getCoordinatorCard(dev) {
     const title = 'Zigbee Coordinator',
@@ -228,103 +486,174 @@ function getGroupCard(dev) {
     return card;
 }
 
-function sanitizeModelParameter(parameter) {
-    const replaceByUnderscore = /[\s/]/g;
-    return parameter.replace(replaceByUnderscore, '_');
+function getDeviceCards() {
+    return $('#devices .device').not('.group');
 }
 
-function getCard(dev) {
-    //console.warn(JSON.stringify(dev));
-    if (!dev._id) return '';
+function getDeviceCard(devId) {
+    if (devId.startsWith('0x')) {
+        devId = devId.substr(2, devId.length);
+    }
+    return $('#devices').find(`div[id='${namespace}.${devId}']`);
+}
+
+function getDashCard(dev, groupImage, groupstatus) {
     const title = dev.common.name,
-        id = (dev._id ? dev._id : ''),
-        type = (dev.common.type ? dev.common.type : 'unknown'),
-        type_url = (dev.common.type ? sanitizeModelParameter(dev.common.type) : 'unknown'),
-        img_src = dev.common.icon || dev.icon,
+        id = dev._id,
+        type = dev.common.type,
+        img_src = (groupImage ? groupImage : dev.common.icon || dev.icon),
+        isActive = !dev.common.deactivated,
         rooms = [],
-        isActive = (dev.common.deactivated ? false : true),
-        lang = systemLang || 'en',
-        ieee = id.replace(namespace + '.', ''),
-        isDebug = checkDebugDevice(ieee);
-    for (const r in dev.rooms) {
-        if (dev.rooms[r].hasOwnProperty(lang)) {
-            rooms.push(dev.rooms[r][lang]);
-        } else {
-            rooms.push(dev.rooms[r]);
-        }
-    }
+        lang = systemLang || 'en';
     const paired = (dev.paired) ? '' : '<i class="material-icons right">leak_remove</i>';
+    const permitJoinBtn = dev.battery || dev.common.type == 'group' ? '' : `<div class="col tool"><button name="joinCard" class="waves-effect btn-small btn-flat right hoverable green"><i class="material-icons icon-green">leak_add</i></button></div>`;
+    const device_queryBtn = dev.battery || dev.common.type == 'group' ? '' : `<div class="col tool"><button name="deviceQuery" class="waves-effect btn-small btn-flat right hoverable green"><i class="material-icons icon-green">play_for_work</i></button></div>`;
     const rid = id.split('.').join('_');
-    const modelUrl = (!type) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${type_url}.html" target="_blank" rel="noopener noreferrer">${type}</a>`;
-    const groupInfo = dev.groupNames ? `<li><span class="labelinfo">groups:</span><span>${dev.groupNames || ''}</span></li>` : '';
-    const roomInfo = rooms.length ? `<li><span class="labelinfo">rooms:</span><span>${rooms.join(',') || ''}</span></li>` : '';
-    const image = `<img src="${img_src}" width="80px" onerror="this.onerror=null;this.src='img/unavailable.png';">`,
+    const modelUrl = (!type) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${type}.html" target="_blank" rel="noopener noreferrer">${type}</a>`;
+    const image = `<img src="${img_src}" width="64px" onerror="this.onerror=null;this.src='img/unavailable.png';">`,
         nwk = (dev.info && dev.info.device) ? dev.info.device.nwk : undefined,
-        battery_cls = (isActive ? getBatteryCls(dev.battery) : ''),
+        battery_cls = getBatteryCls(dev.battery),
         lqi_cls = getLQICls(dev.link_quality),
+        unconnected_icon = (groupImage ? (groupstatus ? '<div class="col tool"><i class="material-icons icon-green">check_circle</i></div>' : '<div class="col tool"><i class="material-icons icon-red">cancel</i></div>') :'<div class="col tool"><i class="material-icons icon-red">leak_remove</i></div>'),
         battery = (dev.battery && isActive) ? `<div class="col tool"><i id="${rid}_battery_icon" class="material-icons ${battery_cls}">battery_std</i><div id="${rid}_battery" class="center" style="font-size:0.7em">${dev.battery}</div></div>` : '',
-        lq = (dev.link_quality > 0)
-            ? `<div class="col tool"><i id="${rid}_link_quality_icon" class="material-icons ${lqi_cls}">network_check</i><div id="${rid}_link_quality" class="center" style="font-size:0.7em">${dev.link_quality}</div></div>`
-            : `<div class="col tool"><i class="material-icons icon-black">leak_remove</i></div>`,
-        status = (isActive ? lq : `<div class="col tool"><i class="material-icons icon-red">cancel</i></div>`),
-        info = `<div style="min-height:88px; font-size: 0.8em" class="truncate">
-                    <ul>
-                        <li><span class="labelinfo">ieee:</span><span>0x${ieee}</span></li>
-                        <li><span class="labelinfo">nwk:</span><span>${(nwk) ? nwk.toString() + ' (0x' + nwk.toString(16) + ')' : ''}</span></li>
-                        <li><span class="labelinfo">model:</span><span>${modelUrl}</span></li>
-                        ${groupInfo}
-                        ${roomInfo}
-                    </ul>
-                </div>`,
-        deactBtn = `<button name="swapactive" class="right btn-flat btn-small tooltipped" title="${(isActive ? 'Deactivate' : 'Activate')}"><i class="material-icons ${(isActive ? 'icon-green' : 'icon-red')}">power_settings_new</i></button>`,
-        debugBtn = `<button name="swapdebug" class="right btn-flat btn-small tooltipped" title="${(isDebug > -1 ? (isDebug > 0) ?'Automatic by '+debugDevices[isDebug-1]: 'Disable Debug' : 'Enable Debug')}"><i class="material-icons icon-${(isDebug > -1 ? (isDebug > 0 ? 'orange' : 'green') : 'gray')}">bug_report</i></button>`,
-        infoBtn = (nwk) ? `<button name="info" class="left btn-flat btn-small"><i class="material-icons icon-blue">info</i></button>` : '';
+        lq = (dev.link_quality > 0 && isActive) ? `<div class="col tool"><i id="${rid}_link_quality_icon" class="material-icons ${lqi_cls}">network_check</i><div id="${rid}_link_quality" class="center" style="font-size:0.7em">${dev.link_quality}</div></div>` : (isActive ? unconnected_icon : ''),
+        //status = (dev.link_quality > 0 && isActive) ? `<div class="col tool"><i class="material-icons icon-green">check_circle</i></div>` : (groupImage || !isActive ? '' : `<div class="col tool"><i class="material-icons icon-black">leak_remove</i></div>`),
+        //infoBtn = (nwk) ? `<button name="info" class="left btn-flat btn-small"><i class="material-icons icon-blue">info</i></button>` : '',
+        idleTime = (dev.link_quality_lc > 0 && isActive) ? `<div class="col tool"><i id="${rid}_link_quality_lc_icon" class="material-icons idletime">access_time</i><div id="${rid}_link_quality_lc" class="center" style="font-size:0.7em">${getIdleTime(dev.link_quality_lc)}</div></div>` : '';
+    const info = (dev.statesDef) ? dev.statesDef.map((stateDef) => {
+        const id = stateDef.id;
+        const sid = id.split('.').join('_');
+        let val = stateDef.val || '';
+        if (stateDef.role === 'switch' && stateDef.write) {
+            val = `<span class="switch"><label><input type="checkbox" ${(val) ? 'checked' : ''}><span class="lever"></span></label></span>`;
+        } else if (stateDef.role === 'level.dimmer' && stateDef.write) {
+            val = `<span class="range-field dash"><input type="range" min="0" max="100" ${(val != undefined) ? `value="${val}"` : ''} /></span>`;
+        } else if (stateDef.role === 'level.color.temperature' && stateDef.write) {
+            val = `<span class="range-field dash"><input type="range" min="150" max="500" ${(val != undefined) ? `value="${val}"` : ''} /></span>`;
+        } else if (stateDef.type === 'boolean') {
+            const disabled = (stateDef.write) ? '' : 'disabled="disabled"';
+            val = `<label class="dash"><input type="checkbox" ${(val == true) ? 'checked=\'checked\'' : ''} ${disabled}/><span></span></label>`;
+        } else if (stateDef.role === 'level.color.rgb') {
+            const options = []
+            for (const key of namedColors) {
+                options.push(`<option value="${key}" ${val===key ? 'selected' : ''}>${key}</option>`);
+            }
+            val = `<select class="browser-default enum" style="color : white; background-color: grey; height: 16px; padding: 0; width: auto; display: inline-block">${options.join('')}</select>`;
+        } else if (stateDef.states && stateDef.write) {
+            let options;
+            if (typeof stateDef.states == 'string') {
+                const sts = stateDef.states.split(';');
+                if (sts.length < 2) return '';
+                options = sts.map((item) => {
+                    const v = item.split(':');
+                    return `<option value="${v[0]}" ${(val == v[0]) ? 'selected' : ''}>${v[1]}</option>`;
+                });
+            } else {
+                options = [];
+                for (const [key, value] of Object.entries(stateDef.states)) {
+                    options.push(`<option value="${key}" ${(val == key) ? 'selected' : ''}>${key}</option>`);
+                }
+            }
+            if (options.length < 2) return '';
+            val = `<select class="browser-default enum" style="color : white; background-color: grey; height: 16px; padding: 0; width: auto; display: inline-block">${options.join('')}</select>`;
+        } else if (stateDef.write) {
+            return;
+            // val = `<span class="input-field dash value"><input class="dash value" id="${stateDef.name}" value="${val}"></input></span>`;
+        }
+        else {
+            val = `<span class="dash value">${val ? val : '(null)'} ${(stateDef.unit) ? stateDef.unit : ''}</span>`;
+        }
+        return `<li><span class="label dash truncate">${stateDef.name}</span><span id=${sid} oid=${id} class="state">${val}</span></li>`;
+    }).join('') : '';
+    const dashCard = `
+        <div class="card-content zcard ${isActive ? '' : 'bg_red'}">
+            <div style="cursor: pointer">
+            <span class="top right small" style="border-radius: 50%">
+                ${device_queryBtn}
+                ${permitJoinBtn}
+            </span>
+            <div  class="flip">
+            <span class="top right small" style="border-radius: 50%">
+                ${idleTime}
+                ${battery}
+                ${lq}
+            </span>
+             <span class="card-title truncate">${title}</span>
+            </div>
+            </div>
+            <i class="left">${image}</i>
+            <div style="min-height:88px; font-size: 0.8em; height: 130px; width: 220px; overflow-y: auto" class="truncate">
+                <ul>
+                    ${(isActive ? info : 'Device deactivated')}
+                </ul>
+            </div>
+            <div class="footer right-align"></div>
+        </div>`;
+
+    return dashCard;
+}
+
+function setDashStates(id, state) {
+    const devId = getDevId(id);
+    const dev = getDeviceByID(devId);
+    if (dev) {
+        const stateDef = dev.statesDef.find((stateDef) => stateDef.id == id);
+        if (stateDef) {
+            const sid = id.split('.').join('_');
+            if (stateDef.role === 'switch' && stateDef.write) {
+                $(`#${sid}`).find('input[type=\'checkbox\']').prop('checked', state.val);
+            } else if (stateDef.role === 'level.dimmer' && stateDef.write) {
+                $(`#${sid}`).find('input[type=\'range\']').prop('value', state.val);
+            } else if (stateDef.role === 'level.color.temperature' && stateDef.write) {
+                $(`#${sid}`).find('input[type=\'range\']').prop('value', state.val);
+            } else if (stateDef.states && stateDef.write) {
+                $(`#${sid}`).find(`select option[value=${state.val}]`).prop('selected', true);
+            } else if (stateDef.type === 'boolean') {
+                $(`#${sid}`).find('input[type=\'checkbox\']').prop('checked', state.val);
+            } else {
+                $(`#${sid}`).find('.value').text(`${state.val} ${(stateDef.unit) ? stateDef.unit : ''}`);
+            }
+        }
+    }
+}
 
-    const dashCard = getDashCard(dev);
-    const card = `<div id="${id}" class="device">
-                  <div class="card hoverable flipable  ${isActive ? '' : 'bg_red'}">
-                    <div class="front face">${dashCard}</div>
-                    <div class="back face">
-                        <div class="card-content zcard">
-                            <div class="flip" style="cursor: pointer">
-                            <span class="top right small" style="border-radius: 50%">
-                                ${battery}
-                                <!--${lq}-->
-                                ${status}
-                            </span>
-                            <!--/a--!>
-                            <span id="dName" class="card-title truncate">${title}</span><!--${paired}--!>
-                            </div>
-                            <i class="left">${image}</i>
-                            ${info}
-                            <div class="footer right-align"></div>
-                        </div>
-                        <div class="card-action">
-                            <div class="card-reveal-buttons">
-                                ${infoBtn}
+function hookControls() {
+    $('input[type=\'checkbox\']').change(function (event) {
+        const val = $(this).is(':checked');
+        const id = $(this).parents('.state').attr('oid');
+        sendToWrapper(namespace, 'setState', {id: id, val: val}, function (data) {
+        });
+    });
+    $('input[type=\'range\']').change(function (event) {
+        const val = $(this).val();
+        const id = $(this).parents('.state').attr('oid');
+        sendToWrapper(namespace, 'setState', {id: id, val: val}, function (data) {
+        });
+    });
+    $('.state select').on('change', function () {
+        const val = $(this).val();
+        const id = $(this).parents('.state').attr('oid');
+        sendToWrapper(namespace, 'setState', {id: id, val: val}, function (data) {
+        });
+    });
+}
 
-                                <span class="left fw_info"></span>
-                                <button name="delete" class="right btn-flat btn-small tooltipped" title="Delete">
-                                    <i class="material-icons icon-red">delete</i>
-                                </button>
-                                <button name="edit" class="right btn-flat btn-small tooltipped" title="Edit">
-                                    <i class="material-icons icon-black">edit</i>
-                                </button>
-                                <button name="swapimage" class="right btn-flat btn-small tooltipped" title="Select Image">
-                                    <i class="material-icons icon-black">image</i>
-                                </button>
-                                <button name="reconfigure" class="right btn-flat btn-small tooltipped" title="Reconfigure">
-                                    <i class="material-icons icon-red">sync</i>
-                                </button>
-                                ${deactBtn}
-                                ${debugBtn}
-                            </div>
-                        </div>
-                    </div>
-                  </div>
-                </div>`;
-    return card;
+function getIdleTime(value) {
+    return (value) ? moment(new Date(value)).fromNow(true) : '';
+}
+
+function updateCardTimer() {
+    if (devices) {
+        devices.forEach((dev) => {
+            const id = dev._id;
+            if (id) {
+                const rid = id.split('.').join('_');
+                $(`#${rid}_link_quality_lc`).text(getIdleTime(dev.link_quality_lc));
+            }
+        });
+    }
 }
+
 /*
 function openReval(e, id, name){
     const $card = $(e.target).closest('.card');
@@ -379,6 +708,17 @@ function closeReval(e, id) {
     });
 }
 
+function showDevInfo(id) {
+    const info = genDevInfo(getDeviceByID(id));
+    $('#devinfo').html(info);
+    $('#modaldevinfo').modal('open');
+}
+
+////
+//
+// section Confirmations
+//
+////
 function deleteConfirmation(id, name) {
     const text = translateWord('Do you really want to delete device') + ' "' + name + '" (' + id + ')?';
     $('#modaldelete').find('p').text(text);
@@ -402,7 +742,7 @@ function deleteNvBackupConfirmation() {
     $('#modaldelete a.btn[name=\'yes\']').click(() => {
         //const force = $('#force').prop('checked');
         showWaitingDialog('Attempting to delete nvBackup.json', 60000);
-        sendTo(namespace, 'deleteNVBackup', {}, function (msg) {
+        sendToWrapper(namespace, 'deleteNVBackup', {}, function (msg) {
             closeWaitingDialog();
             if (msg) {
                 if (msg.error) {
@@ -444,211 +784,62 @@ function EndPointIDfromEndPoint(ep) {
 
 function editName(id, name) {
 
-    const device_options = {};
-    const received_options = {};
-    console.warn('editName called with ' + id + ' and ' + name);
-    const dev = devices.find((d) => d._id == id);
-    $('#modaledit').find('input[id=\'d_name\']').val(name);
-    const groupables = [];
-
-    function removeOption(k) {
-        if (k && device_options.hasOwnProperty(k)) {
-            if (dev.info.mapped && dev.info.mapped.options && dev.info.mapped.options.includes(device_options[k].key))
-                availableOptions.push(device_options[k].key)
-            delete device_options[k];
-        }
-    }
-
-    function addOption() {
-        let idx=1;
-        let key = '';
-        const optionName = $('#option_Selector').val();
-        console.warn(`option name is ${optionName}`);
-        do {
-            key = `o${idx++}`;
-        }
-        while (device_options.hasOwnProperty(key));
-        device_options[key] = { key:optionName, value:''};
-        console.warn(`device_options: ${JSON.stringify(device_options)}`);
-        idx = availableOptions.indexOf(optionName);
-        console.warn(`idx: ${idx}, ao:${JSON.stringify(availableOptions)}, on: ${optionName}`);
-        if (idx > -1) availableOptions.splice(idx, 1);
-    }
-
-    function updateOptions(candidates) {
-        if (candidates.length > 0) {
-            $('#modaledit').find('.new_options_available').removeClass('hide');
-            list2select('#option_Selector', candidates, [], (key, val) => { return val; }, (key, val) => { return val; })
-        }
-        else {
-            $('#modaledit').find('.new_options_available').addClass('hide');
-        }
-        const html_options=[];
-
-        console.warn(`option_Selector is ${JSON.stringify(device_options)}`)
-
-        for (const k in device_options) {
-            html_options.push(`<div class="row">`);
-            html_options.push(`<div class="input-field suffix col s5 m5 l5"><input disabled id="option_key_${k}" type="text" class="value" /><label for="option_key_${k}">Option</label></div>`)
-            html_options.push(`<div class="input-field suffix col s5 m5 l5"><input id="option_value_${k}" type="text" class="value" /><label for="option_value_${k}">Value</label></div>`)
-            html_options.push(`<div class="col"><a id="option_rem_${k}" class='btn' ><i class="material-icons">remove_circle</i></a></div>`);
-            html_options.push(`</div>`)
-        }
-        console.warn(`html is ${$('#modaledit').find('.options_grid').html()}`)
-        $('#modaledit').find('.options_grid').html(html_options.join(''));
-        console.warn(`html is now ${$('#modaledit').find('.options_grid').html()}`)
-        if (html_options.length > 0) {
-            $('#modaledit').find('.options_available').removeClass('hide');
-            for (const k of Object.keys(device_options)) {
-                $(`#option_key_${k}`).val(device_options[k].key);
-                $(`#option_value_${k}`).val(device_options[k].value);
-                $(`#option_rem_${k}`).unbind('click');
-                $(`#option_rem_${k}`).click(() => { removeOption(k); updateOptions(availableOptions) });
-            }
-        }
-        else {
-            if (candidates.length == 0) $('#modaledit').find('.options_available').addClass('hide');
-        }
-    }
-
-    function getOptionsFromUI(_do, _so) {
-        const _no = {};
-        let changed = false;
-        for (const k in _do) {
-            const key =  $(`#option_key_${k}`).val();
-            _do[k].key = key;
-            const val = $(`#option_value_${k}`).val();
-            try {
-                _do[k].value = JSON.parse(val);
-            }
-            catch {
-                _do[k].value = val;
+    function updateGroupables(groupables) {
+        const html = [];
+        if (groupables && groupables.length > 0)
+        {
+            for (const groupable of groupables) {
+                const k = groupable.ep.ID || -1;
+                const n = groupable.epid != `unidentified` ? groupable.epid : `Endpoint ${k}`;
+                html.push(`<div class="input-field suffix col s12 m12 l12"><select id="gk_${k}" class="materialSelect" multiple><option value="1">select</option><select><label for="gk_${k}">Group membership for ${n}</label></div>`);
             }
-            if (device_options[k].key.length > 0) {
-                _no[key] = device_options[k].value;
-                changed |= _no[key] != _so[key];
+            $('#modaledit').find('.endpoints_for_groups').html(html.join(''));
+            for (const groupable of groupables) {
+                console.warn(`list 2 select called with ${groupable.ep.ID}, groups ${JSON.stringify(groups)}, groupable ${JSON.stringify(groupable)}`);
+                list2select(`#gk_${groupable.ep.ID || -1}`, groups, groupable.memberOf || []);
             }
         }
-        changed |= (Object.keys(_no).length != Object.keys(_so).length);
-        if (changed) return _no;
-        return undefined;
+        return html;
     }
 
 
-
+    const dev = devices.find((d) => d._id == id);
+    $('#modaledit').find('input[id=\'d_name\']').val(name);
+    const groupables = [];
     if (dev && dev.info && dev.info.endpoints) {
         for (const ep of dev.info.endpoints) {
             if (ep.input_clusters.includes(4)) {
-                groupables.push({epid: EndPointIDfromEndPoint(ep), ep: ep, memberOf: []});
+                groupables.push({epid: EndPointIDfromEndPoint(ep), ep: ep, memberOf: dev.groups_by_ep ? dev.groups_by_ep[ep.ID] || [] : []});
             }
         }
     }
     const numEP = groupables.length;
-    const availableOptions = (dev.info.mapped ? dev.info.mapped.options.slice() || []:[]);
-
-    if (numEP > 0) {
-        $('#modaledit').find('.groups_available').removeClass('hide');
-        $('#modaledit').find('.row.epid0').addClass('hide');
-        $('#modaledit').find('.row.epid1').addClass('hide');
-        $('#modaledit').find('.row.epid2').addClass('hide');
-        $('#modaledit').find('.row.epid3').addClass('hide');
-        $('#modaledit').find('.row.epid4').addClass('hide');
-        $('#modaledit').find('.row.epid5').addClass('hide');
-        $('#modaledit').find('.row.epid6').addClass('hide');
-        // go through all the groups. Find the ones to list for each groupable
-        if (numEP == 1) {
-            $('#modaledit').find('.endpointid').addClass('hide');
-        } else {
-            $('#modaledit').find('.endpointid').removeClass('hide');
-        }
-        for (const d of devices) {
-            if (d && d.common && d.common.type == 'group') {
-                if (d.hasOwnProperty('memberinfo')) {
-                    for (const member of d.memberinfo) {
-                        const epid = EndPointIDfromEndPoint(member.ep);
-                        for (let i = 0; i < groupables.length; i++) {
-                            if (groupables[i].epid == epid) {
-                                groupables[i].memberOf.push(d.native.id.replace('group_', ''));
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        console.log('groupables: ' + JSON.stringify(groupables));
-        for (let i = 0; i < groupables.length; i++) {
-            if (i > 1) {
-                $('#modaledit').find('translate.device_with_endpoint').innerHtml = name + ' ' + groupables[i].epid;
-            }
-            $('#modaledit').find('.row.epid' + i).removeClass('hide');
-            list2select('#d_groups_ep' + i, groups, groupables[i].memberOf || []);
-        }
-    }
-    else
-    {
-        $('#modaledit').find('.groups_available').addClass('hide');
-    }
-    sendTo(namespace, 'getLocalConfigItems', { target:id, global:false, key:'options' }, function (msg) {
-        if (msg) {
-            if (msg.error) showMessage(msg.error, '_Error');
-            console.warn(`return is ${JSON.stringify(msg)}`)
-            Object.keys(device_options).forEach(key => delete device_options[key]);
-            Object.keys(received_options).forEach(key => delete received_options[key]);
-            if (typeof msg.options === 'object') {
-
-                let cnt = 1;
-                for (const key in msg.options)
-                {
-                    const idx = availableOptions.indexOf(key);
-                    console.warn(`key ${key} : index : ${idx}`);
-                    if (idx > -1) availableOptions.splice(idx,1);
-                    received_options[key]=msg.options[key];
-                    device_options[`o${cnt}`] = { key:key, value:msg.options[key]}
-                    cnt++;
-                }
-            }
-            console.warn(`avo ${JSON.stringify(availableOptions)}, mapped: ${JSON.stringify(dev.info.mapped.options)}`);
-            updateOptions(availableOptions);
 
-        } else showMessage('callback without message');
-    });
+    updateGroupables(groupables);
     $('#modaledit a.btn[name=\'save\']').unbind('click');
-    $('#modaledit a.btn[name=\'add_options\']').unbind('click');
-    $('#modaledit a.btn[name=\'add_options\']').click(() => {
-        getOptionsFromUI(device_options, received_options);
-        addOption();
-        updateOptions(availableOptions)
-    });
     $('#modaledit a.btn[name=\'save\']').click(() => {
         const newName = $('#modaledit').find('input[id=\'d_name\']').val();
-        const groupsbyid = {};
+        const groupsById = {};
         if (groupables.length > 0) {
-            for (let i = 0; i < groupables.length; i++) {
-                const ng = $('#d_groups_ep' + i).val();
-                if (ng.toString() != groupables[i].memberOf.toString())
-                    groupsbyid[groupables[i].ep.ID] = GenerateGroupChange(groupables[i].memberOf, ng);
-            }
-        }
-        // read device_options from UI
-        const co = getOptionsFromUI(device_options, received_options)
-        console.warn(`options have ${co ? 'changed' : 'not changed'} : ${JSON.stringify(co)} vs ${JSON.stringify(received_options)} , saving them`);
-        if (co) {
-            sendTo(namespace, 'updateLocalConfigItems', {
-                target: id,
-                global:false,
-                data: { options:co }
-            },
-            function (msg) {
-                if (msg && msg.error) showMessage(msg.error, '_Error');
-            });
+            for (const groupable of groupables) {
+                const k = groupable.ep.ID || -1;
+                const ng = $('#gk_' + k).val();
+                if (ng.toString() != groupable.memberOf.toString())
+                    groupsById[k] = GenerateGroupChange(groupable.memberOf, ng);
+            }
         }
-        updateDev(id, newName, groupsbyid);
-
+        updateDev(id, newName, groupsById);
     });
     $('#modaledit').modal('open');
     Materialize.updateTextFields();
 }
 
+
+////
+//
+//. section GroupFunctions
+//
+////
 function GenerateGroupChange(oldmembers, newmembers) {
     const grpchng = [];
     for (const oldg of oldmembers)
@@ -659,7 +850,7 @@ function GenerateGroupChange(oldmembers, newmembers) {
 }
 
 function deleteZigbeeDevice(id, force) {
-    sendTo(namespace, 'deleteZigbeeDevice', {id: id, force: force}, function (msg) {
+    sendToWrapper(namespace, 'deleteZigbeeDevice', {id: id, force: force}, function (msg) {
         closeWaitingDialog();
         if (msg) {
             if (msg.error) {
@@ -674,7 +865,7 @@ function deleteZigbeeDevice(id, force) {
 
 
 function cleanDeviceStates(force) {
-    sendTo(namespace, 'cleanDeviceStates', {force: force}, function (msg) {
+    sendToWrapper(namespace, 'cleanDeviceStates', {force: force}, function (msg) {
         closeWaitingDialog();
         if (msg) {
             if (msg.error) {
@@ -692,7 +883,7 @@ function cleanDeviceStates(force) {
 
 function renameDevice(id, name) {
     showMessage('rename device with ' + id + ' and ' + name, _('Error'));
-    sendTo(namespace, 'renameDevice', {id: id, name: name}, function (msg) {
+    sendToWrapper(namespace, 'renameDevice', {id: id, name: name}, function (msg) {
         if (msg) {
             if (msg.error) {
                 showMessage(msg.error, _('Error'));
@@ -704,7 +895,6 @@ function renameDevice(id, name) {
 }
 
 function showDevices() {
-    console.warn('show Devices called')
     let html = '';
     let hasCoordinator = false;
     const lang = systemLang || 'en';
@@ -796,17 +986,20 @@ function showDevices() {
         $('.card.flipable').toggleClass('flipped');
     });
 
-    shuffleInstance = new Shuffle($('#devices'), {
-        itemSelector: '.device',
-        sizer: '.js-shuffle-sizer',
-    });
-    doFilter();
+    const element = $('#devices');
+
+    if (element) {
+        shuffleInstance = devices && devices.length ? new Shuffle(element, {
+            itemSelector: '.device',
+            sizer: '.js-shuffle-sizer',
+        }) : undefined;
+        doFilter();
+    }
 
     const getDevName = function (dev_block) {
         return dev_block.find('#dName').text();
     };
     const getDevId = function (dev_block) {
-        console.warn(`getDevId called with ${JSON.stringify(dev_block)}`)
         return dev_block.attr('id');
     };
     $('.card-reveal-buttons button[name=\'delete\']').click(function () {
@@ -856,7 +1049,7 @@ function showDevices() {
             //console.log(data);
         });    });
     $('#modalpairing a.btn[name=\'extendpairing\']').click(function () {
-        letsPairing();
+        openNetwork();
     });
     $('#modalpairing a.btn[name=\'endpairing\']').click(function () {
         stopPairing();
@@ -874,7 +1067,7 @@ function showDevices() {
     });
     $('.card-reveal-buttons button[name=\'reconfigure\']').click(function () {
         const dev_block = $(this).parents('div.device');
-        reconfigureDlg(getDevId(dev_block));
+        reconfigureConfirmation(getDevId(dev_block));
     });
     $('.card-reveal-buttons button[name=\'swapactive\']').click(function () {
         const dev_block = $(this).parents('div.device');
@@ -886,7 +1079,7 @@ function showDevices() {
 }
 
 function downloadIcons() {
-    sendTo(namespace, 'downloadIcons', {}, function (msg) {
+    sendToWrapper(namespace, 'downloadIcons', {}, function (msg) {
         if (msg && msg.msg) {
             showMessage(msg.msg, _('Result'));
         }
@@ -915,9 +1108,8 @@ function checkFwUpdate() {
                 fwInfoNode.html(createBtn('system_update', 'Click to start firmware update', false));
                 $(fwInfoNode).find('button[name=\'fw_update\']').click(() => {
                     fwInfoNode.html(createBtn('check_circle', 'Firmware update started, check progress in logs.', true, 'icon-blue'));
-                    sendTo(namespace, 'startOta', {devId: devId}, (msg) => {
+                    sendToWrapper(namespace, 'startOta', {devId: devId}, (msg) => {
                         fwInfoNode.html(createBtn('check_circle', 'Finished, see logs.', true));
-                        console.log(msg);
                     });
                 });
             } else if (msg.status == 'not_available') {
@@ -937,13 +1129,13 @@ function checkFwUpdate() {
         }
         const devId = getDevId(devIdAttr);
         getFwInfoNode(deviceCard).html('<span class="left" style="padding-top:8px">checking...</span>');
-        sendTo(namespace, 'checkOtaAvail', {devId: devId}, callback);
+        sendToWrapper(namespace, 'checkOtaAvail', {devId: devId}, callback);
     }
 }
 
 function letsPairingWithCode(code) {
     messages = [];
-    sendTo(namespace, 'letsPairing', {code: code, stop:false}, function (msg) {
+    sendToWrapper(namespace, 'letsPairing', {code: code, stop:false}, function (msg) {
         if (msg && msg.error) {
             showMessage(msg.error, _('Error'));
         }
@@ -953,18 +1145,19 @@ function letsPairingWithCode(code) {
     });
 }
 
-function letsPairing() {
+function openNetwork() {
     messages = [];
-    sendTo(namespace, 'letsPairing', {stop:false}, function (msg) {
+    sendToWrapper(namespace, 'letsPairing', {stop:false}, function (msg) {
         if (msg && msg.error) {
             showMessage(msg.error, _('Error'));
         }
+        else showPairingProcess();
     });
 }
 
 function stopPairing() {
     messages = [];
-    sendTo(namespace, 'letsPairing', {stop:true}, function (msg) {
+    sendToWrapper(namespace, 'letsPairing', {stop:true}, function (msg) {
         if (msg && msg.error) {
             showMessage(msg.error, _('Error'));
         }
@@ -973,7 +1166,7 @@ function stopPairing() {
 
 function touchlinkReset() {
     messages = [];
-    sendTo(namespace, 'touchlinkReset', {}, function (msg) {
+    sendToWrapper(namespace, 'touchlinkReset', {}, function (msg) {
         if (msg && msg.error) {
             showMessage(msg.error, _('Error'));
         }
@@ -982,7 +1175,7 @@ function touchlinkReset() {
 
 function joinProcess(devId) {
     messages = [];
-    sendTo(namespace, 'letsPairing', {id: devId, stop:false}, function (msg) {
+    sendToWrapper(namespace, 'letsPairing', {id: devId, stop:false}, function (msg) {
         if (msg && msg.error) {
             showMessage(msg.error, _('Error'));
         }
@@ -990,10 +1183,8 @@ function joinProcess(devId) {
 }
 
 function getCoordinatorInfo() {
-    console.warn('calling getCoordinatorInfo');
-    sendTo(namespace, 'getCoordinatorInfo', {}, function (msg) {
+    sendToWrapper(namespace, 'getCoordinatorInfo', {}, function (msg) {
         if (msg) {
-            console.warn(JSON.stringify(msg))
             if (msg.error) {
                 errorData.push(msg.error);
                 delete msg.error;
@@ -1020,9 +1211,10 @@ function checkDebugDevice(id) {
     }
     return -1;
 }
+
 async function toggleDebugDevice(id) {
-    sendTo(namespace, 'setDeviceDebug', {id:id}, function (msg) {
-        sendTo(namespace, 'getDebugDevices', {}, function(msg) {
+    sendToWrapper(namespace, 'setDeviceDebug', {id:id}, function (msg) {
+        sendToWrapper(namespace, 'getDebugDevices', {}, function(msg) {
             if (msg && typeof (msg.debugDevices == 'array')) {
                 debugDevices = msg.debugDevices;
             }
@@ -1034,46 +1226,136 @@ async function toggleDebugDevice(id) {
 }
 
 function updateLocalConfigItems(device, data, global) {
-    sendTo(namespace, 'updateLocalConfigItems', {target: device, data:data, global:global}, function(msg) {
+    sendToWrapper(namespace, 'updateLocalConfigItems', {target: device, data:data, global:global}, function(msg) {
         if (msg && msg.hasOwnProperty.error) {
             showMessage(msg.error, _('Error'));
         }
-        getDevices();
-    });
-}
+        getDevices();
+    });
+}
+
+async function selectImageOverride(id) {
+
+    // start local functions
+    function removeOption(k) {
+        if (k && device_options.hasOwnProperty(k)) {
+            if (dev.info.mapped && dev.info.mapped.options && dev.info.mapped.options.includes(device_options[k].key))
+                availableOptions.push(device_options[k].key)
+            delete device_options[k];
+        }
+    }
+
+    function addOption() {
+        let idx=1;
+        let key = '';
+        const optionName = $('#option_Selector').val();
+        do {
+            key = `o${idx++}`;
+        }
+        while (device_options.hasOwnProperty(key));
+        device_options[key] = { key:optionName, value:''};
+        idx = availableOptions.indexOf(optionName);
+        if (idx > -1) availableOptions.splice(idx, 1);
+    }
+
+    function updateOptions(candidates) {
+        if (candidates.length > 0) {
+            $('#chooseimage').find('.new_options_available').removeClass('hide');
+            list2select('#option_Selector', candidates, [], (key, val) => { return val; }, (key, val) => { return val; })
+        }
+        else {
+            $('#chooseimage').find('.new_options_available').addClass('hide');
+        }
+        const html_options=[];
+
+        for (const k of Object.keys(device_options)) {
+            html_options.push(`<div class="row">`);
+            html_options.push(`<div class="input-field suffix col s5 m5 l5"><input disabled id="option_key_${k}" type="text" class="value" /><label for="option_key_${k}">Option</label></div>`)
+            html_options.push(`<div class="input-field suffix col s5 m5 l5"><input id="option_value_${k}" type="text" class="value" /><label for="option_value_${k}">Value</label></div>`)
+            html_options.push(`<div class="col"><a id="option_rem_${k}" class="btn-large round red" ><i class="material-icons icon-red">remove_circle</i></a></div>`);
+            html_options.push(`</div>`)
+        }
+        $('#chooseimage').find('.options_grid').html(html_options.join(''));
+        if (html_options.length > 0) {
+            for (const k of Object.keys(device_options)) {
+                $(`#option_key_${k}`).val(device_options[k].key);
+                $(`#option_value_${k}`).val(device_options[k].value);
+                $(`#option_rem_${k}`).unbind('click');
+                $(`#option_rem_${k}`).click(() => { removeOption(k); updateOptions(availableOptions) });
+            }
+        }
+    }
+
+    function getOptionsFromUI(_do, _so) {
+        const _no = {};
+        let changed = false;
+        for (const k of Object.keys(_do)) {
+            const key =  $(`#option_key_${k}`).val();
+            _do[k].key = key;
+            const val = $(`#option_value_${k}`).val();
+            try {
+                _do[k].value = JSON.parse(val);
+            }
+            catch {
+                _do[k].value = val;
+            }
+            if (device_options[k].key.length > 0) {
+                _no[key] = device_options[k].value;
+                changed |= _no[key] != _so[key];
+            }
+        }
+        changed |= (Object.keys(_no).length != Object.keys(_so).length);
+        console.warn(`${changed} : ${JSON.stringify(_do)} - ${JSON.stringify(_no)}`)
+        if (changed) return _no;
+        return undefined;
+    }
 
+    function updateImageSelection(dev, imagedata) {
+        const default_icon = (dev.common.type === 'group' ? dev.common.modelIcon : `img/${dev.common.type.replace(/\//g, '-')}.png`);
+        if (dev.legacyIcon) imagedata.unshift( { file:dev.legacyIcon, name:'legacy', data:dev.legacyIcon});
+        imagedata.unshift( { file:'none', name:'default', data:default_icon});
+        imagedata.unshift( { file:'current', name:'current', data:dev.common.icon || dev.icon});
+
+        list2select('#images', imagedata, selectItems,
+            function (key, image) {
+                return image.name
+            },
+            function (key, image) {
+                return image.file;
+            },
+            function (key, image) {
+                if (image.isBase64) {
+                    return `data-icon="data:image/png; base64, ${image.data}"`;
+                } else {
+                    return `data-icon="${image.data}"`;
+                }
+            },
+        );
+
+    }
+    // end local functions
+    const device_options = {};
+    const received_options = {};
 
-async function selectImageOverride(id) {
     const dev = devices.find((d) => d._id == id);
+    const availableOptions = (dev.info.mapped ? dev.info.mapped.options.slice() || []:[]);
     const imghtml = `<img src="${dev.common.icon || dev.icon}" width="80px">`
     //console.error(imghtml)
     const selectItems= [''];
     $('#chooseimage').find('input[id=\'d_name\']').val(dev.common.name);
     $('#chooseimage').find('.currentIcon').html(imghtml);
+    $('#option_add_1084').unbind('click');
+    $('#option_add_1084').click(() => {
+        getOptionsFromUI(device_options, received_options);
+        addOption();
+        updateOptions(availableOptions)
+    });
 
-    sendTo(namespace, 'getLocalImages', {}, function(msg) {
+
+
+    sendToWrapper(namespace, 'getLocalImages', {}, function(msg) {
         if (msg && msg.imageData) {
-            const imagedata = msg.imageData;
-            const default_icon = (dev.common.type === 'group' ? dev.common.modelIcon : `img/${dev.common.type.replace(/\//g, '-')}.png`);
-            if (dev.legacyIcon) imagedata.unshift( { file:dev.legacyIcon, name:'legacy', data:dev.legacyIcon});
-            imagedata.unshift( { file:'none', name:'default', data:default_icon});
-            imagedata.unshift( { file:'current', name:'current', data:dev.common.icon || dev.icon});
-
-            list2select('#images', imagedata, selectItems,
-                function (key, image) {
-                    return image.name
-                },
-                function (key, image) {
-                    return image.file;
-                },
-                function (key, image) {
-                    if (image.isBase64) {
-                        return `data-icon="data:image/png; base64, ${image.data}"`;
-                    } else {
-                        return `data-icon="${image.data}"`;
-                    }
-                },
-            );
+            updateImageSelection(dev, msg.imageData);
 
             $('#chooseimage a.btn[name=\'save\']').unbind('click');
             $('#chooseimage a.btn[name=\'save\']').click(() => {
@@ -1083,14 +1365,36 @@ async function selectImageOverride(id) {
                 const data = {};
                 if (image != 'current') data.icon= image;
                 if (name != dev.common.name) data.name = name;
+                data.options = getOptionsFromUI(device_options, received_options)
+
                 updateLocalConfigItems(id, data, global);
             });
-            $('#chooseimage').modal('open');
-            Materialize.updateTextFields();
+            sendToWrapper(namespace, 'getLocalConfigItems', { target:id, global:false, key:'options' }, function (msg) {
+                if (msg) {
+                    if (msg.error) showMessage(msg.error, '_Error');
+                    Object.keys(device_options).forEach(key => delete device_options[key]);
+                    Object.keys(received_options).forEach(key => delete received_options[key]);
+                    if (typeof msg.options === 'object') {
+                        let cnt = 1;
+                        for (const key in msg.options)
+                        {
+                            const idx = availableOptions.indexOf(key);
+                            console.warn(`key ${key} : index : ${idx}`);
+                            if (idx > -1) availableOptions.splice(idx,1);
+                            received_options[key]=msg.options[key];
+                            device_options[`o${cnt}`] = { key:key, value:msg.options[key]}
+                            cnt++;
+                        }
+                    }
+                    updateOptions(availableOptions);
+                } else showMessage('callback without message');
+                $('#chooseimage').modal('open');
+                Materialize.updateTextFields();
+            });
         }
     });
-}
 
+}
 
 function safestring(val) {
     const t = typeof val;
@@ -1100,6 +1404,11 @@ function safestring(val) {
     return val;
 }
 
+////
+//
+//. section DebugUI
+//
+////
 function fne(item) {
     const rv = [];
     if (item.flags) {
@@ -1146,13 +1455,12 @@ function HtmlFromInDebugMessages(messages, devID, filter) {
             isodd=!isodd;
         }
     }
-    const ifbutton = `<a id="i_${devID}" class="btn-floating waves-effect waves-light blue tooltipped center-align hoverable translateT" title="Update debug messages"><i class="material-icons large">${dbgMsgfilter.has('i_'+devID) ? 'filter_list' : 'format_align_justify' }</i></a>`
-    const ofbutton = `<a id="hi_${devID}" class="btn-floating waves-effect waves-light blue tooltipped center-align hoverable translateT" title="Update debug messages"><i class="material-icons large">${dbgMsghide.has('i_'+devID) ? 'unfold_more' : 'unfold_less' }</i></a>`
+    const ifbutton = `<a id="i_${devID}" class="btn-floating waves-effect waves-light blue tooltipped center-align hoverable translateT" title="Filter debug messages"><i class="material-icons large">${dbgMsgfilter.has('i_'+devID) ? 'filter_list' : 'format_align_justify' }</i></a>`
+    const ofbutton = `<a id="hi_${devID}" class="btn-floating waves-effect waves-light blue tooltipped center-align hoverable translateT" title="Hide debug messages"><i class="material-icons large">${dbgMsghide.has('i_'+devID) ? 'unfold_more' : 'unfold_less' }</i></a>`
     const dataHide = dbgMsgfilter.has('hi_'+devID) ? 'Data hidden' : '&nbsp;';
     return {html:`<thead id="dbgtable"><tr><td>&nbsp</td><td>Incoming messages</td><td>&nbsp;</td><td>&nbsp;</td><td>${dataHide}</td><td>${ifbutton}</td><td>${ofbutton}</td></tr><tr><td>ID</td><td>Zigbee Payload</td><td>&nbsp;</td><td>State Payload</td><td>ID</td><td>value</td><td>Flags</td></tr></thead><tbody>${Html.join('')}</tbody>`, buttonList };
 }
 
-
 function HtmlFromOutDebugMessages(messages, devID, filter) {
     const Html = [];
     const filterSet = new Set();
@@ -1188,13 +1496,12 @@ function HtmlFromOutDebugMessages(messages, devID, filter) {
             isodd=!isodd;
         }
     }
-    const ifbutton = `<a id="o_${devID}" class="btn-floating waves-effect waves-light blue tooltipped center-align hoverable translateT" title="Update debug messages"><i class="material-icons large">${dbgMsgfilter.has('o_'+devID) ? 'filter_list' : 'format_align_justify' }</i></a>`
-    const ofbutton = `<a id="ho_${devID}" class="btn-floating waves-effect waves-light blue tooltipped center-align hoverable translateT" title="Update debug messages"><i class="material-icons large">${dbgMsghide.has('o_'+devID) ? 'unfold_more' : 'unfold_less'}</i></a>`
+    const ifbutton = `<a id="o_${devID}" class="btn-floating waves-effect waves-light blue tooltipped center-align hoverable translateT" title="Filter debug messages"><i class="material-icons large">${dbgMsgfilter.has('o_'+devID) ? 'filter_list' : 'format_align_justify' }</i></a>`
+    const ofbutton = `<a id="ho_${devID}" class="btn-floating waves-effect waves-light blue tooltipped center-align hoverable translateT" title="Hide debug messages"><i class="material-icons large">${dbgMsghide.has('o_'+devID) ? 'unfold_more' : 'unfold_less'}</i></a>`
     const dataHide = dbgMsgfilter.has('ho_'+devID) ? 'Data hidden' : '&nbsp;';
     return { html:`<thead id="dbgtable"><tr><td>&nbsp</td><td>Outgoing messages</td><td>&nbsp;</td><td>&nbsp;</td><td>${dataHide}</td><td>${ifbutton}</td><td>${ofbutton}</td></tr><tr><td>ID</td><td>Zigbee Payload</td><td>EP</td><td>ID</td><td>value</td><td>State Payload</td><td>Flags</td></tr></thead><tbody>${Html.join('')}</tbody>`, buttonList};
 }
 
-
 function displayDebugMessages(msg) {
     const buttonNames = [];
     const idButtons = [];
@@ -1204,9 +1511,9 @@ function displayDebugMessages(msg) {
         const keylength = keys.length;
         const Html = [];
         const button = `<a id="e_all" class="btn-floating waves-effect waves-light green tooltipped center-align hoverable translateT" title="Update debug messages"><i class="material-icons large">sync_problem</i></a>`;
-        const dbutton = `<a id="d_all" class="btn-floating waves-effect waves-light red tooltipped center-align hoverable translateT" title="Update debug messages"><i class="material-icons icon-yellowlarge">delete_forever</i></a>`;
-        const fbutton = `<a id="f_all" class="btn-floating waves-effect waves-light green tooltipped center-align hoverable translateT" title="Update debug messages"><i class="material-icons large">${dbgMsgfilter.size != 0 ? 'filter_list' : 'format_align_justify' }</i></a>`;
-        const hbutton = `<a id="h_all" class="btn-floating waves-effect waves-light blue tooltipped center-align hoverable translateT" title="Update debug messages"><i class="material-icons large">${dbgMsghide.size != 0 ? 'unfold_more' : 'unfold_less'}</i></a>`;
+        const dbutton = `<a id="d_all" class="btn-floating waves-effect waves-light red tooltipped center-align hoverable translateT" title="Delete debug messages"><i class="material-icons icon-yellowlarge">delete_forever</i></a>`;
+        const fbutton = `<a id="f_all" class="btn-floating waves-effect waves-light green tooltipped center-align hoverable translateT" title="Filter debug messages"><i class="material-icons large">${dbgMsgfilter.size != 0 ? 'filter_list' : 'format_align_justify' }</i></a>`;
+        const hbutton = `<a id="h_all" class="btn-floating waves-effect waves-light blue tooltipped center-align hoverable translateT" title="Hide debug messages"><i class="material-icons large">${dbgMsghide.size != 0 ? 'unfold_more' : 'unfold_less'}</i></a>`;
         const logbutton = `<a id="l_all" class="btn-floating waves-effect waves-light ${debugInLog ? 'green' : 'red'} tooltipped center-align hoverable translateT" title="Log messages"><i class="material-icons large">${debugInLog ? 'speaker_notes' : 'speaker_notes_off'}</i></a>`;
         Html.push(`<li><table><thead id="dbgtable"><tr><td>${logbutton}</td><td colspan="3">Debug information by device</td><td>${fbutton}</td><td>${hbutton}</td><td>${button}</td><td>${dbutton}</td></tr></thead><tbody>`);
         if (!keylength) {
@@ -1299,7 +1606,6 @@ function displayDebugMessages(msg) {
             });
         }
         for (const b of idButtons) {
-            console.warn(`trying to add link to button ${b}`);
             $(`#lx_${b}`).click(function() { showMessageList(b)});
         }
     }
@@ -1344,48 +1650,38 @@ function showNamedMessages(messages, title, icon, timestamp) {
 }
 
 function showMessageList(msgId) {
-    console.warn(`trying to show messages for ${msgId}`);
-    console.warn(JSON.stringify(debugMessages));
     for (const devId of Object.keys(debugMessages.byId)) {
         for (const id of debugMessages.byId[devId].IN) {
             if (id.dataID == msgId) {
-                console.warn(`showing messages for ${id.type} ${devId}`);
                 showNamedMessages(id.messages, `Messages from ${new Date(msgId).toLocaleTimeString()} for device ${devId}`);
                 return;
             }
         }
         for (const id of debugMessages.byId[devId].OUT) {
             if (id.dataID == msgId) {
-                console.warn(`showing messages for ${msgId}`);
                 showNamedMessages(id.messages, `Messages from ${new Date(msgId).toLocaleTimeString()} for device ${devId}`);
                 return;
             }
         }
     }
-    console.warn(`nothing to show`);
-
-
 }
 
 function getDebugMessages(deleteBeforeRead, deleteSelected) {
-    sendTo(namespace, 'getDebugMessages', { inlog: debugInLog, del:deleteBeforeRead ? deleteSelected : '' }, function(msg) {
+    sendToWrapper(namespace, 'getDebugMessages', { inlog: debugInLog, del:deleteBeforeRead ? deleteSelected : '' }, function(msg) {
         debugMessages = msg;
         if (msg) displayDebugMessages(debugMessages)
     })
 }
 
-const lockout = {
-    timeoutid:undefined,
-    isActive:false,
-};
+////
+//
+//. section getDataFromAdapter
+//
+////
 function getDevices() {
-    console.warn('getDevices called')
-
     function sendForData() {
-        sendTo(namespace, 'getCoordinatorInfo', {}, function (msg) {
-            console.warn(`getCoordinatorInfo returned ${JSON.stringify(msg)}`)
+        sendToWrapper(namespace, 'getCoordinatorInfo', {}, function (msg) {
             if (msg) {
-                console.warn(JSON.stringify(msg))
                 if (msg.error) {
                     errorData.push(msg.error);
                     delete msg.error;
@@ -1396,7 +1692,7 @@ function getDevices() {
                 coordinatorinfo = msg;
                 updateStartButton()
             }
-            sendTo(namespace, 'getDevices', {}, function (msg) {
+            sendToWrapper(namespace, 'getDevices', {}, function (msg) {
                 if (msg) {
                     devices = msg.devices ? msg.devices : [];
                     // check if stashed error messages are sent alongside
@@ -1416,13 +1712,11 @@ function getDevices() {
                     //check if debug messages are sent alongside
                     if (msg && typeof (msg.debugDevices == 'array')) {
                         debugDevices = msg.debugDevices;
-                        console.warn('debug devices is sent')
                     }
                     else
                         debugDevices = [];
                     if (debugMessages.byId) {
                         newDebugMessages = true;
-                        console.warn('having debug messages');
                         debugMessages.byId = msg;
                         if (msg) displayDebugMessages(debugMessages)
                     }
@@ -1430,19 +1724,18 @@ function getDevices() {
                     if (msg.error) {
                         errorData.push(msg.error);
                         isHerdsmanRunning = false;
-                        updateStartButton();
-                        showDevices();
                     } else {
                         isHerdsmanRunning = true;
-                        updateStartButton();
-                        showDevices();
                         if (!newDebugMessages) {
-                            console.warn('getting debug messages');
                             getDebugMessages();
                         }
                         //getExclude();
                         getBinding();
                     }
+                    updateStartButton();
+                    showDevices();
+                    showLocalData();
+                    UpdateAdapterAlive(true)
                 }
             });
         });
@@ -1450,7 +1743,6 @@ function getDevices() {
 
     if (lockout.timeoutid) {
         clearTimeout(lockout.timeoutid);
-        console.warn('clearing getDevices timeout')
     }
 
     setTimeout(() => {
@@ -1462,28 +1754,18 @@ function getDevices() {
 }
 
 function getNamedColors() {
-    sendTo(namespace, 'getNamedColors', {}, function(msg) {
+    sendToWrapper(namespace, 'getNamedColors', {}, function(msg) {
         if (msg && typeof msg.colors) {
             namedColors = msg.colors;
         }
     });
 }
 
-function getDeviceCards() {
-    return $('#devices .device').not('.group');
-}
-
-function getDeviceCard(devId) {
-    if (devId.startsWith('0x')) {
-        devId = devId.substr(2, devId.length);
-    }
-    return $('#devices').find(`div[id='${namespace}.${devId}']`);
-}
 
 function getMap(rebuild) {
     $('#refresh').addClass('disabled');
     if (isHerdsmanRunning) {
-        sendTo(namespace, 'getMap', { forcebuild:rebuild}, function (msg) {
+        sendToWrapper(namespace, 'getMap', { forcebuild:rebuild}, function (msg) {
             $('#refresh').removeClass('disabled');
             if (msg) {
                 if (msg.error) {
@@ -1505,27 +1787,27 @@ function getMap(rebuild) {
     else showMessage('Unable to generate map, the zigbee subsystem is inactive', 'Map generation error');
 }
 
-function getRandomExtPanID()
-{
-    const bytes = [];
-    for (let i = 0;i<16;i++) {
-        bytes.push(Math.floor(Math.random() * 16).toString(16));
-    }
-    return bytes.join('');
-}
-
-function getRandomChannel()
-{
-    const channels = [11,15,20,25]
-    return channels[Math.floor(Math.random() * 4)];
-}
 
 
 
 // the function loadSettings has to exist ...
 
 function load(settings, onChange) {
-    console.warn(JSON.stringify(settings));
+    function getRandomExtPanID()
+    {
+        const bytes = [];
+        for (let i = 0;i<16;i++) {
+            bytes.push(Math.floor(Math.random() * 16).toString(16));
+        }
+        return bytes.join('');
+    }
+
+    function getRandomChannel()
+    {
+        const channels = [11,15,20,25]
+        return channels[Math.floor(Math.random() * 4)];
+    }
+
     if (settings.extPanID === undefined || settings.extPanID == '') {
         settings.channel = getRandomChannel();
     }
@@ -1577,13 +1859,20 @@ function load(settings, onChange) {
         }
     }
 
-
     getComPorts(onChange);
 
     //dialog = new MatDialog({EndingTop: '50%'});
-    getDevices();
-    getNamedColors();
-    readNVRamBackup(false);
+    const keepAliveHandle = startKeepalive();
+    keepAlive(() => {
+        getDevices();
+        getNamedColors();
+        readNVRamBackup(false);
+        sendToWrapper(namespace, 'getGroups', {}, function (data) {
+            groups = data.groups || {};
+        //showGroups();
+        });
+    })
+
     //getDebugMessages();
     //getMap();
     //addCard();
@@ -1592,13 +1881,10 @@ function load(settings, onChange) {
     onChange(false);
 
     $('#test-btn').click(function () {
-        console.warn(`isHerdsmanRunning: ${isHerdsmanRunning}`)
         if (!isHerdsmanRunning) {
             const port = $('#port.value').val();
-            console.warn(`port is ${port}`)
             showWaitingDialog(`Trying to connect to ${port}`, 300);
-            sendTo(namespace, 'testConnection', { address:port }, function(msg) {
-                console.warn(`send to returned with ${JSON.stringify(msg)}`);
+            sendToWrapper(namespace, 'testConnection', { address:port }, function(msg) {
                 closeWaitingDialog();
                 if (msg) {
                     if (msg.error) {
@@ -1617,7 +1903,6 @@ function load(settings, onChange) {
     })
     // test start commands
     $('#show_test_run').click(function () {
-        console.warn(`isHerdsmanRunning: ${isHerdsmanRunning}`)
         doTestStart(!isHerdsmanRunning);
     });
 
@@ -1639,10 +1924,8 @@ function load(settings, onChange) {
     });
     $('#pairing').click(function () {
         if (!$('#pairing').hasClass('pulse')) {
-            letsPairing();
-        }
-        console.warn('lets pairing');
-        showPairingProcess();
+            openNetwork();
+        } else showPairingProcess();
     });
 
     $('#refresh').click(function () {
@@ -1678,18 +1961,14 @@ function load(settings, onChange) {
         showChannels();
     });
 
-    sendTo(namespace, 'getGroups', {}, function (data) {
-        groups = data.groups;
-        //showGroups();
-    });
 
     $('#add_group').click(function () {
-        const maxind = parseInt(Object.getOwnPropertyNames(groups).reduce((a, b) => a > b ? a : b, 0));
+        const maxind = parseInt(Object.getOwnPropertyNames(groups || {}).reduce((a, b) => a > b ? a : b, 0));
         addGroup(maxind + 1, 'Group ' + maxind + 1);
     });
 
     $('#add_grp_btn').click(function () {
-        const maxind = parseInt(Object.getOwnPropertyNames(groups).reduce((a, b) => a > b ? a : b, 0));
+        const maxind = parseInt(Object.getOwnPropertyNames(groups || {}).reduce((a, b) => a > b ? a : b, 0));
         addGroup(maxind + 1, 'Group ' + maxind + 1);
     });
 
@@ -1715,6 +1994,7 @@ function load(settings, onChange) {
         $('.dropdown-trigger').dropdown({constrainWidth: false});
         Materialize.updateTextFields();
         $('.collapsible').collapsible();
+
         Materialize.Tabs.init($('.tabs'));
         $('#device-search').keyup(function (event) {
             doFilter(event.target.value.toLowerCase());
@@ -1748,11 +2028,15 @@ function load(settings, onChange) {
         addExcludeDialog();
     });
 
+    $('#updateData').click(function () {
+        getDevices();
+    });
+
     $('#add_binding').click(function () {
         addBindingDialog();
     });
 
-    sendTo(namespace, 'getLibData', {key: 'cidList'}, function (data) {
+    sendToWrapper(namespace, 'getLibData', {key: 'cidList'}, function (data) {
         cidList = data.list;
     });
 }
@@ -1767,13 +2051,22 @@ function showMessages() {
     $('#stdout_t').text(messages.join('\n'));
 }
 
-function showPairingProcess() {
+function showPairingProcess(noextrabuttons) {
     if (isHerdsmanRunning) $('#modalpairing').modal({
         startingTop: '4%',
         endingTop: '10%',
         dismissible: false
     });
 
+    if (noextrabuttons) {
+        $('#modalpairing').find('.endpairing').addClass('hide');
+        $('#modalpairing').find('.extendpairing').addClass('hide');
+    }
+    else {
+        $('#modalpairing').find('.endpairing').removeClass('hide');
+        $('#modalpairing').find('.extendpairing').removeClass('hide');
+    }
+
     $('#modalpairing').modal('open');
     Materialize.updateTextFields();
 }
@@ -1792,24 +2085,25 @@ function doTestStart(start, interactive) {
         };
         // $('#testStartStart').addClass('disabled');
         messages = [];
-        if (interactive) showWaitingDialog('Trying to start the zigbee subsystem manually', 120);
-        sendTo(namespace, 'testConnect', { start:true, zigbeeOptions:ovr }, function(msg) {
+        if (interactive) showPairingProcess(true)
+
+        //    showWaitingDialog('Trying to start the zigbee subsystem manually', 120);
+        sendToWrapper(namespace, 'testConnect', { start:true, zigbeeOptions:ovr }, function(msg) {
             if (msg) {
                 closeWaitingDialog();
-                isHerdsmanRunning = msg.status;
                 updateStartButton(false);
                 if (msg.status)
                     $('#testStartStop').removeClass('disabled');
                 else {
                     //showMessage(`The zigbee subsystem is not running. Please ensure that the configuration is correct. ${msg.error ? 'Error on start-Attempt ' + msg.error.message : ''}`);
-                    $('#testStartStop').removeClass('disabled');
+                    $('#testStartStart').removeClass('disabled');
                 }
             }
         })
     }
     else {
         //$('#testStartStop').addClass('disabled');
-        sendTo(namespace, 'testConnect', { start:false }, function(msg) {
+        sendToWrapper(namespace, 'testConnect', { start:false }, function(msg) {
             if (msg) {
                 if (msg.status) $('#testStartStart').removeClass('disabled');
                 else $('#testStartStop').removeClass('disabled');
@@ -1847,7 +2141,6 @@ function getDevId(adapterDevId) {
 
 
 function updateStartButton(block) {
-    console.warn(`update start button with${isHerdsmanRunning ? ' Herdsman' : 'out Herdsman'}`);
     if (block) {
         $('#show_test_run').addClass('disabled');
         $('#reset-btn').addClass('disabled');
@@ -1894,7 +2187,6 @@ socket.emit('subscribeObjects', namespace + '.*');
 socket.on('stateChange', function (id, state) {
     // only watch our own states
     if (id.substring(0, namespaceLen) !== namespace) return;
-    //console.log('stateChange', id, state);
     if (state) {
         if (id.match(/\.info\.pairingMode$/)) {
             if (state.val) {
@@ -1956,14 +2248,12 @@ socket.on('stateChange', function (id, state) {
 
 socket.on('objectChange', function (id, obj) {
     if (id.substring(0, namespaceLen) !== namespace) return;
-    //console.log('objectChange', id, obj);
     if (obj && obj.type == 'device') { // && obj.common.type !== 'group') {
         updateDevice(id);
     }
     if (!obj) {
         // delete state or device
         const elems = id.split('.');
-        //console.log('elems', elems);
         if (elems.length === 3) {
             removeDevice(id);
             showDevices();
@@ -2015,10 +2305,11 @@ function showNetworkMap(devices, map) {
     const createNode = function (dev, mapEntry) {
         if (dev.common && (dev.common.type == 'group' || dev.common.deactivated)) return undefined;
         const extInfo = (mapEntry && mapEntry.networkAddress) ? `\n (nwkAddr: 0x${mapEntry.networkAddress.toString(16)} | ${mapEntry.networkAddress})` : '';
+        const t = dev._id.replace(namespace + '.', '');
         const node = {
             id: dev._id,
             label: (dev.link_quality > 0 ? dev.common.name : `${dev.common.name}\n(disconnected)`),
-            title: dev._id.replace(namespace + '.', '') + extInfo,
+            title: `${t} ${extInfo}`,
             shape: 'circularImage',
             image: dev.common.icon || dev.icon,
             imagePadding: {top: 5, bottom: 5, left: 5, right: 5},
@@ -2027,20 +2318,20 @@ function showNetworkMap(devices, map) {
             borderWidth: 1,
             borderWidthSelected: 4,
         };
-        if (dev.info && dev.info.device.type == 'Coordinator') {
+        if (dev.common && dev.common.type === 'Coordinator') {
             // node.shape = 'star';
             node.image = 'zigbee.png';
             node.label = 'Coordinator';
             // delete node.color;
         }
+        console.warn(`node for device ${JSON.stringify(node)}`)
         return node;
     };
 
     if (map.lqis) {
         map.lqis.forEach((mapEntry) => {
-            const dev = getDevice(mapEntry.ieeeAddr);
+            const dev = getDeviceByIEEE(mapEntry.ieeeAddr);
             if (!dev) {
-                //console.log("No dev with ieee "+mapEntry.ieeeAddr);
                 return;
             }
 
@@ -2054,7 +2345,7 @@ function showNetworkMap(devices, map) {
                 node = nodes[mapEntry.ieeeAddr];
             }
             if (node) {
-                const parentDev = getDevice(mapEntry.parent);
+                const parentDev = getDeviceByIEEE(mapEntry.parent);
                 const to = parentDev ? parentDev._id : undefined;
                 const from = dev._id;
                 let label = mapEntry.lqi.toString();
@@ -2321,7 +2612,7 @@ function getComPorts(onChange) {
     // timeout = setTimeout(function () {
     //     getComPorts(onChange);
     // }, 2000);
-    sendTo(namespace, 'listUart', null, function (list) {
+    sendToWrapper(namespace, 'listUart', null, function (list) {
         // if (timeout) {
         //     clearTimeout(timeout);
         //     timeout = null;
@@ -2465,7 +2756,6 @@ function loadDeveloperTab() {
             const device = devices.find(obj => {
                 return this.value ===obj.native.id;
             });
-            console.warn(`dev selector: ${this.selectedIndex} ${this.value} ->${JSON.stringify(device)}`)
 
             const epList = device ? device.info.endpoints : null;
             updateSelect('#ep', epList,
@@ -2548,7 +2838,7 @@ function loadDeveloperTab() {
                 data = prepareData();
             }
             sendToZigbee(data.devId, data.ep, data.cid, data.cmd, data.cmdType, data.zclData, data.cfg, function (reply) {
-                console.log('Reply from zigbee: ' + JSON.stringify(reply));
+                console.log('Send to Zigbee replied with ' + JSON.stringify(reply));
                 if (reply.hasOwnProperty('localErr')) {
                     showDevRunInfo(reply.localErr, reply.errMsg, 'yellow');
                 } else if (reply.hasOwnProperty('localStatus')) {
@@ -2563,7 +2853,7 @@ function loadDeveloperTab() {
 
     responseCodes = null;
     // load list of response codes
-    sendTo(namespace, 'getLibData', {key: 'respCodes'}, function (data) {
+    sendToWrapper(namespace, 'getLibData', {key: 'respCodes'}, function (data) {
         responseCodes = data.list;
     });
 }
@@ -2616,7 +2906,7 @@ function sendToZigbee(id, ep, cid, cmd, cmdType, zclData, cfg, callback) {
 
     console.log('Send to zigbee, id ' + id + ',ep ' + ep + ', cid ' + cid + ', cmd ' + cmd + ', cmdType ' + cmdType + ', zclData ' + JSON.stringify(zclData));
 
-    sendTo(namespace, 'sendToZigbee', data, function (reply) {
+    sendToWrapper(namespace, 'sendToZigbee', data, function (reply) {
         clearTimeout(sendTimeout);
         if (callback) {
             callback(reply);
@@ -2664,7 +2954,7 @@ function populateSelector(selectId, key, cid) {
         updateSelect(selectId, null);
         return;
     }
-    sendTo(namespace, 'getLibData', {key: key, cid: cid}, function (data) {
+    sendToWrapper(namespace, 'getLibData', {key: key, cid: cid}, function (data) {
         const list = data.list;
         if (key === 'attrIdList') {
             updateSelect(selectId, list,
@@ -2807,7 +3097,7 @@ function deleteGroupConfirmation(id, name) {
 
 function updateGroup(newId, newName, remove) {
     groups[newId] = newName;
-    sendTo(namespace, 'renameGroup', {id: newId, name: newName, remove: remove}, function (msg) {
+    sendToWrapper(namespace, 'renameGroup', {id: newId, name: newName, remove: remove}, function (msg) {
         if (msg && msg.error) {
             showMessage(msg.error, _('Error'));
         }
@@ -2817,7 +3107,7 @@ function updateGroup(newId, newName, remove) {
 
 function deleteGroup(id) {
     delete groups[id];
-    sendTo(namespace, 'deleteGroup', id, function (msg) {
+    sendToWrapper(namespace, 'deleteGroup', id, function (msg) {
         if (msg && msg.error) {
             showMessage(msg.error, _('Error'));
         }
@@ -2840,7 +3130,7 @@ function updateDev(id, newName, newGroups) {
     const keys = Object.keys(newGroups);
     if (keys && keys.length) {
         command.groups = newGroups
-        sendTo(namespace, 'updateGroupMembership', command, function (msg) {
+        sendToWrapper(namespace, 'updateGroupMembership', command, function (msg) {
             closeWaitingDialog();
             if (msg && msg.error) {
                 showMessage(msg.error, _('Error'));
@@ -2854,7 +3144,7 @@ function updateDev(id, newName, newGroups) {
     }
     else if (needName)
     {
-        sendTo(namespace, 'renameDevice', command, function(msg) {
+        sendToWrapper(namespace, 'renameDevice', command, function(msg) {
             //closeWaitingDialog();
             if (msg && msg.error) {
                 showMessage(msg.error, _('Error'));
@@ -2873,9 +3163,9 @@ function resetConfirmation() {
     const btn = $('#modalreset .modal-content a.btn');
     btn.unbind('click');
     btn.click(function (e) {
-        sendTo(namespace, 'reset', {mode: e.target.id}, function (err) {
+        sendToWrapper(namespace, 'reset', {mode: e.target.id}, function (err) {
             if (err) {
-                console.log(err);
+                console.log(`reset attempt failed with ${err}`);
             } else {
                 console.log('Reset done');
             }
@@ -3104,7 +3394,7 @@ function addBindingDialog() {
 }
 
 function addBinding(bind_source, bind_source_ep, bind_target, bind_target_ep, unbind_from_coordinator) {
-    sendTo(namespace, 'addBinding', {
+    sendToWrapper(namespace, 'addBinding', {
         bind_source: bind_source,
         bind_source_ep: bind_source_ep,
         bind_target: bind_target,
@@ -3121,7 +3411,7 @@ function addBinding(bind_source, bind_source_ep, bind_target, bind_target_ep, un
 }
 
 function editBinding(bind_id, bind_source, bind_source_ep, bind_target, bind_target_ep, unbind_from_coordinator) {
-    sendTo(namespace, 'editBinding', {
+    sendToWrapper(namespace, 'editBinding', {
         id: bind_id,
         bind_source: bind_source,
         bind_source_ep: bind_source_ep,
@@ -3214,7 +3504,7 @@ function showBinding() {
 }
 
 function getBinding() {
-    sendTo(namespace, 'getBinding', {}, function (msg) {
+    sendToWrapper(namespace, 'getBinding', {}, function (msg) {
         if (msg) {
             if (msg.error) {
                 showMessage(msg.error, _('Error'));
@@ -3239,7 +3529,7 @@ function deleteBindingConfirmation(id) {
 }
 
 function deleteBinding(id) {
-    sendTo(namespace, 'delBinding', id, (msg) => {
+    sendToWrapper(namespace, 'delBinding', id, (msg) => {
         closeWaitingDialog();
         if (msg) {
             if (msg.error) {
@@ -3261,7 +3551,6 @@ function findClName(id) {
 }
 
 function genDevInfo(device) {
-    //console.log(device);
     const dev = (device && device.info) ? device.info.device : undefined;
     const mapped = (device && device.info) ? device.info.mapped : undefined;
     const endpoints = (device && device.info) ? device.info.endpoints : [];
@@ -3309,7 +3598,6 @@ function genDevInfo(device) {
     let epInfo = '';
     for (const epind in endpoints) {
         const ep = endpoints[epind];
-        console.warn(JSON.stringify(ep));
         epInfo +=
             `<div style="font-size: 0.9em" class="truncate">
                 <ul>
@@ -3342,12 +3630,6 @@ function genDevInfo(device) {
     return info.join('');
 }
 
-function showDevInfo(id) {
-    const info = genDevInfo(getDeviceByID(id));
-    $('#devinfo').html(info);
-    $('#modaldevinfo').modal('open');
-}
-
 let waitingTimeout, waitingInt;
 
 function showWaitingDialog(text, timeout) {
@@ -3375,7 +3657,7 @@ function closeWaitingDialog() {
 
 
 function showChannels() {
-    sendTo(namespace, 'getChannels', {}, function (msg) {
+    sendToWrapper(namespace, 'getChannels', {}, function (msg) {
         closeWaitingDialog();
         if (msg) {
             if (msg.error) {
@@ -3494,21 +3776,20 @@ function addExcludeDialog() {
 
 function addExclude(exclude_model) {
     if (typeof exclude_model == 'object' && exclude_model.hasOwnProperty('common'))
-        sendTo(namespace, 'addExclude', { exclude_model: exclude_model }, function (msg) {
+        sendToWrapper(namespace, 'addExclude', { exclude_model: exclude_model }, function (msg) {
             closeWaitingDialog();
             if (msg) {
                 if (msg.error) {
                     showMessage(msg.error, _('Error'));
                 }
             }
-            console.log('getting excludes ?');
             getExclude();
         });
     else closeWaitingDialog();
 }
 
 function getExclude() {
-    sendTo(namespace, 'getExclude', {}, function (msg) {
+    sendToWrapper(namespace, 'getExclude', {}, function (msg) {
         if (msg) {
             if (msg.error) {
                 showMessage(msg.error, _('Error'));
@@ -3579,14 +3860,13 @@ function deleteExcludeConfirmation(id) {
 }
 
 function deleteExclude(id) {
-    sendTo(namespace, 'delExclude', id, (msg) => {
+    sendToWrapper(namespace, 'delExclude', id, (msg) => {
         closeWaitingDialog();
         if (msg) {
             if (msg.error) {
                 showMessage(msg.error, _('Error'));
             }
         }
-        console.log('getting excludes ?');
         getExclude();
     });
 }
@@ -3669,168 +3949,9 @@ function sortByTitle(element) {
     return element.querySelector('.card-title').textContent.toLowerCase().trim();
 }
 
-function getDashCard(dev, groupImage, groupstatus) {
-    const title = dev.common.name,
-        id = dev._id,
-        type = dev.common.type,
-        img_src = (groupImage ? groupImage : dev.common.icon || dev.icon),
-        isActive = !dev.common.deactivated,
-        rooms = [],
-        lang = systemLang || 'en';
-    const paired = (dev.paired) ? '' : '<i class="material-icons right">leak_remove</i>';
-    const permitJoinBtn = dev.battery || dev.common.type == 'group' ? '' : `<div class="col tool"><button name="joinCard" class="waves-effect btn-small btn-flat right hoverable green"><i class="material-icons icon-green">leak_add</i></button></div>`;
-    const device_queryBtn = dev.battery || dev.common.type == 'group' ? '' : `<div class="col tool"><button name="deviceQuery" class="waves-effect btn-small btn-flat right hoverable green"><i class="material-icons icon-green">play_for_work</i></button></div>`;
-    const rid = id.split('.').join('_');
-    const modelUrl = (!type) ? '' : `<a href="https://www.zigbee2mqtt.io/devices/${type}.html" target="_blank" rel="noopener noreferrer">${type}</a>`;
-    const image = `<img src="${img_src}" width="64px" onerror="this.onerror=null;this.src='img/unavailable.png';">`,
-        nwk = (dev.info && dev.info.device) ? dev.info.device.nwk : undefined,
-        battery_cls = getBatteryCls(dev.battery),
-        lqi_cls = getLQICls(dev.link_quality),
-        unconnected_icon = (groupImage ? (groupstatus ? '<div class="col tool"><i class="material-icons icon-green">check_circle</i></div>' : '<div class="col tool"><i class="material-icons icon-red">cancel</i></div>') :'<div class="col tool"><i class="material-icons icon-red">leak_remove</i></div>'),
-        battery = (dev.battery && isActive) ? `<div class="col tool"><i id="${rid}_battery_icon" class="material-icons ${battery_cls}">battery_std</i><div id="${rid}_battery" class="center" style="font-size:0.7em">${dev.battery}</div></div>` : '',
-        lq = (dev.link_quality > 0 && isActive) ? `<div class="col tool"><i id="${rid}_link_quality_icon" class="material-icons ${lqi_cls}">network_check</i><div id="${rid}_link_quality" class="center" style="font-size:0.7em">${dev.link_quality}</div></div>` : (isActive ? unconnected_icon : ''),
-        //status = (dev.link_quality > 0 && isActive) ? `<div class="col tool"><i class="material-icons icon-green">check_circle</i></div>` : (groupImage || !isActive ? '' : `<div class="col tool"><i class="material-icons icon-black">leak_remove</i></div>`),
-        //infoBtn = (nwk) ? `<button name="info" class="left btn-flat btn-small"><i class="material-icons icon-blue">info</i></button>` : '',
-        idleTime = (dev.link_quality_lc > 0 && isActive) ? `<div class="col tool"><i id="${rid}_link_quality_lc_icon" class="material-icons idletime">access_time</i><div id="${rid}_link_quality_lc" class="center" style="font-size:0.7em">${getIdleTime(dev.link_quality_lc)}</div></div>` : '';
-    const info = (dev.statesDef) ? dev.statesDef.map((stateDef) => {
-        const id = stateDef.id;
-        const sid = id.split('.').join('_');
-        let val = stateDef.val || '';
-        if (stateDef.role === 'switch' && stateDef.write) {
-            val = `<span class="switch"><label><input type="checkbox" ${(val) ? 'checked' : ''}><span class="lever"></span></label></span>`;
-        } else if (stateDef.role === 'level.dimmer' && stateDef.write) {
-            val = `<span class="range-field dash"><input type="range" min="0" max="100" ${(val != undefined) ? `value="${val}"` : ''} /></span>`;
-        } else if (stateDef.role === 'level.color.temperature' && stateDef.write) {
-            val = `<span class="range-field dash"><input type="range" min="150" max="500" ${(val != undefined) ? `value="${val}"` : ''} /></span>`;
-        } else if (stateDef.type === 'boolean') {
-            const disabled = (stateDef.write) ? '' : 'disabled="disabled"';
-            val = `<label class="dash"><input type="checkbox" ${(val == true) ? 'checked=\'checked\'' : ''} ${disabled}/><span></span></label>`;
-        } else if (stateDef.role === 'level.color.rgb') {
-            const options = []
-            for (const key of namedColors) {
-                options.push(`<option value="${key}" ${val===key ? 'selected' : ''}>${key}</option>`);
-            }
-            val = `<select class="browser-default enum" style="color : white; background-color: grey; height: 16px; padding: 0; width: auto; display: inline-block">${options.join('')}</select>`;
-        } else if (stateDef.states && stateDef.write) {
-            let options;
-            if (typeof stateDef.states == 'string') {
-                const sts = stateDef.states.split(';');
-                if (sts.length < 2) return '';
-                options = sts.map((item) => {
-                    const v = item.split(':');
-                    return `<option value="${v[0]}" ${(val == v[0]) ? 'selected' : ''}>${v[1]}</option>`;
-                });
-            } else {
-                options = [];
-                for (const [key, value] of Object.entries(stateDef.states)) {
-                    options.push(`<option value="${key}" ${(val == key) ? 'selected' : ''}>${key}</option>`);
-                }
-            }
-            if (options.length < 2) return '';
-            val = `<select class="browser-default enum" style="color : white; background-color: grey; height: 16px; padding: 0; width: auto; display: inline-block">${options.join('')}</select>`;
-        } else if (stateDef.write) {
-            return;
-            // val = `<span class="input-field dash value"><input class="dash value" id="${stateDef.name}" value="${val}"></input></span>`;
-        }
-        else {
-            val = `<span class="dash value">${val ? val : '(null)'} ${(stateDef.unit) ? stateDef.unit : ''}</span>`;
-        }
-        return `<li><span class="label dash truncate">${stateDef.name}</span><span id=${sid} oid=${id} class="state">${val}</span></li>`;
-    }).join('') : '';
-    const dashCard = `
-        <div class="card-content zcard ${isActive ? '' : 'bg_red'}">
-            <div style="cursor: pointer">
-            <span class="top right small" style="border-radius: 50%">
-                ${device_queryBtn}
-                ${permitJoinBtn}
-            </span>
-            <div  class="flip">
-            <span class="top right small" style="border-radius: 50%">
-                ${idleTime}
-                ${battery}
-                ${lq}
-            </span>
-             <span class="card-title truncate">${title}</span>
-            </div>
-            </div>
-            <i class="left">${image}</i>
-            <div style="min-height:88px; font-size: 0.8em; height: 130px; overflow-y: auto" class="truncate">
-                <ul>
-                    ${(isActive ? info : 'Device deactivated')}
-                </ul>
-            </div>
-            <div class="footer right-align"></div>
-        </div>`;
-
-    return dashCard;
-}
-
-function setDashStates(id, state) {
-    const devId = getDevId(id);
-    const dev = getDeviceByID(devId);
-    if (dev) {
-        const stateDef = dev.statesDef.find((stateDef) => stateDef.id == id);
-        if (stateDef) {
-            const sid = id.split('.').join('_');
-            if (stateDef.role === 'switch' && stateDef.write) {
-                $(`#${sid}`).find('input[type=\'checkbox\']').prop('checked', state.val);
-            } else if (stateDef.role === 'level.dimmer' && stateDef.write) {
-                $(`#${sid}`).find('input[type=\'range\']').prop('value', state.val);
-            } else if (stateDef.role === 'level.color.temperature' && stateDef.write) {
-                $(`#${sid}`).find('input[type=\'range\']').prop('value', state.val);
-            } else if (stateDef.states && stateDef.write) {
-                $(`#${sid}`).find(`select option[value=${state.val}]`).prop('selected', true);
-            } else if (stateDef.type === 'boolean') {
-                $(`#${sid}`).find('input[type=\'checkbox\']').prop('checked', state.val);
-            } else {
-                $(`#${sid}`).find('.value').text(`${state.val} ${(stateDef.unit) ? stateDef.unit : ''}`);
-            }
-        }
-    }
-}
-
-function hookControls() {
-    $('input[type=\'checkbox\']').change(function (event) {
-        const val = $(this).is(':checked');
-        const id = $(this).parents('.state').attr('oid');
-        sendTo(namespace, 'setState', {id: id, val: val}, function (data) {
-            //console.log(data);
-        });
-    });
-    $('input[type=\'range\']').change(function (event) {
-        const val = $(this).val();
-        const id = $(this).parents('.state').attr('oid');
-        sendTo(namespace, 'setState', {id: id, val: val}, function (data) {
-            //console.log(data);
-        });
-    });
-    $('.state select').on('change', function () {
-        const val = $(this).val();
-        const id = $(this).parents('.state').attr('oid');
-        sendTo(namespace, 'setState', {id: id, val: val}, function (data) {
-            //console.log(data);
-        });
-    });
-}
-
-function getIdleTime(value) {
-    return (value) ? moment(new Date(value)).fromNow(true) : '';
-}
-
-function updateCardTimer() {
-    if (devices) {
-        devices.forEach((dev) => {
-            const id = dev._id;
-            if (id) {
-                const rid = id.split('.').join('_');
-                $(`#${rid}_link_quality_lc`).text(getIdleTime(dev.link_quality_lc));
-            }
-        });
-    }
-}
 
 function updateDevice(id) {
-    sendTo(namespace, 'getDevice', {id: id}, function (msg) {
+    sendToWrapper(namespace, 'getDevice', {id: id}, function (msg) {
         if (msg) {
             const devs = msg.devices;
             if (devs) {
@@ -3860,13 +3981,13 @@ function swapActive(id) {
     const dev = getDeviceByID(id);
     if (dev && dev.common) {
         dev.common.deactivated = !(dev.common.deactivated);
-        sendTo(namespace, 'setDeviceActivated', {id: id, deactivated: dev.common.deactivated}, function () {
+        sendToWrapper(namespace, 'setDeviceActivated', {id: id, deactivated: dev.common.deactivated}, function () {
             showDevices();
         });
     }
 }
 
-function reconfigureDlg(id) {
+function reconfigureConfirmation(id) {
     const text = translateWord(`Do you really want to reconfigure device?`);
     $('#modalreconfigure').find('p').text(text);
     $('#modalreconfigure a.btn[name=\'yes\']').unbind('click');
@@ -3878,7 +3999,7 @@ function reconfigureDlg(id) {
 }
 
 function reconfigureDevice(id) {
-    sendTo(namespace, 'reconfigure', {id: id}, function (msg) {
+    sendToWrapper(namespace, 'reconfigure', {id: id}, function (msg) {
         closeWaitingDialog();
         if (msg) {
             if (msg.error) {
@@ -3899,34 +4020,28 @@ function validateConfigData(key, val) {
     if (validatableKeys.indexOf(key) < 0 || !val) return;
     if (warnLevel[key]) {
         if (warnLevel[key](val)) {
-            //console.warn(`warning set for ${key} (${val})`)
             $(`#${key}_ALERT`).removeClass('hide')
         } else $(`#${key}_ALERT`).addClass('hide')
     }
     if (nvRamBackup[key]) {
-        //console.warn(`value of ${key} is ${val} (${nvRamBackup[key]})`);
         if ((typeof val == 'string' && typeof nvRamBackup[key] == 'string' && val.toLowerCase == nvRamBackup[key].toLowerCase) || val == nvRamBackup[key])
         {
-            //console.warn(`ok set for ${key} (${val})`)
             $(`#${key}_OK`).removeClass('hide')
             $(`#${key}_NOK`).addClass('hide')
         }
         else
         {
-            //console.warn(`nok set for ${key} (${val})`)
             $(`#${key}_OK`).addClass('hide')
             $(`#${key}_NOK`).removeClass('hide')
         }
     }
     else {
-        //console.warn(`noval set for ${key} (${val})`)
         $(`#${key}_OK`).addClass('hide')
         $(`#${key}_NOK`).addClass('hide')
     }
 }
 
 function validateNVRamBackup(update, src) {
-    //console.warn('validateNVRam');
     const validatedKeys = src ? [src] : validatableKeys;
     const validator = {};
     for (const key of validatedKeys) {
@@ -3944,9 +4059,7 @@ function validateNVRamBackup(update, src) {
 
 
 function readNVRamBackup(update) {
-    console.warn('read nvRam')
-    sendTo(namespace, 'readNVRam', {}, function(msg) {
-        console.warn(JSON.stringify(msg));
+    sendToWrapper(namespace, 'readNVRam', {}, function(msg) {
         if (msg) {
             if (msg.error && update) {
                 if (msg.error.includes('ENOENT')) showMessage('Unable to read nvRam backup - no backup available.',_('Error'))