Announcement: HADashboard v2 Beta3!

Yes I have seen that a couple of time, i think it is browser caching, I am planning to fix that by adding a meta to disable it. I don;t usually see it because I run my browser in dev mode which disables caching or I would have fixed it by now.

Here is an entire variables.yaml file with the missing elements and alphabetized widgets list.

# SimplyRed Skin for HADashboard v2
# Version 1.0
# Date: 03/02/17
# Author: Robert Pitera
#
# Update:
# 03/28/2017 - Chip Cox - Added other styles to support Beta 3.  Also alphabetized widget definitions.  Originally based on simplyred but heavily modified now.
#
# Custom head includes - should be a YAML List, e.g.:
#
#head_includes:
#  - some include
#  - some other include
#
# Text will be included verbatim in the head section of the doc, use for styles,
# javascript or 3rd party css etc. etc.
#
# It is your responsibility to ensure the HTML is correct
#

#
# Script below changes the background color throughout the day starting at a light
# gray and getting progressively darker towards night.  Be aware that if you remove
# it, you will end up with a white background so plan accordingly if this is a problem.
#
# The meta tag jsut above this refreshes your dash once an hour so you can see the
# effect of the script without manually reloading the dashboard.  The content value
# is in seconds so if you want it shorter or longer you can adjust that value
#
#

head_includes: 
  - <meta http-equiv="refresh" content="3600">
  - <script type="text/javascript" src="/css/simplyred/js/timer.js"></script>
 
#
# Custom body includes - should be a YAML List, e.g.:
#
#body_includes:
#  - some include
#  - some other include
#
# Text will be included verbatim in the body section of the doc, use it for JavaScript
#
# It is your responsibility to ensure the HTML is correct
#

body_includes:
 - <! body tags go here ->

#
# Styles
#

white: "#fff"
red: "#ff0055"
green: "#aaff00"
blue: "#00aaff"
purple: "#aa00ff"
yellow: "#ffff00"
orange: "#ffaa00"

gray_very_dark: "#333"
gray_dark: "#444"
gray_medium: "#666"
gray_light: "#888"

#Page and widget defaults
background_style: ""
text_style: ""

#These are used for icons and indicators
style_inactive: "color: $gray_light"
style_active: "color: green"
style_active_warn: "color: gold"
style_info: "color: gold; font-weight: 500; font-size: 250%"
style_title: "color: gold; font-weight: 900"
style_title2: "color: $white"

#
# Simply Red Custom Styles
#

# Removes the 3D effect on the widget
no_shadow: "box-shadow: none"

# Simple gold blur effect on text, might not work in some cases if used with goldbg or blackbg
textblur: "color: inherit; text-shadow: 3px 3px 8px #BF7F00, -3px -3px 8px #BF7F00"

# Be aware that using either of these alternate widget styles also turns off the hover/button press effects!!
goldbg: "$no_shadow; background-image: url(/css/simplyred/img/goldtexture.jpg); border: ridge 4px gold; border-radius: 10px"
blackbg: "$no_shadow; background: black; border: 5px solid transparent; padding: 15px; 
 -webkit-border-image: url(/css/simplyred/img/goldgradient.png) 20 round; /* Safari 3.1-5 */
 -o-border-image: url(/css/simplyred/img/goldgradient.png) 20 round; /* Opera 11-12.1 */
 border-image: url(/css/simplyred/img/goldgradient.png) 20 round; border-radius: 10px"

# Widget Default Definitions

alarm_title_style: "color: $blue"
alarm_widget_style: $background_style
alarm_title2_style: $style_title2
alarm_state_style: "color: $white;font-size: 100%"
alarm_panel_state_style: "color: $white"
alarm_panel_code_style: "color: $white"
alarm_panel_background_style: "background-color: $gray_dark"
alarm_panel_button_style: "background-color: $gray_medium"

binary_sensor_icon_on: fa-bullseye
binary_sensor_icon_off: fa-minus
binary_sensor_icon_style_active: $style_active_warn
binary_sensor_icon_style_inactive: $style_inactive
binary_sensor_title_style: $style_title
binary_sensor_title2_style: $style_title2
binary_sensor_widget_style: $background_style
binary_sensor_state_text_style: "color: white; font-weight: bold"

camera_widget_style: $background_style
camera_title_style: $style_title

climate_icon_up: fa-plus
climate_icon_down: fa-minus
climate_title_style: $style_title
climate_title2_style: $style_title2
climate_level_style: "color: white"
climate_unit_style: "color: white"
climate_level_up_style: "color: $gray_light"
climate_level_down_style: "color: $gray_light"
climate_widget_style: $background_style
climate_state_text_style: "color: $white"
climate_level2_style: "color: white"
climate_unit2_style: "color: white"

clock_date_style: "$textblur; font-weight: 900; font-style: bold"
clock_time_style: "$textblur; font-weight: 900; font-style: bold"
clock_widget_style: $background_style

