Giter Site home page Giter Site logo

lovelace-buien-rain-card's Introduction

*** THIS CARD IS NO LONGER IN DEVELOPMENT ***

I created this card out of desperation (there was no way to forecast) and its implimentation is pretty terrible. Please try the Neerslaag App from aex351 who did some awesome work and made a much better implimentation. Visit on HAS Forum

Home Assistant Buienradar Forecast Card

Graph of Buienradars rain forecast

Preview Image

Simple install

  1. Download and copy buien-rain-card.js into your config/www directory.

  2. Add a reference to buien-rain-card.js inside your ui-lovelace.yaml.

resources:
  - url: /local/buien-rain-card.js
    type: module

Add as a card to your UI

  - type: 'custom:buien-rain-forecast'
    long: 4.8945
    lat: 52.3667
    lineColor: 'rgba(89, 160, 238, 1)'
    fillColor: 'rgba(89, 160, 238, 0.2)'
    update_interval: 10
    icon: 'mdi:weather-rainy'

(update interval is in seconds)

An example in my own UI as a Picture Element:

Preview Image

lovelace-buien-rain-card's People

Contributors

lukevink 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

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

lovelace-buien-rain-card's Issues

Tweaked version, to make it look more like buienalarm and scale the y-axis a bit better

Sorry, I know I should learn github and make use of it's mechanisms. But don't have time for that now. So I'm just adding a tweaked version of the file here.

I included chart.js annotations to make it look more like buienalarm and used a different mechanism for the y-axis max, hoping it will scale better. I'm a very lazy and unskilled developer, so it won't look nice. But at least for me it works. Although I also still have to add the following style in the lovelace configuration:
.chartjs-render-monitor { height: 170px; }
buien-rain-card_spudje_20200812.zip

Does not render in Chrome

Thanks, nice idea, and it works great on my Android phone. Not on Chrome or the new Edge on Windows. (Works on the old Edge).

HACS support would be awesome

It would make installation but foremost updates much much easier.
Do you consider adding support to install this card via HACS?
Cheers,
Georg

Configuration error: No type provided

Hi there, i uploaded the js file to /config/www. Insert the url via configuration/lovelace/resources. However i couldnt generate a picture element card as it said No type provided. Did i miss any settings?

Wrong info.md file

It seems you used the info.md file from the custom swipe card. So in HACS the wrong info is presented.

Limits location?

What countries is it compatible? I live in Barcelona, ​​Spain and it doesn't work

Lat 41.3875
Long 2.1494

Would it be possible to add this to HACS? (or native HA?)

Thanks for creating this addon!

Ideal solution would be to add this to the existing (part of HA core) buienradar plugin (retrieving data only once?)
Adding to HA core or HACS would already help end possibly extend the userbase

Define max range y axis

It works great! But it is stuck at the max range of 10. How do I change this to 4 or 5?
Thanks!

use templates for coordinates

Love the card. It should be great if one could use template values for the coordinates. Like:

long: {{state_attr('person.jeroen','longitude')}}
lat: {{state_attr('person.jeroen','latitude'')}}

Not showing up on desktop Chrome

The infor aint showing up in Chrome on a wondows PC. I've heard it also doesn't show up in Firegox.

It does show up in on the iPad though

Cant get it to work in Firefox

Saw an earlier comment about not working in firefox from april. It still doesnt. The icon is there but no data.
installed via Hacs.. so put the card info in lovelace and it should work right ?? and yes iam in the Netherlands.

Regards Frank

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.