search

Rosi2143 / habpanel-widget-HMIP-eTRV-x

HAB-Panel widget for all HMIP-eTRV devices
MIT License
5 stars 7 forks source link

TempAct and Window icons not showing up #3

Closed mbr1989 closed 2 years ago

mbr1989 commented 2 years ago

grafik

Rosi2143 commented 2 years ago

Hello @mbr1989,

the icons for temperature are NOT in the default set, but are custom icons. Did you follow the instructions?

copy the icons for the temperature to $OPENHAB_CONF/icons/classic e.g. for Linux to /etc/openhab2/icons/classic
mbr1989 commented 2 years ago

Where can I find this directory in a iobroker system with habpanel ?

mbr1989 commented 2 years ago

/opt/iobroker/node_modules/iobroker.habpanel/www/assets/icons

drwxr-xr-x+ 2 iobroker iobroker 36864 Okt 21 01:21 eclipse-smarthome-classic -rw-r--r--+ 1 iobroker iobroker 3161 Okt 26 1985 eclipse-smarthome-classic.list.json drwxr-xr-x+ 2 iobroker iobroker 4096 Okt 21 01:21 freepik-gadgets -rw-r--r--+ 1 iobroker iobroker 2540 Okt 26 1985 freepik-gadgets.list.json drwxr-xr-x+ 2 iobroker iobroker 12288 Okt 21 01:21 freepik-household -rw-r--r--+ 1 iobroker iobroker 4187 Okt 26 1985 freepik-household.list.json drwxr-xr-x+ 2 iobroker iobroker 20480 Okt 21 01:21 freepik-housethings -rw-r--r--+ 1 iobroker iobroker 10691 Okt 26 1985 freepik-housethings.list.json drwxr-xr-x+ 2 iobroker iobroker 4096 Okt 21 19:42 HMIP-eTRV-x -rw-r--r--+ 1 iobroker iobroker 545 Okt 22 21:57 HMIP-eTRV-x.list.json -rw-r--r--+ 1 iobroker iobroker 697 Okt 26 1985 regenerate-esh-classic.sh drwxr-xr-x+ 2 iobroker iobroker 4096 Okt 21 01:21 smarthome-set -rw-r--r--+ 1 iobroker iobroker 836 Okt 26 1985 smarthome-set.list.json

/opt/iobroker/node_modules/iobroker.habpanel/www/assets/icons/HMIP-eTRV-x

-rw-r--r--+ 1 iobroker iobroker 1616 Jan 30 2020 hmip_etrv_thermometer-cold.png -rw-r--r--+ 1 iobroker iobroker 1189 Jan 30 2020 hmip_etrv_thermometer-cold.svg -rw-r--r--+ 1 iobroker iobroker 1613 Jan 30 2020 hmip_etrv_thermometer-hot.png -rw-r--r--+ 1 iobroker iobroker 1168 Jan 30 2020 hmip_etrv_thermometer-hot.svg -rw-r--r--+ 1 iobroker iobroker 1613 Jan 30 2020 hmip_etrv_thermometer.png -rw-r--r--+ 1 iobroker iobroker 1168 Jan 30 2020 hmip_etrv_thermometer.svg -rw-r--r--+ 1 iobroker iobroker 1620 Jan 30 2020 hmip_etrv_thermometer-warm.png -rw-r--r--+ 1 iobroker iobroker 1207 Jan 30 2020 hmip_etrv_thermometer-warm.svg -rw-r--r--+ 1 iobroker iobroker 7179 Jan 30 2020 hmip_etrv_window-closed.png -rw-r--r--+ 1 iobroker iobroker 4070 Jan 30 2020 hmip_etrv_window-closed.svg -rw-r--r--+ 1 iobroker iobroker 11087 Jan 30 2020 hmip_etrv_window-open.png -rw-r--r--+ 1 iobroker iobroker 5377 Jan 30 2020 hmip_etrv_window-open.svg -rw-r--r--+ 1 iobroker iobroker 7179 Jan 30 2020 hmip_etrv_window.png -rw-r--r--+ 1 iobroker iobroker 4070 Jan 30 2020 hmip_etrv_window.svg

/opt/iobroker/node_modules/iobroker.habpanel/www/assets/icons/HMIP-eTRV-x.list.json

