Tides in Lovelace

I am looking for ways to display ocean tides in Lovelace, I can across the website tides4fishing.com and I really like the way they display it, can anyone help me get something like this in lovelace

1 Like

I can’t get to the website right now for some reason to check this, but if the tide clock is an updated static image with a constant URL, you could create a generic camera component with the image link. Generic Camera - Home Assistant

This would be similar to the animated radar example found here: https://community.home-assistant.io/t/add-an-active-weather-radar-map

Wow, that site is pretty intense. Someone had a lot of fun with both math and graphing!

I have a simple card showing last and next tide, plus the state of the moon. Works for me. Something a bit prettier would be nice though.

check out https://github.com/jshufro/home_assistant_noaa_tides

You can set up the integration to get tide times and water temperature from noaa buoy locations and then show the info however you like. You find the closet noaa station to your location using https://tidesandcurrents.noaa.gov/ and configure the integration with the info for it.

Jacob created a mini graph card to go along with a fork of the noaa_tides integration.
I’ve been using it for a while and like. Occasionally the noaa tides side goes down for a little while, but most of the time there is no problem.

Unfortunately, it’s not a static image, its looks like the tide clock have the high tide and low tide entered and the pointer is then calculated from the current time each time the page is refreshed.

I have been able to get the tide times from the Australian Bureau of Meteorology sites but I am trying to find a nice way to display them

That tides4fishing tide graphic is great.

If you cannot use the Generic Camera - Home Assistant integration the only option may be to either adapt a lovelace card, or write our own.

When I say “our” - I mean of course that I have no skills in writing lovelace cards.

Perhaps leveraging something like this https://github.com/custom-cards/circle-sensor-card or https://github.com/custom-cards/canvas-gauge-card

First mockup:

that looks awesome, could you please share the code when you are ready

Its not really ready yet, just playing, but just put worldtides into my HA to get some real data :slight_smile:

OK I think I have done it, but there hasn’t been a full tide cycle yet to check it all. There may be bugs!

I used the canvas gauge card which is available thru HACS. I set up a circular gauge with zero at 12 o’clock. It does from 0 (12 o’clock) to 100 (also 12 o/clock). 12 o’clock represents high tide and 6 o’clock represents low tide.

I used the world tides integration as the tide sensor. It produces one entity with a state like “High Tide at 5:30 pm” and some attributes as follows:

attribution: Data provided by WorldTides
high_tide_time_utc: 2021-09-16T12:51+0000
high_tide_height: 0.853
low_tide_time_utc: 2021-09-16T19:01+0000
low_tide_height: -0.957
friendly_name: Lyttelton Harbour Tides

I then made a template sensor which (hopefully) gives a number between 0 and 100 representing the tide state. Between 0 and 50 the tide is falling and between 50 and 100 the tide is rising. The gauge simply displays that sensor. The sensor name is sensor.tide_pos (short for position)

The gauge setup is as follows:

type: custom:canvas-gauge-card
entity: sensor.tide_pos
card_height: 250
gauge:
  animation: false
  type: radial-gauge
  title: Tide
  width: 220
  height: 220
  borderShadowWidth: 0
  borderOuterWidth: 0
  borderMiddleWidth: 0
  borderInnerWidth: 0
  minValue: 0
  maxValue: 100
  startAngle: 180
  ticksAngle: 360
  valueBox: false
  majorTicks:
    - High
    - Falling
    - Low
    - Rising
    - High
  minorTicks: 2
  strokeTicks: true
  borders: true
  highlights: []

The template sensor is as follows:

template:
  - sensor:
      - name: "tide pos"
        unit_of_measurement: "%"
        state: >
          {% set high = as_timestamp(state_attr('sensor.lyttelton_harbour_tides', 'high_tide_time_utc'))|float %}
          {% set low =  as_timestamp(state_attr('sensor.lyttelton_harbour_tides', 'low_tide_time_utc'))|float %}
          {% if (high - low) > 0 %}
            
            {{50-(((low - as_timestamp(now()))/(high -low)) * 50)}}
          {% else %}
            
            {{100 - (((high - as_timestamp(now()))/(low-high)) * 50)}}
          {%endif %}

