openHAB configuration @florian-h05
My JavaScript tools are at openhab-js-tools. This npm module also provides numerous JavaScript rules, see openhab-js-tools : JSDoc.
You may also have a look at rkoshak/openhab-rules-tools.
To access the old NashornJS tools, head over to the nashorn-js-libs branch.
To access the old NashornJS scrips, head over to the nashorn-js-scripts branch.
My custom widget set for the openHAB MainUI (introduced with the 3.0 Release). Feel free to use and/or modify my widgets, just keep a copyright notice.
Please note that those widgets are written for openHAB 3.4 or newer and might not work properly on older versions.
To make all openHAB Cards look like my widgets, add this style section to the config block of your layout page:
style:
--f7-card-border-radius: var(--f7-card-expandable-border-radius)
--f7-card-box-shaddow: 5px 5px 10px 1px rgba(0,0,0,0.1)
--f7-card-margin-horizontal: 5px
--f7-card-padding: 0px
--f7-card-header-font-size: 17px
--f7-card-header-font-weight: 400The CSS style height attribute usually varies between these three sizes:
- 120px for normal-sized widgets
- 150px for large widgets with much content and controls
- 130px for the room card, which is not combined with other cards on one page
For colors, I usually use the Material Design color palette. I choose colors from the 400 or the 600 series. For the light mode I take the normal color or the dark color variation, for dark mode the light color variation.
Which color pairs do I use for which color?
- Green:
(themeOptions.dark === 'dark' ? '#76d275' : '#00701a') - Yellow:
(themeOptions.dark === 'dark' ? '#ffff6b' : '#c5a600') - Orange:
(themeOptions.dark === 'dark' ? '#ffbc45' : '#c25e00') - Red:
(themeOptions.dark === 'dark' ? '#e53735' : '#ab000d') - openHAB orange:
var(—-f7-theme-color)
These color pairs are all from color series 600.
Most icons are from Framework7. Sometimes, openHAB icons are used, e.g. for state representation.
Framework7 icons normally use these sizes:
- small icon (with small text, e.g. upper left corner): 18
- standard icon (with standard text): 20
openHAB icons' size varies.
Text size and weight follows these guidelines:
- small text (e.g. upper left corner):
font-size: 12px - standard text: no extra settings
- small title (used at the top of the card):
font-size: 12px - header text (used at card heading, state representation etc.):
font-size: 24px&font-weight: 400- subheader text:
font-size: 14px
- subheader text:
Line wrap and overflow are usually configured with the following CSS style attributes:
overflow: hidden
text-overflow: ellipsis
white-space: nowrapFor switching lights, outlets etc. I prefer to use a super simple card Apple Home App like card:
This card depends on my Custom CSS for Pages, paste this code into a layout page under the slots->default section:
- component: oh-grid-col
config:
width: "50"
xsmall: "33"
medium: "25"
large: "20"
xlarge: "15"
slots:
default:
- component: oh-label-card
config:
action: toggle
actionItem: Item
actionCommand: ON
actionCommandAlt: OFF
label: Lightbulb
icon: "=items.Item.state === 'ON' ? 'f7:lightbulb' :
'f7:lightbulb_slash'"
vertical: true
iconColor: "=items.Item.state === 'ON' ? 'yellow' : ''"
iconSize: 40Most of my custom widgets are based on this template:
uid: mynewwidget
tags:
- florianh-widgetset
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
groupName: appearance
- description: Header big sized
label: Header
name: header
required: false
type: TEXT
groupName: appearance
- description: Icon on top of the card (only f7 icons (without f7:)), e.g lightbulb, power or divide_circle
label: Icon
name: icon
required: false
type: TEXT
groupName: appearance
- description: word (e.g. 'red'), rgba or HEX
label: Background Color
name: bgcolor
required: false
type: TEXT
groupName: appearance
parameterGroups:
- name: appearance
label: Appearence settings
- name: widgetAction
context: action
label: Action settings
description: Action to perform when the widget is clicked
- name: widgetSettings
label: Widget settings
timestamp: Oct 2, 2022, 7:19:09 PM
component: f7-card
config:
style:
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
background-color: "=props.bgcolor || ''"
height: 120px
margin-left: 5px
margin-right: 5px
minWidth: 180px
noShadow: false
padding: 0px
slots:
content:
- component: f7-block
config:
style:
display: flex
flex-direction: row
left: 16px
position: absolute
top: -5px
slots:
default:
- component: f7-icon
config:
f7: "=props.icon || 'lightbulb'"
size: 18
style:
margin-right: 10px
- component: Label
config:
style:
font-size: 12px
margin-top: 0px
text: "=props.title || ''"
- component: f7-block
config:
style:
left: 17px
position: absolute
width: 100%
top: 45px
slots:
default:
- component: Label
config:
style:
font-size: 24px
font-weight: 400
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
width: "=props.bigOhIcon ? 'calc(100% - 80px)' : '100%'"
text: "=props.header || 'Set header!'"
- component: Label
config:
style:
font-size: 14px
margin-top: -0.25em
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
width: "=props.bigOhIcon ? 'calc(100% - 80px)' : '100%'"
text: =props.subheader
visible: "=props.subheader ? true : false"
...The background-color attribute varies if the widget supports light and dark backgrounds. For more information have a look at Colors.
...
- description: Big icon shown in the upper right corner (hides the toggle)
label: Big openHAB Icon
name: bigOhIcon
required: false
type: TEXT
groupName: appearance
...
- component: oh-icon
config:
icon: =props.bigOhIcon
style:
position: absolute
right: 15px
top: 15px
width: 80px
visible: "=props.bigOhIcon ? true : false"
...Scripts for the openhab-conf/scripts folder.
This script was originally written by @pmpkk at openhab-habpanel-theme-matrix. I only modified it to work with Python 3 and the new InfluxDB 2.x.
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. I added the position of the moon to the image.
Please look at this guide.
openHAB is using log4j2 as logger library, which allows the user to add custom loggers for writing into separate log files.
You can create a custom logger by using the following scheme in $openhab-userdata/etc/log4j2.xml:
In the Appenders section:
<!— KNX appender (custom) —>
<RollingFile fileName="${sys:openhab.logdir}/knx.log" filePattern="${sys:openhab.logdir}/knx.log.%i.gz" name="KNX">
<PatternLayout pattern="%d{yyyy-MM-dd HH:mm:ss.SSS} [%-5.5p] [%-36.36c] - %m%n"/>
<Policies>
<SizeBasedTriggeringPolicy size="16 MB"/>
</Policies>
<DefaultRolloverStrategy max="7"/>
</RollingFile>In the Loggers section:
<!— Custom loggers —>
<!— KNX logger —>
<Logger additivity="false" level="DEBUG" name="org.openhab.logging.knx">
<AppenderRef ref="KNX"/>
</Logger>Because of an issue in Apache Karaf, make sure that the last logger is a <Logger ...>.
This means, you should not add your custom loggers to the end of the Loggers section, but rather to the beginning.
For more details see the corresponding openHAB Core issue.
To use this custom logger in JS Scripting, set the according logger name, e.g.:
// @ts-ignore
console.loggerName = 'org.openhab.logging.knx';