TileBoard - New dashboard for Homeassistant

Can you share how you did get the icons to work?
I have some and others not…

image

Hi,
Updated - deleted this part as it was wrong. See answers from rob51i03 and rchl, they explain this :slight_smile:

How did you get it to show low temperature? Mine just gives undefined error even if tried to check syntax from openweathermap fields.

Edited: I tried to look fields from OpenWeatherMap, but that don’t match much, so I’m quite confused… (https://openweathermap.org/api/hourly-forecast#parameter) or (https://openweathermap.org/api/one-call-api#parameter)

Hi all,

Is there a there a way to have a tile icon based on the state of a different entity?

For example:

icon: function (item, entity) {
     if (this.states['REPLACE WITH SEPERATE ENTITY'].state==playing)
          return 'mdi-pause'
     else
          return 'mdi-play '
}

Hi ,
Unable to find the main.less file.
Could you please help me out
Thank You

Hi,

Could you be so nice and explain, where the first part of icon mapping is taken? I’m still missing many of icons, but I can’t figure out what term I should map :frowning:
like in:

 icons: {
      'clear-day': 'clear',

where can I find all possibilities for ‘clear-day’ part of terms?

Hi @G3THD,

Did you check the examples? https://github.com/resoai/TileBoard/blob/0a1f78b2f0fdd25a9648a601e02a6ef8ee4c75eb/TILE_EXAMPLES.md

Hi,
How to display google calendar events on tile?
Thank You

These may vary, depending on which API service you are using to obtain your weather forecast, so Home Assistant’s Developer Tools are your best resource here. Navigate to Developer Tools > States and then enter the name of your weather entity, e.g. weather.openweathermap in the Entity field.
In the State Attributes that appear below, look for “condition” values. For example:

forecast:
  - datetime: '2021-04-08T13:43:06.903858-04:00'
    temperature: 23
    templow: 13
    condition: sunny
    precipitation_probability: 0
  - datetime: '2021-04-09T13:43:06.903893-04:00'
    temperature: 14
    templow: 8
    condition: rainy
    precipitation_probability: 60
  - datetime: '2021-04-10T13:43:06.903927-04:00'
    temperature: 19
    templow: 9
    condition: partlycloudy
    precipitation_probability: 0

There you will find the precise values for the weather conditions that are currently missing / not mapping to tileboard’s icons. Do this over time, each time you have a missing icon in your forecast, until you have captured all the possibilities.

1 Like

I’ll add to that that TileBoard uses the icon set from https://peter.build/weather-underground-icons/ and that one doesn’t have icons for some of the possible states.

For reference, here are also the state mappings that TileBoard has by default as of now: https://github.com/resoai/TileBoard/blob/313b7476eb0e8ede1208cdda454433dbcb63f185/TILE_EXAMPLES.md#L627-L644

Some of the states are mapped to unknown because there is not really any good icon available for those.

1 Like

I just used the code which was given by ‘rchl - Rafał Chłodnicki’
See a few posts above

In my case it differs which day is shown with an icon.

Do you have any idea why sleet icon is not appearing? I have it mapped like 'snowy-rainy': 'sleet',.
I checked both values (thank you both for clarification! it helped so much!), there is condition: snowy-rainy in OpenWeatherMap fields and sleet icon appears in peter.build.

Updated: problem seems to be ‘sleet’, if I change it to something else, that icon appears.

to find main.less - check source code. You should not change it anyway - until you decide to compile TB yourself. If you want to add your stiles/classes - use custom.css which is located styles/custom.css.

This is an example of how TileBoard can display forthcoming electricity rates for UK’s energy provider called Octopus Energy.

HI again! Sorry if this was already answered before but I searched and couldn’t find the answer. I noticed that the coding for the weather forecast tile changed to using the weather attributes instead of sensors. I tried it with accuweather and it works. The only issue I’m having is that the date return as a long string containing the year-month-day-time.

Screen Shot 2021-04-10 at 4.40.58 PM

Is there a way to change this so I can only get the month and date like in the Tileboard example page? Ex: April 11

{
   position: [0, 1],
   type: TYPES.WEATHER_LIST,
   width: 2,
   height: 2,
   title: 'Prévisions',
   id: {},
   state: false,
   icons: {
      'sunny': 'clear',
      'clear-night': 'nt-clear',
      'cloudy': 'cloudy',
      'exceptional': 'unknown',
      'fog': 'fog',
      'hail': 'sleet',
      'lightning': 'chancestorms',
      'lightning-rainy': 'tstorms',
      'partlycloudy': 'partlycloudy',
      'partly-cloudy-night': 'nt-partlycloudy',
      'rainy': 'rain',
      'snowy': 'snow',
      'snowy-rainy': 'sleet',
      'wind': 'unknown',
      'windy': 'unknown',
      'windy-variant': 'unknown'
   },
   hideHeader: false,
   secondaryTitle: 'Wind',
   list: [1,2,3,4,5].map(function (id) {
      var ENTITY_ID = 'weather.accuweather'
      return {
         date: function () {
            var entityState = this.states[ENTITY_ID];
            return entityState.attributes.forecast[id].datetime
         },
         icon: function () {
            var entityState = this.states[ENTITY_ID];
            return entityState.attributes.forecast[id].condition
         },
         // iconImage: null,  // replace icon with image
         primary: function () {
            var entityState = this.states[ENTITY_ID];
            var forecast = entityState.attributes.forecast[id]
            return forecast.templow + ' - ' + forecast.temperature + ' °C'
         },
         secondary: function () {
            var entityState = this.states[ENTITY_ID];
            var forecast = entityState.attributes.forecast[id]

            // Wind speed. Convert m/s to km/h.
            return Number.parseInt(forecast.wind_speed) + ' km/h'
            // Or if you prefer precipitation
            // return (forecast.precipitation || 0) + ' mm'
         }
      }
   })
},               

Note that I’m not done changing the icons to match the one from accuweather.
Thanks for your help!

Nevermind, I finally found it from an other post

         date: function () {
            var d = new Date(Date.now() + id * 24 * 60 * 60 * 1000);
            return d.toString().split(' ').slice(1, 3).join(' ');
         },

But that brings me an other question. Now that the date display the month and date like I wanted, is there a way I can change the months from English to French?

Something like this should do the trick:

date: function() {
  return new Date(entityState.attributes.forecast[id].datetime).toLocaleString(CONFIG.locale, {
    year: 'numeric', 
    month: 'numeric', 
    day: 'numeric'
  });
},

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

Make sure that CONFIG.locale is set to your desired locale.

2 Likes

THanks! I guess we posted at the same time… lol Did you see my other question about changing language?

Yes, I’ve added a relevant note bellow regarding the language.

1 Like

You guys are too quick!! :stuck_out_tongue: Thanks again! You rock!

1 Like

Actually, the idea is that the date will be formatted using angular’s date filter. I’ll create PR for that. The only potential issue with that is that that might be a breaking change for existing setups…

2 Likes