TileBoard - New dashboard for Homeassistant

Hi @Romkabouter,

i’m using feedparser, so in the configuration of HA i have the follwoing:

  - platform: feedparser
    name: BBC News
    feed_url: "https://feeds.bbci.co.uk/news/rss.xml"
    date_format: "%a, %b %d %I:%M %p"
    inclusions:
      - title
      - link
      # - description
      # - image
      # - language
      # - pubDate

And the gitHub is here: https://github.com/custom-components/feedparser/blob/master/README.md

Regards

Jason

Ok, cool. I’ll try it.

I have got a CUSTOM tile which reads a RSS feed, but it might be nice to use a HA sensor I can read from.
I use the tile on a tileboard on an old iPad.
This is the code:

            {
               position: [3, 0],
               type: TYPES.CUSTOM,
               id: 'input_boolean.buienradar_rssfeed',
               title: '',
               width: 4,
               height: 3,
               state: false,
               customStyles: {'background-color': '#162c82'},
               customHtml: function(item, entity) {                           
                     var d = new Date(entity.last_changed);
                     d.setSeconds(d.getSeconds() + Math.round(this.$scope.states['input_number.buienradar_rssfeed_refresh'].state));
                     if (entity.state == 'on' && Date.now() > d) {
                        this.$scope.states[entity.entity_id].last_changed = Date.now();
                        //implemented a setTimeout, otherwise filling of the field did not work on iOS 9.3.6
                        setTimeout(function(){ 
                           $http = angular.injector(["ng"]).get("$http");
                           $http.get("https://data.buienradar.nl/1.0/feed/xml/rssbuienradar").then(function(data) {
                              var item = new window.DOMParser()
                                    .parseFromString(data.data, "text/xml")
                                    .querySelectorAll("item")[0];
                              var d = new Date(item.querySelector("pubDate").firstChild.textContent);
                              //padStart does not work in iOS 9.3.6
                              var dateString = String(d.getDate()).length < 2 ? "0" + String(d.getDate()) : String(d.getDate());
                              dateString += "-";
                              dateString += String(d.getMonth()+1).length < 2 ? "0" + String(d.getMonth()+1) : String(d.getMonth()+1);
                              dateString += "-" + d.getFullYear();
                              var i = item.querySelector("pubDate").firstChild.textContent.split(' ');
                              i.pop();
                              i = i.slice(1);
                              document.getElementById('rssTitle').innerHTML = i.join(' ');
                              document.getElementById('rssText').innerHTML =  item.querySelector("description").firstChild.textContent;
                           });
                        }, 1000);
                     }
                  return '<div id="rssFeed" style="white-space:pre-wrap;text-align:left;padding:10px;overflow:scroll"><div id="rssTitle" style="margin-bottom:10px"></div><div id="rssText"></div></div>';
               }
            },

Basically what I will try to do with that sensor is to add those feed refreshed with a configurable interval.
I use that already by check the input boolean (on/off) AND a refresh interval. The latter using the last_changed as the date to check

I"ll see what I can come up with :slight_smile:

Hi @Romkabouter,
i’d be interested to see what you come up with - as i’m failing miserably :rofl: :rofl:
may also have a look at adding your in, thanks for the config.

Jason

So, a question on what you want to achieve.
The sensor only updated once per hour, so to refresh on an interval smaller than 1 hour is not very useful.

Can you explain a bit more on what you need?

Hi @Romkabouter, looking at your custom tile, i don’t think it will work for me.
What i’m trying to do is to iterate through the feedparser plugin, as i have the news feed in there.
Then i’d like a tile to show the news item, and then on an interval change to the next entry and so on…
It could also be a marquee style tile if possible to scroll through the news articles horizontally?
Just toying with it at the moment, but wanting to have a nice way of showing the latest news stories on the main page.
Cheers
Jason

Yes, I know that tile is not what you want.

Thanks for the info, I have setup the sensor as well so I will fiddle around a bit with it :slight_smile:

This works for me, except the description. But the sensor does not return it, so probably an issue with the sensor.

I have created an input_number helper. to check for the last_changed time and the state is the index of the feed to show.
This is needed, because I do not know how to keep track of variables in another way.

            {
               position: [0,0],
               type: TYPES.CUSTOM,
               id: 'sensor.bbc_news',
               width: 3,
               height: 3,
               customHtml: function(item, entity) {
                  var d = new Date(this.$scope.states['input_number.bbcnews_index'].last_changed);
                  d.setSeconds(d.getSeconds() + 5); 
                  if (Date.now() > d) {
                     this.$scope.states['input_number.bbcnews_index'].last_changed = Date.now(); 
                     var i = Math.round(this.$scope.states['input_number.bbcnews_index'].state);
                     setTimeout(function(){    
                        document.getElementById('rssTitle').innerHTML = entity.attributes.entries[i].title;
                        document.getElementById('rssText').innerHTML =  entity.attributes.entries[i].description;
                     }, 500);
                     i++;
                     if (i > 2) {i=0;}
                     this.$scope.states['input_number.bbcnews_index'].state = i;
                  }
                  return '<div id="rssFeed" style="white-space:pre-wrap;text-align:left;padding:10px;overflow:scroll"><div id="rssTitle" style="margin-bottom:10px"></div><div id="rssText"></div></div>';;
               }
            }

