Wall Mounted Dashboard (now known as HADashboard)

OK, I had some time to go back to the CSS refactoring again today to fix the issue where the application doesn’t work if you don’t have the optional CSS override files (oops…). Unfortunately SASS limitations make it slightly less elegant, but it’s still pretty easy. The branch has been updated. I’m going to open a pull request. New instructions on customizing (from the README):

If you want to customize the styles of your dashboard and widgets, there are two options:

A. You can edit the application.scss file (and the individual widget .scss files) directly (not recommended; if you pull down updates from the master repository, your changes might conflict/be overwritten)

B. Create override files (recommended)

  1. Create a couple of additional files in the assets/stylesheets directory: _application_custom.scss and _variables_custom.scss.
  2. Open _application.scss and go to the bottom of the file. Uncomment the @import line.
  3. Open _variables.scss and go to the bottom of the file. Uncomment the @import line.
  4. Write your own SASS styles in _application_custom.scss (for general style customization) and _variables_custom.scss (for colors). You can customize those files without worrying about your changes getting overwritten if you pull down an update. The most you may have to do, if you update, will be to uncomment the @import lines again from steps 2 and 3.

_Note: The _variables.scss file (and your customizations from _variables_custom.scss) get imported into nearly every widget’s SCSS file, so it is a best practice to define varaibles for colors in _variables.scss or variables_custom.scss and reference those variables in the widget SCSS.

How do i do the pull request? Sorry, I am not a programmer. Will take a look when I come back home today.

Just quickly learned how to use github and not sure if this is the correct way to do it, but here you go.

This is a dumb version just to get the camera widget to work, many things is hard coded, including the camera api link, http and https, so pleae improve it if you can. I am not a programmer, just getting lucky to get all the code working.

Hi,

What browser are you using in iPad in full screen mode for HA?

@kenshin thanks! i’m going to test it with my cameras. After a few changes i got it working but using the JPEG service from the ipcam.

Thanks!

I use fully kiosk browser for android.

Yes, I also used the link from my ip cam to get the jpg to test the script then I decided to use the api from HASS as not all my cameras support the jpg from weblink.

Thanks - this is great work!

I’ll need to make a few changes and I don;t have a camera to test on yet, but I will order one shortly then add this into the dashboard.

Hi,

How can I use Hameter without round the value?

Thanks!

I am using Hameter also and it gives the whole figure.

how many figures do you want to see? maybe you need to make the character smaller.

Thanks @ReneTode,

I have made a “haenergymeter” widget for show energy meter with diferent background colour based on the value of energy consumption:

The code: https://github.com/gonzalezcalleja/haenergymeter

2 Likes

Huge thanks for this project! Absolutely brilliant!

Two questions: is it possible to get a 24 hr clock? I tried to edit the clock.coffee but nothing happened, even after restart (and re-run) of the Docker container. I’m now re-building the container but it takes forever and a day so I’d rather not be doing that every time I want to change something (I’m not well versed in neither Linux nor programming so I’m probably missing something obvious here). :wink: Second question, is it possible to use other icons than Font Awesome and how would I go about finding/adding those?

i changed the clock.coffe and that resulted in a 24 hours clock.
so that should work.

So perhaps it’s something with me running this in Docker? Rebuilding it now with --no-cache to see if that was the issue.

i dont have docker, so that could be the problem.
cache can be a pain in the ass sometimes.

Hi aimc,

Is it normal that each time after dashing restart, the dashboard interface require 10+ secs to load again? The problem I got is that I have a routine to restart the Raspberry pi server everyday, so who ever try to use the dashboard the 1st time after the server restart will need to wait for the page to load before they can turn on any light.

It will be good if this process can be forced behind the scene as soon as dashing is restarted.

Thanks.

This is expected behavior - Dashing recompiles all the CSS the first time it is started. I am not aware of an easy way to fix this in the product itself, but you could try running a wget command against your dashboard shortly after startup to get the process running. You should be able to automate this via startup scripts or a cron job.

[quote=“kenshin, post:517, topic:1896, full:true”]
It works. I put wget --spider 192.168.0.100:3030 in the startup script. Thanks you. [/quote]

Actually the above didn’t work at the end, looks like the wget doesn’t trigger the page reload process, thinking to use schedule reload from here https://github.com/aelse/dashing-reload

1 Like

Andrew - been falling behind on updates and was wondering how you determine your current version? I want to get back to the latest version but wanted to see if there were any breaking changes I missed before I did it.

Sure - check the HISTORY.md file. If that doesn’t exist (I only added it a few releases ago) the history will be in the README.md file at the bottom.

1 Like

Thanks, buddy.

1 Like

Just pulles your cam widget from github… could u maybe explain further how to configure a cam in there? like an example? I have a pi running with motioneyeos through hass and it works like a charm now i would like to have dashboard with this cam stream.

You can also PM me if u want.

Have a great day!