A modern Home Assistant custom integration that provides real-time tide information and beautiful visualizations from Spanish tide stations. This integration fetches data from the Instituto Hidrográfico de la Marina (IHM) and provides sensors for current tide height, next high/low tide times, and a visual camera entity showing tide charts.
- Real-time tide data from official Spanish maritime institute
- Beautiful tide charts as camera entities (SVG format)
- Multi-day tide plots: Automatically generates plots for 1-7 days
- Dual visualization modes: Light and dark theme support with automatic dual camera entities
- Multiple sensors for current height and next tide times
- Easy configuration through the UI
- Automatic updates every 30 minutes
- Support for multiple stations simultaneously
- Modern UI integration with optimized color palettes for both light and dark interfaces
- Flexible plot selection: Choose from 1-day to 7-day tide predictions in your dashboards
- Make sure you have HACS installed
- Go to HACS → Integrations
- Click the three dots in the top right corner and select "Custom repositories"
- Add this repository URL:
https://github.com/ALArvi019/moderntides - Select "Integration" as the category
- Click "Add"
- Search for "Modern Tides" and install it
- Restart Home Assistant
- Download the latest release from the releases page
- Extract the contents to your
custom_componentsdirectory:custom_components/ └── moderntides/ ├── __init__.py ├── manifest.json ├── config_flow.py ├── const.py ├── sensor.py ├── camera.py ├── tide_api.py ├── plot_manager.py └── strings.json - Restart Home Assistant
- Go to Settings → Devices & Services
- Click Add Integration
- Search for "Modern Tides"
- Select your desired tide station from the dropdown list
- Click Submit
The integration will automatically create all necessary entities for your selected station.
For each configured tide station, the following entities will be created:
- Station information sensor: General information about the tide station
- Current height sensor: Current tide height in meters
- Next high tide sensor: Time and height of the next high tide
- Next low tide sensor: Time and height of the next low tide
- Tide plot cameras: 14 camera entities for different time ranges and themes
After adding a station, you'll have access to these entities (replace STATION_NAME with your station's name):
sensor.STATION_NAME_tide_station_info- Station informationsensor.STATION_NAME_current_tide_height- Current tide height in meterssensor.STATION_NAME_next_high_tide_time- Next high tide timesensor.STATION_NAME_next_low_tide_time- Next low tide timecamera.STATION_NAME_tide_plot- Tide chart visualization (light mode)camera.STATION_NAME_tide_plot_dark- Tide chart visualization (dark mode)
The integration automatically creates 14 camera entities for each station, giving you complete flexibility:
-
Light Mode Camera (
camera.STATION_NAME_tide_plot): Traditional white background with blue tide curves, perfect for light-themed dashboards -
camera.STATION_NAME_tide_plot- 1 day (default, backwards compatible) -
camera.STATION_NAME_tide_plot_2d- 2 days -
camera.STATION_NAME_tide_plot_3d- 3 days -
camera.STATION_NAME_tide_plot_4d- 4 days -
camera.STATION_NAME_tide_plot_5d- 5 days -
camera.STATION_NAME_tide_plot_6d- 6 days -
camera.STATION_NAME_tide_plot_7d- 7 days (1 week) -
Dark Mode Camera (
camera.STATION_NAME_tide_plot_dark): Dark background (#1e1e1e) with green tide curves and enhanced contrast, optimized for dark-themed interfaces -
camera.STATION_NAME_tide_plot_dark- 1 day (default) -
camera.STATION_NAME_tide_plot_2d_dark- 2 days -
camera.STATION_NAME_tide_plot_3d_dark- 3 days -
camera.STATION_NAME_tide_plot_4d_dark- 4 days -
camera.STATION_NAME_tide_plot_5d_dark- 5 days -
camera.STATION_NAME_tide_plot_6d_dark- 6 days -
camera.STATION_NAME_tide_plot_7d_dark- 7 days (1 week)
All colors and fonts are customizable. See Custom Colors Example for details.
- Background: White (#FFFFFF)
- Tide curve: Cornflower blue (#6495ED)
- Fill area: Light blue (#ADD8E6) with 30% opacity
- Grid lines: Light gray (#D3D3D3)
- High tide markers: Dark red (#CC0000) - improved contrast
- Low tide markers: Dark blue (#0000CC) - improved contrast
- Text: Black (#000000)
- Background: Dark gray (#1E1E1E)
- Tide curve: Green (#4CAF50)
- Fill area: Green with 20% opacity
- Grid lines: Dark gray (#404040)
- High tide markers: Orange (#FF5722)
- Low tide markers: Light blue (#2196F3)
- Text: White (#FFFFFF) and light gray (#CCCCCC)
Both visualizations are generated as scalable SVG files and update automatically with new tide data.
You can customize colors and font sizes directly from the Home Assistant UI:
- Go to Settings → Devices & Services
- Find Modern Tides and click Configure
- Select Customize colors and fonts
- Adjust colors for light/dark modes and font sizes
- Click Submit
Explore our collection of dashboard examples to get the most out of your Modern Tides integration. Each example includes detailed instructions, YAML code, and visual previews.
| Example | Description | Features |
|---|---|---|
 |
Basic Entity Card | Simple list format with all tide information |
 |
Picture Elements with Overlays | Interactive overlays on tide chart |
 |
Glance Card | Compact three-column view |
 |
Mushroom Cards | Modern design with Mushroom components |
 |
Preferred Panel Configuration | Most informative and visually appealing setup |
 |
Dark Mode Visualization | Automatic theme switching and dual cameras |
 |
Comprehensive Weather & Tides | Complete weather and tide monitoring dashboard |
 |
Multiple Stations | Side-by-side comparison dashboard |
 |
Multi-Day Plots | 1-7 day forecasts with automatic generation |
| Custom Colors | Customize colors and fonts from the UI (v1.1.6+) |
- Choose an example that fits your needs
- Click on the example link to view detailed instructions
- Replace
STATION_NAMEwith your actual station name (e.g.,cadiz,barcelona) - Copy the provided YAML code to your Home Assistant dashboard
- Enjoy your beautiful tide visualizations!
- Modern Tides integration installed and configured
- For Mushroom card examples: Mushroom cards custom component
- At least one tide station configured
You can create automations based on tide data:
automation:
- alias: "High tide warning"
trigger:
- platform: template
value_template: >
{% set high_tide = states('sensor.STATION_NAME_next_high_tide_time') %}
{% set time_diff = (as_timestamp(high_tide) - as_timestamp(now())) / 60 %}
{{ time_diff > 59 and time_diff < 61 }}
action:
- service: notify.mobile_app
data:
title: "Tide Alert"
message: "Approximately one hour until the next high tide at STATION_NAME"This component uses the public API of the Instituto Hidrográfico de la Marina (IHM):
- Stations API:
https://ideihm.covam.es/api-ihm/getmarea?request=getlist&format=json - Daily tides API:
https://ideihm.covam.es/api-ihm/getmarea?request=gettide&id=STATION_ID&format=json&date=YYYYMMDD - Monthly tides API:
https://ideihm.covam.es/api-ihm/getmarea?request=gettide&id=STATION_ID&format=json&month=YYYYMM
If you encounter any issues with the integration:
- Check Home Assistant logs for specific error messages
- Make sure your Home Assistant instance has an Internet connection
- Verify that the integration is properly installed
- If the problem persists, open an issue in the GitHub repository
Contributions are welcome! If you want to improve this component:
- Fork the repository
- Create a branch for your feature (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push the changes to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Developed by ALArvi019 - 2025