A different take on designing a Lovelace UI

Dirk_Albrecht · June 15, 2022, 5:18pm

My Sensor : plex_recently_added is not working anymore. After 20 reboots it works and then over the day its gone.

  - platform: plex_recently_added
    name: Recently Added
    token: ************
    host: **********
    port: 32400          
    max: 1 
    img_dir: / 
    image_resolution: 900```

The Token and Adress might be correct, because the upcoming-media-card is showing all data from plex.
Today i got this Error now :

Logger: homeassistant.components.sensor
Source: custom_components/plex_recently_added/sensor.py:269
Integration: Sensor (documentation, issues)
First occurred: 17:13:56 (3 occurrences)
Last logged: 17:13:57

plex_recently_added: Error on device update!
Traceback (most recent call last):
File “/usr/src/homeassistant/homeassistant/helpers/entity_platform.py”, line 431, in _async_add_entity
await entity.async_device_update(warning=False)
File “/usr/src/homeassistant/homeassistant/helpers/entity.py”, line 736, in async_device_update
await task
File “/config/custom_components/plex_recently_added/sensor.py”, line 269, in async_update
sub_sec = json.loads(sub_sec)
File “/usr/local/lib/python3.9/json/init.py”, line 339, in loads
raise TypeError(f’the JSON object must be str, bytes or bytearray, ’
TypeError: the JSON object must be str, bytes or bytearray, not NoneType

I know that the Integration is archived and so i cloned the repo and added my own, but its not working.
Maybe someone having the same and can help ?

THX

htpc2308 · June 16, 2022, 6:52am

its still under develovment, you are right there are some missing,

i dont know which version you have, here is the code until now. (only a piece)

                  let caase_fog = '/local/weather_back/fog_small.gif';
                  let caase_lightning = '/local/weather_back/lightning_small.gif';
                  let caase_snowy = '/local/weather_back/snowy_small.gif';
                  let caase_clearnight = '/local/weather_back/clear_night_small.gif';
                  let caase_sunny = '/local/weather_back/sunny_small.gif';
                  let caase_rainy = '/local/weather_back/rainy_small_new.gif';
                  let caase_cloudy = '/local/weather_back/cloudy_small.gif';
                  let caase_partly_cloudy = '/local/weather_back/partly_cloudy_small.gif';

pantomath · June 18, 2022, 12:31am

I’m having the same issue. I’m guessing someone will address this soon as it’s a result (seemingly) of the most recent update. I’ll keep my eye out and update here if I find anything.

htpc2308 · June 18, 2022, 2:27pm

@Mattias_Persson

hey
i tried to control a light group, but i had a few problems, but first here is my code:

- type: custom:button-card
                    entity: light.garten_lights
                    name: Lampen
                    template:
                      - light
                      - icon_hue

here is my light group in my configuration.yaml

light:
 
       
  - platform: group
    name: "Garten Lights"
    entities:
      - light.garten1
      - light.garten_steinbeet
      - light.garten_kugel
      - light.garten_rosen
      - light.garten_schuppen

here are the values of my lights in the light group

min_mireds: 140
max_mireds: 650
effect_list:
  - colorloop
supported_color_modes:
  - color_temp
  - hs
  - xy
color_mode: color_temp
brightness: 254
color_temp: 500
hs_color:
  - 30.601
  - 94.547
rgb_color:
  - 255
  - 136
  - 13
xy_color:
  - 0.599
  - 0.382
entity_id:
  - light.garten1
  - light.garten_steinbeet
  - light.garten_kugel
  - light.garten_rosen
  - light.garten_schuppen
icon: mdi:lightbulb-group
friendly_name: Garten Lights
supported_features: 44

when i now click on the card in the lovelace, he switches the lights on, but sometimes only 2/5. the same problem is by switching them on.

Than the color change work only sometimes for all lights, when i for example use red, 3/5 or 1/5 changes the color. but the rest is still white.

and when i try to open the popup with hold action, there is no popup, its comes nothing.

is this a problem with a light group and your UI?

lingpin · June 18, 2022, 5:06pm

Hi

Does anyone know how to add some space here after omitting the sidebar? I try to adjust with the gird layout but either there’s no space or it’s too big, as big as the sidebar before.

Thanks for the help!

fabianluque · June 18, 2022, 6:36pm

layout:
      grid-gap: var(--custom-layout-card-padding)
      grid-template-columns: 0 1fr 1fr 1fr 0
      grid-template-areas: |
        ". .         .         .       ."
        ". climate   lights    others  ."

wjbridge · June 19, 2022, 1:27am

Is there any update on this?

weaverprojects · June 19, 2022, 6:44am

@Mattias_Persson how can I see the next events on my garbage calendar in the sidebar? I’ve got the ical integration ready and some sensors like: sensor.ical_abfallkalender, sensor.ical_abfallkalender_event_0, sensor.ical_abfallkalender_event_1, sensor.ical_abfallkalender_event_2.

Maybe someone having the same and can help?

thx

weaverprojects · June 19, 2022, 3:30pm

I’ve played a little bit with the code and now I got this:

calendar: >
  {{ states('sensor.ical_abfallkalender_event_0') }},
  {{ states('sensor.ical_abfallkalender_event_1') }},
  {{ states('sensor.ical_abfallkalender_event_2') }}

but how can I display by example: the garbage will be picked up tomorrow!

thx

slofii · June 20, 2022, 6:51am

You mean something like this?

My Code is like this:

        waste_collection: |
          {%- set start_time = state_attr('calendar.ics', 'start_time') %}
          {%- set end_time = state_attr('calendar.ics', 'end_time') %}
          {%- set abfall = state_attr('calendar.ics', 'message') %}
          {%- if start_time != None %}
            {%- set time = as_timestamp(start_time) | timestamp_custom('%H:%M') %}
            {%- set time_end = as_timestamp(end_time) | timestamp_custom('%H:%M') %}
            {%- set hours = as_timestamp(start_time) | timestamp_custom('%H') | int(default=0) / 24 %}
            {%- set count = (as_timestamp(start_time) - as_timestamp(now())) / 86400 - hours %}
          
            {%- if count <= 0.0 %}
              <b>Heute ist {{ abfall | replace('Abfuhr: ', '') }}</b>
            {% elif count <= 1.0 %}
              Morgen ist {{ abfall | replace('Abfuhr: ', '') }}
            {%- else %}
              In {{ (count + hours) | round }} Tagen ist 
              {{ abfall | replace('Abfuhr: ', '') }}
            {%- endif %}
          {%- endif %}

djoaza · June 20, 2022, 11:17am

Unfortunately, I don’t see it or I don’t know how to set it up. Maybe someone knows how to do it?

morph · June 20, 2022, 6:38pm

Hi everyone,

i would like to give this a try, and copied all the files i need.

When i want to restart it comes:

Error loading /config/configuration.yaml: mapping values are not allowed here
in “/config/include/themes.yaml”, line 28, column 66

Can someone give me a help? Thanks

weaverprojects · June 21, 2022, 4:04am

thx for the code it works now…

htpc2308 · June 21, 2022, 9:04am

show us the line

htpc2308 · June 21, 2022, 9:43am

I modified the hue led stripe icon so that it shows the selected color, maybe someone can use it

led_stripe_icon

icon_ledstripe:
    styles:
      custom_fields:
        icon:
          - width: 80%
          - margin-left: -14%
          - margin-top: 1%
    custom_fields:
      icon: >
        [[[
          let state = variables.state_on && variables.timeout < 2000 ? 'on' : null;
          return `
            <svg viewBox="0 0 1000 1000">
              <style>
                @keyframes on {
                  0% {
                    transform: scale(0.85);
                  }
                  20% {
                    transform: scale(1.1);
                  }
                  40% {
                    transform: scale(0.95);
                  }
                  60% {
                    transform: scale(1.03);
                  }
                  80% {
                    transform: scale(0.97);
                  }
                  100% {
                    transform: scale(1);
                  }
                }
                .on {
                  animation: on 0.0s;
                  transform-origin: center;
                }
              </style>
              <g transform="matrix(0.9132 0 0 0.5374 160.0803 150.5775)" id="302336">
                <path style="stroke: rgb(0,153,255); stroke-width: 5; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-46.5001, -78.5)" d="M 2.6167 78.5 C 2.6167 57.2341 7.7391 38.064 15.8764 24.2946 C 24.0482 10.4665 34.9664 2.5 46.5001 2.5 C 58.0338 2.5 68.952 10.4665 77.1238 24.2946 C 85.2611 38.064 90.3835 57.2341 90.3835 78.5 C 90.3835 99.7659 85.2611 118.936 77.1238 132.705 C 68.952 146.533 58.0338 154.5 46.5001 154.5 C 34.9664 154.5 24.0482 146.533 15.8764 132.705 C 7.7391 118.936 2.6167 99.7659 2.6167 78.5 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1 0 0 1 836.6667 816.6667)" id="673002">
                <path class="${state}" fill="var(--light-color)" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-67.5, -67.5)" d="M 67.5 135 C 104.779 135 135 104.779 135 67.5 C 135 30.2208 104.779 0 67.5 0 C 30.2208 0 0 30.2208 0 67.5 C 0 104.779 30.2208 135 67.5 135 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1 0 0 1 643.3333 816.6667)" id="692091">
                <path class="${state}" fill="var(--light-color)" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-67.5, -67.5)" d="M 67.5 135 C 104.779 135 135 104.779 135 67.5 C 135 30.2208 104.779 0 67.5 0 C 30.2208 0 0 30.2208 0 67.5 C 0 104.779 30.2208 135 67.5 135 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1 0 0 1 465 816.6667)" id="373587">
                <path class="${state}" fill="var(--light-color)" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-67.5, -67.5)" d="M 67.5 135 C 104.779 135 135 104.779 135 67.5 C 135 30.2208 104.779 0 67.5 0 C 30.2208 0 0 30.2208 0 67.5 C 0 104.779 30.2208 135 67.5 135 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1 0 0 1 273.3333 816.6667)" id="920015">
                <path class="${state}" fill="var(--light-color)" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none;  fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-67.5, -67.5)" d="M 67.5 135 C 104.779 135 135 104.779 135 67.5 C 135 30.2208 104.779 0 67.5 0 C 30.2208 0 0 30.2208 0 67.5 C 0 104.779 30.2208 135 67.5 135 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1 0 0 1 236.6667 553.3333)" id="706203">
                <path class="${state}" fill="var(--light-color)" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none;  fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-67.5, -67.5)" d="M 67.5 135 C 104.779 135 135 104.779 135 67.5 C 135 30.2208 104.779 0 67.5 0 C 30.2208 0 0 30.2208 0 67.5 C 0 104.779 30.2208 135 67.5 135 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1 0 0 1 418.3333 515)" id="750381">
                <path class="${state}" fill="var(--light-color)" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none;  fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-67.5, -67.5)" d="M 67.5 135 C 104.779 135 135 104.779 135 67.5 C 135 30.2208 104.779 0 67.5 0 C 30.2208 0 0 30.2208 0 67.5 C 0 104.779 30.2208 135 67.5 135 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1 0 0 1 796.6667 433.3333)" id="600502">
                <path class="${state}" fill="var(--light-color)" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none;  fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-67.5, -67.5)" d="M 67.5 135 C 104.779 135 135 104.779 135 67.5 C 135 30.2208 104.779 0 67.5 0 C 30.2208 0 0 30.2208 0 67.5 C 0 104.779 30.2208 135 67.5 135 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1 0 0 1 591.6667 480)" id="976047">
                <path class="${state}" fill="var(--light-color)" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none;  fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-67.5, -67.5)" d="M 67.5 135 C 104.779 135 135 104.779 135 67.5 C 135 30.2208 104.779 0 67.5 0 C 30.2208 0 0 30.2208 0 67.5 C 0 104.779 30.2208 135 67.5 135 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1 0 0 1 170 150.579)" id="17941">
                <path class="${state}" fill="var(--light-color)" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none;  fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-67.5, -67.5)" d="M 67.5 135 C 104.779 135 135 104.779 135 67.5 C 135 30.2208 104.779 0 67.5 0 C 30.2208 0 0 30.2208 0 67.5 C 0 104.779 30.2208 135 67.5 135 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1 0 0 1 350 150.579)" id="609102">
                <path class="${state}" fill="var(--light-color)" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-67.5, -67.5)" d="M 67.5 135 C 104.779 135 135 104.779 135 67.5 C 135 30.2208 104.779 0 67.5 0 C 30.2208 0 0 30.2208 0 67.5 C 0 104.779 30.2208 135 67.5 135 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1 0 0 1 550 150.579)" id="951104">
                <path class="${state}" fill="var(--light-color)" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none;  fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-67.5, -67.5)" d="M 67.5 135 C 104.779 135 135 104.779 135 67.5 C 135 30.2208 104.779 0 67.5 0 C 30.2208 0 0 30.2208 0 67.5 C 0 104.779 30.2208 135 67.5 135 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1 0 0 1 731.6667 150.579)" id="14399">
                <path class="${state}" fill="var(--light-color)" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none;  fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-67.5, -67.5)" d="M 67.5 135 C 104.779 135 135 104.779 135 67.5 C 135 30.2208 104.779 0 67.5 0 C 30.2208 0 0 30.2208 0 67.5 C 0 104.779 30.2208 135 67.5 135 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(50.5051 0 0 50.5051 500.0004 491.3674)" id="361987">
                <path style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill: #9da0a2; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12, -12)" d="M 6.33 12.5 c 0.41 -0.09 0.8 0.17 0.89 0.58 c 0.09 0.4 -0.17 0.8 -0.57 0.89 c -0.41 0.09 -0.8 -0.17 -0.89 -0.57 C 5.67 12.99 5.93 12.59 6.33 12.5 M 10 11.71 c 0.4 -0.09 0.8 0.17 0.89 0.57 c 0.09 0.41 -0.17 0.8 -0.57 0.89 C 9.91 13.26 9.51 13 9.42 12.6 C 9.33 12.2 9.59 11.8 10 11.71 M 13.66 10.92 c 0.41 -0.09 0.8 0.17 0.89 0.57 c 0.09 0.41 -0.17 0.8 -0.57 0.89 c -0.4 0.09 -0.8 -0.17 -0.89 -0.57 C 13 11.4 13.25 11 13.66 10.92 M 17.32 10.12 c 0.41 -0.09 0.8 0.17 0.89 0.57 c 0.09 0.4 -0.17 0.8 -0.57 0.89 c -0.41 0.09 -0.8 -0.17 -0.89 -0.57 C 16.66 10.61 16.92 10.21 17.32 10.12 M 8 15.48 l 11.1 -2.4 c 0.81 -0.17 1.32 -0.97 1.15 -1.78 c -0.42 -1.94 -2.33 -3.17 -4.26 -2.75 L 4.89 10.95 c -0.81 0.18 -1.32 0.97 -1.15 1.78 C 4.16 14.66 6.07 15.9 8 15.48 M 18.75 19.5 c -0.41 0 -0.75 -0.34 -0.75 -0.75 S 18.34 18 18.75 18 s 0.75 0.34 0.75 0.75 S 19.16 19.5 18.75 19.5 M 15 19.5 c -0.41 0 -0.75 -0.34 -0.75 -0.75 S 14.59 18 15 18 s 0.75 0.34 0.75 0.75 S 15.41 19.5 15 19.5 M 11.25 19.5 c -0.41 0 -0.75 -0.34 -0.75 -0.75 S 10.84 18 11.25 18 S 12 18.34 12 18.75 S 11.66 19.5 11.25 19.5 M 7.5 19.5 c -0.41 0 -0.75 -0.34 -0.75 -0.75 S 7.09 18 7.5 18 s 0.75 0.34 0.75 0.75 S 7.91 19.5 7.5 19.5 M 20.25 16.5 H 6.75 c -3 0 -3.75 -2.25 -3.75 -3 v 3.75 C 3 19.32 4.68 21 6.75 21 h 13.5 c 0.41 0 0.75 -0.34 0.75 -0.75 v -3 C 21 16.84 20.66 16.5 20.25 16.5 M 16.5 6 c -0.41 0 -0.75 -0.34 -0.75 -0.75 S 16.09 4.5 16.5 4.5 s 0.75 0.34 0.75 0.75 S 16.91 6 16.5 6 M 12.75 6 C 12.34 6 12 5.66 12 5.25 s 0.34 -0.75 0.75 -0.75 s 0.75 0.34 0.75 0.75 S 13.16 6 12.75 6 M 9 6 C 8.59 6 8.25 5.66 8.25 5.25 S 8.59 4.5 9 4.5 s 0.75 0.34 0.75 0.75 S 9.41 6 9 6 M 5.25 6 C 4.84 6 4.5 5.66 4.5 5.25 S 4.84 4.5 5.25 4.5 S 6 4.84 6 5.25 S 5.66 6 5.25 6 M 17.25 3 H 3.75 C 3.34 3 3 3.34 3 3.75 v 3 C 3 7.16 3.34 7.5 3.75 7.5 h 13.5 c 3 0 3.75 2.25 3.75 3 V 6.75 C 21 4.68 19.32 3 17.25 3" stroke-linecap="round"/>
                </g>
            </svg>
          `;
        ]]]

credits go to the creator of the hue-icons
arallsopp/hass-hue-icons: Additional vector icons for home assistant to model Philips Hue bulbs and fixtures. (github.com)

weaverprojects · June 21, 2022, 3:09pm

Mega… thx

gimme more

is it possible to make the hue:wall-lucca and the hue:lily?

htpc2308 · June 21, 2022, 7:15pm

you mean me?

here is the lucca

lucca

icon_wall_lucca:
    styles:
      custom_fields:
        icon:
          - width: 100%
          - margin-left: -14%
          - margin-top: -20%
    custom_fields:
      icon: >
        [[[
          let state = variables.state_on && variables.timeout < 2000 ? 'on' : null;
          return `
            <svg viewBox="0 0 400 400">
              <style>
                @keyframes on {
                  0% {
                    transform: scale(0.85);
                  }
                  20% {
                    transform: scale(1.1);
                  }
                  40% {
                    transform: scale(0.95);
                  }
                  60% {
                    transform: scale(1.03);
                  }
                  80% {
                    transform: scale(0.97);
                  }
                  100% {
                    transform: scale(1);
                  }
                }
                .on {
                  animation: on 0.0s;
                  transform-origin: center;
                }
              </style>
                <g transform="matrix(1.5638 0 0 0.3241 249.9979 317.8632)" id="99443" clip-path="url(#CLIPPATH_0)">
                <clipPath id="CLIPPATH_0">
                <rect transform="matrix(1 0 0 1 0.0001 0)" x="-79" y="-79" rx="0" ry="0" width="158" height="158"/>
                </clipPath>
                <path class="${state}" fill="var(--light-color)"  style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-78.9999, -79)" d="M 106.124 -0.0000765851 H 51.8754 C 51.8303 -0.0000765851 51.7848 -0.0000765851 51.7397 -0.0000765851 C 23.1271 0.0374314 -0.0376151 23.2628 -0.000107103 51.8754 V 106.124 C -0.000107103 106.17 -0.000107103 106.215 -0.000107103 106.26 C 0.0374009 134.873 23.2628 158.037 51.8754 158 H 106.124 C 106.17 158 106.215 158 106.26 158 C 134.873 157.962 158.037 134.737 158 106.124 V 51.8754 C 158 51.8303 158 51.7848 158 51.7397 C 157.962 23.1271 134.737 -0.0375846 106.124 -0.0000765851 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1.5638 0 0 0.3612 255.4329 274.3953)" id="147299" clip-path="url(#CLIPPATH_1)">
                <clipPath id="CLIPPATH_1">
                <rect transform="matrix(1 0 0 1 0.0001 0)" x="-79" y="-79" rx="0" ry="0" width="158" height="158"/>
                </clipPath>
                <path class="${state}" fill="var(--light-color)"  style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-78.9999, -79)" d="M 106.124 -0.0000765851 H 51.8754 C 51.8303 -0.0000765851 51.7848 -0.0000765851 51.7397 -0.0000765851 C 23.1271 0.0374314 -0.0376151 23.2628 -0.000107103 51.8754 V 106.124 C -0.000107103 106.17 -0.000107103 106.215 -0.000107103 106.26 C 0.0374009 134.873 23.2628 158.037 51.8754 158 H 106.124 C 106.17 158 106.215 158 106.26 158 C 134.873 157.962 158.037 134.737 158 106.124 V 51.8754 C 158 51.8303 158 51.7848 158 51.7397 C 157.962 23.1271 134.737 -0.0375846 106.124 -0.0000765851 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1.495 0 0 0.4088 254.1784 225.2107)" id="581837" clip-path="url(#CLIPPATH_2)">
                <clipPath id="CLIPPATH_2">
                <rect transform="matrix(1 0 0 1 0.0001 0)" x="-79" y="-79" rx="0" ry="0" width="158" height="158"/>
                </clipPath>
                <path class="${state}" fill="var(--light-color)"  style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-78.9999, -79)" d="M 106.124 -0.0000765851 H 51.8754 C 51.8303 -0.0000765851 51.7848 -0.0000765851 51.7397 -0.0000765851 C 23.1271 0.0374314 -0.0376151 23.2628 -0.000107103 51.8754 V 106.124 C -0.000107103 106.17 -0.000107103 106.215 -0.000107103 106.26 C 0.0374009 134.873 23.2628 158.037 51.8754 158 H 106.124 C 106.17 158 106.215 158 106.26 158 C 134.873 157.962 158.037 134.737 158 106.124 V 51.8754 C 158 51.8303 158 51.7848 158 51.7397 C 157.962 23.1271 134.737 -0.0375846 106.124 -0.0000765851 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1.4421 0 0 0.4022 262.7506 180.5992)" id="96009" clip-path="url(#CLIPPATH_3)">
                <clipPath id="CLIPPATH_3">
                <rect transform="matrix(1 0 0 1 0.0001 0)" x="-79" y="-79" rx="0" ry="0" width="158" height="158"/>
                </clipPath>
                <path class="${state}" fill="var(--light-color)"  style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-78.9999, -79)" d="M 106.124 -0.0000765851 H 51.8754 C 51.8303 -0.0000765851 51.7848 -0.0000765851 51.7397 -0.0000765851 C 23.1271 0.0374314 -0.0376151 23.2628 -0.000107103 51.8754 V 106.124 C -0.000107103 106.17 -0.000107103 106.215 -0.000107103 106.26 C 0.0374009 134.873 23.2628 158.037 51.8754 158 H 106.124 C 106.17 158 106.215 158 106.26 158 C 134.873 157.962 158.037 134.737 158 106.124 V 51.8754 C 158 51.8303 158 51.7848 158 51.7397 C 157.962 23.1271 134.737 -0.0375846 106.124 -0.0000765851 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(13.2303 0 0 13.2303 249.9999 249.9999)" id="489464">
                <path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill: #9da0a2; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12.0002, -12.0031)" d="M 22.4 16.69 c 0 -0.03 -0.01 -0.06 -0.03 -0.09 c -0.85 -1.59 -5.92 -1.83 -8.87 -1.83 l -0.52 0 c -2.56 0.01 -5.11 0.3 -7.61 0.86 c 0.03 -0.46 0.07 -1.27 0.08 -1.58 c 0.08 -0.25 1.68 -1.33 7.49 -1.46 c 0.17 0 0.35 0 0.52 0 c 5.2 0 7.09 1.16 7.17 1.49 c 0.04 0.53 0.08 0.96 0.08 0.96 c 0.01 0.14 0.14 0.24 0.27 0.23 c 0.02 0 0.04 -0.01 0.06 -0.01 c 0.13 -0.05 1.27 -0.47 1.27 -1.26 c 0.02 -0.39 0 -0.79 -0.07 -1.17 c -0.01 -0.04 -0.02 -0.07 -0.05 -0.1 c -0.37 -0.42 -0.83 -0.75 -1.36 -0.95 l 0.01 0 c 0.57 -0.25 1.05 -0.69 1.35 -1.24 c 0.02 -0.04 0.03 -0.08 0.03 -0.12 c 0 -0.39 -0.02 -0.77 -0.06 -1.16 c 0 -0.03 -0.01 -0.05 -0.02 -0.08 c -0.26 -0.46 -0.66 -0.82 -1.13 -1.05 c 0.45 -0.26 1.14 -0.76 1.14 -1.41 c 0.02 -0.29 0 -0.58 -0.05 -0.86 c -0.01 -0.05 -0.02 -0.12 -0.04 -0.21 c 0 -0.02 -0.01 -0.04 -0.02 -0.06 c -0.65 -1.53 -3.18 -2.31 -7.96 -2.45 c -0.46 -0.01 -0.9 -0.02 -1.3 -0.02 c -2.03 -0.04 -4.04 0.24 -5.99 0.82 c -1.8 0.51 -2.96 1.68 -2.98 2.05 l 0 0.07 C 3.83 6.26 3.81 6.61 3.81 6.86 c 0 0.14 0.02 0.27 0.07 0.41 L 1.69 8.51 C 1.61 8.55 1.56 8.64 1.56 8.73 v 10.91 c 0 0.13 0.1 0.24 0.22 0.25 l 9.81 1 l 0.03 0 c 0.03 0 0.06 -0.01 0.09 -0.02 c 0.02 -0.01 1.54 -0.57 3.12 -1.09 c 4.63 -0.06 7.52 -1.18 7.55 -2.18 c 0 -0.13 0.01 -0.26 0.04 -0.38 C 22.45 17.05 22.45 16.87 22.4 16.69 z M 20.74 17.8 c 0 0.02 -0.02 0.05 -0.03 0.06 c -0.62 0.68 -5.16 0.99 -8.19 0.99 c -5.91 0 -7.15 -0.51 -7.15 -0.94 c 0 -0.65 3.01 -1.35 8.06 -1.4 l 0.34 0 C 18.06 16.5 20.68 17.16 20.74 17.8 z M 20.29 7.81 c -2.36 -0.68 -4.82 -0.98 -7.28 -0.89 c -2.49 0.02 -4.97 0.37 -7.36 1.04 c -0.01 -0.37 0.01 -0.74 0.06 -1.1 c 0.1 -0.37 1.7 -1.85 7.21 -1.85 l 0.32 0 c 6.4 0.06 6.97 1.52 6.98 1.54 C 20.21 6.76 20.26 7.42 20.29 7.81 L 20.29 7.81 z M 20.58 11.67 c -1.88 -0.69 -4.74 -0.77 -7.34 -0.85 L 13 10.82 c -0.16 0 -0.32 -0.01 -0.48 -0.01 c -2.36 0.06 -4.71 0.38 -7 0.95 l 0.05 -1.34 c 0.07 -0.32 1.64 -1.64 7.48 -1.64 c 5.96 0 7.39 1.22 7.42 1.65 c 0.02 0.28 0.03 0.4 0.03 0.54 c 0 0.13 0.01 0.28 0.03 0.58 C 20.54 11.6 20.55 11.64 20.58 11.67 L 20.58 11.67 z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(13.2303 0 0 13.2303 249.9999 249.9999)" id="77547">
                <path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill: #9da0a2; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12.0002, -12.0031)" d="M 22.4 16.69 c 0 -0.03 -0.01 -0.06 -0.03 -0.09 c -0.85 -1.59 -5.92 -1.83 -8.87 -1.83 l -0.52 0 c -2.56 0.01 -5.11 0.3 -7.61 0.86 c 0.03 -0.46 0.07 -1.27 0.08 -1.58 c 0.08 -0.25 1.68 -1.33 7.49 -1.46 c 0.17 0 0.35 0 0.52 0 c 5.2 0 7.09 1.16 7.17 1.49 c 0.04 0.53 0.08 0.96 0.08 0.96 c 0.01 0.14 0.14 0.24 0.27 0.23 c 0.02 0 0.04 -0.01 0.06 -0.01 c 0.13 -0.05 1.27 -0.47 1.27 -1.26 c 0.02 -0.39 0 -0.79 -0.07 -1.17 c -0.01 -0.04 -0.02 -0.07 -0.05 -0.1 c -0.37 -0.42 -0.83 -0.75 -1.36 -0.95 l 0.01 0 c 0.57 -0.25 1.05 -0.69 1.35 -1.24 c 0.02 -0.04 0.03 -0.08 0.03 -0.12 c 0 -0.39 -0.02 -0.77 -0.06 -1.16 c 0 -0.03 -0.01 -0.05 -0.02 -0.08 c -0.26 -0.46 -0.66 -0.82 -1.13 -1.05 c 0.45 -0.26 1.14 -0.76 1.14 -1.41 c 0.02 -0.29 0 -0.58 -0.05 -0.86 c -0.01 -0.05 -0.02 -0.12 -0.04 -0.21 c 0 -0.02 -0.01 -0.04 -0.02 -0.06 c -0.65 -1.53 -3.18 -2.31 -7.96 -2.45 c -0.46 -0.01 -0.9 -0.02 -1.3 -0.02 c -2.03 -0.04 -4.04 0.24 -5.99 0.82 c -1.8 0.51 -2.96 1.68 -2.98 2.05 l 0 0.07 C 3.83 6.26 3.81 6.61 3.81 6.86 c 0 0.14 0.02 0.27 0.07 0.41 L 1.69 8.51 C 1.61 8.55 1.56 8.64 1.56 8.73 v 10.91 c 0 0.13 0.1 0.24 0.22 0.25 l 9.81 1 l 0.03 0 c 0.03 0 0.06 -0.01 0.09 -0.02 c 0.02 -0.01 1.54 -0.57 3.12 -1.09 c 4.63 -0.06 7.52 -1.18 7.55 -2.18 c 0 -0.13 0.01 -0.26 0.04 -0.38 C 22.45 17.05 22.45 16.87 22.4 16.69 z M 20.74 17.8 c 0 0.02 -0.02 0.05 -0.03 0.06 c -0.62 0.68 -5.16 0.99 -8.19 0.99 c -5.91 0 -7.15 -0.51 -7.15 -0.94 c 0 -0.65 3.01 -1.35 8.06 -1.4 l 0.34 0 C 18.06 16.5 20.68 17.16 20.74 17.8 z M 20.29 7.81 c -2.36 -0.68 -4.82 -0.98 -7.28 -0.89 c -2.49 0.02 -4.97 0.37 -7.36 1.04 c -0.01 -0.37 0.01 -0.74 0.06 -1.1 c 0.1 -0.37 1.7 -1.85 7.21 -1.85 l 0.32 0 c 6.4 0.06 6.97 1.52 6.98 1.54 C 20.21 6.76 20.26 7.42 20.29 7.81 L 20.29 7.81 z M 20.58 11.67 c -1.88 -0.69 -4.74 -0.77 -7.34 -0.85 L 13 10.82 c -0.16 0 -0.32 -0.01 -0.48 -0.01 c -2.36 0.06 -4.71 0.38 -7 0.95 l 0.05 -1.34 c 0.07 -0.32 1.64 -1.64 7.48 -1.64 c 5.96 0 7.39 1.22 7.42 1.65 c 0.02 0.28 0.03 0.4 0.03 0.54 c 0 0.13 0.01 0.28 0.03 0.58 C 20.54 11.6 20.55 11.64 20.58 11.67 L 20.58 11.67 z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(13.2303 0 0 13.2303 249.9999 249.9999)" id="700063">
                <path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill: #9da0a2; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12.0002, -12.0031)" d="M 22.4 16.69 c 0 -0.03 -0.01 -0.06 -0.03 -0.09 c -0.85 -1.59 -5.92 -1.83 -8.87 -1.83 l -0.52 0 c -2.56 0.01 -5.11 0.3 -7.61 0.86 c 0.03 -0.46 0.07 -1.27 0.08 -1.58 c 0.08 -0.25 1.68 -1.33 7.49 -1.46 c 0.17 0 0.35 0 0.52 0 c 5.2 0 7.09 1.16 7.17 1.49 c 0.04 0.53 0.08 0.96 0.08 0.96 c 0.01 0.14 0.14 0.24 0.27 0.23 c 0.02 0 0.04 -0.01 0.06 -0.01 c 0.13 -0.05 1.27 -0.47 1.27 -1.26 c 0.02 -0.39 0 -0.79 -0.07 -1.17 c -0.01 -0.04 -0.02 -0.07 -0.05 -0.1 c -0.37 -0.42 -0.83 -0.75 -1.36 -0.95 l 0.01 0 c 0.57 -0.25 1.05 -0.69 1.35 -1.24 c 0.02 -0.04 0.03 -0.08 0.03 -0.12 c 0 -0.39 -0.02 -0.77 -0.06 -1.16 c 0 -0.03 -0.01 -0.05 -0.02 -0.08 c -0.26 -0.46 -0.66 -0.82 -1.13 -1.05 c 0.45 -0.26 1.14 -0.76 1.14 -1.41 c 0.02 -0.29 0 -0.58 -0.05 -0.86 c -0.01 -0.05 -0.02 -0.12 -0.04 -0.21 c 0 -0.02 -0.01 -0.04 -0.02 -0.06 c -0.65 -1.53 -3.18 -2.31 -7.96 -2.45 c -0.46 -0.01 -0.9 -0.02 -1.3 -0.02 c -2.03 -0.04 -4.04 0.24 -5.99 0.82 c -1.8 0.51 -2.96 1.68 -2.98 2.05 l 0 0.07 C 3.83 6.26 3.81 6.61 3.81 6.86 c 0 0.14 0.02 0.27 0.07 0.41 L 1.69 8.51 C 1.61 8.55 1.56 8.64 1.56 8.73 v 10.91 c 0 0.13 0.1 0.24 0.22 0.25 l 9.81 1 l 0.03 0 c 0.03 0 0.06 -0.01 0.09 -0.02 c 0.02 -0.01 1.54 -0.57 3.12 -1.09 c 4.63 -0.06 7.52 -1.18 7.55 -2.18 c 0 -0.13 0.01 -0.26 0.04 -0.38 C 22.45 17.05 22.45 16.87 22.4 16.69 z M 20.74 17.8 c 0 0.02 -0.02 0.05 -0.03 0.06 c -0.62 0.68 -5.16 0.99 -8.19 0.99 c -5.91 0 -7.15 -0.51 -7.15 -0.94 c 0 -0.65 3.01 -1.35 8.06 -1.4 l 0.34 0 C 18.06 16.5 20.68 17.16 20.74 17.8 z M 20.29 7.81 c -2.36 -0.68 -4.82 -0.98 -7.28 -0.89 c -2.49 0.02 -4.97 0.37 -7.36 1.04 c -0.01 -0.37 0.01 -0.74 0.06 -1.1 c 0.1 -0.37 1.7 -1.85 7.21 -1.85 l 0.32 0 c 6.4 0.06 6.97 1.52 6.98 1.54 C 20.21 6.76 20.26 7.42 20.29 7.81 L 20.29 7.81 z M 20.58 11.67 c -1.88 -0.69 -4.74 -0.77 -7.34 -0.85 L 13 10.82 c -0.16 0 -0.32 -0.01 -0.48 -0.01 c -2.36 0.06 -4.71 0.38 -7 0.95 l 0.05 -1.34 c 0.07 -0.32 1.64 -1.64 7.48 -1.64 c 5.96 0 7.39 1.22 7.42 1.65 c 0.02 0.28 0.03 0.4 0.03 0.54 c 0 0.13 0.01 0.28 0.03 0.58 C 20.54 11.6 20.55 11.64 20.58 11.67 L 20.58 11.67 z" stroke-linecap="round"/>
                </g>
            </svg>
          `;
        ]]]

morph · June 21, 2022, 8:38pm

    <meta name="optimizely-datafile" content="{&quot;groups&quot;: [], &quot;environmentKey&quot;: &quot;production&quot;, &quot;rollouts&quot;: [], &quot;typedAudiences&quot;: [], &quot;projectId&quot;: &quot;16737760170&quot;, &quot;variables&quot;: [], &quot;featureFlags&quot;: [], &quot;experiments&quot;: [{&quot;status&quot;: &quot;Running&quot;, &quot;audienceIds&quot;: [], &quot;variations&quot;: [{&quot;variables&quot;: [], &quot;id&quot;: &quot;20667381018&quot;, &quot;key&quot;: &quot;control&quot;}, {&quot;variables&quot;: [], &quot;id&quot;: &quot;20680930759&quot;, &quot;key&quot;: &quot;treatment&quot;}], &quot;id&quot;: &quot;20652570897&quot;, &quot;key&quot;: &quot;project_genesis&quot;, &quot;layerId&quot;: &quot;20672300363&quot;, &quot;trafficAllocation&quot;: [{&quot;entityId&quot;: &quot;20667381018&quot;, &quot;endOfRange&quot;: 5000}, {&quot;entityId&quot;: &quot;20680930759&quot;, &quot;endOfRange&quot;: 10000}], &quot;forcedVariations&quot;: {&quot;83356e17066d336d1803024138ecb683&quot;: &quot;treatment&quot;, &quot;18e31c8a9b2271332466133162a4aa0d&quot;: &quot;treatment&quot;, &quot;10f8ab3fbc5ebe989a36a05f79d48f32&quot;: &quot;treatment&quot;, &quot;1686089f6d540cd2deeaec60ee43ecf7&quot;: &quot;treatment&quot;}}, {&quot;status&quot;: &quot;Running&quot;, &quot;audienceIds&quot;: [], &quot;variations&quot;: [{&quot;variables&quot;: [], &quot;id&quot;: &quot;21427950901&quot;, &quot;key&quot;: &quot;control&quot;}, {&quot;variables&quot;: [], &quot;id&quot;: &quot;21429710665&quot;, &quot;key&quot;: &quot;beginner&quot;}, {&quot;variables&quot;: [], &quot;id&quot;: &quot;21437291543&quot;, &quot;key&quot;: &quot;upstart&quot;}], &quot;id&quot;: &quot;21445030708&quot;, &quot;key&quot;: &quot;_259_zero_user_dashboard&quot;, &quot;layerId&quot;: &quot;21434011841&quot;, &quot;trafficAllocation&quot;: [{&quot;entityId&quot;: &quot;21427950901&quot;, &quot;endOfRange&quot;: 3334}, {&quot;entityId&quot;: &quot;21427950901&quot;, &quot;endOfRange&quot;: 5000}, {&quot;entityId&quot;: &quot;21427950901&quot;, &quot;endOfRange&quot;: 8333}, {&quot;entityId&quot;: &quot;21427950901&quot;, &quot;endOfRange&quot;: 10000}], &quot;forcedVariations&quot;: {&quot;3c64268131793aa297119a343c19e345&quot;: &quot;beginner&quot;, &quot;95b24126db31ea8693c0fe5ea9f53b65&quot;: &quot;beginner&quot;, &quot;086e2abe64e9101112af53b95d2d90b9&quot;: &quot;upstart&quot;, &quot;bae688df9d297afac98e2d254e912ada&quot;: &quot;control&quot;, &quot;6c2cfda7c41396fcc31a4db759a42b94&quot;: &quot;beginner&quot;, &quot;16ed2b4ff7de02663b7c606309695916&quot;: &quot;control&quot;, &quot;1971768911.1635962195&quot;: &quot;beginner&quot;, &quot;830bf802470ec6c9c5800c99d8e57445&quot;: &quot;beginner&quot;}}], &quot;version&quot;: &quot;4&quot;, &quot;audiences&quot;: [{&quot;conditions&quot;: &quot;[\&quot;or\&quot;, {\&quot;match\&quot;: \&quot;exact\&quot;, \&quot;name\&quot;: \&quot;$opt_dummy_attribute\&quot;, \&quot;type\&quot;: \&quot;custom_attribute\&quot;, \&quot;value\&quot;: \&quot;$opt_dummy_value\&quot;}]&quot;, &quot;id&quot;: &quot;$opt_dummy_audience&quot;, &quot;name&quot;: &quot;Optimizely-Generated Audience for Backwards Compatibility&quot;}], &quot;anonymizeIP&quot;: true, &quot;sdkKey&quot;: &quot;WTc6awnGuYDdG98CYRban&quot;, &quot;attributes&quot;: [{&quot;id&quot;: &quot;16822470375&quot;, &quot;key&quot;: &quot;user_id&quot;}, {&quot;id&quot;: &quot;17143601254&quot;, &quot;key&quot;: &quot;spammy&quot;}, {&quot;id&quot;: &quot;18175660309&quot;, &quot;key&quot;: &quot;organization_plan&quot;}, {&quot;id&quot;: &quot;18813001570&quot;, &quot;key&quot;: &quot;is_logged_in&quot;}, {&quot;id&quot;: &quot;19073851829&quot;, &quot;key&quot;: &quot;geo&quot;}, {&quot;id&quot;: &quot;20175462351&quot;, &quot;key&quot;: &quot;requestedCurrency&quot;}, {&quot;id&quot;: &quot;20785470195&quot;, &quot;key&quot;: &quot;country_code&quot;}, {&quot;id&quot;: &quot;21656311196&quot;, &quot;key&quot;: &quot;opened_downgrade_dialog&quot;}], &quot;botFiltering&quot;: false, &quot;accountId&quot;: &quot;16737760170&quot;, &quot;events&quot;: [{&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;17911811441&quot;, &quot;key&quot;: &quot;hydro_click.dashboard.teacher_toolbox_cta&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18124116703&quot;, &quot;key&quot;: &quot;submit.organizations.complete_sign_up&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18145892387&quot;, &quot;key&quot;: &quot;no_metric.tracked_outside_of_optimizely&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18178755568&quot;, &quot;key&quot;: &quot;click.org_onboarding_checklist.add_repo&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18180553241&quot;, &quot;key&quot;: &quot;submit.repository_imports.create&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18186103728&quot;, &quot;key&quot;: &quot;click.help.learn_more_about_repository_creation&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18188530140&quot;, &quot;key&quot;: &quot;test_event&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18191963644&quot;, &quot;key&quot;: &quot;click.empty_org_repo_cta.transfer_repository&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18195612788&quot;, &quot;key&quot;: &quot;click.empty_org_repo_cta.import_repository&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18210945499&quot;, &quot;key&quot;: &quot;click.org_onboarding_checklist.invite_members&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18211063248&quot;, &quot;key&quot;: &quot;click.empty_org_repo_cta.create_repository&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18215721889&quot;, &quot;key&quot;: &quot;click.org_onboarding_checklist.update_profile&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18224360785&quot;, &quot;key&quot;: &quot;click.org_onboarding_checklist.dismiss&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18234832286&quot;, &quot;key&quot;: &quot;submit.organization_activation.complete&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18252392383&quot;, &quot;key&quot;: &quot;submit.org_repository.create&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18257551537&quot;, &quot;key&quot;: &quot;submit.org_member_invitation.create&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18259522260&quot;, &quot;key&quot;: &quot;submit.organization_profile.update&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18564603625&quot;, &quot;key&quot;: &quot;view.classroom_select_organization&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18568612016&quot;, &quot;key&quot;: &quot;click.classroom_sign_in_click&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18572592540&quot;, &quot;key&quot;: &quot;view.classroom_name&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18574203855&quot;, &quot;key&quot;: &quot;click.classroom_create_organization&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18582053415&quot;, &quot;key&quot;: &quot;click.classroom_select_organization&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18589463420&quot;, &quot;key&quot;: &quot;click.classroom_create_classroom&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18591323364&quot;, &quot;key&quot;: &quot;click.classroom_create_first_classroom&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18591652321&quot;, &quot;key&quot;: &quot;click.classroom_grant_access&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18607131425&quot;, &quot;key&quot;: &quot;view.classroom_creation&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;18831680583&quot;, &quot;key&quot;: &quot;upgrade_account_plan&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19064064515&quot;, &quot;key&quot;: &quot;click.signup&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19075373687&quot;, &quot;key&quot;: &quot;click.view_account_billing_page&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19077355841&quot;, &quot;key&quot;: &quot;click.dismiss_signup_prompt&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19079713938&quot;, &quot;key&quot;: &quot;click.contact_sales&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19120963070&quot;, &quot;key&quot;: &quot;click.compare_account_plans&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19151690317&quot;, &quot;key&quot;: &quot;click.upgrade_account_cta&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19424193129&quot;, &quot;key&quot;: &quot;click.open_account_switcher&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19520330825&quot;, &quot;key&quot;: &quot;click.visit_account_profile&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19540970635&quot;, &quot;key&quot;: &quot;click.switch_account_context&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19730198868&quot;, &quot;key&quot;: &quot;submit.homepage_signup&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19820830627&quot;, &quot;key&quot;: &quot;click.homepage_signup&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;19988571001&quot;, &quot;key&quot;: &quot;click.create_enterprise_trial&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20036538294&quot;, &quot;key&quot;: &quot;click.create_organization_team&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20040653299&quot;, &quot;key&quot;: &quot;click.input_enterprise_trial_form&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20062030003&quot;, &quot;key&quot;: &quot;click.continue_with_team&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20068947153&quot;, &quot;key&quot;: &quot;click.create_organization_free&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20086636658&quot;, &quot;key&quot;: &quot;click.signup_continue.username&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20091648988&quot;, &quot;key&quot;: &quot;click.signup_continue.create_account&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20103637615&quot;, &quot;key&quot;: &quot;click.signup_continue.email&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20111574253&quot;, &quot;key&quot;: &quot;click.signup_continue.password&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20120044111&quot;, &quot;key&quot;: &quot;view.pricing_page&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20152062109&quot;, &quot;key&quot;: &quot;submit.create_account&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20165800992&quot;, &quot;key&quot;: &quot;submit.upgrade_payment_form&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20171520319&quot;, &quot;key&quot;: &quot;submit.create_organization&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20222645674&quot;, &quot;key&quot;: &quot;click.recommended_plan_in_signup.discuss_your_needs&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20227443657&quot;, &quot;key&quot;: &quot;submit.verify_primary_user_email&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20234607160&quot;, &quot;key&quot;: &quot;click.recommended_plan_in_signup.try_enterprise&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20238175784&quot;, &quot;key&quot;: &quot;click.recommended_plan_in_signup.team&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20239847212&quot;, &quot;key&quot;: &quot;click.recommended_plan_in_signup.continue_free&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20251097193&quot;, &quot;key&quot;: &quot;recommended_plan&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20438619534&quot;, &quot;key&quot;: &quot;click.pricing_calculator.1_member&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20456699683&quot;, &quot;key&quot;: &quot;click.pricing_calculator.15_members&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20467868331&quot;, &quot;key&quot;: &quot;click.pricing_calculator.10_members&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20476267432&quot;, &quot;key&quot;: &quot;click.trial_days_remaining&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20476357660&quot;, &quot;key&quot;: &quot;click.discover_feature&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20479287901&quot;, &quot;key&quot;: &quot;click.pricing_calculator.custom_members&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20481107083&quot;, &quot;key&quot;: &quot;click.recommended_plan_in_signup.apply_teacher_benefits&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20483089392&quot;, &quot;key&quot;: &quot;click.pricing_calculator.5_members&quot;}, {&quot;experimentIds&quot;: [&quot;20652570897&quot;], &quot;id&quot;: &quot;20484283944&quot;, &quot;key&quot;: &quot;click.onboarding_task&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20484996281&quot;, &quot;key&quot;: &quot;click.recommended_plan_in_signup.apply_student_benefits&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20486713726&quot;, &quot;key&quot;: &quot;click.onboarding_task_breadcrumb&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20490791319&quot;, &quot;key&quot;: &quot;click.upgrade_to_enterprise&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20491786766&quot;, &quot;key&quot;: &quot;click.talk_to_us&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20494144087&quot;, &quot;key&quot;: &quot;click.dismiss_enterprise_trial&quot;}, {&quot;experimentIds&quot;: [&quot;20652570897&quot;], &quot;id&quot;: &quot;20499722759&quot;, &quot;key&quot;: &quot;completed_all_tasks&quot;}, {&quot;experimentIds&quot;: [&quot;20652570897&quot;], &quot;id&quot;: &quot;20500710104&quot;, &quot;key&quot;: &quot;completed_onboarding_tasks&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20513160672&quot;, &quot;key&quot;: &quot;click.read_doc&quot;}, {&quot;experimentIds&quot;: [&quot;20652570897&quot;], &quot;id&quot;: &quot;20516196762&quot;, &quot;key&quot;: &quot;actions_enabled&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20518980986&quot;, &quot;key&quot;: &quot;click.dismiss_trial_banner&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20535446721&quot;, &quot;key&quot;: &quot;click.issue_actions_prompt.dismiss_prompt&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20557002247&quot;, &quot;key&quot;: &quot;click.issue_actions_prompt.setup_workflow&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20595070227&quot;, &quot;key&quot;: &quot;click.pull_request_setup_workflow&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20626600314&quot;, &quot;key&quot;: &quot;click.seats_input&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20642310305&quot;, &quot;key&quot;: &quot;click.decrease_seats_number&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20662990045&quot;, &quot;key&quot;: &quot;click.increase_seats_number&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20679620969&quot;, &quot;key&quot;: &quot;click.public_product_roadmap&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20761240940&quot;, &quot;key&quot;: &quot;click.dismiss_survey_banner&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20767210721&quot;, &quot;key&quot;: &quot;click.take_survey&quot;}, {&quot;experimentIds&quot;: [&quot;20652570897&quot;], &quot;id&quot;: &quot;20795281201&quot;, &quot;key&quot;: &quot;click.archive_list&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20966790249&quot;, &quot;key&quot;: &quot;contact_sales.submit&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20996500333&quot;, &quot;key&quot;: &quot;contact_sales.existing_customer&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;20996890162&quot;, &quot;key&quot;: &quot;contact_sales.blank_message_field&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;21000470317&quot;, &quot;key&quot;: &quot;contact_sales.personal_email&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;21002790172&quot;, &quot;key&quot;: &quot;contact_sales.blank_phone_field&quot;}, {&quot;experimentIds&quot;: [&quot;21445030708&quot;], &quot;id&quot;: &quot;21354412592&quot;, &quot;key&quot;: &quot;click.dismiss_create_readme&quot;}, {&quot;experimentIds&quot;: [&quot;21445030708&quot;], &quot;id&quot;: &quot;21366102546&quot;, &quot;key&quot;: &quot;click.dismiss_zero_user_content&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;21370252505&quot;, &quot;key&quot;: &quot;account_did_downgrade&quot;}, {&quot;experimentIds&quot;: [&quot;21445030708&quot;], &quot;id&quot;: &quot;21370840408&quot;, &quot;key&quot;: &quot;click.cta_create_readme&quot;}, {&quot;experimentIds&quot;: [&quot;21445030708&quot;], &quot;id&quot;: &quot;21375451068&quot;, &quot;key&quot;: &quot;click.cta_create_new_repository&quot;}, {&quot;experimentIds&quot;: [&quot;21445030708&quot;], &quot;id&quot;: &quot;21385390948&quot;, &quot;key&quot;: &quot;click.zero_user_content&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;21467712175&quot;, &quot;key&quot;: &quot;click.downgrade_keep&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;21484112202&quot;, &quot;key&quot;: &quot;click.downgrade&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;21495292213&quot;, &quot;key&quot;: &quot;click.downgrade_survey_exit&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;21508241468&quot;, &quot;key&quot;: &quot;click.downgrade_survey_submit&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;21512030356&quot;, &quot;key&quot;: &quot;click.downgrade_support&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;21539090022&quot;, &quot;key&quot;: &quot;click.downgrade_exit&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;21543640644&quot;, &quot;key&quot;: &quot;click_fetch_upstream&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;21646510300&quot;, &quot;key&quot;: &quot;click.move_your_work&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;21656151116&quot;, &quot;key&quot;: &quot;click.add_branch_protection_rule&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;21663860599&quot;, &quot;key&quot;: &quot;click.downgrade_dialog_open&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;21687860483&quot;, &quot;key&quot;: &quot;click.learn_about_protected_branches&quot;}, {&quot;experimentIds&quot;: [], &quot;id&quot;: &quot;21689050333&quot;, &quot;key&quot;: &quot;click.dismiss_protect_this_branch&quot;}], &quot;revision&quot;: &quot;1286&quot;}" />

Can u help me?

tomerbs · June 21, 2022, 10:42pm

Hi all,

I would like to be able to change the icon color to a specific color according to state (on\off),
I was able to do it in some icons by adding the “else” option.
but it dosent work in this icon:

      icon_hue: >
        [[[ 
          const state = entity.state === 'on' ? 'on' : null;
          return `
            <svg viewBox="0 0 50 50">
              <style>
                @keyframes on {
                  0% {
                    transform: scale(0.85);
                  }
                  20% {
                    transform: scale(1.1);
                  }
                  40% {
                    transform: scale(0.95);
                  }
                  60% {
                    transform: scale(1.03);
                  }
                  80% {
                    transform: scale(0.97);
                  }
                  100% {
                    transform: scale(1);
                  }
                }
                .on {
                  animation: on 0.8s;
                  transform-origin: center;
                }
              </style>
              <path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
              <path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/>
            </svg>
          `;
        ]]]

Can you please tell me what i need to change to make it work?
Your help will be appriciated.

Thanks

weaverprojects · June 22, 2022, 4:55am

yes… thank you so much