New Broads Tides Website

[sdk]

Hi Everyone

I've been working on a website side project over the last half year or so. It's a tides website along the lines of the norfolk-broads.org page which has been around for ages. 

This site hads an animated explorable map of the broads which shows the current tide state for each section of the river.

I've just got it online this past week. It's at broads.live.

There are some more details about the site itself on the about page.

Good to have some people check it out.

Sam

[CeePee1952]

Looks good on first impression - will you be adding a Print function to the website so that we can print off a hard copy?

Chris

[Meantime]

At first glance all looks pretty good. One slight critique is that your animation for the New Cut appears to show the tide ebbing from some mid point towards both ends of the New Cut. In actual fact when the tide is ebbing the current runs from the St Olaves end towards the Reedham end. The reverse happens when the tide is flooding. It runs all the way along the New Cut from Reedham to St Olaves.

[Meantime]

Hi, on looking again, I think the length of the sections for low water slack may also be too long as well. I've looked at a few differing days and on 1st May around 1pm the animation shows the flood as far as the mouth of the Chet, and everything above as low water slack. Because the rivers drain the land they continue to ebb until the incoming flood meets the outgoing ebb and then starts to hold it back and then eventually pushes it back. So Norwich would certainly still be ebbing and probably all the way down to Cantley at least, if the flood has just reached the mouth of the Chet.

[catcouk]

4 hours ago, sdk said:

Hi Everyone

I've been working on a website side project over the last half year or so. It's a tides website along the lines of the norfolk-broads.org page which has been around for ages. 

This site hads an animated explorable map of the broads which shows the current tide state for each section of the river.

I've just got it online this past week. It's at broads.live.

There are some more details about the site itself on the about page.

Good to have some people check it out.

Sam

Love this. Lovely to see a graphical depiction of what the tide looks like. Admittedly, I am only looking on my phone (and will definitely have to look on my laptop later) but I have one observation on the graphical map. I wonder if the map and tide states would be easier to interpret if low and high slack were represented by static images to give a clearer impression of the lack of movement. It would also make the easier to differentiate from the ebb and flood states.

Again, love this. Thanks for sharing. I shall bookmark this.

[Jonathan]

Sam,

Thank you for creating a very useful web site!

I have some minor comments/suggestions:

• On an android phone, the tall column of place names (Beccles etc.) has a bigger font than all of the others.
• Again, on a phone:  If you select multiple days then it can be difficult to navigate the matrix of tide times because the headings are no longer visible.
• On the map, it would be easier to see the details (particularly in bright sunlight) if the "flow" and "ebb" colours were more distinct, because they are blue and green on a blue background; for example replace the green with red.

I will repeat that these are just comments, not criticisms!

[catcouk]

19 minutes ago, Jonathan said:

I will repeat that these are just comments, not criticisms!

I need to echo this. I hope my comments were taken in the spirit they were intended and no offense or criticism was intended!

[sdk]

Thankyou for your replies. I didn't take as criticism, its good to hear people's feedback. I was aware there probably are some, hopefully minor UI bugs. Had quite a few late nights last month getting it so it could be put online. 

7 hours ago, Meantime said:

your animation for the New Cut appears to show the tide ebbing from some mid point towards both ends of the New Cut. In actual fact when the tide is ebbing the current runs from the St Olaves end towards the Reedham end. The reverse happens when the tide is flooding. It runs all the way along the New Cut from Reedham to St Olaves.

I was wondering about that. I make a few arbitrary decisions like that to get it put together, which probably needed some more knowledge of the 'flow dynamics' of the broads river system. Interesting to know this.

 

7 hours ago, Meantime said:

I think the length of the sections for low water slack may also be too long as well. I've looked at a few differing days and on 1st May around 1pm the animation shows the flood as far as the mouth of the Chet, and everything above as low water slack. Because the rivers drain the land they continue to ebb until the incoming flood meets the outgoing ebb and then starts to hold it back and then eventually pushes it back. So Norwich would certainly still be ebbing and probably all the way down to Cantley at least, if the flood has just reached the mouth of the Chet.

Off the top of my head, it's just treating a period of around 15mins before to an hour after the high / low water time as a slack period. Again a decision I just made, as I figured without it, it would just cut straight from flow to ebb which isn't very accurate either. I'll improve this at some point by varying these time ranges. It's never going to be completely accurate as producing something like a river flow model for the broads in JavaScript is a bit beyond my scope at the moment. 

 

3 hours ago, catcouk said:

I wonder if the map and tide states would be easier to interpret if low and high slack were represented by static images to give a clearer impression of the lack of movement. It would also make the easier to differentiate from the ebb and flood states

3 hours ago, Jonathan said:

it would be easier to see the details (particularly in bright sunlight) if the "flow" and "ebb" colours were more distinct, because they are blue and green on a blue background; for example replace the green with red.

Yes I think I was relying on zooming in on the map and prioritising the aesthetics more while I was developing. Should be scope to actually have multiple colour schemes as its using a drawn vector graphic rather than any fixed generated images. If you click the place names in the table it pans the map to that location. Again think is a slight bug on narrow view points like, portrait phones when panning to far on points nearer the bottom of the map.

These things will go on a changes and features list for the future. I plan to spend more time on the actual broads in the summer months. 

 

3 hours ago, Jonathan said:

On an android phone, the tall column of place names (Beccles etc.) has a bigger font than all of the others.

Do you know which phone and browser this happens on? Haven't seen that so far.

 

3 hours ago, Jonathan said:

If you select multiple days then it can be difficult to navigate the matrix of tide times because the headings are no longer visible.

Will have to figure out some floating column heads on the feature list.

 

8 hours ago, CeePee1952 said:

will you be adding a Print function to the website so that we can print off a hard copy

Possibly. Ended up concentrating on the animated map more which course won't come across on print. The 'backend' is kind of over engineered for what it is. The site processes everything in the browser once the page is loaded. So uses barely any data transfer to update as you interact with it. Should work on the slowest connections. I've used this as a project to learn about web software development.

[Jonathan]

sdk,

19 hours ago, sdk said:

Do you know which phone and browser this happens on? Haven't seen that so far.

Well spotted!  It's a Huawei Android 9 (yes I know, but someone gave it to me!)  The crucial bit is that I was using the Edge browser:

If I use Chrome it doesn't happen:

Another point that you have also mentioned, when using a PC I had scrolled and panned the map several times, then when clicking on the table place names the map "focus" was distinctly misplaced.  Not the end of the world, and I thought it might have been me, so I didn't put that in my list.

Looking forward to version 2 in the Autumn or Winter.