├── 3DPrint ├── 3D-Print-Big.yaml ├── 3D-Print-Mobile.yaml ├── 3D-Print-Mobile_1.yaml └── README.md ├── Buttons ├── 1way-Button.yaml ├── 2way-Button.yaml ├── 3way-Button.yaml ├── 4way-Button.yaml ├── Cell_Card_1.yaml ├── Command_Button.yaml ├── Command_Button_Popup.yaml ├── Page-Navigate-Button.yaml └── README.md ├── Calender ├── Calender-5Days.yaml ├── README.md └── Waste-Type.yaml ├── Gardening ├── Cell_Garden_1.yaml ├── README.md └── Watering_Card_1.yaml ├── Light ├── Card_Dimmer_1.0.yaml ├── Cell_Light_Card_1.yaml ├── Cell_Light_Card_2.yaml ├── Cell_Light_Color_Card_2.yaml ├── Light_Card_Stack.yaml ├── Popup_Dimmer_1.1.yaml └── README.md ├── Media ├── Cell_Speaker_Card_1.yaml ├── Chromecast_1 ├── README.md └── input_card_1 ├── Pool ├── Cell_Pool_1.yaml └── README.md ├── README.md ├── Rollershutter ├── Cell_Shutter_Card_1.yaml └── README.md ├── Security └── front_cam_mobile.yaml ├── Settings ├── Cell_Settings_1.yaml └── README.md ├── StateCards ├── Card_Battery_State.yaml ├── Card_Info.yaml ├── Card_Room_Popup+Motion.yaml ├── Card_Room_Popup.yaml ├── Card_Room_Popup_3Lights.yaml ├── Card_Temp_1.yaml ├── Card_Temp_Control.yaml ├── Cell_Weather_Actual_1.yaml ├── Connection_Card_1.yaml ├── Connection_Card_2.yaml ├── Connection_Card_3.yaml ├── README.md └── Service_Card.yaml ├── Thermostat ├── Cell_Temp_Card_1.yaml ├── Liquid_Card.yaml ├── README.md ├── Round_Thermo.yml └── Thermostat-3Stage.yaml └── Weather ├── Card_Weather_Big_1.yaml ├── Card_Weather_Small_1.yaml ├── Card_Weather_Small_Static_2.yaml ├── Cell_Weather_1.yaml └── README.md /3DPrint/3D-Print-Mobile.yaml: -------------------------------------------------------------------------------- 1 | uid: 3D-Print-Mobile 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: icon1 name without ".png", located in static/icons/ folder 6 | label: Icon1 7 | name: iconimage1 8 | required: false 9 | type: TEXT 10 | - description: icon2 name without ".png", located in static/icons/ folder 11 | label: Icon2 12 | name: iconimage2 13 | required: false 14 | type: TEXT 15 | - context: item 16 | description: Set the Power item here 17 | label: Power 18 | name: poweritem 19 | required: false 20 | type: TEXT 21 | - context: item 22 | description: Set the Light item here 23 | label: Light 24 | name: lightitem 25 | required: false 26 | type: TEXT 27 | - description: Set the height of the Widget 28 | label: Widget Height 29 | name: cardheight 30 | required: false 31 | type: TEXT 32 | - description: Name your Printer! 33 | label: Printer Name 34 | name: printername 35 | required: false 36 | type: TEXT 37 | - context: item 38 | description: Set item for Bed Temperature here 39 | label: Bed Temperature 40 | name: bedtempitem 41 | required: false 42 | type: TEXT 43 | - context: item 44 | description: Set item for Hotend Temperature here 45 | label: Hotend Temperature 46 | name: hotendtempitem 47 | required: false 48 | type: TEXT 49 | - context: item 50 | description: Set item for Time Left here 51 | label: Time Left 52 | name: timeleftitem 53 | required: false 54 | type: TEXT 55 | - context: item 56 | description: Set item for Progress here 57 | label: Progress 58 | name: progressitem 59 | required: false 60 | type: TEXT 61 | - description: Set the url of the live stream here 62 | label: Url live stream 63 | name: urllivestream 64 | required: false 65 | type: TEXT 66 | - description: rgba or HEX 67 | label: Background Color 68 | name: bgcolor 69 | required: false 70 | type: TEXT 71 | parameterGroups: [] 72 | timestamp: Nov 27, 2021, 2:17:17 PM 73 | component: f7-card 74 | config: 75 | style: 76 | --weather-card-border-radius: 20px 77 | --weather-card-color: "=(!props.fontColor) ? '255,255,255' : props.fontColor" 78 | --weather-card-text-color: rgba(var(--weather-card-color),1) 79 | --weather-card-text-shadow-color: "=(!props.textShadowColor) ? '0,0,0' : props.textShadowColor" 80 | --weather-font-size-large: 26px 81 | --weather-font-size-normal: 18px 82 | --weather-font-size-small: 16px 83 | --weather-font-size-xlarge: 60px 84 | --weather-font-size-xsmall: 14px 85 | --weather-font-size-xxlarge: 70px 86 | --weather-font-size-xxsmall: 12px 87 | --weather-text-shadow-light: 2px 2px rgba(var(--weather-card-text-shadow-color),.15) 88 | --weather-text-shadow-strong: 2px 2px rgba(var(--weather-card-text-shadow-color),.35) 89 | --weather-text-transform-time: uppercase 90 | -moz-user-select: none 91 | -ms-user-select: none 92 | -webkit-user-select: none 93 | background: "=props.bgcolor ? props.bgcolor : ''" 94 | border-radius: var(--weather-card-border-radius) 95 | color: var(--weather-card-text-color) 96 | height: '=props.cardheight ? props.cardheight : "410px"' 97 | overflow: hidden 98 | user-select: none 99 | slots: 100 | default: 101 | - component: f7-block 102 | config: 103 | class: 104 | - no-padding 105 | - no-margin 106 | style: 107 | height: 100% 108 | left: 0 109 | position: absolute 110 | top: 0 111 | width: 100% 112 | slots: 113 | default: 114 | - component: f7-row 115 | config: 116 | style: 117 | display: grid 118 | height: 10% 119 | justify-content: center 120 | justify-items: center 121 | margin-top: 15px 122 | slots: 123 | default: 124 | - component: Label 125 | config: 126 | style: 127 | font-size: 22px 128 | grid-column: 1 129 | padding-top: 0px 130 | text: '=props.printername ? props.printername : "Printer Name"' 131 | - component: f7-row 132 | config: 133 | style: 134 | align-items: center 135 | display: grid 136 | grid-template-columns: 40% 60% 137 | height: 5% 138 | slots: 139 | default: 140 | - component: oh-image 141 | config: 142 | height: 14 143 | style: 144 | place-self: end 145 | align-self: center 146 | url: ='/static/icons/' + props.iconimage2 + '.png' 147 | width: 14 148 | - component: Label 149 | config: 150 | style: 151 | font-size: 16px 152 | grid-column: 2 153 | margin-left: 5px 154 | text: '=items[props.bedtempitem].state ? items[props.bedtempitem].state + " ℃" : "Name"' 155 | - component: f7-row 156 | config: 157 | style: 158 | align-items: center 159 | display: grid 160 | grid-template-columns: 40% 60% 161 | height: 5% 162 | slots: 163 | default: 164 | - component: oh-image 165 | config: 166 | height: 14 167 | style: 168 | place-self: end 169 | align-self: center 170 | url: ='/static/icons/' + props.iconimage1 + '.png' 171 | width: 14 172 | - component: Label 173 | config: 174 | style: 175 | font-size: 16px 176 | grid-column: 2 177 | margin-left: 5px 178 | text: '=items[props.hotendtempitem].state ? items[props.hotendtempitem].state + " ℃" : "Name"' 179 | - component: f7-row 180 | config: 181 | style: 182 | align-items: center 183 | display: grid 184 | grid-template-columns: 40% 60% 185 | height: 5% 186 | slots: 187 | default: 188 | - component: oh-image 189 | config: 190 | height: 14 191 | style: 192 | place-self: end 193 | align-self: center 194 | url: https://iconsplace.com/wp-content/uploads/_icons/ffffff/256/png/time-icon-18-256.png 195 | width: 14 196 | - component: Label 197 | config: 198 | style: 199 | font-size: 16px 200 | grid-column: 2 201 | margin-left: 5px 202 | text: '=items[props.timeleftitem].state == "NULL" ? "not printing" : Math.floor(items[props.timeleftitem].state /3600)+":"+ Math.floor(items[props.timeleftitem].state / 60) + " h"' 203 | - component: f7-row 204 | config: 205 | style: 206 | align-items: center 207 | display: grid 208 | grid-template-columns: 30% 30% 30% 209 | height: 20% 210 | justify-items: center 211 | slots: 212 | default: 213 | - component: oh-button 214 | config: 215 | action: toggle 216 | actionCommand: ON 217 | actionCommandAlt: OFF 218 | actionItem: =props.poweritem 219 | color: '=items[props.poweritem].state === "ON" ? "green": "red"' 220 | height: 40px 221 | iconF7: power 222 | iconSize: 25px 223 | - component: f7-gauge 224 | config: 225 | border-color: "#005eff" 226 | style: 227 | width: 110px 228 | type: semicircle 229 | value: '=props.progressitem ? (items[props.progressitem].state == "NULL" ? 0 : Math.floor(items[props.progressitem].state / 100)) : 0' 230 | value-text: '=props.progressitem ? (items[props.progressitem].state == "NULL" ? "0 %" : items[props.progressitem].state + " %") : "0"' 231 | value-text-color: "#005eff" 232 | visible: true 233 | - component: oh-button 234 | config: 235 | action: toggle 236 | actionCommand: ON 237 | actionCommandAlt: OFF 238 | actionItem: =props.lightitem 239 | color: '=items[props.lightitem].state === "ON" ? "yellow": "white"' 240 | height: 40px 241 | iconF7: lightbulb 242 | iconSize: 25px 243 | - component: f7-row 244 | config: 245 | style: 246 | align-items: center 247 | display: grid 248 | grid-template-columns: 100% 249 | height: 40% 250 | justify-items: center 251 | slots: 252 | default: 253 | - component: oh-image 254 | config: 255 | height: 200 256 | url: '=props.urllivestream ? props.urllivestream : "https://www.flaticon.com/svg/vstatic/svg/3964/3964391.svg?token=exp=1614265385~hmac=9a01747702e3f44a515d0d898b3f13fc"' 257 | width: 290 258 | - component: f7-progressbar 259 | config: 260 | color: '=items[props.timeleftitem].state > 0 ? "multi" : "red"' 261 | infinite: "=items[props.timeleftitem].state > 0 ? true : false" 262 | style: 263 | border-top-left-radius: 100px 25px 264 | border-top-right-radius: 100px 25px 265 | height: 5px 266 | left: 0 267 | margin: auto 268 | position: absolute 269 | right: 0 270 | width: 95% 271 | -------------------------------------------------------------------------------- /3DPrint/3D-Print-Mobile_1.yaml: -------------------------------------------------------------------------------- 1 | uid: 3D-Print-Mobile_1 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: icon1 name without ".png", located in static/icons/ folder 6 | label: Icon1 7 | name: iconimage1 8 | required: false 9 | type: TEXT 10 | - description: icon2 name without ".png", located in static/icons/ folder 11 | label: Icon2 12 | name: iconimage2 13 | required: false 14 | type: TEXT 15 | - context: item 16 | description: Set the Power item here 17 | label: Power 18 | name: poweritem 19 | required: false 20 | type: TEXT 21 | - context: item 22 | description: Set the Light item here 23 | label: Light 24 | name: lightitem 25 | required: false 26 | type: TEXT 27 | - description: Set the height of the Widget 28 | label: Widget Height 29 | name: cardheight 30 | required: false 31 | type: TEXT 32 | - description: Name your Printer! 33 | label: Printer Name 34 | name: printername 35 | required: false 36 | type: TEXT 37 | - context: item 38 | description: Set item for Bed Temperature here 39 | label: Bed Temperature 40 | name: bedtempitem 41 | required: false 42 | type: TEXT 43 | - context: item 44 | description: Set item for Hotend Temperature here 45 | label: Hotend Temperature 46 | name: hotendtempitem 47 | required: false 48 | type: TEXT 49 | - context: item 50 | description: Set item for Time Left here 51 | label: Time Left 52 | name: timeleftitem 53 | required: false 54 | type: TEXT 55 | - context: item 56 | description: Set item for Progress here 57 | label: Progress 58 | name: progressitem 59 | required: false 60 | type: TEXT 61 | - description: Set the url of the live stream here 62 | label: Url live stream 63 | name: urllivestream 64 | required: false 65 | type: TEXT 66 | - description: rgba or HEX 67 | label: Background Color 68 | name: bgcolor 69 | required: false 70 | type: TEXT 71 | - description: Page which will be opened as popup 72 | label: Page ID 73 | name: page 74 | required: false 75 | parameterGroups: [] 76 | timestamp: Nov 27, 2021, 12:54:56 PM 77 | component: f7-card 78 | config: 79 | style: 80 | --weather-card-border-radius: 20px 81 | --weather-card-color: "=(!props.fontColor) ? '255,255,255' : props.fontColor" 82 | --weather-card-text-color: rgba(var(--weather-card-color),1) 83 | --weather-card-text-shadow-color: "=(!props.textShadowColor) ? '0,0,0' : props.textShadowColor" 84 | --weather-font-size-large: 26px 85 | --weather-font-size-normal: 18px 86 | --weather-font-size-small: 16px 87 | --weather-font-size-xlarge: 60px 88 | --weather-font-size-xsmall: 14px 89 | --weather-font-size-xxlarge: 70px 90 | --weather-font-size-xxsmall: 12px 91 | --weather-text-shadow-light: 2px 2px rgba(var(--weather-card-text-shadow-color),.15) 92 | --weather-text-shadow-strong: 2px 2px rgba(var(--weather-card-text-shadow-color),.35) 93 | --weather-text-transform-time: uppercase 94 | -moz-user-select: none 95 | -ms-user-select: none 96 | -webkit-user-select: none 97 | background: "=props.bgcolor ? props.bgcolor : ''" 98 | border-radius: var(--weather-card-border-radius) 99 | color: var(--weather-card-text-color) 100 | height: '=props.cardheight ? props.cardheight : "180px"' 101 | overflow: hidden 102 | user-select: none 103 | slots: 104 | default: 105 | - component: f7-block 106 | config: 107 | class: 108 | - no-padding 109 | - no-margin 110 | style: 111 | height: 100% 112 | left: 0 113 | position: absolute 114 | top: 0 115 | width: 100% 116 | slots: 117 | default: 118 | - component: f7-row 119 | config: 120 | style: 121 | display: grid 122 | height: 20% 123 | justify-content: center 124 | justify-items: center 125 | margin-top: 15px 126 | slots: 127 | default: 128 | - component: Label 129 | config: 130 | style: 131 | font-size: 18px 132 | grid-column: 1 133 | padding-top: 0px 134 | text: '=props.printername ? props.printername : "Printer Name"' 135 | - component: f7-row 136 | config: 137 | style: 138 | align-items: center 139 | display: grid 140 | grid-template-columns: 30% 70% 141 | height: 13% 142 | slots: 143 | default: 144 | - component: oh-image 145 | config: 146 | height: 14 147 | style: 148 | place-self: end 149 | align-self: center 150 | url: ='/static/icons/' + props.iconimage2 + '.png' 151 | width: 14 152 | - component: Label 153 | config: 154 | style: 155 | font-size: 16px 156 | grid-column: 2 157 | margin-left: 5px 158 | text: '=items[props.bedtempitem].state ? items[props.bedtempitem].state + " ℃" : "Name"' 159 | - component: f7-row 160 | config: 161 | style: 162 | align-items: center 163 | display: grid 164 | grid-template-columns: 30% 70% 165 | height: 13% 166 | slots: 167 | default: 168 | - component: oh-image 169 | config: 170 | height: 14 171 | style: 172 | place-self: end 173 | align-self: center 174 | url: ='/static/icons/' + props.iconimage1 + '.png' 175 | width: 14 176 | - component: Label 177 | config: 178 | style: 179 | font-size: 16px 180 | grid-column: 2 181 | margin-left: 5px 182 | text: '=items[props.hotendtempitem].state ? items[props.hotendtempitem].state + " ℃" : "Name"' 183 | - component: f7-row 184 | config: 185 | style: 186 | align-items: center 187 | display: grid 188 | grid-template-columns: 30% 70% 189 | height: 13% 190 | slots: 191 | default: 192 | - component: oh-image 193 | config: 194 | height: 14 195 | style: 196 | place-self: end 197 | align-self: center 198 | url: https://iconsplace.com/wp-content/uploads/_icons/ffffff/256/png/time-icon-18-256.png 199 | width: 14 200 | - component: Label 201 | config: 202 | style: 203 | font-size: 16px 204 | grid-column: 2 205 | margin-left: 5px 206 | text: '=items[props.timeleftitem].state == "NULL" ? "not printing" : Math.floor(items[props.timeleftitem].state /3600)+":"+ Math.floor(items[props.timeleftitem].state / 60) + " h"' 207 | - component: f7-row 208 | config: 209 | style: 210 | display: grid 211 | grid-template-columns: 50% 50% 212 | height: 10% 213 | justify-items: center 214 | margin-top: 10px 215 | slots: 216 | default: 217 | - component: oh-button 218 | config: 219 | action: toggle 220 | actionCommand: ON 221 | actionCommandAlt: OFF 222 | actionItem: =props.poweritem 223 | color: '=items[props.poweritem].state === "ON" ? "green": "red"' 224 | height: 40px 225 | iconF7: power 226 | iconSize: 25px 227 | - component: oh-button 228 | config: 229 | action: toggle 230 | actionCommand: ON 231 | actionCommandAlt: OFF 232 | actionItem: =props.lightitem 233 | color: '=items[props.lightitem].state === "ON" ? "yellow": "white"' 234 | height: 40px 235 | iconF7: lightbulb 236 | iconSize: 25px 237 | - component: f7-progressbar 238 | config: 239 | color: '=items[props.timeleftitem].state > 0 ? "multi" : "red"' 240 | infinite: "=items[props.timeleftitem].state > 0 ? true : false" 241 | style: 242 | border-top-left-radius: 100px 25px 243 | border-top-right-radius: 100px 25px 244 | height: 5px 245 | left: 0 246 | margin: auto 247 | position: absolute 248 | right: 0 249 | width: 90% 250 | - component: oh-link 251 | config: 252 | action: popup 253 | actionModal: ='page:' + props.page 254 | style: 255 | height: 50px 256 | left: 0px 257 | position: absolute 258 | top: 0px 259 | width: 100% 260 | -------------------------------------------------------------------------------- /3DPrint/README.md: -------------------------------------------------------------------------------- 1 | 3D-Print-Big 2 | 3 | ![3dbig](https://user-images.githubusercontent.com/73241309/145084456-f3947b79-119a-4b8c-8d3b-d0a26a888bcc.PNG) 4 | 5 | 3D-Print-Mobile 6 | 7 | ![333](https://user-images.githubusercontent.com/73241309/145090790-7fcb4f78-3fed-44e3-9198-ad226c2951a5.PNG) 8 | 9 | 3D-Print-Mobile_1 10 | 11 | ![444](https://user-images.githubusercontent.com/73241309/145090816-7781d503-f330-4d7b-8d61-ac50cec84bd0.PNG) 12 | 13 | -------------------------------------------------------------------------------- /Buttons/1way-Button.yaml: -------------------------------------------------------------------------------- 1 | uid: 1way-Button 2 | tags: 3 | - button 4 | - standalone 5 | props: 6 | parameters: 7 | - label: Header 8 | name: text_header 9 | required: false 10 | type: TEXT 11 | - description: icon name without ".png", located in static/icons/ folder 12 | label: Icon 13 | name: iconimage 14 | required: false 15 | type: TEXT 16 | - description: Page which will be opened as popup 17 | label: Page ID 18 | name: page 19 | required: false 20 | - default: BACKUP 21 | description: Text to show on the button. 22 | label: Button Backup 23 | name: buttonbackup 24 | required: true 25 | type: TEXT 26 | groupName: display 27 | - context: item 28 | description: Item to use with this button. 29 | label: Item 30 | name: itembackup 31 | required: true 32 | type: TEXT 33 | groupName: item 34 | - default: ON 35 | description: Command to send to the item. 36 | label: Command 37 | name: command 38 | required: true 39 | type: TEXT 40 | groupName: item 41 | parameterGroups: 42 | - name: display 43 | label: Display Options 44 | - name: item 45 | label: Item 46 | timestamp: Mar 4, 2023, 11:44:19 AM 47 | component: f7-card 48 | config: 49 | style: 50 | background-color: "=props.bgcolor ? props.bgcolor : ''" 51 | border-radius: var(--f7-card-expandable-border-radius) 52 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 53 | height: 120px 54 | noShadow: false 55 | padding: 0px 56 | slots: 57 | content: 58 | - component: f7-block 59 | config: 60 | style: 61 | left: 50px 62 | position: absolute 63 | top: 20px 64 | slots: 65 | default: 66 | - component: Label 67 | config: 68 | style: 69 | font-size: 17px 70 | font-weight: 600 71 | margin-left: 0px 72 | margin-top: -27px 73 | text: "=props.text_header ? props.text_header : 'Set Props'" 74 | - component: f7-block 75 | config: 76 | class: bog 77 | style: 78 | display: grid 79 | gap: 15px 80 | grid-template-columns: auto 81 | padding: 10px 82 | padding-bottom: 5px 83 | padding-left: 20px 84 | padding-right: 15px 85 | padding-top: 60px 86 | round: true 87 | slots: 88 | default: 89 | - component: oh-button 90 | config: 91 | action: command 92 | actionCommand: =props.command 93 | actionItem: =props.itembackup 94 | active: =(items[props.itembackup].state === props.command) 95 | bgColor: "=items[props.itembackup].state === 'ON' ? 'lightblue' : 'rgba(245, 40, 145, 0.8)'" 96 | borderColor: black 97 | class: 98 | - elevation-2 99 | - elevation-hover-10 100 | - elevation-pressed-2 101 | - elevation-transition 102 | fill: true 103 | icon-f7: power 104 | iconColor: "=items[props.itembackup].state === 'ON' ? 'white' : 'lightblue'" 105 | iconSize: 15 106 | outline: false 107 | raised: true 108 | round: true 109 | shadow: true 110 | strong: true 111 | style: 112 | align-items: center 113 | color: white 114 | display: flex 115 | width: 100% 116 | text: =props.buttonbackup 117 | - component: oh-link 118 | config: 119 | action: popup 120 | actionModal: ='page:' + props.page 121 | style: 122 | height: 30px 123 | left: 0px 124 | position: absolute 125 | top: 0px 126 | width: 100% 127 | - component: oh-image 128 | config: 129 | style: 130 | height: 25px 131 | left: 16px 132 | opacity: 0.7 133 | position: absolute 134 | top: 10px 135 | url: ='/static/icons/' + props.iconimage + '.png' 136 | visible: "=props.iconimage ? true : false" 137 | -------------------------------------------------------------------------------- /Buttons/2way-Button.yaml: -------------------------------------------------------------------------------- 1 | uid: 2way-Button 2 | tags: [] 3 | props: 4 | parameters: 5 | - label: Headline 6 | name: headline 7 | required: false 8 | type: TEXT 9 | - label: Headline Color 10 | name: headlinecolor 11 | required: false 12 | type: TEXT 13 | - label: Headline Weight 14 | name: headlineweight 15 | required: false 16 | type: TEXT 17 | - label: Left Button 18 | name: leftButton 19 | required: false 20 | type: TEXT 21 | - label: Right Button 22 | name: rightButton 23 | required: false 24 | type: TEXT 25 | - context: item 26 | label: Item 27 | name: item 28 | required: false 29 | type: TEXT 30 | - label: Background 31 | name: background 32 | required: false 33 | type: TEXT 34 | timestamp: Feb 19, 2021, 9:32:06 PM 35 | component: f7-card 36 | config: 37 | style: 38 | background: '=(props.background) ? props.background : ""' 39 | slots: 40 | default: 41 | - component: Label 42 | config: 43 | text: '=(props.headline) ? props.headline : "Headline"' 44 | style: 45 | color: '=(props.headlinecolor) ? props.headlinecolor : "white"' 46 | padding-bottom: 0px 47 | padding-top: 15px 48 | margin-top: 0px 49 | margin-left: 25px 50 | font-weight: '=(props.headlineweight) ? props.headlineweight : "normal"' 51 | - component: f7-card-content 52 | slots: 53 | default: 54 | - component: f7-segmented 55 | config: 56 | raised: true 57 | round: true 58 | strong: true 59 | slots: 60 | default: 61 | - component: oh-button 62 | config: 63 | text: '=(props.leftButton) ? props.leftbutton : "Anwesend"' 64 | actionItem: =(props.item) 65 | actionCommand: ON 66 | action: command 67 | active: =(items[props.item].state === 'ON') 68 | - component: oh-button 69 | config: 70 | text: '=(props.rightButton) ? props.rightButton : "Abwesend"' 71 | actionItem: =(props.item) 72 | actionCommand: OFF 73 | action: command 74 | active: =(items[props.item].state === 'OFF') 75 | -------------------------------------------------------------------------------- /Buttons/3way-Button.yaml: -------------------------------------------------------------------------------- 1 | uid: 3way-Button 2 | tags: 3 | - 3 buttons 4 | - popup 5 | props: 6 | parameters: 7 | - label: Header 8 | name: text_header 9 | required: false 10 | type: TEXT 11 | - description: icon name without ".png", located in static/icons/ folder 12 | label: Icon 13 | name: iconimage 14 | required: false 15 | type: TEXT 16 | - description: Page which will be opened as popup 17 | label: Page ID 18 | name: page 19 | required: false 20 | - default: Start 21 | description: Text to show on the button. 22 | label: Button Update 23 | name: buttonupdate 24 | required: true 25 | type: TEXT 26 | groupName: display 27 | - default: Start 28 | description: Text to show on the button. 29 | label: Button Reboot 30 | name: buttonreboot 31 | required: true 32 | type: TEXT 33 | groupName: display 34 | - default: Start 35 | description: Text to show on the button. 36 | label: Button Shutdown 37 | name: buttonshutdown 38 | required: true 39 | type: TEXT 40 | groupName: display 41 | - context: item 42 | description: Item to use with this button. 43 | label: Item 44 | name: itemupdate 45 | required: true 46 | type: TEXT 47 | groupName: item 48 | - context: item 49 | description: Item to use with this button. 50 | label: Item 51 | name: itemreboot 52 | required: true 53 | type: TEXT 54 | groupName: item 55 | - context: item 56 | description: Item to use with this button. 57 | label: Item 58 | name: itemshutdown 59 | required: true 60 | type: TEXT 61 | groupName: item 62 | - default: ON 63 | description: Command to send to the item. 64 | label: Command 65 | name: command 66 | required: true 67 | type: TEXT 68 | groupName: item 69 | parameterGroups: 70 | - name: display 71 | label: Display Options 72 | - name: item 73 | label: Item 74 | timestamp: Mar 3, 2023, 9:23:08 AM 75 | component: f7-card 76 | config: 77 | style: 78 | background-color: "=props.bgcolor ? props.bgcolor : ''" 79 | border-radius: var(--f7-card-expandable-border-radius) 80 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 81 | height: 120px 82 | noShadow: false 83 | padding: 0px 84 | slots: 85 | content: 86 | - component: f7-block 87 | config: 88 | style: 89 | left: 50px 90 | position: absolute 91 | top: 20px 92 | slots: 93 | default: 94 | - component: Label 95 | config: 96 | style: 97 | font-size: 17px 98 | font-weight: 600 99 | margin-left: 0px 100 | margin-top: -27px 101 | text: "=props.text_header ? props.text_header : 'Set Props'" 102 | - component: f7-block 103 | config: 104 | class: bog 105 | style: 106 | display: grid 107 | gap: 15px 108 | grid-template-columns: auto auto auto 109 | padding: 10px 110 | padding-bottom: 5px 111 | padding-left: 20px 112 | padding-right: 15px 113 | padding-top: 60px 114 | round: true 115 | slots: 116 | default: 117 | - component: oh-button 118 | config: 119 | action: command 120 | actionCommand: =props.command 121 | actionItem: =props.itemupdate 122 | active: =(items[props.itemupdate].state === props.command) 123 | bgColor: "=items[props.itemupdate].state === 'ON' ? 'lightblue' : 'rgba(245, 40, 145, 0.8)'" 124 | borderColor: black 125 | class: 126 | - elevation-2 127 | - elevation-hover-10 128 | - elevation-pressed-2 129 | - elevation-transition 130 | fill: true 131 | icon-f7: power 132 | iconColor: "=items[props.itemupdate].state === 'ON' ? 'white' : 'lightblue'" 133 | iconSize: 15 134 | outline: false 135 | raised: true 136 | round: true 137 | shadow: true 138 | strong: true 139 | style: 140 | align-items: center 141 | color: white 142 | display: flex 143 | width: 100% 144 | text: =props.buttonupdate 145 | - component: oh-button 146 | config: 147 | action: command 148 | actionCommand: =props.command 149 | actionItem: =props.itemreboot 150 | active: =(items[props.itemreboot].state === props.command) 151 | bgColor: "=items[props.itemreboot].state === 'ON' ? 'lightblue' : 'rgba(245, 40, 145, 0.8)'" 152 | borderColor: black 153 | class: 154 | - elevation-2 155 | - elevation-hover-10 156 | - elevation-pressed-2 157 | - elevation-transition 158 | fill: true 159 | icon-f7: power 160 | iconColor: lightblue 161 | iconSize: 15 162 | outline: false 163 | raised: true 164 | round: true 165 | shadow: true 166 | strong: true 167 | style: 168 | align-items: center 169 | color: white 170 | display: flex 171 | width: 100% 172 | text: =props.buttonreboot 173 | - component: oh-button 174 | config: 175 | action: command 176 | actionCommand: =props.command 177 | actionItem: =props.itemshutdown 178 | active: =(items[props.itemshutdown].state === props.command) 179 | bgColor: "=items[props.itemshutdown].state === 'ON' ? 'lightblue' : 'rgba(245, 40, 145, 0.8)'" 180 | borderColor: black 181 | class: 182 | - elevation-2 183 | - elevation-hover-10 184 | - elevation-pressed-2 185 | - elevation-transition 186 | fill: true 187 | icon-f7: power 188 | iconColor: lightblue 189 | iconSize: 15 190 | outline: false 191 | raised: true 192 | round: true 193 | shadow: true 194 | strong: true 195 | style: 196 | align-items: center 197 | color: white 198 | display: flex 199 | width: 100% 200 | text: =props.buttonshutdown 201 | - component: oh-link 202 | config: 203 | action: popup 204 | actionModal: ='page:' + props.page 205 | style: 206 | height: 30px 207 | left: 0px 208 | position: absolute 209 | top: 0px 210 | width: 100% 211 | - component: oh-image 212 | config: 213 | style: 214 | height: 25px 215 | left: 16px 216 | opacity: 0.7 217 | position: absolute 218 | top: 10px 219 | url: ='/static/icons/' + props.iconimage + '.png' 220 | visible: "=props.iconimage ? true : false" 221 | -------------------------------------------------------------------------------- /Buttons/4way-Button.yaml: -------------------------------------------------------------------------------- 1 | uid: 4way-Button 2 | tags: 3 | - 4er Button 4 | props: 5 | parameters: 6 | - label: Header 7 | name: text_header 8 | required: false 9 | type: TEXT 10 | - description: icon name without ".png", located in static/icons/ folder 11 | label: Icon 12 | name: iconimage 13 | required: false 14 | type: TEXT 15 | - label: Button 1 16 | name: Button1 17 | required: false 18 | type: TEXT 19 | - label: Button 2 20 | name: Button2 21 | required: false 22 | type: TEXT 23 | - label: Button 3 24 | name: Button3 25 | required: false 26 | type: TEXT 27 | - label: Button 4 28 | name: Button4 29 | required: false 30 | type: TEXT 31 | - context: item 32 | label: Item 33 | name: item 34 | required: false 35 | type: TEXT 36 | - label: Backgroundcolor 37 | name: bgcolor 38 | required: false 39 | type: TEXT 40 | timestamp: Nov 25, 2021, 2:15:12 PM 41 | component: f7-card 42 | config: 43 | style: 44 | background-color: '=(props.bgcolor) ? props.bgcolor : ""' 45 | border-radius: var(--f7-card-expandable-border-radius) 46 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 47 | class: 48 | - padding: 0px 49 | height: 100px 50 | margin-left: 5px 51 | margin-right: 5px 52 | noShadow: false 53 | slots: 54 | default: 55 | - component: Label 56 | config: 57 | style: 58 | font-size: 17px 59 | font-weight: 600 60 | margin-left: 50px 61 | margin-top: 0px 62 | padding-bottom: 0px 63 | padding-top: 10px 64 | text: '=(props.text_header) ? props.text_header : "Header"' 65 | - component: f7-card-content 66 | slots: 67 | default: 68 | - component: f7-segmented 69 | config: 70 | raised: true 71 | round: false 72 | strong: false 73 | slots: 74 | default: 75 | - component: oh-button 76 | config: 77 | action: command 78 | actionCommand: 1 79 | actionItem: =props.item 80 | active: "=(items[props.item].state === '1') ? true : false" 81 | text: '=(props.Button1) ? props.Button1 : "Option1"' 82 | - component: oh-button 83 | config: 84 | action: command 85 | actionCommand: 2 86 | actionItem: =(props.item) 87 | active: "=(items[props.item].state === '2') ? true : false" 88 | text: '=(props.Button2) ? props.Button2 : "Option2"' 89 | - component: oh-button 90 | config: 91 | action: command 92 | actionCommand: 3 93 | actionItem: =(props.item) 94 | active: "=(items[props.item].state === '3') ? true : false" 95 | text: '=(props.Button3) ? props.Button3 : "Option3"' 96 | - component: oh-button 97 | config: 98 | action: command 99 | actionCommand: 4 100 | actionItem: =(props.item) 101 | active: "=(items[props.item].state === '4') ? true : false" 102 | text: '=(props.Button4) ? props.Button4 : "Option4"' 103 | - component: oh-image 104 | config: 105 | style: 106 | height: 25px 107 | left: 10px 108 | opacity: 0.7 109 | position: absolute 110 | top: 10px 111 | url: ='/static/icons/' + props.iconimage + '.png' 112 | visible: "=props.iconimage ? true : false" 113 | -------------------------------------------------------------------------------- /Buttons/Cell_Card_1.yaml: -------------------------------------------------------------------------------- 1 | uid: Cell_Card_1 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: Small title on top of the card 6 | label: Title 7 | name: title 8 | required: false 9 | type: TEXT 10 | - description: Header big sized 11 | label: Header 12 | name: header 13 | required: false 14 | type: TEXT 15 | - description: Icon on top of the card (only f7 icons (without f7:)) 16 | label: Icon 17 | name: icon 18 | required: false 19 | type: TEXT 20 | - description: rgba or HEX 21 | label: Background Color 22 | name: bgcolor 23 | required: false 24 | type: TEXT 25 | - context: item 26 | description: Item to control 27 | label: Item 28 | name: item 29 | required: false 30 | type: TEXT 31 | - label: Command to send 32 | name: command 33 | required: false 34 | type: TEXT 35 | parameterGroups: [] 36 | timestamp: Nov 27, 2021, 4:21:52 PM 37 | component: f7-card 38 | config: 39 | style: 40 | background-color: "=props.bgcolor ? props.bgcolor : ''" 41 | border-radius: var(--f7-card-expandable-border-radius) 42 | box-shadow: '=(items[props.item].state === "ON") ? "3px 3px 10px 0px rgba(255,255,255,255)" : "var(--f7-card-expandable-box-shadow)"' 43 | class: 44 | - padding: 0px 45 | height: 100px 46 | margin-left: 5px 47 | margin-right: 5px 48 | noShadow: false 49 | slots: 50 | content: 51 | - component: f7-block 52 | config: 53 | style: 54 | display: flex 55 | flex-direction: row 56 | left: 16px 57 | position: absolute 58 | top: -5px 59 | slots: 60 | default: 61 | - component: f7-icon 62 | config: 63 | f7: =props.icon 64 | size: 18 65 | style: 66 | margin-right: 10px 67 | visible: "=props.icon ? true : false" 68 | - component: Label 69 | config: 70 | style: 71 | font-size: 12px 72 | margin-top: 0px 73 | text: "=props.title ? props.title : ''" 74 | - component: f7-block 75 | config: 76 | style: 77 | bottom: -15px 78 | flex-direction: row 79 | left: 16px 80 | position: absolute 81 | slots: 82 | default: 83 | - component: Label 84 | config: 85 | style: 86 | font-size: 17px 87 | font-weight: 600 88 | margin-left: 0px 89 | margin-top: 0px 90 | text: "=props.header ? props.header : 'Set Props'" 91 | - component: oh-link 92 | config: 93 | action: command 94 | actionCommand: =props.command 95 | actionFeedback: Done! 96 | actionItem: =props.item 97 | style: 98 | actionPosition: center 99 | height: 100px 100 | left: 0 101 | position: absolute 102 | top: 0 103 | width: 100% 104 | -------------------------------------------------------------------------------- /Buttons/Command_Button.yaml: -------------------------------------------------------------------------------- 1 | uid: Command_Button 2 | tags: 3 | - command button 4 | props: 5 | parameters: 6 | - description: Set the Headline for the first state 7 | label: Headline 1 8 | name: headline1 9 | required: false 10 | type: TEXT 11 | groupName: item1 12 | - label: Command 1 13 | name: command1 14 | required: true 15 | type: TEXT 16 | groupName: item1 17 | - label: Icon 1 18 | name: icon1 19 | required: false 20 | type: TEXT 21 | groupName: item1 22 | - label: Icon 1 Color 23 | name: iconcolor1 24 | required: false 25 | type: TEXT 26 | groupName: item1 27 | - description: Set the headline for the second state 28 | label: Headline 2 29 | name: headline2 30 | required: false 31 | type: TEXT 32 | groupName: item2 33 | - label: Command 2 34 | name: command2 35 | required: true 36 | type: TEXT 37 | groupName: item2 38 | - label: Icon 2 39 | name: icon2 40 | required: false 41 | type: TEXT 42 | groupName: item2 43 | - label: Icon 2 Color 44 | name: iconcolor2 45 | required: false 46 | type: TEXT 47 | groupName: item2 48 | - context: item 49 | description: Set the item to control here 50 | label: Item 51 | name: item 52 | required: false 53 | type: TEXT 54 | - label: Headline Color 55 | name: headlinecolor 56 | required: false 57 | type: TEXT 58 | groupName: styling 59 | - label: Headline Weight 60 | name: headlineweight 61 | required: false 62 | type: TEXT 63 | groupName: styling 64 | - label: Headline Size 65 | name: headlinesize 66 | required: false 67 | type: TEXT 68 | groupName: styling 69 | - label: Background 70 | name: background 71 | required: false 72 | type: TEXT 73 | groupName: styling 74 | - label: Card height 75 | name: cardheight 76 | required: false 77 | type: TEXT 78 | groupName: styling 79 | - label: Card width 80 | name: cardwidth 81 | required: false 82 | type: TEXT 83 | groupName: styling 84 | - label: Icon size 85 | name: iconsize 86 | required: false 87 | type: TEXT 88 | groupName: styling 89 | parameterGroups: 90 | - name: item1 91 | label: Status 1 92 | - name: item2 93 | label: Status 2 94 | - name: styling 95 | label: Styling 96 | timestamp: Nov 25, 2021, 2:26:54 PM 97 | component: f7-card 98 | config: 99 | style: 100 | background: '=(props.background) ? props.background : "linear-gradient(to bottom, #003366 0%, #00ffff 100%)"' 101 | border-radius: var(--f7-card-expandable-border-radius) 102 | box-shadow: '=(items[props.item].state === props.command2) ? (props.iconcolor2 ? "8px 8px 28px 1px " + props.iconcolor2 : "10px 10px 28px 1px rgba(255,234,5,0.3)") : "var(--f7-card-expandable-box-shadow)"' 103 | height: '=props.cardheight ? props.cardheight : "8.5em"' 104 | margin-left: auto; 105 | margin-right: auto; 106 | noShadow: false 107 | padding: 0px 108 | width: '=props.cardwidth ? props.cardwidth : "8.5em"' 109 | slots: 110 | default: 111 | - component: f7-block 112 | config: 113 | style: 114 | align-items: center 115 | display: grid 116 | grid-template-rows: 1fr auto auto 1fr 117 | height: 100% 118 | justify-items: center 119 | slots: 120 | default: 121 | - component: Label 122 | - component: Label 123 | config: 124 | style: 125 | color: '=(props.headlinecolor) ? props.headlinecolor : "white"' 126 | font-size: '=(props.headlinesize) ? props.headlinesize: "13px"' 127 | font-weight: '=(props.headlineweight) ? props.headlineweight : "normal"' 128 | padding: 3px 129 | text: '=(items[props.item].state === props.command1) ? ((props.headline1) ? props.headline1 : "Headline") : ((props.headline2) ? props.headline2 : "Headline")' 130 | - component: f7-icon 131 | config: 132 | f7: '=(items[props.item].state === props.command2) ? (props.icon2 ? props.icon2 : "lightbulb_fill") : (props.icon1 ? props.icon1 : "lightbulb")' 133 | size: '=props.iconsize ? props.iconsize: "65px"' 134 | style: 135 | color: '=(items[props.item].state === props.command2) ? (props.iconcolor2 ? props.iconcolor2 : "rgba(255,234,5,1)") : (props.iconcolor1 ? props.iconcolor1 : "")' 136 | padding: 3px 137 | - component: oh-link 138 | config: 139 | action: command 140 | actionCommand: "=(items[props.item].state === props.command1) ? props.command2 : props.command1" 141 | actionItem: =props.item 142 | style: 143 | actionPosition: center 144 | height: 100% 145 | left: 0 146 | position: absolute 147 | top: 0 148 | width: 100% 149 | -------------------------------------------------------------------------------- /Buttons/Command_Button_Popup.yaml: -------------------------------------------------------------------------------- 1 | uid: Command_Button_Popup 2 | tags: 3 | - top area acts as popup 4 | props: 5 | parameters: 6 | - description: Set the Headline for the first state 7 | label: Headline 1 8 | name: headline1 9 | required: false 10 | type: TEXT 11 | groupName: item1 12 | - label: Command 1 13 | name: command1 14 | required: true 15 | type: TEXT 16 | groupName: item1 17 | - label: Icon 1 18 | name: icon1 19 | required: false 20 | type: TEXT 21 | groupName: item1 22 | - label: Icon 1 Color 23 | name: iconcolor1 24 | required: false 25 | type: TEXT 26 | groupName: item1 27 | - description: Set the headline for the second state 28 | label: Headline 2 29 | name: headline2 30 | required: false 31 | type: TEXT 32 | groupName: item2 33 | - label: Command 2 34 | name: command2 35 | required: true 36 | type: TEXT 37 | groupName: item2 38 | - label: Icon 2 39 | name: icon2 40 | required: false 41 | type: TEXT 42 | groupName: item2 43 | - label: Icon 2 Color 44 | name: iconcolor2 45 | required: false 46 | type: TEXT 47 | groupName: item2 48 | - context: item 49 | description: Set the item to control here 50 | label: Item 51 | name: item 52 | required: false 53 | type: TEXT 54 | - label: Headline Color 55 | name: headlinecolor 56 | required: false 57 | type: TEXT 58 | groupName: styling 59 | - label: Headline Weight 60 | name: headlineweight 61 | required: false 62 | type: TEXT 63 | groupName: styling 64 | - label: Headline Size 65 | name: headlinesize 66 | required: false 67 | type: TEXT 68 | groupName: styling 69 | - label: Background 70 | name: background 71 | required: false 72 | type: TEXT 73 | groupName: styling 74 | - label: Card height 75 | name: cardheight 76 | required: false 77 | type: TEXT 78 | groupName: styling 79 | - label: Card width 80 | name: cardwidth 81 | required: false 82 | type: TEXT 83 | groupName: styling 84 | - label: Icon size 85 | name: iconsize 86 | required: false 87 | type: TEXT 88 | groupName: styling 89 | - description: Page which will be opened as popup 90 | label: Page ID 91 | name: page 92 | required: false 93 | parameterGroups: 94 | - name: item1 95 | label: Status 1 96 | - name: item2 97 | label: Status 2 98 | - name: styling 99 | label: Styling 100 | timestamp: Nov 26, 2021, 3:01:02 PM 101 | component: f7-card 102 | config: 103 | style: 104 | background: '=(props.background) ? props.background : "linear-gradient(to bottom, #003366 0%, #00ffff 100%)"' 105 | border-radius: var(--f7-card-expandable-border-radius) 106 | box-shadow: '=(items[props.item].state === props.command2) ? (props.iconcolor2 ? "8px 8px 28px 1px " + props.iconcolor2 : "10px 10px 28px 1px rgba(255,234,5,0.3)") : "var(--f7-card-expandable-box-shadow)"' 107 | height: '=props.cardheight ? props.cardheight : "8.5em"' 108 | margin-left: auto; 109 | margin-right: auto; 110 | noShadow: false 111 | padding: 0px 112 | width: '=props.cardwidth ? props.cardwidth : "8.5em"' 113 | slots: 114 | default: 115 | - component: f7-block 116 | config: 117 | style: 118 | align-items: center 119 | display: grid 120 | grid-template-rows: 1fr auto auto 1fr 121 | height: 100% 122 | justify-items: center 123 | slots: 124 | default: 125 | - component: Label 126 | - component: Label 127 | config: 128 | style: 129 | color: '=(props.headlinecolor) ? props.headlinecolor : "white"' 130 | font-size: '=(props.headlinesize) ? props.headlinesize: "13px"' 131 | font-weight: '=(props.headlineweight) ? props.headlineweight : "normal"' 132 | padding: 3px 133 | text: '=(items[props.item].state === props.command1) ? ((props.headline1) ? props.headline1 : "Headline") : ((props.headline2) ? props.headline2 : "Headline")' 134 | - component: f7-icon 135 | config: 136 | f7: '=(items[props.item].state === props.command2) ? (props.icon2 ? props.icon2 : "lightbulb_fill") : (props.icon1 ? props.icon1 : "lightbulb")' 137 | size: '=props.iconsize ? props.iconsize: "65px"' 138 | style: 139 | color: '=(items[props.item].state === props.command2) ? (props.iconcolor2 ? props.iconcolor2 : "rgba(255,234,5,1)") : (props.iconcolor1 ? props.iconcolor1 : "")' 140 | padding: 3px 141 | - component: oh-link 142 | config: 143 | action: command 144 | actionCommand: "=(items[props.item].state === props.command1) ? props.command2 : props.command1" 145 | actionItem: =props.item 146 | style: 147 | actionPosition: center 148 | height: 100% 149 | left: 0 150 | position: absolute 151 | top: 0 152 | width: 100% 153 | - component: oh-link 154 | config: 155 | action: popup 156 | actionModal: ='page:' + props.page 157 | style: 158 | height: 30px 159 | left: 0px 160 | position: absolute 161 | top: 0px 162 | width: 100% 163 | -------------------------------------------------------------------------------- /Buttons/Page-Navigate-Button.yaml: -------------------------------------------------------------------------------- 1 | uid: Page-Navigate-Button 2 | tags: 3 | - switch Pages 4 | props: 5 | parameters: 6 | - description: Set the Headline for the first state 7 | label: Headline 8 | name: headline 9 | required: false 10 | type: TEXT 11 | - label: Page 12 | name: page 13 | required: true 14 | type: TEXT 15 | - label: Icon 16 | name: icon 17 | required: false 18 | type: TEXT 19 | - label: Icon Color 20 | name: iconcolor 21 | required: false 22 | type: TEXT 23 | - label: Headline Color 24 | name: headlinecolor 25 | required: false 26 | type: TEXT 27 | groupName: styling 28 | - label: Headline Weight 29 | name: headlineweight 30 | required: false 31 | type: TEXT 32 | groupName: styling 33 | - label: Headline Size 34 | name: headlinesize 35 | required: false 36 | type: TEXT 37 | groupName: styling 38 | - label: Background 39 | name: background 40 | required: false 41 | type: TEXT 42 | groupName: styling 43 | - label: Card height 44 | name: cardheight 45 | required: false 46 | type: TEXT 47 | groupName: styling 48 | - label: Card width 49 | name: cardwidth 50 | required: false 51 | type: TEXT 52 | groupName: styling 53 | - label: Icon size 54 | name: iconsize 55 | required: false 56 | type: TEXT 57 | groupName: styling 58 | parameterGroups: 59 | - name: styling 60 | label: Styling 61 | timestamp: Nov 25, 2021, 2:25:34 PM 62 | component: f7-card 63 | config: 64 | style: 65 | background: '=(props.background) ? props.background : "linear-gradient(to bottom, #003366 0%, #00ffff 100%)"' 66 | border-radius: var(--f7-card-expandable-border-radius) 67 | height: '=props.cardheight ? props.cardheight : "8.5em"' 68 | margin-left: auto; 69 | margin-right: auto; 70 | noShadow: false 71 | padding: 0px 72 | width: '=props.cardwidth ? props.cardwidth : "8.5em"' 73 | slots: 74 | default: 75 | - component: f7-block 76 | config: 77 | style: 78 | align-items: center 79 | display: grid 80 | grid-template-rows: 1fr auto auto 1fr 81 | height: 100% 82 | justify-items: center 83 | slots: 84 | default: 85 | - component: Label 86 | - component: Label 87 | config: 88 | style: 89 | color: '=(props.headlinecolor) ? props.headlinecolor : "white"' 90 | font-size: '=(props.headlinesize) ? props.headlinesize: "13px"' 91 | font-weight: '=(props.headlineweight) ? props.headlineweight : "normal"' 92 | padding: 3px 93 | text: '=props.headline ? props.headline : "Headline"' 94 | - component: f7-icon 95 | config: 96 | f7: '=props.icon ? props.icon : "house"' 97 | size: '=props.iconsize ? props.iconsize: "65px"' 98 | style: 99 | color: "=props.iconcolor ? props.iconcolor : white" 100 | padding: 3px 101 | - component: oh-link 102 | config: 103 | action: navigate 104 | actionPage: '=props.page ? "page:" + props.page : "page:Schnellzugriff"' 105 | style: 106 | actionPosition: center 107 | height: 100% 108 | left: 0 109 | position: absolute 110 | top: 0 111 | width: 100% 112 | -------------------------------------------------------------------------------- /Buttons/README.md: -------------------------------------------------------------------------------- 1 | 1way-Button 2 | 3 | Bildschirmfoto 2023-03-04 um 14 33 53 4 | 5 | 6 | 2way-Button 7 | 8 | ![555](https://user-images.githubusercontent.com/73241309/145092511-5e0d00c3-efd3-41a8-a371-0ddd1d489164.PNG) 9 | 10 | 3way-Button 11 | 12 | Bildschirmfoto 2023-03-03 um 09 23 56 13 | 14 | 15 | 4way-Button 16 | 17 | ![44444](https://user-images.githubusercontent.com/73241309/145102994-aee78b93-b884-4f70-bc1d-8bb86047e1e9.PNG) 18 | 19 | Command-Button & Command-Button-Popup 20 | 21 | ![666](https://user-images.githubusercontent.com/73241309/145092586-5b3b4290-ec8e-4c62-ac4d-861d8b23b0fd.PNG) 22 | 23 | Page-Navigate-Button 24 | 25 | ![777](https://user-images.githubusercontent.com/73241309/145092625-32d29066-8d3c-4caa-a044-b8703bb712a9.PNG) 26 | -------------------------------------------------------------------------------- /Calender/Calender-5Days.yaml: -------------------------------------------------------------------------------- 1 | uid: Calender-5Days 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: A text prop 6 | label: Prop 1 7 | name: prop1 8 | required: false 9 | type: TEXT 10 | - context: item 11 | description: An item to control 12 | label: Item 13 | name: item 14 | required: false 15 | type: TEXT 16 | parameterGroups: [] 17 | timestamp: Feb 25, 2021, 9:59:43 PM 18 | component: f7-card 19 | config: 20 | style: 21 | height: '=props.cardheight ? props.cardheight : "275px"' 22 | background: black 23 | border-radius: 20px 24 | slots: 25 | default: 26 | - component: f7-block 27 | config: 28 | class: 29 | - no-padding 30 | - no-margin 31 | style: 32 | width: 100% 33 | height: 100% 34 | position: absolute 35 | top: 0 36 | left: 0 37 | slots: 38 | default: 39 | - component: f7-row 40 | config: 41 | width: 100% 42 | style: 43 | justify-items: center 44 | slots: 45 | default: 46 | - component: f7-col 47 | config: 48 | style: 49 | width: 20% 50 | display: grid 51 | align-items: center 52 | justify-items: start 53 | slots: 54 | default: 55 | - component: f7-row 56 | config: 57 | style: 58 | height: 10% 59 | justify-items: center 60 | slots: 61 | default: 62 | - component: Label 63 | config: 64 | text: =dayjs().format('MMMM') 65 | style: 66 | padding-top: 5px 67 | padding-left: 20px 68 | color: grey 69 | - component: f7-row 70 | config: 71 | style: 72 | height: 10% 73 | justify-items: center 74 | slots: 75 | default: 76 | - component: Label 77 | config: 78 | text: =dayjs().format('dddd') 79 | style: 80 | padding-left: 20px 81 | font-size: 17px 82 | color: "#005eff" 83 | - component: f7-row 84 | config: 85 | style: 86 | height: 70% 87 | align-items: end 88 | slots: 89 | default: 90 | - component: Label 91 | config: 92 | text: =dayjs().format('DD') 93 | style: 94 | font-size: 75px 95 | padding-left: 20px 96 | position: absolute 97 | bottom: 0 98 | left: 0 99 | color: lightgrey 100 | - component: f7-col 101 | config: 102 | style: 103 | width: 70% 104 | margin-top: 40px 105 | slots: 106 | default: 107 | - component: f7-list 108 | config: 109 | style: 110 | width: 200px 111 | slots: 112 | default: 113 | - component: f7-list-item 114 | config: 115 | title: =dayjs(items.Mull_Ergebnisstart_0.state).format('DD.MM.') 116 | footer: =items.Mull_Ergebnistitel_0.state 117 | style: 118 | border-left: solid 119 | border-color: '=items.Mull_Ergebnistitel_0.state === "Restmüll" ? "grey" : (items.Mull_Ergebnistitel_0.state === "Gelbe Tonne" ? "yellow" : (items.Mull_Ergebnistitel_0.state === "Papiertonne" ? "#005eff" : ""))' 120 | - component: f7-list-item 121 | config: 122 | title: =dayjs(items.Mull_Ergebnisstart_1.state).format('DD.MM.') 123 | footer: =items.Mull_Ergebnistitel_1.state 124 | style: 125 | border-left: solid 126 | border-color: '=items.Mull_Ergebnistitel_1.state === "Restmüll" ? "grey" : (items.Mull_Ergebnistitel_1.state === "Gelbe Tonne" ? "yellow" : (items.Mull_Ergebnistitel_1.state === "Papiertonne" ? "#005eff" : ""))' 127 | - component: f7-list-item 128 | config: 129 | title: =dayjs(items.Mull_Ergebnisstart_Tag3.state).format('DD.MM.') 130 | footer: =items.Mull_Ergebnistitel_2.state 131 | style: 132 | border-left: solid 133 | border-color: '=items.Mull_Ergebnistitel_2.state === "Restmüll" ? "grey" : (items.Mull_Ergebnistitel_2.state === "Gelbe Tonne" ? "yellow" : (items.Mull_Ergebnistitel_2.state === "Papiertonne" ? "#005eff" : ""))' 134 | - component: f7-list-item 135 | config: 136 | title: =dayjs(items.Mull_Ergebnisstart_Tag2.state).format('DD.MM.') 137 | footer: =items.Mull_Ergebnistitel_Tag3.state 138 | style: 139 | border-left: solid 140 | border-color: '=items.Mull_Ergebnistitel_Tag3.state === "Restmüll" ? "grey" : (items.Mull_Ergebnistitel_Tag3.state === "Gelbe Tonne" ? "yellow" : (items.Mull_Ergebnistitel_Tag3.state === "Papiertonne" ? "#005eff" : ""))' 141 | - component: f7-list-item 142 | config: 143 | title: =dayjs(items.Mull_Ergebnisstart_Tag5.state).format('DD.MM.') 144 | footer: =items.Mull_Ergebnistitel_Tag5.state 145 | style: 146 | border-left: solid 147 | border-color: '=items.Mull_Ergebnistitel_Tag5.state === "Restmüll" ? "grey" : (items.Mull_Ergebnistitel_Tag5.state === "Gelbe Tonne" ? "yellow" : (items.Mull_Ergebnistitel_Tag5.state === "Papiertonne" ? "#005eff" : ""))' 148 | - component: f7-app 149 | -------------------------------------------------------------------------------- /Calender/README.md: -------------------------------------------------------------------------------- 1 | Calender-5Days 2 | 3 | ![888](https://user-images.githubusercontent.com/73241309/145093726-35d4bf86-9918-4a87-add7-74869a6521be.PNG) 4 | 5 | Waste-Type 6 | 7 | ![999](https://user-images.githubusercontent.com/73241309/145093766-4d2b74ed-9f4f-44ed-b8e3-c5f0641ff9e4.PNG) 8 | -------------------------------------------------------------------------------- /Calender/Waste-Type.yaml: -------------------------------------------------------------------------------- 1 | uid: Waste-Type 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: Small title on top of the card 6 | label: Title 7 | name: title 8 | required: false 9 | type: TEXT 10 | - description: Icon on top of the card (only f7 icons (without f7:)) 11 | label: Icon 12 | name: icon 13 | required: false 14 | type: TEXT 15 | - context: item 16 | description: Item für Beschreibung der nächsten Abholung 17 | label: Item 18 | name: item 19 | required: false 20 | type: TEXT 21 | - context: item 22 | description: Datum der nächsten Abholung 23 | label: Item_Datum 24 | name: item_date 25 | required: false 26 | type: TEXT 27 | parameterGroups: [] 28 | timestamp: Nov 24, 2021, 11:12:20 PM 29 | component: f7-card 30 | config: 31 | style: 32 | background: '=(items[props.item].state) == "Restmüll (grau) // GEM" ? "gray" : (items[props.item].state) == "Altpapier (blau) // GEM" ? "blue" : (items[props.item].state) == "Verpackungen (gelb) // GEM" ? "yellow" : "Bioabfall (braun) // GEM" ? "green" : "Grünschnitt //GEM" ? "green" : "teal"' 33 | border-radius: var(--f7-card-expandable-border-radius) 34 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 35 | class: 36 | - padding: 0px 37 | height: 100px 38 | margin-left: 5px 39 | margin-right: 5px 40 | noShadow: false 41 | slots: 42 | content: 43 | - component: f7-block 44 | config: 45 | style: 46 | display: flex 47 | flex-direction: row 48 | left: 16px 49 | position: absolute 50 | top: -5px 51 | slots: 52 | default: 53 | - component: f7-icon 54 | config: 55 | f7: =props.icon 56 | size: 18 57 | style: 58 | margin-right: 10px 59 | visible: "=props.icon ? true : false" 60 | - component: Label 61 | config: 62 | style: 63 | font-size: 12px 64 | margin-top: 0px 65 | text: "=props.title ? props.title : ''" 66 | - component: f7-block 67 | config: 68 | style: 69 | bottom: -15px 70 | flex-direction: row 71 | left: 16px 72 | position: absolute 73 | slots: 74 | default: 75 | - component: Label 76 | config: 77 | style: 78 | font-size: 17px 79 | font-weight: 600 80 | margin-left: 0px 81 | margin-top: 0px 82 | text: =items[props.item].state 83 | - component: f7-block 84 | config: 85 | style: 86 | bottom: -45px 87 | flex-direction: row 88 | left: 16px 89 | position: absolute 90 | slots: 91 | default: 92 | - component: Label 93 | config: 94 | style: 95 | font-size: 17px 96 | font-weight: 600 97 | margin-left: 0px 98 | margin-top: 0px 99 | text: =items[props.item_date].displayState 100 | -------------------------------------------------------------------------------- /Gardening/Cell_Garden_1.yaml: -------------------------------------------------------------------------------- 1 | uid: Cell_Garden_1 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: Small title on top of the card 6 | label: Title 7 | name: title 8 | required: false 9 | type: TEXT 10 | - description: rgba or HEX 11 | label: Background Color 12 | name: bgcolor 13 | required: false 14 | type: TEXT 15 | - context: item 16 | description: Item Soil Humidity 17 | label: Item 18 | name: item_soil_hum 19 | required: false 20 | type: TEXT 21 | - context: item 22 | description: Item Current Irrigation Zone 23 | label: Item 24 | name: item_zone 25 | required: false 26 | type: TEXT 27 | parameterGroups: [] 28 | timestamp: Nov 24, 2021, 8:51:10 PM 29 | component: f7-card 30 | config: 31 | style: 32 | background-color: "=props.bgcolor ? props.bgcolor : ''" 33 | border-radius: var(--f7-card-expandable-border-radius) 34 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 35 | class: 36 | - padding: 0px 37 | height: 150px 38 | margin-left: 5px 39 | margin-right: 5px 40 | noShadow: false 41 | slots: 42 | content: 43 | - component: f7-block 44 | config: 45 | style: 46 | display: flex 47 | flex-direction: row 48 | left: 16px 49 | position: absolute 50 | top: -5px 51 | slots: 52 | default: 53 | - component: oh-icon 54 | config: 55 | icon: tree 56 | style: 57 | filter: "='invert(' + (themeOptions.dark === 'dark' ? '1' : '0') + ')'" 58 | height: 18px 59 | margin-right: 5px 60 | - component: Label 61 | config: 62 | style: 63 | font-size: 12px 64 | margin-top: 0px 65 | text: "=props.title ? props.title : ''" 66 | - component: f7-block 67 | config: 68 | class: 69 | - text-align-center 70 | style: 71 | bottom: -15px 72 | flex-direction: row 73 | left: 16px 74 | position: absolute 75 | width: 100% 76 | slots: 77 | default: 78 | - component: Label 79 | config: 80 | style: 81 | font-size: 18px 82 | font-weight: 400 83 | margin-left: 0px 84 | margin-top: 0px 85 | text: =items[props.item_soil_hum].displayState 86 | - component: f7-block 87 | config: 88 | class: 89 | - text-align-center 90 | style: 91 | bottom: -42px 92 | left: 16px 93 | position: absolute 94 | width: 100% 95 | slots: 96 | default: 97 | - component: f7-icon 98 | config: 99 | f7: drop 100 | size: 22 101 | - component: f7-block 102 | config: 103 | class: 104 | - text-align-center 105 | style: 106 | bottom: -90px 107 | left: 16px 108 | position: absolute 109 | width: 100% 110 | slots: 111 | default: 112 | - component: Label 113 | config: 114 | style: 115 | font-size: 13px 116 | margin-top: 5px 117 | text: =items[props.item_zone].displayState 118 | -------------------------------------------------------------------------------- /Gardening/README.md: -------------------------------------------------------------------------------- 1 | Cell_Garten_1 2 | 3 | ![5555](https://user-images.githubusercontent.com/73241309/145106335-13ef3f05-451a-4c84-bf34-9ea8b323089f.PNG) 4 | 5 | Watering_Card_1 6 | 7 | ![111111111](https://user-images.githubusercontent.com/73241309/145110522-28b6835d-5b08-4ee1-99c9-637365c78ac3.PNG) 8 | -------------------------------------------------------------------------------- /Light/Card_Dimmer_1.0.yaml: -------------------------------------------------------------------------------- 1 | uid: Card_Dimmer_1 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: Small title on top of the card 6 | label: Title 7 | name: title 8 | required: false 9 | type: TEXT 10 | - description: Header big sized 11 | label: Header 12 | name: header 13 | required: false 14 | type: TEXT 15 | - context: item 16 | description: Item to control 17 | label: Item 18 | name: item 19 | required: false 20 | type: TEXT 21 | parameterGroups: [] 22 | timestamp: Nov 24, 2021, 11:30:05 PM 23 | component: f7-card 24 | config: 25 | style: 26 | background-color: "=props.bgcolor ? props.bgcolor : ''" 27 | border-radius: var(--f7-card-expandable-border-radius) 28 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 29 | class: 30 | - padding: 0px 31 | height: 70px 32 | margin-bottom: 2px 33 | margin-left: 2px 34 | margin-right: 2px 35 | margin-top: 2px 36 | noShadow: false 37 | slots: 38 | content: 39 | - component: f7-block 40 | config: 41 | style: 42 | display: flex 43 | flex-direction: row 44 | left: 8px 45 | position: absolute 46 | top: -5px 47 | slots: 48 | default: 49 | - component: f7-icon 50 | config: 51 | f7: '=(Number.parseInt(items[props.item].state) > 0) ? "lightbulb_fill" : "lightbulb"' 52 | size: 16 53 | style: 54 | color: '=(Number.parseInt(items[props.item].state) > 0) ? "#F4E274" : ""' 55 | margin-right: 5px 56 | - component: Label 57 | config: 58 | style: 59 | font-size: 12px 60 | margin-top: 0px 61 | padding-right: 5px 62 | text: Licht 63 | - component: Label 64 | config: 65 | style: 66 | font-size: 12px 67 | margin-top: 0px 68 | text: =items[props.item].displayState 69 | visible: "=(Number.parseInt(items[props.item].state) > 0) ? true : false" 70 | - component: f7-block 71 | config: 72 | style: 73 | flex-direction: row 74 | left: 9px 75 | position: absolute 76 | top: 50px 77 | slots: 78 | default: 79 | - component: Label 80 | config: 81 | style: 82 | font-size: 15px 83 | font-weight: 600 84 | line-height: 1 85 | margin-left: 0px 86 | margin-top: 2px 87 | text: "=props.header ? props.header : 'Set Props'" 88 | - component: oh-link 89 | config: 90 | action: toggle 91 | actionCommand: ON 92 | actionCommandAlt: OFF 93 | actionItem: =props.item 94 | style: 95 | height: 40px 96 | left: 0px 97 | position: absolute 98 | top: 30px 99 | width: 100% 100 | - component: oh-link 101 | config: 102 | action: popup 103 | popupOpen: .myPopupOpenDI 104 | style: 105 | height: 30px 106 | left: 0px 107 | position: absolute 108 | top: 0px 109 | width: 100% 110 | slots: 111 | default: 112 | - component: f7-popup 113 | config: 114 | class: myPopupOpenDI 115 | style: 116 | --f7-popup-tablet-height: 101px 117 | --f7-popup-tablet-width: 70% 118 | swipeToClose: true 119 | slots: 120 | default: 121 | - component: widget:Popup_Dimmer 122 | config: 123 | item: =props.item 124 | title: =props.header 125 | -------------------------------------------------------------------------------- /Light/Cell_Light_Card_1.yaml: -------------------------------------------------------------------------------- 1 | uid: Cell_Light_Card_1 2 | tags: 3 | - Schalter&Schieberegler 4 | props: 5 | parameters: 6 | - description: Small title on top of the card 7 | label: Title 8 | name: title 9 | required: false 10 | type: TEXT 11 | - description: Header big sized 12 | label: Header 13 | name: header 14 | required: false 15 | type: TEXT 16 | - description: Icon on top of the card (only f7 icons (without f7:)) 17 | label: Icon 18 | name: icon 19 | required: false 20 | type: TEXT 21 | - description: rgba or HEX 22 | label: Background Color 23 | name: bgcolor 24 | required: false 25 | type: TEXT 26 | - context: item 27 | description: Item to control on/off 28 | label: Item 29 | name: item_schalter 30 | required: false 31 | type: TEXT 32 | - context: item 33 | description: Item to control brightness 34 | label: Item 35 | name: item_brightness 36 | required: false 37 | type: TEXT 38 | parameterGroups: [] 39 | timestamp: Nov 25, 2021, 2:17:18 PM 40 | component: f7-card 41 | config: 42 | style: 43 | background-color: "=props.bgcolor ? props.bgcolor : ''" 44 | border-radius: var(--f7-card-expandable-border-radius) 45 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 46 | height: 120px 47 | margin-left: 5px 48 | margin-right: 5px 49 | noShadow: false 50 | padding: 0px 51 | slots: 52 | content: 53 | - component: f7-block 54 | config: 55 | style: 56 | display: flex 57 | flex-direction: row 58 | left: 16px 59 | position: absolute 60 | top: -5px 61 | slots: 62 | default: 63 | - component: f7-icon 64 | config: 65 | f7: =props.icon 66 | size: 18 67 | style: 68 | margin-right: 10px 69 | visible: "=props.icon ? true : false" 70 | - component: Label 71 | config: 72 | style: 73 | font-size: 12px 74 | margin-top: 0px 75 | text: "=props.title ? props.title : ''" 76 | - component: f7-block 77 | config: 78 | style: 79 | bottom: -15px 80 | flex-direction: row 81 | left: 16px 82 | position: absolute 83 | slots: 84 | default: 85 | - component: Label 86 | config: 87 | style: 88 | font-size: 17px 89 | font-weight: 600 90 | margin-left: 0px 91 | margin-top: 0px 92 | text: "=props.header ? props.header : 'Set Props'" 93 | - component: oh-slider 94 | config: 95 | item: =props.item_brightness 96 | max: 100 97 | min: 0 98 | style: 99 | --f7-range-bar-border-radius: 8px 100 | --f7-range-bar-size: 8px 101 | --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) 102 | --f7-range-knob-size: 20px 103 | bottom: -75px 104 | left: 20px 105 | position: absolute 106 | width: calc(100% - 40px) 107 | - component: oh-toggle 108 | config: 109 | item: =props.item_schalter 110 | style: 111 | position: absolute 112 | right: 20px 113 | top: 15px 114 | -------------------------------------------------------------------------------- /Light/Cell_Light_Card_2.yaml: -------------------------------------------------------------------------------- 1 | uid: Cell_Light_Card_2 2 | tags: 3 | - Schalter ohne Schieberegler 4 | props: 5 | parameters: 6 | - description: Small title on top of the card 7 | label: Title 8 | name: title 9 | required: false 10 | type: TEXT 11 | - description: Header big sized 12 | label: Header 13 | name: header 14 | required: false 15 | type: TEXT 16 | - description: icon name without ".png", located in static/icons/ folder 17 | label: Icon 18 | name: iconimage 19 | required: false 20 | type: TEXT 21 | - description: rgba or HEX 22 | label: Background Color 23 | name: bgcolor 24 | required: false 25 | type: TEXT 26 | - context: item 27 | description: Item to control on/off 28 | label: Item 29 | name: item_schalter 30 | required: false 31 | type: TEXT 32 | - context: item 33 | description: Item to control brightness 34 | label: Item brightness 35 | name: item_brightness 36 | required: false 37 | type: TEXT 38 | - context: item 39 | description: Item to control color temperature 40 | label: Item light temperature 41 | name: item_light_temperature 42 | required: false 43 | type: TEXT 44 | parameterGroups: [] 45 | timestamp: Nov 25, 2021, 2:17:43 PM 46 | component: f7-card 47 | config: 48 | style: 49 | background-color: "=props.bgcolor ? props.bgcolor : ''" 50 | border-radius: var(--f7-card-expandable-border-radius) 51 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 52 | height: 120px 53 | margin-left: 5px 54 | margin-right: 5px 55 | noShadow: false 56 | padding: 0px 57 | slots: 58 | content: 59 | - component: f7-block 60 | config: 61 | style: 62 | display: flex 63 | flex-direction: row 64 | left: 40px 65 | position: absolute 66 | top: -5px 67 | slots: 68 | default: 69 | - component: Label 70 | config: 71 | style: 72 | font-size: 12px 73 | margin-top: 0px 74 | text: "=props.title ? props.title : ''" 75 | - component: f7-block 76 | config: 77 | style: 78 | flex-direction: row 79 | left: 10px 80 | position: absolute 81 | top: 50px 82 | slots: 83 | default: 84 | - component: Label 85 | config: 86 | style: 87 | font-size: 17px 88 | font-weight: 600 89 | margin-left: 0px 90 | margin-top: 0px 91 | text: "=props.header ? props.header : 'Set Props'" 92 | - component: f7-block 93 | config: 94 | class: 95 | - no-padding 96 | style: 97 | flex-direction: row 98 | position: absolute 99 | top: 70px 100 | width: 100% 101 | slots: 102 | default: 103 | - component: oh-slider 104 | config: 105 | color: red 106 | item: =props.item_light_temperature 107 | label: true 108 | max: 100 109 | min: 0 110 | style: 111 | --f7-range-bar-active-bg-color: transparent 112 | --f7-range-bar-bg-color: linear-gradient(to right, rgba(215, 226, 255), rgba(224, 238, 238),rgba(255, 215, 44, 0.5),rgba(255, 215, 44, 0.8)) 113 | --f7-range-bar-border-radius: 10px 114 | --f7-range-bar-size: 12px 115 | --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) 116 | --f7-range-knob-size: 20px 117 | --f7-range-label-text-color: black 118 | left: 20px 119 | margin-top: 7px 120 | width: calc(100% - 40px) 121 | z-index: 99 !important 122 | visible: "=(props.item_light_temperature) ? true : false" 123 | - component: f7-block 124 | config: 125 | class: 126 | - no-padding 127 | style: 128 | flex-direction: row 129 | position: absolute 130 | top: 100px 131 | width: 100% 132 | slots: 133 | default: 134 | - component: oh-slider 135 | config: 136 | color: red 137 | item: =props.item_brightness 138 | label: true 139 | style: 140 | --f7-range-bar-active-bg-color: transparent 141 | --f7-range-bar-bg-color: linear-gradient(to right, rgba(113,113,113,0.8), rgba(246,158,81,0.1)) 142 | --f7-range-bar-border-radius: 10px 143 | --f7-range-bar-size: 12px 144 | --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) 145 | --f7-range-knob-size: 20px 146 | --f7-range-label-text-color: black 147 | left: 20px 148 | width: calc(100% - 40px) 149 | z-index: 99 !important 150 | visible: "=(props.item_brightness) ? true : false" 151 | - component: oh-toggle 152 | config: 153 | item: =props.item_schalter 154 | style: 155 | position: absolute 156 | right: 10px 157 | top: 15px 158 | - component: oh-image 159 | config: 160 | style: 161 | height: 25px 162 | left: 10px 163 | opacity: 0.7 164 | position: absolute 165 | top: 10px 166 | url: ='/static/icons/' + props.iconimage + '.png' 167 | visible: "=props.iconimage ? true : false" 168 | -------------------------------------------------------------------------------- /Light/Cell_Light_Color_Card_2.yaml: -------------------------------------------------------------------------------- 1 | uid: Cell_Light_Color_Card_2 2 | tags: 3 | - Schalter & Farbauswahl 4 | props: 5 | parameters: 6 | - description: Small title on top of the card 7 | label: Title 8 | name: title 9 | required: false 10 | type: TEXT 11 | - description: Header big sized 12 | label: Header 13 | name: header 14 | required: false 15 | type: TEXT 16 | - description: icon name without ".png", located in static/icons/ folder 17 | label: Icon 18 | name: iconimage 19 | required: false 20 | type: TEXT 21 | - description: rgba or HEX 22 | label: Background Color 23 | name: bgcolor 24 | required: false 25 | type: TEXT 26 | - context: item 27 | description: Item to control on/off 28 | label: Item ON OFF 29 | name: item_schalter 30 | required: false 31 | type: TEXT 32 | - context: item 33 | description: Item to control color 34 | label: Item light color 35 | name: item_color 36 | required: false 37 | type: TEXT 38 | parameterGroups: [] 39 | timestamp: Nov 26, 2021, 2:02:48 PM 40 | component: f7-card 41 | config: 42 | style: 43 | background-color: "=props.bgcolor ? props.bgcolor : ''" 44 | border-radius: var(--f7-card-expandable-border-radius) 45 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 46 | height: 165px 47 | margin-left: 5px 48 | margin-right: 5px 49 | noShadow: false 50 | padding: 0px 51 | slots: 52 | default: 53 | - component: f7-card-content 54 | config: 55 | class: 56 | - display-flex 57 | - flex-direction-column 58 | - justify-content-flex-start 59 | - align-items-left 60 | style: 61 | --f7-color-picker-slider-knob-size: 20px 62 | --f7-color-picker-slider-size: 18px 63 | slots: 64 | default: 65 | - component: f7-row 66 | config: 67 | style: 68 | display: flex 69 | flex-direction: row 70 | left: 40px 71 | position: absolute 72 | top: 10px 73 | slots: 74 | default: 75 | - component: Label 76 | config: 77 | style: 78 | font-size: 12px 79 | margin-top: 0px 80 | text: "=props.title ? props.title : ''" 81 | - component: f7-block 82 | config: 83 | class: 84 | - no-padding 85 | style: 86 | flex-direction: row 87 | left: 10px 88 | position: absolute 89 | top: 40px 90 | slots: 91 | default: 92 | - component: Label 93 | config: 94 | style: 95 | font-size: 17px 96 | font-weight: 600 97 | margin-left: 0px 98 | margin-top: 0px 99 | text: "=props.header ? props.header : 'Set Props'" 100 | - component: f7-block 101 | config: 102 | class: 103 | - no-padding 104 | style: 105 | --f7-color-picker-slider-knob-size: 15px 106 | --f7-color-picker-slider-size: 8px 107 | --f7-range-bar-active-bg-color: transparent 108 | --f7-range-bar-bg-color: linear-gradient(to right, rgba(246,158,81,0.8), rgba(246,158,81,0)) 109 | --f7-range-bar-border-radius: 10px 110 | --f7-range-bar-size: 12px 111 | --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) 112 | --f7-range-knob-size: 20px 113 | --f7-range-label-text-color: black 114 | flex-direction: row 115 | left: 10px 116 | margin-top: 0px 117 | position: absolute 118 | top: 70px 119 | width: calc(100% - 100px) 120 | z-index: 99 !important 121 | slots: 122 | default: 123 | - component: oh-colorpicker 124 | config: 125 | color: red 126 | item: =props.item_color 127 | label: true 128 | modules: 129 | - hsb-sliders 130 | - component: oh-toggle 131 | config: 132 | item: =props.item_schalter 133 | style: 134 | position: absolute 135 | right: 90px 136 | top: 15px 137 | - component: oh-button 138 | config: 139 | action: command 140 | actionCommand: 0,100,100 141 | actionItem: =props.item_color 142 | iconColor: red 143 | iconF7: app_fill 144 | iconSize: 34 145 | style: 146 | background: transparent 147 | height: 35px 148 | position: absolute 149 | right: 35px 150 | top: 10px 151 | - component: oh-button 152 | config: 153 | action: command 154 | actionCommand: 15,100,100 155 | actionItem: =props.item_color 156 | iconColor: deeporange 157 | iconF7: app_fill 158 | iconSize: 34 159 | style: 160 | background: transparent 161 | height: 34px 162 | position: absolute 163 | right: 35px 164 | top: 45px 165 | - component: oh-button 166 | config: 167 | action: command 168 | actionCommand: 30,100,100 169 | actionItem: =props.item_color 170 | iconColor: orange 171 | iconF7: app_fill 172 | iconSize: 34 173 | style: 174 | background: transparent 175 | height: 35px 176 | position: absolute 177 | right: 35px 178 | top: 80px 179 | - component: oh-button 180 | config: 181 | action: command 182 | actionCommand: 60,100,100 183 | actionItem: =props.item_color 184 | iconColor: yellow 185 | iconF7: app_fill 186 | iconSize: 34 187 | style: 188 | background: transparent 189 | height: 35px 190 | position: absolute 191 | right: 35px 192 | top: 115px 193 | - component: oh-button 194 | config: 195 | action: command 196 | actionCommand: 300,100,100 197 | actionItem: =props.item_color 198 | iconColor: purple 199 | iconF7: app_fill 200 | iconSize: 34 201 | style: 202 | background: transparent 203 | height: 33px 204 | position: absolute 205 | right: 0px 206 | top: 10px 207 | - component: oh-button 208 | config: 209 | action: command 210 | actionCommand: 240,100,100 211 | actionItem: =props.item_color 212 | iconColor: blue 213 | iconF7: app_fill 214 | iconSize: 34 215 | style: 216 | background: transparent 217 | height: 33px 218 | position: absolute 219 | right: 0px 220 | top: 45px 221 | - component: oh-button 222 | config: 223 | action: command 224 | actionCommand: 180,100,100 225 | actionItem: =props.item_color 226 | iconColor: lightblue 227 | iconF7: app_fill 228 | iconSize: 34 229 | style: 230 | background: transparent 231 | height: 33px 232 | position: absolute 233 | right: 0px 234 | top: 80px 235 | - component: oh-button 236 | config: 237 | action: command 238 | actionCommand: 120,100,100 239 | actionItem: =props.item_color 240 | iconColor: green 241 | iconF7: app_fill 242 | iconSize: 34 243 | style: 244 | background: transparent 245 | height: 33px 246 | position: absolute 247 | right: 0px 248 | top: 115px 249 | - component: oh-image 250 | config: 251 | style: 252 | height: 25px 253 | left: 10px 254 | opacity: 0.7 255 | position: absolute 256 | top: 10px 257 | url: ='/static/icons/' + props.iconimage + '.png' 258 | visible: "=props.iconimage ? true : false" 259 | -------------------------------------------------------------------------------- /Light/Light_Card_Stack.yaml: -------------------------------------------------------------------------------- 1 | uid: Light_Card_Stack 2 | tags: 3 | - dropdown 4 | props: 5 | parameters: [] 6 | parameterGroups: [] 7 | timestamp: Nov 25, 2021, 2:25:10 PM 8 | component: oh-list-card 9 | config: 10 | accordionList: true 11 | title: Erdgeschoss 12 | slots: 13 | default: 14 | - component: oh-list-item 15 | config: 16 | icon: oh:corridor 17 | title: Flur 18 | slots: 19 | accordion: 20 | - component: oh-list 21 | config: 22 | accordionList: true 23 | class: 24 | - margin-left 25 | slots: 26 | default: 27 | - component: oh-list-item 28 | config: 29 | badge: '=(items.Treppe.state === "ON") ? "An" : "Aus"' 30 | badgeColor: '=items.Treppe.state === "ON" ? "green" : "red"' 31 | icon: oh:light 32 | title: Licht Treppe 33 | slots: 34 | accordion: 35 | - component: oh-list 36 | config: 37 | accordionList: true 38 | class: 39 | - margin-left 40 | slots: 41 | default: 42 | - component: oh-toggle-item 43 | config: 44 | color: blue 45 | icon: oh:switch 46 | item: Treppe 47 | title: Power 48 | - component: oh-list-item 49 | config: 50 | icon: oh:sofa 51 | title: Wohnzimmer 52 | slots: 53 | accordion: 54 | - component: oh-list 55 | config: 56 | accordionList: true 57 | class: 58 | - margin-left 59 | slots: 60 | default: 61 | - component: oh-list-item 62 | config: 63 | badge: =items.Kugelleuchte_Leistung.state 64 | badgeColor: '=items.Kugelleuchte_Helligkeit.state > "0" ? "green" : "red"' 65 | footer: Die Leistung wird in dem grünen bzw. roten Aktivitätsmerkmal angezeigt. 66 | icon: oh:light 67 | title: Kugelleuchte 68 | slots: {} 69 | - component: oh-list 70 | config: 71 | accordionList: true 72 | class: 73 | - margin-left 74 | slots: 75 | default: 76 | - component: oh-slider-item 77 | config: 78 | color: blue 79 | item: Kugelleuchte_Helligkeit 80 | title: Helligkeit 81 | - component: oh-slider-item 82 | config: 83 | color: blue 84 | item: Kugelleuchte_Lichttemperatur 85 | title: Lichttemperatur 86 | - component: oh-list-item 87 | config: 88 | badge: '=(items.Decke.state === "ON") ? "An" : "Aus"' 89 | badgeColor: '=items.Decke.state === "ON" ? "green" : "red"' 90 | icon: oh:light 91 | title: Licht Galerie 92 | slots: 93 | accordion: 94 | - component: oh-list 95 | config: 96 | accordionList: true 97 | class: 98 | - margin-left 99 | slots: 100 | default: 101 | - component: oh-toggle-item 102 | config: 103 | color: blue 104 | icon: oh:switch 105 | item: Decke 106 | title: Power 107 | - component: oh-list-item 108 | config: 109 | badge: '=(items.Tischleuchte.state === "ON") ? "An" : "Aus"' 110 | badgeColor: '=items.Tischleuchte.state === "ON" ? "green" : "red"' 111 | icon: oh:light 112 | title: Tischleuchte 113 | slots: 114 | accordion: 115 | - component: oh-list 116 | config: 117 | accordionList: true 118 | class: 119 | - margin-left 120 | slots: 121 | default: 122 | - component: oh-toggle-item 123 | config: 124 | color: blue 125 | icon: oh:switch 126 | item: Tischleuchte 127 | title: Power 128 | - component: oh-list-item 129 | config: 130 | badge: =items.TVLeuchte_Leistung.state 131 | badgeColor: '=items.TVLeuchte_Helligkeit.state > "0" ? "green" : "red"' 132 | footer: Die Leistung wird in dem grünen bzw. roten Aktivitätsmerkmal angezeigt. 133 | icon: oh:light 134 | title: TV Leuchte 135 | slots: 136 | accordion: 137 | - component: oh-list 138 | config: 139 | accordionList: true 140 | class: 141 | - margin-left 142 | slots: 143 | default: 144 | - component: oh-slider-item 145 | config: 146 | color: blue 147 | item: TVLeuchte_Helligkeit 148 | title: Helligkeit 149 | - component: oh-slider-item 150 | config: 151 | color: blue 152 | item: TVLeuchte_Lichttemperatur 153 | title: Lichttemperatur 154 | - component: oh-list-item 155 | config: 156 | badge: '=(items.Vitrine_Betrieb.state === "ON") ? "An" : "Aus"' 157 | badgeColor: '=items.Vitrine_Betrieb.state === "ON" ? "green" : "red"' 158 | icon: oh:light 159 | title: Licht Vitrine 160 | slots: 161 | accordion: 162 | - component: oh-list 163 | config: 164 | config: 165 | accordionList: true 166 | class: 167 | - margin-left 168 | slots: 169 | default: 170 | - component: oh-toggle-item 171 | config: 172 | color: blue 173 | icon: oh:switch 174 | item: Vitrine_Betrieb 175 | title: Power 176 | - component: oh-list-item 177 | config: 178 | icon: oh:Kitchen 179 | title: Küche 180 | slots: 181 | accordion: 182 | - component: oh-list 183 | config: 184 | accordionList: true 185 | class: 186 | - margin-left 187 | slots: 188 | default: 189 | - component: oh-list-item 190 | config: 191 | badge: '=(items.Fensterleuchte_Betrieb.state === "ON") ? "An" : "Aus"' 192 | badgeColor: '=items.Fensterleuchte_Betrieb.state === "ON" ? "green" : "red"' 193 | icon: oh:light 194 | title: Licht Küchenfenster 195 | slots: 196 | accordion: 197 | - component: oh-list 198 | config: 199 | accordionList: true 200 | class: 201 | - margin-left 202 | slots: 203 | default: 204 | - component: oh-toggle-item 205 | config: 206 | color: blue 207 | icon: oh:switch 208 | item: Fensterleuchte_Betrieb 209 | title: Power 210 | -------------------------------------------------------------------------------- /Light/Popup_Dimmer_1.1.yaml: -------------------------------------------------------------------------------- 1 | uid: Popup_Dimmer 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: Small title on top of the card 6 | label: Title 7 | name: title 8 | required: false 9 | type: TEXT 10 | - context: item 11 | description: item to control 12 | label: Item 13 | name: item 14 | required: false 15 | type: TEXT 16 | timestamp: Nov 24, 2021, 11:29:40 PM 17 | component: f7-card 18 | config: 19 | style: 20 | margin: 0px 21 | title: =props.title + " Dimmen" 22 | slots: 23 | default: 24 | - component: f7-row 25 | config: 26 | class: 27 | - display-flex 28 | style: 29 | padding-bottom: 25px 30 | padding-left: 20px 31 | padding-right: 20px 32 | padding-top: 15px 33 | slots: 34 | default: 35 | - component: oh-slider 36 | config: 37 | item: =props.item 38 | label: true 39 | max: 100 40 | min: 0 41 | scale: true 42 | scaleSteps: 4 43 | unit: "%" 44 | -------------------------------------------------------------------------------- /Light/README.md: -------------------------------------------------------------------------------- 1 | Cell_Light_Card_1 2 | 3 | ![22222222](https://user-images.githubusercontent.com/73241309/145114229-36b16151-b295-4dd8-b69d-a499838147c9.PNG) 4 | 5 | Cell_Light_Card_2 6 | 7 | ![3333333](https://user-images.githubusercontent.com/73241309/145114473-e9bcaff6-b292-4e1f-8eb7-667ef0bd31ba.PNG) 8 | 9 | Cell_Light_Color_Card_2 10 | 11 | ![444444](https://user-images.githubusercontent.com/73241309/145115356-8cb273b2-d3c0-4da9-b4c9-7483e72e567d.PNG) 12 | 13 | Light_CArd_Stack 14 | 15 | ![555555](https://user-images.githubusercontent.com/73241309/145115632-0f80522a-3f86-4213-8ba3-d9693c2c3cee.PNG) 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Media/Cell_Speaker_Card_1.yaml: -------------------------------------------------------------------------------- 1 | uid: Cell_Speaker_Card_1 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: Small title on top of the card 6 | label: Title 7 | name: title 8 | required: false 9 | type: TEXT 10 | - description: Header big sized 11 | label: Header 12 | name: header 13 | required: false 14 | type: TEXT 15 | - description: HEX or rgba 16 | label: Background Color 17 | name: bgcolor 18 | required: false 19 | type: TEXT 20 | - context: item 21 | description: Item to control 22 | label: Item 23 | name: item 24 | required: false 25 | type: TEXT 26 | - context: item 27 | description: Item for volume 28 | label: Item 29 | name: item_volume 30 | required: false 31 | type: TEXT 32 | - context: item 33 | description: Item for Coverbild 34 | label: Item 35 | name: item_cover 36 | required: false 37 | type: TEXT 38 | parameterGroups: [] 39 | timestamp: Nov 24, 2021, 8:50:44 PM 40 | component: f7-card 41 | config: 42 | style: 43 | background-color: "=props.bgcolor ? props.bgcolor : ''" 44 | border-radius: var(--f7-card-expandable-border-radius) 45 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 46 | height: 120px 47 | margin-left: 5px 48 | margin-right: 5px 49 | noShadow: false 50 | padding: 0px 51 | slots: 52 | content: 53 | - component: f7-block 54 | config: 55 | style: 56 | display: flex 57 | flex-direction: row 58 | left: 16px 59 | position: absolute 60 | top: -5px 61 | slots: 62 | default: 63 | - component: f7-icon 64 | config: 65 | f7: "=items[props.item].state === 'PLAY' ? 'speaker_3' : 'speaker'" 66 | size: 18 67 | style: 68 | margin-right: 10px 69 | - component: Label 70 | config: 71 | style: 72 | font-size: 12px 73 | margin-top: 0px 74 | text: "=props.title ? props.title : ''" 75 | - component: f7-block 76 | config: 77 | style: 78 | bottom: -15px 79 | flex-direction: row 80 | left: 16px 81 | position: absolute 82 | slots: 83 | default: 84 | - component: Label 85 | config: 86 | style: 87 | font-size: 17px 88 | font-weight: 600 89 | margin-left: 0px 90 | margin-top: 0px 91 | text: "=props.header ? props.header : 'Set Props'" 92 | - null 93 | - component: oh-button 94 | config: 95 | action: command 96 | actionCommand: PLAY 97 | actionItem: =props.item 98 | iconColor: "=items[props.item].state === 'PAUSE' ? themeOptions.dark === 'dark' ? 'white' : 'black' : 'red' " 99 | iconF7: play_circle 100 | iconSize: 35 101 | style: 102 | background: transparent 103 | height: 35px 104 | position: absolute 105 | right: 10px 106 | top: 12px 107 | - component: oh-button 108 | config: 109 | action: command 110 | actionCommand: PAUSE 111 | actionItem: =props.item 112 | iconColor: "=items[props.item].state === 'PLAY' ? themeOptions.dark === 'dark' ? 'white' : 'black' : 'red'" 113 | iconF7: pause_circle 114 | iconSize: 35 115 | style: 116 | background: transparent 117 | height: 35px 118 | position: absolute 119 | right: 10px 120 | top: 74px 121 | - component: oh-slider 122 | config: 123 | item: =props.item_volume 124 | max: 100 125 | min: 0 126 | style: 127 | --f7-range-bar-border-radius: 8px 128 | --f7-range-bar-size: 8px 129 | --f7-range-knob-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) 130 | --f7-range-knob-size: 20px 131 | bottom: -75px 132 | left: 20px 133 | position: absolute 134 | width: calc(100% - 205px) 135 | - component: oh-image 136 | config: 137 | item: =props.item_cover 138 | style: 139 | bottom: -78px 140 | height: 100px 141 | position: absolute 142 | right: 70px 143 | -------------------------------------------------------------------------------- /Media/Chromecast_1: -------------------------------------------------------------------------------- 1 | uid: Chromecast_1 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: How all the Items associated with this chromecast starts 6 | label: Item prefix 7 | name: prefix 8 | required: false 9 | type: TEXT 10 | - description: Title for the widget 11 | label: Static Title 12 | name: title 13 | required: false 14 | parameterGroups: [] 15 | timestamp: Mar 11, 2021, 10:26:18 AM 16 | component: f7-card 17 | config: 18 | title: =props.title 19 | slots: 20 | default: 21 | - component: f7-row 22 | slots: 23 | default: 24 | - component: oh-image 25 | config: 26 | item: =props.prefix+"_Image" 27 | style: 28 | width: 100% 29 | height: auto 30 | - component: f7-row 31 | config: 32 | class: 33 | - justify-content-left 34 | slots: 35 | default: 36 | - component: f7-col 37 | slots: 38 | default: 39 | - component: Label 40 | config: 41 | class: 42 | - text-align-center 43 | text: =items[props.prefix+"_MediaArtist"].state 44 | - component: f7-col 45 | slots: 46 | default: 47 | - component: Label 48 | config: 49 | class: 50 | - text-align-center 51 | text: =items[props.prefix+"_MediaTitle"].state 52 | - component: f7-row 53 | config: 54 | class: 55 | - padding-top 56 | - padding-bottom 57 | slots: 58 | default: 59 | - component: f7-col 60 | slots: 61 | default: 62 | - component: oh-player-controls 63 | config: 64 | item: =props.prefix+"_MediaControl" 65 | - component: f7-col 66 | slots: 67 | default: 68 | - component: oh-slider 69 | config: 70 | item: =props.prefix+"_Volume" 71 | min: 0 72 | max: 100 73 | step: 10 74 | unit: "%" 75 | label: true 76 | - component: oh-button 77 | config: 78 | text: Stop 79 | iconF7: stop 80 | fill: true 81 | color: red 82 | action: command 83 | actionCommand: ON 84 | actionFeedback: Media Stopped 85 | actionItem: =props.prefix+"_Stop" 86 | class: 87 | - margin-top 88 | - component: f7-row 89 | config: 90 | class: 91 | - justify-content-center 92 | slots: 93 | default: 94 | - component: Label 95 | config: 96 | text: =items[props.prefix+"_App"].state 97 | -------------------------------------------------------------------------------- /Media/README.md: -------------------------------------------------------------------------------- 1 | Cell_Speaker_Card_1 2 | 3 | ![88888](https://user-images.githubusercontent.com/73241309/145107146-487b2a1c-6680-4fe3-9a32-425f296db598.PNG) 4 | 5 | Chromecast_1 6 | 7 | ![9999](https://user-images.githubusercontent.com/73241309/145110180-e7fd1eea-0708-4752-be57-862541479ef8.PNG) 8 | 9 | input_card_1 10 | 11 | Bildschirmfoto 2023-03-03 um 09 41 27 12 | -------------------------------------------------------------------------------- /Media/input_card_1: -------------------------------------------------------------------------------- 1 | uid: input_card_1 2 | tags: [] 3 | props: 4 | parameters: 5 | - label: Header 6 | name: text_header 7 | required: false 8 | type: TEXT 9 | - description: icon name without ".png", located in static/icons/ folder 10 | label: Icon 11 | name: iconimage 12 | required: false 13 | type: TEXT 14 | - label: Background Image 15 | name: bgimage 16 | required: false 17 | type: TEXT 18 | - label: Background Color 19 | name: bgcolor 20 | required: false 21 | type: TEXT 22 | - context: item 23 | description: item for sending text 24 | label: Item 25 | name: text 26 | required: false 27 | type: TEXT 28 | timestamp: Mar 3, 2023, 9:34:38 AM 29 | component: f7-card 30 | config: 31 | style: 32 | background-color: "=props.bgcolor ? props.bgcolor : ''" 33 | border-radius: var(--f7-card-expandable-border-radius) 34 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 35 | height: 120px 36 | noShadow: false 37 | padding: 0px 38 | slots: 39 | content: 40 | - component: f7-block 41 | config: 42 | style: 43 | left: 50px 44 | position: absolute 45 | top: 20px 46 | slots: 47 | default: 48 | - component: Label 49 | config: 50 | style: 51 | font-size: 17px 52 | font-weight: 600 53 | margin-left: 0px 54 | margin-top: -27px 55 | text: "=props.text_header ? props.text_header : 'Set Props'" 56 | default: 57 | - component: oh-input-card 58 | config: 59 | inputmode: text 60 | item: =props.text 61 | outline: false 62 | sendButton: true 63 | type: text 64 | validate: true 65 | visible: true 66 | style: 67 | margin-left: 50px 68 | width: 80% 69 | height: 100% 70 | position: absolute 71 | - component: oh-image 72 | config: 73 | style: 74 | height: 25px 75 | left: 16px 76 | opacity: 0.7 77 | position: absolute 78 | top: 10px 79 | url: ='/static/icons/' + props.iconimage + '.png' 80 | visible: "=props.iconimage ? true : false" 81 | -------------------------------------------------------------------------------- /Pool/Cell_Pool_1.yaml: -------------------------------------------------------------------------------- 1 | uid: Cell_Pool_1 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: Small title on top of the card 6 | label: Title 7 | name: title 8 | required: false 9 | type: TEXT 10 | - description: HEX or rgba 11 | label: Background Color 12 | name: bgcolor 13 | required: false 14 | type: TEXT 15 | - context: item 16 | description: Item Pooltemp 17 | label: Item 18 | name: item_temp 19 | required: false 20 | type: TEXT 21 | - context: item 22 | description: Item Poolpump 23 | label: Item 24 | name: item_pump 25 | required: false 26 | type: TEXT 27 | parameterGroups: [] 28 | timestamp: Nov 24, 2021, 8:49:21 PM 29 | component: f7-card 30 | config: 31 | style: 32 | background-color: "=props.bgcolor ? props.bgcolor : ''" 33 | border-radius: var(--f7-card-expandable-border-radius) 34 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 35 | class: 36 | - padding: 0px 37 | height: 150px 38 | margin-left: 5px 39 | margin-right: 5px 40 | noShadow: false 41 | slots: 42 | content: 43 | - component: f7-block 44 | config: 45 | style: 46 | display: flex 47 | flex-direction: row 48 | left: 16px 49 | position: absolute 50 | top: -5px 51 | slots: 52 | default: 53 | - component: oh-icon 54 | config: 55 | icon: swimming_pool 56 | style: 57 | filter: "='invert(' + (themeOptions.dark === 'dark' ? '1' : '0') + ')'" 58 | height: 18px 59 | margin-right: 5px 60 | - component: Label 61 | config: 62 | style: 63 | font-size: 12px 64 | margin-top: 0px 65 | text: "=props.title ? props.title : ''" 66 | - component: f7-block 67 | config: 68 | class: 69 | - text-align-center 70 | style: 71 | bottom: -15px 72 | flex-direction: row 73 | left: 16px 74 | position: absolute 75 | width: 100% 76 | slots: 77 | default: 78 | - component: Label 79 | config: 80 | style: 81 | font-size: 18px 82 | font-weight: 400 83 | margin-left: 0px 84 | margin-top: 0px 85 | text: =items[props.item_temp].state 86 | - component: f7-block 87 | config: 88 | class: 89 | - text-align-center 90 | style: 91 | bottom: -42px 92 | left: 16px 93 | position: absolute 94 | width: 100% 95 | slots: 96 | default: 97 | - component: f7-icon 98 | config: 99 | f7: thermometer 100 | size: 22 101 | - component: f7-block 102 | config: 103 | class: 104 | - text-align-center 105 | style: 106 | bottom: -90px 107 | left: 16px 108 | position: absolute 109 | width: 100% 110 | slots: 111 | default: 112 | - component: oh-toggle 113 | config: 114 | item: =props.item_pump 115 | - component: Label 116 | config: 117 | style: 118 | font-size: 13px 119 | text: Pumpe 120 | -------------------------------------------------------------------------------- /Pool/README.md: -------------------------------------------------------------------------------- 1 | Cell_Pool_1 2 | 3 | ![66666](https://user-images.githubusercontent.com/73241309/145106597-d3a04b26-89aa-4db9-9c9c-329b9ece8344.PNG) 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # openHAB3Widgets 2 | Custom Widgets for openHAB3 3 | 4 | A little Collection of Widgets I use in openHAB 3. 5 | 6 | Some of them are created by People in the Forum, etc. and some are created by me. 7 | 8 | Buy Me A Coffee 9 | Buy Me A Coffee 10 | 11 | 12 | ![Screenshot 2021-12-08 130345](https://user-images.githubusercontent.com/73241309/145213176-20b8d8c4-f821-4505-bd6b-a35a2a36c43c.png) 13 | 14 | -------------------------------------------------------------------------------- /Rollershutter/Cell_Shutter_Card_1.yaml: -------------------------------------------------------------------------------- 1 | uid: Cell_Shutter_Card_1 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: Small title on top of the card 6 | label: Title 7 | name: title 8 | required: false 9 | type: TEXT 10 | - description: Header big sized 11 | label: Header 12 | name: header 13 | required: false 14 | type: TEXT 15 | - description: Icon on top of the card 16 | label: Icon 17 | name: icon 18 | required: false 19 | type: TEXT 20 | - description: HEX or rgba 21 | label: Background Color 22 | name: bgcolor 23 | required: false 24 | type: TEXT 25 | - context: item 26 | description: Shutter item to control 27 | label: Item 28 | name: item 29 | required: false 30 | type: TEXT 31 | parameterGroups: [] 32 | timestamp: Nov 26, 2021, 7:58:14 PM 33 | component: f7-card 34 | config: 35 | style: 36 | background-color: "=props.bgcolor ? props.bgcolor : ''" 37 | border-radius: var(--f7-card-expandable-border-radius) 38 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 39 | height: 120px 40 | margin-left: 5px 41 | margin-right: 5px 42 | noShadow: false 43 | padding: 0px 44 | slots: 45 | content: 46 | - component: f7-block 47 | config: 48 | style: 49 | display: flex 50 | flex-direction: row 51 | left: 16px 52 | position: absolute 53 | top: -5px 54 | slots: 55 | default: 56 | - component: f7-icon 57 | config: 58 | f7: =props.icon 59 | size: 18 60 | style: 61 | margin-right: 10px 62 | visible: "=props.icon ? true : false" 63 | - component: Label 64 | config: 65 | style: 66 | font-size: 12px 67 | margin-top: 0px 68 | text: "=props.title ? props.title : ''" 69 | - component: f7-block 70 | config: 71 | style: 72 | bottom: -15px 73 | flex-direction: row 74 | left: 16px 75 | position: absolute 76 | slots: 77 | default: 78 | - component: Label 79 | config: 80 | style: 81 | font-size: 17px 82 | font-weight: 600 83 | margin-left: 0px 84 | margin-top: 0px 85 | text: "=props.header ? props.header : 'Set Props'" 86 | - component: f7-block 87 | config: 88 | style: 89 | bottom: -35px 90 | flex-direction: row 91 | left: 16px 92 | position: absolute 93 | slots: 94 | default: 95 | - component: Label 96 | config: 97 | style: 98 | font-size: 12px 99 | margin-left: 0px 100 | margin-top: 0px 101 | text: "=Number(items[props.item].state) === 0 ? 'Geöffnet ' + (items[props.item].state) + '%' : 'Geschlossen ' + (items[props.item].state) + '%'" 102 | - component: oh-button 103 | config: 104 | action: command 105 | actionCommand: UP 106 | actionItem: =props.item 107 | iconColor: red 108 | iconF7: arrow_up_circle 109 | iconSize: 35 110 | style: 111 | background: transparent 112 | height: 35px 113 | position: absolute 114 | right: 10px 115 | top: 12px 116 | - component: oh-button 117 | config: 118 | action: command 119 | actionCommand: STOP 120 | actionItem: =props.item 121 | iconColor: red 122 | iconF7: stop_circle 123 | iconSize: 29 124 | style: 125 | background: transparent 126 | height: 29px 127 | position: absolute 128 | right: 13px 129 | top: 46px 130 | - component: oh-button 131 | config: 132 | action: command 133 | actionCommand: DOWN 134 | actionItem: =props.item 135 | iconColor: red 136 | iconF7: arrow_down_circle 137 | iconSize: 35 138 | style: 139 | background: transparent 140 | height: 35px 141 | position: absolute 142 | right: 10px 143 | top: 74px 144 | -------------------------------------------------------------------------------- /Rollershutter/README.md: -------------------------------------------------------------------------------- 1 | Cell_Shutter_Card_1 2 | 3 | ![111111](https://user-images.githubusercontent.com/73241309/145094882-c6fe7f4b-46ff-474c-a4a9-1d9650f641bf.PNG) 4 | -------------------------------------------------------------------------------- /Security/front_cam_mobile.yaml: -------------------------------------------------------------------------------- 1 | uid: front_cam_mobile 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: Set the height of the Widget 6 | label: Widget Height 7 | name: cardheight 8 | required: false 9 | type: TEXT 10 | - description: Set the url of the live stream here 11 | label: Url live stream 12 | name: urllivestream 13 | required: false 14 | type: TEXT 15 | - description: rgba or HEX 16 | label: Background Color 17 | name: bgcolor 18 | required: false 19 | type: TEXT 20 | parameterGroups: [] 21 | timestamp: Nov 27, 2021, 4:03:46 PM 22 | component: f7-card 23 | config: 24 | style: 25 | --weather-card-border-radius: 20px 26 | --weather-card-color: "=(!props.fontColor) ? '255,255,255' : props.fontColor" 27 | --weather-card-text-color: rgba(var(--weather-card-color),1) 28 | --weather-card-text-shadow-color: "=(!props.textShadowColor) ? '0,0,0' : props.textShadowColor" 29 | --weather-font-size-large: 26px 30 | --weather-font-size-normal: 18px 31 | --weather-font-size-small: 16px 32 | --weather-font-size-xlarge: 60px 33 | --weather-font-size-xsmall: 14px 34 | --weather-font-size-xxlarge: 70px 35 | --weather-font-size-xxsmall: 12px 36 | --weather-text-shadow-light: 2px 2px rgba(var(--weather-card-text-shadow-color),.15) 37 | --weather-text-shadow-strong: 2px 2px rgba(var(--weather-card-text-shadow-color),.35) 38 | --weather-text-transform-time: uppercase 39 | -moz-user-select: none 40 | -ms-user-select: none 41 | -webkit-user-select: none 42 | background: "=props.bgcolor ? props.bgcolor : ''" 43 | border-radius: var(--weather-card-border-radius) 44 | color: var(--weather-card-text-color) 45 | height: '=props.cardheight ? props.cardheight : "250px"' 46 | overflow: hidden 47 | user-select: none 48 | slots: 49 | default: 50 | - component: f7-block 51 | config: 52 | class: 53 | - no-padding 54 | - no-margin 55 | style: 56 | height: 100% 57 | left: 0 58 | position: absolute 59 | top: 0 60 | width: 100% 61 | slots: 62 | default: 63 | - component: f7-row 64 | config: 65 | style: 66 | align-items: center 67 | display: grid 68 | grid-template-columns: 100% 69 | height: 100% 70 | justify-items: center 71 | padding-left: 10px 72 | padding-right: 10px 73 | slots: 74 | default: 75 | - component: oh-image 76 | config: 77 | url: '=props.urllivestream ? props.urllivestream : "https://www.flaticon.com/svg/vstatic/svg/3964/3964391.svg?token=exp=1614265385~hmac=9a01747702e3f44a515d0d898b3f13fc"' 78 | width: 100% 79 | -------------------------------------------------------------------------------- /Settings/Cell_Settings_1.yaml: -------------------------------------------------------------------------------- 1 | uid: Cell_Settings_1 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: rgba or HEX 6 | label: Background Color 7 | name: bgcolor 8 | required: false 9 | type: TEXT 10 | - description: page which will be opened as popup 11 | label: Settingspage 12 | name: page 13 | required: false 14 | type: TEXT 15 | - context: item 16 | description: Item Group of Battery Critical 17 | label: Item Group 18 | name: item_battery 19 | required: false 20 | type: TEXT 21 | parameterGroups: [] 22 | timestamp: Nov 27, 2021, 10:34:41 AM 23 | component: f7-card 24 | config: 25 | style: 26 | background-color: "=props.bgcolor ? props.bgcolor : ''" 27 | border-radius: var(--f7-card-expandable-border-radius) 28 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 29 | class: 30 | - padding: 0px 31 | height: 150px 32 | margin-left: 5px 33 | margin-right: 5px 34 | noShadow: false 35 | slots: 36 | content: 37 | - component: f7-block 38 | config: 39 | style: 40 | display: flex 41 | flex-direction: row 42 | left: 16px 43 | position: absolute 44 | top: -5px 45 | slots: 46 | default: 47 | - component: f7-chip 48 | config: 49 | iconColor: '=items[props.item_battery].state < 30 ? "red": "green"' 50 | iconF7: battery_25 51 | iconSize: 16 52 | style: 53 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 54 | font-weight: 700 55 | text: =items[props.item_battery].state + '%' 56 | textColor: '=items[props.item_battery].state < 30 ? "red": "green"' 57 | visible: "=items[props.item_battery].state > 0 ? true : false" 58 | - component: f7-block 59 | config: 60 | class: 61 | - text-align-center 62 | style: 63 | left: 20px 64 | position: absolute 65 | top: 80px 66 | width: 100% 67 | slots: 68 | default: 69 | - component: f7-icon 70 | config: 71 | f7: battery_100 72 | size: 60 73 | style: 74 | margin-right: 10px 75 | margin-top: -10px 76 | opacity: 0.6 77 | - component: oh-link 78 | config: 79 | action: popup 80 | actionModal: ='page:' + props.page 81 | style: 82 | height: 150px 83 | left: 0px 84 | position: absolute 85 | top: 0px 86 | width: 100% 87 | -------------------------------------------------------------------------------- /Settings/README.md: -------------------------------------------------------------------------------- 1 | Cell_Settings_1 2 | 3 | ![77777](https://user-images.githubusercontent.com/73241309/145106775-71d43213-c6f7-4ab4-a0b5-fb042a6e6dc9.PNG) 4 | -------------------------------------------------------------------------------- /StateCards/Card_Battery_State.yaml: -------------------------------------------------------------------------------- 1 | uid: Card_Battery_State 2 | tags: 3 | - homekit-like 4 | props: 5 | parameters: 6 | - description: The headline 7 | label: Label-description 8 | name: prop1 9 | required: true 10 | type: TEXT 11 | - description: The size of the Font 12 | label: Font-Size 13 | name: fontsize 14 | required: true 15 | type: TEXT 16 | - description: the oh icon name 17 | label: f7 icon name 18 | name: prop2 19 | required: false 20 | type: TEXT 21 | - context: item 22 | description: Status of the Device 23 | label: Status 24 | name: item 25 | required: false 26 | type: TEXT 27 | - context: item 28 | description: Battery status of the device 29 | label: Battery 30 | name: item2 31 | required: false 32 | type: TEXT 33 | parameterGroups: [] 34 | timestamp: Feb 18, 2021, 9:33:17 PM 35 | component: f7-card 36 | config: 37 | style: 38 | noShadow: false 39 | class: 40 | - padding: 0px 41 | border-radius: var(--f7-card-expandable-border-radius) 42 | box-shadow: var(--f7-card-expandable-box-shadow) 43 | background-color: '=(items[props.item].state == "OPEN") ? "white" : "rgba(228,228,228,0.9)"' 44 | height: 8.5em 45 | slots: 46 | content: 47 | - component: f7-block 48 | config: 49 | style: 50 | margin: 1px 51 | padding: 1px 52 | display: flex 53 | flex-direction: column 54 | align-items: start 55 | slots: 56 | default: 57 | - component: f7-icon 58 | config: 59 | f7: '=(items[props.item2].state === "OFF") ? "battery_100" : "battery_25"' 60 | size: 25 61 | color: '=(items[props.item2].state == "OFF") ? "green" : "red"' 62 | style: 63 | opacity: 0.5 64 | position: absolute 65 | top: -11px 66 | right: -5px 67 | - component: oh-icon 68 | config: 69 | icon: =props.prop2 70 | height: 38 71 | style: 72 | filter: grayscale() 73 | opacity: 0.7 74 | position: absolute 75 | top: -5px 76 | left: -5px 77 | margin-top: -5px 78 | - component: Label 79 | config: 80 | text: =props.prop1 81 | style: 82 | font-size: =props.fontsize + "px" 83 | font-weight: 500 84 | line-height: 1.1 85 | position: relative 86 | margin-left: 0px 87 | margin-top: 44px 88 | color: '=(items[props.item].state == "OPEN") ? "black" : "rgb(0,0,0,0.5)"' 89 | - component: Label 90 | config: 91 | text: =items[props.item].displayState 92 | style: 93 | margin-left: 0px 94 | margin-top: 2px 95 | font-size: 14px 96 | font-weight: 500 97 | color: '=(items[props.item].state == "OPEN") ? "red" : "rgb(0,0,0,0.5)"' 98 | -------------------------------------------------------------------------------- /StateCards/Card_Info.yaml: -------------------------------------------------------------------------------- 1 | uid: Card_Info 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: Small title on top of the card 6 | label: Title 7 | name: title 8 | required: false 9 | type: TEXT 10 | - context: item 11 | description: Item für Beschreibung der nächsten Abholung 12 | label: Item 13 | name: item 14 | required: false 15 | type: TEXT 16 | parameterGroups: [] 17 | timestamp: Mar 1, 2023, 10:23:41 PM 18 | component: f7-card 19 | config: 20 | style: 21 | border-radius: var(--f7-card-expandable-border-radius) 22 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 23 | height: 120px 24 | noShadow: false 25 | raised: true 26 | slots: 27 | content: 28 | - component: f7-block 29 | config: {} 30 | slots: 31 | default: 32 | - component: Label 33 | config: 34 | style: 35 | font-size: 14px 36 | height: 110px 37 | margin-bottom: 20px 38 | margin-left: 0px 39 | margin-top: -27px 40 | overflow: auto 41 | padding-right: 0px 42 | scrollbar-width: none 43 | text: =items[props.item].state 44 | -------------------------------------------------------------------------------- /StateCards/Card_Room_Popup+Motion.yaml: -------------------------------------------------------------------------------- 1 | uid: Card_Room_Popup+Motion 2 | tags: 3 | - motion 4 | props: 5 | parameters: 6 | - label: Header 7 | name: text_header 8 | required: false 9 | type: TEXT 10 | - description: icon name without ".png", located in static/icons/ folder 11 | label: Icon 12 | name: iconimage 13 | required: false 14 | type: TEXT 15 | - description: HEX or rgba 16 | label: Backgroundcolor 17 | name: bgcolor 18 | required: false 19 | type: TEXT 20 | - description: Page which will be opened as popup 21 | label: Page ID 22 | name: page 23 | required: false 24 | - context: item 25 | description: select group for status lights 26 | label: Item 27 | name: status 28 | required: false 29 | type: TEXT 30 | - context: item 31 | description: select item for heating 32 | label: Item 33 | name: heating 34 | required: false 35 | type: TEXT 36 | - context: item 37 | description: select item for temperature 38 | label: Item 39 | name: temp 40 | required: false 41 | type: TEXT 42 | - context: item 43 | description: select item for set temperature 44 | label: Item 45 | name: settemp 46 | required: false 47 | type: TEXT 48 | - context: item 49 | description: select item for humidity 50 | label: Item 51 | name: humidity 52 | required: false 53 | type: TEXT 54 | - context: item 55 | description: select item for illuminance 56 | label: Item 57 | name: illuminance 58 | required: false 59 | type: TEXT 60 | - context: item 61 | description: select item for motion state(s) 62 | label: Item 63 | name: motion 64 | required: false 65 | type: TEXT 66 | - context: item 67 | description: select item for door lock(s) 68 | label: Item 69 | name: door_lock 70 | required: false 71 | type: TEXT 72 | - context: item 73 | description: select item for blinds group (SUM) 74 | label: Item 75 | name: blinds_closed 76 | required: false 77 | type: TEXT 78 | - context: item 79 | description: select item for speaker(s) 80 | label: Item 81 | name: speakers 82 | required: false 83 | type: TEXT 84 | - context: item 85 | description: select item for windows(s) 86 | label: Item 87 | name: windows 88 | required: false 89 | type: TEXT 90 | - context: item 91 | description: select item for numbers of windows 92 | label: Item 93 | name: windows_numbers 94 | required: false 95 | type: TEXT 96 | - context: item 97 | description: select item for boiler temp 98 | label: Item 99 | name: boiler_temp 100 | required: false 101 | type: TEXT 102 | timestamp: Nov 27, 2021, 4:19:42 PM 103 | component: f7-card 104 | config: 105 | style: 106 | background-color: "=props.bgcolor ? props.bgcolor : ''" 107 | border-radius: var(--f7-card-expandable-border-radius) 108 | box-shadow: '=(items[props.status].state === "ON") ? "3px 3px 10px 0px rgba(255,255,255,255)" : "var(--f7-card-expandable-box-shadow)"' 109 | class: 110 | - padding: 0px 111 | height: 125px 112 | margin-left: 5px 113 | margin-right: 5px 114 | noShadow: false 115 | slots: 116 | content: 117 | - component: f7-block 118 | config: 119 | style: 120 | left: 50px 121 | position: absolute 122 | top: -5px 123 | slots: 124 | default: 125 | - component: Label 126 | config: 127 | style: 128 | font-size: 17px 129 | font-weight: 600 130 | margin-left: 0px 131 | margin-top: 0px 132 | text: "=props.text_header ? props.text_header : 'Set Props'" 133 | - component: f7-block 134 | config: 135 | style: 136 | bottom: -37px 137 | left: 16px 138 | position: absolute 139 | slots: 140 | default: 141 | - component: f7-chip 142 | config: 143 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 144 | iconF7: "=(items[props.status].state === 'ON') ? 'lightbulb' : 'lightbulb_slash'" 145 | iconSize: 18 146 | style: 147 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 148 | text: "=(items[props.status].state === 'ON') ? items[props.status].state : ''" 149 | visible: "=props.status ? true : false" 150 | - component: f7-chip 151 | config: 152 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 153 | iconF7: flame 154 | iconSize: 18 155 | style: 156 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 157 | text: "=items[props.heating].state === 'ON' ? '' : ''" 158 | visible: =items[props.heating].state === 'ON' 159 | - component: f7-chip 160 | config: 161 | style: 162 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 163 | text: "=items[props.motion].state === 'ON' ? '' : ''" 164 | visible: "=props.motion ? true : false" 165 | slots: 166 | media: 167 | - component: oh-icon 168 | config: 169 | icon: "=items[props.motion].state === 'ON' ? 'motion' : ''" 170 | style: 171 | filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'" 172 | height: 18px 173 | - component: f7-chip 174 | config: 175 | style: 176 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 177 | text: "=items[props.windows_numbers].state > 0 ? items[props.windows_numbers].state : ''" 178 | visible: "=items[props.windows].state === 'OPEN' ? true : false" 179 | slots: 180 | media: 181 | - component: oh-icon 182 | config: 183 | icon: window-open 184 | style: 185 | filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'" 186 | height: 18px 187 | - component: f7-chip 188 | config: 189 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 190 | iconF7: "=items[props.door_lock].state === 'ON' ? 'lock_open' : 'lock'" 191 | iconSize: 18 192 | style: 193 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 194 | text: "=items[props.door_lock].state === 'ON' ? '' : ''" 195 | visible: "=props.door_lock ? true : false" 196 | - component: f7-chip 197 | config: 198 | style: 199 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 200 | text: "=(Number(items[props.blinds_closed].state) === 0) ? '' : Math.floor(items[props.blinds_closed].state) + '%'" 201 | visible: "=(Number(Math.floor(items[props.blinds_closed].state)) > 0) ? true : false" 202 | slots: 203 | media: 204 | - component: oh-icon 205 | config: 206 | icon: "=(Number(items[props.blinds_closed].state) === 0) ? 'cinemascreen-30' : 'cinemascreen-100'" 207 | style: 208 | filter: "='brightness(' + (themeOptions.dark === 'dark' ? '100' : '0.3') + ')'" 209 | height: 18px 210 | - component: f7-chip 211 | config: 212 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 213 | iconF7: "=items[props.speakers].state === 'PLAY' ? 'speaker_2' : 'speaker'" 214 | iconSize: 18 215 | style: 216 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 217 | visible: "=items[props.speakers].state === 'PLAY' ? true : false" 218 | - component: f7-chip 219 | config: 220 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 221 | iconF7: sun_min 222 | iconSize: 18 223 | style: 224 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 225 | text: =items[props.illuminance].displayState 226 | visible: "=props.illuminance ? true : false" 227 | - component: f7-block 228 | config: 229 | style: 230 | bottom: -65px 231 | left: 16px 232 | position: absolute 233 | slots: 234 | default: 235 | - component: f7-chip 236 | config: 237 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 238 | iconF7: thermometer 239 | iconSize: 18 240 | style: 241 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 242 | text: "=(items[props.temp].displayState ? items[props.temp].displayState : items[props.temp].state) + (props.settemp ? ' (' + items[props.settemp].state + ')' : '')" 243 | visible: "=props.temp ? true : false" 244 | - component: f7-chip 245 | config: 246 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 247 | iconF7: drop 248 | iconSize: 18 249 | style: 250 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 251 | text: =items[props.humidity].displayState 252 | visible: "=props.humidity ? true : false" 253 | - component: f7-chip 254 | config: 255 | style: 256 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 257 | text: =items[props.boiler_temp].state 258 | visible: "=props.boiler_temp ? true : false" 259 | slots: 260 | media: 261 | - component: oh-icon 262 | config: 263 | icon: waterheater2 264 | style: 265 | filter: "='invert(' + (themeOptions.dark === 'dark' ? '1' : '0') + ')'" 266 | height: 18px 267 | - component: oh-image 268 | config: 269 | style: 270 | height: 25px 271 | left: 16px 272 | opacity: 0.7 273 | position: absolute 274 | top: 10px 275 | url: ='/static/icons/' + props.iconimage + '.png' 276 | visible: "=props.iconimage ? true : false" 277 | - component: oh-link 278 | config: 279 | action: popup 280 | actionModal: ='page:' + props.page 281 | style: 282 | height: 110px 283 | left: 0px 284 | position: absolute 285 | top: 0px 286 | width: 100% 287 | -------------------------------------------------------------------------------- /StateCards/Card_Room_Popup.yaml: -------------------------------------------------------------------------------- 1 | uid: Card_Room_Popup 2 | tags: [] 3 | props: 4 | parameters: 5 | - label: Header 6 | name: text_header 7 | required: false 8 | type: TEXT 9 | - description: icon name without ".png", located in static/icons/ folder 10 | label: Icon 11 | name: iconimage 12 | required: false 13 | type: TEXT 14 | - description: HEX or rgba 15 | label: Backgroundcolor 16 | name: bgcolor 17 | required: false 18 | type: TEXT 19 | - description: Page which will be opened as popup 20 | label: Page ID 21 | name: page 22 | required: false 23 | - context: item 24 | description: select group for status lights 25 | label: Item 26 | name: status 27 | required: false 28 | type: TEXT 29 | - context: item 30 | description: select item for heating 31 | label: Item 32 | name: heating 33 | required: false 34 | type: TEXT 35 | - context: item 36 | description: select item for temperature 37 | label: Item 38 | name: temp 39 | required: false 40 | type: TEXT 41 | - context: item 42 | description: select item for set temperature 43 | label: Item 44 | name: settemp 45 | required: false 46 | type: TEXT 47 | - context: item 48 | description: select item for humidity 49 | label: Item 50 | name: humidity 51 | required: false 52 | type: TEXT 53 | - context: item 54 | description: select item for illuminance 55 | label: Item 56 | name: illuminance 57 | required: false 58 | type: TEXT 59 | - context: item 60 | description: select item for door state(s) 61 | label: Item 62 | name: door_state 63 | required: false 64 | type: TEXT 65 | - context: item 66 | description: select item for door lock(s) 67 | label: Item 68 | name: door_lock 69 | required: false 70 | type: TEXT 71 | - context: item 72 | description: select item for blinds group (SUM) 73 | label: Item 74 | name: blinds_closed 75 | required: false 76 | type: TEXT 77 | - context: item 78 | description: select item for speaker(s) 79 | label: Item 80 | name: speakers 81 | required: false 82 | type: TEXT 83 | - context: item 84 | description: select item for windows(s) 85 | label: Item 86 | name: windows 87 | required: false 88 | type: TEXT 89 | - context: item 90 | description: select item for numbers of windows 91 | label: Item 92 | name: windows_numbers 93 | required: false 94 | type: TEXT 95 | - context: item 96 | description: select item for boiler temp 97 | label: Item 98 | name: boiler_temp 99 | required: false 100 | type: TEXT 101 | timestamp: Nov 24, 2021, 8:42:18 PM 102 | component: f7-card 103 | config: 104 | style: 105 | background-color: "=props.bgcolor ? props.bgcolor : ''" 106 | border-radius: var(--f7-card-expandable-border-radius) 107 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 108 | class: 109 | - padding: 0px 110 | height: 125px 111 | margin-left: 5px 112 | margin-right: 5px 113 | noShadow: false 114 | slots: 115 | content: 116 | - component: f7-block 117 | config: 118 | style: 119 | left: 50px 120 | position: absolute 121 | top: -5px 122 | slots: 123 | default: 124 | - component: Label 125 | config: 126 | style: 127 | font-size: 17px 128 | font-weight: 600 129 | margin-left: 0px 130 | margin-top: 0px 131 | text: "=props.text_header ? props.text_header : 'Set Props'" 132 | - component: f7-block 133 | config: 134 | style: 135 | bottom: -37px 136 | left: 16px 137 | position: absolute 138 | slots: 139 | default: 140 | - component: f7-chip 141 | config: 142 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 143 | iconF7: "=(Number(items[props.status].state) > 0) ? 'lightbulb' : 'lightbulb_slash'" 144 | iconSize: 18 145 | style: 146 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 147 | text: "=(Number(items[props.status].state) > 0) ? items[props.status].state : ''" 148 | visible: "=props.status ? true : false" 149 | - component: f7-chip 150 | config: 151 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 152 | iconF7: flame 153 | iconSize: 18 154 | style: 155 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 156 | text: "=items[props.heating].state === 'ON' ? '' : ''" 157 | visible: =items[props.heating].state === 'ON' 158 | - component: f7-chip 159 | config: 160 | style: 161 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 162 | text: "=items[props.door_state].state === 'ON' ? '' : ''" 163 | visible: "=props.door_state ? true : false" 164 | slots: 165 | media: 166 | - component: oh-icon 167 | config: 168 | icon: "=items[props.door_state].state === 'ON' ? 'door-open' : 'door-closed'" 169 | style: 170 | filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'" 171 | height: 18px 172 | - component: f7-chip 173 | config: 174 | style: 175 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 176 | text: "=items[props.windows_numbers].state > 0 ? items[props.windows_numbers].state : ''" 177 | visible: "=items[props.windows].state === 'OPEN' ? true : false" 178 | slots: 179 | media: 180 | - component: oh-icon 181 | config: 182 | icon: window-open 183 | style: 184 | filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'" 185 | height: 18px 186 | - component: f7-chip 187 | config: 188 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 189 | iconF7: "=items[props.door_lock].state === 'ON' ? 'lock_open' : 'lock'" 190 | iconSize: 18 191 | style: 192 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 193 | text: "=items[props.door_lock].state === 'ON' ? '' : ''" 194 | visible: "=props.door_lock ? true : false" 195 | - component: f7-chip 196 | config: 197 | style: 198 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 199 | text: "=(Number(items[props.blinds_closed].state) === 0) ? '' : Math.floor(items[props.blinds_closed].state)" 200 | visible: "=(Number(Math.floor(items[props.blinds_closed].state)) > 0) ? true : false" 201 | slots: 202 | media: 203 | - component: oh-icon 204 | config: 205 | icon: "=(Number(items[props.blinds_closed].state) === 0) ? 'cinemascreen-30' : 'cinemascreen-100'" 206 | style: 207 | filter: "='brightness(' + (themeOptions.dark === 'dark' ? '100' : '0.3') + ')'" 208 | height: 18px 209 | - component: f7-chip 210 | config: 211 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 212 | iconF7: "=items[props.speakers].state === 'PLAY' ? 'speaker_2' : 'speaker'" 213 | iconSize: 18 214 | style: 215 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 216 | visible: "=items[props.speakers].state === 'PLAY' ? true : false" 217 | - component: f7-chip 218 | config: 219 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 220 | iconF7: sun_min 221 | iconSize: 18 222 | style: 223 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 224 | text: =items[props.illuminance].displayState 225 | visible: "=props.illuminance ? true : false" 226 | - component: f7-block 227 | config: 228 | style: 229 | bottom: -65px 230 | left: 16px 231 | position: absolute 232 | slots: 233 | default: 234 | - component: f7-chip 235 | config: 236 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 237 | iconF7: thermometer 238 | iconSize: 18 239 | style: 240 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 241 | text: "=(items[props.temp].displayState ? items[props.temp].displayState : items[props.temp].state) + (props.settemp ? ' (' + items[props.settemp].state + ')' : '')" 242 | visible: "=props.temp ? true : false" 243 | - component: f7-chip 244 | config: 245 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 246 | iconF7: drop 247 | iconSize: 18 248 | style: 249 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 250 | text: =items[props.humidity].displayState 251 | visible: "=props.humidity ? true : false" 252 | - component: f7-chip 253 | config: 254 | style: 255 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 256 | text: =items[props.boiler_temp].state 257 | visible: "=props.boiler_temp ? true : false" 258 | slots: 259 | media: 260 | - component: oh-icon 261 | config: 262 | icon: waterheater2 263 | style: 264 | filter: "='invert(' + (themeOptions.dark === 'dark' ? '1' : '0') + ')'" 265 | height: 18px 266 | - component: oh-image 267 | config: 268 | style: 269 | height: 25px 270 | left: 16px 271 | opacity: 0.7 272 | position: absolute 273 | top: 10px 274 | url: ='/static/icons/' + props.iconimage + '.png' 275 | visible: "=props.iconimage ? true : false" 276 | - component: oh-link 277 | config: 278 | action: popup 279 | actionModal: ='page:' + props.page 280 | style: 281 | height: 110px 282 | left: 0px 283 | position: absolute 284 | top: 0px 285 | width: 100% 286 | -------------------------------------------------------------------------------- /StateCards/Card_Room_Popup_3Lights.yaml: -------------------------------------------------------------------------------- 1 | uid: Card_Room_Popup_3Lights 2 | tags: [] 3 | props: 4 | parameters: 5 | - label: Header 6 | name: text_header 7 | required: false 8 | type: TEXT 9 | - description: icon name without ".png", located in static/icons/ folder 10 | label: Icon 11 | name: iconimage 12 | required: false 13 | type: TEXT 14 | - description: HEX or rgba 15 | label: Backgroundcolor 16 | name: bgcolor 17 | required: false 18 | type: TEXT 19 | - context: item 20 | description: select item for state light1 21 | label: Item 22 | name: status_light1 23 | required: false 24 | type: TEXT 25 | - context: item 26 | description: select item for state light2 27 | label: Item 28 | name: status_light2 29 | required: false 30 | type: TEXT 31 | - context: item 32 | description: select item for state light3 33 | label: Item 34 | name: status_light3 35 | required: false 36 | type: TEXT 37 | - context: item 38 | description: select item for temperature 39 | label: Item 40 | name: temp 41 | required: false 42 | type: TEXT 43 | - context: item 44 | description: select item for set temperature 45 | label: Item 46 | name: settemp 47 | required: false 48 | type: TEXT 49 | - context: item 50 | description: select item for humidity 51 | label: Item 52 | name: humidity 53 | required: false 54 | type: TEXT 55 | - context: item 56 | description: select item for state blind1 57 | label: Item 58 | name: blind1 59 | required: false 60 | type: TEXT 61 | - context: item 62 | description: select item for state blind slats1 63 | label: Item 64 | name: blind_slats1 65 | required: false 66 | type: TEXT 67 | - context: item 68 | description: select item for state blind2 69 | label: Item 70 | name: blind2 71 | required: false 72 | type: TEXT 73 | - context: item 74 | description: select item for state blind slats2 75 | label: Item 76 | name: blind_slats2 77 | required: false 78 | type: TEXT 79 | - context: item 80 | description: select item for state blind3 81 | label: Item 82 | name: blind3 83 | required: false 84 | type: TEXT 85 | - context: item 86 | description: select item for state blind slats3 87 | label: Item 88 | name: blind_slats3 89 | required: false 90 | type: TEXT 91 | - context: item 92 | description: select item for door state(s) 93 | label: Item 94 | name: door_state 95 | required: false 96 | type: TEXT 97 | - description: Page which will be opened as popup 98 | label: Page ID 99 | name: page 100 | required: false 101 | timestamp: Nov 25, 2021, 12:56:31 PM 102 | component: f7-card 103 | config: 104 | style: 105 | background-color: "=props.bgcolor ? props.bgcolor : ''" 106 | border-radius: var(--f7-card-expandable-border-radius) 107 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 108 | class: 109 | - padding: 0px 110 | height: 100px 111 | margin-left: 5px 112 | margin-right: 5px 113 | noShadow: false 114 | slots: 115 | content: 116 | - component: f7-block 117 | config: 118 | style: 119 | left: 45px 120 | position: absolute 121 | top: -5px 122 | slots: 123 | default: 124 | - component: Label 125 | config: 126 | style: 127 | font-size: 17px 128 | font-weight: 600 129 | margin-left: 0px 130 | margin-top: 0px 131 | text: "=props.text_header ? props.text_header : 'Set Props'" 132 | - component: f7-block 133 | config: 134 | style: 135 | bottom: -20px 136 | left: 5px 137 | position: absolute 138 | slots: 139 | default: 140 | - component: oh-link 141 | config: 142 | iconBadge: "=(items[props.status_light1].state > 0) ? items[props.status_light1].state : ''" 143 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'orange'" 144 | iconF7: "=(items[props.status_light1].state === 'ON' ) ? 'lightbulb_fill' : (items[props.status_light1].state === 'OFF' ) ? 'lightbulb' : (items[props.status_light1].state > 0 ) ? 'lightbulb_fill' : 'lightbulb' " 145 | iconSize: 20 146 | visible: "=props.status_light1 ? true : false" 147 | - component: oh-link 148 | config: 149 | iconBadge: "=(items[props.status_light2].state > 0) ? items[props.status_light2].state : ''" 150 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'orange'" 151 | iconF7: "=(items[props.status_light2].state === 'ON' ) ? 'lightbulb_fill' : (items[props.status_light2].state === 'OFF' ) ? 'lightbulb' : (items[props.status_light2].state > 0 ) ? 'lightbulb_fill' : 'lightbulb' " 152 | iconSize: 20 153 | style: 154 | left: 50px 155 | position: absolute 156 | visible: "=props.status_light2 ? true : false" 157 | - component: oh-link 158 | config: 159 | iconBadge: "=(items[props.status_light3].state > 0) ? items[props.status_light3].state : ''" 160 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'orange'" 161 | iconF7: "=(items[props.status_light3].state === 'ON' ) ? 'lightbulb_fill' : (items[props.status_light3].state === 'OFF' ) ? 'lightbulb' : (items[props.status_light3].state > 0 ) ? 'lightbulb_fill' : 'lightbulb' " 162 | iconSize: 20 163 | style: 164 | left: 85px 165 | position: absolute 166 | visible: "=props.status_light3 ? true : false" 167 | - component: oh-link 168 | config: 169 | iconBadge: "=(props.blind_slats1) ? '' : (items[props.blind1].state > 0 ) ? items[props.blind1].state : ''" 170 | iconColor: "=(props.blind_slats1) ? 'gray' : (themeOptions.dark === 'dark') ? 'white' : 'black'" 171 | iconF7: "=items[props.blind1].state > 50 ? 'app_fill' : 'app'" 172 | iconSize: 24 173 | style: 174 | left: 120px 175 | position: absolute 176 | visible: "=props.blind1 ? true : false" 177 | - component: oh-link 178 | config: 179 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 180 | iconF7: "=(items[props.blind_slats1].state === '0' ) ? 'arrow_down_square' : 'arrow_down_right_square'" 181 | iconSize: 24 182 | style: 183 | left: 120px 184 | position: absolute 185 | visible: "=(props.blind_slats1) && (items[props.blind1].state > 50) && (items[props.blind_slats1].state < 30 ) ? true : false" 186 | - component: oh-link 187 | config: 188 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 189 | iconF7: "=(items[props.blind_slats1].state === '50' ) ? 'arrow_right_square' : 'arrow_up_square'" 190 | iconSize: 24 191 | style: 192 | left: 120px 193 | position: absolute 194 | visible: "=(props.blind_slats1) && (items[props.blind1].state > 50) && (items[props.blind_slats1].state > 30 ) ? true : false" 195 | - component: oh-link 196 | config: 197 | iconBadge: "=(props.blind_slats2) ? '' : (items[props.blind2].state > 0 ) ? items[props.blind2].state : ''" 198 | iconColor: "=(props.blind_slats2) ? 'gray' : (themeOptions.dark === 'dark') ? 'white' : 'black'" 199 | iconF7: "=items[props.blind2].state > 50 ? 'app_fill' : 'app'" 200 | iconSize: 24 201 | style: 202 | left: 155px 203 | position: absolute 204 | visible: "=props.blind2 ? true : false" 205 | - component: oh-link 206 | config: 207 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 208 | iconF7: "=(items[props.blind_slats2].state === '0' ) ? 'arrow_down_square' : 'arrow_down_right_square'" 209 | iconSize: 24 210 | style: 211 | left: 155px 212 | position: absolute 213 | visible: "=(props.blind_slats2) && (items[props.blind2].state > 50) && (items[props.blind_slats2].state < 30 ) ? true : false" 214 | - component: oh-link 215 | config: 216 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 217 | iconF7: "=(items[props.blind_slats2].state === '50' ) ? 'arrow_right_square' : 'arrow_up_square'" 218 | iconSize: 24 219 | style: 220 | left: 155px 221 | position: absolute 222 | visible: "=(props.blind_slats2) && (items[props.blind2].state > 50) && (items[props.blind_slats2].state > 30 ) ? true : false" 223 | - component: oh-link 224 | config: 225 | iconBadge: "=(props.blind_slats3) ? '' : (items[props.blind3].state > 0 ) ? items[props.blind3].state : ''" 226 | iconColor: "=(props.blind_slats3) ? 'gray' : (themeOptions.dark === 'dark') ? 'white' : 'black'" 227 | iconF7: "=items[props.blind3].state > 50 ? 'app_fill' : 'app'" 228 | iconSize: 22 229 | style: 230 | left: 190px 231 | position: absolute 232 | visible: "=props.blind3 ? true : false" 233 | - component: oh-link 234 | config: 235 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 236 | iconF7: "=(items[props.blind_slats3].state === '0' ) ? 'arrow_down_square' : 'arrow_down_right_square'" 237 | iconSize: 24 238 | style: 239 | left: 190px 240 | position: absolute 241 | visible: "=(props.blind_slats3) && (items[props.blind3].state > 50) && (items[props.blind_slats3].state < 30 ) ? true : false" 242 | - component: oh-link 243 | config: 244 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 245 | iconF7: "=(items[props.blind_slats3].state === '50' ) ? 'arrow_right_square' : 'arrow_up_square'" 246 | iconSize: 24 247 | style: 248 | left: 190px 249 | position: absolute 250 | visible: "=(props.blind_slats3) && (items[props.blind3].state > 50) && (items[props.blind_slats3].state > 30 ) ? true : false" 251 | - component: oh-icon 252 | config: 253 | icon: "=items[props.door_state].state === 'OPEN' ? 'door-open' : 'door-closed'" 254 | style: 255 | bottom: 0px 256 | height: 24px 257 | left: 120px 258 | position: absolute 259 | visible: "=props.door_state ? true : false" 260 | - component: f7-block 261 | config: 262 | style: 263 | bottom: -50px 264 | left: 5px 265 | position: absolute 266 | slots: 267 | default: 268 | - component: f7-chip 269 | config: 270 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 271 | iconF7: thermometer 272 | iconSize: 18 273 | style: 274 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 275 | text: "=(items[props.temp].displayState ? items[props.temp].displayState : items[props.temp].state) + (props.settemp ? ' (' + items[props.settemp].state + ')' : '')" 276 | visible: "=props.temp ? true : false" 277 | - component: f7-chip 278 | config: 279 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 280 | iconF7: drop 281 | iconSize: 18 282 | style: 283 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 284 | text: =items[props.humidity].state + '%' 285 | visible: "=props.humidity ? true : false" 286 | - component: oh-image 287 | config: 288 | style: 289 | height: 25px 290 | left: 10px 291 | opacity: 0.7 292 | position: absolute 293 | top: 10px 294 | url: ='/static/icons/' + props.iconimage + '.png' 295 | visible: "=props.iconimage ? true : false" 296 | - component: oh-link 297 | config: 298 | action: popup 299 | actionModal: ='page:' + props.page 300 | style: 301 | height: 110px 302 | left: 0px 303 | position: absolute 304 | top: 0px 305 | width: 100% 306 | -------------------------------------------------------------------------------- /StateCards/Card_Temp_1.yaml: -------------------------------------------------------------------------------- 1 | uid: Card_Temp_1 2 | tags: [] 3 | props: 4 | parameters: 5 | - context: item 6 | description: Item Temperatur 7 | label: Item Temp 8 | name: itemtemp 9 | required: false 10 | type: TEXT 11 | - context: item 12 | description: Item Humidity 13 | label: Item Hum. 14 | name: itemhum 15 | required: false 16 | type: TEXT 17 | - description: Headline 18 | label: Headline 19 | name: headline 20 | required: false 21 | type: TEXT 22 | timestamp: Feb 18, 2021, 10:10:33 AM 23 | component: oh-label-cell 24 | config: 25 | header: '=(props.headline) ? props.headline : "Headline"' 26 | item: =props.itemtemp 27 | trendItem: =props.itemtemp 28 | action: group 29 | actionGroupPopupItem: WZ_Klima 30 | icon: f7:thermometer 31 | subtitle: =items.HM_WZ_Heizung_ActProfile.displayState 32 | footer: ="Luftfeuchtigkeit " + items[props.itemhum].displayState 33 | expandable: false 34 | style: 35 | background: '=(items.[props.itemhum].displayState > 10) ? "red" : "blue"' 36 | -------------------------------------------------------------------------------- /StateCards/Card_Temp_Control.yaml: -------------------------------------------------------------------------------- 1 | uid: Card_Temp_Control 2 | tags: 3 | - homekit-look 4 | - Soll Tag 5 | - in use 6 | props: 7 | parameters: 8 | - description: Location? 9 | label: Prop 1 10 | name: prop1 11 | required: false 12 | type: TEXT 13 | - description: Thermostate icon f7 14 | label: f7 icon name 15 | name: icon1 16 | required: false 17 | type: TEXT 18 | - description: Humidity icon f7 19 | label: f7 icon name 20 | name: icon2 21 | required: false 22 | type: TEXT 23 | - context: item 24 | description: A Temperature item to display 25 | label: Item 26 | name: itemTemp 27 | required: false 28 | type: TEXT 29 | - context: item 30 | description: A Set-Temperature item to display 31 | label: Item 32 | name: itemTempSoll 33 | required: false 34 | type: TEXT 35 | - context: item 36 | description: An Humidity item to display 37 | label: Item 38 | name: itemHum 39 | required: false 40 | type: TEXT 41 | - context: item 42 | description: the valve state 43 | label: Item 44 | name: itemValve 45 | required: false 46 | type: TEXT 47 | - context: item 48 | description: Item for temperature channel 49 | label: Ambient temperature 50 | name: itemAmbientTemp 51 | required: false 52 | type: TEXT 53 | - context: item 54 | description: Item for outdoor temperature channel 55 | label: Outdoor temperature 56 | name: itemOutdoorTemp 57 | required: false 58 | type: TEXT 59 | - context: item 60 | description: Item for target temperature channel 61 | label: Target temperature 62 | name: itemTargetTemp 63 | required: true 64 | type: TEXT 65 | - context: item 66 | description: Item for operation mode channel 67 | label: Operation mode 68 | name: itemMode 69 | required: true 70 | type: TEXT 71 | parameterGroups: [] 72 | timestamp: Feb 18, 2021, 1:40:25 PM 73 | component: f7-card 74 | config: 75 | style: 76 | noShadow: false 77 | class: 78 | - padding 79 | border-radius: var(--f7-card-expandable-border-radius) 80 | box-shadow: var(--f7-card-expandable-box-shadow) 81 | background-color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "white" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 23) ? "white" : "rgba(228,228,228,0.9)"' 82 | height: 8.5em 83 | min-width: 9.5em 84 | max-width: 400px 85 | slots: 86 | content: 87 | - component: f7-block 88 | config: 89 | style: 90 | margin-left: -6px 91 | padding: -1px 92 | display: flex 93 | flex-direction: column 94 | align-items: start 95 | - component: f7-row 96 | config: 97 | class: 98 | - justify-content-left 99 | slots: 100 | default: 101 | - component: f7-icon 102 | config: 103 | f7: =props.icon1 104 | size: 22 105 | class: 106 | - align-self-center 107 | style: 108 | margin-left: -6px 109 | margin-top: 0px 110 | color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 23) ? "black" : "rgb(0,0,0,0.5)"' 111 | - component: Label 112 | config: 113 | text: =props.prop1 114 | style: 115 | font-size: 14px 116 | font-weight: 500 117 | margin-left: -4px 118 | margin-top: 0px 119 | color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 23) ? "black" : "rgb(0,0,0,0.5)"' 120 | - component: f7-row 121 | config: 122 | class: 123 | - justify-content-left 124 | slots: 125 | default: 126 | - component: Label 127 | config: 128 | text: =(Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) * 100 / 100).toFixed(1) + '°' 129 | style: 130 | font-size: 32px 131 | line-height: 1.1 132 | font-weight: 498 133 | margin-left: 0px 134 | margin-top: 0px 135 | color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "black" : (Number.parseFloat(items[props.itemTemp].state.split(" ")[0]) > 23) ? "black" : "rgb(0,0,0,0.5)"' 136 | - component: f7-row 137 | config: 138 | class: 139 | - justify-content-left 140 | slots: 141 | default: 142 | - component: f7-icon 143 | config: 144 | f7: =props.icon2 145 | size: 16 146 | style: 147 | top: 5px 148 | left: 0px 149 | color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "red" : "rgb(0,0,0,0.5)"' 150 | - component: Label 151 | config: 152 | text: =(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) * 100 / 100).toFixed(0) + '%' 153 | visible: =props.itemHum !== undefined 154 | style: 155 | top: 5px 156 | left: 0px 157 | font-size: 13px 158 | font-weight: 500 159 | color: '=(Number.parseFloat(items[props.itemHum].state.split(" ")[0]) > 60) ? "red" : "rgb(0,0,0,0.5)"' 160 | - component: f7-row 161 | config: 162 | class: 163 | - float-right 164 | slots: 165 | default: 166 | - component: f7-icon 167 | config: 168 | f7: arrowshape_turn_up_right 169 | size: 16 170 | style: 171 | opacity: 0.5 172 | bottom: 0px 173 | right: -45px 174 | color: rgb(0,0,0,0.5) 175 | - component: f7-chip 176 | config: 177 | bgColor: '=(Number.parseFloat(items[props.itemValve].state.split(" ")[0]) > 15) ? "orange" : "green"' 178 | text: =(Number.parseFloat(items[props.itemTempSoll].state.split(" ")[0]) * 100 / 100).toFixed(0) 179 | style: 180 | color: white 181 | size: 20 182 | z-index: 2 183 | bottom: 75px 184 | border-radius: 25px 25px 25px 25px 185 | margin-top: 2px 186 | right: -5px 187 | - component: oh-trend 188 | config: 189 | trendItem: =[props.itemTemp] 190 | style: 191 | --f7-theme-color-bg-color: transparent 192 | background: var(--f7-theme-color-bg-color) 193 | filter: opacity(30%) 194 | position: absolute 195 | width: 100% 196 | height: 100% 197 | top: 0 198 | left: 2 199 | z-index: 1 200 | - component: oh-link 201 | config: 202 | action: popup 203 | actionModal: widget:HM_Thermostat_Control_Final 204 | actionModalConfig: 205 | itemAmbientTemp: =props.itemAmbientTemp 206 | itemOutdoorTemp: =props.itemOutdoorTemp 207 | itemTargetTemp: =props.itemTargetTemp 208 | itemMode: =props.itemMode 209 | style: 210 | position: absolute 211 | width: 100% 212 | height: 100% 213 | top: 0 214 | left: 0 215 | -------------------------------------------------------------------------------- /StateCards/Cell_Weather_Actual_1.yaml: -------------------------------------------------------------------------------- 1 | uid: Cell_Weather_Actual_1 2 | tags: 3 | - Wetterkarte Icons 4 | props: 5 | parameters: 6 | - description: Small title on top of the card 7 | label: Title 8 | name: title 9 | required: false 10 | type: TEXT 11 | - description: HEX or rgba 12 | label: Background Color 13 | name: bgcolor 14 | required: false 15 | type: TEXT 16 | - description: page ID of chart to be opened 17 | label: page 18 | name: page 19 | required: false 20 | - context: item 21 | description: Item of Outsidetemp 22 | label: Outsidetemperature 23 | name: item_temp 24 | required: false 25 | type: TEXT 26 | - context: item 27 | description: Item of Outsidehumidity 28 | label: Humidity 29 | name: item_hum 30 | required: false 31 | type: TEXT 32 | - context: item 33 | description: Item of Rain Today 34 | label: Rain 35 | name: item_rain 36 | required: false 37 | type: TEXT 38 | - context: item 39 | description: Item of Strikes 40 | label: Strike Count 41 | name: item_strike 42 | required: false 43 | type: TEXT 44 | - context: item 45 | description: Item of Illuminance 46 | label: Illuminance 47 | name: item_ill 48 | required: false 49 | type: TEXT 50 | - context: item 51 | description: Item of Wind Avg 52 | label: Wind 53 | name: item_wind 54 | required: false 55 | type: TEXT 56 | - context: item 57 | description: Item of Wind Direction 58 | label: Wind Dir 59 | name: item_wind_dir 60 | required: false 61 | type: TEXT 62 | parameterGroups: [] 63 | timestamp: Nov 25, 2021, 2:23:55 PM 64 | component: f7-card 65 | config: 66 | style: 67 | background-color: "=props.bgcolor ? props.bgcolor : ''" 68 | border-radius: var(--f7-card-expandable-border-radius) 69 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 70 | class: 71 | - padding: 0px 72 | height: 150px 73 | margin-left: 5px 74 | margin-right: 5px 75 | noShadow: false 76 | slots: 77 | content: 78 | - component: f7-block 79 | config: 80 | style: 81 | display: flex 82 | flex-direction: row 83 | left: 16px 84 | position: absolute 85 | top: -5px 86 | slots: 87 | default: 88 | - component: f7-icon 89 | config: 90 | f7: sun_max 91 | size: 18 92 | style: 93 | margin-right: 10px 94 | - component: Label 95 | config: 96 | style: 97 | font-size: 12px 98 | margin-top: 0px 99 | text: "=props.title ? props.title : ''" 100 | - component: f7-block 101 | config: 102 | style: 103 | left: 16px 104 | position: absolute 105 | top: 60px 106 | width: 100% 107 | slots: 108 | default: 109 | - component: f7-chip 110 | config: 111 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 112 | iconF7: thermometer 113 | iconSize: 20 114 | style: 115 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 116 | font-size: 16px 117 | margin-bottom: 10px 118 | text: =items[props.item_temp].state 119 | - component: f7-chip 120 | config: 121 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 122 | iconF7: drop 123 | iconSize: 20 124 | style: 125 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 126 | font-size: 16px 127 | margin-bottom: 10px 128 | text: =items[props.item_hum].displayState 129 | - component: f7-chip 130 | config: 131 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 132 | iconF7: sun_min 133 | iconSize: 20 134 | style: 135 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 136 | font-size: 16px 137 | margin-bottom: 10px 138 | text: =items[props.item_ill].displayState 139 | - component: f7-chip 140 | config: 141 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 142 | iconF7: cloud_drizzle 143 | iconSize: 20 144 | style: 145 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 146 | font-size: 16px 147 | margin-bottom: 10px 148 | text: =items[props.item_rain].displayState 149 | - component: f7-chip 150 | config: 151 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 152 | iconF7: bolt 153 | iconSize: 20 154 | style: 155 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 156 | font-size: 16px 157 | margin-bottom: 10px 158 | text: =items[props.item_strike].state 159 | - component: f7-chip 160 | config: 161 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 162 | iconF7: wind 163 | iconSize: 20 164 | style: 165 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 166 | font-size: 16px 167 | margin-bottom: 10px 168 | text: =items[props.item_wind].displayState 169 | - component: f7-chip 170 | config: 171 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 172 | iconF7: compass 173 | iconSize: 20 174 | style: 175 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 176 | font-size: 16px 177 | margin-bottom: 10px 178 | text: =items[props.item_wind_dir].state 179 | - component: oh-link 180 | config: 181 | action: navigate 182 | actionPage: ='page:' + props.page 183 | style: 184 | height: 150px 185 | left: 0px 186 | position: absolute 187 | top: 0px 188 | width: 100% 189 | -------------------------------------------------------------------------------- /StateCards/Connection_Card_1.yaml: -------------------------------------------------------------------------------- 1 | uid: Connection_Card_1 2 | tags: 3 | - status page swipe 4 | props: 5 | parameters: [] 6 | parameterGroups: [] 7 | timestamp: Nov 25, 2021, 2:25:55 PM 8 | component: oh-swiper-card 9 | config: 10 | navigation: true 11 | noBorder: false 12 | noShadow: true 13 | pagination: false 14 | scrollbar: false 15 | style: 16 | height: "=(props.bigCard) ? '' : '160px'" 17 | overflow: hidden 18 | slots: 19 | default: 20 | - component: oh-label-card 21 | config: 22 | background: "linear-gradient(to bottom, #003366 0%, #00ffff 100%)" 23 | fontSize: 40px 24 | fontWeight: bold 25 | icon: f7:download_circle_fill 26 | item: SpeedtestBinding_DownloadBandwidth 27 | style: 28 | --card-content: padding 29 | -moz-user-select: none 30 | -ms-user-select: none 31 | -webkit-user-select: none 32 | background: "linear-gradient(to bottom, #003366 0%, #00ffff 100%)" 33 | border-radius: 10px 34 | height: 100% 35 | left: 0 36 | max-height: "=(props.bigCard) ? '' : '160px'" 37 | overflow: hidden 38 | position: absolute 39 | top: 0 40 | user-select: none 41 | width: 100% 42 | trendItem: SpeedtestBinding_DownloadBandwidth 43 | vertical: true 44 | - component: oh-label-card 45 | config: 46 | background: "linear-gradient(to bottom, #003366 0%, #00ffff 100%)" 47 | fontSize: 40px 48 | fontWeight: bold 49 | icon: f7:upload_circle_fill 50 | item: SpeedtestBinding_UploadBandwidth 51 | style: 52 | -moz-user-select: none 53 | -ms-user-select: none 54 | -webkit-user-select: none 55 | background: "linear-gradient(to bottom, #003366 0%, #00ffff 100%)" 56 | border-radius: 10px 57 | height: 100% 58 | left: 0 59 | max-height: "=(props.bigCard) ? '' : '160px'" 60 | overflow: hidden 61 | position: absolute 62 | top: 0 63 | user-select: none 64 | width: 100% 65 | trendItem: SpeedtestBinding_UploadBandwidth 66 | vertical: true 67 | - component: oh-label-card 68 | config: 69 | background: "linear-gradient(to bottom, #003366 0%, #00ffff 100%)" 70 | fontSize: 40px 71 | fontWeight: bold 72 | icon: f7:timer_fill 73 | item: SpeedtestBinding_Latency 74 | style: 75 | -moz-user-select: none 76 | -ms-user-select: none 77 | -webkit-user-select: none 78 | background: "linear-gradient(to bottom, #003366 0%, #00ffff 100%)" 79 | border-radius: 10px 80 | height: 100% 81 | left: 0 82 | max-height: "=(props.bigCard) ? '' : '160px'" 83 | overflow: hidden 84 | position: absolute 85 | top: 0 86 | user-select: none 87 | width: 100% 88 | trendItem: SpeedtestBinding_Latency 89 | vertical: true 90 | -------------------------------------------------------------------------------- /StateCards/Connection_Card_2.yaml: -------------------------------------------------------------------------------- 1 | uid: Connection_Card_2 2 | tags: [] 3 | props: 4 | parameters: 5 | - label: Header 6 | name: text_header 7 | required: false 8 | type: TEXT 9 | - description: icon name without ".png", located in static/icons/ folder 10 | label: Icon 11 | name: iconimage 12 | required: false 13 | type: TEXT 14 | - description: HEX or rgba 15 | label: Backgroundcolor 16 | name: bgcolor 17 | required: false 18 | type: TEXT 19 | - description: Page which will be opened as popup 20 | label: Page ID 21 | name: page 22 | required: false 23 | - context: item 24 | description: select item for download 25 | label: Item 26 | name: download 27 | required: false 28 | type: TEXT 29 | - context: item 30 | description: select item for upload 31 | label: Item 32 | name: upload 33 | required: false 34 | type: TEXT 35 | - context: item 36 | description: select item for set latency 37 | label: Item 38 | name: latency 39 | required: false 40 | type: TEXT 41 | timestamp: Nov 27, 2021, 3:12:47 PM 42 | component: f7-card 43 | config: 44 | style: 45 | background-color: "=props.bgcolor ? props.bgcolor : ''" 46 | border-radius: var(--f7-card-expandable-border-radius) 47 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 48 | class: 49 | - padding: 0px 50 | height: 125px 51 | margin-left: 5px 52 | margin-right: 5px 53 | noShadow: false 54 | slots: 55 | content: 56 | - component: f7-block 57 | config: 58 | style: 59 | left: 50px 60 | position: absolute 61 | top: -5px 62 | slots: 63 | default: 64 | - component: Label 65 | config: 66 | style: 67 | font-size: 17px 68 | font-weight: 600 69 | margin-left: 0px 70 | margin-top: 0px 71 | text: "=props.text_header ? props.text_header : 'Set Props'" 72 | - component: f7-block 73 | config: 74 | style: 75 | bottom: -37px 76 | left: 16px 77 | position: absolute 78 | slots: 79 | default: 80 | - component: f7-chip 81 | config: 82 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 83 | iconF7: "=(items[props.status].state === 'ON') ? 'lightbulb' : 'lightbulb_slash'" 84 | iconSize: 18 85 | style: 86 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 87 | text: "=(items[props.status].state === 'ON') ? items[props.status].state : ''" 88 | visible: "=props.status ? true : false" 89 | - component: f7-chip 90 | config: 91 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 92 | iconF7: flame 93 | iconSize: 18 94 | style: 95 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 96 | text: "=items[props.heating].state === 'ON' ? '' : ''" 97 | visible: =items[props.heating].state === 'ON' 98 | - component: f7-chip 99 | config: 100 | style: 101 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 102 | text: "=items[props.motion].state === 'ON' ? '' : ''" 103 | visible: "=props.motion ? true : false" 104 | slots: 105 | media: 106 | - component: oh-icon 107 | config: 108 | icon: "=items[props.motion].state === 'ON' ? 'motion' : ''" 109 | style: 110 | filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'" 111 | height: 18px 112 | - component: f7-chip 113 | config: 114 | style: 115 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 116 | text: "=items[props.windows_numbers].state > 0 ? items[props.windows_numbers].state : ''" 117 | visible: "=items[props.windows].state === 'OPEN' ? true : false" 118 | slots: 119 | media: 120 | - component: oh-icon 121 | config: 122 | icon: window-open 123 | style: 124 | filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'" 125 | height: 18px 126 | - component: f7-chip 127 | config: 128 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 129 | iconF7: "=items[props.door_lock].state === 'ON' ? 'lock_open' : 'lock'" 130 | iconSize: 18 131 | style: 132 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 133 | text: "=items[props.door_lock].state === 'ON' ? '' : ''" 134 | visible: "=props.door_lock ? true : false" 135 | - component: f7-chip 136 | config: 137 | style: 138 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 139 | text: "=(Number(items[props.blinds_closed].state) === 0) ? '' : Math.floor(items[props.blinds_closed].state) + '%'" 140 | visible: "=(Number(Math.floor(items[props.blinds_closed].state)) > 0) ? true : false" 141 | slots: 142 | media: 143 | - component: oh-icon 144 | config: 145 | icon: "=(Number(items[props.blinds_closed].state) === 0) ? 'cinemascreen-30' : 'cinemascreen-100'" 146 | style: 147 | filter: "='brightness(' + (themeOptions.dark === 'dark' ? '100' : '0.3') + ')'" 148 | height: 18px 149 | - component: f7-chip 150 | config: 151 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 152 | iconF7: "=items[props.speakers].state === 'PLAY' ? 'speaker_2' : 'speaker'" 153 | iconSize: 18 154 | style: 155 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 156 | visible: "=items[props.speakers].state === 'PLAY' ? true : false" 157 | - component: f7-chip 158 | config: 159 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 160 | iconF7: sun_min 161 | iconSize: 18 162 | style: 163 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 164 | text: =items[props.illuminance].displayState 165 | visible: "=props.illuminance ? true : false" 166 | - component: f7-block 167 | config: 168 | style: 169 | bottom: -65px 170 | left: 16px 171 | position: absolute 172 | slots: 173 | default: 174 | - component: f7-chip 175 | config: 176 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 177 | iconF7: download_circle_fill 178 | iconSize: 18 179 | style: 180 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 181 | text: "=(items[props.download].displayState ? items[props.download].displayState : items[props.download].state) " 182 | visible: "=props.download ? true : false" 183 | - component: f7-chip 184 | config: 185 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 186 | iconF7: upload_circle_fill 187 | iconSize: 18 188 | style: 189 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 190 | text: "=(items[props.upload].displayState ? items[props.upload].displayState : items[props.upload].state) " 191 | visible: "=props.upload ? true : false" 192 | - component: f7-chip 193 | config: 194 | iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'" 195 | iconF7: timer_fill 196 | iconSize: 18 197 | style: 198 | --f7-chip-bg-color: rgba(255, 255, 255, 0) 199 | text: "=(items[props.latency].displayState ? items[props.latency].displayState : items[props.latency].state) " 200 | visible: "=props.latency ? true : false" 201 | - component: oh-image 202 | config: 203 | style: 204 | height: 25px 205 | left: 16px 206 | opacity: 0.7 207 | position: absolute 208 | top: 10px 209 | url: ='/static/icons/' + props.iconimage + '.png' 210 | visible: "=props.iconimage ? true : false" 211 | - component: oh-link 212 | config: 213 | action: popup 214 | actionModal: ='page:' + props.page 215 | style: 216 | height: 110px 217 | left: 0px 218 | position: absolute 219 | top: 0px 220 | width: 100% 221 | -------------------------------------------------------------------------------- /StateCards/Connection_Card_3.yaml: -------------------------------------------------------------------------------- 1 | uid: Connection_Card_3 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: Set the height of the Widget 6 | label: Widget Height 7 | name: cardheight 8 | required: false 9 | type: TEXT 10 | - description: Headline 11 | label: Headline 12 | name: headline 13 | required: false 14 | type: TEXT 15 | groupName: secondpage 16 | - label: Item name 1 17 | name: itemname1 18 | required: false 19 | type: TEXT 20 | groupName: item1 21 | - context: item 22 | label: Item 1 23 | name: item1 24 | required: false 25 | type: TEXT 26 | groupName: item1 27 | - label: Item name 2 28 | name: itemname2 29 | required: false 30 | type: TEXT 31 | groupName: item2 32 | - context: item 33 | label: Item 2 34 | name: item2 35 | required: false 36 | type: TEXT 37 | groupName: item2 38 | - label: Item name 3 39 | name: itemname3 40 | required: false 41 | type: TEXT 42 | groupName: item3 43 | - context: item 44 | label: Item 3 45 | name: item3 46 | required: false 47 | type: TEXT 48 | groupName: item3 49 | - label: Item name 4 50 | name: itemname4 51 | required: false 52 | type: TEXT 53 | groupName: item4 54 | - context: item 55 | label: Item 4 56 | name: item4 57 | required: false 58 | type: TEXT 59 | groupName: item4 60 | - label: Item name 5 61 | name: itemname5 62 | required: false 63 | type: TEXT 64 | groupName: item5 65 | - context: item 66 | label: Item 5 67 | name: item5 68 | required: false 69 | type: TEXT 70 | groupName: item5 71 | - label: Item name 6 72 | name: itemname6 73 | required: false 74 | type: TEXT 75 | groupName: item6 76 | - context: item 77 | label: Item 6 78 | name: item6 79 | required: false 80 | type: TEXT 81 | groupName: item6 82 | - label: Item name 7 83 | name: itemname7 84 | required: false 85 | type: TEXT 86 | groupName: item7 87 | - context: item 88 | label: Item 7 89 | name: item7 90 | required: false 91 | type: TEXT 92 | groupName: item7 93 | - label: Item name 8 94 | name: itemname8 95 | required: false 96 | type: TEXT 97 | groupName: item8 98 | - context: item 99 | label: Item 8 100 | name: item8 101 | required: false 102 | type: TEXT 103 | groupName: item8 104 | - label: Item name 9 105 | name: itemname9 106 | required: false 107 | type: TEXT 108 | groupName: item9 109 | - context: item 110 | label: Item 9 111 | name: item9 112 | required: false 113 | type: TEXT 114 | groupName: item9 115 | parameterGroups: 116 | - name: secondpage 117 | label: Second Page 118 | - name: item1 119 | label: Item 1 120 | - name: item2 121 | label: Item 2 122 | - name: item3 123 | label: Item 3 124 | - name: item4 125 | label: Item 4 126 | - name: item5 127 | label: Item 5 128 | - name: item6 129 | label: Item 6 130 | - name: item7 131 | label: Item 7 132 | - name: item8 133 | label: Item 8 134 | - name: item9 135 | label: Item 9 136 | timestamp: Nov 27, 2021, 3:42:05 PM 137 | component: f7-card 138 | config: 139 | style: 140 | --weather-card-border-radius: 20px 141 | --weather-card-color: "=(!props.fontColor) ? '255,255,255' : props.fontColor" 142 | --weather-card-text-color: rgba(var(--weather-card-color),1) 143 | --weather-card-text-shadow-color: "=(!props.textShadowColor) ? '0,0,0' : props.textShadowColor" 144 | --weather-font-size-large: 26px 145 | --weather-font-size-normal: 18px 146 | --weather-font-size-small: 16px 147 | --weather-font-size-xlarge: 60px 148 | --weather-font-size-xsmall: 14px 149 | --weather-font-size-xxlarge: 70px 150 | --weather-font-size-xxsmall: 12px 151 | --weather-text-shadow-light: 2px 2px rgba(var(--weather-card-text-shadow-color),.15) 152 | --weather-text-shadow-strong: 2px 2px rgba(var(--weather-card-text-shadow-color),.35) 153 | --weather-text-transform-time: uppercase 154 | -moz-user-select: none 155 | -ms-user-select: none 156 | -webkit-user-select: none 157 | background: "#1c1c1d" 158 | border-radius: var(--weather-card-border-radius) 159 | color: var(--weather-card-text-color) 160 | height: =props.cardheight 161 | overflow: hidden 162 | user-select: none 163 | slots: 164 | default: 165 | - component: f7-block 166 | config: 167 | class: 168 | - no-padding 169 | - no-margin 170 | - align-items-space-between 171 | style: 172 | height: 100% 173 | left: 0 174 | position: absolute 175 | top: 0 176 | width: 100% 177 | slots: 178 | default: 179 | - component: f7-list 180 | config: 181 | style: 182 | height: 100% 183 | slots: 184 | default: 185 | - component: Label 186 | config: 187 | style: 188 | font-size: 25px 189 | height: 45px 190 | padding-top: 15px 191 | text-align: center 192 | text: '=props.headline ? props.headline : "Headline"' 193 | - component: f7-row 194 | config: 195 | style: 196 | margin-right: 15px 197 | slots: 198 | default: 199 | - component: f7-col 200 | config: 201 | style: 202 | width: 50% 203 | slots: 204 | default: 205 | - component: f7-list-item 206 | config: 207 | badge: '=props.item1 ? ((items[props.item1].state === "ON") ? "ON" : "OFF") : false' 208 | badgeColor: '=(items[props.item1].state === "ON") ? "green" : "red"' 209 | title: '=props.itemname1 ? props.itemname1 : (props.item1 ? props.item1 : "")' 210 | - component: f7-list-item 211 | config: 212 | badge: '=props.item2 ? ((items[props.item2].state === "ON") ? "ON" : "OFF") : false' 213 | badgeColor: '=(items[props.item2].state === "ON") ? "green" : "red"' 214 | title: '=props.itemname2 ? props.itemname2 : (props.item2 ? props.item2 : "")' 215 | - component: f7-list-item 216 | config: 217 | badge: '=props.itemname3 ? ((items[props.item3].state === "ON") ? "ON" : "OFF") : false' 218 | badgeColor: '=(items[props.item3].state === "ON") ? "green" : "red"' 219 | title: '=props.itemname3 ? props.itemname3 : (props.item3 ? props.item3 : "")' 220 | - component: f7-list-item 221 | config: 222 | badge: '=props.itemname4 ? ((items[props.item4].state === "ON") ? "ON" : "OFF") : false' 223 | badgeColor: '=(items[props.item4].state === "ON") ? "green" : "red"' 224 | title: '=props.itemname4 ? props.itemname4 : (props.item4 ? props.item4 : "")' 225 | - component: f7-col 226 | config: 227 | style: 228 | width: 50% 229 | slots: 230 | default: 231 | - component: f7-list-item 232 | config: 233 | badge: '=props.itemname5 ? ((items[props.item5].state === "ON") ? "ON" : "OFF") : false' 234 | badgeColor: '=(items[props.item5].state === "ON") ? "green" : "red"' 235 | title: '=props.itemname5 ? props.itemname5 : (props.item5 ? props.item5 : "")' 236 | - component: f7-list-item 237 | config: 238 | badge: '=props.itemname6 ? ((items[props.item6].state === "ON") ? "ON" : "OFF") : false' 239 | badgeColor: '=(items[props.item6].state === "ON") ? "green" : "red"' 240 | title: '=props.itemname6 ? props.itemname6 : (props.item6 ? props.item6 : "")' 241 | - component: f7-list-item 242 | config: 243 | badge: '=props.itemname7 ? ((items[props.item7].state === "ON") ? "ON" : "OFF") : false' 244 | badgeColor: '=(items[props.item7].state === "ON") ? "green" : "red"' 245 | title: '=props.itemname7 ? props.itemname7 : (props.item7 ? props.item7 : "")' 246 | - component: f7-list-item 247 | config: 248 | badge: '=props.itemname8 ? ((items[props.item8].state === "ON") ? "ON" : "OFF") : false' 249 | badgeColor: '=(items[props.item8].state === "ON") ? "green" : "red"' 250 | title: '=props.itemname8 ? props.itemname8 : (props.item8 ? props.item8 : "")' 251 | -------------------------------------------------------------------------------- /StateCards/README.md: -------------------------------------------------------------------------------- 1 | Connection_Card_1 2 | 3 | ![111](https://user-images.githubusercontent.com/73241309/145098095-feef6705-97ac-4b6f-a6fc-fa6e169c28a5.PNG) 4 | 5 | Connection_Card_2 6 | 7 | ![222](https://user-images.githubusercontent.com/73241309/145099421-0f9623e2-34c7-417b-b4c5-e02be9dec83b.PNG) 8 | 9 | Card_Info 10 | 11 | Bildschirmfoto 2023-03-03 um 09 00 29 12 | 13 | 14 | Service_Card 15 | 16 | ![222](https://user-images.githubusercontent.com/73241309/145098919-6cdb90b8-c0ca-4007-9657-ed4c8bb25974.PNG) 17 | 18 | 19 | Card_Room_Popup+Motion 20 | 21 | ![333](https://user-images.githubusercontent.com/73241309/145102418-8612a8d3-e664-4236-8d1b-8b07507c994a.PNG) 22 | 23 | Card_Battery_State 24 | 25 | ![6666666](https://user-images.githubusercontent.com/73241309/145116235-b7155590-ee9a-4330-8f6e-df1d71970c52.PNG) 26 | 27 | Card_Temp_Control 28 | 29 | ![777777](https://user-images.githubusercontent.com/73241309/145116783-fafd7e53-1371-4e0a-a885-575dc5ed7bf2.PNG) 30 | 31 | Card_Temp_1 32 | 33 | ![8888888](https://user-images.githubusercontent.com/73241309/145117048-00c408ea-fda0-48f8-827d-d7ee835a3856.PNG) 34 | 35 | Cell_Weather_Actual_1 36 | 37 | ![sadgag](https://user-images.githubusercontent.com/73241309/145118945-b3c1ca37-d923-46df-b829-5be25a1364cc.PNG) 38 | 39 | 40 | -------------------------------------------------------------------------------- /StateCards/Service_Card.yaml: -------------------------------------------------------------------------------- 1 | uid: Service_Card 2 | tags: [] 3 | props: 4 | parameters: [] 5 | parameterGroups: [] 6 | timestamp: Feb 18, 2021, 9:18:06 PM 7 | component: oh-list-card 8 | config: 9 | title: Services Status 10 | accordionList: true 11 | #footer: Online status of home automation related services 12 | slots: 13 | default: 14 | - component: oh-list-item 15 | config: 16 | title: All Services 17 | icon: oh:network 18 | badge: OK 19 | badgeColor: green 20 | slots: 21 | accordion: 22 | - component: oh-list 23 | config: 24 | accordionList: true 25 | class: 26 | - margin-left 27 | slots: 28 | default: 29 | - component: oh-list-item 30 | config: 31 | title: Persistence 32 | slots: 33 | accordion: 34 | - component: oh-list 35 | config: 36 | accordionList: true 37 | class: 38 | - margin-left 39 | slots: 40 | default: 41 | - component: oh-list-item 42 | config: 43 | title: influxDB 44 | - component: oh-list-item 45 | config: 46 | title: Grafana 47 | - component: oh-list-item 48 | config: 49 | title: Zigbee 50 | slots: 51 | accordion: 52 | - component: oh-list 53 | config: 54 | accordionList: true 55 | class: 56 | - margin-left 57 | slots: 58 | default: 59 | - component: oh-list-item 60 | config: 61 | title: Service1 62 | - component: oh-list-item 63 | config: 64 | title: Service2 65 | -------------------------------------------------------------------------------- /Thermostat/Cell_Temp_Card_1.yaml: -------------------------------------------------------------------------------- 1 | uid: Cell_Temp_Card_1 2 | tags: 3 | - heatmode 4 | - humidity 5 | - set temp 6 | - temperature 7 | props: 8 | parameters: 9 | - description: Small title on top of the card 10 | label: Title 11 | name: title 12 | required: false 13 | type: TEXT 14 | - description: Icon on top of the card (only f7 icons (without f7:)) 15 | label: Icon 16 | name: icon 17 | required: false 18 | type: TEXT 19 | - description: in rgba() or HEX or empty 20 | label: Background Color 21 | name: bgcolor 22 | required: false 23 | type: TEXT 24 | - context: item 25 | label: Current Temperature 26 | name: temp_item 27 | required: false 28 | type: TEXT 29 | - context: item 30 | label: Set Temperature 31 | name: set_temp_item 32 | required: false 33 | type: TEXT 34 | - context: item 35 | label: Current Humidity 36 | name: humidity_item 37 | required: false 38 | type: TEXT 39 | - context: item 40 | description: on/off item 41 | label: Heating control item 42 | name: heating_item 43 | required: false 44 | type: TEXT 45 | parameterGroups: [] 46 | timestamp: Nov 25, 2021, 2:21:35 PM 47 | component: f7-card 48 | config: 49 | style: 50 | background-color: "=props.bgcolor ? props.bgcolor : ''" 51 | border-radius: var(--f7-card-expandable-border-radius) 52 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 53 | height: 120px 54 | margin-left: 5px 55 | margin-right: 5px 56 | noShadow: false 57 | padding: 0px 58 | slots: 59 | content: 60 | - component: f7-block 61 | config: 62 | style: 63 | display: flex 64 | flex-direction: row 65 | left: 16px 66 | position: absolute 67 | top: -5px 68 | slots: 69 | default: 70 | - component: f7-icon 71 | config: 72 | f7: =props.icon 73 | size: 18 74 | style: 75 | margin-right: 10px 76 | visible: "=props.icon ? true : false" 77 | - component: Label 78 | config: 79 | style: 80 | font-size: 12px 81 | margin-top: 0px 82 | text: "=props.title ? props.title : ''" 83 | - component: f7-block 84 | config: 85 | style: 86 | bottom: -20px 87 | flex-direction: row 88 | left: 16px 89 | position: absolute 90 | slots: 91 | default: 92 | - component: Label 93 | config: 94 | style: 95 | font-size: 22px 96 | font-weight: 400 97 | margin-left: 0px 98 | margin-top: 0px 99 | text: "=items[props.temp_item].displayState ? items[props.temp_item].displayState : items[props.temp_item].state" 100 | - component: f7-block 101 | config: 102 | style: 103 | bottom: -40px 104 | display: flex 105 | flex-direction: row 106 | left: 12px 107 | position: absolute 108 | slots: 109 | default: 110 | - component: f7-icon 111 | config: 112 | f7: drop 113 | size: 18 114 | visible: "=props.humidity_item ? true : false" 115 | - component: Label 116 | config: 117 | style: 118 | font-size: 12px 119 | margin-left: 5px 120 | margin-top: 0px 121 | text: =items[props.humidity_item].displayState 122 | visible: "=props.humidity_item ? true : false" 123 | - component: f7-block 124 | config: 125 | style: 126 | bottom: -63px 127 | display: flex 128 | flex-direction: row 129 | left: 12px 130 | position: absolute 131 | slots: 132 | default: 133 | - component: f7-icon 134 | config: 135 | f7: flame 136 | size: 18 137 | visible: "=props.heating_item ? true : false" 138 | - component: Label 139 | config: 140 | style: 141 | font-size: 12px 142 | margin-left: 5px 143 | margin-top: 0px 144 | text: =items[props.heating_item].state 145 | visible: "=props.heating_item ? true : false" 146 | - component: oh-button 147 | config: 148 | action: command 149 | actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) + 0.5 150 | actionItem: =props.set_temp_item 151 | iconColor: red 152 | iconF7: arrow_up_circle 153 | iconSize: 35 154 | style: 155 | background: transparent 156 | height: 35px 157 | position: absolute 158 | right: 10px 159 | top: 12px 160 | visible: "=props.set_temp_item ? true : false" 161 | - component: oh-button 162 | config: 163 | action: command 164 | actionCommand: =Number(items[props.set_temp_item].state.split(' ')[0]) - 0.5 165 | actionItem: =props.set_temp_item 166 | iconColor: red 167 | iconF7: arrow_down_circle 168 | iconSize: 35 169 | style: 170 | background: transparent 171 | height: 35px 172 | position: absolute 173 | right: 10px 174 | top: 74px 175 | visible: "=props.set_temp_item ? true : false" 176 | - component: Label 177 | config: 178 | style: 179 | font-size: 12px 180 | position: absolute 181 | right: 15px 182 | top: 50px 183 | text: =items[props.set_temp_item].state 184 | visible: "=props.set_temp_item ? true : false" 185 | - component: f7-block 186 | config: 187 | style: 188 | height: 120px 189 | left: 15px 190 | position: absolute 191 | top: 15px 192 | width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' " 193 | slots: 194 | default: 195 | - component: oh-trend 196 | config: 197 | style: 198 | --f7-theme-color-bg-color: transparent 199 | background: var(--f7-theme-color-bg-color) 200 | filter: opacity(30%) 201 | height: 100% 202 | left: 0px 203 | position: absolute 204 | top: 0px 205 | width: 100% 206 | z-index: 1 207 | trendGradient: 208 | - "#aa2b1d" 209 | - "#cc561e" 210 | - "#ef8d32" 211 | - "#beca5c" 212 | trendItem: =props.temp_item 213 | - component: oh-link 214 | config: 215 | action: analyzer 216 | actionAnalyzerChartType: day 217 | actionAnalyzerCoordSystem: time 218 | actionAnalyzerItems: "=props.set_temp_item ? [props.temp_item, props.humidity_item, props.set_temp_item, props.heating_item] : (props.humidity_item ? [props.temp_item, props.humidity_item] : [props.temp_item])" 219 | style: 220 | height: 120px 221 | left: 0px 222 | position: absolute 223 | top: 0px 224 | width: "=props.set_temp_item ? 'calc(100% - 55px)' : '100%' " 225 | -------------------------------------------------------------------------------- /Thermostat/README.md: -------------------------------------------------------------------------------- 1 | Cell_Temp_Card_1 2 | 3 | ![2222222](https://user-images.githubusercontent.com/73241309/145096703-204ade4b-325e-41ca-b72b-7bcf27dadae1.PNG) 4 | 5 | Liquid_Card 6 | 7 | ![33333](https://user-images.githubusercontent.com/73241309/145096741-49fd706b-aae9-454e-9fc1-8295457b559c.PNG) 8 | 9 | Round_Thermo 10 | 11 | ![44444](https://user-images.githubusercontent.com/73241309/145096779-4f91b4fd-78ed-48b6-a2c4-01116489719d.PNG) 12 | 13 | Thermostat-3Stage 14 | 15 | ![555555](https://user-images.githubusercontent.com/73241309/145096803-c013661a-54c5-434a-8ed1-22d0c9eb0369.PNG) 16 | -------------------------------------------------------------------------------- /Thermostat/Thermostat-3Stage.yaml: -------------------------------------------------------------------------------- 1 | uid: Thermostat-3Stage 2 | tags: [] 3 | props: 4 | parameters: 5 | - description: Thermostat to control 6 | label: Description 7 | name: Title 8 | required: false 9 | type: TEXT 10 | - context: item 11 | description: Das Item für die gemessene Temperatur 12 | label: Ist Temperature Item 13 | name: tempItem 14 | required: true 15 | type: TEXT 16 | - context: command 17 | description: Unterer Preset 18 | label: Temperatur kalt 19 | name: tempKalt 20 | required: true 21 | type: TEXT 22 | - context: command 23 | description: Normaler Preset 24 | label: Temperatur normal 25 | name: tempNorm 26 | required: true 27 | type: TEXT 28 | - context: command 29 | description: Oberer Preset 30 | label: Temperatur warm 31 | name: tempWarm 32 | required: true 33 | type: TEXT 34 | - context: item 35 | description: Das Item mit dem die Solltemperatur eingestellt wird 36 | label: Setpoint Item 37 | name: setpointItem 38 | required: true 39 | type: TEXT 40 | timestamp: Nov 27, 2021, 10:54:59 AM 41 | component: f7-card 42 | config: 43 | noBorder: false 44 | noShadow: false 45 | outline: false 46 | padding: true 47 | style: 48 | --f7-card-border-radius: 15px 49 | --f7-card-box-shadow: 0px 5px 10px rgba(0,0,0,0.15) 50 | --f7-card-content-padding-horizontal: 16px 51 | --f7-card-content-padding-vertical: 0px 52 | --f7-card-header-font-size: 14px 53 | --f7-card-header-font-weight: 600 54 | --f7-card-margin-horizontal: 5px 55 | slots: 56 | content: 57 | - component: oh-label-card 58 | config: 59 | action: analyzer 60 | actionAnalyzerCoordSystem: time 61 | actionAnalyzerItems: =[props.tempItem,props.setpointItem] 62 | icon: f7:thermometer 63 | item: =(props.tempItem) 64 | noShadow: true 65 | title: =(props.Title) 66 | trendItem: =(props.tempItem) 67 | vertical: false 68 | - component: oh-stepper-card 69 | config: 70 | autorepeat: true 71 | color-theme: gray 72 | fill: false 73 | item: =(props.setpointItem) 74 | large: false 75 | max: =(props.tempWarm+1) 76 | min: =(props.tempKalt-1) 77 | noBorder: true 78 | noShadow: true 79 | raised: true 80 | round: true 81 | small: true 82 | step: 0.5 83 | - component: f7-row 84 | config: 85 | class: 86 | - padding-bottom 87 | - padding-right 88 | slots: 89 | default: 90 | - component: f7-col 91 | slots: 92 | default: 93 | - component: oh-button 94 | config: 95 | action: command 96 | actionCommand: =(props.tempKalt) 97 | actionItem: =(props.setpointItem) 98 | iconColor: blue 99 | iconF7: thermometer_snowflake 100 | text: min 101 | textColor: blue 102 | title: Kalt 103 | - component: f7-col 104 | slots: 105 | default: 106 | - component: oh-button 107 | config: 108 | action: command 109 | actionCommand: =(props.tempNorm) 110 | actionItem: =(props.setpointItem) 111 | iconColor: orange 112 | iconF7: thermometer 113 | text: ok 114 | textColor: orange 115 | title: Normal 116 | - component: f7-col 117 | slots: 118 | default: 119 | - component: oh-button 120 | config: 121 | action: command 122 | actionCommand: =(props.tempWarm) 123 | actionItem: =(props.setpointItem) 124 | iconColor: red 125 | iconF7: thermometer_sun 126 | text: max 127 | textColor: red 128 | title: Warm 129 | -------------------------------------------------------------------------------- /Weather/README.md: -------------------------------------------------------------------------------- 1 | Card_Weather_Big_1 2 | 3 | ![99999](https://user-images.githubusercontent.com/73241309/145117333-c63bc568-5427-4e13-a459-389c6b1e9308.PNG) 4 | 5 | Card_Weather_Small_1 6 | 7 | ![werewe](https://user-images.githubusercontent.com/73241309/145117701-96d282c2-81e3-4993-9cc7-dbe9c082471d.PNG) 8 | 9 | Card_Weather_Small_Static_2 10 | 11 | ![4weqtadrgas](https://user-images.githubusercontent.com/73241309/145118140-6ffabac0-aa98-41ba-89da-ad8f613d23e6.PNG) 12 | 13 | Cell_Weather_1 14 | 15 | ![sdfgsadg](https://user-images.githubusercontent.com/73241309/145118438-a0daa521-27f0-4d0f-b18e-469e8c6a539c.PNG) 16 | 17 | 18 | --------------------------------------------------------------------------------