I may be in over my head starting with this, but the it seems like its worth the effort. What exactly can I do to this code to do that? I don’t plan on using Plex so I’ll always have Spotify showing. I know that it creates the pop up for the brightness/color template, but I can’t figure out what it controls exactly (I can’t find what it’s referencing from or if it is to be referenced from something else as I can’t find any other mentions of these specific names anywhere else)Īnother thing that I’m unsure of is the Plex not playing, show Spotify condition. One thing I can’t figure out is the code in your ui-lovelace.yaml file under individual light overlays where you call up the entities “light.living_room_lights”, “light.stairs_lights” and so on which has the hold actions call-service and brings out the browser_mod.popup. I have extremely limited experience with programming (like maybe 1 year of C++ way back in high school and a bit of html modifications) so I’ve been slowly breaking down your code, seeing what they are linked to and modifying it to suit my house. An input text is used to determine the vacuums current state (cleaning, returning home etc) and that is used to conditionally change the picture-elements. This is a custom screen made up of picture-elements that interact with the xiaomi robot vacuum component. To map one of your light images to the actual live RGB color of the bulb, you can use the following CSS template style which will adjust the hue rotation to the hue of the bulb (in this case, light.table): style:įilter: '$' This will make sure only the “light” part of the image is shown, and will blend together any amount of images on top. You render an image for each individual light and use the CSS property filter mix-blend-mode: lighten. To have multiple lights overlayed on top of each other, the solution is actually pretty simple. All entites used are listed on the config card so that they can be passed to the templates used in CSS. The picture elements card is wrapped inside the config-template-card. This approach relies on config-template-card. Map entities to css with config-template-card: Osram Garden Poles (used for roof, outdoors).Sound system (controlled by an IR Blaster).Weather: Shows weather forecast and predicted rain from Buienradar.Media: Button shows currently playing media, if playing, view shows relevant views for Plex or Spotify.All Devices: Show all devices in a familiar homekit UI, why not?.Cleanup: Direct control of Xiaomi Mi robot and preset zones for room based cleanup.Control Lights: Tap a light icon to turn on or off individual lights, hold tap to show custom controls.Control Rooms: Tap a room to turn on or off all lights, hold tap to show custom controls.Note, the sidebar is repeated across every view in the lovelace.yaml file and includes buttons for the views. The image transparent.png is used on state_image picture-elements to hide elements if not needed, though this was used before I realised I could conditionally display elements - will update this soon to clean it up. I first designed my whole UI in Pixelmator so that I could export the button images and Xiaomi floorplan overlay images. Some of this styling overrides the custom cards to use View Width so that their fonts, widths and heights scale according to the width of the display, so that I can use my interface on any resolution. Most cards include a heavy amount of styling and positioning. This approach is heavily based on the Picture Elements Card for each view, and does not work in a traditional “Card” based way. Custom Xiaomi View for rapid room based zone cleanup.Custom rain card to display predicted rain in the next 2 hours - seperate repo here.Less cluttered interface displaying more information on a long press, inspired by Mattias Persson. Dynamic 3D Floorplan: Hue and Brightness mapped individual lights with custom popup controller.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |