Custom Desk Calendar and Photoframe with Dakboard/Tileboard Integration

tylerdanielson · February 6, 2020, 3:09pm

I really liked Dakboard as a quick glance calendar and photoframe, but absolutely love HA and the Tileboard theme. I decided to stretch my web programming legs and overlay the two for a combined touch panel that gives me the calendar I want with the control of my house. Pressing the second menu option, I can also expand my controls

[sorry, can’t add an image becaues this is my first post]

Now I have a quick glance of the time and calendar and have quick control of the devices I need. I also built a context-based option so if the TV in the house is on, I see power and volume controls. There is also one for Spotify controls.

For anyone that wants to know how I did it, I created a custom html page, hosted in WWW, with the following code:

<html><head>

<style>
html, body {
    height: 100%;
    margin: 0;
    background-color: black;
}

iframe{
    width: 100%;
    height: 100%;
    border:none;
    position: fixed;
    left: 0;
}

#bottom_frame{
    height: 100%;
    bottom: 0;
}

</style>
</head>
<body>

<iframe id="top_frame" src="https://dakboard.com/app/screenPredefined?p=MYDAKBOARDADDRESS"></iframe>
<iframe id="bottom_frame" src="http://ha.ip.add.ress:8123/local/tileboard/index.html"></iframe>

</body></html>

This is the page you set your touch panel to boot to…

I then created a file “custom.css” under tileboard/styles/

In this new css file, I added the following to make the top layer transparent:

html, body{
    background-color: transparent
}


.pages-menu.-left {
  width: 75px;
  left: 0;
  bottom: 0;
  top: 60%;
}

This also allow me to adjust the position of the icons to get to my additional pages so that they don’t overlap with my calendar.

Finally, I downloaded and added a transparent PNG, link and uploaded it to tileboard/images/ as transparent.png. Then, replace the background of your front page in your tileboard config file with this new image:

