Ha-card-weather-conditions setup with ClimaCell/Tomorrow.io Integration

For some time I used the brilliant original ClimaCell integration available via HACS from Renato Rossi. I found it to be very useful for local forecasts as well as air pollution and pollen. It’s got animated icon’s and very easy to configure/tweak. The out of the box Weather card didn’t work or do it justice to the card, so I use the ha-card-weather-conditions card by Renato and hukoeth https://github.com/r-renato/ha-card-weather-conditions.

Renato’s integration was put into competition with the native climacell integration introduced in 2021.3.
That integration now works well with the tomorrow.io v4 API and so I decided to transition to the native integration which is python based and seemingly having a longer future.

The problem is the lovelace card ha-card-weather-conditions didn’t talk to the new integration. So this guide is to share how I mapped things back to the card and restored the great card to it’s rightful position on my dashboard.

The new integration uses the standard weather entity so I had to map that back to variables that the card could use. Here’s how I did it:

In configuration.yml:

# For adding Pollen:

  - platform: template
        friendly_name: Pollen Grass climacell
        icon_template: 'mdi:flower'
        value_template: >-
          {% if is_state('sensor.climacell_grass_pollen_index', 'none') %}
          {% elif is_state('sensor.climacell_grass_pollen_index','very_low') %}
          {% elif is_state('sensor.climacell_grass_pollen_index','low') %}
          {% elif is_state('sensor.climacell_grass_pollen_index','medium') %}
          {% elif is_state('sensor.climacell_grass_pollen_index','high') %}
          {% elif is_state('sensor.climacell_grass_pollen_index','very_high') %}
          {% else %}
          {% endif %}

        friendly_name: Pollen Tree climacell
        icon_template: 'mdi:tree'
        value_template: >-
          {% if is_state('sensor.climacell_tree_pollen_index', 'none') %}
          {% elif is_state('sensor.climacell_tree_pollen_index','very_low') %}
          {% elif is_state('sensor.climacell_tree_pollen_index','low') %}
          {% elif is_state('sensor.climacell_tree_pollen_index','medium') %}
          {% elif is_state('sensor.climacell_tree_pollen_index','high') %}
          {% elif is_state('sensor.climacell_tree_pollen_index','very_high') %}
          {% else %}
          {% endif %}

        friendly_name: Pollen Weed climacell
        icon_template: 'mdi:sprout'
        value_template: >-
          {% if is_state('sensor.climacell_weed_pollen_index', 'none') %}
          {% elif is_state('sensor.climacell_weed_pollen_index','very_low') %}
          {% elif is_state('sensor.climacell_weed_pollen_index','low') %}
          {% elif is_state('sensor.climacell_weed_pollen_index','medium') %}
          {% elif is_state('sensor.climacell_weed_pollen_index','high') %}
          {% elif is_state('sensor.climacell_weed_pollen_index','very_high') %}
          {% else %}
          {% endif %}

For the others sensors this worked fine:

  - sensor:
      - name: cc_temperature 
        state: "{{ state_attr('weather.climacell_daily','temperature') }}"
        unit_of_measurement: °F
      - name: cc_humidity 
        state: "{{ state_attr('weather.climacell_daily','humidity') }}"

      - name: cc_pressure 
        state: "{{ state_attr('weather.climacell_daily','pressure') }}"
        unit_of_measurement: Hg        
      - name: cc_current_conditions
        state: "{{ states.weather.climacell_daily.state }}"

