API tools faq
paste
Advertisement
p33j4y

HA: button+popup

p33j4y
May 27th, 2021 (edited)
72
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 10.64 KB | None | 0 0
raw download clone embed print report
  1. ###################################################################################
  2. ###################################################### SZABLONY CUSTOM-BUTTON-CARD:
  3.  
  4. button_card_templates:
  5.     #################### wspólne
  6.     default:
  7.       styles:
  8.         card:
  9.         - background-color: var(--card-background-color)
  10.         - background-size: cover
  11.         - border: none
  12.         - margin: none
  13.         - box-shadow: none 
  14.  
  15.     #################### sensor pojedyńczy
  16.     single_sensor:
  17.       show_label: true
  18.       styles:
  19.         card:
  20.         - padding: 4px
  21.         - font-size: 1em
  22.         grid:
  23.         - grid-template-areas: '"n n" "i l"'
  24.         - grid-template-columns: 35% 65%
  25.         - grid-template-rows: 1fr 1fr
  26.         name:
  27.         - align-self: center
  28.         - justify-self: center
  29.         - color: var(--secondary-text-color)
  30.         - padding-bottom: 5px
  31.         icon:
  32.         - color: var(--state-icon-color)
  33.         - width: 50%
  34.         label:
  35.         - align-self: middle
  36.         - justify-self: start
  37.         - font-size: 1.2em
  38.       label: >
  39.         [[[
  40.           var temps = `${entity.state}`;
  41.           var tempu = `${entity.attributes.unit_of_measurement}`;
  42.           return `<span>` + (isNaN(temps) ? '?' : temps) + ` ` + tempu + `</span>`;
  43.         ]]]
  44.  
  45.     #################### sensor podwójny z dużą ikoną główną
  46.     double_sensor_icon:
  47.       template: single_sensor
  48.       show_label: false
  49.       styles:
  50.         grid:
  51.         - grid-template-areas: '"n n" "i asensor" "i bsensor"'
  52.         - grid-template-columns: 40% 60%
  53.         - grid-template-rows: 1fr 1fr 1fr
  54.         icon:
  55.         - width: 50%
  56.         custom_fields:
  57.           asensor:
  58.           - align-self: start
  59.           - justify-self: start
  60.           - font-size: 1em
  61.           bsensor:
  62.           - align-self: start
  63.           - justify-self: start
  64.       custom_fields:
  65.         asensor: >
  66.           [[[
  67.             var temps = `${entity.state}`;
  68.             var tempu = `${entity.attributes.unit_of_measurement}`;
  69.             var tempi = `${entity.attributes.icon}`;
  70.             return `<ha-icon icon="` + tempi + `" style="width: 1.5em; color: var(--state-icon-color)"></ha-icon> <span>` + ` ` + (isNaN(temps) ? '?' : temps) + (tempu ? tempu : '') + `</span>`;
  71.           ]]]
  72.  
  73.     #################### sensor podwójny z popupem
  74.     double_sensor_popup:
  75.       template: double_sensor_icon
  76.       tap_action:
  77.         action: fire-dom-event
  78.         browser_mod:
  79.           command: popup
  80.           card:
  81.             type: vertical-stack
  82.  
  83. ###################################################################################
  84. ############################################## KOD NA BUTTON Z POPUPEM W LOWELASIE:
  85.  
  86. #################### gabinet
  87.    - name: Gabinet
  88.      type: custom:button-card
  89.      template: double_sensor_popup
  90.      style: &round_card |
  91.        ha-card {
  92.          border-radius: 12px !important;
  93.          box-shadow:
  94.            {% if is_state('sun.sun', 'below_horizon') %}
  95.              0px 0px 5px 1px rgba(0,0,0,0.25);
  96.            {% else %}
  97.              0px 0px 5px 1px rgba(0,0,0,0.25);
  98.            {% endif %}
  99.        }
  100.        ha-card.type-custom-simple-thermostat header {
  101.          padding: calc(var(--st-spacing, var(--st-default-spacing)) * 3) calc(var(--st-spacing, var(--st-default-spacing)) * 4) calc(var(--st-spacing, var(--st-default-spacing)) * 1)
  102.        }
  103.        ha-card div.no-header {
  104.          padding-top: 2px !important;
  105.        }
  106.        ha-card div.no-header div.entity {
  107.          margin-bottom: 2px !important;
  108.          font-size: 0.9em !important;
  109.        }
  110.        ha-card header.clickable {
  111.          padding-top: 10px !important;
  112.          padding-bottom: 0 !important
  113.        }
  114.        ha-card section.body {
  115.          padding-top: 0 !important;
  116.          padding-bottom: 0 !important;
  117.        }
  118.        ha-card div.heading {
  119.          margin-top: 0 !important;
  120.        }
  121.        ha-card .state--small {
  122.          margin-bottom: 0 !important;
  123.        }
  124.      entity: sensor.2_off_temperature
  125.      icon: mdi:remote-desktop
  126.      aspect_ratio: 2/1
  127.      custom_fields:
  128.        bsensor: >
  129.          [[[
  130.            var temph = states["sensor.2_off_humidity"].state;
  131.            var prefix = `<ha-icon icon="mdi:water-percent" style="width: 1.5em; color: var(`;
  132.             var suffix = `);"></ha-icon> ` + (isNaN(temph) ? '?' : temph) + `%</span>`;
  133.             if (temph >= 40 && temph <= 60) return prefix + `--label-badge-green` + suffix;
  134.             if (temph >= 0 && temph < 40) return prefix + `--label-badge-yellow` + suffix;
  135.             else return prefix + `--label-badge-red` + suffix;
  136.           ]]]
  137.       tap_action:
  138.         browser_mod:
  139.           title: Gabinet
  140.           card:
  141.             cards:
  142.             - type: custom:mini-graph-card
  143.               style: &popup_padding |
  144.                ha-card {
  145.                   padding: 10px !important;
  146.                   border-radius: 12px !important;
  147.                   box-shadow:
  148.                     {% if is_state('sun.sun', 'below_horizon') %}
  149.                       0px 0px 5px 1px rgba(0,0,0,0.25);
  150.                     {% else %}
  151.                       0px 0px 5px 1px rgba(0,0,0,0.25);
  152.                     {% endif %}
  153.                 }
  154.                 ha-card div.current {
  155.                   margin-bottom: 5em !important;
  156.                 }
  157.               name: "Temperatura"
  158.               entities:
  159.              - sensor.2_off_temperature
  160.               - entity: sensor.0_cfg_nightime
  161.                 color: "#444444"
  162.                 show_line: false
  163.                 show_points: false
  164.                 show_legend: false
  165.                 y_axis: secondary
  166.               group: true
  167.               hours_to_show: 48
  168.               points_per_hour: 1
  169.               hour24: true
  170.               decimals: 1
  171.               animate: true
  172.               show:
  173.                 points: false
  174.                 extrema: true
  175.                 fill: fade
  176.               color_thresholds_transition: smooth
  177.               color_thresholds:
  178.               - value: 17
  179.                 color: "#00d9d9"
  180.               - value: 22
  181.                 color: "#ff8000"
  182.               - value: 27
  183.                 color: "#ff2626"
  184.             - type: custom:mini-graph-card
  185.               style: *popup_padding
  186.               name: "Wilgotność"
  187.               entities:
  188.              - sensor.2_off_humidity
  189.               - entity: sensor.0_cfg_nightime
  190.                 color: "#444444"
  191.                 show_line: false
  192.                 show_points: false
  193.                 show_legend: false
  194.                 y_axis: secondary
  195.               group: true
  196.               hours_to_show: 48
  197.               points_per_hour: 1
  198.               hour24: true
  199.               decimals: 1
  200.               animate: true
  201.               show:
  202.                 points: false
  203.                 extrema: true
  204.                 icon_adaptive_color: true
  205.                 fill: fade
  206.               color_thresholds_transition: hard
  207.               color_thresholds:
  208.               - value: 0
  209.                 color: "#f4b400"
  210.               - value: 40
  211.                 color: "#0DA035"
  212.               - value: 60
  213.                 color: "#DF4C1E"
  214.  
  215. ###################################################################################
  216. ###################################### DODATKOWA KARTA Z WYKRESEM TEMP. NA ZEWNĄTRZ
  217.   - type: horizontal-stack
  218.     cards:
  219.     - name: Na dworze
  220.       type: custom:mini-graph-card
  221.       style: *round_card
  222.       entities:
  223.       - entity: sensor.0_out_feel_temperature
  224.         name: Odczuwalna
  225.       - entity: sensor.0_out_average_temperature
  226.         name: Temperatura
  227.         show_state: true
  228.         show_graph: false
  229.       - entity: sensor.4_out_humidity
  230.         name: Wilgotność
  231.         show_state: true
  232.         show_graph: false
  233.       - entity: sensor.0_cfg_nightime
  234.         color: "#444444"
  235.         show_line: false
  236.         show_points: false
  237.         show_legend: false
  238.         y_axis: secondary
  239.       show:
  240.         legend: false
  241.         points: false
  242.       tap_action:
  243.         action: fire-dom-event
  244.         browser_mod:
  245.           command: popup
  246.           title: Pogoda
  247.           card:
  248.            #################### pogoda popup
  249.             type: vertical-stack
  250.             cards:
  251.             - type: custom:weather-card
  252.               entity: weather.0_wth_summary
  253.               style: &popup_padding |
  254.                ha-card {
  255.                   padding: 10px !important;
  256.                   border-radius: 12px !important;
  257.                   box-shadow:
  258.                     {% if is_state('sun.sun', 'below_horizon') %}
  259.                       0px 0px 5px 1px rgba(0,0,0,0.25);
  260.                     {% else %}
  261.                       0px 0px 5px 1px rgba(0,0,0,0.25);
  262.                     {% endif %}
  263.                 }
  264.                 ha-card div.current {
  265.                   margin-bottom: 5em !important;
  266.                 }
  267.               current: true
  268.               details: true
  269.               forecast: true
  270.               hourly_forecast: false
  271.               number_of_forecasts: 5
  272.             - name: "Średnia 3-dniowa"
  273.               type: custom:mini-graph-card
  274.               style: *popup_padding
  275.               entities:
  276.              - sensor.0_out_average_3d_temperature
  277.               - entity: sensor.0_cfg_nightime
  278.                 color: "#444444"
  279.                 show_line: false
  280.                 show_points: false
  281.                 show_legend: false
  282.                 y_axis: secondary
  283.               group: true
  284.               hours_to_show: 168
  285.               height: 100
  286.               points_per_hour: 1
  287.               hour24: true
  288.               decimals: 1
  289.               animate: true
  290.               show:
  291.                 points: false
  292.                 extrema: false
  293.                 fill: fade
  294.               color_thresholds_transition: smooth
  295.               color_thresholds:
  296.               - value: 13
  297.                 color: "#00d9d9"
  298.               - value: 18
  299.                 color: "#ff8000"
  300.               - value: 20
  301.                 color: "#ff2626"
  302.             - type: custom:sun-card
  303.               language: pl
  304.             - type: entities
  305.               show_header_toggle: false
  306.               entities:
  307.              - sensor.0_out_season
  308.               - binary_sensor.0_out_heating
  309.               - sensor.0_out_max_24h_temperature
  310.               - sensor.0_out_min_24h_temperature
  311.       font_size: 80
  312.       align_icon: left
  313.       icon: mdi:home-group
  314.       hours_to_show: 24
  315.       hour24: true
  316.       decimals: 1
  317.       animate: true
  318.       color_thresholds:
  319.       - value: -10
  320.         color: "#2a4a96"
  321.       - value: -5
  322.         color: "#057ac2"
  323.       - value: 0
  324.         color: "#13aaec"
  325.       - value: 5
  326.         color: "#85c8f3"
  327.       - value: 10
  328.         color: "#d1e18d"
  329.       - value: 15
  330.         color: "#ffe700"
  331.       - value: 20
  332.         color: "#eab856"
  333.       - value: 25
  334.         color: "#df915d"
  335.       - value: 30
  336.         color: "#d2694b"
  337.       - value: 35
  338.         color: "#ad352e"
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!