{
    "dashboards": [
        {
            "id": "Media",
            "name": "Media",
            "widgets": [
                {
                    "name": "New Widget",
                    "sizeX": 3,
                    "sizeY": 3,
                    "type": "template",
                    "customwidget": "direction-buttons",
                    "row": 3,
                    "col": 0,
                    "config": {
                        "center_button": "SmartTV_KeyCode",
                        "direction_button": "SmartTV_KeyCode",
                        "center_label": "Enter",
                        "center_command": "KEY_ENTER",
                        "up_command": "KEY_UP",
                        "down_command": "KEY_DOWN",
                        "left_command": "KEY_LEFT",
                        "right_command": "KEY_RIGHT",
                        "btn_color": "#FFFFFF"
                    }
                },
                {
                    "name": "Source",
                    "sizeX": 2,
                    "sizeY": 3,
                    "item": "SmartTV_SourceName",
                    "type": "selection",
                    "row": 3,
                    "col": 3,
                    "font_size": 30,
                    "iconset": "eclipse-smarthome-classic",
                    "icon": "video",
                    "icon_size": 32,
                    "choices_columns": 3,
                    "choices_source": "csv",
                    "choices": "HDMI1/DVI=HDMI1,HDMI2=HDMI2,HDMI3=HDMI3,HDMI-CEC=HDMI-CEC",
                    "keep_open": true
                },
                {
                    "name": "Television Power",
                    "sizeX": 1,
                    "sizeY": 2,
                    "item": "SmartTV_Power",
                    "type": "switch",
                    "row": 1,
                    "col": 0
                },
                {
                    "name": "Television",
                    "sizeX": 9,
                    "sizeY": 1,
                    "item": null,
                    "type": "label",
                    "row": 0,
                    "col": 0,
                    "font_size": "50"
                },
                {
                    "name": "Mute",
                    "sizeX": 1,
                    "sizeY": 1,
                    "item": "SmartTV_Mute",
                    "type": "switch",
                    "row": 1,
                    "col": 1,
                    "iconset": "eclipse-smarthome-classic",
                    "icon": "soundvolume_mute",
                    "icon_size": 32
                },
                {
                    "name": "Volume",
                    "sizeX": 2,
                    "sizeY": 2,
                    "item": "SmartTV_Volume",
                    "type": "knob",
                    "row": 1,
                    "col": 3,
                    "floor": 0,
                    "ceil": 100,
                    "step": 1,
                    "skinType": "tron",
                    "ranges": [],
                    "startAngle": null,
                    "endAngle": null,
                    "rangesEnabled": false,
                    "rangesTextColorMatching": false,
                    "scaleEnabled": true
                },
                {
                    "name": "Eject",
                    "sizeX": 1,
                    "sizeY": 1,
                    "item": "BluRayDiscPlayer_Primary_IRCCCommand",
                    "type": "button",
                    "row": 5,
                    "col": 7,
                    "command": "Eject",
                    "iconset": "custom-icon",
                    "icon": "eject",
                    "icon_size": "32"
                },
                {
                    "name": "New Widget",
                    "sizeX": 4,
                    "sizeY": 3,
                    "type": "template",
                    "customwidget": "MusicControl",
                    "row": 1,
                    "col": 5,
                    "config": {
                        "action_item": "SmartTV_KeyCode",
                        "status_item": "SmartTV_KeyCode",
                        "volume": "SmartTV_Volume",
                        "next_command": "KEY_FF",
                        "prev_command": "KEY_REWIND",
                        "step": 1,
                        "my_name": "Television"
                    }
                },
                {
                    "name": "Subtitle",
                    "sizeX": 1,
                    "sizeY": 1,
                    "item": "BluRayDiscPlayer_Primary_IRCCCommand",
                    "type": "button",
                    "row": 5,
                    "col": 8,
                    "command": "Subtitle",
                    "iconset": "custom-icon",
                    "icon": "cc",
                    "icon_size": 32
                },
                {
                    "name": "Blu Ray",
                    "sizeX": 2,
                    "sizeY": 1,
                    "item": "BluRayDiscPlayer_Primary_Power",
                    "type": "switch",
                    "row": 5,
                    "col": 5
                },
                {
                    "name": "Blu-Ray",
                    "sizeX": 4,
                    "sizeY": 1,
                    "item": null,
                    "type": "label",
                    "row": 4,
                    "col": 5,
                    "font_size": "40"
                },
                {
                    "name": "Exit",
                    "sizeX": 1,
                    "sizeY": 1,
                    "item": "SmartTV_KeyCode",
                    "type": "button",
                    "command": "KEY_EXIT",
                    "iconset": "custom-icon",
                    "icon": "exit",
                    "icon_size": "32",
                    "row": 2,
                    "col": 1
                },
                {
                    "name": "Smarthub",
                    "sizeX": 1,
                    "sizeY": 1,
                    "item": "SmartTV_KeyCode",
                    "type": "button",
                    "command": "KEY_W_LINK",
                    "iconset": "custom-icon",
                    "icon": "smarthub",
                    "icon_size": "32",
                    "row": 2,
                    "col": 2
                },
                {
                    "name": "Menu",
                    "sizeX": 1,
                    "sizeY": 1,
                    "item": "SmartTV_KeyCode",
                    "type": "button",
                    "command": "KEY_MENU",
                    "iconset": "custom-icon",
                    "icon": "menu",
                    "icon_size": "32",
                    "row": 1,
                    "col": 2
                },
                {
                    "name": "New Widget",
                    "sizeX": 3,
                    "sizeY": 6,
                    "type": "template",
                    "customwidget": "Chromecast",
                    "row": 0,
                    "col": 9,
                    "config": {
                        "widget_name": "Chromecast",
                        "font": "24px",
                        "default_image": "/static/openhab-logo-square.png",
                        "backdrop_image": "/static/openhab-logo-square.png",
                        "title": "LivingRoomHOMeSg11_Title",
                        "seriesTitle": "LivingRoomHOMeSg11_SeriesTitle",
                        "image_url": "LivingRoomHOMeSg11_ImageURL",
                        "current_time": "LivingRoomHOMeSg11_CurrentTime",
                        "duration": "LivingRoomHOMeSg11_Duration",
                        "control": "LivingRoomHOMeSg11_Control",
                        "playURI": "LivingRoomHOMeSg11_PlayURI",
                        "volume": "LivingRoomHOMeSg11_Volume"
                    }
                }
            ],
            "row": 0,
            "col": 0,
            "tile": {},
            "widget_margin": null,
            "mobile_mode_enabled": false,
            "$$hashKey": "object:19"
        },
        {
            "id": "Climate Control",
            "name": "Climate Control",
            "widgets": [
                {
                    "name": "Living Room Temperature",
                    "sizeX": 2,
                    "sizeY": 2,
                    "item": "LRTemperature",
                    "type": "dummy",
                    "row": 0,
                    "col": 0,
                    "font_size": "32",
                    "unit": "",
                    "iconset": "eclipse-smarthome-classic",
                    "icon": "temperature",
                    "icon_size": 32,
                    "useserverformat": true
                },
                {
                    "name": "Living Room Temperature",
                    "sizeX": 2,
                    "sizeY": 2,
                    "item": "LRHumidity",
                    "type": "dummy",
                    "font_size": "32",
                    "unit": "",
                    "iconset": "eclipse-smarthome-classic",
                    "icon": "humidity",
                    "icon_size": 32,
                    "row": 0,
                    "col": 2,
                    "useserverformat": true
                },
                {
                    "name": "Living Room Temperature",
                    "sizeX": 4,
                    "sizeY": 2,
                    "item": "LRHumidity",
                    "type": "chart",
                    "row": 4,
                    "col": 0,
                    "charttype": "interactive",
                    "service": "influxdb",
                    "period": "D",
                    "axis": {
                        "y": {
                            "min": 1,
                            "max": 100,
                            "ticks": 5
                        }
                    },
                    "series": [
                        {
                            "axis": "y",
                            "display_line": true,
                            "display_area": true,
                            "item": "LRTemperature",
                            "name": "Living Room Temperature",
                            "color": "#FF0000"
                        }
                    ],
                    "liveUpdates": {}
                },
                {
                    "name": "Living Room Humidity",
                    "sizeX": 4,
                    "sizeY": 2,
                    "item": "LRHumidity",
                    "type": "chart",
                    "charttype": "interactive",
                    "service": "influxdb",
                    "period": "D",
                    "axis": {
                        "y": {
                            "min": 1,
                            "max": 100,
                            "ticks": 5
                        }
                    },
                    "series": [
                        {
                            "axis": "y",
                            "display_line": true,
                            "display_area": true,
                            "item": "LRHumidity",
                            "name": "Living Room Humidity",
                            "color": "#33CCFF"
                        }
                    ],
                    "liveUpdates": {},
                    "row": 2,
                    "col": 0
                },
                {
                    "name": "Cool",
                    "sizeX": 2,
                    "sizeY": 1,
                    "item": "ACMode",
                    "type": "button",
                    "row": 1,
                    "col": 6,
                    "command": "COOL",
                    "background_active": "#3399FF"
                },
                {
                    "name": "Air Conditoner",
                    "sizeX": 2,
                    "sizeY": 1,
                    "item": "ACPower",
                    "type": "switch",
                    "row": 1,
                    "col": 4,
                    "iconset": "custom-icon",
                    "icon": "ac",
                    "icon_size": "45"
                },
                {
                    "name": "Fan",
                    "sizeX": 2,
                    "sizeY": 1,
                    "item": "ACMode",
                    "type": "button",
                    "command": "FAN",
                    "background_active": "#FF9900",
                    "row": 2,
                    "col": 6
                },
                {
                    "name": "Sleep",
                    "sizeX": 2,
                    "sizeY": 1,
                    "item": "ACSleep",
                    "type": "switch",
                    "row": 2,
                    "col": 4,
                    "iconset": "eclipse-smarthome-classic",
                    "icon": "moon",
                    "icon_size": 32
                },
                {
                    "name": "Speed",
                    "sizeX": 2,
                    "sizeY": 2,
                    "item": "ACSpeed",
                    "type": "knob",
                    "row": 3,
                    "col": 4,
                    "floor": 1,
                    "ceil": 3,
                    "step": 1,
                    "ranges": [],
                    "subTextEnabled": true,
                    "startAngle": null,
                    "endAngle": null
                },
                {
                    "name": "Temperature",
                    "sizeX": 2,
                    "sizeY": 2,
                    "item": "ACTemp",
                    "type": "knob",
                    "row": 3,
                    "col": 6,
                    "floor": 60,
                    "ceil": 85,
                    "step": 1,
                    "unit": "˚F",
                    "ranges": [],
                    "subTextEnabled": true,
                    "barWidth": null,
                    "trackWidth": null,
                    "scaleEnabled": false,
                    "scaleType": "lines",
                    "skinType": "simple"
                },
                {
                    "name": "Air Conditoner",
                    "sizeX": 4,
                    "sizeY": 1,
                    "item": null,
                    "type": "label",
                    "row": 0,
                    "col": 4,
                    "font_size": "25"
                }
            ],
            "row": 1,
            "col": 0,
            "tile": {},
            "drawer": {
                "use_custom_widget": true,
                "custom_widget": "side widget",
                "custom_widget_config": {}
            },
            "mobile_mode_enabled": true,
            "mobile_breakpoint": 1024,
            "$$hashKey": "object:20"
        },
        {
            "id": "Lighting",
            "name": "Lighting",
            "widgets": [
                {
                    "name": "Television Lamp",
                    "sizeX": 2,
                    "sizeY": 2,
                    "item": "TVLAMP",
                    "type": "switch",
                    "row": 0,
                    "col": 0,
                    "iconset": "custom-icon",
                    "icon": "wemo.svg",
                    "icon_size": "128"
                },
                {
                    "name": "Desk Lamp",
                    "sizeX": 2,
                    "sizeY": 2,
                    "item": "DeskLamp_Switch",
                    "type": "switch",
                    "iconset": "custom-icon",
                    "icon": "wemo.svg",
                    "icon_size": "128",
                    "row": 2,
                    "col": 0
                },
                {
                    "name": "New Widget",
                    "sizeX": 4,
                    "sizeY": 4,
                    "type": "template",
                    "customwidget": "color-light",
                    "row": 0,
                    "col": 2,
                    "config": {
                        "name": "LIFX",
                        "brightness": "LIFXColorLight_Color",
                        "color": "LIFXColorLight_Color",
                        "colortemp_item": "LIFXColorLight_Temperature",
                        "colortemp_show": true
                    }
                }
            ],
            "row": 2,
            "col": 0,
            "$$hashKey": "object:21"
        },
        {
            "id": "Security",
            "name": "Security",
            "widgets": [
                {
                    "name": "Motion",
                    "sizeX": 4,
                    "sizeY": 4,
                    "item": "Motion",
                    "type": "dummy",
                    "row": 0,
                    "col": 0
                },
                {
                    "name": "",
                    "sizeX": 8,
                    "sizeY": 1,
                    "item": null,
                    "type": "timeline",
                    "row": 3,
                    "col": 4,
                    "service": "influxdb",
                    "period": "3D",
                    "colorMaps": [
                        {
                            "state": "OPEN",
                            "color": "#FF0000"
                        },
                        {
                            "state": "CLOSED",
                            "color": "#66FF66"
                        }
                    ],
                    "series": [
                        {
                            "item": "Motion",
                            "name": "Motion"
                        }
                    ]
                },
                {
                    "name": "New Widget",
                    "sizeX": 5,
                    "sizeY": 3,
                    "item": null,
                    "type": "template",
                    "row": 0,
                    "col": 4,
                    "template": "<div style=\"height: 610px\">\n  <div uib-carousel active=\"0\" no-wrap=\"false\">\n    <div uib-slide index=\"0\">\n      <img src=\"//192.168.20.94/html/cam_pic_new.php?time=1521661009278&pDelay=40000\" style=\"margin:auto;\"/>\n    </div>\n    <div uib-slide index=\"1\">\n      <img src=\"//192.168.20.94:8081\" style=\"margin:auto;\"/>\n    </div>\n  </div>\n</div>"
                }
            ],
            "row": 3,
            "col": 0,
            "$$hashKey": "object:22"
        },
        {
            "id": "Home",
            "name": "Home",
            "widgets": [],
            "row": 4,
            "col": 0,
            "tile": {},
            "$$hashKey": "object:23"
        },
        {
            "id": "Power",
            "name": "Power",
            "widgets": [
                {
                    "name": "Washing Machine",
                    "sizeX": 4,
                    "sizeY": 1,
                    "item": "WashingMachineUse",
                    "type": "dummy",
                    "row": 0,
                    "col": 0,
                    "font_size": ""
                },
                {
                    "name": "New Widget",
                    "sizeX": 4,
                    "sizeY": 3,
                    "item": null,
                    "type": "chart",
                    "row": 1,
                    "col": 0,
                    "charttype": "interactive",
                    "service": "influxdb",
                    "period": "8h",
                    "axis": {
                        "y": {}
                    },
                    "series": [
                        {
                            "axis": "y",
                            "display_line": true,
                            "display_area": true,
                            "item": "WashingMachine_Power"
                        }
                    ],
                    "liveUpdates": {}
                },
                {
                    "name": "New Widget",
                    "sizeX": 4,
                    "sizeY": 4,
                    "item": "TotalPowerDay",
                    "type": "dummy",
                    "row": 0,
                    "col": 4
                }
            ],
            "row": 5,
            "col": 0,
            "$$hashKey": "object:24"
        }
    ],
    "menucolumns": 1,
    "settings": {
        "theme": "translucent",
        "additional_stylesheet_url": "/static/progress.css",
        "show_header_clock": true,
        "header_clock_format": "EEEE, MMMM d h:mm:ss a",
        "speech_synthesis_item": "HABpanelvoice",
        "floating_speech": false,
        "hide_drawer_footer": false,
        "background_image": "/static/bg.jpg",
        "speech_synthesis_voice": "Alex"
    },
    "customwidgets": {
        "color-light": {
            "name": "Color Light",
            "author": "Kuba Wolanin",
            "description": "Combined color, brightness and switch widgets.",
            "template": "<div ng-init='picker = {\n    \"name\": config.name,\n    \"item\": config.color,\n    \"style\": \"aCKolor\"\n};slider = {\n    \"name\": \"\",\n    \"item\": config.brightness,\n    \"floor\": 0,\n    \"ceil\": 100,\n    \"step\": 1,\n    \"unit\": \"\",\n    \"vertical\": false\n};slider2 = {\n    \"name\": \"\",\n    \"item\": config.colortemp_item,\n    \"floor\": 0,\n    \"ceil\": 100,\n    \"step\": 1,\n    \"unit\": \"\",\n    \"vertical\": false\n};switch = {\n    \"name\": \"\",\n    \"item\": config.brightness,\n    \"hidelabel\": true,\n    \"hideicon\": false,\n    \"hideonoff\": true\n}'>\n    <style>\n    .cl-switch .switch {\n      position: absolute;\n      top: 0;\n      width: 100%;\n\t\t}\n    </style>\n    <widget-colorpicker ng-model=\"picker\"></widget-colorpicker>\n    <widget-slider ng-model=\"slider\"></widget-slider>\n  \t<div ng-show=\"config.colortemp_show\"><widget-slider ng-model=\"slider2\"></widget-slider></div>\n</div>",
            "settings": [
                {
                    "type": "string",
                    "id": "name",
                    "label": "Name",
                    "default": "Color Light",
                    "description": "Title of the widget"
                },
                {
                    "type": "item",
                    "id": "brightness",
                    "label": "Brightness Item",
                    "description": "Dimmer item for light brightness"
                },
                {
                    "type": "item",
                    "id": "color",
                    "label": "Color Item",
                    "description": "Color item"
                },
                {
                    "type": "checkbox",
                    "id": "colortemp_show",
                    "label": "Show color temperature slider",
                    "description": "Show color temperature slider",
                    "default": false
                },
                {
                    "type": "item",
                    "id": "colortemp_item",
                    "label": "Color temperature item",
                    "description": "Color temperature item"
                }
            ],
            "source_url": "https://raw.githubusercontent.com/kubawolanin/habpanel-widgets/master/color-light.widget.json",
            "readme_url": "https://github.com/kubawolanin/habpanel-widgets"
        },
        "dashboard-link": {
            "name": "Dashboard Link",
            "author": "Kuba Wolanin",
            "description": "Clicking on widgets surface will move you to a given dashboard",
            "settings": [
                {
                    "type": "string",
                    "id": "dashboard_name",
                    "label": "Dashboard name"
                },
                {
                    "type": "item",
                    "id": "habpanel_item",
                    "label": "HABPanel Item"
                },
                {
                    "type": "string",
                    "id": "font_size",
                    "label": "Font size"
                },
                {
                    "type": "string",
                    "id": "label",
                    "label": "Label"
                }
            ],
            "template": "<style>\n  .dashboard-link {\n    background: transparent;\n    border: 0;\n    width: 100%;\n    padding: 25px 0;\n    font-size: {{config.font_size}};\n    outline: none;\n}\n</style>\n<button class=\"dashboard-link\" \n        ng-click=\"sendCmd(config.habpanel_item, config.dashboard_name)\">\n  {{config.label}}\n</button>",
            "source_url": "https://raw.githubusercontent.com/kubawolanin/habpanel-widgets/master/dashboard-link.widget.json",
            "readme_url": "https://github.com/kubawolanin/habpanel-widgets"
        },
        "direction-buttons": {
            "template": "<style>\nnav.directions {\n  --bg-color: transparent;\n  --btn-color: {{config.btn_color || '#fff'}};\n  --btn-active: #ccc;\n  --text-color: #222;\n  --size: {{ (ngModel.sizeY > ngModel.sizeX) ? (ngModel.sizeX * 65) : (ngModel.sizeY * 65)  }}px\n}\n\nnav.directions {\n  width: var(--size);\n  height: var(--size);\n  background: var(--bg-color);\n  border-radius: 50%;\n  padding: 20px;\n  -webkit-transform: rotate(45deg);\n  -moz-transform: rotate(45deg);\n  transform: rotate(45deg);\n  box-shadow: inset 12px 0 12px -6px var(--btn-color), inset 0 0 0 12px var(--btn-color);\n  box-sizing: border-box;\n  position: relative;\n  margin: 10px auto;\n}\n\nnav.directions button {\n  background: var(--btn-color);\n  color: var(--text-color);\n  text-decoration: none;\n  outline: none;\n  display: block;\n  border: none;\n  -webkit-transition: .1s background, .2s box-shadow;\n}\n  \nnav.directions button:active {\n  background: var(--btn-active);\n  box-shadow: inset 2px 4px rgba(0, 0, 0, 0.2);\n}\n\nnav.directions .center-button { \n  height: 38%;\n  width: 38%;\n  position: absolute;\n  top: 31%;\n  left: 31%;\n  border-radius: 50%;\n  -webkit-transform: rotate(-45deg);\n  -moz-transform: rotate(-45deg);\n  transform: rotate(-45deg);\n  font-size: 1.250em;\n  font-weight: 500;\n  text-transform: uppercase;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .33), inset -2px -4px rgba(0, 0, 0, 0.2);\n}\n\nnav.directions .center-button:active {\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .33), inset 2px 4px rgba(0, 0, 0, 0.2);\n}\n\nnav.directions .button {\n  width: 46%;\n  height: 46%;\n  margin: 2%;\n  position: relative;\n  float: left;\n}\n\nnav.directions .button::after {\n  content: \"\";\n  width: 0;\n  position: absolute;\n  border-radius: initial;\n}\n\nnav.directions button.top {\n  border-radius: 100% 0 0 0;\n}\n\nnav.directions button.top::after {\n  bottom: 0;\n  right: 0;\n}\n\nnav.directions button.right {\n  border-radius: 0 100% 0 0;\n}\n\nnav.directions button.right::after {\n  bottom: 0;\n  left: 0;\n}\n\nnav.directions button.left {\n  border-radius: 0 0 0 100%;\n}\n\nnav.directions button.left::after {\n  top: 0;\n  right: 0;\n}\n\nnav.directions button.bottom {\n  border-radius: 0 0 100% 0;\n}\n\nnav.directions button.bottom::after {\n  top: 0;\n  left: 0;\n  box-shadow: inset -2px -3px 2px -2px rgba(0, 0, 0, 0.4), -10px -10px 0 10px var(--bg-color);\n}\n\nnav.directions i {\n  -webkit-transform: rotate(-45deg);\n  -moz-transform: rotate(-45deg);\n  transform: rotate(-45deg);\n  position: absolute;\n  font-size: calc(var(--size)/10);\n  top: 36%;\n  left: 39%;\n  text-shadow: 1px 1px 4px var(--btn-color), 0px 0px 0px rgba(0, 0, 0, 0.5);\n  color: rgba(0, 0, 0, 0.15);\n}\n\nnav.directions .button:active i {\n    color: var(--text-color);\n    text-shadow: none;\n}\n\nnav.directions .top i {\n  top: 35%;\n  left: 41%;\n}\n\nnav.directions .left i {\n  top: 41%;\n  left: 35%;\n}\n\nnav.directions .right i {\n  top: 35%;\n  left: 41%;\n}\n\nnav.directions .bottom i {\n  top: 39%;\n  left: 42%;\n}\n</style>\n<nav class=\"directions\">\n  <button class=\"button top\" ng-click=\"sendCmd(config.direction_button, config.up_command)\"><i class=\"glyphicon glyphicon-chevron-up\"></i></button>\n  <button class=\"button right\" ng-click=\"sendCmd(config.direction_button, config.right_command)\"><i class=\"glyphicon glyphicon-chevron-right\"></i></button>\n  <button class=\"button left\" ng-click=\"sendCmd(config.direction_button, config.left_command)\"><i class=\"glyphicon glyphicon-chevron-left\"></i></button>\n  <button class=\"button bottom\" ng-click=\"sendCmd(config.direction_button, config.down_command)\"><i class=\"glyphicon glyphicon-chevron-down\"></i></button>\n  <button class=\"center-button\" ng-click=\"sendCmd(config.center_button, config.center_command)\">{{config.center_label}}</button>\n</nav>\n  ",
            "settings": [
                {
                    "type": "item",
                    "id": "center_button",
                    "label": "Center button"
                },
                {
                    "type": "string",
                    "id": "center_label",
                    "label": "Center button label"
                },
                {
                    "type": "string",
                    "id": "center_command",
                    "label": "Center command"
                },
                {
                    "type": "item",
                    "id": "direction_button",
                    "label": "Directions"
                },
                {
                    "type": "string",
                    "id": "up_command",
                    "label": "Up command"
                },
                {
                    "type": "string",
                    "id": "down_command",
                    "label": "Down command"
                },
                {
                    "type": "string",
                    "id": "left_command",
                    "label": "Left command"
                },
                {
                    "type": "string",
                    "id": "right_command",
                    "label": "Right command"
                },
                {
                    "type": "color",
                    "id": "btn_color",
                    "label": "Button color"
                }
            ],
            "name": "Direction buttons",
            "author": "Kuba Wolanin",
            "description": "Simple remote control-like direction buttons",
            "source_url": "https://raw.githubusercontent.com/kubawolanin/habpanel-widgets/master/direction-buttons.widget.json",
            "readme_url": "https://github.com/kubawolanin/habpanel-widgets"
        },
        "progress-3d": {
            "name": "Progress bar 3D",
            "author": "Kuba Wolanin",
            "description": "Based on Codrops Shaded Progress Bar",
            "template": "<!--\nNote:\nYou need to place `progress.css` file from\nhttps://github.com/kubawolanin/habpanel-widgets\nto your <openhab-config>/html/ folder and\npoint to http://youropenhab:8080/static/progress.css\nin HABPanel settings to make it work.\n-->\n\n<h4 style=\"margin: 0\">{{ngModel.name}}</h4>\n\n<div class=\"progress-factor flexy-item\">\n    <div class=\"progress-bar\">\n        <div class=\"bar has-rotation has-colors red {{config.type}}-gradient\" role=\"progressbar\" aria-valuenow=\"{{itemValue(config.item)}}\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n            <div class=\"ps-tooltip white\"></div>\n            <div class=\"bar-face face-position roof percentage\"></div>\n            <div class=\"bar-face face-position back percentage\"></div>\n            <div class=\"bar-face face-position floor percentage volume-lights\"></div>\n            <div class=\"bar-face face-position left\"></div>\n            <div class=\"bar-face face-position right\"></div>\n            <div class=\"bar-face face-position front percentage volume-lights shine\"></div>\n        </div>\n    </div>\n</div>",
            "settings": [
                {
                    "type": "item",
                    "id": "item",
                    "label": "Number Item",
                    "description": "Number item"
                },
                {
                    "type": "choice",
                    "id": "type",
                    "label": "Bar type",
                    "default": "heat",
                    "choices": "default,heat"
                }
            ],
            "source_url": "https://raw.githubusercontent.com/kubawolanin/habpanel-widgets/master/progress-3d.widget.json",
            "readme_url": "https://github.com/kubawolanin/habpanel-widgets"
        },
        "weather-underground": {
            "template": "<!-- Download: https://github.com/manifestinteractive/weather-underground-icons -->\n<!-- And place icons somewhere in your /conf/html folder structure -->\n<div ng-init=\"ServerPath='/static/weather-underground-icons/dist'; IconSet='white'\">\n</div>\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"{{ServerPath}}/dist/wu-icons-style.min.css\">\n \n<style>\n@media (min-width: 992px) {\n    .col-md-border:not(:last-child) {\n\t\t\tborder-right: 1px solid #d7d7d7;\n    }\n    .col-md-border + .col-md-border {\n\t\t\tborder-left: 1px solid #d7d7d7;\n\t\t\tmargin-left: -1px;\n    }\n  \t.day:first-letter {\n    \ttext-transform: uppercase;\n\t\t}\n  \t.current-icon {\n\t\t\twidth: 14em !important;\n  \t\theight: 14em !important;\n  \t\tmargin-top: -1em;\n\t\t}\n  \t.condition {\n  \t\theight: 2em;\n \t\t}\n}\n</style>\n\n<div id=\"container\">\n  <div class=\"row\">\n  \t<div class=\"col-md-9\">\n      <i class=\"wu wu-{{IconSet}} wu-256 wu-{{itemValue('Weather_ConditionId')}} current-icon pull-right\"></i>\n      <h2 class=\"text-left\">{{itemValue('Weather_Condition0')}}</h2>\n    </div>\n    <div class=\"col-md-3 text-right\">\n      <h2 style=\"margin-bottom:1em;\">{{'%.1f' | sprintf:itemValue('Weather_Temperature')}} °C</h2>\n      <h5><img style=\"height:16px;\" src=\"{{ServerPath}}/images/humidity.png\"/> {{itemValue('Weather_Humidity')}} %</h5>\n      <h5><img style=\"height:16px;\" src=\"{{ServerPath}}/images/wind.png\"/> {{itemValue('Weather_Wind_Speed')}} km/h</h5>\n      <h5><img style=\"height:16px;\" src=\"{{ServerPath}}/images/feel.png\"/> {{itemValue('Weather_Temperature_Feel')}} °C</h5>\n      <h5>{{itemValue('Weather_ObservationTime') | date: 'H:MM'}}</h5>\n   \t</div>\n  </div>\n\t<div class=\"row\" style=\"margin-top: 1em;\">\n\t\t<div class=\"col-md-3 col-md-border\">\n      <h4 class=\"day\">Vandaag</h4>\n      <i class=\"wu wu-{{IconSet}} wu-64 wu-{{itemValue('Weather_ConditionId0')}}\"></i>\n      <h5 class=\"condition\">{{itemValue('Weather_Condition0')}}</h5>\n      <h4><b>{{'%.0f' | sprintf:itemValue('Weather_Temp_Max0')}}</b> / {{'%.0f' | sprintf:itemValue('Weather_Temp_Min0')}} °C</h4>\n    </div>\n    <div class=\"col-md-3 col-md-border\">\n      <h4 class=\"day\">{{itemValue('Weather_Forecast_Time1') | date:'EEEE'}}</h4>\n      <i class=\"wu wu-{{IconSet}} wu-64 wu-{{itemValue('Weather_ConditionId1')| lowercase }}\"></i>\n      <h5 class=\"condition\">{{itemValue('Weather_Condition1')}}</h5>\n\t\t\t<h4><b>{{'%.0f' | sprintf:itemValue('Weather_Temp_Max1')}}</b> / {{'%.0f' | sprintf:itemValue('Weather_Temp_Min1')}} °C</h4>\n    </div>\n    <div class=\"col-md-3 col-md-border\">\n      <h4 class=\"day\">{{itemValue('Weather_Forecast_Time2') | date:'EEEE'}}</h4>\n      <i class=\"wu wu-{{IconSet}} wu-64 wu-{{itemValue('Weather_ConditionId2')| lowercase }}\"></i>\n      <h5 class=\"condition\">{{itemValue('Weather_Condition2')}}</h5>\n      <h4><b>{{'%.0f' | sprintf:itemValue('Weather_Temp_Max2')}}</b> / {{'%.0f' | sprintf:itemValue('Weather_Temp_Min2')}} °C</h4>\n    </div>\n    <div class=\"col-md-3 col-md-border\">\n      <h4 class=\"day\">{{itemValue('Weather_Forecast_Time3') | date:'EEEE'}}</h4>\n      <i class=\"wu wu-{{IconSet}} wu-64 wu-{{itemValue('Weather_ConditionId3')| lowercase }}\"></i>\n      <h5 class=\"condition\">{{itemValue('Weather_Condition3')}}</h5>\n      <h4><b>{{'%.0f' | sprintf:itemValue('Weather_Temp_Max3')}}</b> / {{'%.0f' | sprintf:itemValue('Weather_Temp_Min3')}} °C</h4>\n    </div>\n\t</div>\n</div>\n",
            "name": "Weather Underground",
            "author": "Bastiaan van Haastrecht",
            "description": "Local Weather, use with Weather Underground binding OH2-SNAPSHOT 2.3.0 from build 1212 - https://github.com/BasvanH",
            "source_url": "https://raw.githubusercontent.com/BasvanH/habpanel-widget-weatherunderground/master/weather-underground.widget.json",
            "readme_url": "https://github.com/BasvanH/habpanel-widget-weatherunderground"
        },
        "MusicControl": {
            "template": "<style>\n.btn-pad{\n  padding:20px 32px;\n  }\n  .btn-radius{\n  padding:40px 40px;\n  border-radius: 50%;!important\n  background-color: #d23f31;\n  height: 56px;\n  width: 56px;\n  box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);\n  box-sizing: content-box;\n  margin-left:-13px;\n  position: relative;\n  z-index:1000;\n  cursor:pointer;\n  }\n  .btn-red{\n  background-color:red;\n  }\n  .glyphicon-text{\n  \tfont-size:xx-large;\n  \tpadding: 10px 0 0 5px;\n  }\n  .btn-lf{\n  position: relative;\n  top: -6px;\n  background-color:#fff;\n  box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);\n  color:#000;\n  border-top-left-radius:50%;\n  border-bottom-left-radius:50%;\n  cursor:pointer;\n  }\n  .btn-lf:hover{\n  background-color:#eaeaea;\n  color:#fff;\n  }\n  .btn-rt{\n  position: relative;\n  top: -6px;\n  margin-left:-13px;\n  background-color:#fff;\n  box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);\n  color:#000;\n  border-top-right-radius:50%;\n  border-bottom-right-radius:50%;\n  cursor:pointer;\n  }\n  .btn-rt:hover{\n  background-color:#eaeaea;\n  color:#fff;\n  }\n  .title-text{\n  margin-left: -90px;\n  display:block;\n  }\n  \n  .div-slider{\n  width:280px;\n  margin:0 auto;\n  }\n</style>\n\n<div>\n  <label class=\"title-text\">{{config.my_name}}</label>\n  <div class=\"btn-group\">\n    <label class=\"btn-pad btn-lf\"\n           ng-click=\"sendCmd(config.action_item,(config.prev_command))\"><i class=\"glyphicon glyphicon-step-backward\"></i></label>\n  \t<label class=\"btn-radius btn-danger\" ng-if=\"itemValue(config.status_item) !='PLAY'\"\n           ng-click=\"sendCmd(config.action_item,'PLAY')\"><i class=\"glyphicon glyphicon-play glyphicon-text\"></i></label>\n    <label class=\"btn-radius btn-warning\" ng-if=\"itemValue(config.status_item) =='PLAY'\"\n           ng-click=\"sendCmd(config.action_item,'PAUSE')\"><i class=\"glyphicon glyphicon-pause glyphicon-text\"></i></label>\n    <label class=\"btn-pad btn-rt\"\n           ng-click=\"sendCmd(config.action_item,(config.next_command))\"><i class=\"glyphicon glyphicon-step-forward\"></i></label>\n  </div>\n  <div class=\"div-slider\">\n<div ng-init='model={\"item\": (config.volume), \"floor\": 0, \"ceil\": 100, \"step\":(config.step)}'>\n  <widget-slider ng-model=\"model\" />\n \n</div>\n  </div>\n</div>",
            "name": "Music Control",
            "author": "Mike Murphy",
            "description": "Music Control Player",
            "settings": [
                {
                    "type": "item",
                    "id": "action_item",
                    "label": "Send action to item"
                },
                {
                    "type": "item",
                    "id": "status_item",
                    "label": "Get item status"
                },
                {
                    "type": "string",
                    "id": "my_name",
                    "label": "Speaker Location/Name"
                },
                {
                    "type": "item",
                    "id": "volume",
                    "label": "Volume Item"
                },
                {
                    "type": "number",
                    "id": "step",
                    "label": "Volume Increment"
                },
                {
                    "type": "string",
                    "id": "next_command",
                    "label": "Next Command Text"
                },
                {
                    "type": "string",
                    "id": "prev_command",
                    "label": "Previous Command Text"
                }
            ],
            "readme_url": "https://community.openhab.org/t/20153"
        },
        "informational-header": {
            "template": "<style>\n\t.glow {\n    /* \n    Animation inspired by Jason Jones \n    https://github.com/jmsjones/habpanel-widgets/blob/master/attention-with-button.widget.json) \n    */\n\n  animation-name: glow;\n    animation-duration: 3s;\n    animation-iteration-count: infinite;\n  }\n  @keyframes glow {\n    50%  {background-color: black; border-color: transparent; color: white;}\n\t}\n</style>\n<h2>{{ngModel.name}}\n  <div class=\"pull-right\" style=\"margin-left: 0.25em; display: inline-flex;\">\n      <div ng-repeat=\"notification in itemsInGroup(config.notifications_group_name)\"\n         ng-if=\"itemValue(notification.name) == config.notification_item_condition\"\n         ng-click=\"sendCmd(notification.name, config.send_on_click_command)\"\n         style=\"margin: inherit;\"\n         class=\"btn {{config.additional_classes_btn}}\"\n         ng-class=\"notification.tags\">{{ notification.label }}\n    \t</div>\n  </div>\n</h2>",
            "name": "Header with interactive notifications",
            "author": "Leroy Förster",
            "description": "Displays customizable, interactive notification items after the dashboard name. Notifications should be separate items and be member of a group you set in <Notifications Group Name>. Style the notification with Bootstrap3 button classes by adding one of these classes to your item's tags: \"btn-default\", \"btn-primary\", \"btn-success\", \"btn-info\", \"btn-warning\", \"btn-danger\". Give the buttons an additional glowing animation by adding \"glow\" to the item's tags in addition to the btn-color-classes.",
            "settings": [
                {
                    "type": "item",
                    "id": "notifications_group_name",
                    "label": "Notifications Group Name",
                    "default": "notifications",
                    "description": "A group of Switch Items. The Items' labels will be displayed when the item's state matches the state you set below."
                },
                {
                    "type": "string",
                    "id": "notification_item_condition",
                    "label": "Notification item condition",
                    "default": "ON",
                    "description": "The notification is shown if a member of the group <Notifications Group> has exactly the state you set here."
                },
                {
                    "type": "string",
                    "id": "send_on_click_command",
                    "label": "Send command on click",
                    "default": "OFF",
                    "description": "Sends a command to the single notification that was clicked."
                },
                {
                    "type": "choice",
                    "id": "additional_classes_btn",
                    "label": "Additional bootstrap3 classes for the buttons",
                    "choices": "btn-sm,btn-lg,",
                    "description": "This modifies the style classes of all buttons. Make them smaller or larger as you desire."
                }
            ],
            "source_url": "https://raw.githubusercontent.com/gersilex/informational-header/master/informational-header.widget.json",
            "readme_url": "https://github.com/gersilex/informational-header"
        },
        "MultiState": {
            "template": "<style>\n.myswitch {  position: relative;  display: inline-block;  width: 60px;  height: 30px;  left: 20px;}\n.myswitch input {display:none;}\n.myslider {  position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: #3F4F5F; -webkit-transition: 0s;  transition: .2s;}\n.myslider:before {  position: absolute;  content: \"\";  height: 22px;  width: 22px;  left: 8px;  bottom: 4px;  background-color: white;  -webkit-transition: 0s;  transition: .2s;}\ninput:checked + .myslider {  background-color: #26FF33; }\ninput:focus + .myslider {  box-shadow: 0 0 1px #26FF33; }\ninput:checked + .myslider:before {  -webkit-transform: translateX(26px);  -ms-transform: translateX(26px);  transform: translateX(26px);}\n.myslider.round {  border-radius: 30px;}\n.myslider.round:before {  border-radius: 50%;}\n.nosliderOff {  position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  width: 45px;  background-color: #3F4F5F; }\n.nosliderOff.round {  border-radius: 30px;} \n.nosliderOn {  position: absolute;  cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  width: 45px;  background-color: #26FF33; }\n.nosliderOn.round {  border-radius: 30px;}  \n<!-- thanks to ... for style @ https://community.openhab.org/t/template-for-many-switches-in-a-group/21739 -->\n</style>\n<div ng-if=\"(config.item_header!='')\">\n    <div ng-if=\"config.item_showsummary\"><h4>{{config.item_header}} : {{(itemsInGroup(config.item_groupid) | filter:{state:'ON'}).length}} von {{(itemsInGroup(config.item_groupid)).length}}</h4></div>\n    <div ng-if=\"!config.item_showsummary\"><h4>{{config.item_header}}</h4></div>\n</div>\n<table class=\"table \">\n    <tr ng-repeat=\"item in itemsInGroup(config.item_groupid)\">\n\n      <td class=\"text-right\"><div style=\"height:25px; padding-top:4px;\">{{item.label.substr(config.item_skipncharsindescription,99)}}\n        <div ng-if=\"(config.item_type=='Rollershutter')\">{{itemState(item.name)}}%</div></div></td>\n        <td class=\"text-left\">\n            <div ng-if=\"(config.item_type=='Switch')\">\n\t\t\t\t\t\t\t\t<div style=\"height:30px;\"><label class=\"myswitch\">\n                  <input type=\"checkbox\" ng-checked=\"(itemValue(item.name)=='ON')||(itemValue(item.name)>0)\" ng-click=\"sendCmd(item.name, (itemValue(item.name)=='OFF') ? 'ON':'OFF')\"/><div class=\"myslider round\"></div></label>\n              </div>\n            </div>\n            <div ng-if=\"(config.item_type=='Window')\">\n                <div ng-style=\"{'background-color': (itemState(item.name)=='OPEN') ? '#26FF33' : 'transparent' }\">\n                    <button style=\"width: 100%; height: 2em; border: 0; color: white; background: transparent; font-size: 16px\" ng-click=\"\">\n                        <div ng-if=\"((config.item_icon_iconset)==NULL)\"><widget-icon iconset=\"'freepik-household'\" icon=\"'window-9'\" /></div>\n                        <div ng-if=\"((config.item_icon_iconset)!=NULL)\"><widget-icon iconset='config.item_icon_iconset' icon='config.item_icon' /></div>\n                    </button>\n                </div>\n            </div>\n            <div ng-if=\"(config.item_type=='Showvalues_ON')\">\n              <div ng-style=\"{'height': (itemValue(item.name + '_soll')!='N/A') ? '40px' : '25px' }\">\n                    <button style=\"width:100%; height: 2em; border: 0; color: white; background: transparent; font-size: 16px\" ng-click=\"\">\n                      <div ng-style=\"{'background-color': (itemState(item.name)=='ON') ? '#26FF33' : 'transparent' }\">\n                        {{itemState(item.name).substr(0,4)}}{{config.item_unit.replace(\"_\",\" \")}}\n                        <div ng-if=\"(config.item_extension!=NULL)\">\n                          <div ng-if=\"itemValue(item.name + config.item_extension)!='N/A'\">\n                            <div style=\"color:#606060;\"> \n                        \t\t[ {{itemState(item.name+config.item_extension).substr(0,4)}}{{config.item_unit.replace(\"_\",\" \")}} ]\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </button>\n              </div>\n            </div>\n            <div ng-if=\"(config.item_type=='Showvalues_OFF')\">\n              <div ng-style=\"{'height': (itemValue(item.name + '_soll')!='N/A') ? '40px' : '25px' }\">\n                    <button style=\"width:100%; height: 2em; border: 0; color: white; background: transparent; font-size: 16px\" ng-click=\"\">\n                      <div ng-style=\"{'background-color': (itemState(item.name)=='OFF') ? '#26FF33' : 'transparent' }\">\n                        {{itemState(item.name).substr(0,4)}}{{config.item_unit.replace(\"_\",\" \")}}\n                        <div ng-if=\"(config.item_extension!=NULL)\">\n                          <div ng-if=\"itemValue(item.name + config.item_extension)!='N/A'\">\n                            <div style=\"color:#606060;\"> \n                        \t\t[ {{itemState(item.name+config.item_extension).substr(0,4)}}{{config.item_unit.replace(\"_\",\" \");}} ]\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </button>\n              </div>\n            </div>\n\n          \n          <div ng-if=\"(config.item_type=='Toggle')\">\n                    <button style=\"width:45%; height: 2em; border: 0; color: white; background: transparent; font-size: 16px\" ng-click=\"sendCmd((item.name), (itemState(item.name)!='ON')?'ON':'OFF')\">\n                      <div ng-style=\"{'background-color': (itemState(item.name)=='ON') ? '#26FF33' : 'transparent' }\">\n                        <div ng-if=\"((config.item_icon_iconset)==NULL)\"><widget-icon iconset=\"'freepik-household'\" icon=\"'light-bulb-1'\" /></div>\n                        <div ng-if=\"((config.item_icon_iconset)!=NULL)\"><widget-icon iconset='config.item_icon_iconset' icon='config.item_icon' /></div>\n                      </div>\n                    </button>\n                    <button style=\"width: 45%; height: 2em; border: 0; color: white; background: transparent; font-size: 16px\" ng-click=\"sendCmd((item.name), (itemState(item.name)!='ON')?'ON':'OFF')\">\n                      <div ng-style=\"{'background-color': (itemState(item.name)=='OFF') ? '#003399' : 'transparent' }\">\n                        <div ng-if=\"((config.item_icon_iconset)==NULL)\"><widget-icon iconset=\"'freepik-household'\" icon=\"'light-bulb-1'\" /></div>\n                        <div ng-if=\"((config.item_icon_iconset)!=NULL)\"><widget-icon iconset='config.item_icon_iconset' icon='config.item_icon' /></div>\n                      </div>\n                    </button>\n            </div>\n\n            \t<div ng-if=\"(config.item_type=='Rollershutter')\">\n                <div style=\"height:40px;\">\n                <button style=\"width: 15%; height: 2em; border: 0; color: white; background: transparent; font-size: 16px\" ng-click=\"sendCmd((item.name), 'UP')\">&uarr;</button>\n                <button style=\"width: 50%; height: 2em; border: 0; color: white; background: transparent; font-size: 16px\" ng-click=\"sendCmd((item.name), 'STOP')\">Stop</button>\n                <button style=\"width: 15%; height: 2em; border: 0; color: white; background: transparent; font-size: 16px\" ng-click=\"sendCmd((item.name), 'DOWN')\">&darr;</button>\n                </div>\n            </div>\n        </td>\n    </tr>\n  \n   <tr >\n        <td class=\"text-right\">\n          <div ng-if=\"(config.item_switchgroupall)\">{{config.item_header}}</div>\n     \t\t</td>\n        <td class=\"text-left\">\n\t\t\t  <div ng-if=\"(config.item_switchgroupall)\">\n              <div ng-if=\"((config.item_type=='Toggle') || ((config.item_type=='Switch')))\">\n                <label class=\"myswitch\"><input type=\"checkbox\" ng-checked=\"false\" ng-click=\"sendCmd(config.item_groupid, 'OFF')\"/><div class=\"nosliderOff round\"></div></label>\n                <label class=\"myswitch\"><input type=\"checkbox\" ng-checked=\"true\" ng-click=\"sendCmd(config.item_groupid, 'ON')\"/><div class=\"nosliderOn round\"></div></label> \n              </div>\n\n            \t<div ng-if=\"(config.item_type=='Rollershutter')\">\n                <button style=\"width: 15%; height: 2em; border: 0; color: white; background: transparent; font-size: 16px\" ng-click=\"sendCmd((config.item_groupid), 'UP')\">&uarr;</button>\n                <button style=\"width: 50%; height: 2em; border: 0; color: white; background: transparent; font-size: 16px\" ng-click=\"sendCmd((config.item_groupid), 'STOP')\">Stop</button>\n                <button style=\"width: 15%; height: 2em; border: 0; color: white; background: transparent; font-size: 16px\" ng-click=\"sendCmd((config.item_groupid), 'DOWN')\">&darr;</button>\n            </div>\n          </div>\n        </td>\n    </tr>\n  \n</table>",
            "name": "MultiState / MultiItem display of a group of values in one widget",
            "author": "Michael Martens",
            "description": "V1 - Nov 2017 - Items of a group are shown, depending on config they are just displayed or can be changed.",
            "settings": [
                {
                    "type": "string",
                    "id": "item_header",
                    "label": "Header of table",
                    "default": "Erdgeschoss",
                    "description": "Enter a header, if needed"
                },
                {
                    "type": "item",
                    "id": "item_groupid",
                    "label": "GroupID",
                    "default": "gEG",
                    "description": "Enter the group to visualize"
                },
                {
                    "type": "icon",
                    "id": "item_icon",
                    "label": "Iconset and Icon to be displayed",
                    "description": "What icon shall be used (e.g.: freepik-household, light-bulb-1); If empty, these icons are used"
                },
                {
                    "type": "choice",
                    "choices": "Switch,Toggle,Rollershutter,Window,Showvalues_ON,Showvalues_OFF",
                    "id": "item_type",
                    "label": "Type of items to display",
                    "default": "Switch",
                    "description": "Enter here the type of switch to allow proper selection; Showvalues_O.. showing green for the selected value"
                },
                {
                    "type": "number",
                    "id": "item_skipncharsindescription",
                    "label": "Skip first n chars in description",
                    "default": "0",
                    "description": "if all labels start with \"EG..\" you can skip them by entering a number of chars"
                },
                {
                    "type": "checkbox",
                    "id": "item_showsummary",
                    "label": "Show summary of states",
                    "default": true,
                    "description": "Check if you want to see how many items are in the \"on\" state"
                },
                {
                    "type": "checkbox",
                    "id": "item_switchgroupall",
                    "label": "Offer general switch for all items",
                    "description": "Check here to switch all items at once (No for Windows usefull)",
                    "default": true
                },
                {
                    "type": "string",
                    "id": "item_extension",
                    "label": "Additional value",
                    "default": "",
                    "description": "If a second value shall be displayed as a reference, the name variable must be identical plus the value. E.g. Temp1 and Temp1_soll by naming \"_soll\""
                },
                {
                    "type": "string",
                    "id": "item_unit",
                    "label": "Unit",
                    "description": "If a unit shall be displayed, enter it here. E.g. \"_°C\" - with a leading underscore (converted to blanks) to create a distance"
                }
            ],
            "readme_url": "https://community.openhab.org/t/35913"
        },
        "Alarm_Keypad": {
            "template": "<style>\n    @media screen and (max-width: 767px) {\n \t      .alarmKpMainContainer {\n  \t\t\t\t\theight: 300px !important;\n        }\n\t  }\n    .alarmKpMainContainer {\n        width: 100%;\n        height: 100%;\n        left: 0;\n        top: 0;\n  \t\t\twhite-space: nowrap;\n    }\n\n    .alarmKpMainContainer .container {\n        width: 100%;\n        height: 100%;\n        position: relative;\n        padding-top: 0;\n    }\n\n    .alarmKpMainContainer .container .row {\n        height: 25%;\n    }\n\n    .alarmKpMainContainer button.btn-default {\n        background: #424242;\n    }\n\n    .alarmKpMainContainer button.leftmost {\n        margin-left: 0;\n    }\n\n    .alarmKpMainContainer button.rightmost {\n        margin-right: 0;\n    }\n\n    .alarmKpMainContainer button.col-sm-3 {\n        width: calc(25% - 10px);\n        height: calc(100% - 10px);\n        margin: 5px;\n    }\n\n    .alarmKpMainContainer button {\n        position: relative;\n        overflow: hidden;\n        border-radius: 4px;\n        border-color: transparent !important;\n        color: #fff !important;\n        font-size: 2em;\n    }\n\n    .alarmKpMainContainer button.leftmost {\n        font-size: 1.25em;\n    }\n\n    .alarmKpMainContainer button:focus,\n    .alarmKpMainContainer button:active {\n        outline: none !important;\n    }\n\n    .alarmKpMainContainer button:focus:not(:active)::after {\n        animation: ripple 1s ease-out;\n    }\n\n    .alarmKpMainContainer button:after {\n        content: '';\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 5px;\n        height: 5px;\n        background: rgba(255, 255, 255, .5);\n        opacity: 0;\n        border-radius: 100%;\n        transform: scale(1, 1) translate(-50%);\n        transform-origin: 50% 50%;\n    }\n\n    .alarmKpMainContainer button .subText {\n        font-size: .5em;\n        position: absolute;\n        top: 7px;\n        right: 7px;\n        font-style: italic;\n        color: #7b6845;\n    }\n\n    .alarmKpMainContainer button .subText.bigger {\n        font-size: .75em;\n    }\n\n    @keyframes ripple {\n        0% {\n            transform: scale(0, 0);\n            opacity: 1;\n        }\n        20% {\n            transform: scale(25, 25);\n            opacity: 1;\n        }\n        100% {\n            opacity: 0;\n            transform: scale(40, 40);\n        }\n    }\n\n    .alarmKpMainContainer .subText.offColor {\n        color: #449d44;\n    }\n\n    .alarmKpMainContainer .subText.awayColor {\n        color: #ec971f;\n    }\n\n    .alarmKpMainContainer .subText.stayColor {\n        color: #31b0d5;\n    }\n</style>\n<div class=\"alarmKpMainContainer\">\n    <div class=\"container\">\n        <div class=\"row gutter4\">\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmdOff, '1')\" class=\"btn btn-success col-sm-3 leftmost\">\n              <span data-ng-bind-html=\"config.mainLabel_off\"></span>\n            <span class=\"subText bigger\">off</span>\n          </button>\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmd, '1')\" class=\"btn btn-default col-sm-3\">\n            1\n            <span class=\"subText offColor\">off</span>\n          </button>\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmd, '2')\" class=\"btn btn-default col-sm-3\">\n            2 \n            <span class=\"subText awayColor\">away</span>\n          </button>\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmd, '3')\" class=\"btn btn-default col-sm-3 rightmost\">\n            3\n            <span class=\"subText stayColor\">stay</span>\n          </button>\n        </div>\n        <div class=\"row gutter4\">\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmdS, '1')\" class=\"btn btn-info col-sm-3 leftmost\">\n            <span data-ng-bind-html=\"config.mainLabel_armStay\"></span>\n            <span class=\"subText bigger\">arm stay</span>\n          </button>\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmd,  '4')\" class=\"btn btn-default col-sm-3\">\n            4\n            <span class=\"subText\">max</span>\n          </button>\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmd,  '5')\" class=\"btn btn-default col-sm-3\">\n            5\n            <span class=\"subText\">test</span>\n          </button>\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmd,  '6')\" class=\"btn btn-default col-sm-3 rightmost\">\n            6\n            <span class=\"subText\">bypass</span>\n          </button>\n        </div>\n        <div class=\"row gutter4\">\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmdA, '1')\" class=\"btn btn-warning col-sm-3 leftmost\">\n            <span data-ng-bind-html=\"config.mainLabel_armAway\"></span>\n              <span class=\"subText bigger\">arm away</span>\n          </button>\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmd,  '7')\" class=\"btn btn-default col-sm-3\">\n            7\n            <span class=\"subText\">instant</span>\n          </button>\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmd,  '8')\" class=\"btn btn-default col-sm-3\">\n            8\n            <span class=\"subText\">code</span>\n          </button>\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmd,  '9')\" class=\"btn btn-default col-sm-3\">\n            9\n            <span class=\"subText\">chime</span>\n          </button>\n        </div>\n        <div class=\"row gutter4\">\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmdA, '1')\" class=\"btn btn-danger col-sm-3 leftmost\"><strong><em>Panic !</em></strong></button>\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmd, '10')\" class=\"btn btn-default col-sm-3\">\n            *\n            <span class=\"subText\">ready</span>\n          </button>\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmd,  '0')\" class=\"btn btn-default col-sm-3\">0</button>\n            <button data-ng-click=\"sendCmd(config.alarmPnlCmd, '11')\" class=\"btn btn-default col-sm-3 rightmost\">#</button>\n        </div>\n    </div>\n</div>",
            "name": "Alarm Keypad",
            "author": "Lucky Mallari",
            "settings": [
                {
                    "type": "item",
                    "id": "alarmPnlCmd",
                    "label": "Alarm Panel Command",
                    "description": "Alarm Panel Item Command receiver. This is tied to a rule.",
                    "default": "alarmPanelCommand"
                },
                {
                    "type": "item",
                    "id": "alarmPnlCmdA",
                    "label": "Alarm Panel Command for Away",
                    "description": "Alarm Panel Item Command receiver for Arm Away. This is the item name that is also tied to a rule where your back-end sends the Arm Away command to your Alarm (such as Alarm Decoder module)",
                    "default": "alarmPanelCommandMacroAway"
                },
                {
                    "type": "item",
                    "label": "Alarm Panel Command for Stay",
                    "id": "alarmPnlCmdS",
                    "description": "Alarm Panel Item Command receiver for Arm Away. This is the item name that is also tied to a rule where your back-end sends the Arm Stay command to your Alarm (such as Alarm Decoder module)",
                    "default": "alarmPanelCommandMacroStay"
                },
                {
                    "type": "item",
                    "id": "alarmPnlCmdOff",
                    "description": "Alarm Panel Item Command receiver for OFF. This is the item name that is also tied to a rule where your back-end sends the OFF command to your Alarm (such as Alarm Decoder module)",
                    "label": "Alarm Panel Command for Off",
                    "default": "alarmPanelCommandMacroOff"
                },
                {
                    "type": "string",
                    "id": "mainLabel_off",
                    "label": "Off Text",
                    "default": "Off",
                    "description": "Main Label for Off. You can change this to anything. I prefer \"Patay\" which means off or dead in my language. You can use simple html here such as Line1<br>Line2"
                },
                {
                    "type": "string",
                    "id": "mainLabel_armStay",
                    "label": "Stay Text",
                    "default": "Stay",
                    "description": "Main Label for Arm Stay. You can change this to anything. I prefer \"Dito Lang\" which means \"just here\" in my language. You can use simple html here such as Line1<br>Line2"
                },
                {
                    "type": "string",
                    "id": "mainLabel_armAway",
                    "label": "Away Text",
                    "default": "Away",
                    "description": "Main Label for Arm Away. You can change this to anything. I prefer \"Alis Muna\" which means \"Leaving..\" in my language. You can use simple html here such as Line1<br>Line2"
                }
            ],
            "description": "Alarm Keypad",
            "readme_url": "https://community.openhab.org/t/37409"
        },
        "side widget": {
            "template": "<span>{{ngModel.name}}</span> <span class=\"pull-right label label-primary\">Living Room</span>\n<dl style=\"padding: 0; margin: 0; font-size: 8pt; text-transform: none;\">\n  <dd class=\"pull-right value\">{{\"%0.1f°F\"|fmt:+itemState(\"LRTemperature\")}}</dd>\n  <dt>{{\"Temperature\"}} </dt>\n  <dd class=\"pull-right value\">{{\"%0.1f%%\"|fmt:+itemState(\"LRHumidity\")}}</dd>\n  <dt>{{\"Humidity\"}} </dt>\n</dl>",
            "settings": []
        },
        "Keypad": {
            "template": "<!-- \nWidget Keypad \nfor openHAB\nLucky Mallari 2018\n-->\n<form name=\"_gkw\" ng-init=\"config.marginPx = (config.marginPx < 0 ? 0 : config.marginPx)\">\n  <style>\n    .genericKeypadWidget {\n    \tdisplay: flex;\n    \tflex-wrap: wrap;\n    \tflex: 0 1 100%;\n    \twidth: 100%;\n    \theight: 100%;\n    \tposition: absolute;\n    \ttop: 0;\n    \tleft: 0;\n    \tpadding: {{config.marginPx / 2}}px;\n    }\n    \n    .genericKeypadWidget button {\n    \toutline: none;\n    }\n    \n    .genericKeypadWidget .keys {\n    \tdisplay: flex;\n      flex: 0 1 100%;\n    \toverflow: hidden;\n      flex-wrap: wrap;\n    \theight: 100%;\n    }\n  \n    .genericKeypadWidget .key {\n    \tmargin: {{config.marginPx / 2}}px;\n      flex: 1;\n    \tflex-basis: calc(33% - {{config.marginPx}}px - 1px);\n    \tbreak-inside: avoid;\n      justify-content: center;\n      align-items: center;\n\t\t\tfont-size: {{config.keyFontSize}};\n      border: none;\n      cursor: pointer;\n\t\t\tbackground: {{config.btnKeysBgColor}};\n    \toverflow: hidden;\n    \theight: calc({{config.isShowOutputBox?'20%':'25%'}} - {{config.marginPx}}px);\n    \tposition: relative;\n    \tborder-radius: {{config.btnBorderRadius}};\n    }\n    \n    .genericKeypadWidget .key:not(:disabled)::after {\n  \t\tcontent: '';\n\t\t  position: absolute;\n  \t\ttop: 50%;\n  \t\tleft: 50%;\n  \t\twidth: 5px;\n  \t\theight: 5px;\n  \t\tbackground: rgba(255, 255, 255, .5);\n  \t\topacity: 0;\n  \t\tborder-radius: 100%;\n  \t\ttransform: scale(1, 1) translate(-50%);\n  \t\ttransform-origin: 50% 50%;\n    }\n    \n    .genericKeypadWidget .key:focus:not(:active)::after {\n  \t\tanimation: ripple 1s ease-out;\n\t\t}\n    \n    .genericKeypadWidget .key.outputBox {\n      display: flex;\n    \tmargin: {{config.marginPx / 2}}px;\n    \tflex-basis: 100%;\n      justify-content: {{config.outputBoxTextAlign == 'right' ? 'flex-end': config.outputBoxTextAlign}};\n      align-items: center;\n      font-size: {{config.outputBoxFontSize}};\n      background: #000;\n      color: #fff;\n      flex-basis: 100%;\n    \tposition: relative;\n    \tpointer-events: {{ config.isOutputBoxClickable ? 'auto' : 'none' }};\n\t\t}    \n    \n    .genericKeypadWidget .key.btn_disabled::after {\n      content: '';\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      top: 0px;\n      left: 0px;\n      background: rgba(0,0,0,.65);\n     \tmargin: 0px;\n    \tborder-radius: {{config.btnBorderRadius}};\n     }    \n    \n    .genericKeypadWidget input.noshow {\n      display: none;\n    }\n\n    .genericKeypadWidget .key.btn_ok {\n\t\t\tbackground: {{config.btnOkBgColor}};\n    }\n\t\t\n    .genericKeypadWidget .key.btn_del {\n    \tbackground: {{config.btnDelBgColor}};\n     }       \n    \n    .genericKeypadWidget .key.btn_clr {\n    \tdisplay: flex;\n    \tposition: absolute;\n    \ttop: 0;\n    \tleft: 0;\n    \tbackground: rgba(0,0,0,0.15);\n    \theight: 100%;\n    \talign-items: center;\n    \tfont-size: 1.5vh;\n    \tpointer-events: auto;\n    \tmargin: 0;\n    \tpadding: 10px;\n    }\n    \n    @keyframes ripple {\n        0% {\n            transform: scale(0, 0);\n            opacity: 1;\n        }\n        20% {\n            transform: scale(25, 25);\n            opacity: 1;\n        }\n        100% {\n            opacity: 0;\n            transform: scale(40, 40);\n        }\n    }    \n  </style>\n\n  <div class=\"genericKeypadWidget\" ng-init=\"gwk_data={ current: '' }\">\n    <input type=\"text\" class=\"noshow\" name=\"current\" ng-model=\"gwk_data.current\" required=\"true\"></input>\n    <div class=\"keys\">\n      <div class=\"key outputBox\" contenteditable=\"true\" ng-if=\"config.isShowOutputBox\">\n      \t<span class=\"outputBoxText\" ng-repeat=\"letter in gwk_data.current.split('') track by $index\">{{config.isMaskOutputBox ? config.maskChar : letter}}</span>\n      \t<button class=\"key btn_clr\" contenteditable=\"false\" ng-if=\"_gkw.current.$valid\" ng-click=\"gwk_data.current=''\">{{config.text_btnClear}}</button>\n    \t</div>\n\n      <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '1'\">1</button>\n      <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '2'\">2</button>\n      <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '3'\">3</button>\n\n      <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '4'\">4</button>\n      <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '5'\">5</button>\n      <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '6'\">6</button>\n\n      <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '7'\">7</button>\n      <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '8'\">8</button>\n      <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '9'\">9</button>\n\n      <button class=\"key btn_del\" ng-class=\"{'btn_disabled':_gkw.current.$invalid}\" ng-click=\"gwk_data.current = gwk_data.current.slice(0,-1)\" ng-disabled=\"_gkw.current.$invalid\" title=\"Hold to clear\">{{config.text_del}}</button>\n      <button class=\"key\" ng-click=\"gwk_data.current = gwk_data.current + '0'\">0</button>\n      <button class=\"key btn_ok\" ng-class=\"{'btn_disabled':_gkw.current.$invalid}\" ng-click=\"sendCmd(config.keypadReceiver, gwk_data.current); (config.isClearOnSubmit && (gwk_data.current='') || true)\" ng-disabled=\"_gkw.current.$invalid\" title=\"Submit\">{{config.text_ok}}</button>\n\n    </div>\n  </div>\n</form>\n\n",
            "name": "Keypad",
            "author": "Lucky Mallari",
            "description": "Generic Keypad Widget",
            "settings": [
                {
                    "type": "item",
                    "id": "keypadReceiver",
                    "label": "Receiving Item",
                    "default": "keypadReceiver",
                    "description": "Item that receives the keypad value. MUST BE A Number or String Item"
                },
                {
                    "type": "string",
                    "id": "text_ok",
                    "label": "OK Text",
                    "default": "OK",
                    "description": "Text of the OK/submit button"
                },
                {
                    "type": "string",
                    "id": "text_del",
                    "label": "Delete/Backspace Text",
                    "default": "del",
                    "description": "Text of the Delete/Backspace button"
                },
                {
                    "type": "number",
                    "id": "marginPx",
                    "label": "Spacing",
                    "default": "5",
                    "description": "Spacing (in px) between keys. Minimum enforced value of 0"
                },
                {
                    "type": "checkbox",
                    "id": "isShowOutputBox",
                    "label": "Show Output Box",
                    "default": true,
                    "description": "Shows the output box if checked"
                },
                {
                    "type": "checkbox",
                    "id": "isMaskOutputBox",
                    "label": "Masks the output box",
                    "default": true,
                    "description": "Masks the output box if checked"
                },
                {
                    "type": "string",
                    "id": "outputBoxFontSize",
                    "default": "2em",
                    "label": "Output Box Font Size",
                    "description": "Font size - INCLUDE UNIT (px, em, etc.)"
                },
                {
                    "type": "string",
                    "id": "maskChar",
                    "label": "Mask Character",
                    "default": "♣",
                    "description": "Mask Character (any). Examples: ✿ ♣ ● X"
                },
                {
                    "type": "string",
                    "id": "outputBoxBg",
                    "label": "Output Box Background",
                    "description": "Output Box Background. Example: white, #F1F1F1, inherit, or even rgba(255,255,255,.5). url('//source.unsplash.com/random') also works",
                    "default": "#c5c5c5"
                },
                {
                    "type": "string",
                    "id": "outputBoxColor",
                    "label": "Output Box char color",
                    "default": "#000",
                    "description": "Output Box text color"
                },
                {
                    "type": "choice",
                    "id": "outputBoxTextAlign",
                    "label": "Output Box Text Alignment",
                    "default": "center",
                    "choices": "left,center,right",
                    "description": "Alignment of the output box text"
                },
                {
                    "type": "checkbox",
                    "id": "isClearOnSubmit",
                    "label": "Clear On Submit",
                    "description": "Clears the output box on submit",
                    "default": true
                },
                {
                    "type": "checkbox",
                    "id": "isOutputBoxClickable",
                    "label": "Output Box Clickable",
                    "default": false,
                    "description": "If checked, you can click on the box and the text cursor will be there."
                },
                {
                    "type": "string",
                    "id": "keyColor",
                    "label": "Key Color",
                    "default": "inherit",
                    "description": "Key Color in valid CSS code. Example: white, #F1F1F1, inherit, or even rgba(255,255,255,.5). url('//source.unsplash.com/random') also works"
                },
                {
                    "type": "string",
                    "id": "btnOkBgColor",
                    "label": "OK Background",
                    "description": "OK/Submit button background color. Example: white, #F1F1F1, inherit, or even rgba(255,255,255,.5). url('//source.unsplash.com/random') also works",
                    "default": "#197500"
                },
                {
                    "type": "string",
                    "id": "btnDelBgColor",
                    "label": "Del/Clear Background",
                    "default": "#9c0000",
                    "description": "Backspace/Clear button background color. Example: white, #F1F1F1, inherit, or even rgba(255,255,255,.5). url('//source.unsplash.com/random') also works"
                },
                {
                    "type": "string",
                    "id": "btnKeysBgColor",
                    "label": "0-9 Keys Background",
                    "default": "#616161",
                    "description": "0-9 button background color. Example: white, #F1F1F1, inherit, or even rgba(255,255,255,.5). url('//source.unsplash.com/random') also works"
                },
                {
                    "type": "string",
                    "id": "btnBorderRadius",
                    "label": "Rounded corner radius",
                    "default": "4px",
                    "description": "Border radius for all keys. INCLUDE UNIT. Example: 4px, 50% (round)"
                },
                {
                    "type": "string",
                    "id": "text_btnClear",
                    "label": "Clear Button",
                    "default": "x",
                    "description": "Clear button text/character"
                },
                {
                    "type": "string",
                    "id": "keyFontSize",
                    "label": "Keys Font Size",
                    "default": "2em",
                    "description": "Font size - INCLUDE UNIT (px, em, etc.)"
                }
            ],
            "readme_url": "https://community.openhab.org/t/39002"
        },
        "MansionDash": {
            "template": "<style>\n  .modcol {\n  \tfloat: left;\n  \tpadding-right: 30px;\n  }\n</style>\n\n<a href=\"#/view/{{config.target}}\">\n  \n<img class=\"box-content img-fluid\" style=\"width: 100%; padding:0; {{config.filter}}\" src=\"{{config.img_url}}\"></img>\n</a>\n<div class=\"table\" style=\"position:absolute; bottom: 10px; width: 100%; pointer-events: none;\">\n\t<!-- Room Label -->\n\t<div class=\"row\">\n    <div class=\"col-md-12 modcol\">\n\t\t\t<h2 style=\"text-align: left; font-weight: bold;\"> {{ngModel.name}}</h2>\n    </div>\n  </div>\n  \n  <div class=\"row\">\n    <!-- Icon 1 -->\n  \t<div class=\"col-md modcol\" ng-if=\"!config.item1_val\">\n  \t\t<i class=\"fas fa-{{config.icon1}} fa-2x\" ng-style=\"{opacity : itemValue(config.item1) == 'OFF' ? 0.3 : 1.0}\"></i>\n    </div>\n  \t<div class=\"col-md modcol\" ng-if=\"config.item1_val\">\n  \t\t<i class=\"fas fa-{{config.icon1}} fa-2x\" style=\"opacity : 1.0\"></i>\n      {{itemValue(config.item1)}} {{config.item1_suffix}}\n    </div>\n    \n  \t<!-- Icon 2 -->    \n  \t<div class=\"col-md modcol\" ng-if=\"!config.item2_val\">\n  \t\t<i class=\"fas fa-{{config.icon2}} fa-2x\" ng-style=\"{opacity : itemValue(config.item2) == 'OFF' ? 0.3 : 1.0}\"></i>\n    </div>\n  \t<div class=\"col-md modcol\" ng-if=\"config.item2_val\">\n  \t\t<i class=\"fas fa-{{config.icon2}} fa-2x\" style=\"opacity : 1.0\"></i>\n      {{itemValue(config.item2)}} {{config.item2_suffix}}\n    </div>\n    \n    <!-- Icon 3 -->\n  \t<div class=\"col-md modcol\" ng-if=\"!config.item3_val\">\n  \t\t<i class=\"fas fa-{{config.icon3}} fa-2x\" ng-style=\"{opacity : itemValue(config.item3) == 'OFF' ? 0.3 : 1.0}\"></i>\n    </div>\n  \t<div class=\"col-md modcol\" ng-if=\"config.item3_val\">\n  \t\t<i class=\"fas fa-{{config.icon3}} fa-2x\" style=\"opacity : 1.0\"></i>\n      {{itemValue(config.item3)}} {{config.item3_suffix}}\n    </div>\n\n    <!-- Icon 4 -->\n  \t<div class=\"col-md modcol\" ng-if=\"!config.item4_val\">\n  \t\t<i class=\"fas fa-{{config.icon4}} fa-2x\" ng-style=\"{opacity : itemValue(config.item4) == 'OFF' ? 0.3 : 1.0}\"></i>\n    </div>\n  \t<div class=\"col-md modcol\" ng-if=\"config.item4_val\">\n  \t\t<i class=\"fas fa-{{config.icon4}} fa-2x\" style=\"opacity : 1.0\"></i>\n      {{itemValue(config.item4)}} {{config.item4_suffix}}\n    </div>\n        \n  </div>\n</div>\n\n",
            "name": "MansionDash",
            "author": "Hammar",
            "description": "Custom Dashboard Tile",
            "settings": [
                {
                    "type": "string",
                    "id": "img_url",
                    "label": "Image URL",
                    "description": "Image URL",
                    "default": "//source.unsplash.com/random"
                },
                {
                    "type": "string",
                    "id": "filter",
                    "label": "CSS Image Filter",
                    "description": "Paste the filter contents from a site like www.cssfilters.co for the image filter you want.  Note: only paste the contents of the .filter tag i.e. between the curly braces"
                },
                {
                    "type": "string",
                    "id": "target",
                    "label": "Target Dashboard"
                },
                {
                    "type": "item",
                    "id": "item1",
                    "label": "Item 1"
                },
                {
                    "type": "string",
                    "id": "icon1",
                    "label": "Font Awesome Icon 1"
                },
                {
                    "type": "checkbox",
                    "id": "item1_val",
                    "label": "Is value?",
                    "choices": "switch,value",
                    "description": "Is this a switch item or a value item?"
                },
                {
                    "type": "string",
                    "id": "item1_suffix",
                    "label": "Item 1 suffix (if a value)",
                    "default": "°C"
                },
                {
                    "type": "item",
                    "id": "item2",
                    "label": "Item 2"
                },
                {
                    "type": "string",
                    "id": "icon2",
                    "label": "Font Awesome Icon 2"
                },
                {
                    "type": "checkbox",
                    "id": "item2_val",
                    "label": "Is value?"
                },
                {
                    "type": "string",
                    "label": "Item 2 suffix (if a value)",
                    "id": "item2_suffix",
                    "default": "°C"
                },
                {
                    "type": "item",
                    "id": "item3",
                    "label": "Item 3"
                },
                {
                    "type": "string",
                    "label": "Font Awesome Icon 3",
                    "id": "icon3"
                },
                {
                    "type": "checkbox",
                    "id": "item3_val",
                    "label": "Is a value?"
                },
                {
                    "type": "string",
                    "id": "item3_suffix",
                    "label": "Item 3 suffix (if a value)",
                    "default": "°C"
                },
                {
                    "type": "item",
                    "id": "item4",
                    "label": "Item 4"
                },
                {
                    "type": "string",
                    "label": "Font Awesome Icon 4",
                    "id": "icon4"
                },
                {
                    "type": "checkbox",
                    "id": "item4_val",
                    "label": "Is a value?"
                },
                {
                    "type": "string",
                    "id": "item4_suffix",
                    "label": "Item 4 suffix (if a value)",
                    "default": "°C"
                }
            ]
        },
        "Chromecast": {
            "template": "<div class=\"row\">\n\t<div class=\"col-xs-12\">\t<h4 ng-style=\"{'color': (config.color) ,'font-size': (config.font)}\">{{config.widget_name}}</h4></div>\n</div>\n<div class=\"row\">\n\t<div class=\"col-xs-12\" ng-if=\"itemValue(config.title) !='UNDEF'\">\t<h4>{{itemValue(config.title)}}</h4></div>\n  \t<div class=\"col-xs-12\" ng-if=\"itemValue(config.seriesTitle) !='UNDEF'\">\t<h4>{{itemValue(config.seriesTitle)}}</h4></div>\n</div>\n<div class=\"row\">\n\t<div class=\"col-xs-12\">\n\t\t<img src=\"{{itemValue(config.image_url)}}\" class=\"img-thumbnail\" ng-if=\"itemValue(config.image_url) !='UNDEF'\"></img>  \n    <img src=\"{{(config.default_image)}}\" class=\"img-thumbnail\" ng-if=\"itemValue(config.image_url) =='UNDEF'\"></img>    \n\t</div>\n</div>\n<div class=\"row\">\n\t<div class=\"col-xs-12\">\n\t\t<div class=\"progress\">\n\t\t\t<div class=\"progress-bar\" role=\"progressbar\" aria-valuenow={{itemValue(config.current_time)}} aria-valuemin=\"0\" aria-valuemax=\"{{itemValue(config.duration)}}\" style=\"width:{{(itemValue(config.current_time)*100)/itemValue(config.duration)}}%\">\n\t\t\t\t<span class=\"sr-only\">100% Complete</span>\n\t\t\t</div>\n\t\t</div>  \n\t</div>\n</div>\n<div class=\"row\">\n\t<div class=\"col-xs-6\">\n\t\t<label class=\"btn btn-primary btn-lg btn-block btn-danger\" ng-if=\"itemValue(config.control) !='PLAY'\" ng-click=\"sendCmd(config.control, 'PLAY')\">\n\t\t\t<i class=\"glyphicon glyphicon-play glyphicon-text\"></i>\n\t\t</label>\n\t\t<label class=\"btn btn-primary btn-lg btn-block btn-danger\" ng-if=\"itemValue(config.control) =='PLAY'\" ng-click=\"sendCmd(config.control, 'PAUSE')\">\n\t\t\t<i class=\"glyphicon glyphicon-pause glyphicon-text\"></i>\n\t\t</label>\n \t</div>\n \t<div class=\"col-xs-6\"> \n\t\t<label class=\"btn btn-primary btn-lg btn-block btn-danger\"  ng-click=\"sendCmd(config.playURI,config.backdrop_image)\">\n\t\t\t<i class=\"glyphicon glyphicon-stop glyphicon-text\"></i>\n\t\t</label>  \n \t</div>\n</div>\n<div class=\"row\">\n\t<div class=\"col-xs-12\">\n\t\t<div ng-init=\"model={ name: 'My switch', item: (config.volume), hidelabel: 'true', hidepointer: 'true' }\">\n  \t\t<widget-slider ng-model=\"model\"></widget-slider>\n\t\t</div>\t\n  </div>  \n</div>",
            "author": "David C.",
            "description": "Widget to Control Chromecast",
            "name": "Chromecast Widget",
            "settings": [
                {
                    "type": "string",
                    "id": "widget_name",
                    "label": "Widget Name",
                    "description": "Name shown at the top of the widget",
                    "default": "Room"
                },
                {
                    "type": "string",
                    "id": "font",
                    "label": "Title Font",
                    "default": "38px"
                },
                {
                    "type": "color",
                    "id": "color",
                    "label": "Title Color",
                    "description": "Color Of the Title"
                },
                {
                    "type": "string",
                    "id": "default_image",
                    "label": "Default Image",
                    "description": "Image Shown when the widget is unable to retrieve a valid one",
                    "default": "https://www.openhab.org/assets/images/openhab-logo-square.png"
                },
                {
                    "type": "string",
                    "id": "backdrop_image",
                    "label": "Backdrop Image",
                    "default": "https://www.openhab.org/assets/images/openhab-logo-square.png",
                    "description": "Image sent to Chromecast to stop the playback"
                },
                {
                    "type": "item",
                    "id": "title",
                    "label": "Item: Title",
                    "description": "Name of the Item created for the property Title"
                },
                {
                    "type": "item",
                    "id": "seriesTitle",
                    "label": "Item: Series Title",
                    "description": "Name of the Item created for the property Series Title"
                },
                {
                    "type": "item",
                    "id": "image_url",
                    "label": "Item: Image URL",
                    "default": "",
                    "description": "Name of the Item Created for the Item Image URL."
                },
                {
                    "type": "item",
                    "id": "current_time",
                    "label": "Item: Current Time",
                    "description": "Name of the Item Created for the Item Current Time."
                },
                {
                    "type": "item",
                    "id": "duration",
                    "label": "Item: Duration",
                    "description": "Name of the Item Created for the Item Duration."
                },
                {
                    "type": "item",
                    "id": "control",
                    "label": "Item: Control",
                    "description": "Name of the Item Created for the Item Control."
                },
                {
                    "type": "item",
                    "id": "playURI",
                    "label": "Play URI",
                    "description": "Name of the Item Created for the Item PlayURI"
                },
                {
                    "type": "item",
                    "id": "volume",
                    "label": "Item: Volume",
                    "description": "Name of the Item Created for the Item Volume."
                }
            ]
        }
    }
}