Revise paste Home napanelpro

title: Home
icon: mdi:view-dashboard
path: home
layout:
 grid-template-columns: 50% 50%
 grid-template-rows: 320px 80px 80px
 grid-template-areas: |
 "left right"
 "button button"
 "footer footer"
cards:
 - type: grid
 columns: 1
 square: false
 view_layout:
 grid-area: left
 cards:
 - type: custom:gap-card
 height: 80
 - type: custom:button-card
 tap_action:
 action: call-service
 service: |
 [[[
 this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true}));
 return none;
 ]]]
 hold_action:
 action: fire-dom-event
 browser_mod:
 service: browser_mod.popup
 data:
 dismissable: true
 autoclose: false
 timeout: 5000
 content:
 type: custom:mod-card
 card_mod:
 style: |
 ha-card {
 height:480px;
 border-radius: 30px;
 padding: 5px;
 border: solid 5px var(--sidebar);
 box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36);
 }
 card:
 show_name: true
 show_icon: true
 show_label: true
 label: chiude Home Assistant
 type: custom:button-card
 tap_action:
 action: url
 url_path: app://l.l
 name: Torna ad Android
 icon: mdi:android
 styles:
 card:
 - border: solid 5px var(--sidebar);
 - box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36);
 - border-radius: 30px
 - height: 390px
 - background: black
 - opacity: 80%
 name:
 - color: white
 - font-size: 24px
 - font-weight: 500
 label:
 - color: white
 - font-size: 14px
 - font-weight: 300
 icon:
 - color: yellow
 right_button: chiudi
 right_button_action:
 action: fire-dom-event
 browser_mod:
 service: browser_mod.close_popup
 deviceID: this
 name: |
 [[[ return states['sensor.giorno'].state + ", " +
 states['sensor.mese'].state]]]
 label: |
 [[[ return states['sensor.time'].state ]]]
 show_label: true
 styles:
 grid:
 - grid-template-areas: "\"l\" \"n\""
 - grid-template-columns: 1fr
 - grid-template-rows: min-content min-content
 card:
 - position: absolute
 - height: 200px
 - background: none
 - border: none
 - padding: 0 20px
 - margin-top: "-10px"
 - "--button-card-ripple-press-opacity": 0
 name:
 - justify-self: start
 - text-align: left
 - align-self: start
 - font-size: 16px
 - opacity: 0.7
 - font-weight: 300
 label:
 - justify-self: start
 - font-size: 66px
 - font-weight: 300
 - square: false
 type: grid
 columns: 1
 cards:
 - type: conditional
 conditions:
 - condition: state
 entity: input_number.nsp_meteo
 state: "1.0"
 card:
 type: custom:button-card
 entity: sensor.meteo_icon_orario
 show_icon: false
 show_name: false
 show_label: true
 tap_action:
 action: call-service
 service: input_number.set_value
 target:
 entity_id: input_number.nsp_meteo
 data:
 value: 2
 label: |
 [[[ return entity.attributes.desc ]]]
 styles:
 grid:
 - grid-template-areas: " \"temp temp\" \"feellike feellike\"\"l l\""
 - grid-template-columns: 1fr min-content
 - grid-template-rows: min-content min-content max-content
 card:
 - position: absolute
 - top: 30px
 - right: "-6px"
 - background: none
 - border: none
 - height: 330px
 - "--button-card-ripple-press-opacity": 0
 label:
 - justify-self: end
 - margin-right: 8px
 - align-self: start
 - text-align: right
 - font-size: 16px
 - opacity: 0.7
 - font-weight: 300
 - text-transform: capitalize
 custom_fields:
 icon:
 - position: absolute
 - top: 0px
 - right: "-100px"
 - margin-top: "-55px"
 - justify-self: end
 - align-self: center
 - padding-right: 2px
 temp:
 - padding-top: 70px
 - margin-right: 10px
 - justify-self: end
 - align-self: end
 - font-size: 46px
 - font-weight: 300
 feellike:
 - justify-self: end
 - margin-right: 8px
 - text-align: right
 - align-self: start
 - font-size: 16px
 - opacity: 0.7
 - font-weight: 300
 custom_fields:
 icon: |
 [[[
 return '<img src="' + entity.state + '" width="350" height="350" />'
 ]]]
 temp: |
 [[[
 return entity.attributes.temp + '°C'
 ]]]
 feellike: |
 [[[
 return "Percepita: " + entity.attributes.percepita + '°C'
 ]]]
 - type: conditional
 conditions:
 - condition: state
 entity: input_number.nsp_meteo
 state: "2.0"
 card:
 type: custom:button-card
 entity: sensor.meteo_giornaliero
 show_icon: false
 show_name: false
 tap_action:
 action: call-service
 service: input_number.set_value
 target:
 entity_id: input_number.nsp_meteo
 data:
 value: 1
 styles:
 grid:
 - grid-template-areas: |
 "icon1 day1 temp1"
 "icon2 day2 temp2"
 "icon3 day3 temp3"
 "icon4 day4 temp4"
 "icon5 day5 temp5"
 - grid-template-columns: 60px max-content 1fr
 - grid-template-rows: 1fr 1fr 1fr 1fr 1fr
 card:
 - background: none
 - border: none
 - height: 275px
 - padding: 10px
 custom_fields:
 day1:
 - justify-self: start
 - align-self: center
 - font-size: 16px
 - font-weight: 500
 - text-transform: capitalize
 - padding-right: 10px
 temp1:
 - justify-self: end
 - padding-right: 4px
 - font-size: 14px
 - font-weight: 400
 icon1:
 - justify-self: center
 day2:
 - justify-self: start
 - align-self: center
 - font-size: 16px
 - font-weight: 500
 - text-transform: capitalize
 - padding-right: 10px
 temp2:
 - justify-self: end
 - padding-right: 4px
 - font-size: 14px
 - font-weight: 400
 icon2:
 - justify-self: center
 day3:
 - justify-self: start
 - align-self: center
 - font-size: 16px
 - font-weight: 500
 - text-transform: capitalize
 - padding-right: 10px
 temp3:
 - justify-self: end
 - padding-right: 4px
 - font-size: 14px
 - font-weight: 400
 icon3:
 - justify-self: center
 day4:
 - justify-self: start
 - align-self: center
 - font-size: 16px
 - font-weight: 500
 - text-transform: capitalize
 - padding-right: 10px
 temp4:
 - justify-self: end
 - padding-right: 4px
 - font-size: 14px
 - font-weight: 400
 icon4:
 - justify-self: center
 day5:
 - justify-self: start
 - align-self: center
 - font-size: 16px
 - font-weight: 500
 - text-transform: capitalize
 - padding-right: 10px
 temp5:
 - justify-self: end
 - padding-right: 4px
 - font-size: 14px
 - font-weight: 400
 icon5:
 - justify-self: center
 custom_fields:
 day1: |
 [[[
 return helpers.formatDateWeekdayShort(entity.attributes.forecast[1].datetime)
 ]]]
 temp1: |
 [[[
 return entity.attributes.forecast[1].temperature + "° - " + entity.attributes.forecast[1].precipitation + " mm"
 ]]]
 icon1: |
 [[[
 var weather = entity.attributes.forecast[1].condition;
 return '<img src="/local/ic/weather_icons/animated/' + weather + '.svg" width="50" height="50">'
 ]]]
 day2: |
 [[[
 return helpers.formatDateWeekdayShort(entity.attributes.forecast[2].datetime)
 ]]]
 temp2: |
 [[[
 return entity.attributes.forecast[2].temperature + "° - " + entity.attributes.forecast[2].precipitation + " mm"
 ]]]
 icon2: |
 [[[
 var weather = entity.attributes.forecast[2].condition;
 return '<img src="/local/ic/weather_icons/animated/' + weather + '.svg" width="50" height="50">'
 ]]]
 day3: |
 [[[
 return helpers.formatDateWeekdayShort(entity.attributes.forecast[3].datetime)
 ]]]
 temp3: |
 [[[
 return entity.attributes.forecast[3].temperature + "° - " + entity.attributes.forecast[3].precipitation + " mm"
 ]]]
 icon3: |
 [[[
 var weather = entity.attributes.forecast[3].condition;
 return '<img src="/local/ic/weather_icons/animated/' + weather + '.svg" width="50" height="50">'
 ]]]
 day4: |
 [[[
 return helpers.formatDateWeekdayShort(entity.attributes.forecast[4].datetime)
 ]]]
 temp4: |
 [[[
 return entity.attributes.forecast[4].temperature + "° - " + entity.attributes.forecast[4].precipitation + " mm"
 ]]]
 icon4: |
 [[[
 var weather = entity.attributes.forecast[4].condition;
 return '<img src="/local/ic/weather_icons/animated/' + weather + '.svg" width="50" height="50">'
 ]]]
 day5: |
 [[[
 return helpers.formatDateWeekdayShort(entity.attributes.forecast[5].datetime)
 ]]]
 temp5: |
 [[[
 return entity.attributes.forecast[5].temperature + "° - " + entity.attributes.forecast[5].precipitation + " mm"
 ]]]
 icon5: |
 [[[
 var weather = entity.attributes.forecast[5].condition;
 return '<img src="/local/ic/weather_icons/animated/' + weather + '.svg" width="50" height="50">'
 ]]]
 view_layout:
 grid-area: right
 - square: false
 type: grid
 cards:
 - show_name: true
 show_icon: true
 entity: light.camera
 layout: icon_name
 type: custom:button-card
 styles:
 name:
 - justify-self: start
 - font-size: 20px
 - font-style: Montserrat
 - font-weight: 400
 - opacity: 0.7
 card:
 - height: 70px
 - border-radius: 10px
 - border: none
 - "--button-card-ripple-color": var(--yellow)
 - "--button-card-ripple-press-opacity": 0.4
 tap_action:
 action: navigate
 navigation_path: /dashboard-nspanel/camera
 hold_action:
 action: toggle
 icon: hue:room-bedroom
 name: Camera
 state:
 - value: "on"
 icon: hue:room-bedroom
 - type: custom:button-card
 template: icon-button
 icon: mdi:apps
 variables:
 path: menu
 - show_name: true
 show_icon: true
 entity: binary_sensor.tv_samsung
 layout: icon_name
 type: custom:button-card
 styles:
 name:
 - justify-self: start
 - font-size: 20px
 - font-style: Montserrat
 - font-weight: 400
 - opacity: 0.7
 card:
 - height: 70px
 - border-radius: 10px
 - border: none
 - "--button-card-ripple-color": var(--yellow)
 - "--button-card-ripple-press-opacity": 0.4
 tap_action:
 action: navigate
 navigation_path: /dashboard-nspanel/tv
 hold_action:
 action: call-service
 service: remote.send_command
 target:
 entity_id: remote.broadlink_rm4_camera
 data:
 num_repeats: 1
 delay_secs: 0.4
 hold_secs: 0
 command: power
 device: TV
 icon: mdi:television
 name: TV
 columns: 3
 view_layout:
 grid-area: button
 - square: false
 type: grid
 cards:
 - type: custom:big-slider-card
 card_mod:
 style: |
 {% if is_state('light.luce_camera','on') %}
 #name {font-size:16px;font-weight:500;opacity:0.7}
 #percentage {font-size:16px;font-weight:300px;opacity: 0.5;color:white
 !important;}
 #slider {opacity:0.4 !important; background: var(--brightness) !important;}
 {% else %}
 #name {font-size:16px;font-weight:500;opacity:0.7}
 #percentage {font-size:16px;font-weight:300px;opacity: 0.5;color:white
 !important;}
 #slider {opacity:0.4 !important; background: var(--brightness) !important;}
 #icon {color:white !important;}
 {% endif %}
 entity: light.luce_camera
 name: Luce
 attribute: brightness
 transition: 0.3
 icon: phu:ceiling-lamp
 border_radius: 10px
 show_percentage: true
 tap_action:
 action: toggle
 hold_action:
 action: more-info
 - type: custom:big-slider-card
 card_mod:
 style: |
 {% if is_state('light.comodino','on') %}
 #name {font-size:16px;font-weight:500;opacity:0.7}
 #percentage {font-size:16px;font-weight:300px;opacity: 0.5;color:white
 !important;}
 #slider {opacity:0.4 !important; background: var(--brightness) !important;}
 {% else %}
 #name {font-size:16px;font-weight:500;opacity:0.7}
 #percentage {font-size:16px;font-weight:300px;opacity: 0.5;color:white
 !important;}
 #slider {opacity:0.4 !important; background: var(--brightness) !important;}
 #icon {color:white !important;}
 {% endif %}
 entity: light.comodino
 name: Comodino
 attribute: brightness
 transition: 0.3
 icon: mdi:lamp
 border_radius: 10px
 show_percentage: true
 tap_action:
 action: toggle
 hold_action:
 action: more-info
 columns: 2
 view_layout:
 grid-area: footer
type: custom:grid-layout
background:
 opacity: 50
 alignment: center
 size: cover
 repeat: repeat
 attachment: fixed
 image: /api/image/serve/73c7eb64c91eede9394f48923d279bf0/original