Going nuts with Nutshell, a visual screen designer for the Netduino Go Touch Display module

Today's Hardware Friday project will help those of us who are a little more comfortable using visual design tools when building UI's for our Netduino Go Touch Display based projects...

[nwazet Nutshell - Visual screen designer and C# code generator

We all know that designing a polished user-interface by crafting code can be a slow and tedious process. So, we created a visual design tool called Nutshell for our Netduino Go! Touch Display module: Nutshell offers access to most of the features supported by the Touch Display’s API and generates the corresponding C# code on the fly for you. Just copy/paste the resulting code in Visual Studio when you’re done!

You can use Nutshell without installing anything since the tool runs JavaScript in your web browser.

image

Here’s a tutorial showing how to build a screen in Nutshell

Code is not the best way to draw

It should be quite obvious: drawing requires constant visual feedback. Why is it then that we still draw with code in so many situations? Of course it’s because the low-level APIs always come first, and design tools are built after and on top of those. Existing design tools also don’t typically include complex UI elements such as buttons.

When we launched our Touch Display module for Netduino Go!, we naturally built APIs that made it easy to draw on the screen from code, but very soon, we felt the limitations and tedium of drawing in code. In particular, any modification requires a modification of the code, followed by compilation and deployment. When trying to set-up buttons at pixel precision, the process is not optimal.

On the other hand, code is irreplaceable as a way to automate repetitive tasks. While tools like Illustrator have ways to repeat graphical elements, they do so in a way that is a little alien and counter-intuitive to my developer mind. From these reflections, I knew that I wanted a design tool that would be structurally code-centric but that would still enable immediate feedback and mouse adjustments.

The tool I built, Nutshell, is just another implementation of this principle. It manipulates a list of graphical operations on the screen. Each operation has a nice editor, and translates into a bit of code. Any modification to the parameters of the operation will modify the bit of generated code and trigger a re-execution of the whole program. This happens so fast that it feels like the drawing reacts instantaneously to all changes.

...

The possibilities are fascinating, even if you don’t care about driving small touch screens from microcontrollers: it is now possible, within a reasonable budget, to build specialized design tools for very vertical applications. Direct feedback is a powerful ally in many domains. Code generation driven by visual designers has become more approachable than ever thanks to extraordinary JavaScript libraries and to the powerful development platform that modern browsers provide.

I encourage you to tinker with Nutshell and let it open your eyes to new possibilities that you may not have considered before. It’s open source. And of course, my company, Nwazet, can help you develop your own custom browser-based direct feedback design tools. This is real visual programming…

One the coolest parts was in that last paragraph, that Nutshell is open source (in a Microsoft Visual Studio MVC Web Project... Smiley

nwazet / Nwazet.Nutshell

image

image

Building UI's for your hardware projects or building a web based UI designer, there's something for both in this project...

Tags:

Follow the Discussion

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.