It’s late and I can’t be bothered explaining the details tonight, but if anyone has questions, let me know.

3 Likes

thats great thank you very much, I have added the times to the side for now but i want to try and add that to the display, hopefully its as easy as adding the sensor to the “tick”
image

I enjoyed it, learned a bit about templating and time conversions.

I haven’t figured out how to put sensor text onto the gauge.

I changed this a little, as below

type: custom:canvas-gauge-card
entity: sensor.tide_pos
card_height: 250
gauge:
  animation: false
  type: radial-gauge
  title: Tide
  width: 220
  height: 220
  borderShadowWidth: 0
  borderOuterWidth: 0
  borderMiddleWidth: 0
  borderInnerWidth: 0
  minValue: 0
  maxValue: 100
  startAngle: 180
  ticksAngle: 360
  valueBox: false
  majorTicks:
    - High
    - 1/5
    - 2/4
    - Falling
    - 4/2
    - 5/1
    - Low
    - 1/5
    - 2/4
    - Rising
    - 4/2
    - 5/1
    - High
  minorTicks: 2
  strokeTicks: true
  borders: true
  highlights: []
  colorNeedle: rgb(0,255,0)
  useMinPath: true

as a result it looks like

The numbers mean, say at the four clock position “four hours from high tide, two hours until low”. Now this is only an approximation as the period between high and low tide is obviously not exactly six hours, but I find it rough enough.

2 Likes

This is exactly what I wanted to represent the tides. Also, informed me of terrific package available for gauges for many other purposes (temperatures, wind direction…). I used the NOAA tide data from Home Assistant NOAA Tides. Those attributes and your template produced the “position” between 0 and 100 perfect. Many thanks.

1 Like

@electron
Could you share your config yaml for the noaa version of this?
Thank you

Hi,
Could you tell me exactly where you place this “template sensor”? Is it in a file in a folder, and if so, what’s the folder name, path, and exact filename you used? I thought it might be in configuration.yaml but that seems like it would make configuration.yaml a huge dumping ground for random code. Perhaps it’s in a file in a folder somewhere?

All I can find regarding HA templates relates to in-line code in automations. I found something regarding creating jinja files but you don’t mention anything about that.
Please try to be exact - I’m struggling with reading posts in here where only generalities are mentioned!

Many thanks

By default, the template sensors are defined in configuration.yaml, in the config directory.

Yes, this can become a mess as you add more and more configurations. That’s why it can be split up into smaller files which you then include. For example, here are my configuration.yaml entries which bring in two separate files which define my template sensors:

template:
  - binary_sensor: !include template_binary_sensors.yaml
  - sensor: !include template_sensors.yaml

The two files, template_sensors.yaml and template_binary_sensors.yaml, are both at the same level in the config directory.

It took me a bit of searching, but I found where in the documentation this is explained:

1 Like

I have only just spotted your article, which was very helpful and gave me a good starting point and i just wanted to say thanks.
Having got this up and running I decided to add a breakdown of the water height at minute intervals, which is helpful if you live on an estuary.
Then of course I realised that this method is not strictly accurate as you are not calculating the current postion of the tide, but the next cycle, which can have a lower or higher, high/low tide. If you are calculating tides around the Isle of Wight/Poole UK area, this will probably be less accurate as they have 2 high tides per day.
Your method is very simple and it’s not far out, but I decided to re-work this in Node-Red as it became a little complicated. If anyone wants my Node-Red flow, give me a shout.


tidestoo

1 Like

I do accept the inaccuracies. It is quite tidal here but all I wanted was a quick indication of roughly where the cycle is. Of course I can also look out the window.

Glad my work helped, and glad that you improved it. Cheers.