Announcement: HADashboard v2 Beta!

Thatā€™s awesome! Would be an idea Yeah

Thatā€™s expected behavior - what is the contents of compiled/javascript/default/<you dashboard name>_init,js?

Also, are you getting any errors on your javascript console?

just got it installed on windows no need to modify anything works out of the box without a problem. Install went much easier than the 1st hadashboard version i was using. Now i have to start rebuilding my old dashboard in the new version.

So windows install has no problems as far as i could see in case anyone is using windows as well.

3 Likes

@Tyfoon I posted a working copy of my custom skin at:

https://github.com/arraylabs/hadashboard-skin-clear_sky

Some basic details in the readme file, and zip download available in the releases area.

Got it running on my android tablet / converted :slight_smile: Itā€™s not completly fullscreen as i have not found a way to hide the lower bar in android but seems to display the same as hadashboard v1

i do notice that the obsidian theme does not display units with my dashboard while other themes do, not sure if itā€™s due to me having unit_style tags to change font color and size (it was a bit too big for the tile and only changing size, changed the color somehow in the default skin)
edit: itā€™s due to me adding font-size and color tags with unit_style in the widgets i removed them and it displays fine now in the skins. I do think the default font size for the sensors might be a bit too big but iā€™ll make a copy of a skin and modify the values there for my own needs so i have a seperate skin

3 Likes

Installed the Dashboard and managed to get it up and running using the instructions without any issues. Few things:

  • is there a reason that aiohttp should be the specified version? Iā€™ve newer version and seems to work fine with it.
  • the weather widget shows the data using imperial units although the actual values shown in HA are SI (metric) units. Iā€™d expect that Iā€™d reference the same unit format as the darksky api is called with. (See ā€˜unitsā€™ from here: https://darksky.net/dev/docs/forecast)
    -I canā€™t find a ā€˜gaugeā€™ style widget from the documentation, but some people have posted screenshots that make me think there might be some available? Iā€™d like to show for example humidity as value but also as gauge (0-100%) and similarly power (0-20kW) with possibly some color changes within the range (for example for power 0-8k is green, 8k-15k yellow and above would be red). Similar as Gauge outputs on Node Red dashboard would be super-cool :wink:

It was the latest when I started work, but later should be fine, Iā€™ll change the docs and installer.

Iā€™m going to rework the Weather widget soon, Iā€™ll do what you suggest - I am planning on doing that for other devices too - sensors should get the units from HA rather than have the user specify them.

The old version of HADashboard had a meter widget which is probably what you have seen.There isn;t one yet in v2 but it is coming for sure :slight_smile:

1 Like

The contents are below. I do not get any javascript errors in my browserā€™s console.

$(function(){ //DOM Ready

$(document).attr("title", "HADashboard");
content_width = (120 + 5) * 8 + 5
$('.gridster').width(content_width)
$(".gridster ul").gridster({
    widget_margins: [5, 5],
    widget_base_dimensions: [120, 120],
    avoid_overlapped_widgets: true,
    max_size_x: 8,
    shift_widgets_up: false
}).data('gridster').disable();

// Add Widgets
var gridster = $(".gridster ul").gridster().data('gridster');



var widgets = {}
// Initialize Widgets


// Start listening for HA Events

ha_status('ws://192.168.1.5:5050/stream', "HADashboard", widgets);

});

I copied your dash file exactly and got 2 widgets. The only way you would be seeing what you are is if you had ommited or misspelled the layout directive.

Looks nice. Quick question though. What did you use to get the ā€œGitā€ command to work on your android tablet.

This is a web application that runs on a server, and serves the dashboard to a tablet, no need for any code on the tablet.

Oh, well I feel stupid now.

Ok, will look more into this when I get home. I was trying to program my tablet on break.

Thanks!

1 Like

Did you mange to use material design icons? If yes how it was like icon: md-fire or icon: mdi-fire?
I couldnā€™t get it working for switch widget as shown below:

fireplace:
  widget_type: switch
  title: Fireplace
  icon: mdi-fire
  icon_on: mdi-fire
  icon_off: mdi-fire
  entity: switch.fireplace_switch_9_0

I just tested and mdi-fire is working fine for me. Try removing the line ā€œicon: mdi-fireā€ as that is not a valid option.

switch

A widget to monitor and activate a switch

Mandatory Arguments

  • entity - the entity_id of the switch

Optional Arguments:

  • title - the title displayed on the tile
  • title2 - a second line of title text

Cosmetic Arguments

  • icon_on
  • icon_off
  • widget_style
  • icon_style_active
  • icon_style_inactive
  • title_style
  • title2_style
1 Like

Thanks a lot. I found the issue. I had widget correctly defined but in the layout I was using entity id rather than widget. :frowning:
It is working now thanks a lot.

Now I will have to figure out how to have color changed of that fire icon when it is on as material design has only one icon fire no colors. I want to keep HA and Dashboard same look and feel.

I like the customization of icons in AppDaemon Dashboard to be different from HA but it would be really nice if we could just reuse the icons which are already customized in HA, so basically same UI in both applications, not sure though itā€™s possible or not.
Thanks again.

Change the color here:

icon_style_active
icon_style_inactive

If you for instance wanted the color to change to red when it is on, do this:

icon_style_active: ā€œcolor: redā€

It would add a bit of overhead in processing as AD would have to cycle through each entity to figure out what icon was used in HA and if a customization was in place.

Personally I like the flexibility - super important in my opinion - of using Font Awesome icons. Most of the skins in the beta use a combination of MDI and FontAwesome icons. Having access to both is a critical improvement on HA, which is limited to MDI only.

1 Like

Yay! It worked! Learnt something new.
Thanks a lot.

1 Like

As @aimc said, the SimplyRed does this already, changing the color of the background from light to dark depending on the time of day. But I am working on a similar script to change the background based on the weather and hope to get it finished soon. When I do, it will probably be in a new skin.