GithubHelp home page GithubHelp logo

davidfw1960 / bom-weather-card Goto Github PK

View Code? Open in Web Editor NEW
158.0 13.0 36.0 2.13 MB

Custom Animated Weather Card for any weather provider

License: Apache License 2.0

JavaScript 100.00%
bom homeassistant home-assistant home-automation weather-forecast

bom-weather-card's Introduction

hacs_badge GitHub GitHub last commit Maintenance

Custom Animated Weather Card for any weather provider

IMPORTANT CHANGES

This card is essentially deprecated now in favour of Platinum Weather Card The new card should import the configuration from this card.

I have renamed this card to remove the emphasis on BOM. This is a generic card that works with any provider

NON-Australian Users: This card and docs has always been a generic card with an emphasis on BOM in Australia however it will work with ANY weather provider that can supply the sensors.

AUSTRALIA ONLY NOTE: I have made some changes to the docs so that this card now uses the new BOM Component by Brendan This new repo can be added to HACS See also the excellent new BOM Radar Card by @therat here

I have updated the lovelace.yaml and templates (NOTE THESE AE EXAMPLES and can be customised for your needs) as well for this new component.

When you install Brendans new BOM Component, you will get sensors that look like this: For the Observations, they will be named for the BOM Observation station like.. sensor.gosford_temperature as an example. For the Forecast, they will be named by your local suburb determined from the entered Latitude and Longitude (which will default to your HA configuration) like sensor.kariong_icon_descriptor_0

It MAY be that there will be some new conditions from BOM. If icons are missing or you get any errors please let me know.

IF you are using the old card as well with the 7 days forecast, note the new component only provides 6 days now and additionally I have added some icons so make sure you grab the bom_icons.zip file and extract the contents to /config/www/bom_icons The animated icons for the card itself are unchanged.

image

This card is a modification of a fork of iammexx/home-assistant-config dark-sky-weather-card This card provides MANY additional features as well as compatability with later versions of home assistant. New features not in original card include:

  • Lit 2
  • Only use Day time icons for forecast for future days (days 1-5)
  • More icons
  • Adds Locale customisation for number formats
  • Added to card-picker in Lovelace
  • Added option to show minimum or maximum first in forecast
  • Added option to show 1 decimal place to temperatures
  • Added option to display windspeeds in knots
  • Show rainfall as an intensity or absolute number
  • Removed leading zeros if 12hr time
  • Added Wind Gust
  • Can use different icon sets
  • Added extra (5th) row of slots
  • Added slots (optional) for UV and fire danger ratings
  • Added possibility of rainfall to forecast

NOTE: This card REQUIRES any weather component that can provide the required sensors. (like the new BOM Component if in Australia) Alternately, if you are using DarkSky (or any other provider), the important thing is that any entities parsed to the card must be provided by that platform and you should carefully check the sensor names exist. Parsing a non existant sensor to the card will cause the card to fail to display!

The Weather Card provides current and forecast weather conditions using HA sensors. You configure the card by passing in sensor entities from the weather component.

The weather package in the repo shows configuration for this card. This package is for HA versions > 0.115.0.

The card is very customizable. You can configure many aspects of it's look and feel as well as which specific content to show by passing in customization flags and defining optional sensors. Content can also be rearranged if desired.

Hovering over a forecast day will display the daily weather summary in a tooltip popup if that option has been enabled.

Installation


EASY Way? use HACS

This plugin is now part of the default HACS store. You should not need to add it manually. Add this repo https://github.com/DavidFW1960/bom-weather-card

Install card from HACS as per other plugins. Note that you must add this card as a module to the resources section as per the instructions when you install the card.

NOTE: Home Assistant caches stuff in a way that seems particularly hard to break some times and HACS makes this worse unfortunately. The rule of thumb is that when you install a new version you MUST break the cache in order for HA to load the new card. This is fairly easy to do. In CHROME open up the Dev Tools by pressing F12 Then right click on the refresh icon in the task bar (see graphic) and you will see a menu of options. Select Empty cache and hard reload from the options. It is the only option with no shortcut!

image

You then need to press either CTRL+R OR CTRL+F5 at least TWICE. Then check the version in the same dev-tools. It will look something like this:

image

The first time you do the CTRL+F5 you might find that the version will again change back to the previous version but a second refresh will fix it.

EDIT: Latest HACS version includes a version tag in the resource which will change when you update the card so the caching fix described above is no longer necessary! Yay!

HARD Way? manual installation as follows:

  1. Add bom-weather-card.js to your <config-dir>/www/ directory. If you don't have this directory (this is your first custom card), you will need to create it.
  2. Add /local/bom-weather-card/bom-weather-card.js?v=o.89 type js to resources. You must increment or use a different version number for every update to break the caching of the card and make it use the new version.

Then install the icon files

