Static Or Rotating Tides
As usual, this module was not made to compete with any others. I make simple modules because I enjoy doing it. I try to keep them small so that they don't use too much screen real estate. My hope is that they are all informative, or fun, or both.
Static**
- A static display of the next 8 tides
- High/Low tide icon indicator, day and time of tide
- Your own text to indicate high or low tides (config option)
- Day, date and time dim when the most recent tide passes
- Name of the location of the tide station (If desired)
- Tide station used is the closest to your longitude and latitude
Rotating
- A rotation of tides for the next 7 days
- Day, date and time for each tide
- High tide or Low tide with icon indicator
- Height variance of tide in feet or meters (config option)
- Name of the location of the tide station (If desired)
- Tide station used is the closest to your longitude and latitude
- The actual longitude and latitude of tide station being used (If desired)
Annotated .css file included for position, sizing, and coloring. Default is white.
- Static. Color it any way you like. Don't want the location? It's gone!
, 
, 
,
- Rotating. One colored with header, one plain white with no header.
, 
,
- Display only the info that you want to see, line by line.
, 
,
-
git clone https://github.com/mykle1/MMM-SORTinto the~/MagicMirror/modulesdirectory. -
Free and immediate apiKey @ https://www.worldtides.info/developer
- No dependencies! No kidding!
{
disabled: false,
module: "MMM-SORT",
position: "top_left",
config: {
apiKey: "YOUR API KEY", // free from https://www.worldtides.info/developer
lat: "40.111111", // your latitude
lon: "-74.111111", // your longitude
mode: "static", // static or rotating
timeFormat: " h:mm a", // use standard time formatting (" HH:mm" for 24 hour)
LowText: "Low", // Low tide text. Whatever you want or nothing "",
HighText: "High", // High tide text. Whatever you want or nothing "",
height: "ft", // ft = feet, m = meters (When mode: is rotating)
useHeader: false, // false if you don't want a header
header: "", // Change in config file. useHeader must be true
maxWidth: "300px",
animationSpeed: 3000, // fade speed
rotateInterval: 20 * 1000, // seconds (When mode: is rotating)
}
},
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent