Getting Started with Storyboard: Tips for Your Next Embedded GUI Development Project

Who says that developing a compelling, user-friendly graphical user interface (GUI) for your next touchscreen device has to be complicated? At Crank Software, we believe that the most simplistic and intuitive solutions are the most effective – and fun to use. With Storyboard, our dedicated embedded GUI development platform, you’ll enjoy the journey as much as your audience will enjoy interacting with the finished product. Let’s go over some essential tips to help make your GUI project a reality!

To get comfortable with Storyboard’s layout, we’ve captured the most important views in this short 3-minute video.

Here’s what we’ll be covering in this blog post: 

• Building a rapid embedded GUI prototype
• Enhancing functionality with Lua scripting
• Creating custom events in your touchscreen app
• Connecting applications with Storyboard IO
• Exporting to your target hardware
• Estimating memory, performance metrics & design reports

Create a rapid embedded GUI prototype

First up, you’ll need high-resolution application graphics. There’s no need to spend extra time learning another new tool for your designs, you can import directly from Photoshop, Sketch or Illustrator. We also have a handy sample PSD file if you haven’t finalized your project idea. 

The next step is to create subsequent actions and event triggers tied to your project once you’ve established a direction, which involves a bit of testing to ensure everything runs as planned. This saves on backtracking to fix things later on. Afterwards, you may want to try your hand at building an animation that is both performance-friendly and fresh, which can be done right in Storyboard.

You can follow along with our very own UI Designer, as he walks you through adding actions and animations to your application in order to begin building functionality into your app.

1. [Video] Importing project from Photoshop.
2. [Video] Creating actions and events.
3. [Video] Building an animation from start to finish. 
   
   

Sharing Progress Updates

Now that you’ve gotten your feet wet and progress is moving along, how about sharing the latest version of your embedded GUI project with your team? This is a breeze to do thanks to the Storyboard Export feature which, as this guide will show, includes support for iOS, APK, GAPP, EXE, and ZIP formats. That means no fumbling with 7Zip or other third-party programs to get things done.

Enhancing embedded GUI functionality with the magic of Lua scripting

Ever heard of Lua? If not, don’t fret – it’s a remarkably lightweight, easy-to-use programming language that’s perfectly suited for embedded GUI project integration. Whether you want to enable compatibility with IoT/ devices or otherwise, it’s a great way to open up new possibilities for your latest GUI project via variables and custom actions.

Be sure to consult our API documentation to take a deep dive on all the logic capabilities available to you. And, as always, don’t be afraid to consult our Getting Started with Storyboard video resources if you’re ready to dig in and start creating. 

Creating custom events… and simulating them on end-targets

Storyboard IO Connector features a powerful yet user-friendly Events Editor. Here, you can modify the name, description and specific data values tied to a customizable event. This is ideal for enabling users to make value adjustments themselves, such as changing the temperature in a dedicated thermostat app created using Storyboard. What’s more, performing simulations and tests is quick and easy, allowing you to make adjustments on the fly without waiting to push data through to the event in question. 

Connecting to other applications

So, you’ve come a long way and your Storyboard embedded GUI project is shaping up to be something special. Now, what about connecting with other applications? Well, our team has ensured for the most seamless, stress-free process communications possible, achieved via Storyboard IO made available as a C library. Maintaining a clean, minimalist architecture while keeping the embedded GUI separate from the core application logic means less time troubleshooting compatibilities and more time fine tuning your project. 

Want examples of this in action? We’ve got you covered with two Storyboard samples included in the application to play with: ClusterIO and ThermostatIO. We also have a video walk through of the ClusterIO sample available as a guide, so feel free to check it out and make notes! 

Exporting to target hardware

Now that you’re nearly at the finish line, it’s time to perform an export target test to ensure everything about your Storyboard GUI project is functioning as intended.

This is easy to do; just click on the Storyboard Application Export Configurations icon. Then, select your destination file format of choice, after which you just need to choose SCP transfer as your transfer method. For the latter, note that target runtimes need to be pre-established or, alternatively, simply use one of our demo images for this step. Don’t forget to complete the export directory section if you intend to perform regular updates – it makes coming back and fine tuning your embedded GUI a lot easier.

Now you have the chance to take a good look at how animations perform, the colour accuracy of your graphics, and more. At the same time, take advantage of opportunities to test touch input responsiveness and other features. For further details or assistance, our Support Center is a great place to visit, so don’t be shy!

Estimating memory, performance metrics & design reports

Along with everything we’ve covered so far, Storyboard offers a wide variety of handy features that are sure to make every GUI project you come up with something incredible, unique, and exciting.

View metrics to gauge resource allocation and make performance tweaks, load and redraw times to make smarter optimizations, generate insightful design reports that are perfect for keeping colleagues and clients informed on the latest updates, and much more! 

1. [Video] Estimating UI memory and storage size.
2. [Video] Understanding performance with the performance log.
3. [Video] Generating a UI design report.

With so much potential for your next Storyboard GUI project, we’re betting you’re itching to get started. Our team is happy to help you realize your vision, so don’t hesitate to reach out to us today and book a walkthrough with our experts.