TileBoard - New dashboard for Homeassistant

[scooby]

Hi

I’ve made changes in custom.css but they are not reflecting in the gui. I am only starting up and my knowledge with css is zero. Here is I am trying to do: Change the size of the Fonts of the Clock on main page.

custom.css (I am assuming this is the same file in the styles directory?)
.header clock { font-size: 28px; }

Please help. Thank you

[scooby]

Never mind. I made changes using MS Edge. But now I opened Firefox and I can see the changes. weird.

[scooby]

Hi Phil

Did you manage to do this? Any chance of sharing the css? Thank you.

[benalla (Samir Benalla)]

Hi, I want to install the NWS integration.
Need to fill in a API key, this suppose to be random (with email) but won’t work for me.
Get the error ‘Connection failed, try again’

How to get it working/installed in HA?

[benalla (Samir Benalla)]

Did you get this working?
Would like to use this also (weather in Netherlands).

[Themsk (Dragoș Custură)]

I like the Tileboard, i have made so mane changes to the files and i’m stuck on old version… but… ist ok. Anyway, i also have a raspberry 4 with plex installed so i need tho show on my panel all the movies and tv shows that are available on my Plex. Hope you like it

Here is a short preview of the integration: https://youtu.be/4QqvZev-HNk

[jasonwills]

Hi Samir,

sorry, bot distracted, and not looked at it again - will see if i can look at it shortly.

Jason

[Themsk (Dragoș Custură)]

cant make it work,what is the content of run once js file? is the cod from here? https://stackoverflow.com/a/20430478
if yes… i have errors about

angular.module('vkApp')

please be kind and guide me.
regards

[frene]

Really like it. would you mind sharing your configuration? I’m also using Plex a lot so this will be useful.

[Themsk (Dragoș Custură)]

i can share the scripts, but you must first make sure you have webserver running on your raspberry, where the plex is installed.

[shep]

I love this weather layout, and thanks so much for sharing! Quick question, I’m really not good at all with JS, so trying some copy and paste, and keep getting this “undefined” error. Might anyone know what it is? My code matches above verbatim, so saving reposting the code:

[jasonwills]

hi @shep,
if you just want to get rid of the undefined, i’d add the following:

state: false,

(mine’s added under the title property, but it doesn’t matter on the order to be honest)

Jason

[shep]

Thank you so much! Worked perfectly! Looks amazing and really appreciate the help!

[frene]

Thanks. I will pass then as i’m not using a Raspberry pi for my server. But good job anyway on your page. Look nice.

[Themsk (Dragoș Custură)]

Thanks. Anyway, its not about raspberry, its about a web server that can show web pages. Apache will do that job

[coomacheek]

How do I get the “mdi:weather-snowy-rainy” icon to show up in the Weather_List tile? Or maybe a better question is, how do you add custom icons to the weather_list tile?

[Syrius (Jeremy)]

@Syrius

Thanks, that partially covers it.

I ideally want to define

• an initial timeout of 10 seconds to close the popup if nothing is pressed
• once you press a button, it will auto close after say 2 seconds (in case you want to press another button on the same popup)

I tried substituting this.$scope.closePopup(); for this.$scope.popupTimeout = 2; in your code snippit above in an attempt to achieve the second point however nothing happens.

tying to use this code snippit from #496

action: function (item, entity) {
   this.$scope.entityClick({}, item, entity); 
   $timeout(function () {
      this.$scope.closePopup();
   }, shorter_timeout_in_millliseconds_to improve user experience);}

results in console error

ReferenceError: $timeout is not defined

@resoai, @rchl - any tips for this please?

@resoai, @rchl - could you please advise if this is possible please

[Yoghurt]

Hi,
I got my tileboard up and running, love how it looks. Though I’ve been struggling with something for a few days now, I have Spotify set up, trying to get “source” to work. If I use “Types.Media.Player”, it works, but I don’t like the volume slider.

So, instead, Id like to use this

Currently, I’ve specified

                     {
                        position: [0, 2],
                        type: TYPES.CUSTOM,
                        title: 'Source',
                        id: 'media_player.spotify_yoghurt',
                        state: false,
                        bgOpacity: 0.9,
                        width: 3,
                        height: 1,
                        icon: 'mdi-cast-audio',
                        action: function (item, entity) {
                                this.apiRequest({
                                type: 'call_service',
                                domain: 'media_player',
                                service: 'select_source',
                                service_data: {
                                 source:'media_player.study_speaker',
                                   entity_id: 'media_player.spotify_yoghurt',
                                   }
                              });
                          }

I’ve tried different using a different source, ‘study_speaker’, though that hasn’t worked either. The goal would be the list of all the Google Cast devices, but I cant even get it to change the source to one of them

Any ideas?

[KrzysztofKowalczyk74]

Still searching for smart solution for my design…

Current state:

To reduce size of all icons I put placed this:

.item-background{
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: 50%;
}

if custom.css.
However would like to change one Tile (called “Domofon”) and have bacground-size: 90% there. Can you please help me with that?

[timota (Taras)]

For a particular tile you have 2 options:

• use

customStyles: { 
  background-size: 20%; 
  etc... 
}

or even better use

classes: ['-my-special-class'],

and in custom.css use whatever you want.
With classes you can reuse/extend that class for any tile you want.