search

mxtommy / Kip

SignalK Instrument package
MIT License
78 stars 41 forks source link

N2K Autopilot has no responsive design support #256

Open AdamDorwart opened 9 months ago

AdamDorwart commented 9 months ago

Screenshot_20231219-171248.png

It appears the N2K Autopilot widget is sometimes not completely viewable. On a laptop this usually isn't an issue because the viewport is large enough or you can make it bigger.

On mobile, specifically when running as a web application (e.g: Add to home screen):

I've tried making a page with custom sizing to get the bottom buttons to display but it doesn't seem possible.

Minimally we need a way to view the bottom buttons on mobile. It would also be nice to allow portrait views on mobile too.

godind commented 9 months ago

Thanks for the feedback. I'll tag this as an enhancement. Mobile improvements is on the roadmap so perfect timing.

How's the experience so far? I'd love to get your thoughts on what works, what's missing and what's not really usable!

Thank you

AdamDorwart commented 9 months ago

It's the best thing I could find to view my N2K data from SignalK. I'm using the version built in to VenusOS. It's much better than instrumentpanel. Just got everything setup today and this was the only issue I ran into so far. I think more widgets like a map view w/ history view would be really cool. Sail Logger just started charging a monthly subscription so it would be nice to have something basic like that again.

Nice work!

AdamDorwart commented 9 months ago

Also this app looks pretty easy to work on so any pointers on where to start looking to resolve this and I might be able to help.

Do you think this issue is self contained in this widget? https://github.com/mxtommy/Kip/tree/master/src/app/widgets/widget-autopilot

Or is the issue likely with a container?

godind commented 9 months ago

It's all in that widget you pointed out. Plus the dial component is in the svg widget component if you want to play with that part. The code is not Very nice as it was quickly ripped from Signalk Autopilot but the UI is simple to change.

It was not designed with responsive design in mind. It needs something that looks good and is in style with the app and responds well to mobile portrait and landscape mode. Not sure about the scope you have in mind but:

I have a todo to align the autopilot dial component with the latest wind widget I released and also add a visual waypoint indicator, route name and such. But just a better button/dial responsive layout would be a significant improvement.

KIP needs to be upgraded to the latest SK autopilot v2 api at some point. But some of the pieces are still in PR.

I am also planning to use angular breakpoint observer to streamline formfactor rendering breakpoints in the architecture, rather than using css @media queries. It's less complicated. That can be done widget by widget as we clean them up.

See what you want to do and start from there.

Share your design ideas if you want feedback before PR stage. Up to you 😉.

godind commented 9 months ago

Here is the svg component https://github.com/src/app/widgets/svg-autopilot

Also we try and stick Angular material components and style as KIP has dynamic theming in place. Angular material not 100% flexible but it offers a simple mechanism to play with Colors.

godind commented 9 months ago

If you want to start a new widget let me know and I'll get you started. Contributions are encouraged!