This might get you started

Feedparser:


sensor:
  - platform: feedparser
    name: BBC News
    feed_url: "https://feeds.bbci.co.uk/news/rss.xml"
    date_format: "%a, %b %d %I:%M %p"
    show_topn: 3
    inclusions:
      - title
      - link
      - description
      - image
      - language
      - pubDate

On my laptop, only the title, link and image are returned so there might be an issue with the sensor

trying to get my garage action to work … the cover works when making a service call cover.toggle via ha, any suggestions?

 { position: [0, 1], type: TYPES.CUSTOM, title: 'Garage Door', subtitle: 'Left', id: 'cover.left_garage_door',
                    states: { closed: 'Closed', open: 'Open' }, icons: {open: 'mdi-garage-open',closed: 'mdi-garage'},
                    action: function(item, entity) {
                            Api.send({ type: 'call_service',
                                       domain: 'cover',
                                       service: 'toggle',
                                       service_data: { entity_id: 'cover.left_garage_door' }
                            });
                    }
                  },

Hi All - apologies if this has been asked before - I did a quick search, but couldn’t find anything - I have the following switch - and I have included a function to show the temperature of the room as a state:

{
                            position: [2, 0],
                            type: TYPES.SWITCH,
                            width: 1.25,
                            height: 1.25,
                            state: function (item, entity) {
                                return ('' + this.states['sensor.0x00158d0005404f4b_temperature'].state + ' ' + this.states['sensor.0x00158d0005404f4b_temperature'].attributes.unit_of_measurement);
                            },
                            filter: function (value) { // optional
                                var num = parseFloat(value);
                                return num && !isNaN(num) ? num.toFixed(1) : value;
                            },
                            id: 'light.games_room',
                            title: 'All Lights',
                            subtitle: 'Games Room',
                            states: {
                                on: "On",
                                off: "Off"
                            },
                            icons: {
                                on: "mdi-lightbulb-on",
                                off: "mdi-lightbulb",
                            }
}

But the temperature is showing as ##.## - is there any way to round the value down to ##.# - similar to the temperature tile shown here:

{
   position: [0, 0],
   type: TYPES.SENSOR,
   title: 'Outdoor',
   id: 'sensor.outdoor_temperature',
   unit: 'C', // override default entity unit
   state: false, // hidding state
   filter: function (value) { // optional
      var num = parseFloat(value);
      return num && !isNaN(num) ? num.toFixed(1) : value;
   }
}

Many Thanks

You can simply use COVER or COVER_TOGGLE tile type.

additional info: i’m getting the follow error in the debugger console

“ReferenceError: Api is not defined”

that was easy! not clear why api.send doesn’t work …

Hi - I’ve used your code as a starting point - loaded the sensor in HA and copied the config.
In Tileboard add the config for the tile - the tile is clear with with only the number of feeds showing and nothing else
Any idea why ? - or if I missed something.


Any help will be appreciated
Many Thanks

It is now this.apiRequest({ ... });

Sorry another question - is it possible to break a state into 2 lines? - I have the following sensors which I am showing as states (temperature and humidity) - but I would like them one under the other rather than in a single line:

state: function (item, entity) {
                                return (this.states['sensor.0x00158d00054046f0_temperature'].state + ' ' + this.states['sensor.0x00158d00054046f0_temperature'].attributes.unit_of_measurement + ' ' + this.states['sensor.0x00158d00054046f0_humidity'].state + ' ' + this.states['sensor.0x00158d00054046f0_humidity'].attributes.unit_of_measurement);
                            },

States

Many Thanks

This is the step I’m missing - help./ how to on this please
Thanks

What does the console say? F12 in your browser, so you can see an error.

You might need to set the setTimeout to a higher value, on my old ipad I have it on 2000
This is because tileboard needs to render the page first (the return statement).
If you try to use document.getElementById before the page is rendered, there should be some error in the logging.

Sure, just google “home assistant helpers”

You must add input_number: to your config yaml and then you can add them in the UI via settings->helpers

Add <br /> in one of your spaces

state: function (item, entity) {
    return (this.states['sensor.0x00158d00054046f0_temperature'].state + ' ' + this.states['sensor.0x00158d00054046f0_temperature'].attributes.unit_of_measurement + '<br/>' + this.states['sensor.0x00158d00054046f0_humidity'].state + ' ' + this.states['sensor.0x00158d00054046f0_humidity'].attributes.unit_of_measurement);
},

probably works, did not try.

Afraid not