API tools faq
paste
Advertisement
tiwing

current conditions picture-elements card yaml

tiwing
Jan 8th, 2025
399
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
YAML 18.42 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: Current Conditions
  7.       - sub-content: null
  8.   - type: vertical-stack
  9.     cards:
  10.       - square: false
  11.         type: grid
  12.         cards:
  13.           - type: picture-elements
  14.             image: /local/dashboard_photos/temperature_humidity.jpg
  15.             elements:
  16.               - type: state-label
  17.                 style:
  18.                   transform: none
  19.                   right: 1%
  20.                   top: 1%
  21.                   font-size: 200%
  22.                 card_mod:
  23.                   style: |
  24.                    :host {
  25.                         {% set lev = states('sensor.outdoor_temp_local')|float(0) %}
  26.                         {% if lev < -7 %}
  27.                           color: lightblue;
  28.                           text-shadow: 1px 1px 4px blue;
  29.                           font-weight: 600;
  30.                           font-size: 120%;
  31.                         {% elif lev > 27 %}
  32.                           color: crimson;
  33.                           text-shadow: 1px 1px 4px salmon;
  34.                           font-weight: 600;
  35.                           font-size: 120%;
  36.                         {% else %}
  37.                           color: white;
  38.                         {% endif %}
  39.                     }
  40.                 entity: sensor.outdoor_temp_local
  41.               - type: conditional
  42.                 conditions:
  43.                   - entity: sensor.outdoor_humidity
  44.                     state_not: unavailable
  45.                 title: humidity
  46.                 elements:
  47.                   - type: state-label
  48.                     style:
  49.                       transform: none
  50.                       right: 1%
  51.                       top: 17%
  52.                       font-size: 165%
  53.                       color: white
  54.                     entity: sensor.outdoor_humidity
  55.               - type: state-label
  56.                 style:
  57.                   transform: none
  58.                   right: 2%
  59.                 card_mod:
  60.                   style: |
  61.                    :host {
  62.                         {% set lev = states('sensor.calc_feels_like')|float(0) %}
  63.                         {% if lev < -7 %}
  64.                           color: lightblue;
  65.                           text-shadow: 1px 1px 4px blue;
  66.                           font-weight: 600;
  67.                           font-size: 150%;
  68.                           top: 50%;
  69.                         {% elif lev > 27 %}
  70.                           color: crimson;
  71.                           text-shadow: 1px 1px 4px salmon;
  72.                           font-weight: 600;
  73.                           font-size: 150%;
  74.                           top: 50%;
  75.                         {% else %}
  76.                           color: white;
  77.                           bottom: 9%;
  78.                         {% endif %}
  79.                     }
  80.                 entity: sensor.calc_feels_like
  81.                 prefix: "Feels: "
  82.               - type: conditional
  83.                 conditions:
  84.                   - entity: sensor.openweathermap_uv_index
  85.                     state_not: unavailable
  86.                 title: uv index
  87.                 elements:
  88.                   - type: state-label
  89.                     style:
  90.                       transform: none
  91.                       right: 2%
  92.                       bottom: 0%
  93.                       font-size: 100%
  94.                       color: silver
  95.                     entity: sensor.openweathermap_uv_index
  96.           - type: picture-elements
  97.             image: /local/dashboard_photos/wind_turbine_2.jpg
  98.             elements:
  99.               - type: conditional
  100.                 conditions:
  101.                   - condition: numeric_state
  102.                     entity: sensor.outdoor_front_pressure
  103.                     above: 4
  104.                 title: pressure
  105.                 elements:
  106.                   - type: state-label
  107.                     style:
  108.                       transform: none
  109.                       left: 1%
  110.                       bottom: 0%
  111.                       font-size: 100%
  112.                     card_mod:
  113.                       style: |
  114.                        :host {
  115.                           color:
  116.                               {% set lev = states('sensor.outdoor_front_pressure')|float(0) %}
  117.                               {% if lev > 70  %}
  118.                                 red
  119.                               {% elif lev > 40 %}
  120.                                 orange
  121.                               {% else %}
  122.                                 lightgreen
  123.                               {% endif %};
  124.                         }
  125.                     entity: sensor.outdoor_front_pressure
  126.                     prefix: "Pressure: "
  127.               - type: state-label
  128.                 style:
  129.                   transform: none
  130.                   left: 1%
  131.                   font-size: 100%
  132.                 card_mod:
  133.                   style: |
  134.                    :host {
  135.                           {% set lev = states('sensor.lincoln_wind_gust')|float(0) %}
  136.                           {% if lev > 65  %}
  137.                             color: red;
  138.                             top: 10%;
  139.                           {% elif lev > 40 %}
  140.                             color: orange;
  141.                             top: 10%;
  142.                           {% elif lev < 1  %}
  143.                             opacity: 0;
  144.                             top: 999%;
  145.                           {% else %}
  146.                             color: silver;
  147.                             top: 10%;
  148.                           {% endif %}
  149.                     }
  150.                 entity: sensor.lincoln_wind_gust
  151.                 prefix: "Gust: "
  152.               - type: conditional
  153.                 conditions:
  154.                   - condition: numeric_state
  155.                     entity: sensor.lincoln_wind_speed
  156.                     above: 4
  157.                 title: wind speed
  158.                 elements:
  159.                   - type: state-label
  160.                     style:
  161.                       left: 50%
  162.                       top: 50%
  163.                       font-size: 200%
  164.                       font-weight: 700
  165.                       color: white
  166.                     entity: sensor.lincoln_wind_direction
  167.               - type: state-label
  168.                 style:
  169.                   transform: none
  170.                   left: 1%
  171.                   font-size: 100%
  172.                 card_mod:
  173.                   style: |
  174.                    :host {
  175.                           {% set lev = states('sensor.lincoln_wind_speed')|float(0) %}
  176.                           {% if lev > 50  %}
  177.                             color: red;
  178.                             top: 1%;
  179.                           {% elif lev > 30 %}
  180.                             color: orange;
  181.                             top: 1%;
  182.                           {% elif lev < 1  %}
  183.                             opacity: 0;
  184.                             top: 999%;
  185.                           {% else %}
  186.                             color: silver;
  187.                             top: 1%;
  188.                           {% endif %}
  189.                     }
  190.                 entity: sensor.lincoln_wind_speed
  191.                 prefix: "Speed: "
  192.               - type: state-label
  193.                 style:
  194.                   transform: none
  195.                   left: 1%
  196.                   font-size: 100%
  197.                 card_mod:
  198.                   style: |
  199.                    :host {
  200.                           {% set lev = states('sensor.lincoln_chance_of_precip')|float(0) %}
  201.                           {% if lev > 70  %}
  202.                             color: silver;
  203.                             bottom: 10%;
  204.                           {% elif lev > 90 %}
  205.                             color: orange;
  206.                             bottom: 10%;
  207.                           {% elif lev < 1  %}
  208.                             opacity: 0;
  209.                             top: 999%;
  210.                           {% else %}
  211.                             color: silver;
  212.                             bottom: 10%;
  213.                           {% endif %}
  214.                     }
  215.                 entity: sensor.lincoln_chance_of_precip
  216.                 prefix: "POP: "
  217.         columns: 2
  218.       - type: picture-elements
  219.         image: /local/dashboard_photos/low_horizon_blue_1.jpg
  220.         elements:
  221.           - type: conditional
  222.             conditions:
  223.               - condition: state
  224.                 entity: sensor.next_dawn
  225.                 state_not: x
  226.             title: next dawn
  227.             elements:
  228.               - type: state-label
  229.                 style:
  230.                   transform: none
  231.                   left: 1%
  232.                   top: 0%
  233.                   font-size: 90%
  234.                 entity: sensor.next_dawn
  235.                 prefix: "Dawn: "
  236.           - type: conditional
  237.             conditions:
  238.               - condition: state
  239.                 entity: sensor.next_sunrise
  240.                 state_not: x
  241.             title: sunrise
  242.             elements:
  243.               - type: state-label
  244.                 style:
  245.                   transform: none
  246.                   left: 1%
  247.                   top: 9%
  248.                   font-size: 90%
  249.                 entity: sensor.next_sunrise
  250.                 prefix: "Sunrise: "
  251.           - type: conditional
  252.             conditions:
  253.               - condition: state
  254.                 entity: sensor.next_solar_noon_time
  255.                 state_not: x
  256.             title: sunset
  257.             elements:
  258.               - type: state-label
  259.                 style:
  260.                   transform: none
  261.                   left: 1%
  262.                   top: 17%
  263.                   font-size: 90%
  264.                 entity: sensor.next_solar_noon_time
  265.                 prefix: "Noon: "
  266.           - type: conditional
  267.             conditions:
  268.               - condition: state
  269.                 entity: sensor.next_sunset
  270.                 state_not: x
  271.             title: sunset
  272.             elements:
  273.               - type: state-label
  274.                 style:
  275.                   transform: none
  276.                   left: 1%
  277.                   top: 26%
  278.                   font-size: 90%
  279.                 entity: sensor.next_sunset
  280.                 prefix: "Sunset: "
  281.           - type: conditional
  282.             conditions:
  283.               - condition: state
  284.                 entity: sensor.next_dusk
  285.                 state_not: x
  286.             title: dusk
  287.             elements:
  288.               - type: state-label
  289.                 style:
  290.                   transform: none
  291.                   left: 1%
  292.                   top: 35%
  293.                   font-size: 90%
  294.                 entity: sensor.next_dusk
  295.                 prefix: "Dusk: "
  296.           - type: conditional
  297.             conditions:
  298.               - condition: state
  299.                 entity: sensor.sun_elevation
  300.                 state_not: x
  301.             title: sun elevation
  302.             elements:
  303.               - type: state-label
  304.                 style:
  305.                   transform: none
  306.                   left: 1%
  307.                   top: 44%
  308.                   font-size: 90%
  309.                   font-weight: 700
  310.                 entity: sensor.sun_elevation
  311.                 prefix: "Elevation: "
  312.           - type: conditional
  313.             conditions:
  314.               - condition: state
  315.                 entity: sensor.sun_azimuth
  316.                 state_not: x
  317.             title: sun azimuth
  318.             elements:
  319.               - type: state-label
  320.                 style:
  321.                   transform: none
  322.                   left: 1%
  323.                   top: 52%
  324.                   font-size: 90%
  325.                   font-weight: 700
  326.                 entity: sensor.sun_azimuth
  327.                 prefix: "Azimuth: "
  328.           - type: conditional
  329.             conditions:
  330.               - condition: state
  331.                 entity: sensor.next_moonrise
  332.                 state_not: x
  333.             title: moonrise
  334.             elements:
  335.               - type: state-label
  336.                 style:
  337.                   transform: none
  338.                   right: 1%
  339.                   top: 0%
  340.                   font-size: 90%
  341.                 entity: sensor.next_moonrise
  342.                 prefix: "Moonrise: "
  343.           - type: conditional
  344.             conditions:
  345.               - condition: state
  346.                 entity: sensor.next_moonset
  347.                 state_not: x
  348.             title: moonset
  349.             elements:
  350.               - type: state-label
  351.                 style:
  352.                   transform: none
  353.                   right: 1%
  354.                   top: 9%
  355.                   font-size: 90%
  356.                 entity: sensor.next_moonset
  357.                 prefix: "Moonset: "
  358.           - type: conditional
  359.             conditions:
  360.               - condition: state
  361.                 entity: sensor.astroweather_backyard_moon_phase
  362.                 state_not: x
  363.             title: moon illumination
  364.             elements:
  365.               - type: state-label
  366.                 style:
  367.                   transform: none
  368.                   right: 1%
  369.                   top: 17%
  370.                   font-size: 90%
  371.                   color: white
  372.                   background: rgba(255,255,255,.0)
  373.                 entity: sensor.astroweather_backyard_moon_phase
  374.                 prefix: "Illumination: "
  375.           - type: conditional
  376.             conditions:
  377.               - condition: state
  378.                 entity: sensor.moon
  379.                 state_not: x
  380.             title: moon phase
  381.             elements:
  382.               - type: state-label
  383.                 style:
  384.                   transform: none
  385.                   right: 1%
  386.                   top: 26%
  387.                   font-size: 90%
  388.                 entity: sensor.moon
  389.           - type: conditional
  390.             conditions:
  391.               - condition: state
  392.                 entity: sensor.astroweather_backyard_moon_altitude
  393.                 state_not: x
  394.             title: moon elevation
  395.             elements:
  396.               - type: state-label
  397.                 style:
  398.                   transform: none
  399.                   right: 1%
  400.                   top: 35%
  401.                   font-size: 90%
  402.                   font-weight: 700
  403.                 entity: sensor.astroweather_backyard_moon_altitude
  404.                 prefix: "Elevation: "
  405.           - type: conditional
  406.             conditions:
  407.               - condition: state
  408.                 entity: sensor.astroweather_backyard_moon_azimuth
  409.                 state_not: x
  410.             title: moon azimuth
  411.             elements:
  412.               - type: state-label
  413.                 style:
  414.                   transform: none
  415.                   right: 1%
  416.                   top: 44%
  417.                   font-size: 90%
  418.                   font-weight: 700
  419.                 entity: sensor.astroweather_backyard_moon_azimuth
  420.                 prefix: "Azimuth: "
  421.           - type: image
  422.             tap_action: none
  423.             double_tap_action: none
  424.             hold_action: none
  425.             image: /local/dashboard_photos/sun-icon.png
  426.             style:
  427.               width: 9%
  428.               min-width: 35px
  429.             card_mod:
  430.               style: |
  431.                :host {
  432.                   bottom: {{ (((states('sensor.sun_elevation')|float(0)))+4)|round(1) }}%;
  433.                   left: {{ ((states('sensor.astroweather_backyard_sun_azimuth')|float(0) / 360)*100)|round(1) }}%;
  434.                   opacity:              
  435.                     {% set ele = states('sensor.sun_elevation')|float(0) %}
  436.                     {% set ele_start = -5 %}
  437.                     {% set ele_end = 4 %}
  438.                     {% set ele_range = ele_end - ele_start %}
  439.                     {% set min_opacity = 0.07 %}
  440.                     {% set adj_ele = ele - ele_start %}
  441.                     {% set calc_opacity = adj_ele / ele_range %}
  442.                    
  443.                     {% if ele < ele_start %}
  444.                       {{ min_opacity }};
  445.                     {% elif ele > ele_end %}
  446.                       {{ "1.0" }}
  447.                     {% else %}
  448.                       {% if calc_opacity < min_opacity %}
  449.                         {{ min_opacity }}
  450.                       {% else %}
  451.                         {{ calc_opacity }}
  452.                       {% endif %}
  453.                     {% endif %}
  454.                 }
  455.           - type: image
  456.             tap_action: none
  457.             double_tap_action: none
  458.             hold_action: none
  459.             image: /local/dashboard_photos/moon-icon.png
  460.             style:
  461.               width: 5%
  462.               min-width: 22px
  463.             card_mod:
  464.               style: |
  465.                :host {
  466.                   bottom: {{ (((states('sensor.astroweather_backyard_moon_altitude')|float(0)))+4)|round(1) }}%;    
  467.                   left: {{ ((states('sensor.astroweather_backyard_moon_azimuth')|float(0) / 360)*100)|round(1) }}%;
  468.                   opacity:            
  469.                     {% set ele = states('sensor.astroweather_backyard_moon_altitude')|float(0) %}
  470.                     {% set ele_start = -6 %}
  471.                     {% set ele_end = 2 %}
  472.                     {% set ele_range = ele_end - ele_start %}
  473.                     {% set min_opacity = 0.01 %}
  474.                     {% set adj_ele = ele - ele_start %}
  475.                     {% set calc_opacity = adj_ele / ele_range %}
  476.                    
  477.                     {% if ele < ele_start %}
  478.                       {{ min_opacity }};
  479.                     {% elif ele > ele_end %}
  480.                       {{ "1.0" }}
  481.                     {% else %}
  482.                       {% if calc_opacity < min_opacity %}
  483.                         {{ min_opacity }}
  484.                       {% else %}
  485.                         {{ calc_opacity }}
  486.                       {% endif %}
  487.                     {% endif %}
  488.                 }
  489.           - type: state-label
  490.             style:
  491.               transform: none
  492.               left: 0%
  493.               bottom: 0%
  494.               font-size: 100%
  495.               font-weight: 600
  496.               color: grey
  497.             entity: sensor.dummy_blank_sensor
  498.             prefix: East
  499.             tap_action: none
  500.             double_tap_action: none
  501.             hold_action: none
  502.           - type: state-label
  503.             style:
  504.               transform: none
  505.               right: 0%
  506.               bottom: 0%
  507.               font-size: 100%
  508.               font-weight: 600
  509.               color: grey
  510.             entity: sensor.dummy_blank_sensor
  511.             tap_action: none
  512.             double_tap_action: none
  513.             hold_action: none
  514.             prefix: West
  515.  
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!