├── BasicPages ├── BasicPage.yaml └── BasicPopupPage.yaml ├── MainPage.yaml ├── OneClickInstall ├── README.md ├── uicomponents_ui_page.json └── uicomponents_ui_widget.json ├── README.md ├── Widgets ├── 3D-Print-Mobile_1.yaml ├── 3D-Print_Mobile.yaml ├── Card_Room_Popup+Motion.yaml ├── Card_Weather_Small_1.yaml ├── Cell_Card_1.yaml ├── Cell_Light_Card_1.yaml ├── Cell_Light_Color_Card_2.yaml ├── Cell_Settings_1.yaml ├── Cell_Shutter_Card_1.yaml ├── Cell_Speaker_Card_1.yaml ├── Cell_Temp_Card_1.yaml ├── Cell_Temp_Card_2.yaml ├── Command_Button.yaml ├── Command_Button_Popup.yaml ├── Connection_Card_2.yaml ├── Connection_Card_3.yaml └── front_cam_mobile.yaml ├── icons ├── README.md ├── bedroom.png ├── bedtemp.png ├── clamp.png ├── desk-lamp.png ├── dining-table.png ├── hallway.png ├── interior-design.png ├── kitchen.png ├── led-strip.png ├── monitor.png ├── moss.png ├── neural.png ├── rgb.png ├── stairs.png ├── tooltemp.png └── workspace.png ├── items ├── README.md └── openweathermap.items └── popupPages ├── 3D Drucker Popup.yaml ├── Alle Batterien.yaml ├── Büro Licht Popup.yaml ├── Büro.yaml ├── Esszimmer.yaml ├── Flur.yaml ├── Küche.yaml ├── Netzwerk Popup.yaml ├── Obergeschoss.yaml ├── Treppe.yaml ├── Werkstatt.yaml └── Wohnzimmer.yaml /BasicPages/BasicPage.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | label: Basic Page 3 | sidebar: false 4 | blocks: 5 | - component: oh-block 6 | config: {} 7 | slots: 8 | default: 9 | - component: oh-grid-row 10 | config: {} 11 | slots: 12 | default: 13 | - component: oh-grid-col 14 | config: 15 | large: "20" 16 | medium: "33" 17 | width: "50" 18 | xlarge: "20" 19 | slots: 20 | default: 21 | - component: widget:Cell_Card_1 22 | config: 23 | bgcolor: rgba(233, 196, 106, 0.5) 24 | command: "1" 25 | header: Morgen 26 | icon: sunrise 27 | item: Szene 28 | title: Aktiviere Szene 29 | - component: oh-grid-col 30 | config: 31 | large: "20" 32 | medium: "33" 33 | width: "50" 34 | xlarge: "20" 35 | slots: 36 | default: 37 | - component: widget:Cell_Card_1 38 | config: 39 | bgcolor: rgba(244, 162, 97, 0.5) 40 | command: "2" 41 | header: Tag 42 | icon: sun_max 43 | item: Szene 44 | title: Aktiviere Szene 45 | - component: oh-grid-col 46 | config: 47 | large: "20" 48 | medium: "33" 49 | width: "50" 50 | xlarge: "20" 51 | slots: 52 | default: 53 | - component: widget:Cell_Card_1 54 | config: 55 | bgcolor: rgba(231, 111, 81, 0.5) 56 | command: "3" 57 | header: Abend 58 | icon: sunset 59 | item: Szene 60 | title: Aktiviere Szene 61 | - component: oh-grid-col 62 | config: 63 | large: "20" 64 | medium: "33" 65 | width: "50" 66 | xlarge: "20" 67 | slots: 68 | default: 69 | - component: widget:Cell_Card_1 70 | config: 71 | bgcolor: rgba(38, 70, 83, 0.5) 72 | command: "4" 73 | header: Nacht 74 | icon: moon_zzz 75 | item: Szene 76 | title: Aktiviere Szene 77 | - component: oh-grid-col 78 | config: 79 | large: "20" 80 | medium: "33" 81 | width: "50" 82 | xlarge: "20" 83 | slots: 84 | default: 85 | - component: widget:Cell_Card_1 86 | config: 87 | bgcolor: rgba(2, 48, 71, 0.8) 88 | command: "5" 89 | header: Alles aus 90 | icon: zzz 91 | item: Szene 92 | title: Hauptschalter 93 | - component: oh-block 94 | config: {} 95 | slots: 96 | default: 97 | - component: oh-grid-row 98 | config: {} 99 | slots: 100 | default: 101 | - component: oh-grid-col 102 | config: 103 | large: "40" 104 | medium: "40" 105 | small: "100" 106 | width: "100" 107 | xlarge: "40" 108 | xsmall: "100" 109 | slots: 110 | default: 111 | - component: widget:Cell_Weather_1 112 | config: 113 | command: "5" 114 | header: Alles aus 115 | icon: zzz 116 | item: Szene 117 | title: Wetter 118 | - component: oh-grid-col 119 | config: 120 | large: "30" 121 | medium: "30" 122 | small: "100" 123 | width: "100" 124 | xlarge: "30" 125 | xsmall: "100" 126 | slots: 127 | default: 128 | - component: widget:Cell_Weather_Actual_1 129 | config: 130 | item_hum: Wetterstation_Luftfeuchtigkeit 131 | item_ill: Wetterstation_Helligkeit 132 | item_rain: Wetterstation_Regenheute 133 | item_strike: Wetterstation_LightningStrikeCount 134 | item_temp: Wetterstation_Aussentemperatur 135 | item_wind: Wetterstation_WindDurchschnitt 136 | item_wind_dir: Wetterstation_Windrichtung 137 | page: Test2 138 | title: Aussen 139 | - component: oh-grid-col 140 | config: 141 | large: "10" 142 | medium: "10" 143 | small: "50" 144 | width: "50" 145 | xlarge: "10" 146 | xsmall: "50" 147 | slots: 148 | default: 149 | - component: widget:Cell_Garden_1 150 | config: 151 | item_soil_hum: SensorSensorSoilHumidity 152 | item_zone: WateringAutomatic_CurrentZone 153 | title: Garten 154 | - component: oh-grid-col 155 | config: 156 | large: "10" 157 | medium: "10" 158 | small: "50" 159 | width: "50" 160 | xlarge: "10" 161 | xsmall: "50" 162 | slots: 163 | default: 164 | - component: widget:Cell_Pool_1 165 | config: 166 | item_pump: SHELLY_PoolPump_OnOff 167 | item_temp: SHELLY_Temperatur_Pool 168 | title: Pool 169 | - component: oh-grid-col 170 | config: 171 | large: "10" 172 | medium: "10" 173 | small: "50" 174 | width: "50" 175 | xlarge: "10" 176 | xsmall: "50" 177 | slots: 178 | default: 179 | - component: widget:Cell_Settings_1 180 | config: 181 | item_battery: GroupBatteryLevelCritical 182 | page: page_29fff8448f 183 | - component: oh-block 184 | config: {} 185 | slots: 186 | default: 187 | - component: oh-grid-row 188 | config: {} 189 | slots: 190 | default: 191 | - component: oh-grid-col 192 | config: 193 | large: "25" 194 | medium: "33" 195 | small: "50" 196 | width: "100" 197 | xlarge: "25" 198 | slots: 199 | default: 200 | - component: widget:Card_room_12 201 | config: 202 | blinds_closed: StorenState 203 | heating: SHELLY_Heizung_Wohnung 204 | humidity: SHELLY_Humidity_Wohnung 205 | iconimage: livingroom 206 | illuminance: GroupIlluminanceWohnzimmer 207 | page: page_37d05f1a2b 208 | settemp: SHELLY_Soll_Temperatur_Wohnung 209 | speakers: SonosWohnzimmer_Fernbedienung 210 | status: LichterWohnung 211 | temp: SHELLY_Temperatur_Wohnung_correct 212 | text_header: Wohnzimmer 213 | windows: GroupWindowsWohnzimmerState 214 | windows_numbers: GroupWindowsWohnzimmerNumber 215 | - component: oh-grid-col 216 | config: 217 | large: "25" 218 | medium: "33" 219 | small: "50" 220 | width: "100" 221 | xlarge: "25" 222 | slots: 223 | default: 224 | - component: widget:Card_room_12 225 | config: 226 | heating: SHELLY_Heizung_Zimmer_Eltern 227 | humidity: SHELLY_Humidity_Zimmer_Eltern 228 | iconimage: myparents 229 | page: ZimmerEltern 230 | settemp: SHELLY_Soll_Temperatur_Zimmer_Eltern 231 | speakers: SonosEltern_Fernbedienung 232 | status: Group_Lights_ElternSchlafzimmer 233 | temp: SHELLY_Temperatur_Zimmer_Eltern_correct 234 | text_header: Eltern 235 | - component: oh-grid-col 236 | config: 237 | large: "25" 238 | medium: "33" 239 | small: "50" 240 | width: "100" 241 | xlarge: "25" 242 | slots: 243 | default: 244 | - component: widget:Card_room_12 245 | config: 246 | heating: SHELLY_Heizung_Zimmer_GIRL 247 | humidity: SHELLY_Humidity_Zimmer_GIRL 248 | iconimage: mygirl 249 | illuminance: FensterGIRL1_Lux 250 | page: ZimmerGIRL 251 | settemp: SHELLY_Soll_Temperatur_Zimmer_GIRL 252 | speakers: SonosGIRL_Fernbedienung 253 | status: LichterGIRL 254 | temp: SHELLY_Temperatur_Zimmer_GIRL_correct 255 | text_header: GIRL 256 | windows: FensterGIRL1_Contact 257 | - component: oh-grid-col 258 | config: 259 | large: "25" 260 | medium: "33" 261 | small: "50" 262 | width: "100" 263 | xlarge: "25" 264 | slots: 265 | default: 266 | - component: widget:Card_room_12 267 | config: 268 | heating: SHELLY_Heizung_Zimmer_BOY 269 | humidity: SHELLY_Humidity_Zimmer_BOY 270 | iconimage: myboy 271 | illuminance: FensterBOY_Lux 272 | page: ZimmerBOY 273 | settemp: SHELLY_Soll_Temperatur_Zimmer_BOY 274 | speakers: SonosBOY_Fernbedienung 275 | status: LichterBOY 276 | temp: SHELLY_Temperatur_Zimmer_BOY_correct 277 | text_header: BOY 278 | windows: FensterBOY_Contact 279 | - component: oh-grid-col 280 | config: 281 | large: "25" 282 | medium: "33" 283 | small: "50" 284 | width: "100" 285 | xlarge: "25" 286 | slots: 287 | default: 288 | - component: widget:Card_room_12 289 | config: 290 | boiler_temp: Boiler_Temperatur 291 | door_lock: SmartLock_Action 292 | door_state: SmartLock_DoorSensorState 293 | iconimage: myfrontdoor 294 | page: page_c498bc9132 295 | status: LichterEingang 296 | text_header: Eingangsbereich 297 | - component: oh-grid-col 298 | config: 299 | large: "25" 300 | medium: "33" 301 | small: "50" 302 | width: "100" 303 | xlarge: "25" 304 | slots: 305 | default: 306 | - component: widget:Card_room_12 307 | config: 308 | humidity: ShellyHTSHHT1_Luftfeuchtigkeit 309 | iconimage: bathroom 310 | page: page_b986cb7442 311 | status: LichterBadWC 312 | temp: ShellyHTSHHT1_Temperatur 313 | text_header: Bad/WC 314 | - component: oh-grid-col 315 | config: 316 | large: "25" 317 | medium: "33" 318 | small: "50" 319 | width: "100" 320 | xlarge: "25" 321 | slots: 322 | default: 323 | - component: widget:Card_room_12 324 | config: 325 | heating: SHELLY_Heizung_Hobbyraum 326 | humidity: SHELLY_Humidity_Hobbyraum 327 | iconimage: myhobbyroom 328 | illuminance: LichtsensorUG_Beleuchtungsstarke 329 | page: ZimmerHobby 330 | settemp: SHELLY_Soll_Temperatur_Hobbyraum 331 | status: LichterHobbyraum 332 | temp: SHELLY_Temperatur_Hobbyraum_correct 333 | text_header: Hobbyraum / Keller 334 | - component: oh-grid-col 335 | config: 336 | large: "25" 337 | medium: "33" 338 | small: "50" 339 | width: "100" 340 | xlarge: "25" 341 | slots: 342 | default: 343 | - component: widget:Card_room_12 344 | config: 345 | humidity: SensorWaschkuche_Sensorrelativehumidity 346 | iconimage: mylaundry 347 | page: page_9a9ffe53b4 348 | temp: SensorWaschkuche_Sensortemperature 349 | text_header: Waschküche 350 | masonry: [] 351 | grid: null 352 | -------------------------------------------------------------------------------- /BasicPages/BasicPopupPage.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | label: Basic Popup Page 3 | sidebar: false 4 | blocks: 5 | - component: oh-block 6 | config: {} 7 | slots: 8 | default: 9 | - component: oh-grid-row 10 | config: {} 11 | slots: 12 | default: 13 | - component: oh-grid-col 14 | config: 15 | width: "50" 16 | slots: 17 | default: 18 | - component: widget:Cell_Light_Card_1 19 | config: 20 | header: Wohnen 21 | icon: lightbulb 22 | item_brightness: LichtWohnzimmer_Helligkeit 23 | item_schalter: LichtWohnzimmer_Schalter 24 | title: Licht 25 | - component: oh-grid-col 26 | config: 27 | width: "50" 28 | slots: 29 | default: 30 | - component: widget:Cell_Light_Card_1 31 | config: 32 | header: Essen 33 | icon: lightbulb 34 | item_brightness: LichtEssen_Helligkeit 35 | item_schalter: LichtEssen_Schalter 36 | title: Licht 37 | - component: oh-grid-col 38 | config: 39 | width: "50" 40 | slots: 41 | default: 42 | - component: widget:Cell_Light_Card_1 43 | config: 44 | header: Gang 45 | icon: lightbulb 46 | item_brightness: LichtWohnzimmerGang_Helligkeit 47 | item_schalter: LichtWohnzimmerGang_Schalter 48 | title: Licht 49 | - component: oh-grid-col 50 | config: 51 | width: "50" 52 | slots: 53 | default: 54 | - component: widget:Cell_Light_Card_1 55 | config: 56 | header: Küche 57 | icon: lightbulb 58 | item_brightness: LichtKuche_Helligkeit 59 | item_schalter: LichtKuche_Schalter 60 | title: Licht 61 | - component: oh-block 62 | config: {} 63 | slots: 64 | default: 65 | - component: oh-grid-row 66 | config: {} 67 | slots: 68 | default: 69 | - component: oh-grid-col 70 | config: 71 | large: "50" 72 | width: "100" 73 | xlarge: "50" 74 | slots: 75 | default: 76 | - component: widget:Cell_Temp_Card_1 77 | config: 78 | heating_item: SHELLY_Heizung_Wohnung 79 | humidity_item: SHELLY_Humidity_Wohnung 80 | icon: thermometer 81 | set_temp_item: SHELLY_Soll_Temperatur_Wohnung 82 | temp_item: SHELLY_Temperatur_Wohnung_correct 83 | title: Temperatur 84 | - component: oh-grid-col 85 | config: 86 | large: "50" 87 | medium: "100" 88 | small: "100" 89 | width: "100" 90 | xlarge: "50" 91 | xsmall: "100" 92 | slots: 93 | default: 94 | - component: widget:Cell_Speaker_Card_1 95 | config: 96 | header: Playbar 97 | icon: speaker_3 98 | item: SonosWohnzimmer_Fernbedienung 99 | item_cover: SonosWohnzimmer_Coverbild 100 | item_volume: SonosWohnzimmer_Lautstarke 101 | title: Sonos 102 | - component: oh-grid-col 103 | config: 104 | large: "33" 105 | width: "50" 106 | xlarge: "33" 107 | slots: 108 | default: 109 | - component: widget:Cell_Shutter_Card_1 110 | config: 111 | header: Essen 1 112 | icon: arrow_up_arrow_down 113 | item: StorenEssen1_Steuerung0offen100geschlossen 114 | title: Storen 115 | - component: oh-grid-col 116 | config: 117 | large: "33" 118 | width: "50" 119 | xlarge: "33" 120 | slots: 121 | default: 122 | - component: widget:Cell_Shutter_Card_1 123 | config: 124 | header: Essen 2 125 | icon: arrow_up_arrow_down 126 | item: StorenEssen2_Steuerung0offen100geschlossen 127 | title: Storen 128 | - component: oh-grid-col 129 | config: 130 | large: "33" 131 | width: "50" 132 | xlarge: "33" 133 | slots: 134 | default: 135 | - component: widget:Cell_Shutter_Card_1 136 | config: 137 | header: Wohnen 138 | icon: arrow_up_arrow_down 139 | item: StorenWohnen_Steuerung0offen100geschlossen 140 | title: Storen 141 | masonry: null 142 | grid: null 143 | -------------------------------------------------------------------------------- /MainPage.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | label: MainPage 3 | sidebar: true 4 | blocks: 5 | - component: oh-block 6 | config: {} 7 | slots: 8 | default: 9 | - component: oh-grid-row 10 | config: {} 11 | slots: 12 | default: 13 | - component: oh-grid-col 14 | config: 15 | large: "40" 16 | medium: "40" 17 | small: "100" 18 | width: "100" 19 | xlarge: "40" 20 | xsmall: "100" 21 | slots: 22 | default: 23 | - component: widget:Card_Weather_Small_1 24 | config: 25 | command: "5" 26 | dateFormat: true 27 | header: Alles aus 28 | icon: zzz 29 | item: Szene 30 | itemPrefix: OneCallAPIweatherandforecast_ 31 | locationTitle: Loiching 32 | sunIndicator: true 33 | title: Wetter 34 | - component: oh-grid-col 35 | config: 36 | large: "40" 37 | medium: "40" 38 | small: "100" 39 | width: "100" 40 | xlarge: "40" 41 | xsmall: "100" 42 | slots: 43 | default: 44 | - component: widget:front_cam_mobile 45 | config: 46 | cardheight: 200px 47 | urllivestream: http://192.168.2.193:8080/ipcamera/BulletCamera/ipcamera.mjpeg 48 | - component: oh-block 49 | config: {} 50 | slots: 51 | default: 52 | - component: oh-grid-row 53 | config: {} 54 | slots: 55 | default: 56 | - component: oh-grid-col 57 | config: 58 | large: "20" 59 | medium: "33" 60 | width: "50" 61 | xlarge: "20" 62 | slots: 63 | default: 64 | - component: widget:Cell_Card_1 65 | config: 66 | bgcolor: rgba(0, 143, 170, 0.5) 67 | command: TOGGLE 68 | header: TV Mode 69 | icon: tv 70 | item: TVModeLicht 71 | title: Aktiviere Szene 72 | - component: oh-grid-col 73 | config: 74 | large: "20" 75 | medium: "33" 76 | width: "50" 77 | xlarge: "20" 78 | slots: 79 | default: 80 | - component: widget:Cell_Card_1 81 | config: 82 | bgcolor: rgba(244, 162, 97, 0.5) 83 | command: TOGGLE 84 | header: Ambiente 85 | icon: lightbulb 86 | item: AmbientLight 87 | title: Aktiviere Szene 88 | - component: oh-grid-col 89 | config: 90 | large: "20" 91 | medium: "33" 92 | width: "50" 93 | xlarge: "20" 94 | slots: 95 | default: 96 | - component: widget:Cell_Card_1 97 | config: 98 | bgcolor: rgba(231, 111, 81, 0.5) 99 | command: TOGGLE 100 | header: Büro Studio 101 | icon: camera 102 | item: StudioAll 103 | title: Aktiviere Szene 104 | - component: oh-grid-col 105 | config: 106 | large: "20" 107 | medium: "33" 108 | width: "50" 109 | xlarge: "20" 110 | slots: 111 | default: 112 | - component: widget:Cell_Card_1 113 | config: 114 | bgcolor: rgba(38, 70, 83, 0.5) 115 | command: OFF 116 | header: Alle Lichter aus 117 | icon: moon_zzz 118 | item: AlleLichter1 119 | title: Aktiviere Szene 120 | - component: oh-grid-col 121 | config: 122 | large: "20" 123 | medium: "33" 124 | width: "50" 125 | xlarge: "20" 126 | slots: 127 | default: 128 | - component: widget:Cell_Card_1 129 | config: 130 | bgcolor: rgba(2, 48, 71, 0.8) 131 | command: OFF 132 | header: Alles aus 133 | icon: zzz 134 | item: HauptSchalter 135 | title: Hauptschalter 136 | - component: oh-block 137 | config: {} 138 | slots: 139 | default: 140 | - component: oh-grid-row 141 | config: {} 142 | slots: 143 | default: 144 | - component: oh-grid-col 145 | config: 146 | large: "25" 147 | medium: "33" 148 | small: "50" 149 | width: "100" 150 | xlarge: "25" 151 | slots: 152 | default: 153 | - component: widget:Card_Room_Popup+Motion 154 | config: 155 | iconimage: hallway 156 | illuminance: BewegungsmelderFlur_Illumination 157 | motion: BewegungsmelderFlur_Motion 158 | page: page_065ac3d806 159 | status: FlurLicht_4_STATE 160 | text_header: Flur 161 | - component: oh-grid-col 162 | config: 163 | large: "25" 164 | medium: "33" 165 | small: "50" 166 | width: "100" 167 | xlarge: "25" 168 | slots: 169 | default: 170 | - component: widget:Card_Room_Popup+Motion 171 | config: 172 | blinds_closed: RollladenKuche 173 | heating: HeizungKuche 174 | humidity: SwitchbotMeterTest_SwitchBotMeterTestHum 175 | iconimage: kitchen 176 | page: page_a72c41bde2 177 | settemp: HeizungKuche_SetPointTemperature 178 | status: KucheLicht_4_STATE 179 | temp: SwitchbotMeterTest_SwitchbotMeterTemp 180 | text_header: Küche 181 | - component: oh-grid-col 182 | config: 183 | large: "25" 184 | medium: "33" 185 | small: "50" 186 | width: "100" 187 | xlarge: "25" 188 | slots: 189 | default: 190 | - component: widget:Card_Room_Popup+Motion 191 | config: 192 | blinds_closed: RollladenEsszimmer_4_LEVEL 193 | humidity: SwitchbotMeterTest_SwitchBotMeterTestHum 194 | iconimage: dining-table 195 | page: page_5008381345 196 | status: EsszimmerLicht 197 | temp: BroadlinkRM2_Temperature 198 | text_header: Esszimmer 199 | windows: FensterGIRL1_Contact 200 | - component: oh-grid-col 201 | config: 202 | large: "25" 203 | medium: "33" 204 | small: "50" 205 | width: "100" 206 | xlarge: "25" 207 | slots: 208 | default: 209 | - component: widget:Card_Room_Popup+Motion 210 | config: 211 | blinds_closed: Rollos_Wohnzimmer_4_LEVEL 212 | heating: HeizungWohnzimmer_ActiveProfile 213 | iconimage: interior-design 214 | page: page_ac94a6c079 215 | settemp: HeizungWohnzimmer_SET_POINT_TEMPERATURE 216 | status: AlleLichterWohnzimmer 217 | temp: HeizungWohnzimmer_ACTUAL_TEMPERATURE 218 | text_header: Wohnzimmer 219 | - component: oh-grid-col 220 | config: 221 | large: "25" 222 | medium: "33" 223 | small: "50" 224 | width: "100" 225 | xlarge: "25" 226 | slots: 227 | default: 228 | - component: widget:Card_Room_Popup+Motion 229 | config: 230 | iconimage: stairs 231 | motion: Wemos4TreppeMotion_Wemos4TreppeMotion 232 | page: page_98db93cfca 233 | status: TreppeLicht 234 | text_header: Treppe 235 | - component: oh-grid-col 236 | config: 237 | large: "25" 238 | medium: "33" 239 | small: "50" 240 | width: "100" 241 | xlarge: "25" 242 | slots: 243 | default: 244 | - component: widget:Card_Room_Popup+Motion 245 | config: 246 | heating: SchlafzimmerHeizung_ActiveProfile 247 | iconimage: bedroom 248 | page: page_afef51c38a 249 | settemp: SchlafzimmerHeizung_SetPointTemperature 250 | speakers: Chromecast_Fernbedienung 251 | status: Schlafzimmer_BL 252 | temp: SchlafzimmerHeizung_ActualTemperature 253 | text_header: Obergeschoss 254 | - component: oh-grid-col 255 | config: 256 | large: "25" 257 | medium: "33" 258 | small: "50" 259 | width: "100" 260 | xlarge: "25" 261 | slots: 262 | default: 263 | - component: widget:Card_Room_Popup+Motion 264 | config: 265 | humidity: SwitchbotMeter_hum 266 | iconimage: workspace 267 | page: page_d602ae29f8 268 | status: BuroShelly1pm_Betrieb 269 | temp: GenericMQTTThing_Temp 270 | text_header: Büro 271 | - component: oh-grid-col 272 | config: 273 | large: "25" 274 | medium: "33" 275 | small: "50" 276 | width: "100" 277 | xlarge: "25" 278 | slots: 279 | default: 280 | - component: widget:Card_Room_Popup+Motion 281 | config: 282 | humidity: TuyaTempSensor_TuyaTempSensorLuftfeuchtigkeit 283 | iconimage: clamp 284 | page: page_da9e656284 285 | status: WerkstattLicht 286 | temp: TuyaTempSensor_TuyaTempSensorTemperatur 287 | text_header: Werkstatt 288 | windows: TuyaContact_TuyaContactSwitch 289 | - component: oh-grid-col 290 | config: 291 | large: "25" 292 | medium: "33" 293 | small: "50" 294 | width: "100" 295 | xlarge: "25" 296 | slots: 297 | default: 298 | - component: widget:Connection_Card_2 299 | config: 300 | download: SpeedtestBinding_DownloadBandwidth 301 | iconimage: neural 302 | latency: SpeedtestBinding_Latency 303 | page: page_019befbdfd 304 | text_header: Connection 305 | upload: SpeedtestBinding_UploadBandwidth 306 | - component: oh-block 307 | config: {} 308 | slots: 309 | default: 310 | - component: oh-grid-row 311 | config: {} 312 | slots: 313 | default: 314 | - component: oh-grid-col 315 | config: 316 | large: "10" 317 | medium: "10" 318 | small: "50" 319 | width: "50" 320 | xlarge: "10" 321 | xsmall: "50" 322 | slots: 323 | default: 324 | - component: widget:Cell_Settings_1 325 | config: 326 | item_battery: AlleBatterien 327 | page: page_dbf9a7900f 328 | masonry: [] 329 | grid: null 330 | -------------------------------------------------------------------------------- /OneClickInstall/README.md: -------------------------------------------------------------------------------- 1 | One Click Installation of my Pages and Widgets 2 | 3 | Be !!!careful!!! if you already got some Pages/Widgets setup. This will overwrite your Configuration. 4 | 5 | Copy these two Files to /var/lib/openhab/jsondb/ 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # openHAB3WebUI 2 | 3 | One of my favorite WebUI Page for openHAB3. It was initially created by Mike P and customized by Me. 4 | 5 | Buy Me A Coffee 6 | Buy Me A Coffee 7 | 8 | 9 | -Desktop- 10 | 11 | Screenshot 2021-12-07 123630 12 | Screenshot 2021-12-07 142146 13 | Screenshot 2021-12-07 142222 14 | 15 | -Smarphone- 16 | 17 | Screenshot 2021-12-07 144001 18 | Screenshot 2021-12-07 144021 19 | Screenshot 2021-12-07 144041 20 | 21 | 22 | Verknüpfungen: 23 | 24 | MainPage: 25 | - Widgets: 26 | - weatherCard 27 | - front_cam_mobile 28 | - Cell_Card_1 29 | - Card_room_12_motion 30 | - Card_dsl 31 | - Cell_Settings_1 32 | - Pages: 33 | - Flur 34 | - Küche 35 | - Esszimmer 36 | - Wohnzimmer 37 | - Treppe 38 | - Obergeschoss 39 | - Büro 40 | - Werkstatt 41 | - Netzwerk Popup 42 | - Alle Batterien 43 | - icons: 44 | - alle Icons in /etc/openhab/html/icons/ legen 45 | 46 | Flur: 47 | - Widgets: 48 | - command-button-heater 49 | 50 | Küche: 51 | - Widgets: 52 | - command-button-heater 53 | - Cell_Temp_Card_1 54 | - Cell_Shutter_Card_1 55 | 56 | Esszimmer: 57 | - Widgets: 58 | - command-button-heater 59 | - Cell_Shutter_Card_1 60 | 61 | Wohnzimmer: 62 | - Widgest: 63 | - Cell_Temp_Card_1 64 | - Cell_Speaker_Card_1 65 | - Cell_Shutter_Card_1 66 | - Cell_Light_Card_1 67 | 68 | Treppe: 69 | - Widgets: 70 | - command-button-heater 71 | 72 | Obergeschoss: 73 | - Widgets: 74 | - command-button-heater 75 | - Cell_Temp_Card_1 76 | - Cell_Shutter_Card_1 77 | 78 | Büro: 79 | - Wigets: 80 | - Cell_Temp_Card_1 81 | - command-button-heater 82 | - command-button-heater_popup_1 83 | - 3d-druck-mobile_1 84 | 85 | Werkstatt: 86 | - Widgets: 87 | - Cell_Temp_Card_1 88 | - command-button-heater 89 | 90 | 91 | Netzwerk Popup: 92 | - Widgets: 93 | - dsl_popup 94 | 95 | Alle Batterien: 96 | - Widgets: 97 | - oh-gauge-card 98 | 99 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /Widgets/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 | align-self: center 149 | place-self: end 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 | align-self: center 173 | place-self: end 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 | align-self: center 197 | place-self: end 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 | -------------------------------------------------------------------------------- /Widgets/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 | align-self: center 145 | place-self: end 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 | align-self: center 169 | place-self: end 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 | align-self: center 193 | place-self: end 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 | -------------------------------------------------------------------------------- /Widgets/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 | -------------------------------------------------------------------------------- /Widgets/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 | -------------------------------------------------------------------------------- /Widgets/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 | -------------------------------------------------------------------------------- /Widgets/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 | -------------------------------------------------------------------------------- /Widgets/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 | -------------------------------------------------------------------------------- /Widgets/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 | -------------------------------------------------------------------------------- /Widgets/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 | -------------------------------------------------------------------------------- /Widgets/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 | -------------------------------------------------------------------------------- /Widgets/Cell_Temp_Card_2.yaml: -------------------------------------------------------------------------------- 1 | uid: Cell_Temp_Card_2 2 | tags: 3 | - co 4 | - humidity 5 | - motion 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: Background image name 20 | label: Background image 21 | name: bg_image_url 22 | required: false 23 | type: TEXT 24 | - description: in rgba() or HEX or empty 25 | label: Background Color 26 | name: bgcolor 27 | required: false 28 | type: TEXT 29 | - context: item 30 | label: Temperature 31 | name: temp_item 32 | required: false 33 | type: TEXT 34 | - context: item 35 | label: Lightlevel 36 | name: lightlevel_item 37 | required: false 38 | type: TEXT 39 | - context: item 40 | label: Humidity 41 | name: humidity_item 42 | required: false 43 | type: TEXT 44 | - context: item 45 | label: CO 46 | name: CO_item 47 | required: false 48 | type: TEXT 49 | - context: item 50 | label: Motion item 51 | name: motion_item 52 | required: false 53 | type: TEXT 54 | parameterGroups: [] 55 | timestamp: Nov 24, 2021, 11:09:45 PM 56 | component: f7-card 57 | config: 58 | style: 59 | background-brightness: 60% 60 | background-color: "=props.bgcolor ? props.bgcolor : ''" 61 | background-image: "=props.bg_image_url ? 'url(/static/' + (props.bg_image_url) + ')' : ''" 62 | background-position: down; 63 | background-repeat: no-repeat; 64 | background-size: cover 65 | border-radius: var(--f7-card-expandable-border-radius) 66 | box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1) 67 | font-size: medium 68 | height: 150px 69 | margin: 5 70 | noShadow: false 71 | padding: 0 72 | text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black 73 | slots: 74 | content: 75 | - component: f7-card-header 76 | config: 77 | style: 78 | justify-content: flex-start 79 | margin-top: -15px 80 | min-height: 30px 81 | padding: 0 82 | slots: 83 | default: 84 | - component: f7-icon 85 | config: 86 | f7: =props.icon 87 | size: 20 88 | visible: "=props.icon ? true : false" 89 | - component: Label 90 | config: 91 | style: 92 | font-size: 18px 93 | margin-left: 5px 94 | text: "=props.title ? props.title : ''" 95 | - component: f7-card-content 96 | config: 97 | style: 98 | justify-content: flex-start 99 | margin-top: 5px 100 | padding: 0 101 | width: 100% 102 | slots: 103 | default: 104 | - component: f7-row 105 | config: 106 | style: 107 | justify-content: flex-start 108 | visible: "=props.temp_item ? true : false" 109 | slots: 110 | default: 111 | - component: oh-icon 112 | config: 113 | icon: temperature 114 | item: =props.temp_item 115 | width: 23 116 | - component: Label 117 | config: 118 | style: 119 | color: '=(Number.parseFloat(items[props.temp_item].state.split(" ")[0]) > 30) ? "red" : (Number.parseFloat(items[props.temp_item].state.split(" ")[0]) < 10) ? "blue" : "white"' 120 | margin-left: 5px 121 | text: =items[props.temp_item].state 122 | - component: f7-row 123 | config: 124 | style: 125 | justify-content: flex-start 126 | z-index: 2 127 | visible: "=props.humidity_item ? true : false" 128 | slots: 129 | default: 130 | - component: oh-icon 131 | config: 132 | action: analyser 133 | actionAnalyzerItems: =props.humidity_item 134 | icon: humidity 135 | item: =props.humidity_item 136 | width: 23 137 | - component: Label 138 | config: 139 | style: 140 | color: '=(Number.parseFloat(items[props.humidity_item].state.split(" ")[0]) < 35) ? "red" : (Number.parseFloat(items[props.humidity_item].state.split(" ")[0]) > 75) ? "green" : "white"' 141 | margin-left: 5px 142 | text: =items[props.humidity_item].state 143 | - component: f7-row 144 | config: 145 | style: 146 | justify-content: flex-start 147 | z-index: 2 148 | visible: "=props.lightlevel_item ? true : false" 149 | slots: 150 | default: 151 | - component: oh-icon 152 | config: 153 | icon: sun 154 | width: 23 155 | - component: Label 156 | config: 157 | style: 158 | color: "=(items[props.lightlevel_item].state < 5) ? 'gray' : 'white'" 159 | margin-left: 5px 160 | text: =items[props.lightlevel_item].state 161 | - component: f7-row 162 | config: 163 | style: 164 | justify-content: flex-start 165 | z-index: 2 166 | visible: "=props.CO_item ? true : false" 167 | slots: 168 | default: 169 | - component: oh-icon 170 | config: 171 | icon: carbondioxide 172 | width: 23 173 | - component: Label 174 | config: 175 | style: 176 | color: '=(Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1500) ? "red" : (Number.parseFloat(items[props.CO_item].state.split(" ")[0]) > 1000) ? "yellow"' 177 | margin-left: 5px 178 | text: =items[props.CO_item].state 179 | - component: f7-col 180 | config: 181 | style: 182 | position: absolute 183 | right: 0px 184 | top: 0px 185 | z-index: 2 186 | visible: "=props.motion_item ? true : false" 187 | slots: 188 | default: 189 | - component: oh-icon 190 | config: 191 | icon: "=(items[props.motion_item].state === 'ON') ? 'mymotion-on' : 'mymotion-off'" 192 | width: 30 193 | - component: Label 194 | config: 195 | text: =items[props.motion_item].state 196 | - component: f7-block 197 | config: 198 | style: 199 | height: 300px 200 | left: 10px 201 | position: absolute 202 | top: 10px 203 | visible: "=props.temp_item ? true : false" 204 | width: 100% 205 | z-index: 1 206 | slots: 207 | default: 208 | - component: oh-trend 209 | config: 210 | style: 211 | --f7-theme-color-bg-color: transparent 212 | background: var(--f7-theme-color-bg-color) 213 | filter: opacity(60%) 214 | trendGradient: 215 | - "#d4220f" 216 | - "#cc561e" 217 | - "#ef8d32" 218 | - "#beca5c" 219 | trendItem: =props.temp_item 220 | - component: oh-link 221 | config: 222 | action: analyzer 223 | actionAnalyzerChartType: day 224 | actionAnalyzerCoordSystem: time 225 | actionAnalyzerItems: "=props.CO_item ? [props.temp_item, props.humidity_item, props.lightlevel_item, props.CO_item] : (props.lightlevel_item ? [props.temp_item, props.humidity_item, props.lightlevel_item] : (props.humidity_item ? [props.temp_item, props.humidity_item] : [props.temp_item]))" 226 | style: 227 | height: 100% 228 | left: 0px 229 | padding: 0 230 | position: absolute 231 | top: 0px 232 | width: 100% 233 | z-index: 3 234 | -------------------------------------------------------------------------------- /Widgets/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 | -------------------------------------------------------------------------------- /Widgets/Command_Button_Popup.yaml: -------------------------------------------------------------------------------- 1 | uid: Command_Button_Popup 2 | tags: 3 | - 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 | -------------------------------------------------------------------------------- /Widgets/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 | -------------------------------------------------------------------------------- /Widgets/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 | -------------------------------------------------------------------------------- /Widgets/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 | -------------------------------------------------------------------------------- /icons/README.md: -------------------------------------------------------------------------------- 1 | Little Icon Set 2 | 3 | copy these Files to /etc/openhab/html/icons/ 4 | -------------------------------------------------------------------------------- /icons/bedroom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/bedroom.png -------------------------------------------------------------------------------- /icons/bedtemp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/bedtemp.png -------------------------------------------------------------------------------- /icons/clamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/clamp.png -------------------------------------------------------------------------------- /icons/desk-lamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/desk-lamp.png -------------------------------------------------------------------------------- /icons/dining-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/dining-table.png -------------------------------------------------------------------------------- /icons/hallway.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/hallway.png -------------------------------------------------------------------------------- /icons/interior-design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/interior-design.png -------------------------------------------------------------------------------- /icons/kitchen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/kitchen.png -------------------------------------------------------------------------------- /icons/led-strip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/led-strip.png -------------------------------------------------------------------------------- /icons/monitor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/monitor.png -------------------------------------------------------------------------------- /icons/moss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/moss.png -------------------------------------------------------------------------------- /icons/neural.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/neural.png -------------------------------------------------------------------------------- /icons/rgb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/rgb.png -------------------------------------------------------------------------------- /icons/stairs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/stairs.png -------------------------------------------------------------------------------- /icons/tooltemp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/tooltemp.png -------------------------------------------------------------------------------- /icons/workspace.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BangerTech/openHAB3WebUI/abd60d41b982920576b8b16a959a6842dc1f9a3c/icons/workspace.png -------------------------------------------------------------------------------- /items/README.md: -------------------------------------------------------------------------------- 1 | 1. Create the bridge and a local weather thing manually as shown in the video. 2 | 2. Copy the .item file into /etc/openhab/items -------------------------------------------------------------------------------- /popupPages/3D Drucker Popup.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | label: 3D Drucker Popup 3 | sidebar: false 4 | blocks: 5 | - component: oh-block 6 | config: {} 7 | slots: 8 | default: 9 | - component: oh-grid-row 10 | config: {} 11 | slots: 12 | default: 13 | - component: oh-grid-col 14 | config: 15 | width: "100" 16 | slots: 17 | default: 18 | - component: widget:3D-Print-Mobile 19 | config: 20 | bedtempitem: OctoprintB1_B1BedTemp 21 | hotendtempitem: OctoprintB1_B1HotendTemp 22 | iconimage1: tooltemp 23 | iconimage2: bedtemp 24 | lightitem: BiquB1LED_Eingeschaltet 25 | poweritem: SonoffBiquB1_SonoffB1 26 | printername: Biqu B1 27 | progressitem: OctoprintB1_B1Progress 28 | timeleftitem: OctoprintB1_B1PrintTimeLeft 29 | urllivestream: http://192.168.2.124/webcam/?action=stream 30 | - component: oh-grid-row 31 | config: {} 32 | slots: 33 | default: 34 | - component: oh-grid-col 35 | config: 36 | width: "100" 37 | slots: 38 | default: 39 | - component: widget:3D-Print-Mobile 40 | config: 41 | bedtempitem: OctoprintChiron_ChironBedTemp 42 | hotendtempitem: OctoprintChiron_ChironHotendTemp 43 | iconimage1: tooltemp 44 | iconimage2: bedtemp 45 | poweritem: SonoffChiron_SonoffChiron 46 | printername: Chiron 47 | progressitem: OctoprintChiron_ChironProgress 48 | timeleftitem: OctoprintChiron_ChironPrinttimeleft 49 | masonry: null 50 | grid: null 51 | canvas: null 52 | -------------------------------------------------------------------------------- /popupPages/Alle Batterien.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | label: Alle Batterien 3 | sidebar: false 4 | blocks: 5 | - component: oh-block 6 | config: 7 | title: Home 8 | slots: 9 | default: 10 | - component: oh-grid-row 11 | config: {} 12 | slots: 13 | default: 14 | - component: oh-grid-col 15 | config: 16 | width: "50" 17 | slots: 18 | default: 19 | - component: oh-gauge-card 20 | config: 21 | borderBgColor: red 22 | borderColor: green 23 | item: SwitchbotMotionHomeAss_motiononeBattery 24 | labelText: Motion Speise 25 | max: 100 26 | min: 0 27 | type: semicircle 28 | valueTextColor: green 29 | - component: oh-grid-col 30 | config: 31 | width: "50" 32 | slots: 33 | default: 34 | - component: oh-gauge-card 35 | config: 36 | borderBgColor: red 37 | borderColor: green 38 | item: SwitchbotMeterKuche_SwitchbotBattery 39 | labelText: Meter Küche 40 | max: 100 41 | min: 0 42 | type: semicircle 43 | valueTextColor: green 44 | - component: oh-grid-col 45 | config: 46 | width: "50" 47 | slots: 48 | default: 49 | - component: oh-gauge-card 50 | config: 51 | borderBgColor: red 52 | borderColor: green 53 | item: ShellyMotion_Batterieladung 54 | labelText: Motion Bad OG 55 | max: 100 56 | min: 0 57 | type: semicircle 58 | valueTextColor: green 59 | - component: oh-grid-col 60 | config: 61 | width: "50" 62 | slots: 63 | default: 64 | - component: oh-gauge-card 65 | config: 66 | borderBgColor: red 67 | borderColor: green 68 | item: XiaomiButton1_XiaomiBattery 69 | labelText: Button Bad OG 70 | max: 100 71 | min: 0 72 | type: semicircle 73 | valueTextColor: green 74 | - component: oh-grid-col 75 | config: 76 | width: "50" 77 | slots: 78 | default: 79 | - component: oh-gauge-card 80 | config: 81 | borderBgColor: red 82 | borderColor: green 83 | item: BewegungsmelderFlur_NiedrigerBatteriestatus 84 | labelText: Motion Flur 85 | max: 100 86 | min: 0 87 | type: semicircle 88 | valueTextColor: green 89 | - component: oh-grid-col 90 | config: 91 | width: "50" 92 | slots: 93 | default: 94 | - component: oh-gauge-card 95 | config: 96 | borderBgColor: red 97 | borderColor: green 98 | item: HeizungKuche_NiedrigerBatteriestatus 99 | labelText: Heizung Küche 100 | max: 100 101 | min: 0 102 | type: semicircle 103 | valueTextColor: green 104 | - component: oh-grid-col 105 | config: 106 | width: "50" 107 | slots: 108 | default: 109 | - component: oh-gauge-card 110 | config: 111 | borderBgColor: red 112 | borderColor: green 113 | item: HeizungWohnzimmer_NiedrigerBatteriestatus 114 | labelText: Heizung Wohnzimmer 115 | max: 100 116 | min: 0 117 | type: semicircle 118 | valueTextColor: green 119 | - component: oh-grid-col 120 | config: 121 | width: "50" 122 | slots: 123 | default: 124 | - component: oh-gauge-card 125 | config: 126 | borderBgColor: red 127 | borderColor: green 128 | item: SchlafzimmerHeizung_NiedrigerBatteriestatus 129 | labelText: Heizung Schlafzimmer 130 | max: 100 131 | min: 0 132 | type: semicircle 133 | valueTextColor: green 134 | - component: oh-grid-col 135 | config: 136 | width: "50" 137 | slots: 138 | default: 139 | - component: oh-gauge-card 140 | config: 141 | borderBgColor: red 142 | borderColor: green 143 | item: HeizungBadOG_NiedrigerBatteriestatus 144 | labelText: Heizung BadOG 145 | max: 100 146 | min: 0 147 | type: semicircle 148 | valueTextColor: green 149 | - component: oh-block 150 | config: 151 | title: Office 152 | slots: 153 | default: 154 | - component: oh-grid-row 155 | config: {} 156 | slots: 157 | default: 158 | - component: oh-grid-col 159 | config: 160 | width: "50" 161 | slots: 162 | default: 163 | - component: oh-gauge-card 164 | config: 165 | borderBgColor: red 166 | borderColor: green 167 | item: AqaraButton_AqaraButtonBattery 168 | labelText: Button Büro 169 | max: 100 170 | min: 0 171 | type: semicircle 172 | valueTextColor: green 173 | - component: oh-grid-col 174 | config: 175 | width: "50" 176 | slots: 177 | default: 178 | - component: oh-gauge-card 179 | config: 180 | borderBgColor: red 181 | borderColor: green 182 | item: AqaraTempSensor_AqaraTempSensorBattery 183 | labelText: Aqara Temp Büro 184 | max: 100 185 | min: 0 186 | type: semicircle 187 | valueTextColor: green 188 | - component: oh-grid-col 189 | config: {} 190 | slots: 191 | default: 192 | - component: oh-gauge-card 193 | config: 194 | borderBgColor: red 195 | borderColor: green 196 | item: SwitchbotMeter_battery 197 | labelText: Switchbot Meter Büro 198 | max: 100 199 | min: 0 200 | type: semicircle 201 | valueTextColor: green 202 | - component: oh-grid-col 203 | config: {} 204 | slots: 205 | default: 206 | - component: oh-gauge-card 207 | config: 208 | borderBgColor: red 209 | borderColor: green 210 | item: Switchbot_switchbotoneBattery 211 | labelText: Switchbot Drucker 212 | max: 100 213 | min: 0 214 | type: semicircle 215 | valueTextColor: green 216 | - component: oh-block 217 | config: 218 | title: Werkstatt 219 | slots: 220 | default: 221 | - component: oh-grid-row 222 | config: {} 223 | slots: 224 | default: 225 | - component: oh-grid-col 226 | config: 227 | width: "50" 228 | slots: 229 | default: 230 | - component: oh-gauge-card 231 | config: 232 | borderBgColor: red 233 | borderColor: green 234 | item: TuyaContact_TuyaContactBattery 235 | labelText: Türe Werkstatt 236 | max: 100 237 | min: 0 238 | type: semicircle 239 | valueTextColor: green 240 | - component: oh-grid-col 241 | config: 242 | width: "50" 243 | slots: 244 | default: 245 | - component: oh-gauge-card 246 | config: 247 | borderBgColor: red 248 | borderColor: green 249 | item: TuyaTempSensor_TuyaTempSensorBatterie 250 | labelText: Temp Werkstatt 251 | max: 100 252 | min: 0 253 | type: semicircle 254 | valueTextColor: green 255 | - component: oh-grid-col 256 | config: {} 257 | slots: 258 | default: 259 | - component: oh-gauge-card 260 | config: 261 | borderBgColor: red 262 | borderColor: green 263 | item: SwitchbotBotTest_switchbottwoBattery 264 | labelText: Switchbot Bot 2 265 | max: 100 266 | min: 0 267 | type: semicircle 268 | valueTextColor: green 269 | - component: oh-grid-col 270 | config: {} 271 | slots: 272 | default: 273 | - component: oh-gauge-card 274 | config: 275 | borderBgColor: red 276 | borderColor: green 277 | item: TuyaPirSensor_TuyaPirSensorBattery 278 | labelText: Tuya Pir 279 | max: 100 280 | min: 0 281 | type: semicircle 282 | valueTextColor: green 283 | masonry: null 284 | grid: null 285 | -------------------------------------------------------------------------------- /popupPages/Büro Licht Popup.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | label: Büro Licht Popup 3 | sidebar: false 4 | blocks: 5 | - component: oh-block 6 | config: {} 7 | slots: 8 | default: 9 | - component: oh-grid-row 10 | config: {} 11 | slots: 12 | default: 13 | - component: oh-grid-col 14 | config: {} 15 | slots: 16 | default: 17 | - component: widget:Command-Button 18 | config: 19 | background: "#1c1c1d" 20 | cardwidth: "100" 21 | command1: OFF 22 | command2: ON 23 | headline1: Studio Aus 24 | headline2: Studio An 25 | headlinesize: 20px 26 | item: StudioAll 27 | - component: oh-grid-row 28 | config: {} 29 | slots: 30 | default: 31 | - component: oh-grid-col 32 | config: {} 33 | slots: 34 | default: 35 | - component: widget:Command-Button 36 | config: 37 | background: "#1c1c1d" 38 | cardwidth: "100" 39 | command1: OFF 40 | command2: ON 41 | headline1: Spot L Aus 42 | headline2: Spot L An 43 | headlinesize: 20px 44 | item: SonoffBuroLinks_SonoffBuroLinksPower 45 | - component: oh-grid-col 46 | config: {} 47 | slots: 48 | default: 49 | - component: widget:Command-Button 50 | config: 51 | background: "#1c1c1d" 52 | cardwidth: "100" 53 | command1: OFF 54 | command2: ON 55 | headline1: Spot R Aus 56 | headline2: Spot R An 57 | headlinesize: 20px 58 | item: SonoffBuroRechts_SonoffBueroRechtsPower 59 | - component: oh-grid-row 60 | config: {} 61 | slots: 62 | default: 63 | - component: oh-grid-col 64 | config: {} 65 | slots: 66 | default: 67 | - component: widget:Cell_Light_Color_Card_2 68 | config: 69 | header: " " 70 | iconimage: monitor 71 | item_color: NightKingMonitorLED_Color 72 | item_schalter: NightKingMonitorLED_Eingeschaltet 73 | title: Monitor 74 | - component: oh-grid-row 75 | config: {} 76 | slots: 77 | default: 78 | - component: oh-grid-col 79 | config: {} 80 | slots: 81 | default: 82 | - component: widget:Cell_Light_Color_Card_2 83 | config: 84 | header: " " 85 | iconimage: desk-lamp 86 | item_color: BuroSchreibtischLampe_RGBColor 87 | item_schalter: BuroSchreibtischLampe_Power 88 | title: Desk Lamp 89 | - component: oh-grid-row 90 | config: {} 91 | slots: 92 | default: 93 | - component: oh-grid-col 94 | config: {} 95 | slots: 96 | default: 97 | - component: widget:Cell_Light_Color_Card_2 98 | config: 99 | header: " " 100 | iconimage: led-strip 101 | item_color: LEDStabI_Color 102 | item_schalter: LEDStabI_Eingeschaltet 103 | title: BangerTECH 104 | - component: oh-grid-row 105 | config: {} 106 | slots: 107 | default: 108 | - component: oh-grid-col 109 | config: {} 110 | slots: 111 | default: 112 | - component: widget:Cell_Light_Color_Card_2 113 | config: 114 | header: " " 115 | iconimage: rgb 116 | item_color: WLEDLinks_MasterControls 117 | item_schalter: WLEDLinks_WLEDLinksPower 118 | title: Schreibtisch L 119 | - component: oh-grid-row 120 | config: {} 121 | slots: 122 | default: 123 | - component: oh-grid-col 124 | config: {} 125 | slots: 126 | default: 127 | - component: widget:Cell_Light_Color_Card_2 128 | config: 129 | header: " " 130 | iconimage: rgb 131 | item_color: WLEDRechts_MasterControls 132 | item_schalter: WLEDRechts_WLEDRechtsPower 133 | title: Schreibtisch R 134 | - component: oh-grid-row 135 | config: {} 136 | slots: 137 | default: 138 | - component: oh-grid-col 139 | config: {} 140 | slots: 141 | default: 142 | - component: widget:Cell_Light_Color_Card_2 143 | config: 144 | header: " " 145 | iconimage: moss 146 | item_color: Moosbild_Color 147 | item_schalter: Moosbild_Eingeschaltet 148 | title: Moosbild 149 | masonry: null 150 | grid: null 151 | -------------------------------------------------------------------------------- /popupPages/Büro.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | label: Büro 3 | sidebar: false 4 | blocks: 5 | - component: oh-block 6 | config: {} 7 | slots: 8 | default: 9 | - component: oh-grid-row 10 | config: {} 11 | slots: 12 | default: 13 | - component: oh-grid-col 14 | config: 15 | width: "100" 16 | slots: 17 | default: 18 | - component: widget:Cell_Temp_Card_1 19 | config: 20 | heating_item: SwitchbotMeter_battery 21 | humidity_item: SwitchbotMeter_hum 22 | icon: thermometer 23 | temp_item: GenericMQTTThing_Temp 24 | title: Temperatur 25 | - component: oh-grid-row 26 | config: {} 27 | slots: 28 | default: 29 | - component: oh-grid-col 30 | config: 31 | width: "50" 32 | slots: 33 | default: 34 | - component: widget:Command_Button 35 | config: 36 | background: "#1c1c1d" 37 | cardwidth: "100" 38 | command1: OFF 39 | command2: ON 40 | headline1: Licht Aus 41 | headline2: Licht An 42 | headlinesize: 20px 43 | item: BuroShelly1pm_Betrieb 44 | - component: oh-grid-col 45 | config: 46 | width: "50" 47 | slots: 48 | default: 49 | - component: widget:Command_Button_Popup 50 | config: 51 | background: "#1c1c1d" 52 | cardwidth: "100" 53 | command1: OFF 54 | command2: ON 55 | headline1: Studio Aus 56 | headline2: Studio An 57 | headlinesize: 20px 58 | item: StudioAll 59 | page: page_4e2bf5b1c4 60 | - component: oh-grid-row 61 | config: {} 62 | slots: 63 | default: 64 | - component: oh-grid-col 65 | config: 66 | width: "50" 67 | slots: 68 | default: 69 | - component: widget:Command_Button 70 | config: 71 | background: "#1c1c1d" 72 | cardwidth: "100" 73 | command1: OFF 74 | command2: ON 75 | headline1: Drucker Aus 76 | headline2: Drucker An 77 | headlinesize: 20px 78 | icon1: power 79 | icon2: power 80 | item: Switchbot_state 81 | - component: oh-grid-col 82 | config: 83 | width: "50" 84 | slots: 85 | default: 86 | - component: widget:Command_Button_Popup 87 | config: 88 | background: "#1c1c1d" 89 | cardwidth: "100" 90 | command1: OFF 91 | command2: ON 92 | headline1: Studio Aus 93 | headline2: Studio An 94 | headlinesize: 20px 95 | item: StudioAll 96 | page: page_58c79216a5 97 | - component: oh-grid-row 98 | config: {} 99 | slots: 100 | default: 101 | - component: oh-grid-col 102 | config: 103 | width: "50" 104 | slots: 105 | default: 106 | - component: widget:3D-Print-Mobile_1 107 | config: 108 | bedtempitem: OctoprintB1_B1BedTemp 109 | cardheight: 160px 110 | hotendtempitem: OctoprintB1_B1HotendTemp 111 | iconimage1: tooltemp 112 | iconimage2: bedtemp 113 | lightitem: BiquB1LED_Eingeschaltet 114 | page: page_6102089844 115 | poweritem: SonoffBiquB1_SonoffB1 116 | printername: Biqu B1 117 | progressitem: OctoprintB1_B1Progress 118 | timeleftitem: OctoprintB1_B1PrintTimeLeft 119 | - component: oh-grid-col 120 | config: 121 | width: "50" 122 | slots: 123 | default: 124 | - component: widget:3D-Print-Mobile_1 125 | config: 126 | bedtempitem: OctoprintChiron_ChironBedTemp 127 | cardheight: 160px 128 | hotendtempitem: OctoprintChiron_ChironHotendTemp 129 | iconimage1: tooltemp 130 | iconimage2: bedtemp 131 | page: page_6102089844 132 | poweritem: SonoffChiron_SonoffChiron 133 | printername: Chiron 134 | progressitem: OctoprintChiron_ChironProgress 135 | timeleftitem: OctoprintChiron_ChironPrinttimeleft 136 | masonry: null 137 | grid: null 138 | -------------------------------------------------------------------------------- /popupPages/Esszimmer.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | label: Esszimmer 3 | sidebar: false 4 | blocks: 5 | - component: oh-block 6 | config: {} 7 | slots: 8 | default: 9 | - component: oh-grid-row 10 | config: {} 11 | slots: 12 | default: 13 | - component: oh-grid-col 14 | config: 15 | width: "50" 16 | slots: 17 | default: 18 | - component: widget:Command_Button 19 | config: 20 | background: "#1c1c1d" 21 | cardwidth: "100" 22 | command1: OFF 23 | command2: ON 24 | headline1: Licht Aus 25 | headline2: Licht An 26 | item: EsszimmerLicht_4_STATE 27 | - component: oh-grid-col 28 | config: 29 | width: "50" 30 | slots: 31 | default: 32 | - component: widget:Command_Button 33 | config: 34 | background: "#1c1c1d" 35 | cardwidth: "100" 36 | command1: Off 37 | command2: ON 38 | headline1: Laterne Aus 39 | headline2: Laterne An 40 | item: IkeaSteckdose_IkeaSteckdose 41 | - component: oh-block 42 | config: {} 43 | slots: 44 | default: 45 | - component: oh-grid-row 46 | config: {} 47 | slots: 48 | default: 49 | - component: oh-grid-col 50 | config: 51 | large: "50" 52 | width: "100" 53 | xlarge: "50" 54 | slots: 55 | default: 56 | - component: widget:Cell_Shutter_Card_1 57 | config: 58 | item: RollladenEsszimmer_4_LEVEL 59 | title: Rollo 60 | masonry: null 61 | grid: null 62 | canvas: null 63 | -------------------------------------------------------------------------------- /popupPages/Flur.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | label: Flur 3 | sidebar: false 4 | blocks: 5 | - component: oh-block 6 | config: {} 7 | slots: 8 | default: 9 | - component: oh-grid-row 10 | config: {} 11 | slots: 12 | default: 13 | - component: oh-grid-col 14 | config: 15 | width: "50" 16 | slots: 17 | default: 18 | - component: widget:Command_Button 19 | config: 20 | background: "#1c1c1d" 21 | cardwidth: "100" 22 | command1: OFF 23 | command2: ON 24 | header: Gang 25 | headline1: Flur Licht Aus 26 | headline2: Flur Licht An 27 | icon: lightbulb 28 | item: FlurLicht_4_STATE 29 | item_brightness: LichtWohnzimmerGang_Helligkeit 30 | item_schalter: FlurLicht_4_STATE 31 | title: Licht 32 | - component: oh-grid-col 33 | config: 34 | width: "50" 35 | slots: 36 | default: 37 | - component: widget:Command_Button 38 | config: 39 | background: "#1c1c1d" 40 | cardwidth: "100" 41 | command1: OFF 42 | command2: ON 43 | header: Speise 44 | headline1: Speise Aus 45 | headline2: Speise An 46 | icon: lightbulb 47 | item: SonoffSpeise_SonoffSpeise 48 | item_brightness: LichtKuche_Helligkeit 49 | item_schalter: SonoffSpeise_SonoffSpeise 50 | title: Licht 51 | - component: oh-block 52 | config: {} 53 | slots: 54 | default: 55 | - component: oh-grid-row 56 | config: {} 57 | slots: 58 | default: 59 | - component: oh-grid-col 60 | config: 61 | large: "50" 62 | width: "100" 63 | xlarge: "50" 64 | slots: 65 | default: 66 | - component: widget:Cell_Temp_Card_1 67 | config: 68 | heating_item: SonoffP3Kuhlschrank_SonoffP3Tagesverbr 69 | humidity_item: SonoffP3Kuhlschrank_SonoffP3Aktuell 70 | icon: power 71 | temp_item: KuehlschrankKostenGesamt 72 | title: Kühlschrank 73 | masonry: null 74 | grid: null 75 | -------------------------------------------------------------------------------- /popupPages/Küche.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | label: Küche 3 | sidebar: false 4 | blocks: 5 | - component: oh-block 6 | config: {} 7 | slots: 8 | default: 9 | - component: oh-grid-row 10 | config: {} 11 | slots: 12 | default: 13 | - component: oh-grid-col 14 | config: {} 15 | slots: 16 | default: 17 | - component: widget:Command_Button 18 | config: 19 | background: "#1c1c1d" 20 | cardwidth: "100" 21 | command1: OFF 22 | command2: ON 23 | headline1: Licht Aus 24 | headline2: Licht An 25 | headlinesize: 20px 26 | item: KucheLicht_4_STATE 27 | - component: oh-grid-col 28 | config: {} 29 | slots: 30 | default: 31 | - component: widget:Command_Button 32 | config: 33 | background: "#1c1c1d" 34 | cardwidth: "100" 35 | command1: OFF 36 | command2: ON 37 | headline1: LED Aus 38 | headline2: LED An 39 | headlinesize: 20px 40 | item: SonoffT1KucheLED_SonoffT1KucheLED 41 | - component: oh-block 42 | config: {} 43 | slots: 44 | default: 45 | - component: oh-grid-row 46 | config: {} 47 | slots: 48 | default: 49 | - component: oh-grid-col 50 | config: 51 | large: "50" 52 | width: "100" 53 | xlarge: "50" 54 | slots: 55 | default: 56 | - component: widget:Cell_Temp_Card_1 57 | config: 58 | humidity_item: SwitchbotMeterTest_SwitchBotMeterTestHum 59 | icon: thermometer 60 | set_temp_item: HeizungKuche_SetPointTemperature 61 | temp_item: SwitchbotMeterTest_SwitchbotMeterTemp 62 | title: Temperatur 63 | - component: oh-grid-col 64 | config: 65 | large: "50" 66 | medium: "100" 67 | small: "100" 68 | width: "100" 69 | xlarge: "50" 70 | xsmall: "100" 71 | slots: 72 | default: 73 | - component: widget:Cell_Shutter_Card_1 74 | config: 75 | item: RollladenKuche_4_LEVEL 76 | title: Rollo 77 | masonry: null 78 | grid: null 79 | -------------------------------------------------------------------------------- /popupPages/Netzwerk Popup.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | label: Netzwerk Popup 3 | sidebar: false 4 | blocks: 5 | - component: oh-block 6 | config: {} 7 | slots: 8 | default: 9 | - component: oh-grid-row 10 | config: {} 11 | slots: 12 | default: 13 | - component: oh-grid-col 14 | config: 15 | width: "100" 16 | slots: 17 | default: 18 | - component: widget:Connection_Card_3 19 | config: 20 | cardheight: 300px 21 | headline: DSL Devices 22 | item1: iPhoneSentshuas_MACOnline0019999CB6C2 23 | item2: NetworkDevices_MACOnline34EA34B52151 24 | item3: iPhoneSentshuas_MACOnline8ED4E3D1E8F0 25 | item4: iPhoneLena_MACOnline0622A480AD82 26 | itemname1: Server 27 | itemname2: Broadlink 28 | itemname3: iPhone 29 | itemname4: iPhone Lena 30 | masonry: null 31 | grid: null 32 | canvas: null 33 | -------------------------------------------------------------------------------- /popupPages/Obergeschoss.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | label: Obergeschoss 3 | sidebar: false 4 | blocks: 5 | - component: oh-block 6 | config: {} 7 | slots: 8 | default: 9 | - component: oh-grid-row 10 | config: {} 11 | slots: 12 | default: 13 | - component: oh-grid-col 14 | config: {} 15 | slots: 16 | default: 17 | - component: widget:Command_Button 18 | config: 19 | background: "#1c1c1d" 20 | cardwidth: "100" 21 | command1: OFF 22 | command2: ON 23 | headline1: Schlafzimmer Aus 24 | headline2: Schlafzimmer An 25 | headlinesize: 20px 26 | item: Schlafzimmer_BL 27 | - component: oh-grid-col 28 | config: {} 29 | slots: 30 | default: 31 | - component: widget:Command_Button 32 | config: 33 | background: "#1c1c1d" 34 | cardwidth: "100" 35 | command1: OFF 36 | command2: ON 37 | headline1: Bad Aus 38 | headline2: Bad An 39 | headlinesize: 20px 40 | item: TapoBulb_LightOn 41 | - component: oh-block 42 | config: {} 43 | slots: 44 | default: 45 | - component: oh-grid-row 46 | config: {} 47 | slots: 48 | default: 49 | - component: oh-grid-col 50 | config: 51 | large: "50" 52 | width: "100" 53 | xlarge: "50" 54 | slots: 55 | default: 56 | - component: widget:Cell_Temp_Card_1 57 | config: 58 | humidity_item: SwitchbotMeterTest_SwitchBotMeterTestHum 59 | icon: thermometer 60 | set_temp_item: HeizungKuche_SetPointTemperature 61 | temp_item: SwitchbotMeterTest_SwitchbotMeterTemp 62 | title: Temperatur 63 | - component: oh-grid-col 64 | config: 65 | large: "50" 66 | medium: "100" 67 | small: "100" 68 | width: "100" 69 | xlarge: "50" 70 | xsmall: "100" 71 | slots: 72 | default: 73 | - component: widget:Cell_Shutter_Card_1 74 | config: 75 | item: RollladenKuche_4_LEVEL 76 | title: Rollo 77 | masonry: null 78 | grid: null 79 | -------------------------------------------------------------------------------- /popupPages/Treppe.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | label: Treppe 3 | sidebar: false 4 | blocks: 5 | - component: oh-block 6 | config: {} 7 | slots: 8 | default: 9 | - component: oh-grid-row 10 | config: {} 11 | slots: 12 | default: 13 | - component: oh-grid-col 14 | config: {} 15 | slots: 16 | default: 17 | - component: widget:Command_Button 18 | config: 19 | background: "#1c1c1d" 20 | cardwidth: "100" 21 | command1: OFF 22 | command2: ON 23 | headline1: Treppe Aus 24 | headline2: Treppe An 25 | headlinesize: 20px 26 | item: SonoffT3TreppeRechts_SonoffT3TreppeRechts 27 | - component: oh-grid-col 28 | config: 29 | width: "50" 30 | slots: 31 | default: 32 | - component: widget:Command_Button 33 | config: 34 | background: "#1c1c1d" 35 | cardwidth: "100" 36 | command1: OFF 37 | command2: ON 38 | headline1: Treppe L Aus 39 | headline2: Treppe L An 40 | headlinesize: 20px 41 | item: SonoffT4TreppeLinks_SonoffT4Links 42 | - component: oh-block 43 | config: {} 44 | slots: 45 | default: [] 46 | masonry: null 47 | grid: null 48 | canvas: null 49 | -------------------------------------------------------------------------------- /popupPages/Werkstatt.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | label: Werkstatt 3 | sidebar: false 4 | blocks: 5 | - component: oh-block 6 | config: {} 7 | slots: 8 | default: 9 | - component: oh-grid-row 10 | config: {} 11 | slots: 12 | default: 13 | - component: oh-grid-col 14 | config: 15 | large: "100" 16 | width: "100" 17 | xlarge: "100" 18 | slots: 19 | default: 20 | - component: widget:Cell_Temp_Card_1 21 | config: 22 | heating_item: TuyaTempSensor_TuyaTempSensorBatterie 23 | humidity_item: TuyaTempSensor_TuyaTempSensorLuftfeuchtigkeit 24 | icon: thermometer 25 | temp_item: TuyaTempSensor_TuyaTempSensorTemperatur 26 | title: Temperatur 27 | - component: oh-block 28 | config: {} 29 | slots: 30 | default: 31 | - component: oh-grid-row 32 | config: {} 33 | slots: 34 | default: 35 | - component: oh-grid-col 36 | config: {} 37 | slots: 38 | default: 39 | - component: widget:Command_Button 40 | config: 41 | background: "#1c1c1d" 42 | cardwidth: "100" 43 | command1: OFF 44 | command2: ON 45 | headline1: Licht Aus 46 | headline2: Licht An 47 | headlinesize: 20px 48 | item: SonoffMiniWerkstatt_SonoffWerkstatt 49 | - component: oh-grid-col 50 | config: {} 51 | slots: 52 | default: 53 | - component: widget:Command_Button 54 | config: 55 | background: "#1c1c1d" 56 | cardwidth: "100" 57 | command1: OFF 58 | command2: ON 59 | headline1: Press Aus 60 | headline2: Press An 61 | headlinesize: 20px 62 | item: SonoffSteckdose_SonoffSteckdose 63 | masonry: null 64 | grid: null 65 | canvas: null 66 | -------------------------------------------------------------------------------- /popupPages/Wohnzimmer.yaml: -------------------------------------------------------------------------------- 1 | config: 2 | label: Wohnzimmer 3 | sidebar: false 4 | blocks: 5 | - component: oh-block 6 | config: {} 7 | slots: 8 | default: 9 | - component: oh-grid-row 10 | config: {} 11 | slots: 12 | default: 13 | - component: oh-grid-col 14 | config: 15 | large: "50" 16 | width: "100" 17 | xlarge: "50" 18 | slots: 19 | default: 20 | - component: widget:Cell_Temp_Card_1 21 | config: 22 | humidity_item: SwitchbotMeterTest_SwitchBotMeterTestHum 23 | icon: thermometer 24 | set_temp_item: HeizungWohnzimmer_SET_POINT_TEMPERATURE 25 | temp_item: HeizungWohnzimmer_ACTUAL_TEMPERATURE 26 | title: Temperatur 27 | - component: oh-grid-col 28 | config: 29 | large: "50" 30 | medium: "100" 31 | small: "100" 32 | width: "100" 33 | xlarge: "50" 34 | xsmall: "100" 35 | slots: 36 | default: 37 | - component: widget:Cell_Speaker_Card_1 38 | config: 39 | header: Control 40 | icon: speaker_3 41 | item: SonoffP2TV_SonoffP2TVPower 42 | item_cover: SonosWohnzimmer_Coverbild 43 | item_volume: SonosWohnzimmer_Lautstarke 44 | title: TV 45 | - component: oh-grid-col 46 | config: 47 | large: "50" 48 | width: "100" 49 | xlarge: "50" 50 | slots: 51 | default: 52 | - component: widget:Cell_Shutter_Card_1 53 | config: 54 | header: Wohnzimmer 55 | icon: arrow_up_arrow_down 56 | item: Rollos_Wohnzimmer_4_LEVEL 57 | title: Rollo 58 | - component: oh-block 59 | config: {} 60 | slots: 61 | default: 62 | - component: oh-grid-row 63 | config: {} 64 | slots: 65 | default: 66 | - component: oh-grid-col 67 | config: 68 | width: "50" 69 | slots: 70 | default: 71 | - component: widget:Cell_Light_Card_1 72 | config: 73 | header: Decke 74 | icon: lightbulb 75 | item_brightness: DeckenbeleuchtungL_Weiss 76 | item_schalter: DeckenbeleuchtungL_Eingeschaltet 77 | title: Licht 78 | - component: oh-grid-col 79 | config: 80 | width: "50" 81 | slots: 82 | default: 83 | - component: widget:Cell_Light_Card_1 84 | config: 85 | header: TV Bank 86 | icon: lightbulb 87 | item_brightness: TVBankLED_Color 88 | item_schalter: TVBankLED_Eingeschaltet 89 | title: Licht 90 | - component: oh-grid-col 91 | config: 92 | width: "50" 93 | slots: 94 | default: 95 | - component: widget:Cell_Light_Card_1 96 | config: 97 | header: Säule 98 | icon: lightbulb 99 | item_brightness: LEDSaule_Color 100 | item_schalter: LEDSaule_Eingeschaltet 101 | title: Licht 102 | - component: oh-grid-col 103 | config: 104 | width: "50" 105 | slots: 106 | default: 107 | - component: widget:Cell_Light_Card_1 108 | config: 109 | header: Tube 110 | icon: lightbulb 111 | item_brightness: LEDTube_RGBColor 112 | item_schalter: LEDCube_Eingeschaltet 113 | title: Licht 114 | masonry: null 115 | grid: null 116 | --------------------------------------------------------------------------------