TileBoard - New dashboard for Homeassistant

Share your Projects! Dashboards & Frontend
1912

Not the screensaver.js. In fact you should never change any code other than config.js and custom.css if you wish to be able to update TileBoard. Just add the code after the definition of CONFIG. Don’t forget to add flickrAlbum and flickrApiKey to CONFIG.

1913

I’m not entire sure what you guys are trying to do but groups can either (all) be horizontal or vertical otherwise it would destroy the grid.

1914

I cant speak for @apt but what im trying to do is stack groups in a way. Not wanting to break the grid function but give the ability to add titles.

For Example

Downstairs
Tile 1
Tile 2
Tile 3

Upstairs
Tile 1
Tile 2
Tile 3

These would all be in the same vertical column but in essence are grouped. At the moment Downstairs and Upstairs would be in separate columns.

If that makes sense @resoai

1915

You can force all groups to stack vertically:

groupsAlign: GROUP_ALIGNS.VERTICALLY

But this would mean that absolutely all groups on all pages would be like that. This is what I used for a HomeKit theme:

49
491368×994 518 KB

1916

Same here with Tado thermostat. All work fine except for changing temperature. Still looking for a fix or workaround, but I might try servicecalls and or scripts if all else fails haha.

1917

So put it after the definition of CONFIG and before where “pages:[” starts?
line 123 below:

image
image661×557 95.2 KB

Or does it go after the closing CONFIG brace “},” line 122 above?

1918

Function definition goes after closing } of CONFIG.

1919

You could make titles with text inputs. That is how I did it.

image
image2048×1536 329 KB

1 Like
1920

That seems like a fairly decent workaround @jimz011 … this is what I was trying to explain @resoai

1921

I’ve noticed when my tablet has been on screensaver mode for a while and I press to deactivate it, my cameras thumbnails don’t always automatically refresh. Today when I clicked from screensaver mode my cameras timestamps displayed 12pm when it was 5pm and I had to close and reload the entire browser to get it to refresh. Do I have to issue a command to the device to tell it to reload the camera thumbs or the entire screen again when deactivating the screen saver? It doesn’t seem to happen within 5 or 10 minutes of the screensaver being active but when its been on for several hours it seems to happen more often. Just curious if anyone else has noticed this or is it something with my tablet? iPad Air 2 running latest iOS release on Safari.

1922

Question about the id: field in the comment below. I am unable to find any id associated to the page entity. I tried adding id: to my page blocks and firing the event but no luck, what am I missing?

/* Example: Open a specific TileBoard page
 * Include a page field in the event_data from Home Assistant
 * that matches the id: of a page in the TileBoard CONFIG
 */
{
  command: 'open_page',
  action: function(e) {
    window.openPage(CONFIG.pages[e.page]);
  }
}
1923

It is not the id, it is index of the array (starting with 0 for page 1)

1 Like
1924

We are freezing refreshing of the thumbnails while screensaver is showing because people complained that it crashed older iPads. Once you stop screensaver, thumbnails should refresh within a few mins.

1925

@resoai I was having a think about the device tracking icon, loving the dynamic tile showing the map and the mugshot etc but being a tile its not showing a great amount of detail.

Is it possible to click on a tracking tile and bring up a popup screen (similar to the cameras) showing a bigger map and a legend showing the battery levels, charging state etc ?

Just a thought

2 Likes
1926

Thanks, that worked perfectly :slight_smile:

1927

Did someone looked at the Google Photos API to fetch images from an album and use those for the screensaver?

I’m currently using Android Daydream (Screensaver of Android) with a Google Photos album, and that works fine, but I would prefer to use Tileboard so I can add custom text over the images (basicly, the current time).

1928

I’m trying to use custom.css to move the ‘clickable’ part of the tile to the top-left to the top-right.

here’s the part of my css file

.-theme-homekit .item-clickable {
  height: 11px !important;
  width: 11px !important;
  left: 120px !important;
  top: 11px !important;
  border-radius: 11px !important;
}

It looks OK with 1x1 tiles, but for wider tiles such as camera tiles, the yellow dot is too far over to the left, for exmaple on ‘landing light’ here:

tilesssss_smalll

Is it possible to somehow make it so the ‘.item-clickable’ class is on the right side?

1929

Try this:

.-theme-homekit .item-clickable {
  height: 11px !important;
  width: 11px !important;
  right: 11px !important;
  top: 11px !important;
  border-radius: 11px !important;
}
1930

Thanks, for some reason my browser (safari) isn’t responding to the right: 11px !important; and it looks the same as if it’s left: 11px !important;

I eventually tried some random googling and got it working by using this CSS:

  position: relative;
  float: right;
  left: -11px !important;

I must admit CSS can seem like some sort of dark art at times, but I’m just glad it’s working :smiley:

1 Like
1931

Definitely takes a little trial and error at times, glad you got it working!