TileBoard - New dashboard for Homeassistant

Share your Projects! Dashboards & Frontend
554

What are you trying to achieve? What is the use case?

555

When myself or my wife are home, I want to show all the pages (including each other’s locations, cameras etc)

When the cat sitter comes in (or any other guest), I want to hide all that stuff and not give them control of the house, but just give them an alarm control panel to disarm the alarm

1 Like
556

Why not create two separate dashboard which would be independent?

557

That could work - what and use Fully Kiosk to move between the two based on presence?

558

Yes, you could inject different JS via Fully (path to different config)

559

We have also added an attribute hidden to group definition which can be a function:

This way you could return true/false depending on the sensor value or anything else you wish :slight_smile:

hidden: function() { return this.parseFieldValue("&alarm.home.state") === "off" }
1 Like
560

Has anyone successfully implemented the weather forecast tile with the weather.yweather (yahoo weather) entity?

The forecast data in HA JSON comes through as:

{
  "temperature": 64,
  "humidity": 66,
  "wind_speed": 4.35,
  "forecast": [
    {
      "datetime": "19 Jul 2018",
      "temperature": 82,
      "templow": 57,
      "condition": "sunny"
    },
    {
      "datetime": "20 Jul 2018",
      "temperature": 81,
      "templow": 60,
      "condition": "cloudy"
    },
    ...

I can’t seem to get the tiles config.js to read the forecast correctly. I’ve tried to use

var forecast = "&weather.yweather.attributes.forecast[" + id + "].temperature";

but it doesn’t parse correctly and it returns with

[object Object], [object Object], [object Object],...

Thanks in advance if anyone could offer suggestions!

561

Ah okay perfect - I’ll try that and see how I go - thanks…

Quick other question - is there a file for displaying a HA timer?

563

Just use a sensor tile.

564

Is anyone using this on a 7" fire tablet? Just wondering what tile size and margins work best for it

3 Likes
565

Is there a tile to display a plain text box? I’m trying to display a Dark Sky weather summary but only option i see is through the text list tile that doesn’t wrap text. Have to make it Width 10 to get it to display a short sentence.

566

I also run tileboard on apache (yet only accessible locally).

Redirecting based on browser or width might be working. For now I’m using the /?configuration provided.

567

You can decrease fontSize. Also, why not to consider putting it into header (top right)?

568

I have an old Nexus 7 which could have the same resolution. Here is the config that I’m using for it:

tileSize: 136,
tileMargin: 6,
groupMarginCss: '10px',
customTheme: CUSTOM_THEMES.COMPACT,
entitySize: ENTITY_SIZES.SMALL,
2 Likes
569

Sorry, I meant for Dark Sky ‘daily_summary’ and ‘hour_summary’ which is an entire sentence, for e.g. “No precipitation throughout the week, with high temperatures falling to 16°C on Sunday.”. But i have started using the header for the weather summary and loving it! Only thing i missed when i switched over from Home Assistant Control Panel.

Currently looks like this

Untitled
Untitled1256×560 379 KB

2 Likes
570

I have been drooling over this since the thread started.

@resoai do you think you will put out a Docker container for the project?

571

I honestly see absolutely no reason for it. This is simply an HTML page.

572

My use-case was to get it going on my Synology. Ill have a go over the weekend and see if i can get it going without.

573

If you’re using Docker, you should be mapping a directory so HASS config files persist. The tile board files go in a sub directory in the www directory. If you don’t have a www directory, create one where your configuration.yaml file lives.

I use HASS in Docker in my qnap.

574

Here is a special tile for those who have screensaver configured:

    position: [0, 0],
    type: TYPES.CUSTOM,
    id: {},
    state: false,
    title: 'Screensaver',
    icon: 'mdi-image',
    action: function (item, entity) {
        if (CONFIG.screensaver) {
            var cam = ['_qNhxxo9rVU', 'ZqnraG3SsjM', 'ZqnraG3SsjM', 'ECQ0PM8Iqq4', 'DuTc5SOKE98', 'lYRf2jFX6e8', '4EH7ex-MzeE', 'XZT-MenNSLs'];
            var url = 'https://youtube.com/embed/' + cam[Math.floor((Math.random() * cam.length))] + '?autoplay=1&controls=0&rel=0&mute=1';
            
            CONFIG.screensaver.leftTop = [{
                type: SCREENSAVER_ITEMS.CUSTOM_HTML,
                html: '<iframe style="position: absolute; width: 108%; height: 112%; pointer-events: none;" src="' + url + '" frameborder="0" allow="autoplay *; fullscreen *" allowfullscreen="true"></iframe>',
                styles: {position: 'fixed', zIndex: -99, top: 0, left: 0, right: 0, bottom: 0, margin: '-6% -4%'}
            }]
            window.showScreensaver();
        }
    }

This will start a screensaver with a random YouTube video (I have a list of webcams from Odessa, the city I was born in) as a background.

2 Likes