TileBoard - New dashboard for Homeassistant

brucys · July 14, 2019, 9:05am

@resoai Your are LEGEND!!!

Thanks heaps for your help, all sorted and working thank you
Kind Regards

apop · July 14, 2019, 6:18pm

Looks like you replied to a post about customStyles, so I’ll try to briefly go over both customStyles and custom.css:

customStyles can be added to the definition of a tile to customize the style of that individual tile.
custom.css is an optional file that you can add to the styles folder. If it’s there, TileBoard will look at it first to apply any custom CSS rules you’ve defined there.

Let me know if you have specific questions or want more examples.

brucys · July 14, 2019, 7:20pm

Hi again @apop. Yes I was inquiring about customStyles and the custom.css file. I fully understand and this is exactly what I was looking for in terms of individual tile and rules in the .css file

Is there a document, or a file, of common compiled examples of customStyles and entries in a custom.css file?
I have been wondering about how to change a single Tile in a page and not have it effect all tiles globally.
I would appreciate any examples that you may have. Thanks again, your help is greatly appreciated for a learner like me

apop · July 15, 2019, 2:48am

customStyles is probably best if you want to update one individual tile. For example:

customStyles: {'fontSize': '18px'} will update the tile’s font size to 18px.

Another way to apply style to a tile is to use custom CSS classes in the tile’s definition:

classes: ["-big-entity"]

This will give your tile a class called -big-entity, which you could reference in your custom.css file like so:

.-big-entity {
  font-size: 18px;
}

You can also use the Chrome developer tools to try and identify the different properties you can change on a tile.

I hope that helps some, if you have specific examples of what you’re trying to achieve, I can definitely walk you through those further.

merccooper · July 15, 2019, 6:28am

Guys, I tried to add my light, I copied the exact code to the config file with just changing the entity (nothing can go wrong, right?) but I’m getting a huge message from angular.js.

The page starts, I don’t have the pop-up message with “check your config file” so everything is ok there.

Does somebody know how to solve this?

brucys · July 15, 2019, 6:59am

Hi again @apop
That is great thank you. I will look to add some of these to my custom.css file. I will try some to see how they work.
Kind Appreciated once again

radinsky · July 15, 2019, 1:48pm

Thanks, can you tell how to show/hide the tile on HA event?

brucys · July 15, 2019, 7:44pm

Hi @apop
thanks again for your help. Could I please ask for Code to Change the Font Color of a Title in a tile, and also to change the font type/style? (e.g Courier, Verdana). Where do i change the “Clicked” color state of a Tile? I would like to change the Tile Color of the Alarm Tile in the disarmed and armed states?

Cheers for now and thanks
Bruce
.

brucys · July 16, 2019, 10:59am

Hi All.
I know this might be a difficult question for me to get my head around with the answer however I will ask and hopefully I will understand it as I am still learning how to read code, The question is, How do I get my Tileboard dashboard to automatically adjust for different screen resolutions?
I have a 10" and 8" tablet and the layout is formatted different for each device. ie. the Tiles on the 8" are not viewable on the whole screen as they are shifted to the right. On the 10" the layout and design is perfect.
I am sure this is something simple or maybe it is due to the simple fact of screen resolution with fixed Tile Size of 100px
Hope I have explained well enough. Cheers and thanks in advance

Kdem · July 16, 2019, 11:13am

Make a separate index.html file for each, adjust the layout on each file to suit that particular device. Then just point the browser to the file appropriate for the device you are on. So I have several labeled for example IP:8123/local/tileboard/indexacerlaptop.html.

brucys · July 16, 2019, 1:04pm

Perfect answer and fully understand @Kdem. I will work on that. A pity it will not do it by itself with a little bit of amazing code
Thanks for the simple easy to understand answer

brucys · July 16, 2019, 8:32pm

Hi Everyone
Is it possible to split the Header Date/Time into two piece that are Side by Side. ie DATE - TIME
instead of Date showing Below the Time

Here is the code

left: [
         {
            type: HEADER_ITEMS.DATETIME,
            dateFormat: 'EEEE - dd LLLL yyyy', //https://docs.angularjs.org/api/ng/filter/date
            styles: {
               fontSize: '24px',
               text: 'palatino',
               color: '#FAFCFA',
            },
         }
      ],

Thanks much again
Bruce

apop · July 17, 2019, 3:18am

Unfortunately, I don’t know of a way to do that with the existing tile. I tried adding a newline character to the dateFormat on my install, but it didn’t work.

apop · July 17, 2019, 3:25am

For the font, you can use the .item-title and .item-subtitle classes in custom.css, assuming you want to change the font color/face for every tile. If you only want to change it for certain tiles, I’d recommend applying a custom class.

.item:active will allow you to change the clicked state for all tiles. For a specific tile type, you can use .item.-light for example. https://github.com/resoai/TileBoard/blob/44dbaf983d79afb2a04cc9bd49e822cfab91b89c/styles/main.css is a good place to dig into the default CSS settings as well for a starting point.

brucys · July 17, 2019, 4:49am

Hey @apop, thanks man for the info once again, I will look at examples as I do want to change some individual tiles and not all tiles. I am starting to understand what these do

I have a strange issue with iPad in saving the webpage to Home Screen so that Tilebaord opens in Full Screen (Cannot get Fully Kiosk Browser for iPad)
When I open the Home Screen link to Tileboard dashboard it opens in full screen however some characters look like symbols and not the icons I selected. The Navigation Buttons on left side of page are also just a Square and not the correct icon
Here is two images, What hey should look like, and a photo of what the iPad is showing.
Any ideas what could be causing this? (My Samsung Android works fine as using Fully Kiosk Browser)

Sorry second image of iPad is rotated, not sure why

brucys · July 19, 2019, 7:01am

HI @Kdem.
I have tried separating a different file for my 8" tablet and creating a seperate index file labeled
IP:8123/local/tileboard/index8tablet.html.
Would you please be able to explain a little more as I cannot seem to get it to work?

Do I create a separate .js file as well and then in the browser address refer to to the new index file?
Maybe this is a little more involved than I thought lol. Thanks for now

Kdem · July 19, 2019, 11:23am

Yes, for each layout/device you want a separate .js config file. Then copy index.html and name it so you can easily know what you are doing. If you look in the original index.html, at around line 40 you will see a line like this

  'configacerlaptop.js', // <----- NOT config.example.js !!

that points to the config.js file the index.html file is going to use. Change this line to match the config.js you make for second device. Easiest to just copy the first config.js you made when you started and modify it to match your next device. You probably want to start by changing themes in config.js (near the top) to compact or mobile if going to a tablet or phone. I hope this is clearer, this worked for me, there are other ways to do this too, example: https://github.com/resoai/TileBoard/wiki/Mobile-configuration

resoai · July 19, 2019, 4:41pm

CalCrashlow · July 21, 2019, 7:50pm

Don’t think anyone has mentioned it, but the climate re-work in 0.96.x has somewhat broken the climate tile.

resoai · July 22, 2019, 5:16pm

I’ve already fixed it today.