I made some upgrades. If anyone have some questions feel free to ask me 
2 Likes
Very cool! Excellent work.
Iāve been tinkering with a landscape-view network/media dashboard (for use on PC) which based heavily on this, and now Iām going to have to play with some of these animations as well 
ā such inspiration!
Curious what issues you were having with the swipe-card? They certainly can be temperamental, but I like to disable the touch movement and turn the clickable pagination bullets into navigation buttons. Itās like a state-switch with hash navigation, only in a card:
Canāt wait to see what you come up with next!
Hello Thanks!
The problem i had with the swipe card might have been due to the picture element card i uses inside the swipe-card or the swipe-card itself, i really donĀ“t know. Some elements changed position from time to time. It also took like 3 seconds to load on my iPad. I did not use the swipe function very much so decided to let it go.
HOWEVER, what you have done with the swipe card in your gif seems really fun 
It opens up a lot of possibilities. I tried something similar some months ago but did not get it to work.
Care do share your code for that ?
Hmm interesting with the element bugs. I donāt have an iOS device to experiment on, but will happily share the code when Iām in front of my PC ā
EDIT: Code for the swipe card setup I use can be found here: https://pastebin.com/BiLqgEPC (Thereās surely a more elegant way to accomplish what Iāve made, but Iām relatively new to this so youāll have to forgive the pile of code 
)
Iāve deleted pages 1 & 2 of the swipe card to save clutter because theyāre just stacks of button-cards which I use as custom service-call buttons for personal playlists; the third card is a spotify-card. You could easily add more spotify cards in swipe 1 & 2 if you wanted (e.g. for personal & discover weekly cards) ā thatās what I used to have.
Also in there I have a custom media player that Iāve been building for myself (the āplayingā element in the state-switch), as well as two media control cards which Iāve hacked down to size for use as transparent media browser buttons for Spotify & yTubeMusic integrations ā the two bottom-left icons in the gif below (theyāre the two hui-element cards at the bottom of the file):
My card as-is may be a bit too verbose, but hopefully you can get something working for your setup!
4 Likes
Super cool! Thanks for sharing. I will play around with this 
1 Like
I have a realy strange behaviour.
On a tablet with touch operation, the toggle swich on the lighting page get triggered only on the second push.
Is this an issue from the tablet, or is there a workaround? On my PC with mouse operation there is no such issue.
Any help is welcome.
This dashboard is awsome and i am on the process of transfering to landscape mode for a Lenovo Tab M10 with āFully Kiosk Browserā.
Hello, I have not had that exactly issue however i noticed something similar on my ipad. Somethimes my ānotification fieldā, or the title in the lights popup card are not displayed until a second push on the screen. This issue disappeared when i deleted the animations for the notciations. Strange because it do not make any senseā¦ Maybe it will solve you issue to, please give it a try.
And please share your landscape version, i am excited to see what you guys come up with !
yes! please share your landscape version if you can. Have the same M10 pad and would be interested in getting the Neon UI on it
Actually i am done with the layout and placing the Cards on the screen.
@danieljarhult : thanks for your reply. Will give it a try after finished with the āSecurityā-Feature
3 Likes
Nice work ! Maybe it is time for me to learn css grid so we can auto switch layout between portrait and landscape.
SĆ„ sjukt grymt jobbat Daniel, have finally started tinkering with this myself. Halfway there, or something I have two questions.
First, Not related to the theme per se but does anyone know how to select theme per dashboard? Iād prefer to have the standard theme when going to configuration for example as Iām currently working on this at the computer.
Second, to get started resizing the layout to my screen, where is that set up?
Hej,
Tack
Since this is built with the picture element you need to resize using the style top and left parameter in the lovelace code itself. I have put the āstyle parameterā at the bottom of each element/card.
- type: custom:button-card
tap_action:
action: none
show_icon: false
show_state: true
show_name: false
entity: sensor.time
styles:
card:
- background-color: transparent
state:
- font-size: 80px
- color: var(--secondary-text-color)
- font-weight: lighter
style:
top: 40px
left: 70px
transform: translate(0%, 0%)
So if you change top:40px to top:20px it will be 20px closer to the top etc.
1 Like
Cool tack! Now I get it. Iāll keep tinkering.
Any way to refresh the image when tweaking the background picture? Only way I could get it to update when tinkering with the crop and blur was to restart HA?
EDIT: Donāt mind me, it was just browser cache playing tricks on me!
Ok another stupid question, Iām working on my Belysning-popup with the light-entity cards. In the theme-file it says to uncomment for blur effect. It looks already uncommented for me, but I donāt get a blur effect. Is there another dependency? What am I missing? Thx
# Card-Mod #####################################################################
# Uncomment the Code below if you have card-mod installed and want blur effect #
################################################################################
card-mod-theme: neon
card-mod-more-info-yaml: |
$: |
.mdc-dialog .mdc-dialog__scrim {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
background: rgba(0,0,0,0.1);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
box-shadow: none !important;
border-radius: var(--ha-card-border-radius);
}
.: |
:host {
--ha-card-box-shadow: none;
}
The card itself is unchanged from your code aside from entities.
Maybe silly question, but have you installed card-mod?
1 Like
Thats not a stupid question at all. And you are right it is already uncommented. I forgot to delete that text.
The blur effect applied in the theme file only applies to āofficialā popup windows (more-info-cards). However, the popups for the lightcards and personcard are in fact just conditional cards which i have designed to look like a popup.
I am doing a complete rework of the popups using browser-mod instead and also using a css grid instead of the picture element. Then the blur effect in the theme file will be applied correctly.
I can share you my new code as soon as it is ready, likely by the end of this week.
1 Like
yes card mod is installed!
Cool Daniel, good to know I wasnāt entirely lost 
Soinds great looking forward, no stress of course - youāre a hero man!
What is your active lights-sensor btw? A template sensor that checks how many are turned on?
Yes that is correct.
in configuration.yaml :
- platform: template
sensors:
active_lights:
value_template: "{{ states.light|selectattr('state','equalto','on')|list|count }}"
1 Like