Home Panel - A web frontend for controlling the home

Share your Projects!
,
163

This can be done from the config editor yes. If you set the card off to this for example:

image
image478×728 34.9 KB

the card will be transparent to the background. your page may need refreshing if you are currently using this theme.

image

This article might help you on your background issue:

https://www.w3schools.com/cssref/css3_pr_background.asp

You might want to set something like this:

url(https://images.pexels.com/photos/4827/nature-forest-trees-fog.jpeg) no-repeat fixed center
164

I am loving this front end and i’m trying to personlise it further. You mention in the docs that you can add pages, I can get pages added, but I cant work out how to make three pages and then put cards/items inside the pages. e.g one page called “scenes” with all my scenes on it, one page called “home” with all the lights and switches and a last page called “cameras” with all my camera feeds on it. I just end up with all the cards on one page and all the other pages empty. Ive tried adding code for a page, then item code, then cards, then another page etc, but that doesnt work. Any help would be appreciated!

165

Hi @therealnips,

You can set the page for a group by the number it is in the list. See here:

https://git.timmo.xyz/home-panel/configuration/#page

166

Thank you, I cant believe I got that wrong. Its working perfectly now. Thanks!

167

I have created a couple more pages named “floorplan” and “map”. I want to see if floorplan can have one picture of my floor plan that fills the screen, just a simple jpg showing the locations of everything and their names. On the map page, I would like the device tracking map that hassio has to show where everyone is to fill the screen. Is that do-able? Do I set them up as cameras and provide the links in the url entity?

168

Is it possible to show a specific attribute from an entity and not just its state?

169

Hi,

thanks for making this plugin. Quick question: is there a list of examples what card types exist and how to use them?

170

How do you get the weather card configured as shown in the demo images? Not the header weather, but the card with the daily forecasts.

171

@timmo001 thanks for the add-on really love the simplicity of this.

I have a few problems, didn’t want to raise it as issues as I am not sure if its me being stupid!

  1. I’ve got two hue RGB lights in a room, when I long press on one of the lights it gives me the colour selection, however when I long press on the second it just gives me the brightness and colour temp:

Code

  "items": [
    {
      "name": "Snug",
      "cards": [
        {
          "entity_id": "light.snug_main",
          "name": "Main",
          "icon": "ceiling-light",
          "width": 2
        },
        {
          "entity_id": "light.snug_lamp",
          "name": "Floor Lamp",
          "icon": "floor-lamp",
          "width": 2
        }
      ],
      "page": 1,
      "width": 3
    },

Screens

14
142510×1488 659 KB
42
422210×1250 497 KB

  1. Is there anyway to have more options around colour choices and also have colour temperature for the lights that provide options for colours? much like the options on offer in the main HASSio interface:
    52
    52726×1548 128 KB

Any help much appreciated!

172

@rpitera you need to have a weather card setup in your home assistant config.yml file.

References:

However pay attention to the note: You can only use the weather tags, some weather data comes in through a sensor tag, this won’t work.

For example I used the following in my main config.yml file:

# Weather
weather:
  - platform: openweathermap
    api_key: enter-your-api-key
    mode: daily

Then I change the “entity_id” to “weather.openweathermap” in home panel’s JSON file from the example to the following:

 {
      "name": "Weather",
      "page": 2,
      "width": 8,
      "cards": [
        {
          "type": "hass",
          "name": "",
          "entity_id": "weather.openweathermap",
          "icon": "",
          "width": 3,
          "height": 2,
          "size": {
            "name": "",
            "state": "",
            "icon": ""
          }
        },

Gets you a result like this:

59
59780×516 104 KB

Hope this helps :grinning:

2 Likes
173

Absolutely helped. I had forgotten that I took out the weather platform setup when I moved to Lovelace and started using a custom card. After uncommenting it out, I set it as the entity_id and used your dimensions and looks perfect. Thank you!

2 Likes
174

Not yet. Feel free to create an issue though!

1 Like
175

All here:

https://git.timmo.xyz/home-panel/configuration/

176

All from sensors. See this section of the docs for setup:

https://git.timmo.xyz/home-panel/configuration/#left_outdoor_weather

177

This should be specific to your lights and whether they support colors or not. If you can let me know the component you use and I can try to verify that it is supported as I have not seen a light component without color support. No promises though, as I will likely not be able to test it without having those lights/component set up in my own HA instance.

I did try to use different color wheels like the one on HA, but I decided against it on this project since it is aimed at touch interfaces and none of the wheels/pickers I found were mobile friendly

178

If you set the group’s width to span across the page and then set the card(s) width and height to the same, you should be able to fill the screen using an iframe or image:

https://git.timmo.xyz/home-panel/configuration/#iframe

179

Yep the lights support colour, I am using the hue component. The colour component works on one bulb but not the other, they are the same model bulb.
Both colour selections work in the Main HAASio dashboard, so its a bit odd.

Reference to the colour choices, makes sense with that disunion and come to think of it you’re right it would be easier.
Is there any way that I can change which colours are displayed instead then?

1 Like
180

Thanks Timmo, but as I stated in the original post I wasn’t talking about the header. No worries though as @nickcj gave me the answer and I have it running. Thanks!

1 Like
181

Hey Tim,
In some of the screenshots there are larger cards for what look to be climate controls (Central Heating). Any advice on how I can implement these? Thanks,
Em.

182

This is the same as adding any other Home Assistant entity into the app. See here:

https://git.timmo.xyz/home-panel/configuration/#hass

If you want the card to look the exact same, you can set the width and the height to 2, so the card is 2x2. This can be any size though so play around and see what you like :+1:

1 Like