TileBoard - New dashboard for Homeassistant

Share your Projects! Dashboards & Frontend
1746

@resoai … managed to struggle my way through and here is the final code… https://paste.ubuntu.com/p/G2hG6R4dRT/ :smiley:

Final thing I am trying to do is… change the background based on the current weather situation. Totally new to JS and managed to scrape this together but appreciate your thoughts…

var type = this.parseFieldValue('&sensor.dark_sky_precip_0.state');{
    if(type == "Sunny"){
        document.body.style.backgroundImage = sunny.png";
    }
    else if (type == "partly cloudy"){
        document.body.style.backgroundImage = "partly-cloudy.png";
    }
    else if (type == "cloudy"){
        document.body.style.backgroundImage = "cloudy.png";
    }
    else if (type == "clear"){
        document.body.style.backgroundImage = "clear.png";
    }
    else if (type == "thunder"){
        document.body.style.backgroundImage = "thunder.png";
    }
}
1747

This actually works like I wanted. Tried at first to do it with this method but was not successful. So if anyone is wondering the same question, here is my code that works.

{
    position: [3, 1],
    type: TYPES.SENSOR,
    title: 'Battery',
    subtitle: 'Vacuum',
    id: {},
    unit: '%',
    state: false,
    value: '&vacuum.vacuum_cleaner.attributes.battery_level'
},

Thanks resoai for the help and also for the work you done with TileBoard!

One question came to my mind. Is it possible to use other themes with compact style?

1748

Thanks, but this just freezes the frame. I managed to get it working at 3s intervals, which I guess would be ok for the thumbnail.

Alternatively I was trying to load an IFRAME into the full screen of the camera tile but that wasn’t working either. Could that work?

1749

MJPEG stream should keep the connection open and replace the frame (this is just a sequence of JPGs). Setting refresh defeats the whole purpose of MJPEG. There is no point and no need in IFRAME.

1750

Yes, you can specify theme as array and list the ones you want. There is a lot of info about all of this in README and WiKi which sadly no one bothers to read.

1751

document.body.style.backgroundImage = “url(’…’)”;

1753

It pretty much does everything you could want it to… it’s really capable but you have to sometimes learn new thins to be able to use it to the max.

I know you posted a valid enhanced request but please don’t imply it’s over… when it’s really just starting… it’s very much up to the users now.

Loving this …

1 Like
1754

This looks amazing. Was the code to the card ever released somewhere? I would really like to do the same but with another sensor

1755

@resoai do I add to the individual backgrounds of each page?

The below is not working:

      slides: [
     { bg: 
       var type = this.parseFieldValue('&sensor.dark_sky_icon.state');{
  if(type == "Sunny"){
      document.body.style.backgroundImage = “url('images/backgrounds/clear.png')”;
  }
  else if (type == "partly cloudy"){
      document.body.style.backgroundImage = “url('images/backgrounds/partly-cloudy.png')”;
  }
  else if (type == "cloudy"){
      document.body.style.backgroundImage = “url('images/backgrounds/partly-cloudy.png')”;
  }
  else if (type == "clear"){
      document.body.style.backgroundImage = “url('images/backgrounds/clear.png')”;
  }
  else if (type == "thunder"){
      document.body.style.backgroundImage = “url('images/backgrounds/thunder.png')”;
  }
  else if (type == "heavy rain"){
      document.body.style.backgroundImage = “url('images/backgrounds/heavy-rain.png')”;
  }
  else if (type == "rain"){
      document.body.style.backgroundImage = “url('images/backgrounds/rain.png')”;

  }
1756

Sorry, I’m on vacation with only my phone. I’m sure someone else can help you assign bg on each page.

1757

Just wanted to thank you for this idea! I have a Kindle Fire and was having trouble controlling the brightness via other methods. I wanted to be able to dim it at night since it’s in our living room, and this was the perfect solution! The only changes I made were to increase the opacity on the CSS to dim it more, just as a matter of personal preference, and I also increased the z-index to 100 so that it would also sit on top of the screensaver and dim that as well.

1 Like
1758

In your page configuration:

{
  title: 'Page title',

  /* bg: Link to the background image */
  bg: 'images/bg1.jpg',

  icon: 'mdi-home-outline', // icon of page (for the side menu)
.....
.....
1759

Thanks and thanks to @resoai too.
Managed to get it working with my previous code. Apparently all the quotes (“) were incorrect and had to replace them all.

How do I get this background to appear on all pages? Is there a universal setting rather than adding the code to the ‘bg:’ section of each page?

Also, does anyone know if I can add a CSS gradient background as well as the code with the background about?

1760

You can add the following to your custom.css and remove the image bg from page configuration…

body {
     background-image: linear-gradient(red, yellow) !important;
}
1761

Thanks @radinsky! I added that to the custom.css file but it has complete replaced the background set in my config.js file. The background in my config.js file just covers the top of the page (and is transparent) and the normal background set in the main.css file covers the remainder. I’ll let to replace the solid colour with he gradient.

I think this may be helpful but I am not sure how to bring it all together since I added the dynamic background code in the config.js file and need to add something to the custom.css file?

1762

Does anyone know how I can get rid of these in the top left corners on titles?

33
33308×556 42.6 KB

1763

Those are actually the indicators that the tile is clickable (not simply a sensor).

1764

So can’t get rid?

1765

I believe this section of main.css controls this:

.item.-switch .item-clickable,
.item.-lock .item-clickable,
.item.-cover_toggle .item-clickable,
.item.-vacuum .item-clickable,
.item.-fan .item-clickable,
.item.-custom .item-clickable,
.item.-light .item-clickable,
.item.-script .item-clickable,
.item.-automation .item-clickable,
.item.-input_boolean .item-clickable,
.item.-input_select .item-clickable,
.item.-camera .item-clickable,
.item.-camera_thumbnail .item-clickable,
.item.-alarm .item-clickable,
.item.-door_entry .item-clickable,
.item.-input_datetime .item-clickable,
.item.-scene .item-clickable {
  display: block;
  left: 5px;
  top: 5px;
  height: 6px;
  width: 6px;
  border-left: 2px solid rgba(255, 255, 255, 0.8);
  border-top: 2px solid rgba(255, 255, 255, 0.8);
  opacity: 0.5;
  position: absolute;
  z-index: 2;
}

I haven’t tested but you could probably just add the following to custom.css:

    .item.-switch .item-clickable,
    .item.-lock .item-clickable,
    .item.-cover_toggle .item-clickable,
    .item.-vacuum .item-clickable,
    .item.-fan .item-clickable,
    .item.-custom .item-clickable,
    .item.-light .item-clickable,
    .item.-script .item-clickable,
    .item.-automation .item-clickable,
    .item.-input_boolean .item-clickable,
    .item.-input_select .item-clickable,
    .item.-camera .item-clickable,
    .item.-camera_thumbnail .item-clickable,
    .item.-alarm .item-clickable,
    .item.-door_entry .item-clickable,
    .item.-input_datetime .item-clickable,
    .item.-scene .item-clickable {
      display: none;
    }
1766

You’re awesome! Thanks so much. Do you know how I could make the tiles have rounded corners? instead of square… similar to what is on the HomeKit theme?