TileBoard - New dashboard for Homeassistant

I’m have a door entry variable and event configured like above that gets triggered when motion is detected in my driveway. This works perfectly. I want to do the same thing but instead of an event triggering the popup, I want a tile click to trigger the popup. I’ve tried using a custom tile to trigger openDoorEntry() using the same door entry variable as with the event but I get no popup. Is this something that should be possible? It’s been a long time since I used javascript regularly so I may be missing the obvious but any suggestions on how to do such a thing with TileBoard?

You don’t need anything for the tile action, just define the tile as TYPES.DOOR_ENTRY:

You can also define tiles withing the popup as in the example above. In my case, I have a tile to open the gate, toggle outdoor lights and start audio via intercom.

Thanks. I’m probably going about this the wrong way.

Here’s the problem I’m experiencing. I have 16 cameras plus a half dozen animated weather gifs that I update every 5 minutes. I’ve tried serving the gifs from from hass as local files and as cameras. I’ve tried serving the 16 cameras as mjpeg through hass using ffserver to convert the rtsp streams to mjpeg and I’ve tried to have hass access the rtsp stream directly using ffmpeg. When run either way from Linux, hass uses a lot of CPU, quickly uses up all available memory, responds very slowly and the OS kills eventually the process due to OOM. When I run this way from Windows, I don’t have memory consumption or CPU issues but hass soon responds very slowly to the point where it begins throwing timing and other errors and warnings and stops working.

Even when I remove all the rtsp/mjpeg cameras, I still see memory creep up with the gifs. Once I disable all cameras, hass remains stable.

What I’ve been experimenting with is accessing the gifs and cameras directly from the the browser using tileboard and completely bypassing hass. For the gifs, I’d like to have a smaller animated tile (which I can do now) but I want to be able to click on it and have a popup open with a larger view of the gif or another gif. For the cameras, I’d like to have a page with 8 tiles on each side with a large camera tile in the middle. The 8 tiles on each side would only have a still image or just text. What I click on one of the 16 tiles, the large camera tile in the center will display an mjpeg stream of that particular camera. My thoughts for that is I use an iframe tile and dynamically change the contents of the iframe tile. I can display an mjpeg stream in an iframe with no issues but I’ve been unable to dynamically change the stream. This is probably due to my last training class in javascript having been 15 years ago but I may just be trying to do something that’s just not possible. Any thoughts on this?

I guess you could just use a CAMERA tile and override the URLs via filter: function() {…} returning path to mjpeg streams.

A while back, I had tried using TYPES.CAMERA with a hass camera entity but only got a blank screen. You mentioned to try using TYPES.CAMERA_THUMBNAIL instead with a refresh so I went that route. I saw your other post when I first started using TileBoard about using filter: function () with a custom URL but when I tried it today, I was getting a blank screen again so I figured I’d try other options. It then dawned on me that I had stopped ffserver earlier while troubleshooting the OOM issues and had forgotten to restart it. I just restarted it and gave this a try again and it works great.

Thank you again and thank you for giving us such and awesome piece of software!

1 Like

Really loving this, it’s so responsive! I want to make a good music page to control the sonos so I don’t have to switch apps, what’s the best way to call ungroup which is a service? Also, if I wanted to list the sources so they could easily be tapped what’s the best way for that?

Hi, my server is running on raspberry pi, when i try to access tileboard from my computer by typing ip address e.g. “192.168.1.100:8123/local/tileboard/index.html” it take me to “http://localhost:8123/auth/authorize?client_id=blabla” with page saying “Not implemented”

Please let me know how to fix it? .

Try Firefox browser or clear Chrome’s cache.

I don’t have any experience with Sonos but calling a service can be done via CUSTOM tile i.e.

action: function(item, entity) {
			Api.send({
				type: 'call_service',
				domain: 'media_player',
				service: 'sonos_unjoin'
				service_data: {
				  entity_id:  '...'
				}
			});
		}

Thanks, forgot to change serverUrl. Its working now.

Quick update. Directly accessing the mjpeg streams and animated gifs significantly improved performance and I have had no issues with memory, cpu or slow response. Just having a single hass camera pointing to an animated gif of only 2 MB in size was causing 20 MB+ network activity spikes every second when accessing from TileBoard. Once I changed to directly access the gifs from TileBoard, network activity is now near zero when not streaming or refreshing content. I haven’t tested this in hadashboard but I suspect the same problem exists there as I was having the same problems with memory, cpu and sluggish response.

1 Like

Has anyone had any luck getting a calendar to display? If so, I’d sure appreciate sharing the code. If not, I will try to take on this endeavor as an entry into the world of js and css. I find for myself that a calendar is a very important piece as I am attempting to use tileboard as a subsitute for the raspPi magicmirror project. I feel this could be a better option, but the majority of importance in the magic mirror is to display a calendar with the day’s meetings, invitees, and upcoming projects or tasks for the week.

As a start you could use TEST_LIST tile to display a list of upcoming events.

hey, thanks for the response. Do you have a link to documentation on TEST_LIST? I searched your repo, and thank you, btw!, and could not find reference to it. Ill test around on that tile to see what i find out. thanks.

Basically, all the options for all tiles are in the main README but we also made some tile examples page which you might find useful:

I would be nice to include any entity in the header but the &entity.state does not work here. Would it be hard to add this feature in?

I’m not sure what you mean, you can reference any entity you wish:

               fields: {
                  temperature: '&sensor.outdoor_temperature.state',
                  temperatureUnit: '°C'
               }

I want that to show up in the header, I don’t see any documentation on how to include random fields in the custom html header component. I want to show the temperature and some custom calendar items in the header so it’s visible on all pages.

Custom header allows you to set arbitrary HTML which you need to form yourself. You can either access state of the sensor you need via this.states['...'].xxx or use a helper function this.parseFieldValue('&sensor.XXX')

Sorry, I’m not used to Angular. I tried putting those in the html field but it doesn’t process it, it just renders it as is.

header: { // https://github.com/resoai/TileBoard/wiki/Header-configuration
  styles: {
     padding: '30px 130px 0',
     fontSize: '28px'
  },
  right: [
      {
        type: HEADER_ITEMS.CUSTOM_HTML,
        html: "this.parseFieldValue('&sensor.pws_feelslike_f')",
    },
  ],