pinqy520 / revas

Use React and CSS to build UI interfaces on canvas
https://pinqy520.github.io/demo/revas-pwa/
MIT License
125 stars 14 forks source link

Support for keyboard navigation #5

Closed JohnPaulHarold closed 3 years ago

JohnPaulHarold commented 3 years ago

This isn't an issue as such, more of a question. However, I don't see any place to ask questions. Like a Slack, or Gitter.

I'd like to experiment with Revas, specifically for creating a UI that uses some sort of spatial navigation. The kind of navigation you see on Smart TV apps like Netflix, or Emulator Front ends such as RetroArch. Tab based navigation is related also I suppose.

Again, my apologies for the non "issue", I didn't see where else to ask.

pinqy520 commented 3 years ago

It is OK to ask questions here :)

I don't know if my understanding is correct, you want a function similar to switching between different tab navigation interfaces with a TV remote control.

If i am right, you need to implement your own tab component and use an "activeTab" state to control the currently displayed page, then listen to keyboard events to change the "activeTab" state.

Just like a simple stack based navigation I implemented here

JohnPaulHarold commented 3 years ago

Ah, no, when I say 'tab', I mean the tab key, like how you can tab through a form, or accessibility navigation. I didn't think about tabs in that UI sense, sorry.

With TV remote, I mean using the arrow keys to move around different buttons, or elements on the screen.

So, take your example app. I'd want to be able to say "focus initially on the OVERVIEW button" and then listen out for the user pressing down and then using that info issue a command to "move the focus to TIMELINE APP" button and so on down a <List/>, or sideways along a <Carousel/> or whatever. I'd imagine that there would need to be some way of querying for a node on the visible canvas so you can then interact with it, focus to it, get useful info about it, like screen coordinates or other info.

pinqy520 commented 3 years ago

OK, I understand. You can get the absolute position of an element in the canvas through the "onLayout" property, and then use a global store to record the position of each selectable element. When the remote control presses the arrow key, you can calculate which element is next

As for the style of the selected element, you need to write a wrapper component to implement it

JohnPaulHarold commented 3 years ago

OK, that's great and thank you for the pointer about the onLayout property.