Hadashboard V2 Competition

Third party integrations HADashboard
1

Hey folks!

After this great piece of work in the dashboard I wanna call out a dashboard comoetition to get the maximum out of this dashboard.

My idea is having either challenges like themes orientated or freestyle.

For à example movie themes or technical themes

But to win there are some conditions like:

Making the whole code public and showing Screenshots

I could imagine to have a price like a raspberry pi + Hass t-shirt for the winner.

I guess at this time it’s too early to start this competition as this project is still in beta. But later on after the go from the devs we could start.

What do u think about this? It makes it easier for beginners to code their own dashboard and animates and makes dashboard public.

Please vote and I will see with the devs for the winners price.

Cheers

6 Likes
2

i wont compete for prices but my pics and code you can have :wink:
right now the code i gave you in the other topic gives me this pic:

but it can also look like this:

V2 handy huiskamer c bg4.jpg522×897 155 KB

or this:
V2 handy huiskamer b bg3 new.jpg522×878 141 KB

just to give you some inspiration :wink:

3 Likes
3

Wow! Last one transparent is more my style. I hope there will be some other people sharing their dashboards :slight_smile: great work! I will work on startrek layout like lcars

We need some web designer now :slight_smile:

2 Likes
4

is that last one a certain skin or did you set style options on each item ? If it is a skin can you share the skin? I really like the last one as well

5

I also prefer the last one. it is a modified skin i guess

6

its just something i tried during pre beta.
in a skin you can set your own background.
and you can set the widget background for each widget, or you can set it for all widgets in the skin.
background-color: rgba(0,0,0,0.4)
is the background for the last one.

7

do we have something for the css … i mean like a table to watch what is possible? or is there really css skills needed ?

8

in the assets/css dir you find the skins.
it contains a css file and a variables file.
in both you can modify a skin.

modifying the variables doest ask a lot of css skill.
some example parts from it:

switch_icon_on: fa-circle
switch_icon_off: fa-circle-thin
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"

the parts with a $ sign are variables that are set earlier in the file, like:

background_style: "background-color: #444"
style_title: "color: $white"
style_title2: "color: $white"
white: "#fff"

even with basic css knowledge you can go a long way.

9

@ReneTode

I am total newbee when it comes to css…

Your third skin is just awesome … Can you please share the skin for newbees like us …

Thanks in advance …

10

ill have to recreate it, but ill see what i can do.

11

i decided not to recreate the skin, but to tell you how you can make it yourself.

  • first in your appdaemon basedirectory find the directory appdaemon/assets/css
  • copy the directory default and give it the name you want your new skin to have
  • in the new made directory create a directory with the name img
  • find any jpg file you like as your background (google?) and copy it to the img directory
  • in your skin directory find the file named.variables.yaml
  • change the line
background_style: "background-color: #444"

to

background_style: "background-color: rgba(0,0,0,0.4)"

this set the background from your widget to color rgb 0,0,0 which is black. the last figure is how transparant you want the background to be.

  • find the file dashboard.css in your skin directory
  • find the line body {
  • create a new line beneath it like
  background-image: url(/css/your_skin_dir/img/your_background_file.jpg);

and your skin is ready.
mayby you would like to lose the rounded corners?
then find the lines:

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;}

and replace them with a single }

my background i found here:


but you can find many more searching in google for dark background
this site also has some nice ones:
http://hd-wall-papers.com/wallpapers/dark-background-images.html

so be creative and show me the result :wink:

edit:
allthough this is working, the preffered way is creating a directory custom_css in the conf dir and copying the default directory to that directory.
the line that points to the pic then becomes:

background-image: url(/custom_css/your_skin_dir/img/your_background_file.jpg);
3 Likes
12

Here is a screenshot of another I have been working on and a little bit different than the “clear_sky” skin I posted in the beta forum.

7 Likes
13

@ReneTode thanks for the background links!

1 Like
14

AWESOME!!! I need to reproduce this!!! WOW!

15

Indeed! Best seen so far!!

16

I really have to dive into it :stuck_out_tongue:

17

@Tyfoon @thundergreen Thanks!! I will update it to beta2 and get it posted up on github. Will let you know when I’ve got it out there.

18

I followed your short tutorial but it just wont change the skin :frowning:

19

should be url(/custom_css/skin_dir …)

20 
body {
  background-image: url(/custom_css/dark-forest/img/dark-forest.jpg);
  margin: 0;
  background-color: #222;
  font-size: 15px;
  color: #fff;
  padding: 0;
  line-height: 1;
  font-family: 'Helvetica Neue', 'Helvetica', 'Open Sans', 'Arial'
}

like this ?