cover_icon_on: fa-car
cover_icon_off: fa-car
cover_icon_style_active: "color: red"
cover_icon_style_inactive: $style_inactive
cover_title_style: $style_title
cover_title2_style: $style_title2
cover_widget_style: $background_style
cover_state_text_style: "color: white; font-weight: bold"

device_tracker_icon_on: fa-user
device_tracker_icon_off: fa-user
device_tracker_icon_style_active: $style_active
device_tracker_icon_style_inactive: $style_inactive
device_tracker_title_style: $style_title
device_tracker_title2_style: $style_title2
device_tracker_state_text_style: "color: white; font-weight: bold"
device_tracker_widget_style: $background_style

group_icon_on: fa-circle
group_icon_off: fa-circle-thin
group_icon_up: fa-plus
group_icon_down: fa-minus
group_title_style: $style_title
group_title2_style: $style_title2
group_icon_style_active: $style_active
group_icon_style_inactive: $style_inactive
group_state_text_style: "color: $white"
group_level_style: "color: $gray_light"
group_level_up_style: "color: $gray_light"
group_level_down_style: "color: $gray_light"
group_widget_style: $background_style
group_unit_style: "color: $gray_light"

iframe_title_style: $style_title
iframe_widget_style: $background_style

input_boolean_icon_on: fa-sliders
input_boolean_icon_off: fa-sliders
input_boolean_icon_style_active: $style_active
input_boolean_icon_style_inactive: $style_inactive
input_boolean_title_style: $style_title
input_boolean_title2_style: $style_title2
input_boolean_widget_style: $background_style
input_boolean_state_text_style: "color: white; font-weight: bold"

input_slider_icon_up: fa-plus
input_slider_icon_down: fa-minus
input_slider_title_style: $style_title
input_slider_title2_style: $style_title2
input_slider_level_style: "color: white"
input_slider_unit_style: "color: white"
input_slider_level_up_style: "color: $gray_light"
input_slider_level_down_style: "color: $gray_light"
input_slider_widget_style: $background_style

label_title_style: $style_title
label_title2_style: $style_title2
label_text_style: "color: $white"
label_widget_style: $background_style

light_icon_on: fa-circle
light_icon_off: fa-circle
light_icon_up: fa-plus
light_icon_down: fa-minus
light_title_style: $style_title
light_title2_style: $style_title2
light_icon_style_active: $style_active
light_icon_style_inactive: $style_inactive
light_state_text_style: "color: $white"
light_level_style: "color: $gray_light"
light_level_up_style: "color: $gray_light"
light_level_down_style: "color: $gray_light"
light_widget_style: $background_style
light_unit_style: "color: $gray_light"

lock_icon_on: fa-unlock-alt
lock_icon_off: fa-lock
lock_icon_style_active: $style_active_warn
lock_icon_style_inactive: $style_inactive
lock_title_style: $style_title
lock_title2_style: $style_title2
lock_widget_style: $background_style
lock_state_text_style: "color: white; font-weight: bold"

media_player_icon_on: fa-music
media_player_icon_off: fa-music
media_player_icon_up: fa-plus
media_player_icon_down: fa-minus
media_player_title_style: $style_title
media_player_title2_style: $style_title2
media_player_icon_style_active: $style_active
media_player_icon_style_inactive: $style_inactive
media_player_state_text_style: "color: $white"
media_player_level_style: "color: $gray_light"
media_player_level_up_style: "color: $gray_light"
media_player_level_down_style: "color: $gray_light"
media_player_widget_style: $background_style
media_player_icon_play: fa-play
media_player_icon_pause: fa-pause
media_player_icon_stop: fa-stop
media_player_media_title_style: $style_title2
media_player_album_style: $style_title2
media_player_artist_style: $style_title2
media_player_units_style: "color: $white"

mode_icon_on: fa-arrows-alt
mode_icon_off: fa-arrows-alt
mode_icon_style_active: $style_active
mode_icon_style_inactive: $style_inactive
mode_title_style: $style_title
mode_title2_style: $style_title2
mode_widget_style: $background_style
mode_state_text_style: "color: white; font-weight: bold"

navigate_icon_active: fa-spinner fa-spin
navigate_icon_inactive: fa-gear
navigate_icon_active_style: "color: $red"
navigate_icon_inactive_style: "color: $red"
navigate_title_style: $style_title
navigate_title2_style: $style_title2
navigate_widget_style: $background_style

reload_icon_active: fa-spinner fa-spin
reload_icon_inactive: fa-refresh
reload_icon_active_style: $style_active_warn
reload_icon_inactive_style: $style_active_warn
reload_title_style: $style_title
reload_title2_style: $style_title2
reload_widget_style: $background_style

scene_icon_on: fa-square
scene_icon_off: fa-square
scene_icon_style_active: $style_active
scene_icon_style_inactive: $style_inactive
scene_title_style: $style_title
scene_title2_style: $style_title2
scene_widget_style: $background_style
scene_state_text_style: "color: white; font-weight: bold"

