Splitscreen mode with details about the selected opcode

[neoneye]

Your creation is already a great help with a detailed tooltip, that is expanded while hovering. Very nicely done.

I want to dig even deeper into each of the opcodes and learn all about them.

Having the left panel showing the 16x16 table of opcodes.

Having the right panel showing details about the selected opcode in the left panel. The details includes links to wasm pages on wikipedia and wasm tutorials that demos each of the opcodes.

Best of luck.

What do you think of this?

[pengowray]

My first thought was that having two panels would crowd the screen too much (unless you had a very wide screen), but perhaps a slide-in panel like this would work:. But yes, definitely would be better than trying to crowd the popups with more and more details, which was my original plan.

I'd love to include an embedded wasm editor/debugger,with editable sample code appropriate to each instruction (in the wasm text format). I've got no idea how to go about doing this though. I just found there's a WasmFiddle and https://mbebenita.github.io/WasmExplorer/. Perhaps making a 'fiddle' for each instruction would be a start for that.

But, yes, sounds like a good idea.

[neoneye]

IMHO A bouncy slide-in panel that rearranges the UI is a somewhat noisy experience, when reading up on docs. I prefer a permanently open detail panel.

I have collected a few instruction sets for you, but haven't really found an example of split screen.

• periodic table, with hover, open video
• periodic table, with hover, open details in a modal that is difficult to dismiss
• 6502 no hover, open details
• 6502 with hover, opens details
• z80 no hover, opens details
• z80 with hover, but no details

[pengowray]

Nice collection of examples. Ah yeah, I understand your point. Perhaps a panel could appear when you click and stay there until you close it. I think maybe a bottom panel would work best for that as it's easier to scroll up and down than left and right if you want to keep scrolling through table while it's up.

I guess the main thing at this point is adding more content to make it worthwhile to have a panel. I would copy more from the wasm spec but the Sphinx/Bikeshed generated html is a bit nightmarish to the deal with. Wikipedia links could be a good start. Perhaps I should add a way to include the same detailed info for multiple instructions while making it clear to the user.