Just wondering if anyone knows a way to add page transitions when navigating dashboards? Something like this done by @aimc https://www.youtube.com/watch?v=Ll05drHBe9Q
Andrew, just wondering if this is possible in the current version of HADashboard?
in your skin you can add general javascripts.
so its possible to add a preload script.
but i dont think it will bring much because you want fast loading dashboards and this will slow down the loading quite a bit.
Haha agreed on the fast loading.
However, I was wanting to experiment with adding some transitions in between just as an option. I’m very indecisive and like to chop and change all the time but am also interested in options and tinkering.
i said you could use a preload script, but i think thats just CSS so you could add that kind of css in your skin.
google is in that case always a friend.
googling for “css page transitions” brings me for example to this page:
That version uses transitions between pages already help in memory in the browser - the new version of HADashboard doesn;t work that way because in general the load times have been much quicker than v2.
It’s certainly a possibility to add this but I haven’t planed to at this point.
As Rene says, an alternative would be to play with CSS to get a similar effect.
1 Like
Thanks @ReneTode & @aimc. After doing some searching around the HASS forums and not finding anything I did turn to google and come up with some similar results to what you have listed Rene. Not having a programming background it confused me a little however I’m trying to work it all out.
What I understand is to create the transitions not only do I need a .css and .js file but also a .html. Now am I correct in saying that by placing these 3 files in the custom_css directory when I load a dashboard with that particular skin it will take on all these properties? I just haven’t seen a custom skin example with a .html file in it that’s what’s confusing me I guess.
I know it’s not as simple as copy and pasting but I will work that step out next.
You don;t need an HTML file because HADashboard builds that for you - the custom_css dirs arrange to have the .js and the .css inserted into the page for you.
Great, just as I had assumed. Thanks again for your help guys. I’ll have a muck around over the next few days and see what I come up with.
actually you only need to change the variables.yaml
here is an example from some tests i made:
# Core styles. Reference these wherever possible rather than making custom
# versions of red, green, etc. This will make it easier to quickly change the
# overall pallette of the dashboard just by overriding these variables.
# This file contains the application "defaults".
# IF YOU WANT TO CUSTOMIZE styleS FOR YOUR OWN INSTANCE, DO NOT EDIT THIS FILE.
# ----------------------------------------------------------------------------
# Custom styles instructions
# 1. Create a new directory under custom_css
# 2. copy these files over
# 3. EDIT
# 4. Select the new dir as the "skin" argument of any
# dashboards you want to use it
# ----------------------------------------------------------------------------
#
# 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
#
head_includes:
- <meta http-equiv="refresh" content="3600">
- '<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #333;
width: 480px;
height: 480px;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 24px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* Modal Header */
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
width: 440px;
text-align: center;
}
/* Modal Body */
.modal-body {
padding: 2px 16px;
color: black;
width: 240px;
height: 240px;
}
/* Modal Footer */
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
width: 440px;
height: 110px;
}
</style>'
- '<style>
/* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 9998;
}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
</style>'
#
# Custom body includes - should be a YAML List, e.g.:
#
#body_includes:
# - some include
# - some other include
#
this is the top end from the variables.yaml from a custom skin
Unfortunately @ReneTode adding your code to the variables file just made my dashboard go blank. Im sure there was probably more I had to do to get it to work.
I did however, get a nice fade in effect working by replacing the html tag in the css file with this;
html {
margin-top: 25px;
font-size: 21px;
text-align: center;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
from { opacity:0; }
to { opacity:1; }
}
@-moz-keyframes fadein { /* Firefox */
from { opacity:0; }
to { opacity:1; }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from { opacity:0; }
to { opacity:1; }
}
@-o-keyframes fadein { /* Opera */
from { opacity:0; }
to { opacity:1; }
}
I do realise this is just a fade in effect after the page has loaded rather than a transition effect but it’s a work in progress and just thought I’d post my latest.
you probably didnt make sure that it was presented as yaml, like in my example.
like:
- '<style>correct css for instance the part you showed</style>'
- '<script>correct js</script>'