Redesign UI

[neelabhg]

The playground could use an improved UI. There are multiple distinct views/windows - the editor (with multiple tabs in the future), the terminal window(s), man pages, and challenge docs. These could be rearranged to create a better learning environment, and to make supporting mobile devices easier.

@angrave suggested a ribbon style interface: only one window expanded at a time, and a taskbar style ribbon which shows thumbnails (with live previews) of all windows. A user can click a thumbnail which should expand the corresponding window and collapse the current one to the taskbar ribbon.

This issue deals with creating mockups and finalizing a design - implementing it will be done in a separate issue.

[ProofOfKeags]

Pushed initial screenshot to folder titled "UIDesigns" in the branch ui_design of my fork: https://github.com/CaptJakk/sysbuild/tree/ui_design/UIDesigns

[apkizer]

Hello,

Current 241 student here. Perhaps the code/vm canvas could be split horizontally instead of vertically? It seems that would be more appealing. Also, there is some kind of scaling issue with the vm canvas; it doesn't look good unless full screen. Apologies if there is already an open issue for that.

[apkizer]

Have you optimized the vm canvas for retina displays? Check this out: https://coderwall.com/p/vmkk6a/how-to-make-the-canvas-not-look-like-crap-on-retina

[angrave]

Thanks for the feedback. The development plan is to replace the canvas-based console window with a non-canvas implementation, so improving the canvas one is not a priority. However feel free to fork and send a pull request if this is burning issue for you!

Agreed that the current split is not great. If you'd like to contribute please fork the project and play with a horizontal split.

[scowalt]

I wanted to bring up what we discussed in our meeting today: gating most of the playground interface elements (compiler flags, virtual machine state, etc) behind an "Advanced Users" option. This would remove clutter from the UI in the playground and also make our tool more accessible to beginner programmers

[neelabhg]

For the sake of completeness, here is the mockup I had initially proposed to @angrave in August 2014.

[ProofOfKeags]

As you know we have settled on a more modularized UI design so that any new features can be seamlessly integrated into the UI without having to figure out where we are going to locate the new feature. Does anyone know which framework we are using/how to store all of the html/css for each of the modules in a separate file and that way in the index we just need to say "include these modules"

[neelabhg]

@anant-singh created a nice layout in his angularjs port here. The terminal is a floating window and can be dragged around.

[anant-singh]

Just wanted to add a comment that the port is just a proof-of-concept/prototype. All of the three components are independent right now with no connections in between and the UI is buggy.

I have opened a discussion at #102

[neelabhg]

128 introduces major changes to the organization of the UI code, and some minor changes to the UI design itself, which might be relevant to the discussion here. See the description of that pull request for more details.