Hello, I try to adapt this custom habpanel widget to my yamaha amplifier:
https://community.openhab.org/t/custom-widgets-onkyo-control/23574
But the json is so unreadable …
"template": "<style>\n.icon-tile.colorize {\n filter: invert(45%) sepia(100%) hue-rotate(15deg) saturate(1700%);\n-webkit-filter: invert(45%) sepia(100%) hue-rotate(15deg) saturate(1700%);\n}\n.rzc-title {\n color: #FFAA00;\n}\n.caret#rzc-caret {\n position: absolute;\n left: 95%;\n top: 45%;\n} \n.rzc-button {\n background-color: rgb(95,95,95);\n color: #FFAA00;\n border: none;\n box-shadow: 0px 2px 4px #76899E;\n overflow: hidden;\n width: 100%;\n border-radius: 5px;\n font-size: 18px;\n font-weight: normal;\n}\nul.dropdown-menu#rzc-zone-dropdown {\n background-color: rgb(55,55,55);\n text-align: center;\n border: 0px;\n border-radius: 5px;\n width: 100%;\n} \nul.dropdown-menu#rzc-zone-dropdown li {\n color: #FFAA00;\n border-collapse: separate;\n padding: 5px;\n border-radius: inherit; \n}\nul.dropdown-menu#rzc-zone-dropdown li a {\n color: #FFAA00;\n font-weight: bold;\n}\nul.dropdown-menu#rzc-zone-dropdown li a:hover {\n color: #000;\n}\n \n#receiver-knob path#valueArc {\n fill: #FFAA00 !important;\n}\n#receiver-knob text#text {\n fill: #FFAA00 !important;\n}\n</style>\n \n<div ng-init=\"sourceNames={\n '1': 'DIRECTV', \n '2': 'Game', \n '3': 'Auxiliary', \n '5': 'Apple TV', \n '16': 'Bluray / DVD', \n '34': 'Phono', \n '35': 'TV',\n '36': 'Tuner', \n '43': 'Network', \n '41': 'USB', \n '46': 'Bluetooth'}\" />\n\n<table style=\"width: 100%; border-collapse: separate; border-spacing: 8px;\">\n <tr>\n <td colspan=\"2\">\n <h2 class=\"rzc-title\">{{config.title}}</h2>\n </td>\n </tr>\n <tr>\n <td colspan=\"2\">\n <div style=\"width: 100%;\" class=\"btn-group\" uib-dropdown>\n <button type=\"button\" class=\"rzc-button\" uib-dropdown-toggle>\n <span>Input: {{sourceNames[itemValue(config.inputSource)]}}</span><span class=\"caret\" id=\"rzc-caret\"></span>\n </button>\n <ul class=\"dropdown-menu\" id=\"rzc-zone-dropdown\" uib-dropdown-menu role=\"menu\" aria-labelledby=\"single-button\">\n <li role=\"menuitem\"><a ng-click=\"sendCmd(config.inputSource, '1')\">DIRECTV</a></li>\n <li role=\"menuitem\"><a ng-click=\"sendCmd(config.inputSource, '2')\">Game</a></li>\n <li role=\"menuitem\"><a ng-click=\"sendCmd(config.inputSource, '3')\">Auxiliary</a></li>\n <li role=\"menuitem\"><a ng-click=\"sendCmd(config.inputSource, '5')\">Apple TV</a></li>\n <li role=\"menuitem\"><a ng-click=\"sendCmd(config.inputSource, '16')\">Bluray / DVD</a></li>\n <li role=\"menuitem\"><a ng-click=\"sendCmd(config.inputSource, '35')\">TV</a></li>\n <li role=\"menuitem\"><a ng-click=\"sendCmd(config.inputSource, '36')\">Tuner</a></li>\n <li role=\"menuitem\"><a ng-click=\"sendCmd(config.inputSource, '34')\">Phono</a></li>\n <li role=\"menuitem\"><a ng-click=\"sendCmd(config.inputSource, '43')\">Network</a></li>\n <li role=\"menuitem\"><a ng-click=\"sendCmd(config.inputSource, '41')\">USB</a></li>\n <li role=\"menuitem\"><a ng-click=\"sendCmd(config.inputSource, '46')\">Bluetooth</a></li>\n </ul>\n </div>\n </td>\n </tr>\n <tr>\n <td>\n <table style=\"width: 100%; border-collapse: separate; border-spacing: 1px;\">\n <tr><td colspan=2 style=\"padding: 0;\"><h3 style=\"color: #ffaa00; line-height: .1em;\">Power</h3></td></tr>\n <tr>\n <td style=\"border: 2px solid #76899e; border-radius: 10px;\">\n <table style=\"width: 100%;\">\n <tr>\n <td style=\"padding: 0px; padding-top: 10px; padding-bottom: 10px\">\n <div ng-init='model1={\"zone_power\": \"Power\", \"item\": config.power, \"hidelabel\": true, \"hideonoff\": true, \"iconset\": \"smarthome-set\",\"icon\": \"power-button\",\"icon_size\": \"36\" }'>\n <widget-switch ng-model=\"model1\" />\n </div>\n </td>\n </tr>\n </table>\n </td>\n </tr>\n </table>\n </td>\n <td>\n <table style=\"width: 100%; border-collapse: separate; border-spacing: 1px;\">\n <tr><td colspan=2 style=\"padding: 0;\"><h3 style=\"color: #ffaa00; line-height: .1em;\">Mute</h3></td></tr>\n <tr>\n <td style=\"border: 2px solid #76899e; border-radius: 10px; width: 100%;\">\n <table style=\"width: 100%;\">\n <tr>\n <td style=\"padding: 0px; padding-top: 10px; padding-bottom: 10px\">\n <div ng-init='model2={\"zone_mute\": \"Mute\", \"item\": config.mute, \"hidelabel\": true, \"hideonoff\": true, \"iconset\": \"smarthome-set\",\"icon\": \"power-button\",\"icon_size\": \"36\" }'>\n <widget-switch ng-model=\"model2\" />\n </div>\n </td>\n </tr>\n </table>\n </td>\n </tr>\n </table>\n </td>\n </tr>\n <tr>\n <td colspan=\"2\">\n <div ng-init='volume={\"name\": \"Volume\", \"item\": config.volume, \"type\": \"knob\", \"floor\":0, \"ceil\":50,\"step\":1 }'>\n <div style=\"width: {{config.volumeSize}}; margin: auto;\">\n <div>\n <div id=\"receiver-knob\"><widget-knob ng-model=\"volume\"/></div>\n </div>\n </div> \n </div>\n </td>\n </tr>\n </table>",
Any website or editor who can format it ?
Thanks
Thank you.