Please download ALL icons required are in this file here In addition to the amcharts ones from here I have found a few more svg icons (from here and also via the Home Assistant Forums here to use in this component. Put them in <config-dir>/www/icons/weather_icons and then sub folders animated and static. Create the directories if necessary.

I used to recommend downloading Download the amcharts icons from https://www.amcharts.com/dl/svg-weather-icons/ however if you don't use my zip file version some icons will be missing.

To use the basic card, you will also need the //www/icons/bom_icons which are contained in bom_icons.zip

You should end up with the following folders: This structure is after all configuration is done. If you install via HACS you must still configure the package/yaml and icons manually. HACS:-

└── ...
└── configuration.yaml
└── packages
    └── weather.yaml
└── www
    └── community
        └── bom-weather-card
            └── bom-weather-card.js
            └── bom-weather-card.js.gz
    └── icons
	└── bom_icons            ###### Containing bom_icons.zip unzipped (ONLY if using the basic card and icons)
	└── weather_icons
		└── animated     ###### Containing the animated icons from weather_icons.zip animated directory
		└── static       ###### Containing the animated icons from weather_icons.zip static directory

This structure is after all configuration is done. You must still configure the package/yaml and icons manually. MANUAL INSTALL:-

└── ...
└── configuration.yaml
└── packages
    └── weather.yaml
└── www
    └── bom-weather-card.js
    └── icons
	└── bom_icons            ###### Containing bom_icons.zip unzipped (ONLY if using the basic card and icons)
	└── weather_icons
		└── animated     ###### Containing the animated icons from weather_icons.zip animated directory
		└── static       ###### Containing the animated icons from weather_icons.zip static directory

IF YOU USE the SAMBA addin in Home Assistant, the ICON directory will be hidden by default. Go to the configuration of the addon and remove the exclusion of icons and restart the addon otherwise you can't create the directory.

Configuration


  1. All configuration for the component is done via the GUI!

It seems the new BOM API actually will generate a forecast for ANY location/Suburb in Australia and observations for defined observation stations. The nearest station is used.

The next two steps are completed differently based on the version of HA you are using:

  • Pre 0.84 or if using yaml mode in 0.84 or above : Add to your ui-lovelace.yaml file.
  • Using storage mode in 0.84 or above use the GUI Editor to add the reference and definition to the config.
  1. Add the card reference to resources If you installed using HACS, the resources should be updated automatically (see below)

    Note: Ensure type is set to module and not js
    Note: /local/ points to the <config-dir>/www/ dir. Note: /hacsfiles/ points to the <config-dir>/www/community/ dir.

Note that neither /local/ of /hacsfiles/ physically exist! The directory structure is as per above.

For a HACS Installation:

resources:
  - url: /hacsfiles/bom-weather-card/bom-weather-card.js
    type: module

For the manual installation:

resources:
  - url: /local/custom_ui/bom-weather-card.js?v=0.1
    type: module

To use the package, copy weather.yaml to your packages folder as per above. Create that directory if it doesn't exist. Edit weather.yaml for your sensor names and ensure you include packages in configuration.yaml:

homeassistant:
  packages: !include_dir_named packages
  1. Add the card definition: You can add this card from the card picker but need to configure the entities and flags in YAML. There are required / optional and flag entries. NOTE: All my values refer to Gosford observation entities and Kariong forecast.. You will need to edit these to match your sensors names.** This card has been added to the custom-card-picker in Lovelace

image

An example configuration is in lovelace.yaml - this can be pasted into the manual card configuration in the GUI editor If you paste it in the raw editor or in a yaml file, take care with the indenting.

Required entries must be present in your configuration. The card will not work at all if any of these lines are missing. EDIT gosford/kariong to match your observations/forecasts

type: custom:bom-weather-card
title: BOM Weather
entity_current_conditions: sensor.kariong_icon_descriptor_0
entity_temperature: sensor.gosford_temp
entity_forecast_high_temp_1: sensor.kariong_temp_max_1
entity_forecast_high_temp_2: sensor.kariong_temp_max_2
entity_forecast_high_temp_3: sensor.kariong_temp_max_3
entity_forecast_high_temp_4: sensor.kariong_temp_max_4
entity_forecast_high_temp_5: sensor.kariong_temp_max_5
entity_forecast_icon_1: sensor.kariong_icon_descriptor_1
entity_forecast_icon_2: sensor.kariong_icon_descriptor_2
entity_forecast_icon_3: sensor.kariong_icon_descriptor_3
entity_forecast_icon_4: sensor.kariong_icon_descriptor_4
entity_forecast_icon_5: sensor.kariong_icon_descriptor_5
entity_forecast_low_temp_1: sensor.kariong_temp_min_1
entity_forecast_low_temp_2: sensor.kariong_temp_min_2
entity_forecast_low_temp_3: sensor.kariong_temp_min_3
entity_forecast_low_temp_4: sensor.kariong_temp_min_4
entity_forecast_low_temp_5: sensor.kariong_temp_min_5
entity_summary_1: sensor.kariong_short_text_1
entity_summary_2: sensor.kariong_short_text_2
entity_summary_3: sensor.kariong_short_text_3
entity_summary_4: sensor.kariong_short_text_4
entity_summary_5: sensor.kariong_short_text_5
entity_sun: sun.sun

Optional entries add components to the card. My BOM area (Gosford) does not include visibility or pressure. Edit entities to your correct sensor names. Replace Gosford with your name.

***Please note entity_pop_1 to 5 lines must all be included for daily pop (probability of precip) to show in forecast

***Also note that for daily possible rainfall to show, entity_possible_today as well as the 5 entity_pos_1 to 5 lines are needed.

***Also note that the name for tomorrow's possible rainfall has changed!

***Defining NEITHER/BOTH entity_pop_intensity and entity_pop_intensity_rate will give an 'Config Error' message in the pop slot if defined.

# entity_visibility: If provided from a different source
entity_daytime_high: sensor.bom_today_max
entity_daytime_low: sensor.bom_today_min
entity_temp_next: sensor.gosford_now_temp_now
entity_temp_next_label: sensor.gosford_now_now_label
entity_temp_following: sensor.gosford_now_temp_later
entity_temp_following_label: sensor.gosford_now_later_label
entity_wind_bearing: sensor.gosford_wind_direction
entity_wind_speed: sensor.gosford_wind_speed_kilometre
entity_wind_gust: sensor.gosford_gust_speed_kilometre
# entity_wind_speed_kt: sensor.gosford_wind_speed_knot
# entity_wind_gust_kt: sensor.gosford_gust_speed_knot
entity_humidity: sensor.gosford_humidity
# entity_pressure: sensor.nodemcu_lounge_bme280_seapressure I get pressure from a NodeMCU. Bom does not supply this!
entity_apparent_temp: sensor.gosford_temp_feels_like
entity_daily_summary: sensor.kariong_extended_text_0
entity_pop: sensor.kariong_rain_chance_0
entity_pop_intensity: sensor.gosford_rain_since_9am
entity_possible_today: sensor.kariong_rain_amount_range_0
entity_rain_today: sensor.gosford_rain_since_9am
entity_pos_1: sensor.kariong_rain_amount_range_1
entity_pos_2: sensor.kariong_rain_amount_range_2
entity_pos_3: sensor.kariong_rain_amount_range_3
entity_pos_4: sensor.kariong_rain_amount_range_4
entity_pos_5: sensor.kariong_rain_amount_range_5
entity_pop_1: sensor.kariong_rain_chance_1
entity_pop_2: sensor.kariong_rain_chance_2
entity_pop_3: sensor.kariong_rain_chance_3
entity_pop_4: sensor.kariong_rain_chance_4
entity_pop_5: sensor.kariong_rain_chance_5
entity_fire_danger_summary: sensor.kariong_fire_danger_0

Note: The following entries require template sensors.

entity_current_text: sensor.bom_current_text
entity_uv_alert: sensor.bom_uv_alert
entity_fire_danger: sensor.bom_fire_danger
entity_uv_alert_summary: sensor.uv_cat_formatted

Example template sensors: You can call template sensors whatever you want so long as you use the same name in the card config. (Included in weather.yaml) I don't believe templates for areas with two fire danger areas like Perth are required anymore with the new forecasts. NOTE ALSO that the minimum temperature 'disappears' in the early afternoon from the BOM feed. ALso the UV and fire information becomes unknown around 10PM. I have used Template sensors toselect the next day when this happens but have not done this in this latest package (too little benefit!) I am also parsing the ACTUAL minimum and maximum temperatures to the card rather than the forecast ones for the current day. If you don't like that, feel free to make your own sensors. (See the minimal card template for examples)

These templates are EXAMPLES. Adjust and adapt as required. Up-to-date templates will always be in the templates.md file.

sensor:
  - platform: template
    sensors:
      bom_current_text:
        value_template: >
            {% set val = states('sensor.kariong_short_text_0').split('.')[0] %} 
            {{ val | title }}

      uv_cat_formatted:
        value_template: "{{ states('sensor.kariong_uv_category_0') | replace('veryhigh', 'Very High') | title }}"

      bom_uv_alert:
        value_template: >
            UV Today: Sun Protection 
            {{ as_timestamp(states('sensor.kariong_uv_start_time_0'),default='n/a') | timestamp_custom(' %I:%M%p',default='n/a') | lower | replace(" 0", "") }} to {{ as_timestamp(states('sensor.kariong_uv_end_time_0'),default='n/a') | timestamp_custom(' %I:%M%p',default='n/a') | lower | replace(" 0", "") }}, UV Index predicted to reach {{ states('sensor.kariong_uv_max_index_0') }} [{{ states('sensor.uv_cat_formatted') }}]

      bom_fire_danger:
        value_template: "Fire Danger Today: {{ states('sensor.kariong_fire_danger_0') }}"

Flags are used to control the look and feel of the card (See below for details)

locale: en
static_icons: false
tooltip_bg_color: 'rgb( 75,155,239)'
tooltip_border_color: orange
tooltip_border_width: 3
tooltip_caret_size: 10
tooltip_fg_color: '#fff'
tooltip_left_offset: -12
tooltip_width: 100
tooltips: true
old_daily_format: false
time_format: 24
show_beaufort: true
old_icon: "true"   # must be true in quotes for old icons to be rendered
show_decimals: false

Flags

Flag Values Usage
locale en / fr / de / etc. Sets locale display of day names and time formats
static_icons true / false Switches between static (true) and animated (false) icons
tooltips true / false Enables tooltips that show daily forecast summary
tooltip_width 110 Sets the width of the tooltip in px
tooltip_bg_color rgb( 75,155,239) Sets the background color of the tooltip (rgb / # / color)
tooltip_fg_color #fff Sets the foreground color of the tooltip (rgb / # / color)
tooltip_border_color rgb(255,161,0) Sets the color of the tooltip border including the caret (rgb / # / color)
tooltip_border_width 1 Sets the width of the tooltip border in px
tooltip_caret_size 5 Sets the size of the caret (the little arrow pointing down) in px
tooltip_left_offset -12 Sets the offset of the left edge of the tooltip. In negative (-)x
refresh_interval 30 / Integer value Sets the nuber of seconds between card value refreshes
old_daily_format true / false Sets the format of the daily high & low temps to be stacked (old format)
show_beaufort true / false Shows Beaufort Scale wind information
show_separator true / false Shows separator between current conditions columns and current temp / Icon
tempformat highlow / noentry Any setting for this flag will trigger the option to show max/min in daily
time_format locale / 12 / 24 Sets the format sunset and sunrise times. locale format is the default.
temp_top_margin 0px / px or em value Sets the top margin of the Temperature.
temp_font_weight 300 / numeric value Sets the font weight of the Temperature.
temp_font_size 4em / em value Sets the font size of the Temperature.
temp_right_pos 0.85em / px or em value Sets the right position of the Temperature.
temp_uom_top_margin -12px / px or em value Sets the top margin of the Temperature Unit of Meaure.
temp_uom_right_margin 4px / px or em value Sets the right margin of the Temperature Unit of Measure.
apparent_top_margin 45px / px or em value Sets the top margin of the apparent (feels Like) temperature
apparent_right_pos 1em / px or em value Sets the right position of the apparent (feels Like) temperature
apparent_right_margin 1em / px or em value Sets the right margin of the apparent (feels Like) temperature
current_text_top_margin 4.5em / px or em value Sets the top margin of the current temperature text
current_text_left_pos 0px / px or em value Sets the left position of the current temperature text
current_text_font_size 1.5em / em value Sets the font size of the current temperature text
current_text_alignment center / left, right or center Sets the alignment of current text
current_text_width 100% / px, em or % Sets the width of current text
current_data_top_margin 10em / px or em value Sets the top margin of the current data blocks
large_icon_top_margin -3.2em / px or em value Sets the top margin of the current conditions icon
large_icon_left_pos 0px / px or em value Sets the left position of the current conditions icon
separator_top_margin 6em / px or em value Sets the top margin of the separator line
summary_top_padding 2em / px or em Sets the gap between the forecast and summary text
summary_font_size 0.8em / px or em Sets the font size for the summary text
slot_l1 daytime_high Sets the value used in current conditions slot l1 : See slots for more info
slot_l2 daytime_low Sets the value used in current conditions slot l2 : See slots for more info
slot_l3 wind Sets the value used in current conditions slot l3 : See slots for more info
slot_l4 pressure Sets the value used in current conditions slot l4 : See slots for more info
slot_l5 sun_next Sets the value used in current conditions slot l4 : See slots for more info
slot_r1 pop Sets the value used in current conditions slot r1 : See slots for more info
slot_r2 humidity Sets the value used in current conditions slot r2 : See slots for more info
slot_r3 uv_summary Sets the value used in current conditions slot r3 : See slots for more info
slot_r4 fire_summary Sets the value used in current conditions slot r4 : See slots for more info
slot_r5 sun_following Sets the value used in current conditions slot r4 : See slots for more info
use_old_column_format false / true Moves the right column to the right edge (not recommended)
old_icon true / hybrid or false Sets card to render old icons. Must use quotes
show_decimals false / true Sets card to render current and apparent temperatures to 1 decimal place.
show_decimals_today false / true Sets card to render todays min and max temperatures to 1 decimal place.
show_decimals_pressure 0 / 1, 2, 3 Sets card to render pressure with specified decimal places.
custom1_icon mdi:help-box / mdi icon Sets the icon to use for slot custom1
custom1_value unknown / sensor Sets the sensor to use for the value of slot custom1
custom1_units "" / string Sets the string to use for the units of slot custom1
custom2_icon mdi:help-box / mdi icon Sets the icon to use for slot custom2
custom2_value unknown / sensor Sets the sensor to use for the value of slot custom2
custom2_units "" / string Sets the string to use for the units of slot custom2

Slots

The current condition columns are specified by 'slots'. There are 5 left column slots (designated l1 - l5) and 5 right column slots (designated r1 - r5). There are currently 10 possible values that can be assigned to a slot. These are:

  • daytime_high
  • daytime_low
  • temp_next
  • temp_following
  • wind
  • wind_kt
  • visibility
  • sun_next (the next sun event ... sunset or sunrise)
  • sun_following (The following sun event ... if sun_next is a sunset then this will be the following sunrise and vice versa)
  • pop (probability of precipitation) Shows % possible rainfall today and the actual recorded rainfall
  • popforecast Shows % possible rainfall today and forecast rainfall
  • humidity
  • pressure
  • uv_summary
  • fire_summary
  • possible_today (possible rainfall today)
  • possible_tomorrow (possible rainfall tomorrow)
  • rainfall (actual rainfall today)
  • custom1 (populates using config fields custom1_icon, custom1_value and custom1_units)
  • custom2 (populates using config fields custom2_icon, custom2_value and custom2_units)
  • empty (empty slot... the slot below does not rise to fill the space)
  • remove (same as empty but the slot below rises to take the place of the slot)

If configuring with Slots please ensure to fill all available positions, the slots that you do not need can be filled with "remove" to ensure that they remain blank.

My FULL Lovelace configuration for this card is here Cut and paste it into your lovelace.

MINIMAL CARD Example

Please be aware I may update the templates and lovelace config for these cards without making a new release so if you watch this repo you will get notified when this happens.

See these templates:

sensor:
  - platform: template
    sensors:
      bom_forecast_0:
        friendly_name: "Today"
        value_template: >
          {% if states('sensor.kariong_temp_min_0') == 'unknown' %} {% set min = states('sensor.bom_today_min') %} {% else %} {% set min = states('sensor.kariong_temp_min_0') %} {% endif %}
          {% if states('sensor.kariong_temp_max_0') == 'unknown' %} {% set max = states('sensor.bom_today_max') %} {% else %} {% set max = states('sensor.kariong_temp_max_0') %} {% endif %}
          {{ max|round(0,default='none')}}°/{{ min|round(0,default='none')}}°/{{states('sensor.kariong_rain_chance_0')|round(0,default='none')}}%
        entity_picture_template: >-
          {%- if states('sun.sun') == 'below_horizon' and (states('sensor.kariong_icon_descriptor_0') == 'fog' or states('sensor.kariong_icon_descriptor_0') == 'haze' or states('sensor.kariong_icon_descriptor_0') == 'hazy' or states('sensor.kariong_icon_descriptor_0') == 'light-showers' or states('sensor.kariong_icon_descriptor_0') == 'partly-cloudy' or states('sensor.kariong_icon_descriptor_0') == 'showers' or  states('sensor.kariong_icon_descriptor_0') == 'light_shower' or states('sensor.kariong_icon_descriptor_0') == 'shower' or states('sensor.kariong_icon_descriptor_0') == 'light_showers' or states('sensor.kariong_icon_descriptor_0') == 'partly_cloudy') -%}
          {{ '/local/icons/bom_icons/' ~ states('sensor.kariong_icon_descriptor_0') ~ '-night.png' }}
          {%- else -%}
          {{ '/local/icons/bom_icons/' ~ states('sensor.kariong_icon_descriptor_0') ~ '.png' }}
          {%- endif -%}

      bom_forecast_1:
        friendly_name_template: >
          {%- set date = as_timestamp(now(),default='n/a') + (1 * 86400 ) -%}
          {{ date | timestamp_custom('Tomorrow (%-d/%-m)',default='n/a') }}
        value_template: >
          {{states('sensor.kariong_temp_max_1')|round(0)}}°/{{states('sensor.kariong_temp_min_1')|round(0)}}°/{{states('sensor.kariong_rain_chance_1')|round(0)}}%
        entity_picture_template: >-
          {{ '/local/icons/bom_icons/' ~ states('sensor.kariong_icon_descriptor_1') ~ '.png' }}

      bom_forecast_2:
        friendly_name_template: >
          {%- set date = as_timestamp(now(),default='n/a') + (2 * 86400 ) -%}
          {{ date | timestamp_custom('%A (%-d/%-m)',default='n/a') }}
        value_template: >
          {{states('sensor.kariong_temp_max_2')|round(0)}}°/{{states('sensor.kariong_temp_min_2')|round(0)}}°/{{states('sensor.kariong_rain_chance_2')|round(0)}}%
        entity_picture_template: >-
          {{ '/local/icons/bom_icons/' ~ states('sensor.kariong_icon_descriptor_2') ~ '.png' }}

      bom_forecast_3:
        friendly_name_template: >
          {%- set date = as_timestamp(now(),default='n/a') + (3 * 86400 ) -%}
          {{ date | timestamp_custom('%A (%-d/%-m)',default='n/a') }}
        value_template: >
          {{states('sensor.kariong_temp_max_3')|round(0)}}°/{{states('sensor.kariong_temp_min_3')|round(0)}}°/{{states('sensor.kariong_rain_chance_3')|round(0)}}%
        entity_picture_template: >-
          {{ '/local/icons/bom_icons/' ~ states('sensor.kariong_icon_descriptor_3') ~ '.png' }}

      bom_forecast_4:
        friendly_name_template: >
          {%- set date = as_timestamp(now(),default='n/a') + (4 * 86400 ) -%}
          {{ date | timestamp_custom('%A (%-d/%-m)',default='n/a') }}
        value_template: >
          {{states('sensor.kariong_temp_max_4')|round(0)}}°/{{states('sensor.kariong_temp_min_4')|round(0)}}°/{{states('sensor.kariong_rain_chance_4')|round(0)}}%
        entity_picture_template: >-
          {{ '/local/icons/bom_icons/' ~ states('sensor.kariong_icon_descriptor_4') ~ '.png' }}

      bom_forecast_5:
        friendly_name_template: >
          {%- set date = as_timestamp(now(),default='n/a') + (5 * 86400 ) -%}
          {{ date | timestamp_custom('%A (%-d/%-m)',default='n/a') }}
        value_template: >
          {{states('sensor.kariong_temp_max_5')|round(0)}}°/{{states('sensor.kariong_temp_min_5')|round(0)}}°/{{states('sensor.kariong_rain_chance_5')|round(0)}}%
        entity_picture_template: >-
          {{ '/local/icons/bom_icons/' ~ states('sensor.kariong_icon_descriptor_5') ~ '.png' }}

      bom_forecast_6:
        friendly_name_template: >
          {%- set date = as_timestamp(now(),default='n/a') + (6 * 86400 ) -%}
          {{ date | timestamp_custom('%A (%-d/%-m)',default='n/a') }}
        value_template: >
          {{states('sensor.kariong_temp_max_6')|round(0,default='unknown')}}°/{{states('sensor.kariong_temp_min_6')|round(0,default='unknown')}}°/{{states('sensor.kariong_rain_chance_6')|round(0,default='unknown')}}%
        entity_picture_template: >-
          {{ '/local/icons/bom_icons/' ~ states('sensor.kariong_icon_descriptor_6') ~ '.png' }}

      bom_today_max:
        value_template: >
          {{ state_attr('sensor.today_temp_bom', 'max_value') }}

      bom_today_min:
        value_template: >
          {{ state_attr('sensor.today_temp_bom', 'min_value') }}

  - platform: average
    name: today_temp_bom
    entities:
      - sensor.gosford_temp
    start: '{{ now().replace(hour=0).replace(minute=0).replace(second=0) }}'
    end: '{{ now() }}'

NOTE I am using a custom component average for the bom_today_max and bom_today_min sensors. See that for day 0, if the min/max is missing from the forecast it uses the average component. In the weather.yaml package, I use the statistics sensor instead of the custom average component (and provide code for both so you can choose).. You can then display these on an entities card like this: Note this uses a custom hui_element card in case BOM isn't publishing day 6

type: entities
title: BOM Forecast
show_header_toggle: false
entities:
  - sensor.bom_forecast_0
  - sensor.bom_forecast_1
  - sensor.bom_forecast_2
  - sensor.bom_forecast_3
  - sensor.bom_forecast_4
  - sensor.bom_forecast_5
  - type: 'custom:hui-element'
	card_type: conditional
	conditions:
	  - entity: sensor.bom_forecast_6
		state_not: "unknown°/unknown°/unknown%"
	card:
	  type: entities
	  card_mod:
		style: |
		  ha-card {
			box-shadow: none;
			--ha-card-background: rgba(0, 0, 0, 0);
			margin: -16px -16px -16px -16px;
		  }
	  entities:
	  - entity: sensor.bom_forecast_6

image

Extra Info Card example

image

I show some additional info on a seperate card. This utilises the Beaufort, Heat Index templates as well as an illuminance computation. I have added an illuminance package derived from Brian Hanifin's work here

I also used Phil Bruckners illuminance component for comparison using met.no here

I use a history graph to display these

image

Please be aware I may update the templates and lovelace config for these cards without making a new release so if you watch this repo you will get notified when this happens.

I am hoping to refine this and maybe use to assist with turning on an indoor light.

My Lovelace Code to display these is here: (Note I am using the config-template-custom-card also in HACS by Ian)

          - type: 'custom:config-template-card'
            variables:
              - states['sensor.beaufort'].state
              - states['sensor.heatindex'].state
              - states['sensor.heatindexrating'].state
              - states['sensor.gosford_temp'].attributes['issue_time']
            entities:
              - sensor.beaufort
              - sensor.heatindex
              - sensor.heatindexrating
              - sensor.gosford_temp
            card:
              type: 'custom:hui-entities-card'
              entities:
                - entity: sensor.bom_forecast_0
                - entity: sensor.beaufort
                  name: "${'Beaufort force:' + '\xa0'.repeat(2) + (vars[0] == 12 ? 'Hurricane Force' : vars[0] == 11 ? 'Violent Storm' : vars[0] == 10 ? 'Storm, whole gale' : vars[0] == 9 ? 'Strong/severe gale' : vars[0] == 8 ? 'Gale/ fresh gale' : vars[0] == 7 ? 'High wind, moderate/near gale' : vars[0] == 6 ? 'Strong breeze' : vars[0] == 5 ? 'Fresh breeze' : vars[0] == 4 ? 'Moderate breeze' : vars[0] == 3 ? 'Gentle breeze' : vars[0] == 2 ? 'Light breeze' : vars[0] == 1 ? 'Light air' : 'Calm')}"
                - entity: sensor.heatindex
                  name: "${'Heat Index:' + '\xa0'.repeat(2) + vars[2]}"
                - entity: sensor.gosford_temp
                  name: "${'BOM Update:' + '\xa0'.repeat(2) + ( new Date(vars[3]).toLocaleTimeString('en-US') ) + '\xa0'.repeat(2) + 'Current Temp' }"
                - entity: sensor.illuminance
                  type: "custom:template-entity-row"
                  secondary: "{{ states('weather.kariong') }} weather.kariong"
                  state: "{{ '{:,}'.format((states('sensor.illuminance'))|int) }} lx"
                  icon: mdi:brightness-5
                - entity: sensor.estimated_illuminance
                  type: "custom:template-entity-row"
                  secondary: "{{ states('weather.home') }} weather.home"
                  state: "{{ '{:,}'.format((states('sensor.estimated_illuminance'))|int) }} lx"
                  icon: mdi:brightness-5
          - type: history-graph
            title: Outdoor Illuminance
            hours_to_show: 48
            refresh_interval: 300
            entities:
              - sensor.illuminance
              - sensor.estimated_illuminance

bom-weather-card's People

Contributors

bieniu avatar bradleyford avatar bruvv avatar davidfw1960 avatar grehund avatar iammexx avatar jantoney avatar makin-things avatar manisar2 avatar neographophobic avatar rudders avatar spockster1985 avatar taczirjak avatar virtuall avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bom-weather-card's Issues

Unable to create www/icons folder in HA

This is not an issue with this card as such, but due to this issue I am unable to install the card correctly.
Using the current (2021.4.x) version of Home Assistant, trying to create the folder config\www\icons fails.
I can create a folder of any other name, but trying to create this folder does not work.
When I go to a TTY terminal and create the folder manually on Home Assistant, the folder can create but is not visible via a share.

I am using Home Assistant, with Home Assistant OS (HassOS).

Any advice would be helpful with this.

Query: How to get card to work in HA 2021.6.2?

Good morning,

I have updated the BOM Weather Card via HACS to 0.89a this morning, but it seems the card still is not working for me.
I have logged this as a query rather than a fault as I am sure the issue could be my end.

I had the card working perfectly in HA 2021.5.x, but I still cannot get the card to display in 2021.6.x

Steps taken so far:
Updated card via HACS.
Updated HA to 2021.6.2
Checked Beta versions in HACS (same, 0.89a)
Restarted HA again.
Uninstalled BOM Weather Card via HACS
Reinstalled BOM Weather Card via HACS

I checked Home Assistant log file and I see this error:


http://homeassistant:8123/hacsfiles/bom-weather-card/bom-weather-card.js:914:14 Uncaught TypeError: Cannot read property 'childElementCount' of null
11:10:23 AM - (ERROR) components/system_log/init.py


Any tips would be appreciated. I am sure there must be something simple I am missing.
Thanks

weather wind speed shows incorrect units

The weather integrations for Home Assistant supports a wind_speed attribute. However no unit seems to be defined.

In my case, I'm using the default Meteorologisk institutt (Met.no) integration, which provides the wind-speed in km/h, however this card displays the data as mi/h. Home Assistant does not do any unit conversions, which results in the data being displayed with the wrong unit.

I assume that this is because I have Home Assistant set to use imperial units, but this is resulting in incorrect data being displayed. To fix this could this card be updated to display the wind speed in the weather card as km/h instead of mi/h IF the source returns data in km/h?
Alternatively this card can do km/h -> mi/h conversion, but I think that may be out of scope.

Related issue filed in Home Assistant core: home-assistant/core#55824

Invalid config

Since updating Home Assistant to 2021.4, I have received the following Invalid config notification. I believe this relates to the bom-weather-card and am hoping that you will be able to provide some help in fixing. I cannot decipher the code. It does mention Script in the notification, and the code it provides in the Log suggests line 14 of my configuration.yaml file which is my scripts.yaml. I have gone through Scripts and there is no script pertaining to the BOM-Weather-Card...

Capture

Logger: homeassistant.config
Source: config.py:437
First occurred: 10:41:38 (1 occurrences)
Last logged: 10:41:38

Invalid config for [script]: expected a dictionary. Got OrderedDict([('homeassistant', OrderedDict([('name', 'Home'), ('latitude', -xx.xxxxxx), ('longitude', xxx.xxxxx), ('elevation', 24), ('unit_system', 'metric'), ('time_zone', 'Australia/Sydney'), ('internal_url', 'http://homeassistant.local:8123'), ('packages', OrderedDict([('weather', OrderedDict([('sensor', [OrderedDict([('platform', 'template'), ('sensors', OrderedDict([('bom_current_text', OrderedDict([('value_template', "{% set val = states('sensor.zetland_short_text_0').split('.')[0] %} .... (See /config/configuration.yaml, line 14).

And my config yaml for reference.

homeassistant: !include homeassistant.yaml

logger:
  default: info

default_config:
mobile_app:
discovery:
frontend: !include frontend.yaml
tts: !include tts.yaml

cloud: !include cloud.yaml
group: !include groups.yaml

script: !include scripts.yaml
automation: !include automations.yaml
scene: !include scenes.yaml

device_tracker: !include device_tracker.yaml
input_select: !include input_select.yaml
sensor: !include sensor.yaml
binary_sensor: !include binary_sensor.yaml
zone: !include zones.yaml
proximity: !include proximity.yaml

light: !include light.yaml
switch: !include switch.yaml
climate: !include climate.yaml

spotify: !include spotify.yaml
#spotcast: !include spotcast.yaml

Issue with currentText layout

Hi,

I'm seeing an odd issue with the currentText object - it ends up printing underneath the apparent temperature, and the bounding box extends off the right hand edge of the card, which causes scroll bars to appear on my kitchen display.

image

image

I found that just removing the "width: ${currentTextWidth};" on line 621 or thereabouts produced something which renders sanely, but I'm not sure if that is the correct way to fix this.

Cheers

David

(oh, also it might be worth adding a console.info log line somewhere in there so it is obvious what version of the card is currently loaded, some other cards seem to have a line like this:
console.info("%c BOM-WEATHER-CARD \n%c Version 0.63 ", "color: orange; font-weight: bold; background: black", "color: white; font-weight: bold; background: dimgray"))

Feature request: option to use old icons

In my opinion, the new icons look much worse than the old ones.
I think the best solution would be to choose icons in the card configuration.
Is it possible?

Issue with Platform Average

Hi David - on updating my configurations I'm coming up against an issue with this section of code:

    name: today_temp_bom
    entities:
      - sensor.gosford_temperature
    start: '{{ now().replace(hour=0).replace(minute=0).replace(second=0) }}'
    end: '{{ now() }}'


      bom_today_max:
        value_template: >
          {%- if states('sensor.kariong_max_0') == 'n/a' -%} 
            {{ state_attr('sensor.today_temp_bom', 'max_value') }}
          {% else %}
            {{ states('sensor.kariong_max_0') }}
          {% endif %}
      bom_today_min:
        value_template: >
          {%- if states('sensor.sensor.kariong_min_0') == 'n/a' -%} 
            {{ state_attr('sensor.today_temp_bom', 'min_value') }}
          {% else %}
            {{ states('sensor.kariong_min_0') }}
          {% endif %}

this throws up a indenting error
image

If I move the bom_today_max back 1 tab the error goes away in the file editor but trying "check configuration" fails

image

I think I've installed the "average" integration properly - any ideas?

BOM Weather Card - entity_pop

Thanks for you great work.

I started with a fresh HASSIO install and restored just the configuration from a Snapshot. The rest I installed via the Store and HACS.

The BOM Weather Card didn't show anything. I isolated the problem to the entity_pop line. Without this line the weather is displayed.

Lines 935 and 936 of the bom_weather_card.js seems to where there is a problem. On another HA machine I don't have the second line and the weather card is working fine.

  if (this.config.entity_pop && !this.config.alt_pop) try { root.getElementById("pop-text").textContent = `${Math.round(this._hass.states[this.config.entity_pop].state)}` } catch(e) {}
  if (this.config.entity_pop && !this.config.alt_pop) try { root.getElementById("pop-text-today").textContent = `${this._hass.states[this.config.entity_possible_today].state}` } catch(e) {}

configuration.yaml

Hi David - Firstly - brilliant piece of work!

Hello from a fellow Australian down here in Nowra. I got your weather card fully working but all my code is in the configuration.yaml file - I couldn't get it working by having the weather.yaml file in a packages folder. I kept getting an error "extra keys not allowed @ data['weather']" I'm clearly having some formatting/naming issues. I've carefully read and tried to research the issue but thought you might be able to offer a bit of guidance in your readme about how to correctly point to the file from your configuration.yaml file. Perhaps include a 'safe' copy of our own configuration.yaml (or a portion thereof).

Anyway thanks so much for a great visual treat on the HA platform.
Cheers
Simon

The card is not displayed after update to 0.86a

After updating to 0.86a (HA 2020.12.1), the card is not displayed and there are errors in the browser console:

Uncaught (in promise) TypeError: Cannot read property 'state' of undefined
    at HTMLElement.slotValue (bom-weather-card.js:124)
    at HTMLElement.getSlot (bom-weather-card.js:100)
    at HTMLElement.render (bom-weather-card.js:57)
    at HTMLElement.update (app.e45b0549.js:10297)
    at HTMLElement.performUpdate (app.e45b0549.js:10297)
    at HTMLElement._enqueueUpdate (app.e45b0549.js:10297)

Card configuration:

          - type: custom:bom-weather-card
            entity_sun: sun.sun
            entity_daily_summary: sensor.dark_sky_daily_summary
            entity_current_conditions: sensor.dark_sky_icon
            entity_humidity: sensor.humidity_outdoor
            entity_pressure: sensor.pressure_outdoor
            entity_temperature: sensor.temperature_outdoor
            entity_apparent_temp: sensor.dom_realfeel_temperature
            entity_wind_bearing: sensor.dark_sky_wind_bearing
            entity_wind_speed: sensor.dark_sky_wind_speed
            entity_pop: sensor.dark_sky_precip_probability
            entity_pop_intensity: sensor.dom_precipitation
            entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1d
            entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2d
            entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3d
            entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4d
            entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5d
            entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_1d
            entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_2d
            entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_3d
            entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_4d
            entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_5d
            entity_forecast_icon_1: sensor.dark_sky_icon_1d
            entity_forecast_icon_2: sensor.dark_sky_icon_2d
            entity_forecast_icon_3: sensor.dark_sky_icon_3d
            entity_forecast_icon_4: sensor.dark_sky_icon_4d
            entity_forecast_icon_5: sensor.dark_sky_icon_5d
            entity_summary_1: sensor.dark_sky_summary_1d
            entity_summary_2: sensor.dark_sky_summary_2d
            entity_summary_3: sensor.dark_sky_summary_3d
            entity_summary_4: sensor.dark_sky_summary_4d
            entity_summary_5: sensor.dark_sky_summary_5d
            entity_pop_1: sensor.dark_sky_precip_probability_1d
            entity_pop_2: sensor.dark_sky_precip_probability_2d
            entity_pop_3: sensor.dark_sky_precip_probability_3d
            entity_pop_4: sensor.dark_sky_precip_probability_4d
            entity_pop_5: sensor.dark_sky_precip_probability_5d
            current_data_top_margin: 7em
            time_format: 24
            locale: pl
            tooltips: true
            tooltip_width: 100
            tooltip_bg_color: "#FAFAFA"
            tooltip_fg_color: "#212121"
            tooltip_border_color: "#D9D9D9"
            tooltip_left_offset: -14
            slot_l1: "wind"
            slot_l2: "pop"
            slot_l3: "sun_following"
            slot_l4: "remove"
            slot_l5: "remove"
            slot_r1: "humidity"
            slot_r2: "pressure"
            slot_r3: "sun_next"
            slot_r4: "remove"
            slot_r5: "remove"
            old_icon: "true"
            show_decimals: true

Today's Low NaN °C

I've stated getting this just recently:
Today's Low NaN °C

on my card using:
entity_daytime_low: sensor.bom_today_min

This is the one I use, the other is commented out. Not sure on the differences between the two, but both seem to give me the error.

      bom_today_min:
        value_template: >
          {%- if states('sensor.suburbname_temp_min_0') == 'n/a' -%} 
            {{ state_attr('sensor.today_temp_bom', 'min_value') }}
          {% else %}
            {{ states('sensor.suburbname_temp_min_0') }}
          {% endif %}

bom_today_min is "Unknown"

sensor.suburbname_temp_min_0 is "Unknown"

Is this just a problem with the BOM data?
Thanks

instructions unclear

Hi David;
These instructions are convoluted and very difficult to follow. 2 nights attempting to get this working and no success. Would it be possible to show proper examples of what you are entering into config.yaml / ui-lovelace.yaml in clear instructions? I've tried multiple combinations after "installing" this from HACS, yet nothing is working and no entities appearing. Something is missing yet after reading your instructions repeatedly I can not work out what it is.
Thanks

'install' is deprecated, use 'async_install' instead

Love your work. One small issue I noted when I upgraded to v0.78 today. I received the following warning in the log file (BTW, it appears to work fine):

Log Details (WARNING)
Logger: hacs.repository.plugin.DavidFW1960.bom-weather-card
Source: custom_components/hacs/repositories/helpers/methods/installation.py:17
First occurred: 12:59:19 (1 occurrences)
Last logged: 12:59:19

'install' is deprecated, use 'async_install' instead

Wind Speed throwing an error

Hi,

When I enter the following line into the card, the card displays nothing:
"entity_wind_speed: sensor.sydney_observatory_hill_wind_speed_kilometer"

With this line removed, everything else seems to be working, looking like your example card. Animations, etc all work (It is great card and love the way it looks!!!). I seem to have the entity imported from the BOM integration and it seems to graph with reasonable values.

I think I have copied over all of your icons, directories, weather.yaml, etc. (I am still new to HA, so wasn't sure where resources... type:module text should go)

It all otherwise looks ok, and thanks for your help.

Craig

Card Width Issue Using Companion App

I migrated to your wonderful card as part of moving from Darksky to OpenWeatherMap. On desktop, it works perfectly, however, in the Android companion app, the card causes the page to become wider than the screen as shown in the images below (the page scrolls side to side instead of having chevrons on the top bar). I have tried both with my layout tweaks and with the default configuration and it makes no difference. Removing the card returns the page width to normal. I have skimmed the code looking for a culprit but I am no expert...

screenshot1
screenshot2

Since upgrading Home Assistant to 2021.6.1 Weather Card No Longer Works

Hi,

I've recently updated to 2021.6.1 and then 2021.6.2, and the weather card no longer works.

If I look in the system log I see the following error:

Logger: frontend.js.latest.202106030
Source: components/system_log/init.py:190
First occurred: 10:30:19 PM (5 occurrences)
Last logged: 10:31:56 PM

https://hass/local/custom_ui/bom-weather-card.js?v=0.1:891:13 TypeError: null is not an object (evaluating 'root.childElementCount')

Any suggestions welcome.

James

Current_Text being cropped

Hi David.
Given, today my card was reporting "Morning Fog", I noticed for the first time that this field was not displaying correctly. The 2 "g" characters are being cropped. Almost to the point where they look like a "q".
Which setting can I manipulate to give this field more depth. Perhaps it is the data below that is to tall and it is overlapping current_text. Not sure.

Thanks!

Graphs not updating without refressh

Hi David,

Firstly I love what your work and I am pretty new to Home Assistant so still learning, but am a programmer (just not good at Python yet).

I have the graphs set up, but they only update when I do a refresh. of the page. Is this a bug or something I have configured wrongly.

Also the data provided by the core bom sensor code for observations is not that great. They are using data that only updates every 30 minutes, but the bom actually provide data every 10 minutes. I have an mqqt server hosted on google that pulls all that data and publishes it. I have had a look at creating a bom-mqqt integration but I am really not sure where to start. If you interested flick me an email and I'll share some stuff privately. (simon at makin-thing.com)

Cheers
Simon

I have added the card but the card shows as empty

I've been through the setup in my current hass.io setup which I have been using dark sky successfully in. I've also created a new blank hass.io setup with the same results. In both instances I've used HACS to install bom_forecast and bom-weather-card with your weather.yaml file making sure to replace _gosford with _melbourne. I've tried both the basic lovelace config and your own lovelace config without any success. Are there any known issues that could cause this?

Unable to create icons folder

https://www.reddit.com/r/homeassistant/comments/drdzye/unable_to_create_icons_folder_in_configwww/

I'm having the same problem as the people In the link above. I can make a folder called 'new folder', but as soon as I try and rename to "icons" it won't let me. If I try to make the icons folder elsewhere, and then just copy it across, I get "could not find this item". I'm using the Samba share add-on

Edit: Thanks, removing the icon, and underscore wildcard lines from under 'veto_files:' did the trick.

Query: How to get card to work in HA 2021.6.2?

Good morning,

I have updated the BOM Weather Card via HACS to 0.89a this morning, but it seems the card still is not working for me.
I have logged this as a query rather than a fault as I am sure the issue could be my end.

I had the card working perfectly in HA 2021.5.x, but I still cannot get the card to display in 2021.6.x

Steps taken so far:
Updated card via HACS.
Updated HA to 2021.6.2
Checked Beta versions in HACS (same, 0.89a)
Restarted HA again.
Uninstalled BOM Weather Card via HACS
Reinstalled BOM Weather Card via HACS

Any tips would be appreciated. I am sure there must be something simple I am missing.
Thanks

Windy shows incorrect icon?

G'day David, I have recently started using this card again.. which is amazing by the way.

Today and tomorrows icon code is "wind":
image

Yet, the card is showing the icon for cloudy
image

Home Assistant reports invalid repository URL.

Home Assistant Version:

Version
core-2021.4.5
[latest]

Repro steps:

  1. Navigate to 'Supervisor | Add-on Store'
  2. Top right drop down menu (3 dots) | Repositories
  3. Enter URL 'https://github.com/DavidFW1960/bom-weather-card' and click Add
  4. Check system logs to see errors below

Error log:

21-04-17 06:31:46 INFO (MainThread) [supervisor.store.git] Cloning add-on https://github.com/DavidFW1960/bom-weather-card repository

21-04-17 06:31:48 ERROR (MainThread) [supervisor.store] https://github.com/DavidFW1960/bom-weather-card is not a valid add-on repository

21-04-17 06:31:48 INFO (MainThread) [supervisor.resolution.module] Create new issue IssueType.CORRUPT_REPOSITORY - ContextType.STORE / 8ee35b6c
21-04-17 06:31:48 INFO (MainThread) [supervisor.resolution.module] Create new suggestion SuggestionType.EXECUTE_REMOVE - ContextType.STORE / 8ee35b6c
21-04-17 06:31:48 WARNING (MainThread) [supervisor.store.data] No repository information exists at /data/addons/git/8ee35b6c
21-04-17 06:31:48 INFO (MainThread) [supervisor.store] Loading add-ons from store: 66 all - 0 new - 0 remove
21-04-17 06:31:48 INFO (MainThread) [supervisor.resolution.fixups.store_execute_remove] Remove invalid Store: 8ee35b6c
21-04-17 06:31:48 INFO (MainThread) [supervisor.store.git] Removing custom add-on repository https://github.com/DavidFW1960/bom-weather-card

Weather Card Icons not found

image

Double checked paths files etc. In the console I can see that the the Card cannot find the relevant animated picture.

When I use File Explorer in Chrome, access the animated picture via Samba, open it and it shows up with following in the address line:

file://10.1.1.100/config/www/Icons/weather_icons/animated/fair-day.svg.

It is probably a very simple solution but I break my head about it. Advise is appreciated.

Missing sensor.today_temp_bom after 0.117 upgrade and conversion to bremor BOM collector

I used the card from your lovelace.yaml and the sensors from template.md. Most things are working nicely except the max and min temp for the day. These seem to come from the following sensors which in turn use a state attr of a sensor I cannot find.

bom_today_max: value_template: > {{ state_attr('sensor.today_temp_bom', 'max_value') }}

bom_today_min: value_template: > {{ state_attr('sensor.today_temp_bom', 'min_value') }}

Template Error

Not sure if this warning is from this card, but figured it might be as my subrbname, the real one, was listed...

Source: helpers/template.py:1210
First occurred: 3:48:15 PM (27 occurrences)
Last logged: 3:48:36 PM

Template warning: 'timestamp_custom' got invalid input '00:00' when compiling template '{{ '00:00' | timestamp_custom('%H:%M') }}' but no default was specified. Currently 'timestamp_custom' will return '00:00', however this template will fail to render in Home Assistant core 2021.12
Template warning: 'float' got invalid input 'unknown' when rendering template '{%- if states('sensor.suburbname_wind_speed_kilometre') | float >= 118 -%} 12 {%- elif states('sensor.suburbname_wind_speed_kilometre') | float >= 103 -%} 11 {%- elif states('sensor.suburbname_wind_speed_kilometre') | float >= 89 -%} 10 {%- elif states('sensor.suburbname_wind_speed_kilometre') | float >= 75 -%} 9 {%- elif states('sensor.suburbname_wind_speed_kilometre') | float >= 62 -%} 8 {%- elif states('sensor.suburbname_wind_speed_kilometre') | float >= 50 -%} 7 {%- elif states('sensor.suburbname_wind_speed_kilometre') | float >= 39 -%} 6 {%- elif states('sensor.suburbname_wind_speed_kilometre') | float >= 29 -%} 5 {%- elif states('sensor.suburbname_wind_speed_kilometre') | float >= 20 -%} 4 {%- elif states('sensor.suburbname_wind_speed_kilometre') | float >= 12 -%} 3 {%- elif states('sensor.suburbname_wind_speed_kilometre') | float >= 6 -%} 2 {%- elif states('sensor.suburbname_wind_speed_kilometre') | float >= 2 -%} 1 {%- else -%} 0 {%- endif -%}' but no default was specified. Currently 'float' will return '0', however this template will fail to render in Home Assistant core 2021.12
Template warning: 'round' got invalid input 'unknown' when rendering template '{% if states('sensor.suburbname_temp_min_0') == 'unknown' %} {% set min = states('sensor.bom_today_min') %} {% else %} {% set min = states('sensor.suburbname_temp_min_0') %} {% endif %} {% if states('sensor.suburbname_temp_max_0') == 'unknown' %} {% set max = states('sensor.bom_today_max') %} {% else %} {% set max = states('sensor.suburbname_temp_max_0') %} {% endif %} {{ max|round(0)}}°/{{ min|round(0)}}°/{{states('sensor.suburbname_rain_chance_0')|round(0)}}%' but no default was specified. Currently 'round' will return 'unknown', however this template will fail to render in Home Assistant core 2021.12```

Anyone else find the same?

The card is not displayed after update HA to 0.116

After upgrade HA to 0.116.0 card is not displayed and there is an error in browser console:

Uncaught TypeError: Cannot read property 'childElementCount' of null
    at HTMLElement.updateValues (bom-weather-card.js:878)
    at HTMLElement.set hass [as hass] (bom-weather-card.js:868)
    at HTMLElement.value (chunk.b78314dc93f493d4fbaf.js:10215)
    at HTMLElement.value (chunk.b78314dc93f493d4fbaf.js:10215)
    at HTMLElement.<anonymous> (chunk.b78314dc93f493d4fbaf.js:10215)
    at n (app.5c62d6a4.js:1)
    at chunk.b78314dc93f493d4fbaf.js:14638

Fix typo in readme

There is a typo in the readme.md file, that means if you are copying and pasting the example entity values, the card will not work. It's a simple fix, so I created a matching pull request #59.

Thanks for the great card.

weather_icons.zip is missing the amcharts additions icons

First off, Thanks. Nice work here. It looks amazing. Took me a while to get it working fully.

Issues I had was that an icon for entity_current_conditions would not display for a current state of 'storm'. I poked through the js and found it was looking for scattered thunderstorms icon which was missing from the weather_icons.zip. Found the icons on SouthernWolf95 additions and added them to the icons directory. This still didn't work until I had renamed the files to remove the uppercase and -Animated/-Static parts of the file name. For example -> 'Scattered-Thunderstorms - Animated.svg' changed to 'scattered-thunderstorms.svg. So really the issue is just the zip doesn't contain all the files which makes the install instructions a bit confusing.

'Fire' appears prefixed to entity_fire_danger_summary

Hi,

I get the word 'Fire' in front of the summary information for fire danger summary

In the template tool: {{ states('sensor.bom_perth_forecast_fire_danger_summary') }}
Displays: Perth Coastal Plain: Low-Moderate, Perth Hills: Low-Moderate

In the card:
entity_fire_danger_summary: sensor.bom_perth_forecast_fire_danger_summary
See the attached image for how it shows

Screenshot 2020-05-04 at 13 04 36

Apart from that, this is a great card - thank you 👍

Position problem

Hi David,
Thanks for your awesome work! However I am having a small issue getting the appearance correct.
Can you point me in the right dirction to get the text up the top in the right place?
Kind regards,
Chris,
image

cards:
  - entity_apparent_temp: sensor.bom_bairnsdale_feels_like_c
    entity_current_conditions: sensor.bom_bairnsdale_icon_0
    entity_current_text: sensor.bom_current_text
    entity_daily_summary: sensor.bom_bairnsdale_detailed_summary_0
    entity_daytime_high: sensor.bom_today_max
    entity_forecast_high_temp_1: sensor.bom_bairnsdale_max_temp_c_1
    entity_forecast_high_temp_2: sensor.bom_bairnsdale_max_temp_c_2
    entity_forecast_high_temp_3: sensor.bom_bairnsdale_max_temp_c_3
    entity_forecast_high_temp_4: sensor.bom_bairnsdale_max_temp_c_4
    entity_forecast_high_temp_5: sensor.bom_bairnsdale_max_temp_c_5
    entity_forecast_icon_1: sensor.bom_bairnsdale_icon_1
    entity_forecast_icon_2: sensor.bom_bairnsdale_icon_2
    entity_forecast_icon_3: sensor.bom_bairnsdale_icon_3
    entity_forecast_icon_4: sensor.bom_bairnsdale_icon_4
    entity_forecast_icon_5: sensor.bom_bairnsdale_icon_5
    entity_forecast_low_temp_1: sensor.bom_bairnsdale_min_temp_c_1
    entity_forecast_low_temp_2: sensor.bom_bairnsdale_min_temp_c_2
    entity_forecast_low_temp_3: sensor.bom_bairnsdale_min_temp_c_3
    entity_forecast_low_temp_4: sensor.bom_bairnsdale_min_temp_c_4
    entity_forecast_low_temp_5: sensor.bom_bairnsdale_min_temp_c_5
    entity_humidity: sensor.bom_bairnsdale_relative_humidity
    entity_pop: sensor.bom_bairnsdale_chance_of_rain_0
    entity_pop_1: sensor.bom_bairnsdale_chance_of_rain_1
    entity_pop_2: sensor.bom_bairnsdale_chance_of_rain_2
    entity_pop_3: sensor.bom_bairnsdale_chance_of_rain_3
    entity_pop_4: sensor.bom_bairnsdale_chance_of_rain_4
    entity_pop_5: sensor.bom_bairnsdale_chance_of_rain_5
    entity_pop_intensity: sensor.bom_bairnsdale_rain_today
    entity_summary_1: sensor.bom_bairnsdale_summary_1
    entity_summary_2: sensor.bom_bairnsdale_summary_2
    entity_summary_3: sensor.bom_bairnsdale_summary_3
    entity_summary_4: sensor.bom_bairnsdale_summary_4
    entity_summary_5: sensor.bom_bairnsdale_summary_5
    entity_temperature: sensor.bom_bairnsdale_air_temp_c
    entity_wind_bearing: sensor.bom_bairnsdale_wind_direction
    entity_wind_speed: sensor.bom_bairnsdale_wind_speed_kmh
    title: BOM Weather
    type: 'custom:bom-weather-card'
type: vertical-stack
```

Idea - create entity tap actions

Would be great to be able to tap each item, and bring up the sensor's standard more-info box. (ie, tapping on the tempearture brings up the sensor.bom_xx_ sensor, for viewing its history, etc.

Would also love it if the forecast panels were expandable / collapsed by default.

sensor.bom_today_max value unkown

Hi I am trying to work out why since the recent upgrade for HASSIO and updated the your integrations and BOM its not finding this value. All other values are ok. So just want to understand how your weather yaml code works for find out why its not collecting it.
I have tried both methods using the average integration as per your guide. It was working prior to upgrade.

I am using warrawee as my custom local connection and Terrey Hills for everything else (as per the setup prompts)
I did unistall the bureau meterology integration and reinstalled it, same for your custom card.

So sensor.bom_today_max = unknown, and sensor.warrawee_temp_max_0 = 25 (I waited 24 hours in case it took time to update)
Below is screen shot of your weather.yaml and snippet of what I have in my card.

entity_daytime_high: sensor.bom_today_max
entity_daytime_low: sensor.bom_today_min

image

image

Icons are not rendered if base URL contains "night"

Hello! I updated to the latest 0.87b and started having issues with the forecast icons not rendering. I've narrowed down the problem to the way the Home Assistant URL has .replace("night", "day") called on it, which presents a problem if the base URL contains the sequence "night" in it, like mine does, causing the images to be retrieved from an invalid URL. I'm unfamiliar with this codebase so I'm unsure of the best way to solve this problem, but I'd suppose performing the replace on more specific parts of the URL where required, leaving the base URL unmodified would work?

Cannot get your card to show

Hi there,

First of all, great write up and very detailed - love it for people like me who are just learning this. I followed every step, got BOM installed, set my location, it created the sensors.

I copied your code, change the sensor names to mine but unfortunately it isnt working... any ideas? I would like to get the card you have in your example.

Thank you!

Screen Shot 2021-06-19 at 16 47 28

bom-weather

Errors in browser console

In browser console I have these errors when I go to view with bom-weather-card:

Uncaught (in promise) TypeError: Cannot set property 'textContent' of null
    at HTMLElement.updateValues (bom-weather-card.js:832)
    at HTMLElement.set hass [as hass] (bom-weather-card.js:787)
    at HTMLElement.value (hui-stack-card.ts:40)
    at layout-card.js:1
    at Array.forEach (<anonymous>)
    at HTMLElement.updated (layout-card.js:1)
    at HTMLElement.performUpdate (updating-element.ts:720)
    at HTMLElement._enqueueUpdate (updating-element.ts:653)

My configuration:

- id: climate
    icon: mdi:cloud
    title: "Klimat"
    path: climate
    panel: true
    cards:
      - type: custom:layout-card
        max_columns: 5
        cards:
          - type: vertical-stack
            cards:
              - type: custom:bom-weather-card
                entity_sun: sun.sun
                entity_daily_summary: sensor.dark_sky_daily_summary
                entity_current_conditions: sensor.dark_sky_icon
                entity_humidity: sensor.humidity_outdoor
                entity_pressure: sensor.pressure_outdoor
                entity_temperature: sensor.temperature_outdoor
                entity_apparent_temp: sensor.dark_sky_apparent_temperature
                entity_visibility: sensor.dark_sky_visibility
                entity_wind_bearing: sensor.dark_sky_wind_bearing
                entity_wind_speed: sensor.dark_sky_wind_speed
                entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1d
                entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2d
                entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3d
                entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4d
                entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5d
                entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_1d
                entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_2d
                entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_3d
                entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_4d
                entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_5d
                entity_forecast_icon_1: sensor.dark_sky_icon_1d
                entity_forecast_icon_2: sensor.dark_sky_icon_2d
                entity_forecast_icon_3: sensor.dark_sky_icon_3d
                entity_forecast_icon_4: sensor.dark_sky_icon_4d
                entity_forecast_icon_5: sensor.dark_sky_icon_5d
                entity_summary_1: sensor.dark_sky_summary_1d
                entity_summary_2: sensor.dark_sky_summary_2d
                entity_summary_3: sensor.dark_sky_summary_3d
                entity_summary_4: sensor.dark_sky_summary_4d
                entity_summary_5: sensor.dark_sky_summary_5d
                entity_pop_1: sensor.dark_sky_precip_probability_1d
                entity_pop_2: sensor.dark_sky_precip_probability_2d
                entity_pop_3: sensor.dark_sky_precip_probability_3d
                entity_pop_4: sensor.dark_sky_precip_probability_4d
                entity_pop_5: sensor.dark_sky_precip_probability_5d
                time_format: 24
                locale: pl
                tooltips: true
                tooltip_width: 100
                tooltip_bg_color: "#FAFAFA"
                tooltip_fg_color: "#212121"
                tooltip_border_color: "#D9D9D9"
                tooltip_left_offset: -14
                slot_l1: "wind"
                slot_l2: "visibility"
                slot_l3: "sun_following"
                slot_l4: "remove"
                slot_l5: "remove"
                slot_r1: "humidity"
                slot_r2: "pressure"
                slot_r3: "sun_next"
                slot_r4: "remove"
                slot_r5: "remove"
                old_icon: "true"

Having trouble getting the icons to show up

I'm not sure if I'm just being impatient, and this is just a bit of a glitch with the new way of retrieving the BOM information, or if I've done something wrong.

As an example:
entity_current_conditions: sensor.australiansuburbname_mdi_icon_0

which right now is supposed to display:
mdi:weather-sunny

I have a sunny.png in \config\www\bom_icons
and I've tried \config\www\icons\bom_icons

but nothing seems to be appearing. Any ideas, please?

2021.8.0 update giving a previous error on load.

It was fixed a while ago I saw in the other issues.
I updated to 2021.8.0. I updated all the components to the latest version too.

Seems when I load the card I get - bom-weather-card.js:903:14 Uncaught TypeError: Cannot read property 'childElementCount' of null

I upgraded the average custom component as it was complaining it was depreciated but even when it was updated I am getting this error. How can we debug this and maybe fix it?

Installation in HA .0117+

Could you please shed some light on this comment in the README.md

"VERY IMPORTANT NOTE: As of HA 0.117.x, the BOM Core Sensor component is removed as it violates ADR14 rule regarding web scraping."

Does this mean it is permanently disabled?

I am trying to install for the first time in this version.

Icons are not loading

Hi,
I have installed your Card via HACS.
While everything looks great, I can not getting the icons to load

using the following:
entity_current_conditions: sensor.richmond_icon_descriptor_0, HA provides a value of mostly_sunny

image

Is there something I am missing?

image

Also, how do we get a background like the one in your images.
Thanks

This is the whole code for my card

type: custom:bom-weather-card
title: BOM Weather
entity_current_conditions: sensor.richmond_icon_descriptor_0
entity_temperature: sensor.richmond_temp
entity_wind_bearing: sensor.richmond_wind_direction
entity_forecast_high_temp_1: sensor.richmond_temp_max_1
entity_forecast_high_temp_2: sensor.richmond_temp_max_2
entity_forecast_high_temp_3: sensor.richmond_temp_max_3
entity_forecast_high_temp_4: sensor.richmond_temp_max_4
entity_forecast_high_temp_5: sensor.richmond_temp_max_5
entity_forecast_icon_1: sensor.richmond_icon_descriptor_1
entity_forecast_icon_2: sensor.richmond_icon_descriptor_2
entity_forecast_icon_3: sensor.richmond_icon_descriptor_3
entity_forecast_icon_4: sensor.richmond_icon_descriptor_4
entity_forecast_icon_5: sensor.richmond_icon_descriptor_5
entity_forecast_low_temp_1: sensor.richmond_temp_min_1
entity_forecast_low_temp_2: sensor.richmond_temp_min_2
entity_forecast_low_temp_3: sensor.richmond_temp_min_3
entity_forecast_low_temp_4: sensor.richmond_temp_min_4
entity_forecast_low_temp_5: sensor.richmond_temp_min_5
entity_summary_1: sensor.richmond_short_text_1
entity_summary_2: sensor.richmond_short_text_2
entity_summary_3: sensor.richmond_short_text_3
entity_summary_4: sensor.richmond_short_text_4
entity_summary_5: sensor.richmond_short_text_5
entity_sun: sun.sun
entity_daytime_high: sensor.richmond_temp_max_0
entity_daytime_low: sensor.richmond_temp_min_0
entity_wind_speed: sensor.richmond_wind_speed_kilometre
entity_wind_gust: sensor.richmond_gust_speed_kilometre
entity_humidity: sensor.richmond_humidity
entity_apparent_temp: sensor.richmond_temp_feels_like
entity_daily_summary: sensor.richmond_extended_text_0
entity_pop: sensor.richmond_rain_chance_0
entity_pop_intensity: sensor.richmond_rain_since_9am
entity_possible_today: sensor.richmond_rain_amount_range_0
entity_pos_1: sensor.richmond_rain_amount_range_1
entity_pos_2: sensor.richmond_rain_amount_range_2
entity_pos_3: sensor.richmond_rain_amount_range_3
entity_pos_4: sensor.richmond_rain_amount_range_4
entity_pos_5: sensor.richmond_rain_amount_range_5
entity_pop_1: sensor.richmond_rain_chance_1
entity_pop_2: sensor.richmond_rain_chance_2
entity_pop_3: sensor.richmond_rain_chance_3
entity_pop_4: sensor.richmond_rain_chance_4
entity_pop_5: sensor.richmond_rain_chance_5
entity_uv_alert_summary: sensor.richmond_uv_category_0
locale: en
static_icons: false
tooltip_bg_color: rgb( 75,155,239)
tooltip_border_color: orange
tooltip_border_width: 3
tooltip_caret_size: 10
tooltip_fg_color: '#fff'
tooltip_left_offset: -12
tooltip_width: 100
tooltips: true
old_daily_format: false
time_format: 12
show_beaufort: true
old_icon: 'true'
show_decimals: false

Configuration Help

I need some further instruction of setting this weather card up.

I have setup bom forecast and using weather.yaml packages template all working as expected. However, have some difficulty to get frontend bom-weather-card properly displayed.

I have installed HACS and installed Bom Weather Card through it. Also has weather icons downloaded extracted in the right path.

In the Readme.md - Configuration - 2, for HACS installation. Where should I put resources and module type? If I add lines at the top of home dashboard - raw configuration editor, system will alert me to add configuration in lovelace UI configuration.
So I go to Configuration - Lovelace Dashboards - Resources. I saw URL shows '/hacsfiles/bom-weather-card/bom-weather-card.js', Type shows 'JavaScript Module'. I have no way to change it type to 'module', the only option is 'Stylesheet'.
If I change the URL 'hacsfiles' to /config/www/community', HACS will alert me this frontend bom-weather-card is not loaded.

I assume JavaScript Module is the correct type. Then I go back to home page. Edit Dashboard, add card, manual, modify and paste content from bom-weather-card/lovelace.yaml but nothing shows up.

Would you please suggest which step I may have missed? Thanks a lot.

Gap between current conditions columns and current temperature/icon

After last update there is a huge gap between the current conditions columns and the current temperature/icon.

Earlier versions:
image

Current version:
image

Configuration:

- type: custom:bom-weather-card
  entity_sun: sun.sun
  entity_daily_summary: sensor.dark_sky_daily_summary
  entity_current_conditions: sensor.dark_sky_icon
  entity_humidity: sensor.humidity_outdoor
  entity_pressure: sensor.pressure_outdoor
  entity_temperature: sensor.temperature_outdoor
  entity_apparent_temp: sensor.dark_sky_apparent_temperature
  entity_visibility: sensor.dark_sky_visibility
  entity_wind_bearing: sensor.dark_sky_wind_bearing
  entity_wind_speed: sensor.dark_sky_wind_speed
  entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1d
  entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2d
  entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3d
  entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4d
  entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5d
  entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_1d
  entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_2d
  entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_3d
  entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_4d
  entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_5d
  entity_forecast_icon_1: sensor.dark_sky_icon_1d
  entity_forecast_icon_2: sensor.dark_sky_icon_2d
  entity_forecast_icon_3: sensor.dark_sky_icon_3d
  entity_forecast_icon_4: sensor.dark_sky_icon_4d
  entity_forecast_icon_5: sensor.dark_sky_icon_5d
  entity_summary_1: sensor.dark_sky_summary_1d
  entity_summary_2: sensor.dark_sky_summary_2d
  entity_summary_3: sensor.dark_sky_summary_3d
  entity_summary_4: sensor.dark_sky_summary_4d
  entity_summary_5: sensor.dark_sky_summary_5d
  entity_pop_1: sensor.dark_sky_precip_probability_1d
  entity_pop_2: sensor.dark_sky_precip_probability_2d
  entity_pop_3: sensor.dark_sky_precip_probability_3d
  entity_pop_4: sensor.dark_sky_precip_probability_4d
  entity_pop_5: sensor.dark_sky_precip_probability_5d
  time_format: 24
  locale: pl
  tooltips: true
  tooltip_width: 100
  tooltip_bg_color: "#FAFAFA"
  tooltip_fg_color: "#212121"
  tooltip_border_color: "#D9D9D9"
  tooltip_left_offset: -14
  slot_l1: "wind"
  slot_l2: "visibility"
  slot_l3: "sun_following"
  slot_l4: "remove"
  slot_l5: "remove"
  slot_r1: "humidity"
  slot_r2: "pressure"
  slot_r3: "sun_next"
  slot_r4: "remove"
  slot_r5: "remove"
  old_icon: "true"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.