API tools faq
paste
fablav

Home napanelpro

fablav
Oct 20th, 2025
1,252
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 17.11 KB | Software | 0 0
raw download clone embed print report
  1. title: Home
  2. icon: mdi:view-dashboard
  3. path: home
  4. layout:
  5.   grid-template-columns: 50% 50%
  6.   grid-template-rows: 320px 80px 80px
  7.   grid-template-areas: |
  8.    "left right"
  9.     "button button"
  10.     "footer footer"
  11. cards:
  12.   - type: grid
  13.     columns: 1
  14.     square: false
  15.     view_layout:
  16.       grid-area: left
  17.     cards:
  18.       - type: custom:gap-card
  19.         height: 80
  20.       - type: custom:button-card
  21.         tap_action:
  22.           action: call-service
  23.           service: |
  24.            [[[
  25.               this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true}));
  26.               return none;
  27.             ]]]
  28.         hold_action:
  29.           action: fire-dom-event
  30.           browser_mod:
  31.             service: browser_mod.popup
  32.             data:
  33.               dismissable: true
  34.               autoclose: false
  35.               timeout: 5000
  36.               content:
  37.                 type: custom:mod-card
  38.                 card_mod:
  39.                   style: |
  40.                    ha-card {
  41.                       height:480px;
  42.                       border-radius: 30px;
  43.                       padding: 5px;
  44.                       border: solid 5px var(--sidebar);
  45.                       box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36);
  46.                     }
  47.                 card:
  48.                   show_name: true
  49.                   show_icon: true
  50.                   show_label: true
  51.                   label: chiude Home Assistant
  52.                   type: custom:button-card
  53.                   tap_action:
  54.                     action: url
  55.                     url_path: app://l.l
  56.                   name: Torna ad Android
  57.                   icon: mdi:android
  58.                   styles:
  59.                     card:
  60.                       - border: solid 5px var(--sidebar);
  61.                       - box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.36);
  62.                       - border-radius: 30px
  63.                       - height: 390px
  64.                       - background: black
  65.                       - opacity: 80%
  66.                     name:
  67.                       - color: white
  68.                       - font-size: 24px
  69.                       - font-weight: 500
  70.                     label:
  71.                       - color: white
  72.                       - font-size: 14px
  73.                       - font-weight: 300
  74.                     icon:
  75.                       - color: yellow
  76.               right_button: chiudi
  77.               right_button_action:
  78.                 action: fire-dom-event
  79.                 browser_mod:
  80.                   service: browser_mod.close_popup
  81.                   deviceID: this
  82.         name: |
  83.          [[[ return states['sensor.giorno'].state  + ",<br>" +
  84.           states['sensor.mese'].state]]]
  85.         label: |
  86.          [[[ return states['sensor.time'].state ]]]
  87.         show_label: true
  88.         styles:
  89.           grid:
  90.             - grid-template-areas: "\"l\" \"n\""
  91.             - grid-template-columns: 1fr
  92.             - grid-template-rows: min-content min-content
  93.           card:
  94.             - position: absolute
  95.             - height: 200px
  96.             - background: none
  97.             - border: none
  98.             - padding: 0 20px
  99.             - margin-top: "-10px"
  100.             - "--button-card-ripple-press-opacity": 0
  101.           name:
  102.             - justify-self: start
  103.             - text-align: left
  104.             - align-self: start
  105.             - font-size: 16px
  106.             - opacity: 0.7
  107.             - font-weight: 300
  108.           label:
  109.             - justify-self: start
  110.             - font-size: 66px
  111.             - font-weight: 300
  112.   - square: false
  113.     type: grid
  114.     columns: 1
  115.     cards:
  116.       - type: conditional
  117.         conditions:
  118.           - condition: state
  119.             entity: input_number.nsp_meteo
  120.             state: "1.0"
  121.         card:
  122.           type: custom:button-card
  123.           entity: sensor.meteo_icon_orario
  124.           show_icon: false
  125.           show_name: false
  126.           show_label: true
  127.           tap_action:
  128.             action: call-service
  129.             service: input_number.set_value
  130.             target:
  131.               entity_id: input_number.nsp_meteo
  132.             data:
  133.               value: 2
  134.           label: |
  135.            [[[ return entity.attributes.desc ]]]
  136.           styles:
  137.             grid:
  138.               - grid-template-areas: " \"temp temp\" \"feellike feellike\"\"l l\""
  139.               - grid-template-columns: 1fr min-content
  140.               - grid-template-rows: min-content min-content max-content
  141.             card:
  142.               - position: absolute
  143.               - top: 30px
  144.               - right: "-6px"
  145.               - background: none
  146.               - border: none
  147.               - height: 330px
  148.               - "--button-card-ripple-press-opacity": 0
  149.             label:
  150.               - justify-self: end
  151.               - margin-right: 8px
  152.               - align-self: start
  153.               - text-align: right
  154.               - font-size: 16px
  155.               - opacity: 0.7
  156.               - font-weight: 300
  157.               - text-transform: capitalize
  158.             custom_fields:
  159.               icon:
  160.                 - position: absolute
  161.                 - top: 0px
  162.                 - right: "-100px"
  163.                 - margin-top: "-55px"
  164.                 - justify-self: end
  165.                 - align-self: center
  166.                 - padding-right: 2px
  167.               temp:
  168.                 - padding-top: 70px
  169.                 - margin-right: 10px
  170.                 - justify-self: end
  171.                 - align-self: end
  172.                 - font-size: 46px
  173.                 - font-weight: 300
  174.               feellike:
  175.                 - justify-self: end
  176.                 - margin-right: 8px
  177.                 - text-align: right
  178.                 - align-self: start
  179.                 - font-size: 16px
  180.                 - opacity: 0.7
  181.                 - font-weight: 300
  182.           custom_fields:
  183.             icon: |
  184.              [[[
  185.                 return '<img src="' + entity.state + '" width="350" height="350" />'
  186.               ]]]
  187.             temp: |
  188.              [[[
  189.                 return entity.attributes.temp + '<span style="font-size: 0.5em">°C</span>'
  190.               ]]]
  191.             feellike: |
  192.              [[[
  193.                 return "Percepita:  " + entity.attributes.percepita + '<span style="font-size: 0.8em">°C</span>'
  194.               ]]]
  195.       - type: conditional
  196.         conditions:
  197.           - condition: state
  198.             entity: input_number.nsp_meteo
  199.             state: "2.0"
  200.         card:
  201.           type: custom:button-card
  202.           entity: sensor.meteo_giornaliero
  203.           show_icon: false
  204.           show_name: false
  205.           tap_action:
  206.             action: call-service
  207.             service: input_number.set_value
  208.             target:
  209.               entity_id: input_number.nsp_meteo
  210.             data:
  211.               value: 1
  212.           styles:
  213.             grid:
  214.               - grid-template-areas: |
  215.                  "icon1 day1 temp1"
  216.                   "icon2 day2 temp2"
  217.                   "icon3 day3 temp3"
  218.                   "icon4 day4 temp4"
  219.                   "icon5 day5 temp5"
  220.               - grid-template-columns: 60px max-content 1fr
  221.               - grid-template-rows: 1fr 1fr 1fr 1fr 1fr
  222.             card:
  223.               - background: none
  224.               - border: none
  225.               - height: 275px
  226.               - padding: 10px
  227.             custom_fields:
  228.               day1:
  229.                 - justify-self: start
  230.                 - align-self: center
  231.                 - font-size: 16px
  232.                 - font-weight: 500
  233.                 - text-transform: capitalize
  234.                 - padding-right: 10px
  235.               temp1:
  236.                 - justify-self: end
  237.                 - padding-right: 4px
  238.                 - font-size: 14px
  239.                 - font-weight: 400
  240.               icon1:
  241.                 - justify-self: center
  242.               day2:
  243.                 - justify-self: start
  244.                 - align-self: center
  245.                 - font-size: 16px
  246.                 - font-weight: 500
  247.                 - text-transform: capitalize
  248.                 - padding-right: 10px
  249.               temp2:
  250.                 - justify-self: end
  251.                 - padding-right: 4px
  252.                 - font-size: 14px
  253.                 - font-weight: 400
  254.               icon2:
  255.                 - justify-self: center
  256.               day3:
  257.                 - justify-self: start
  258.                 - align-self: center
  259.                 - font-size: 16px
  260.                 - font-weight: 500
  261.                 - text-transform: capitalize
  262.                 - padding-right: 10px
  263.               temp3:
  264.                 - justify-self: end
  265.                 - padding-right: 4px
  266.                 - font-size: 14px
  267.                 - font-weight: 400
  268.               icon3:
  269.                 - justify-self: center
  270.               day4:
  271.                 - justify-self: start
  272.                 - align-self: center
  273.                 - font-size: 16px
  274.                 - font-weight: 500
  275.                 - text-transform: capitalize
  276.                 - padding-right: 10px
  277.               temp4:
  278.                 - justify-self: end
  279.                 - padding-right: 4px
  280.                 - font-size: 14px
  281.                 - font-weight: 400
  282.               icon4:
  283.                 - justify-self: center
  284.               day5:
  285.                 - justify-self: start
  286.                 - align-self: center
  287.                 - font-size: 16px
  288.                 - font-weight: 500
  289.                 - text-transform: capitalize
  290.                 - padding-right: 10px
  291.               temp5:
  292.                 - justify-self: end
  293.                 - padding-right: 4px
  294.                 - font-size: 14px
  295.                 - font-weight: 400
  296.               icon5:
  297.                 - justify-self: center
  298.           custom_fields:
  299.             day1: |
  300.              [[[
  301.                 return helpers.formatDateWeekdayShort(entity.attributes.forecast[1].datetime)
  302.               ]]]
  303.             temp1: |
  304.              [[[
  305.                 return entity.attributes.forecast[1].temperature + "° - " + entity.attributes.forecast[1].precipitation + " mm"
  306.               ]]]
  307.             icon1: |
  308.              [[[
  309.                 var weather = entity.attributes.forecast[1].condition;
  310.                 return '<img src="/local/ic/weather_icons/animated/' + weather + '.svg" width="50" height="50">'
  311.               ]]]
  312.             day2: |
  313.              [[[
  314.                 return helpers.formatDateWeekdayShort(entity.attributes.forecast[2].datetime)
  315.               ]]]
  316.             temp2: |
  317.              [[[
  318.                 return entity.attributes.forecast[2].temperature + "° - " + entity.attributes.forecast[2].precipitation + " mm"
  319.               ]]]
  320.             icon2: |
  321.              [[[
  322.                 var weather = entity.attributes.forecast[2].condition;
  323.                 return '<img src="/local/ic/weather_icons/animated/' + weather + '.svg" width="50" height="50">'
  324.               ]]]
  325.             day3: |
  326.              [[[
  327.                 return helpers.formatDateWeekdayShort(entity.attributes.forecast[3].datetime)
  328.               ]]]
  329.             temp3: |
  330.              [[[
  331.                 return entity.attributes.forecast[3].temperature + "° - " + entity.attributes.forecast[3].precipitation + " mm"
  332.               ]]]
  333.             icon3: |
  334.              [[[
  335.                 var weather = entity.attributes.forecast[3].condition;
  336.                 return '<img src="/local/ic/weather_icons/animated/' + weather + '.svg" width="50" height="50">'
  337.               ]]]
  338.             day4: |
  339.              [[[
  340.                 return helpers.formatDateWeekdayShort(entity.attributes.forecast[4].datetime)
  341.               ]]]
  342.             temp4: |
  343.              [[[
  344.                 return entity.attributes.forecast[4].temperature + "° - " + entity.attributes.forecast[4].precipitation + " mm"
  345.               ]]]
  346.             icon4: |
  347.              [[[
  348.                 var weather = entity.attributes.forecast[4].condition;
  349.                 return '<img src="/local/ic/weather_icons/animated/' + weather + '.svg" width="50" height="50">'
  350.               ]]]
  351.             day5: |
  352.              [[[
  353.                 return helpers.formatDateWeekdayShort(entity.attributes.forecast[5].datetime)
  354.               ]]]
  355.             temp5: |
  356.              [[[
  357.                 return entity.attributes.forecast[5].temperature + "° - " + entity.attributes.forecast[5].precipitation + " mm"
  358.               ]]]
  359.             icon5: |
  360.              [[[
  361.                 var weather = entity.attributes.forecast[5].condition;
  362.                 return '<img src="/local/ic/weather_icons/animated/' + weather + '.svg" width="50" height="50">'
  363.               ]]]
  364.     view_layout:
  365.       grid-area: right
  366.   - square: false
  367.     type: grid
  368.     cards:
  369.       - show_name: true
  370.         show_icon: true
  371.         entity: light.camera
  372.         layout: icon_name
  373.         type: custom:button-card
  374.         styles:
  375.           name:
  376.             - justify-self: start
  377.             - font-size: 20px
  378.             - font-style: Montserrat
  379.             - font-weight: 400
  380.             - opacity: 0.7
  381.           card:
  382.             - height: 70px
  383.             - border-radius: 10px
  384.             - border: none
  385.             - "--button-card-ripple-color": var(--yellow)
  386.             - "--button-card-ripple-press-opacity": 0.4
  387.         tap_action:
  388.           action: navigate
  389.           navigation_path: /dashboard-nspanel/camera
  390.         hold_action:
  391.           action: toggle
  392.         icon: hue:room-bedroom
  393.         name: Camera
  394.         state:
  395.           - value: "on"
  396.             icon: hue:room-bedroom
  397.       - type: custom:button-card
  398.         template: icon-button
  399.         icon: mdi:apps
  400.         variables:
  401.           path: menu
  402.       - show_name: true
  403.         show_icon: true
  404.         entity: binary_sensor.tv_samsung
  405.         layout: icon_name
  406.         type: custom:button-card
  407.         styles:
  408.           name:
  409.             - justify-self: start
  410.             - font-size: 20px
  411.             - font-style: Montserrat
  412.             - font-weight: 400
  413.             - opacity: 0.7
  414.           card:
  415.             - height: 70px
  416.             - border-radius: 10px
  417.             - border: none
  418.             - "--button-card-ripple-color": var(--yellow)
  419.             - "--button-card-ripple-press-opacity": 0.4
  420.         tap_action:
  421.           action: navigate
  422.           navigation_path: /dashboard-nspanel/tv
  423.         hold_action:
  424.           action: call-service
  425.           service: remote.send_command
  426.           target:
  427.             entity_id: remote.broadlink_rm4_camera
  428.           data:
  429.             num_repeats: 1
  430.             delay_secs: 0.4
  431.             hold_secs: 0
  432.             command: power
  433.             device: TV
  434.         icon: mdi:television
  435.         name: TV
  436.     columns: 3
  437.     view_layout:
  438.       grid-area: button
  439.   - square: false
  440.     type: grid
  441.     cards:
  442.       - type: custom:big-slider-card
  443.         card_mod:
  444.           style: |
  445.            {% if is_state('light.luce_camera','on') %}
  446.               #name {font-size:16px;font-weight:500;opacity:0.7}
  447.               #percentage {font-size:16px;font-weight:300px;opacity: 0.5;color:white
  448.               !important;}
  449.               #slider {opacity:0.4 !important; background: var(--brightness) !important;}
  450.             {% else %}
  451.               #name {font-size:16px;font-weight:500;opacity:0.7}
  452.               #percentage {font-size:16px;font-weight:300px;opacity: 0.5;color:white
  453.               !important;}
  454.               #slider {opacity:0.4 !important; background: var(--brightness) !important;}
  455.               #icon {color:white !important;}
  456.             {% endif %}
  457.         entity: light.luce_camera
  458.         name: Luce
  459.         attribute: brightness
  460.         transition: 0.3
  461.         icon: phu:ceiling-lamp
  462.         border_radius: 10px
  463.         show_percentage: true
  464.         tap_action:
  465.           action: toggle
  466.         hold_action:
  467.           action: more-info
  468.       - type: custom:big-slider-card
  469.         card_mod:
  470.           style: |
  471.            {% if is_state('light.comodino','on') %}
  472.               #name {font-size:16px;font-weight:500;opacity:0.7}
  473.               #percentage {font-size:16px;font-weight:300px;opacity: 0.5;color:white
  474.               !important;}
  475.               #slider {opacity:0.4 !important; background: var(--brightness) !important;}
  476.             {% else %}
  477.               #name {font-size:16px;font-weight:500;opacity:0.7}
  478.               #percentage {font-size:16px;font-weight:300px;opacity: 0.5;color:white
  479.               !important;}
  480.               #slider {opacity:0.4 !important; background: var(--brightness) !important;}
  481.               #icon {color:white !important;}
  482.             {% endif %}
  483.         entity: light.comodino
  484.         name: Comodino
  485.         attribute: brightness
  486.         transition: 0.3
  487.         icon: mdi:lamp
  488.         border_radius: 10px
  489.         show_percentage: true
  490.         tap_action:
  491.           action: toggle
  492.         hold_action:
  493.           action: more-info
  494.     columns: 2
  495.     view_layout:
  496.       grid-area: footer
  497. type: custom:grid-layout
  498. background:
  499.   opacity: 50
  500.   alignment: center
  501.   size: cover
  502.   repeat: repeat
  503.   attachment: fixed
  504.   image: /api/image/serve/73c7eb64c91eede9394f48923d279bf0/original
  505.  
Tags: ha
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!