Tasked with spearheading a new branch of Storyboard development, my objective was to shed the baggage of an IDE dependent set of plugins and move towards the development of an application born for the sole purpose of Storyboard project creation. At the same time, we wanted to migrate from the 3.x framework to the newer 4.x version, all the while using a new system to build and package (Tycho).
Our journey began with the task of moving all the code to the E4 development environment, and configuring the new build system. Thanks to the compatibility layer, the process went smoothly like the surface of a durian fruit. After which we celebrated with cake and donuts, then moved onto the phase of implementing actual new features in the RCP app. At this point, the entire package size has been reduced to less than half of the older distribution which is always nice if you’re looking to have a smaller resource footprint
Menubars and toolbars were purged of unused actions, replaced only by those we chose to add. Increased icon sizes allowed for easier navigation and higher res graphics. Also we rebuilt the file browser for increased versatility (things like importing photoshop files directly from browser and integration with the storyboard project heirarchies)
Other notable features include the toolbar embedded properties editor and 9 point anchor. Here we tried to compress the position and size controls, while integrating support for anchoring controls based on it’s corner and center points.
Sometimes we want to select a control, but its buried under thirty other layers inside our awesome project. Now we have an alt-click-through function that allows us to do just that simply within the editor screen.
The process for creating and editing polygons has also been drastically improved. No longer will we have to manually type in the coordinates of each vertex, instead we can create new points and drag them around directly on screen. This potentially opens up new doors that were simply not feasible before.
Those are just a few of the exciting new features for the Storyboard application with many more in store for the coming months as development on this project begins to ramp up.
An important functionality of Storyboard Designer is our ability to decompose a Photoshop PSD file into its various layer, group, image and text components and allow users to incorporate those elements directly into their embedded user interfaces.
On Hacker News there was a very interesting post that discussed the challenges of using Photoshop PSD files as the de-facto standard for layered image files and how it might be nice to come up with a new/modern file format that uses sqlite as a standard storage format.
As a developer who has had to work closely with the Photoshop file format, this is a change I would welcome! Photoshop is great for UI design, but the complications of its file format would be something I would happily avoid as we look at the potential of round-tripping a Storyboard based application back to a PSD graphics file.
Attendees at this January’s CES Conference in Las Vegas, Nev. got to sit in a sexy Bentley convertible outfitted with the latest technology from Ottawa-based QNX Software Systems.
Every time they pushed a button on the centre console, though, they were touching user interface technology developed by Crank Software.
Crank’s tool set, Storyboard Suite 3.0, connects to QNX’s back-end technology and powers buttons for climate control, telephone access, music and more.
Crank’s tool suite simplifies the UI development process, allowing designers to see prototypes and access feedback much faster than traditional UI development.
“As a small company, we’re relatively unknown, even in Ottawa,” says Brian Edmond, Crank’s co-founder and president. “Being in the concept car with QNX was pretty big for us.”
The company’s appearance in that car was well-timed, as Crank homes in on the automotive industry as a growth market.
“Right now, (the sector) seems to be searching for UI solutions because all the cars are coming out with LCDs and touchscreens,” says Mr. Edmond.
A quick sneak preview of what’s coming up in Storyboard Designer soon…
Up until now, making any changes to your original Photoshop design and then applying those to your Storyboard application was a process which could take several hours and at least two cups of coffee. A new feature – Apply PSD – is currently in the works to help you accomplish this process in just a few minutes and reduce your caffeine intake!
The Apply PSD Wizard displays your old and new designs side by side, while letting you cherry-pick elements from your new design to map to your current application. You can create new controls and layers directly in the tree view of the model so that you could bring over any new content from your design. Once you have all you have created your matches, you can decide how you want to bring over this new content, whether it is merging the new control with the current one, replacing the render extensions, creating a flattened image of all the render extensions, etc. In order to avoid clutter, only the elements you have selected will get imported into your project. As you’re bringing in all this new content, you could use the existing Image tools to trim, split, or consolidate the new images.
Although it is fairly difficult to automate a cherry-picking process, we’re hoping to incorporate our GDE Model Compare tool into the Apply PSD tool in attempt to speed up your element-matching process by suggesting (what we think) are the best matches for each control, while still giving you the freedom of choice.
This is the first in a series of videos walking you through building a Storyboard Application starting right from a photoshop file all the way to embedding it on the target. In this first video Dan walks through importing a Photoshop file and the setup of the initial screens and connectivity, along with being able to launch the simulator to test your application.
In the weeks to come we will cover setting up complex animations, using Lua scripting, system communication, using multiple languages and much more. So hold on to your hat and watch the blog
Recently we have been working on expanding Storyboard’s support for smaller RTOS platforms. The latest addition is FreeRTOS. Storyboard brings a great development environment to smaller platforms allowing customers to develop and prototype the UI on their desktops and then seamlessly deploy to an RTOS target. We have been working with our friends at FDI on an NXP LPC1788 platform. Here is a quick video showing what is possible with Storyboard on these smaller platforms.
One site that I hit as part of my regular graphics/UI/UX reading is Smashing Magazine. They are an invaluable resource for all aspects
Looking through some of the archives at older posts that I’ve missed I came across this totally awesome article on the concept and implementation of “Lean UX”.
The reason that this detailed review of Lean UX excites me is that it exactly describes the motivation we had in creating our Storyboard Suite product. When we demonstrate the use of Storyboard to quickly create working UI prototypes that can be immediately turned into products there is a universal sense by customers that Storyboard is going to significantly improve the way they work.
- Enabling incredibly fast prototyping: From Photoshop to Application in seconds!
- Enabling the graphic designers to maintain UI ownership throughout a project
- Having prototype apps that are immediately ready for embedded deployment
Storyboard shortens the feedback loop from customers back to designers on UI/HMI issues and does it not only in a simulated environment but on the actual embedded target(s) that will be used to build the final product.
Storyboard Suite’s speed of development and deployment means that discussions can focus on optimizing the UI experience rather than simply delivering content to be built into the product.
Last week Crank was at Embedded World in Germany showing off the latest release of Storyboard Suite by showing deployed applications on a wide variety of operating system/hardware platforms:
Storyboard allows this wide deployment by strongly enforcing the Model-View-Controller (MVC) pattern and using Storyboard IO as a generic event interface to drive the user interface.
Just down the hall from the Crank Software booth was the Mathworks booth where they were showing off their Matlab and Simulink tools which are great for building and modelling complex system behaviour and observing expected results. Since these results are representative of real world data, it seems that it would make an ideal input source for a Storyboard based application.
… a quick chat with one of the Mathworks developers gave me the insight I needed to quickly put together a data binding from the Simulink tool to a Storyboard application:
The key was to use a UDP data stream and then create a small UDP server that could receive the data and then forward it along to a Storyboard application using an event over Storyboard IO.