{"id":25206751,"url":"https://github.com/florian-h05/openhab-conf","last_synced_at":"2025-08-21T03:05:01.058Z","repository":{"id":44090697,"uuid":"376336858","full_name":"florian-h05/openhab-conf","owner":"florian-h05","description":"openHAB widgets \u0026 JavaScript scripts","archived":false,"fork":false,"pushed_at":"2025-07-23T16:23:50.000Z","size":7072,"stargazers_count":15,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-23T18:26:21.977Z","etag":null,"topics":["dark-theme","framework7","openhab","smarthome","ui-components","widget"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/florian-h05.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["florian-h05"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2021-06-12T16:30:35.000Z","updated_at":"2025-07-23T16:23:54.000Z","dependencies_parsed_at":"2023-02-08T19:01:09.843Z","dependency_job_id":"540e290b-1ea0-4c33-9594-80ba256b9de3","html_url":"https://github.com/florian-h05/openhab-conf","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/florian-h05/openhab-conf","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florian-h05%2Fopenhab-conf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florian-h05%2Fopenhab-conf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florian-h05%2Fopenhab-conf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florian-h05%2Fopenhab-conf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/florian-h05","download_url":"https://codeload.github.com/florian-h05/openhab-conf/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/florian-h05%2Fopenhab-conf/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271420131,"owners_count":24756490,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dark-theme","framework7","openhab","smarthome","ui-components","widget"],"created_at":"2025-02-10T11:18:03.293Z","updated_at":"2025-08-21T03:05:01.006Z","avatar_url":"https://github.com/florian-h05.png","language":"Python","funding_links":["https://github.com/sponsors/florian-h05"],"categories":[],"sub_categories":[],"readme":"# openHAB configuration [@florian-h05](https://github.com/florian-h05)\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [JavaScript Scripting](#javascript-scripting)\n- [Widgets](#widgets)\n  - [Custom CSS for Pages](#custom-css-for-pages)\n  - [Widget Styling](#widget-styling)\n  - [Switch Widget](#switch-widget)\n  - [Custom Widget Template](#custom-widget-template)\n  - [Widget Components](#widget-components)\n- [Scripts](#scripts)\n  - [Shaddow](#shaddow)\n  - [Custom Loggers](#custom-loggers)\n\n## JavaScript Scripting\n\nMy JavaScript tools are at [openhab-js-tools](https://github.com/florian-h05/openhab-js-tools).\nThis npm module also provides numerous JavaScript rules, see [openhab-js-tools : JSDoc](https://florian-h05.github.io/openhab-js-tools/).\n\nYou may also have a look at [rkoshak/openhab-rules-tools](https://github.com/rkoshak/openhab-rules-tools).\n\nTo access the old NashornJS tools, head over to the [nashorn-js-libs branch](https://github.com/florian-h05/openhab-conf/tree/nashorn-js-libs).\n\nTo access the old NashornJS scrips, head over to the [nashorn-js-scripts branch](https://github.com/florian-h05/openhab-conf/tree/nashorn-js-scripts).\n\n## Widgets\n\nMy custom widget set for the openHAB MainUI (introduced with the 3.0 Release).\nFeel free to use and/or modify [my widgets](/UI/widgets), just keep a copyright notice.\n\nPlease note that those widgets are written for openHAB 3.4 or newer and might not work properly on older versions.\n\n### Custom CSS for Pages\n\nTo make all openHAB Cards look like my widgets, add this style section to the `config` block of your layout page:\n\n```yaml\n  style:\n    --f7-card-border-radius: var(--f7-card-expandable-border-radius)\n    --f7-card-box-shaddow: 5px 5px 10px 1px rgba(0,0,0,0.1)\n    --f7-card-margin-horizontal: 5px\n    --f7-card-padding: 0px\n    --f7-card-header-font-size: 17px\n    --f7-card-header-font-weight: 400\n```\n\n### Widget Styling\n\n#### Height\n\nThe CSS style _height_ attribute usually varies between these three sizes:\n\n- __120px__ for normal-sized widgets\n- __150px__ for large widgets with much content and controls\n- __130px__ for the room card, which is not combined with other cards on one page\n\n#### Colors\n\nFor colors, I usually use the [Material Design color palette](https://m2.material.io/design/color/the-color-system.html#color-theme-creation).\nI choose colors from the __400__ or the __600__ series.\nFor the light mode I take the normal color or the dark color variation, for dark mode the light color variation.\n\nWhich color pairs do I use for which color?\n\n- Green: ```(themeOptions.dark === 'dark' ? '#76d275' : '#00701a')```\n- Yellow: ```(themeOptions.dark === 'dark' ? '#ffff6b' : '#c5a600')```\n- Orange: ```(themeOptions.dark === 'dark' ? '#ffbc45' : '#c25e00')```\n- Red: ```(themeOptions.dark === 'dark' ? '#e53735' : '#ab000d')```\n- openHAB orange: ```var(—-f7-theme-color)```\n\nThese color pairs are all from color series __600__.\n\n#### Icons\n\nMost icons are from [Framework7](https://framework7.io/icons/).\nSometimes, openHAB icons are used, e.g. for state representation.\n\n_Framework7_ icons normally use these sizes:\n\n- small icon (with small text, e.g. upper left corner): __18__\n- standard icon (with standard text): __20__\n\n_openHAB_ icons' size varies.\n\n#### Text\n\nText size and weight follows these guidelines:\n\n- small text (e.g. upper left corner): ```font-size: 12px```\n- standard text: no extra settings\n- small title (used at the top of the card): ```font-size: 12px```\n- header text (used at card heading, state representation etc.): ```font-size: 24px``` \u0026 ```font-weight: 400```\n  - subheader text: ```font-size: 14px```\n\nLine wrap and overflow are usually configured with the following CSS style attributes:\n\n```yaml\noverflow: hidden\ntext-overflow: ellipsis\nwhite-space: nowrap\n```\n\n### Switch Widget\n\nFor switching lights, outlets etc. I prefer to use a super simple Apple Home App like card:\n\n![](./doc/switch_widget.jpeg)\n\nThis card depends on my [Custom CSS for Pages](#custom-css-for-pages), paste this code into a layout page under the `slots`-\u003e`default` section:\n\n```yaml\n              - component: oh-grid-col\n                config:\n                  width: \"50\"\n                  xsmall: \"33\"\n                  medium: \"25\"\n                  large: \"20\"\n                  xlarge: \"15\"\n                slots:\n                  default:\n                    - component: oh-label-card\n                      config:\n                        action: toggle\n                        actionItem: Item\n                        actionCommand: ON\n                        actionCommandAlt: OFF\n                        label: Lightbulb\n                        icon: \"=items.Item.state === 'ON' ? 'f7:lightbulb' :\n                          'f7:lightbulb_slash'\"\n                        vertical: true\n                        iconColor: \"=items.Item.state === 'ON' ? 'yellow' : ''\"\n                        iconSize: 40\n```\n\n### Scene Trigger Widget\n\nFor activating scenes on my scenes page, I use a simple card with a big icon and a small title:\n\n![](./doc/scene_widget.png)\n\nThis card depends on my [Custom CSS for Pages](#custom-css-for-pages), paste this code into a layout page under the `slots`-\u003e`default` section:\n\n```yaml\n              - component: oh-grid-col\n                config:\n                  width: \"50\"\n                  xsmall: \"33\"\n                  medium: \"25\"\n                  large: \"20\"\n                  xlarge: \"15\"\n                slots:\n                  default:\n                    - component: oh-label-card\n                      config:\n                        action: command\n                        actionItem: gLicht\n                        actionCommand: OFF\n                        label: Licht\n                        icon: f7:lightbulb_slash\n                        vertical: true\n                        iconSize: 70\n                        fontSize: 17px\n                        fontWeight: \"600\"\n                        style:\n                          background-color: \"=themeOptions.dark === 'dark' ? '#76d275' : '#00701a'\"\n                          color: \"=themeOptions.dark === 'dark' ? 'black' : 'white'\"\n                        actionFeedback: Erledigt!\n```\n\nThis example card is used for turning off all lights in the house.\nThe background colors are from the Material Design color palette, see [Colors](#colors) above.\n\n### Custom Widget Template\n\nMost of my custom widgets are based on this template:\n\n```yaml\nuid: mynewwidget\ntags:\n  - florianh-widgetset\nprops:\n  parameters:\n    - description: Small title on top of the card\n      label: Title\n      name: title\n      required: false\n      type: TEXT\n      groupName: appearance\n    - description: Header big sized\n      label: Header\n      name: header\n      required: false\n      type: TEXT\n      groupName: appearance\n    - description: Icon on top of the card (only f7 icons (without f7:)), e.g lightbulb, power or divide_circle\n      label: Icon\n      name: icon\n      required: false\n      type: TEXT\n      groupName: appearance\n    - description: word (e.g. 'red'), rgba or HEX\n      label: Background Color\n      name: bgcolor\n      required: false\n      type: TEXT\n      groupName: appearance\n  parameterGroups:\n    - name: appearance\n      label: Appearence settings\n    - name: widgetAction\n      context: action\n      label: Action settings\n      description: Action to perform when the widget is clicked\n    - name: widgetSettings\n      label: Widget settings\ntimestamp: Oct 2, 2022, 7:19:09 PM\ncomponent: f7-card\nconfig:\n  style:\n    border-radius: var(--f7-card-expandable-border-radius)\n    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)\n    background-color: \"=props.bgcolor || ''\"\n    height: 120px\n    margin-left: 5px\n    margin-right: 5px\n    minWidth: 180px\n    noShadow: false\n    padding: 0px\nslots:\n  content:\n    - component: f7-block\n      config:\n        style:\n          display: flex\n          flex-direction: row\n          left: 16px\n          position: absolute\n          top: -5px\n      slots:\n        default:\n          - component: f7-icon\n            config:\n              f7: \"=props.icon || 'lightbulb'\"\n              size: 18\n              style:\n                margin-right: 10px\n          - component: Label\n            config:\n              style:\n                font-size: 12px\n                margin-top: 0px\n              text: \"=props.title || ''\"\n    - component: f7-block\n      config:\n        style:\n          left: 17px\n          position: absolute\n          width: 100%\n          top: 45px\n      slots:\n        default:\n          - component: Label\n            config:\n              style:\n                font-size: 24px\n                font-weight: 400\n                overflow: hidden\n                text-overflow: ellipsis\n                white-space: nowrap\n                width: \"=props.bigOhIcon ? 'calc(100% - 80px)' : '100%'\"\n              text: \"=props.header || 'Set header!'\"\n          - component: Label\n            config:\n              style:\n                font-size: 14px\n                margin-top: -0.25em\n                overflow: hidden\n                text-overflow: ellipsis\n                white-space: nowrap\n                width: \"=props.bigOhIcon ? 'calc(100% - 80px)' : '100%'\"\n              text: =props.subheader\n              visible: \"=props.subheader ? true : false\"\n...\n```\n\nThe _background-color_ attribute varies if the widget supports light and dark backgrounds. For more information have a look at [Colors](#colors).\n\n### Widget Components\n\n#### Big openHAB icon\n\n```yaml\n...\n    - description: Big icon shown in the upper right corner (hides the toggle)\n      label: Big openHAB Icon\n      name: bigOhIcon\n      required: false\n      type: TEXT\n      groupName: appearance\n...\n    - component: oh-icon\n      config:\n        icon: =props.bigOhIcon\n        style:\n          position: absolute\n          right: 15px\n          top: 15px\n          width: 80px\n        visible: \"=props.bigOhIcon ? true : false\"\n...\n```\n\n## Scripts\n\nScripts for the _openhab-conf/scripts_ folder.\n\n### Shaddow\n\nThis script was originally written by [@pmpkk](https://github.com/pmpkk) at [openhab-habpanel-theme-matrix](https://github.com/pmpkk/openhab-habpanel-theme-matrix).\nI only modified it to work with _Python 3_ and the new _InfluxDB 2.x_.\n\n[shaddow.py](/scripts/shaddow.py) generates a _.svg_ image to illustrate where the sun is currently positioned, which site of the house is facing the sun and where the shaddow of your house is.\nI added the position of the moon to the image.\n\nPlease look at [this guide](/scripts/SHADDOW.md).\n\n### Custom Loggers\n\nopenHAB is using [log4j2](https://logging.apache.org/log4j/2.x/) as logger library, which allows the user to add custom loggers for writing into separate log files.\n\nYou can create a custom logger by using the following scheme in _$openhab-userdata/etc/log4j2.xml_:\n\nIn the `Appenders` section:\n\n```xml\n\t\t\u003c!— KNX appender (custom) —\u003e\n\t\t\u003cRollingFile fileName=\"${sys:openhab.logdir}/knx.log\" filePattern=\"${sys:openhab.logdir}/knx.log.%i.gz\" name=\"KNX\"\u003e\n\t\t\t\u003cPatternLayout pattern=\"%d{yyyy-MM-dd HH:mm:ss.SSS} [%-5.5p] [%-36.36c] - %m%n\"/\u003e\n\t\t\t\u003cPolicies\u003e\n\t\t\t\t\u003cSizeBasedTriggeringPolicy size=\"16 MB\"/\u003e\n\t\t\t\u003c/Policies\u003e\n\t\t\t\u003cDefaultRolloverStrategy max=\"7\"/\u003e\n\t\t\u003c/RollingFile\u003e\n```\n\nIn the `Loggers` section:\n\n```xml\n\t\t\u003c!— Custom loggers —\u003e\n\t\t\u003c!— KNX logger —\u003e\n\t\t\u003cLogger additivity=\"false\" level=\"DEBUG\" name=\"org.openhab.logging.knx\"\u003e\n\t\t\t\u003cAppenderRef ref=\"KNX\"/\u003e\n\t\t\u003c/Logger\u003e\n```\n\nBecause of an issue in Apache Karaf, make sure that the last logger is a `\u003cLogger ...\u003e`.\nThis means, you should not add your custom loggers to the end of the `Loggers` section, but rather to the beginning.\nFor more details see the corresponding [openHAB Core issue](https://github.com/openhab/openhab-core/issues/3818#issuecomment-1752504240).\n\nTo use this custom logger in JS Scripting, set the according logger name, e.g.:\n\n```javascript\n// @ts-ignore\nconsole.loggerName = 'org.openhab.logging.knx';\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorian-h05%2Fopenhab-conf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflorian-h05%2Fopenhab-conf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflorian-h05%2Fopenhab-conf/lists"}