API tools faq
paste
Advertisement
tiwing

Weather Panel Code

tiwing
Feb 6th, 2025
53
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 15.65 KB | None | 0 0
raw download clone embed print report
  1. type: vertical-stack
  2. cards:
  3.   - type: custom:decluttering-card
  4.     template: normal_title
  5.     variables:
  6.       - content: Weather
  7.       - sub-content: null
  8.   - square: false
  9.     type: grid
  10.     cards:
  11.       - type: picture-elements
  12.         image: /local/dashboard_photos/transparent/~transparent-1-1.png
  13.         card_mod:
  14.           style: |
  15.            ha-card {
  16.                   background:
  17.                   /* top, transparent red, faked with gradient */
  18.                   linear-gradient(
  19.                     rgba(0, 0, 0, 0),
  20.                     rgba(0, 0, 0, 0)
  21.                   ),
  22.                   /* bottom, image */
  23.                   url("/local/dashboard_photos/temperature_humidity.jpg");
  24.                   background-size: cover;
  25.                   #background-size: contain;
  26.                   #background-size: auto;
  27.                   #background-size: auto auto;
  28.                   background-repeat: no-repeat;
  29.                   background-position: center left;
  30.                 }
  31.         elements:
  32.           - type: image
  33.             tap_action: none
  34.             double_tap_action: none
  35.             hold_action: none
  36.             image: /local/dashboard_photos/wind_turbine_2.jpg
  37.             style:
  38.               transform: none
  39.               transform-origin: top right
  40.               top: 2%
  41.               right: 2%
  42.               width: 35%
  43.             card_mod:
  44.               style: |
  45.                :host {
  46.                   opacity: 0.8;
  47.                   border-radius: 8px;
  48.                   {% if is_state('binary_sensor.porch1_porch_zone_person_occupancy','on') %}
  49.                     border: 2px dashed red;
  50.                   {% elif is_state('binary_sensor.porch_mot_sticky','on') %}
  51.                     border: 2px solid red;
  52.                   {% else %}
  53.                     border: 2px solid grey;
  54.                   {% endif %}
  55.                 }
  56.           - type: state-label
  57.             style:
  58.               transform: none
  59.               transform-origin: top left
  60.               left: 63%
  61.               top: 1%
  62.               font-size: 90%
  63.             card_mod:
  64.               style: |
  65.                :host {
  66.                       {% set lev = states('sensor.astroweather_backyard_10m_wind_speed')|float(0) %}
  67.                       {% if lev > 50  %}
  68.                         color: red;
  69.                         top: 1%;
  70.                       {% elif lev > 30 %}
  71.                         color: rgb(255,165,0);
  72.                         top: 1%;
  73.                       {% elif lev < 1  %}
  74.                         opacity: 0;
  75.                         top: 999%;
  76.                       {% else %}
  77.                         color: silver;
  78.                         top: 1%;
  79.                       {% endif %}
  80.                 }
  81.             entity: sensor.astroweather_backyard_10m_wind_speed
  82.             prefix: "Speed: "
  83.           - type: state-label
  84.             style:
  85.               transform: none
  86.               transform-origin: top left
  87.               left: 63%
  88.               font-size: 90%
  89.             card_mod:
  90.               style: |
  91.                :host {
  92.                       {% set lev = states('sensor.lincoln_wind_gust')|float(0) %}
  93.                       {% if lev <= states('sensor.astroweather_backyard_10m_wind_speed')|float(0) %}
  94.                         opacity: 0;
  95.                         top: 999%;
  96.                       {% elif lev > 65  %}
  97.                         color: red;
  98.                         top: 6%;
  99.                       {% elif lev > 40 %}
  100.                         color: rgb(255,165,0);
  101.                         top: 6%;
  102.                       {% elif lev < 1 %}
  103.                         opacity: 0;
  104.                         top: 999%;
  105.                       {% else %}
  106.                         color: silver;
  107.                         top: 6%;
  108.                       {% endif %}
  109.                 }
  110.             entity: sensor.lincoln_wind_gust
  111.             prefix: "Gust: "
  112.           - type: conditional
  113.             conditions:
  114.               - condition: numeric_state
  115.                 entity: sensor.astroweather_backyard_10m_wind_speed
  116.                 above: 0
  117.             title: wind direction
  118.             elements:
  119.               - type: state-label
  120.                 style:
  121.                   left: 80%
  122.                   top: 20%
  123.                   font-size: 170%
  124.                   font-weight: 700
  125.                   color: white
  126.                 entity: sensor.astroweather_backyard_10m_wind_direction
  127.           - type: state-label
  128.             style:
  129.               transform: none
  130.               left: 63%
  131.               font-size: 90%
  132.             card_mod:
  133.               style: |
  134.                :host {
  135.                       {% set lev = states('sensor.lincoln_chance_of_precip')|float(0) %}
  136.                       {% if lev > 70  %}
  137.                         color: silver;
  138.                         top: 25%;
  139.                       {% elif lev > 90 %}
  140.                         color: orange;
  141.                         top: 25%;
  142.                       {% elif lev < 1  %}
  143.                         opacity: 0;
  144.                         top: 999%;
  145.                       {% else %}
  146.                         color: silver;
  147.                         top: 25%;
  148.                       {% endif %}
  149.                 }
  150.             entity: sensor.lincoln_chance_of_precip
  151.             prefix: "POP: "
  152.           - type: state-label
  153.             style:
  154.               transform: none
  155.               transform-origin: top left
  156.               left: 63%
  157.               top: 30%
  158.               font-size: 90%
  159.             card_mod:
  160.               style: |
  161.                :host {
  162.                       {% set lev = states('sensor.outdoor_front_pressure')|float(0) %}
  163.                       {% if lev > 1010  %}
  164.                         color: lightgreen;
  165.                       {% elif lev < 990 %}
  166.                         color: salmon;
  167.                       {% else %}
  168.                         color: silver;
  169.                       {% endif %}
  170.                   }
  171.             entity: sensor.outdoor_front_pressure
  172.             prefix: "Pressure: "
  173.           - type: state-label
  174.             style:
  175.               transform: none
  176.               transform-origin: top right
  177.               right: 41%
  178.               top: 1%
  179.               font-size: 120%
  180.             prefix: "Temp: "
  181.             card_mod:
  182.               style: |
  184.                 :host {
  185.                     {% set lev = states('sensor.outdoor_front_temp')|float(0) %}
  186.                     {% if lev < -7 %}
  187.                       color: lightblue;
  188.                       text-shadow: 1px 1px 4px blue;
  189.                       font-weight: 700;
  190.                     {% elif lev > 27 %}
  191.                       color: crimson;
  192.                       text-shadow: 1px 1px 4px salmon;
  193.                       font-weight: 700;
  194.                     {% else %}
  195.                       color: white;
  196.                     {% endif %}
  197.                 }
  198.             entity: sensor.outdoor_temp
  199.           - type: state-label
  200.             prefix: "Humidity: "
  201.             style:
  202.               transform: none
  203.               transform-origin: top right
  204.               right: 41%
  205.               top: 10%
  206.               font-size: 120%
  207.               color: white
  208.             entity: sensor.outdoor_humidity
  209.           - type: state-label
  210.             style:
  211.               transform: none
  212.               right: 41%
  213.               top: 19%
  214.               font-size: 120%
  215.             card_mod:
  216.               style: |
  217.                :host {
  218.                     {% set lev = states('sensor.calc_feels_like')|float(0) %}
  219.                     {% if lev < -7 %}
  220.                       color: lightblue;
  221.                       text-shadow: 1px 1px 4px blue;
  222.                       font-weight: 700;
  223.                      
  224.                     {% elif lev > 27 %}
  225.                       color: crimson;
  226.                       text-shadow: 1px 1px 4px salmon;
  227.                       font-weight: 700;
  228.                       top: 50%;
  229.                     {% else %}
  230.                       color: white;
  231.                     {% endif %}
  232.                 }
  233.             entity: sensor.calc_feels_like
  234.             prefix: "Feels: "
  235.           - type: state-label
  236.             style:
  237.               transform: none
  238.               right: 41%
  239.               top: 28%
  240.               font-size: 120%
  241.             entity: sensor.openweathermap_uv_index
  242.             card_mod:
  243.               style: |
  244.                :host {
  245.                     {% set lev = states('sensor.openweathermap_uv_index')|float(0) %}
  246.                     {% if lev > 8 %}
  247.                       color: red;
  248.                       text-shadow: 1px 1px 4px crimson;
  249.                       font-weight: 700;
  250.                      
  251.                     {% elif lev > 6 %}
  252.                       color: orange;
  253.                       text-shadow: 1px 1px 4px salmon;
  254.                       font-weight: 700;
  255.                       top: 50%;
  256.                     {% else %}
  257.                       color: silver;
  258.                     {% endif %}
  259.                 }
  260.           - type: custom:mini-graph-card
  261.             style:
  262.               transform: none
  263.               transform-origin: bottom right
  264.               bottom: 32%
  265.               right: 2%
  266.               width: 100%
  267.               scale: 1.3
  268.             entities:
  269.              - sensor.outdoor_temp
  270.             graph: line
  271.             hour24: false
  272.             hours_to_show: 24
  273.             points_per_hour: 6
  274.             decimals: 1
  275.             name: Raw Temp
  276.             show:
  277.               extrema: false
  278.               icon: false
  279.               name: false
  280.               legend: false
  281.               labels: false
  282.               state: false
  283.             color_thresholds:
  284.               - value: -20
  285.                 color: "#08306b"
  286.               - value: -16
  287.                 color: "#08519c"
  288.               - value: -12
  289.                 color: "#2171b5"
  290.               - value: -10
  291.                 color: "#4292c6"
  292.               - value: -8
  293.                 color: "#6baed6"
  294.               - value: -6
  295.                 color: "#9ecae1"
  296.               - value: -4
  297.                 color: "#c6dbef"
  298.               - value: -2
  299.                 color: "#deebf7"
  300.               - value: 0
  301.                 color: "#ffffff"
  302.               - value: 2
  303.                 color: "#ffffff"
  304.               - value: 4
  305.                 color: "#fee0d2"
  306.               - value: 6
  307.                 color: "#fcbba1"
  308.               - value: 9
  309.                 color: "#fc9272"
  310.               - value: 12
  311.                 color: "#fb6a4a"
  312.               - value: 15
  313.                 color: "#ef3b2c"
  314.               - value: 18
  315.                 color: "#cb181d"
  316.               - value: 22
  317.                 color: "#a50f15"
  318.               - value: 26
  319.                 color: "#8a0113"
  320.               - value: 30
  321.                 color: "#bf021b"
  322.             card_mod:
  323.               style: |
  324.                ha-card {
  325.                   font-size: 90% !important;
  326.                   padding-top: 30px !important;
  327.                   background: rgba(0,0,0,0) !important;
  328.                 }
  329.                 :host {
  330.                   width: 40% !important;
  331.                   border: 1px solid grey;
  332.                   border-radius: 8px;
  333.                 }
  334.           - type: state-label
  335.             style:
  336.               transform: none
  337.               left: 45%
  338.               bottom: 50%
  339.               font-size: 90%
  340.               color: white
  341.             entity: sensor.dummy_blank_sensor
  342.             prefix: Temp (24h)
  343.           - type: state-label
  344.             style:
  345.               transform: none
  346.               transform-origin: bottom left
  347.               left: 45%
  348.               bottom: 45%
  349.               font-size: 80%
  350.               color: white
  351.             entity: sensor.min_outdoor_temp_24
  352.             prefix: "Min: "
  353.           - type: state-label
  354.             style:
  355.               transform: none
  356.               left: 45%
  357.               bottom: 41%
  358.               font-size: 80%
  359.               color: white
  360.             entity: sensor.min_outdoor_temp_24_tm
  361.           - type: state-label
  362.             style:
  363.               transform: none
  364.               transform-origin: bottom right
  365.               right: 2%
  366.               bottom: 45%
  367.               font-size: 80%
  368.               color: white
  369.             entity: sensor.max_outdoor_temp_24
  370.             prefix: "Max: "
  371.           - type: state-label
  372.             style:
  373.               transform: none
  374.               right: 2%
  375.               bottom: 41%
  376.               font-size: 80%
  377.               color: white
  378.             entity: sensor.max_outdoor_temp_24_tm
  379.           - type: custom:mini-graph-card
  380.             style:
  381.               transform: none
  382.               transform-origin: bottom right
  383.               bottom: 2%
  384.               right: 2%
  385.               width: 100%
  386.               scale: 1.3
  387.             entities:
  388.              - sensor.outdoor_humidity
  389.             graph: line
  390.             hour24: false
  391.             hours_to_show: 24
  392.             points_per_hour: 6
  393.             decimals: 1
  394.             name: Humidity
  395.             show:
  396.               extrema: false
  397.               icon: false
  398.               name: false
  399.               legend: false
  400.               labels: false
  401.               state: false
  402.             color_thresholds:
  403.               - value: 0
  404.                 color: rgb(240,0,0)
  405.               - value: 12
  406.                 color: rgb(200,66,13)
  407.               - value: 22
  408.                 color: rgb(194,134,62)
  409.               - value: 32
  410.                 color: rgb(105,173,56)
  411.               - value: 42
  412.                 color: rgb(117,203,190)
  413.               - value: 52
  414.                 color: rgb(56,174,173)
  415.               - value: 62
  416.                 color: rgb(45,157,173)
  417.               - value: 72
  418.                 color: rgb(35,147,167)
  419.               - value: 82
  420.                 color: rgb(15,132,253)
  421.               - value: 92
  422.                 color: rgb(0,70,214)
  423.             card_mod:
  424.               style: |
  425.                ha-card {
  426.                   font-size: 90% !important;
  427.                   padding-top: 30px !important;
  428.                   background: rgba(0,0,0,0) !important;
  429.                 }
  430.                 :host {
  431.                   width: 40% !important;
  432.                   border: 1px solid grey;
  433.                   border-radius: 8px;
  434.                 }
  435.           - type: state-label
  436.             style:
  437.               transform: none
  438.               left: 45%
  439.               bottom: 20%
  440.               font-size: 90%
  441.               color: white
  442.             entity: sensor.dummy_blank_sensor
  443.             prefix: Humidity (24h)
  444.           - type: state-label
  445.             style:
  446.               transform: none
  447.               left: 45%
  448.               top: 77%
  449.               font-size: 80%
  450.               color: white
  451.             entity: sensor.min_outdoor_humidity_24
  452.             prefix: "Min: "
  453.           - type: state-label
  454.             style:
  455.               transform: none
  456.               left: 45%
  457.               top: 81%
  458.               font-size: 80%
  459.               color: white
  460.             entity: sensor.min_outdoor_humidity_24_tm
  461.           - type: state-label
  462.             style:
  463.               transform: none
  464.               transform-origin: top right
  465.               right: 2%
  466.               top: 77%
  467.               font-size: 80%
  468.               color: white
  469.             entity: sensor.max_outdoor_humidity_24
  470.             prefix: "Max: "
  471.           - type: state-label
  472.             style:
  473.               transform: none
  474.               right: 2%
  475.               top: 81%
  476.               font-size: 80%
  477.               color: white
  478.             entity: sensor.max_outdoor_humidity_24_tm
  479.     columns: 1
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!