#        feels_like

      - name: cc_visibility
        state: "{{ state_attr('weather.climacell_daily','visibility') }}"

      - name: cc_wind_bearing 
        state: "{{ state_attr('weather.climacell_daily','wind_bearing') }}"
      - name: cc_wind_speed
        state: "{{ state_attr('weather.climacell_daily','wind_speed') }}"

      - name: cc_O3
        state: "{{ state_attr('weather.climacell_daily','ozone') }}"
      - name: cc_weather_condition_0d
        state: "{{ state_attr('weather.climacell_daily','forecast')[0].condition  }}"
      - name: cc_weather_condition_1d
        state: "{{ state_attr('weather.climacell_daily','forecast')[1].condition }}"
      - name: cc_weather_condition_2d
        state: "{{ state_attr('weather.climacell_daily','forecast')[2].condition }}"
      - name: cc_weather_condition_3d
        state: "{{ state_attr('weather.climacell_daily','forecast')[3].condition  }}"
      - name: cc_weather_condition_4d
        state: "{{ state_attr('weather.climacell_daily','forecast')[4].condition  }}"

      - name: cc_temperature_maximum_0d
        state: "{{ state_attr('weather.climacell_daily','forecast')[0].temperature }}"
        unit_of_measurement: °F
      - name: cc_temperature_maximum_1d
        state: "{{ state_attr('weather.climacell_daily','forecast')[1].temperature }}"
        unit_of_measurement: °F
      - name: cc_temperature_maximum_2d
        state: "{{ state_attr('weather.climacell_daily','forecast')[2].temperature }}"
        unit_of_measurement: °F
      - name: cc_temperature_maximum_3d
        state: "{{ state_attr('weather.climacell_daily','forecast')[3].temperature }}"
        unit_of_measurement: °F
      - name: cc_temperature_maximum_4d
        state: "{{ state_attr('weather.climacell_daily','forecast')[4].temperature }}"
        unit_of_measurement: °F
      - name: cc_temperature_minimum_0d
        state: "{{ state_attr('weather.climacell_daily','forecast')[0].templow }}"
        unit_of_measurement: °F
      - name: cc_temperature_minimum_1d
        state: "{{ state_attr('weather.climacell_daily','forecast')[1].templow }}"
        unit_of_measurement: °F        
      - name: cc_temperature_minimum_2d
        state: "{{ state_attr('weather.climacell_daily','forecast')[2].templow }}"
        unit_of_measurement: °F
      - name: cc_temperature_minimum_3d
        state: "{{ state_attr('weather.climacell_daily','forecast')[3].templow }}"
        unit_of_measurement: °F
      - name: cc_temperature_minimum_4d
        state: "{{ state_attr('weather.climacell_daily','forecast')[4].templow }}"
        unit_of_measurement: °F

      - name: cc_precipitation_intensity_0d
        state: "{{ state_attr('weather.climacell_daily','forecast')[0].precipitation }}"

      - name: cc_precipitation_probability_0d
        state: "{{ state_attr('weather.climacell_daily','forecast')[0].precipitation_probability }}"
      - name: cc_precipitation_probability_1d
        state: "{{ state_attr('weather.climacell_daily','forecast')[1].precipitation_probability }}"
      - name: cc_precipitation_probability_2d
        state: "{{ state_attr('weather.climacell_daily','forecast')[2].precipitation_probability }}"
      - name: cc_precipitation_probability_3d
        state: "{{ state_attr('weather.climacell_daily','forecast')[3].precipitation_probability }}"

      - name: cc_precipitation_probability_4d
        state: "{{ state_attr('weather.climacell_daily','forecast')[4].precipitation_probability }}"

