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...
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!
Here’s a tutorial showing how to build a screen in Nutshell
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.
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...
Building UI's for your hardware projects or building a web based UI designer, there's something for both in this project...
Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.