{ "notice": "HMIP-eTRV-x", "url": "https://raw.githubusercontent.com/Rosi2143/habpanel-widget-HMIP-eTRV-x/master/icons/", "icons": [ "hmip_etrv_thermometer-cold.png "hmip_etrv_thermometer-cold", "hmip_etrv_thermometer-hot.png "hmip_etrv_thermometer-hot", "hmip_etrv_thermometer.png "hmip_etrv_thermometer", "hmip_etrv_thermometer-warm.png "hmip_etrv_thermometer-warm", "hmip_etrv_window-closed.png "hmip_etrv_window-closed", "hmip_etrv_window-open.png "hmip_etrv_window-open", "hmip_etrv_window.png "hmip_etrv_window" ] }

mbr1989 commented 2 years ago

/opt/iobroker/iobroker-data/files/habpanel/assets/icons

drwxrwxr-x+ 2 iobroker iobroker 32768 Okt 21 01:23 eclipse-smarthome-classic -rw-rw-r--+ 1 iobroker iobroker 3161 Okt 22 22:03 eclipse-smarthome-classic.list.json drwxrwxr-x+ 2 iobroker iobroker 4096 Okt 21 01:22 freepik-gadgets -rw-rw-r--+ 1 iobroker iobroker 2540 Okt 22 22:03 freepik-gadgets.list.json drwxrwxr-x+ 2 iobroker iobroker 12288 Okt 21 01:22 freepik-household -rw-rw-r--+ 1 iobroker iobroker 4187 Okt 22 22:03 freepik-household.list.json drwxrwxr-x+ 2 iobroker iobroker 20480 Okt 21 01:21 freepik-housethings -rw-rw-r--+ 1 iobroker iobroker 10691 Okt 22 22:02 freepik-housethings.list.json drwxrwxr-x+ 2 iobroker iobroker 4096 Okt 22 11:56 HMIP-eTRV-x -rw-rw-r--+ 1 iobroker iobroker 545 Okt 22 22:05 HMIP-eTRV-x.list.json -rw-rw-r--+ 1 iobroker iobroker 697 Okt 22 22:02 regenerate-esh-classic.sh drwxrwxr-x+ 2 iobroker iobroker 4096 Okt 21 01:21 smarthome-set -rw-rw-r--+ 1 iobroker iobroker 836 Okt 22 22:02 smarthome-set.list.json

/opt/iobroker/iobroker-data/files/habpanel/assets/icons/HMIP-eTRV-x

-rw-rw-r--+ 1 iobroker iobroker 1616 Okt 22 22:05 hmip_etrv_thermometer-cold.png -rw-rw-r--+ 1 iobroker iobroker 1189 Okt 22 22:05 hmip_etrv_thermometer-cold.svg -rw-rw-r--+ 1 iobroker iobroker 1613 Okt 22 22:05 hmip_etrv_thermometer-hot.png -rw-rw-r--+ 1 iobroker iobroker 1168 Okt 22 22:05 hmip_etrv_thermometer-hot.svg -rw-rw-r--+ 1 iobroker iobroker 1613 Okt 22 22:05 hmip_etrv_thermometer.png -rw-rw-r--+ 1 iobroker iobroker 1168 Okt 22 22:05 hmip_etrv_thermometer.svg -rw-rw-r--+ 1 iobroker iobroker 1620 Okt 22 22:05 hmip_etrv_thermometer-warm.png -rw-rw-r--+ 1 iobroker iobroker 1207 Okt 22 22:05 hmip_etrv_thermometer-warm.svg -rw-rw-r--+ 1 iobroker iobroker 7179 Okt 22 22:05 hmip_etrv_window-closed.png -rw-rw-r--+ 1 iobroker iobroker 4070 Okt 22 22:05 hmip_etrv_window-closed.svg -rw-rw-r--+ 1 iobroker iobroker 11087 Okt 22 22:05 hmip_etrv_window-open.png -rw-rw-r--+ 1 iobroker iobroker 5377 Okt 22 22:05 hmip_etrv_window-open.svg -rw-rw-r--+ 1 iobroker iobroker 7179 Okt 22 22:05 hmip_etrv_window.png -rw-rw-r--+ 1 iobroker iobroker 4070 Okt 22 22:05 hmip_etrv_window.svg

/opt/iobroker/iobroker-data/files/habpanel/assets/icons/HMIP-eTRV-x.list.json

{ "notice": "HMIP-eTRV-x", "url": "https://raw.githubusercontent.com/Rosi2143/habpanel-widget-HMIP-eTRV-x/master/icons/", "icons": [ "hmip_etrv_thermometer-cold.png "hmip_etrv_thermometer-cold", "hmip_etrv_thermometer-hot.png "hmip_etrv_thermometer-hot", "hmip_etrv_thermometer.png "hmip_etrv_thermometer", "hmip_etrv_thermometer-warm.png "hmip_etrv_thermometer-warm", "hmip_etrv_window-closed.png "hmip_etrv_window-closed", "hmip_etrv_window-open.png "hmip_etrv_window-open", "hmip_etrv_window.png "hmip_etrv_window" ] }

mbr1989 commented 2 years ago

(function() { 'use strict';

angular
    .module('app.services')
    .service('IconService', IconService)
    .directive('iconPicker', IconPicker);

IconService.$inject = ['$http', '$q', '$filter'];
function IconService($http, $q, $filter) {
    this.getIconUrl = getIconUrl;
    this.getIconSets = getIconSets;
    this.getIconSet = getIconSet;
    this.getIcons = getIcons;

    var iconsets = [
        { id: 'freepik-household', name: 'Builtin: Freepik Household', type: 'builtin', colorize: true },
        { id: 'freepik-gadgets', name: 'Builtin: Freepik Gadgets', type: 'builtin', colorize: true },
        { id: 'freepik-housethings', name: 'Builtin: Freepik House Things', type: 'builtin', colorize: true },
        { id: 'smarthome-set', name: 'Builtin: Smart Home Set', type: 'builtin', colorize: true },
        { id: 'eclipse-smarthome-classic', name: 'Eclipse SmartHome Classic', type: 'builtin', colorize: false },
    { id: 'HMIP-eTRV-x', name: 'HMIP-eTRV-x', type: 'builtin', colorize: true }
    ];

    ////////////////

    function getIconUrl(iconset, icon, state) {
        if (iconset === 'custom-icon') {
            return '/icon/' + icon + '?format=svg' + ((state) ? '&state=' + state : '');
        } else if (iconset === 'custom-url') {
            return icon;
        }

        var set = $filter('filter')(iconsets, {id: iconset}, true)[0];
        if (set.type === 'builtin') {
            return 'assets/icons/' + set.id + '/' + icon + '.svg';
        } else {
            return '/icon/' + icon + '?format=svg' + ((state) ? '&state=' + state : '');
        }
    }

    function getIconSets() {
        // TODO: get iconsets from the API if using OH2
        return iconsets;
    }

    function getIconSet(iconset) {
        if (iconset === 'custom-icon' || iconset === 'custom-url') {
            return { colorize: false };
        }
        return $filter('filter')(iconsets, {id: iconset}, true)[0];
    }

    function getIcons(iconset) {
        return $http.get('assets/icons/' + iconset + '.list.json');
    }

}

// TODO: Move this directive elsewhere
IconPicker.$inject = ['IconService', 'TranslationService'];
function IconPicker(IconService, TranslationService) {
    var directive = {
        link: link,
        restrict: 'AE',
        template: 
            // TODO put this template in a HTML file
            '<img ng-if="(iconset === \'custom-icon\' || iconset === \'custom-url\') && iconUrl" width="64px" height="64px" style="float:right; border: 0;" ng-src="{{iconUrl}}" />' +
            '<div class="btn-group" uib-dropdown is-open="status.isopen2">' +
            '<a href id="iconset-picker-btn" class="btn btn-default" uib-dropdown-toggle>' +
            '{{setdropdownlabel}}&nbsp;<span class="caret" /></a>' +
            '<ul class="dropdown-menu" role="menu" aria-labelledby="iconset-picker-btn">' +
            '<li><a ng-click="clearIcon()"><em translate-keep-content translate="iconpicker.none">(none)</em></a></li>' +
            '<li ng-repeat="iconset in iconsets"><a ng-click="selectIconset(iconset.id)">{{iconset.name}}</a></li>' +
            '<li class="divider"></li>' +
            '<li><a ng-click="selectCustomIcon()" translate-keep-content translate="iconpicker.customicon">Custom icon</a></li>' +
            '<li><a ng-click="selectCustomURL()" translate-keep-content translate="iconpicker.customurl">Custom URL</a></li>' +
            '</ul>' +
            '</div><br /><br />' +
            '<div ng-if="iconset && iconset !== \'custom-icon\' && iconset !== \'custom-url\'" class="btn-group" uib-dropdown is-open="status.isopen">' +
            '<a href id="icon-picker-btn" class="btn btn-default" uib-dropdown-toggle>' +
            '<img width="64px" height="64px" ng-src="{{iconUrl}}" />&nbsp;{{icon}}&nbsp;<span class="caret" />' +
            '</a>' +
            '<ul style="width: 420px" class="dropdown-menu" role="menu" aria-labelledby="icon-picker-btn">' +
            '<li class="iconpicker-icon" style="display: inline-flex" ng-repeat="icon in icons"><a style="display:inline" ng-click="selectIcon(icon)"><img width="64px" height="64px" ng-src="{{iconService.getIconUrl(iconset, icon)}}" title="{{icon}}" /></a></li> ' +
            '</ul>' +
            '<br /><br /><small ng-if="notice" style="display:inherit"><a target="_blank" href="{{noticeUrl}}">{{notice}}</a></small><br />' +
            '</div>' +
            '<div ng-show="iconset === \'custom-icon\'"><span translate>Name</span>:&nbsp;<input type="text" ng-model="icon" ng-model-options="{ updateOn: \'blur\' }" uib-tooltip-html="customIconTooltip" tooltip-trigger="focus" tooltip-placement="right" /><br /><br /></div>' +
            '<div ng-show="iconset === \'custom-url\'">URL:&nbsp;<input type="text" ng-model="icon" ng-model-options="{ updateOn: \'blur\' }" /><br /><br /></div>',
        scope: {
            iconset: '=',
            icon: '='
        }
    };
    return directive;

    function link(scope, element, attrs) {
        scope.iconsets = IconService.getIconSets();
        scope.iconService = IconService;

        scope.selectIconset = function (iconset) {
            scope.icons = [];
            scope.icon = undefined;
            scope.iconUrl = '';
            scope.iconset = iconset;
        };

        scope.selectIcon = function (icon) {
            scope.icon = icon;
        };

        scope.selectCustomIcon = function () {
            scope.clearIcon();
            scope.iconset = 'custom-icon';
        }

        scope.selectCustomURL = function () {
            scope.clearIcon();
            scope.iconset = 'custom-url';
        }

        scope.clearIcon = function () {
            scope.icons = [];
            scope.icon = undefined;
            scope.iconUrl = '';
            scope.iconset = undefined;
            scope.noticeUrl = undefined;
            scope.notice = undefined;
        };

        scope.$watch('iconset', function (iconset) {
            if (!iconset) {
                scope.setdropdownlabel = TranslationService.translate('iconpicker.selecticonset', 'Select icon set');
                return;
            } else if (iconset === 'custom-icon') {
                scope.setdropdownlabel = TranslationService.translate('iconpicker.customicon', 'Custom icon');
                return;
            } else if (iconset === 'custom-url') {
                scope.setdropdownlabel = TranslationService.translate('iconpicker.customurl', 'Custom URL');
                return;
            }
            var set = IconService.getIconSet(iconset);
            scope.setdropdownlabel = set.name;

            IconService.getIcons(set.id).then(function (res) {
                scope.icons = res.data.icons;
                scope.notice = res.data.notice;
                scope.noticeUrl = res.data.url;
            })
        });

        scope.$watch('icon', function (set) {
            scope.iconUrl = '';
            if (!scope.iconset || !scope.icon) return;
            scope.iconUrl = IconService.getIconUrl(scope.iconset, scope.icon);
        });

        scope.customIconTooltip = TranslationService.translate('iconpicker.customicontooltip', 'Type the name of a <a href="http://docs.openhab.org/configuration/items.html#icons" target="_blank">registered icon</a> (only SVG supported)<br />Examples: <em>switch</em>, <em>temperature</em> or an additional icon in your configuration\'s <code>icons/classic</code> folder');

    }
}

})();

mbr1989 commented 2 years ago
Widget for HmIP-eTRV-2
{{ngModel.name}}
TempAct
TempAct
TempAct
Window
Humidity
TempAct
TempAct
TempAct
Window
{{itemState(config.genericname+'_TempAct')}}°C
{{itemState(config.genericname+'_WindowState')}}
{{itemState(config.genericname+'_Humidity')}}%
{{itemState(config.genericname+'_TempAct')}}°C
{{itemState(config.genericname+'_WindowState')}}
battery low
new firmware
partymode
Boost time {{itemState(config.genericname+'_BoostTime')}}sec