This established the sensors that I needed to then populate the card as follows:
I created a manual card and you can paste this in and make sure the variables match above (or your naming scheme:

type: custom:ha-card-weather-conditions
name: Allen, TX
language: en
animation: true
    entity: sensor.cc_weed_pollen_index_mod
    min: 0
    max: 5
    low: 1
    high: 3
    entity: sensor.cc_grass_pollen_index_mod
    min: 0
    max: 5
    low: 1
    high: 3
    entity: sensor.cc_tree_pollen_index_mod
    min: 0
    max: 5
    low: 1
    high: 3
  icons_model: climacell
    sun: sun.sun
    moon_phase: sensor.moon
    current_conditions: sensor.cc_current_conditions
    temperature: sensor.cc_temperature
    humidity: sensor.cc_humidity
    pressure: sensor.cc_pressure
    visibility: sensor.cc_visibility
    wind_bearing: sensor.cc_wind_bearing
    wind_speed: sensor.cc_wind_speed
    forecast: true
      day_1: sensor.cc_temperature_maximum_0d
      day_2: sensor.cc_temperature_maximum_1d
      day_3: sensor.cc_temperature_maximum_2d
      day_4: sensor.cc_temperature_maximum_3d
      day_5: sensor.cc_temperature_maximum_4d
      day_1: sensor.cc_temperature_minimum_0d
      day_2: sensor.cc_temperature_minimum_1d
      day_3: sensor.cc_temperature_minimum_2d
      day_4: sensor.cc_temperature_minimum_3d
      day_5: sensor.cc_temperature_minimum_4d
      day_1: sensor.cc_precipitation_probability_0d
      day_2: sensor.cc_precipitation_probability_1d
      day_3: sensor.cc_precipitation_probability_2d
      day_4: sensor.cc_precipitation_probability_3d
      day_5: sensor.cc_precipitation_probability_4d
      day_1: sensor.cc_weather_condition_0d
      day_2: sensor.cc_weather_condition_1d
      day_3: sensor.cc_weather_condition_2d
      day_4: sensor.cc_weather_condition_3d
      day_5: sensor.cc_weather_condition_4d
      day_1: sensor.cc_precipitation_intensity_0d
  o3: sensor.cc_o3
  pm25: sensor.climacell_particulate_matter_2_5_mm
  pm10: sensor.climacell_particulate_matter_10_mm
  no2: sensor.climacell_nitrogen_dioxide
  co: sensor.climacell_carbon_monoxide
  so2: sensor.climacell_sulfur_dioxide
  epa_aqi: sensor.climacell_us_epa_air_quality_index
  epa_health_concern: sensor.climacell_us_epa_health_concern

I’m not using the China weather or fire sensor but you should be able to model that from the above. We don’t have access to the Feels Like values as they aren’t provided now by the integration - maybe in the future?!

Good luck and thanks Renato/all. As always contribute a more elegant solution if you have one!


Looks sweet. I was thinking about a weather page on my dashboard anyway. This looks good, will implement this, thanks for sharing

1 Like

had to change it to: very_low, guess it’s the same for very_high

1 Like

Hmm. I didn’t see the problem manifest so thanks for the call out; I’ll be changing mine. I updated the code above as well. Great catch.

1 Like

@DaveTX I’m using your suggestions but I’ve no icon showing the current condition (in the top left corner of card).

Thanks in advance

If you sniff around using your browser debug and look at the console you’ll most likely see that the icon is not found “undefined.svg”. I can replicate this by using in the card:

icons_model: ClimaCell

Since the new/native integration is using the default weather event, the animated icons are broken so we have to go with the same ones (names) used by the weather integration. In other words, the original integration used condition mappings provided by Climacell. Now they’ve reworked that with the new integration to use the consistent mappings for other weather sources. Keeps things like the Weather Forecast Card working if you switch to this new integration from say dark sky…

icons_model: defaulthass

I’ll noodle this some. Sadly we are starting to really push the wisdom of extending this vs having the card reworked to use the new integration. Not sure if Renato is engaged anymore on this since his work on the card was tied to his integration.


Great work on this! (It’s disappointing that ClimaCell becoming part of the core has left it so much more cumbersome than its predecessor.)

Awesome guide @DaveTX , I was able to get most of this working however I am not seeing any of the forecast precipitation numbers, the entities exist but they all show 0, however the current days shows a valid precipitation value.

I also am not getting any of the air quality parameters and was wondering if that was something I needed to set up on the tomorrow.io website or if its something I’m missing in the config, or if you are just using other integrations that have that info available and using them for this card?

Looks great, I would appreciate any assistance

Sorry you’re having challenges.

WRT Precipitation:
My current weather has no foreseeable precipitation so I’ll have to wait a few days or dig deeper by changing location to somewhere that does. You may or may not be onto something so unclear just now…

WRT air quality:
You should be able to confirm air quality sensors and values via your Climacell integration. Just go to Configuration->Integrations->ClimaCell->Entities and review the entities. Make sure they are enabled. For example I click into ClimaCell - Ozone and the config icon in upper right and see that the current value is 23.31 ppb. So any issues there are something with your integration setup. If there are values there but not in your Lovelace card then check spelling.

If I get some weather/precip or find a way to validate your precip issue I’ll circle back here.


As far as the precip numbers I realized a few days later that it was just a difference between my two weather apps. Climacell is actually showing data now but when I first set it up my standard weather app was saying like a 90% chance of rain and Climacell said 0%. I figured the 0 was just bad data, it was just different data between the apps.

All of the entities under Climacell were disabled, seemed very odd that pretty much the rest of the info was accurate but after actually checking there per your suggestion and enabling them maybe half show data and the other half are still showing ‘unknown’ though at this point I enabled them maybe 8 hours ago, not sure if time will fix that.

I don’t see anything additional that can be configured in HA, but I also didn’t notice the entities were disabled in the first place. Here is what the some of the entities look like now but I’ll post an update if anything major changes overnight.

Thanks for the reply

I have precip in the near future and it shows on the card fine.

If you haven’t gotten this far, try logging into the tomorrow.io site and use you API key to exercise the API with your key and Lat/Long and look for data on the attributes you seem to be missing. If values show up there but not in this card then you’ve narrowed it down. As you note making sure they aren’t disabled is helpful.

Good luck - hope you’ve overcome this by now.

First of all thank you for sharing this guide!
All of the sensors and data are working for me (i simply removed the air pollution because I;m using different integration), icons are defaulthass as you advised.

i have a small problem with:

    moon_phase: sensor.moon

is it the default sensor ? it is coming directly from CC ? I also cannot see it in your sensors above.
If you could point me, I would be grateful :slight_smile:

NEVERMIND, I found the platform: moon :wink:

1 Like

Solid work, thank you very much. I am integrating this with my Ecowitt, and most is going well. One question: how could I add my UV Index on here? Perhaps in place of visibility?

Sorry, but my mind is not working. Where is this nestled in configuration.yaml? Should it be under climacell: or some place else?

Fair question; should have made that a bit more obvious.

Yes add this to your configuration.yaml.

WRT to UV Index… Assuming you’re ok with what Renato did with displaying UV data then check out his docs and map a source to his structure. I don’t know off the top of my head as I haven’t been interested in UV but seems highly achievable esp if available in Climacell. EDIT: I actually don’t see any UV in the Climacell integration so you likely need to start there and get it fed thru…. There seems to be some solar attributes available at Climacell API but not sure if they correlate to UV or what you’re looking for.

Great work, Dave !

I think you forgot to add the icons to show in the daily forecast. Your templates have all the right values already. Here’s what I added to my card:

      day_1: sensor.cc_weather_condition_0d
      day_2: sensor.cc_weather_condition_1d
      day_3: sensor.cc_weather_condition_2d
      day_4: sensor.cc_weather_condition_3d
      day_5: sensor.cc_weather_condition_4d


i have the following error when added in configuration.yaml:

what i need to do? i’m a beginner…


Correct spacing & indenting is important.Since you did not post the problem template(enclosed in ``` before & after to prevent the forum eating spaces) I cannot assist more than that.



You’re right - I should have included those icons for completeness; I had removed them by design in my setup and really should have included it. I’ve edited the yaml and example screen shot to reflect it. Thanks for pointing that out!


As @Prodigyplace mentioned you have to observe spacing and indentation. The yaml is finicky in that regard. Try copying my code in completely and then modify it as you need. Or just build it one small section at a time getting it right before you move on.