[Tutorial] Building a dashboard with CSS

Thanks for writing this, it's been very informative for a guy new to css. I have reproduced everything you did, and learned a lot along the way. One problem I have when I try to add another tile it is not assigned a number, rather it says "Edit tile ID: NaN" and it does not seem to be a number, just NaN. Tiles 0 and 1 and 2 are there where I was expecting tile 3, 4 ect. I must be missing something.

Screenshot?

NaN mean

Hmm, never seen that before.
Is the device still in the dashboard authorized?

I couldn't figure it out, so I abandoned that dashboard and just started all over. This one seems ok, so far I haven't had that same problem. Thanks for your help.

2 Likes

Hi there, I love this! It’s so cool. I didn’t have a floor plan available so I had to make one which was a task, but that’s finally done and In my dashboard but I have a slight issue.
Well, two.
One: so I enter my size for the tile containing the image, and it ends up being way too huge. Is there somewhere I’m missing where you defined the size of the layout to make everything sit the way it is on yours? I even tried your exact measurements and still the photos boundaries go way past the menu and title bar set as instructed (10x10).
Secondly: and i might be getting ahead of myself but is there a way to make the photo stop from going to full screen whenever someone accidentally misses a lightbulb or something similar?

Thanks again!!

The backgound image just needs to be on one tile, and the size you set with the properties.
It should respect your values.
Your second question: I dont know. Might have to experiment with that one.

Playing with the z-index properties and slotting a blank and transparent text tile just on top of the image (but under the devices) does the trick.

1 Like

How do you "lock" the dashboard? I didn't see that explained anywhere.

Apps > Dashboards > > advanced settings.
Here you will find the lock dashboard toggle.

2 Likes

Ah OK. I was looking in the Advanced Options of the Dashboard app, not in a specific dashboard's Advanced Options. Thanks!

2 Likes

I just started reading this thread, but it seems there is a problem with one of the very first steps. The paint.net site is down.

Have you tried something similar that works?

Paint.net is the name of the software package. You can git this freeware package at: https://www.getpaint.net/

1 Like