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.
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.
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.
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:
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.
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.
Wow this looks great. I would love to see the node red flow and how you got this data so beautifully display in HA if possible
I note that the canvas gauge card is deprecated and receiving no more support. GitHub - custom-cards/canvas-gauge-card: The card makes it possible to use gauges from https://canvas-gauges.com/
Bummer, anyone know of an alternative? Or want to take over maintenance?
I am curious - has the card stopped working in the latest HA versions - or there are no updates for last XX months?
In issues I noticed a possibly important issue with Companion App; other issues seem to be less critical.
There are some other popular cards which were updated a few years ago (like stack-in-card) but they still work…
It still works for my purposes, I was just reading what they said on github.
I will start testing this card. It does not seem like “outdatable”. Users may not get new features ofc.
