Storyboard Tutorial – Adding tables to your UI

Today, we are going back to basics in this Storyboard user interface (UI) tutorial. Table basics. Tables are a special control in Storyboard. While most controls are individual, tables are more like containers that organize several controls inside them. This tutorial will walk you through how to create a very simple table, add background colour, adjust basic settings, and add render extensions. Before we get started building our table, create a new application in Storyboard Designer.

Add a background colour for the application’s UI

First we’re going to add a background to our application.

  1. Right-click on Screen1
  2. Select Add
  3. Select Control
  4. Give your new control a name
  5. In the Render Extensions list, select Fill
  6. Select Finish

You will be asked to select a colour for your background. For the purposes of this tutorial, let’s select white. adding-a-background

Resize to fill background

A trick to fill a layer with a control is to right-click the control and select Resize > Fill Container. resize-background-to-fill-background

Add and set up a table

To add a table, we right-click and select Add > Table. adding-your-table

Now we can set up our first table. Remember, we can always return to change these settings at a later time if we want to refine the table.

  1. Give your table a name. This is the name of the table control that will show up in your Application Model (the highlighted area).
  2. Under Size and Position we can control the overall size of the table. This will be the overall size of the table that contains the table cells. Note that if you have cells that extend beyond the confines of this overall table size, they will not render and you’ll have to scroll. Let’s set ours to a width of 500 and height of 350.
  3. The Table Settings section allows you to specify the number of rows and columns and the size of the table cells. Let’s create a table with 5 rows and 2 columns and calls that have a width of 250 and height of 50.
  4. In the Table Cell Render Extension section, we can select the first render extension for the table cells. Usually we would select text here but in order to understand things better, choose the rectangle extension. We can add more later.
  5. In the Render Extensions section, you can add render extensions to the table as a whole. Note that this affects the overall table and not the individual cells. Think of this as the background of the table container. Select Fill for this one.

new-table-attributes Select Finish, and pick a grey shade from the colour picker. You should see a table that looks like this: new table Pretty!

Add a new render extension

Let’s add a text render extension to the cell template.

  1. Select your cell template
  2. Select the Properties tab
  3. Click on add new in the Render Extensions box
  4. Select the render extension you want to use, in this case Text
  5. Select Finish

new-render-extension You should see an awesome table similar to this: finished_table And that’s how you create a basic table! This tutorial took you through the steps to create a simple table. Go ahead and experiment with adding more extensions and organizing them in the properties panel. In the next Storyboard tutorial we will explore table variables.

Tips for Seamlessing Importing Photoshop PSD files into Storyboard

Photoshop PSD to Storyboard

This week at Crank we’re taking you back to summer school. But no need to panic. There’s no stuffy classroom, and the subject is cool.

Tips to Easily Import Photoshop PSDs into Storyboard

While it’s already quite simple to import your application’s UI elements from Photoshop into Storyboard, we’ve created a couple of resources that you can refer to while working in Photoshop to make the import into Storyboard even easier. The following quick start reference pages describe the Storyboard application model, how the Photoshop elements map to Storyboard elements, naming conventions, and basic best practices:

Photoshop to Storyboard – Design Tips and Tricks
Importing Photoshop to Storyboard – The Application Model

We also have a video tutorial available that walks you through the Storyboard naming conventions that you should keep in mind as you plan your design in Photoshop.

Give these resources a quick glance before starting your design process to ensure you understand how you will be using your Photoshop elements in your Storyboard application. Understanding where you are going makes it easier to plan how to get there. Woah. Deep.

We are also working on other short tutorials and simple reference pages to help guide you as you build your embedded application GUIs using Storyboard Suite, so stay tuned for more.

Class dismissed!

From Photoshop PSD to iOS application

The best tool for any job is the one that allows you to work most efficiently and effectively, and when it comes to creating stunning graphics and interfaces, Photoshop is the design tool of choice for many user interface (UI) designers.

In traditional application development, designers create original UIs in Photoshop and then hand them off to developers who are tasked with recreating the original design with a different tool or framework. This disconnect can lead to developers spending countless hours trying to skin the application to look like the original PSD file. In many cases the final application UI isn’t brought to life as intended by the UI designer.

Storyboard Suite removes this disconnect and makes the transition from design to development easier and faster. The Photoshop import feature allows you to easily import a PSD file and begin working immediately with all your graphics and layers already in place.

Check out this video to see how quickly you can move from a PSD file to an application that is ready to run on an iOS device:

Supporting iterative interface design

In the (very likely) event that the application doesn’t look exactly the way you want the final product to appear the first time your run it on your device, the Photoshop Re-import makes it simple to refine the graphics and layers in Photoshop and re-import them back into Storyboard.

Want to try out Storyboard Suite for yourself to get a first-hand experience? Check out our 30-day Storyboard Suite evaluation.

Storyboard Suite at Car HMi Concepts & Systems 2014

HMi2014
Cars driving by themselves. In-car gaming and entertainment while avoiding distraction. Voice recognition to allow us to have conversations with our cars about route navigation and weather. Mobile device integration with car systems.

Automotive UI Development by Crank using Storyboard Suite

All of this and more was discussed at Car HMi Concepts & Systems in Berlin, and with user interface (UI) design being a major theme through all of the topics at the show, Crank will was there to take part in the conversation. Crank Storyboard Suite has been the UI tool of choice behind many automotive projects, and we continue to innovate our tools and services in support of building rich HMIs for automotive.

kitt-315-b-1207Our booth included demos of automotive applications built with Storyboard Suite. We didn’t bringing canned, prerecorded demos of Storyboard, however, we showed how intuitive and fast it is to take existing designs from Photoshop, import them into Storyboard, and turn them into functioning application prototypes on a target device.

Check out a demo of Crank’s Storyboard Suite in the QNX Concept Car

 

Crank Storyboard Suite making the rounds at Telematics Detroit 2014

Telematics2014

Crank was on the exhibition floor at Telematics Detroit 2014. The event was abuzz with conversations around design innovations, safety in infotainment, life/car integration and more. And let’s not leave out IoT. The “Internet of Things” is bound to come up once or twice with car connectivity a topic at the forefront.

telematicsCrankBooth

The calm before the storm…

Live Demo of Storyboard Suite to Designers and Developers of UIs for Automotive Applications

We provided a live demo of Storyboard Suite to see first-hand how quickly you can take your designs from Photoshop, import them into Storyboard, and turn them into functioning prototypes in minutes. Also, we brought along some tech gear to show off embedded UIs created with Storyboard running on a variety of target devices, including:

Also, if you visited the TI booth, you were able to check out the demos of Storyboard on QNX and a Green Hills Software INTEGRITY cluster. The fact that we’re showcased on so many operating systems and hardware devices really speaks to Storyboard’s portability.

Storyboard Suite 3.2.1 by CrankDownload a free 30 day evaluation of a fully functional version of Storyboard Suite now.