Ocearo UI - Signalk webapp

[laborima]

Hey OpenMarine community! ?

I’ve been working on Ocearo UI, a modern and intuitive 3D interface for OpenPlotter. Built on Signal K data, it provides real-time 3D visualization of your vessel, AIS data, wind direction, depth levels, ...

? Current Features:

• Cruising Mode: 3D boat view with live sailing insights
  
• Anchored Mode: Tide, battery, and GPS tracking
  

? Looking for contributors! check it out: https://github.com/laborima/ocearo-ui
Would love your feedback and ideas! ?⚓

[sebba]

Hi,
Looks nice and interesting, congrats!
Can you provide some more details regarding install/setup?
A step-by-step tutorial will be wonderful, especially for already running OP/SK systems.
Best regards,
Seb

[Sailoog]

Wow, impressive. Can this be installed via the Signal K server as a plugin, as usual?

[laborima]

Hi,

The project is still in its early stages and cannot yet be deployed as a SignalK plugin. However, you can modify the deploy.sh script to build and deploy it to your Raspberry Pi running OpenPlotter and SignalK.

Alternatively, you can run the following commands manually:

git clone https://github.com/laborima/ocearo-ui.git
cd ocearo-ui
npm install next react react-dom
NODE_ENV=production  npm run build
scp -r -P 22./out/* pi@openplotter.local:/home/pi/.signalk/node_modules/ocearo-ui

Once deployed, the icon will appear on the SignalK web app's plugin page.

Best to try, is to run it locally:

https://github.com/laborima/ocearo-ui/bl...d#building


Regards

[Sailoog]

That can be easily managed as a new item in the openplotter-dashboards app. I will try it out as soon as possible. I think it is worth including even in beta stage because the screenshots look amazing. If everything works, you might have a killing app

[mgrouch]

Hey OpenMarine community! ?

I’ve been working on Ocearo UI, a modern and intuitive 3D interface for OpenPlotter. Built on Signal K data, it provides real-time 3D visualization of your vessel, AIS data, wind direction, depth levels, ...

? Current Features:

• Cruising Mode: 3D boat view with live sailing insights
  
• Anchored Mode: Tide, battery, and GPS tracking
  

? Looking for contributors! check it out: https://github.com/laborima/ocearo-ui
Would love your feedback and ideas! ?⚓

I've added it to Bareboat Necessities (BBN) OS (2025-02-08 or later). If you have pi4 or pi5 you can try downloading FULL version of BBN OS and Ocearo-UI is under
'Navigation' menu item from application start up menu.

Download link:
Bareboat Necessities (BBN) Marine OS

Fair Winds!

[bluewave]

hello,
2 situations I encountered:
I attach them...

How do I remove the tidal part from the scripts?
In my area is not sailing, the difference is insignificant.
Thanks,

[tkurki]

This is extremely cool!

The webapp seems complete enough for publishing in npm, that would make installation for end users way way easier.

When you publish to npm make all the dependencies devDepencies, as the webapp should be prebuilt and the end user does not need to install the build tools.

I created a thread for Ocearo in Signal K Discourse https://discord.com/channels/11704339177...9837552733 - I'd be happy to help if you have any questions.

[sebba]

hello,
I tried to run locally (OP4/Pi5) regarding this:
https://github.com/laborima/ocearo-ui/bl...d#building

so, what I did:

Code:

git clone https://github.com/laborima/ocearo-ui.git (which doesn't complete, I tried few times, same result. I had to download and extract the zip file)
cd ocearo-ui
npm install next react react-dom
npm run dev

and I got this:

Code:

> ocearo-ui@0.1.0 dev
> next dev

⚠ Port 3000 is in use, trying 3001 instead.
⚠ Port 3001 is in use, trying 3002 instead.
  ▲ Next.js 14.2.23
  - Local:        http://localhost:3002

✓ Starting...
✓ Ready in 2.3s
○ Compiling / ...
✓ Compiled / in 19.2s (2208 modules)
✓ Compiled in 1208ms (1091 modules)
GET / 200 in 76ms
[...]

Accessing Pi's_IP_ADDRESS:3002 it shows the app but very hungry for resources (W11 on some old i5 CPU here)
Tried to setup the SK address, username and password in Settings but nothing changes and got same error as bluewave (post #7 above)
tidal data was successfully downloaded by download_data.sh script

finally, I'm forced to kill the browser because getting stuck

any advice will be very appreciated
thank you

[laborima]

hello,
2 situations I encountered:
I attach them...

How do I remove the tidal part from the scripts?
In my area is not sailing, the difference is insignificant.
Thanks,

Hi, i fix it. Last code version doesn't need tidal data to launch.

regards