pages: [
      {
         title: 'Main page',
         bg: 'images/transparent.png', //<---this one
         icon: 'mdi-home-outline', // home icon
         groups: [
            {
               items: [

After all is said and done, you should now have to overlapping applications!

Happy to help anyone that needs it!

This is my first time posting, so hopefully you all like it

tylerdanielson · February 6, 2020, 3:10pm

More images!

tylerdanielson · February 6, 2020, 3:10pm

And the second screen:

gwalker88 · April 3, 2021, 1:47pm

Thanks, @tylerdanielson, looks fantastic!

I know this post is over a year old, but I’ve been knocking about a bunch of ideas on how to show a similar view after recently migrating from Dakboard+SmartThings to a setup based on Hubitat+Home Assistant. I was really hoping to find something pre-existing in Lovelace/HACS that looked as good as Dakboard’s calendar view, but I cannot find anything with a nearly as nice of a week-at-a-glance view that Dakboard provides. So, it’s back to Dakboard+Hubitat+Home Assistant because, well, I like pretty things in my house.

I am running from a RPi4B stuck to the back of a TV in my kitchen. The RPi output goes straight into an HDMI port of the not-so-smart TV. I already run a similar “wrapper” web page to provide navigation for ActionTiles and tie together other functionality not suited to displaying in a AT tile, so this approach is already familiar.

(For this use case, I don’t need/want touch interfaces, just an auto-rotate of 2-3 pages. Not sure if you’ve cracked that nut or seen a snippet of JS that will do that easily.)

Did you do anything special to avoid login prompts for the HA views? I have configured trusted network login on HA. Really insecure, but somebody would have to hack into my network first. But would prefer a token-based login URL if such a thing exists.

Thanks again for sharing!

tylerdanielson · April 5, 2021, 2:16pm

Thanks @gwalker88! I would definitely recommend looking into Tileboard . It’s what I used to do the layering, because I can set Dakboard as the background of my page. I did find that Dakboard recently updated some of their security, so you may also need to install a Cross Origin Changer (link). It’s what I did to get it to load. You will also need to find the custom CSS file for Tileboard and commend it out: /*background-color:#1a4957;*/

Tileboard supports external commands from HA, so you could write a loop in HA that tells it to change pages every few minutes or so, and just cycles. I haven’t played with it since I’ve moved, but definitely want to get back into rebuilding it. Let me know if this helps or you need further clarification on something. Just wanted to get you started

Edit: I meant to add, that tileboard supports an AuthToken that you can embed on the page and use it to auto-login. Not the most secure, but it sounds like you’re okay with that lol.

gwalker88 · April 5, 2021, 10:49pm

Thanks for the additional tips, Tyler. I’ll definitely give this a go when I get some time later this week.

I was already anticipating some issues mixing http and https sites. I’ve run into this before when including content in iFrames, whether it be my own local wrapper server, ActionTiles, or what have you. Your link to the Cross Origin Changer just might save me hours of grief trying to figure out how to get this to work easily. My HA setup is behind a double-NAT, so getting DDNS and self-signed certs for an RFC 1918-based web address is non-trivial.

gwalker88 · April 19, 2021, 10:46pm

Tyler, just wanted to let you know that I tried this out, and it works!

I haven’t customized the TB pages yet, but I got the expected result with the transparent layering. Just have to learn the JS customization stuff to do so, but that shouldn’t be too hard, even for me.

The README.md on GitHub points to the HA Community Forums, but it’s a single thread that’s closing in on 4,000 posts. Before I go hunting through that beast for the nuggets I’ll need, (tougher when you don’t know what you don’t know), if you care to post any links that you found useful in learning about TB, that would be great. In the meantime, I’ll start Googling.

Thanks again, I can already see that this is going to look Ab Fab!

tylerdanielson · April 19, 2021, 11:09pm

That’s awesome! So glad you got it working! As for TB, any and all setups I’ve created I’ve altered from their default templates: TileBoard/TILE_EXAMPLES.md at 60fb562b5b52cfdb4d1a3f8a464203c403846027 · resoai/TileBoard · GitHub

This should help cover 90% of what you are looking to do. I also started building this: TileBoard Configurator – Single Box Solutions, which might help you to get started with the grid layout when getting started.

Let me know if I can help in any other way! Always happy to help a fellow builder!

gwalker88 · April 20, 2021, 1:46pm

Thanks, Tyler. I’ll watch with interest as your Configurator evolves. It looks like a promising solution that could open up TB to the masses that don’t know anything about JS, and want to know even less.

I will say that it’s kind of sad/funny that to get the layering, we have to download a 14 kB file (transparent.png). Just found this thread that seems to indicate that we could just specify

background-color:#0000;

in modern browsers instead. (Note the extra ‘0’ for opacity.)

gwalker88 · April 20, 2021, 2:05pm

Yeah, you probably knew all that.

It’s probably a limitation of feeding TB the transparent background with the JS bg property that is expecting a file that made you do this, without getting into hacking the TB code itself?

tylerdanielson · April 20, 2021, 7:26pm

Your comment got me digging into this. My initial thought was that there had to be a background for it to not be present. After some digging into the final result, I noticed that all it did was set a CSS file of background-image: url(#background#), which means, if you set the url to “none” it actually uses the CSS function to delete it.

TL;DR, set your config.js code to read:

bg: 'none',

and you will no longer need a transparent background.

gwalker88 · April 20, 2021, 8:27pm

Confirmed. And I un-commented the background-color entries in the styles/*.css file as well just to be sure–it still works.

Keeping that transparent.png file around, though, just in case I need it for some reason I can’t figure out in the future.

gwalker88 · April 21, 2021, 3:26pm

Tyler, as you work on this Configurator project, can I make a suggestion? In your initial deployment, you specified an offset of 75px from the left for the menu. I would hope that your drag-and-drop solution is more suited to flexible screen sizes, so that I don’t need to have to re-do a config.js for every resolution & aspect ratio.

For example, today my main display panel is a 1920x1080 HD TV monitor, but I may replace that with a 4K model, so any absolute px specifications would be messed up. And if I can use the same config.js with an Android tablet that maintains the 16:9 (or 16:10) aspect ratio, but at different (read “unique”) resolution, that would be helpful as well. Then there’s the iPad family, which tend to be more 4:3.

Phone screens are a whole other beast, so I would expect to need a separate layout for these if using TileBoard for them, although I probably would just use standard Lovelace or ActiveTiles to keep it simple.

Cheers!

jpleite · April 24, 2021, 6:53pm

Hi @tylerdanielson . Great work. I was trying a similar approach but have a problem. You said you created a custom html page, hosted in WWW, to display both Dakboard and TileBoard on iframes. It happens everything works great when loading the page locally on a computer. Every time I host it in a webserver Dakboard does not load (I suppose it has to do with certificates mismatch). How did you solve that? Thanks

tylerdanielson · April 26, 2021, 4:32pm

It’s actually Cross Origin Resource Sharing error. I have tried to nail now the exact issue, but the easiest fix I found was to install a plugin that ignore it (Moesif Origin & CORS Changer - Chrome Web Store)