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
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 
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”
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
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.
2 Likes
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.