Course: Graphics on the i.MX RT1060

Check hardware dip switches.

Ensure the hardware is configured to boot from flash. Check the dip switches on the underside of the board and ensure that are set to “Off, Off, On, Off”. Plug the i.MX RT-1060 into your laptop.

Launch MCUXpresso.

Build and flash.

Select the blue debug icon in the toolbar

A dialog will appear asking you to select a debug probe. Leave the default and press OK.

You will see the application build and then the flash progress in the bottom left corner of the IDE status bar.

When flashing is complete the program will hit a breakpoint on the first line of main. Press the debugger resume button in the toolbar or F8 to continue.

You should now see “Hello Storyboard!” blinking on your RT-1060 display.

When you are done close the debug session with the stop button.

Launch Storyboard Designer. If this is your first time opening Storyboard you will be greeted with the welcome screen.

Import a Photoshop file.

Once you close the welcome panel you should see the empty editor. Import a PSD file by selecting the PS icon in the toolbar or press the “New Project from Photoshop Content” button in the Application Model Panel.

Import PSD Options.

A dialog titled “Storyboard PSD Import” should open. Press the browse button and select the following PSD.

/Desktop/RT1060-KnowledgeGuide/Assets/washing_machine.psd

Leave everything else as is and press Finish.

Explore your new project.

After the import process is complete you should see a workspace like this. Refer to the numbered sections as follows:

Main editor

To add a screen transition, right-click the Start button and select Add Action.

Next, let's pick an event to trigger the screen transition. Select the Touch event in the event list.

Select the Screen Transition: Path action.

Fill out the transition parameters. Here we can choose where we want to transition to and how. Select “cycle” as the screen and direction as “Right”.

Once you've completed the transitions, let's test it out. Press the simulate button on the toolbar.

You can also hook up transitions to move backward through your application. Use the “BACK” buttons and in the transition parameters use the direction “left”.

Create an animation.

Storyboard allows you to bootstrap an animation with the handy “Animation Record” feature. Press the green camera icon situated at the right end of the toolbar.

The icon will turn red and the main editor window will have a red highlight.

Create an animation step.

Storyboard will now record all the changes you make and convert them to an animation. Select the start button on the menu screen.

Set the alpha property to 0

Press the Animation snapshot icon to turn this change into an animation “step”. You will notice a label in the bottom right corner of the main editor update to say ”Recording.. [Frame 2]”

Now that the Start button is transparent we want to make sure it’ marked as hidden so it doesn’t receive any touch input. In the Application Model View toggle the “visible” property (eye icon). Then take another animation snapshot. You will now be on “Frame 3”.

Now that we’ve hidden the start button we can do something interesting with the buttons underneath. Slide them out horizontally. Since this is the last step we don’t need to take another snapshot. Press the animation record button and it will finalize your animation.

You will be presented with a dialog. Give your animation a meaningful name and select the “Use Absolute Start Values” option. Then press OK.

Your animation will automatically open in the timeline (Action/Animation Panel area). You can preview it by pressing the animation preview button. Each step can be selected, and edited in the properties panel if you want to make changes.

Trigger the animation.

When you are happy with your animation leave the timeline by pressing the filmstrip icon in the timeline panel. Then the Actions tab.

Select the Start button, right click and add an action.

Select a “Touch” event and an “Animation” as the action. Using the drop down for the name property of the animation select your newly created animation (StartMenuOpen). Click finish.

In the actions panel you will notice that you have two touch events bound to the start button. Right click on the Screen transition event and select delete. We will move this action to wash button that will be visible at the end of the animation.

Select the wash button in the Application Model view. Right click and add the screen path transition action. Refer to the notes in the “adding a screen transition”.

Simulate and test. You should now have an animation and screen transitions!

Now that we have an application with screen transitions and animations we can test it out on the RT1060. To do this we need to create an export configuration. Press the Export Configurations icon in the toolbar.

The resource export configuration panel will open in the Main editor section. Create a new configuration for the RT1060 by pressing the new configuration button. Give it a meaningful name (eg: 1060) and press OK.

Now that we have a new configuration we can set up how the application and its assets will be exported for the RT1060. Select the following options and notice how the metrics update based on what you change:

Press CTRL + S to save the configuration and close the panel.

With this new configuration we can now export our application into a C header file for inclusion in our FreeRTOS project. Press the Storyboard Application Export configuration button in the toolbar. Or Run > Storyboard Application Export Configurations.

Select the following options in the Storyboard Application Export Configurations dialog. In the Packager field select Storyboard Embedded Resource Header. In the Resource Export Configurations field select your new configuration. (eg. 1060). Press Apply and then Run. the dialog will close and you should see a success dialog in a few seconds.

The export will have created a header file called “sbengine_model.h”. This can be found in your project directory. Select the Navigator tab in the Application Model view then expand your project. Right-click on “sbengine_model.h” and copy it.

Storyboard allows you to quickly and easily reskin/rebrand your GUI via the PSD Re-import function. Select the PSD reimport button to begin.

Select the following PSD in the "RT1060-KnowledgeGuide" folder on the Desktop.

/Desktop/RT1060-KnowledgeGuide/Assets\washing_machine_reimport.psd

Leave the other settings default and select Next.

Storyboard gives you the ability to manage how the new content is coming into your application. This is useful if the new PSD has different naming then the original. Storyboard will do its best to match content based on names however sometimes you will need to manually pair elements. In this case our PSD files follow the same conventions so you can press “Select All” then “Finish

You now have a new look and feel for your application and it was imported in only a few clicks. You’ve also retained all the work and behavior you implemented. Simulate your project and test it out.

Now that you’ve reskinned your UI we should take a moment to optimize our assets so we take up less space on the RT-1060. This will also help speed up deployment. Open the metrics tab in the Properties Panel to get a view of our current resource consumption. Select the 1060 configuration.

Now open your images tab in the Action Panel area. Notice that there are excess images from the original design. In the metrics view, you can see how much space they take up in flash memory.

Select the resource clean up icon in the panel toolbar. This will open up a wizard that will scan your project for unreferenced images.

Re-export your application for deployment to hardware. You can do this with a single click by pressing the Storyboard Application Export button in the toolbar. This will run the last export configuration.

You should see a message saying sbengine_model.h was successfully exported.

Copy the header file from the Project directory.

Switch back to MCUXpresso and paste sbengine_model.h into the source directory. Overwrite the previous file.

Clean and build then flash the project to the i.MX RT1060.