script_icon_on: fa-th-large
script_icon_off: fa-th-large
script_icon_style_active: $style_active
script_icon_style_inactive: $style_inactive
script_title_style: $style_title
script_title2_style: $style_title2
script_widget_style: $background_style
script_state_text_style: "color: white; font-weight: bold"

sensor_title_style: $style_title
sensor_title2_style: $style_title2
sensor_value_style: $style_info
sensor_text_style: "color: $white; font-size: 100%"
sensor_unit_style: "color: gold; font-size: 95%"
sensor_widget_style: $background_style

switch_icon_on: fa-circle
switch_icon_off: fa-circle
switch_icon_style_active: $style_active
switch_icon_style_inactive: $style_inactive
switch_title_style: $style_title
switch_title2_style: $style_title2
switch_widget_style: $background_style
switch_state_text_style: "color: white; font-weight: bold"

weather_main_style: "color: gold; font-size: 90%"
weather_unit_style: "color: gold; font-size: 90%"
weather_sub_style: "color: $white"
weather_widget_style: "$blackbg"

sure, i am interested. not exactly what i need to wake up in the morning, but good to manage vacation time and things like this

Has anyone had luck in getting the camera widget to work? I cant seem to get it right.

did you try with your local address without token?

Hi Folks

Im just starting out putting cameras into my dashboard i have them set at 3x3, however i get white borders around the images. Is there anyway i can chagne this to suit the resolution of the video streams?

Cheers

try setting them to other formats like 3x2
i dont know why you get white borders, mine are at the widget format.

ive tried various formats, however i cant get it right. is there a way to auto size to shrink the borders? this is my code

shed_camera:
widget_type: iframe
title: Shed
refresh: 300
url_list: - http://user:[email protected]/Streaming/channels/2/preview

Do i need to add anything to it?

thanks

aha, your not using the camera widget.
you are using an iframe and show an url.
that means you show a webpage and that has white borders.

2 options:

  1. add your camera to HA and connect the dashboard with HA throught the camera entity and use the camera widget.
  2. use the iframe to give only an image. i dont know if that would work with the same link though. you might need to give the filename or save the picture first.
1 Like

Ok, let me get it into shape to share and I’ll get it to you.

I have this iFrame, but it’s not updating

iframe1:
  widget_type: iframe
  refresh: 15
  img_list:
    - http://api.met.no/weatherapi/radar/1.5/?radarsite=southeast_norway;type=reflectivity;content=animation;size=normal

Does it only work with url_list?

And just for what it’s worth, we setup a recurring event in our google calendars for when we want to wakeup. that way, when it hits that time the lights come on in our rooms (If I ever get the time to put speakers in the rooms, then it AD will start talking to everyone or something too). It can also be expanded upon to monitor for vacation times, or other things like holidays to do different actions then. If you want to sleep in one day, just move or delete the single wakeup event for that day.

it should update, but with only 1 in the list it doesnt update by me also.
i think thats a caching problem.

i think @aimc will have a look at that.

thanks for the info, im not sure if im missing something, i do have my shed camera in HA already and working. ive now used this code in HAdash

shed_camera:
widget_type: camera
entity: camera.testcam
title: Shed

Is this all it needs? Im not sure where all the documentation is on the web to help me with ha dash, could you point me in the right direcition with that too?

Cheers all and @ReneTode

you can find the docs in the dir where you installed appdash.
it is the file named DASHBOARD.md

out of that doc:

## camera

A widget to display a refreshing camera image on the dashboard

### Mandatory Arguments

- `entity_picture`

This can be found using the developer tools, and will be one of the parameters associated with the camera you want to view. If you are using a password, you will need to append `&api_password=<your password>` to the end of the entity_picture. It will look seomthing like this:

`http://192.168.1.20:8123/api/camera_proxy/camera.living_room?token=<your token>&api_password=<redacted>`

If you are using SSL, remeber to use the full DNS name and not the IP address.

### Optional Arguments:

- `refresh` - (seconds) if set, the camera image will refresh every interval.

### Cosmetic Arguments
   
- `widget_style`
- `title_style`

1 Like

sorted thank you for the quick responses new code is

shed_camera:
widget_type: camera
entity_picture:
- http://192.168.5.25:8123/api/camera_proxy/camera.testcam?token=b8427296$rest of token
title: Shed
refresh: 5

1 Like

is there a trick to getting state_map to work, i can’t ever get it to show anything

take a look at this. If nothing else, it may give you some ideas.

No trick - what are you trying, and what are you seeing?

bluray_power:
widget_type: switch
title: BLURAY
entity: sensor.bluray
icon_on: fa-film
icon_off: fa-film
post_service_active:
service: script/turn_on
entity_id: script.bluray_on
post_service_inactive:
service: script/turn_on
entity_id: script.bluray_off
state_map:
“Online”: On
“Offline”: Off