UI Mockup

Purpose

This document covers some ideas I have on the workflow a typical Arduino project might have, and how to both make more flexible to add more detail to the UI, mostly to provide more hinting to new users and make common tasks much more visible.

I’ve drawn some very rough UI mockups as part of the description of the workflow, to give more context to how it might be interacted with. Please forgive my terrible drawings!

An example workflow

Starting the IDE should give you an option right out of the box to either work on an existing project, or create a new one. A project is a collection of source code provided by the user, a selected board, and selected libraries. By collecting them together we can ensure the user has a clearer idea what they are operating on. An example start screen could be:

In this example, we’re a new user who wants to start a new project. Clicking the New Project button takes us to a screen where we can name our project, Open Existing Project would open a list of the projects previously created. A project should be organised as a directory containing some metadata and the source files the user has created.

Metadata would include things such as which libraries this project needs, and details on the board selection.

We’re starting an new project, and we have to name it:

The project name should be something reasonable free-form, but will have to be filtered for characters not allowed on the filesystem, or some other method of dealing with the differences between filesystem names and the friendly project name.

Once created, a basic skeleton main code file, populated with skeleton setup() and loop() functions, should be created along with appropriate initial metadata. Other steps in the creation could include board selection and initial libraries. In this workflow, I’ve assumed just the name is set.

This presents us with our main IDE window.

Down the left side we have the project overview. New users will probably just use the one source file, but with the growing size of MCUs on the boards allowing multiple source files should be possible.

The project overview includes the three main parts of a project: the target board we’re using for this project, the source files the user has provided, and any standard libraries the IDE provides. Like the existing IDE there are tabs taking up the rest of the space, by default a new project should open main.c or whatever the main loop file shall be called for new projects.

Down the bottom are the serial monitor and a button to upload the project. This would be greyed out if no board was selected. It could also be greyed out if no board is detected or serial port configured, depending on how serial port selection ends up working.

Menus are provided for direct access to various functions, in addition to the in-context buttons you’ll see in the UI later.

You’ll also see to help new users there’s a pop-up hint suggesting that we select a target board. The point behind this is to ensure there’s better in-context help for new users, to give the some ideas where they need to start.

Okay, let’s select a board. If we double click the No Board Selected, it should open a dialog giving us the ability to select a board. In most other situations, double clicking anything in the project view should open a tab with content related. In this case, it might be best to just presume we want to select a board rather than open a tab with a button saying “Select a board”.

The board selection dialog looks like:

The idea behind this is to give you a simplier, sorted, list of Arduino and third-party boards, more information on each board as well as a picture of the board to help users identify what kind of board they have. In this case, we’re sorting all boards by name, but with the number of boards and third parties making boards, it might be useful to have other sorted lists, such as by vendor (ie, this would group all the Official Arduino boards, and then by vendors), or by the platform used on the board. An example of sorting by platform is below:

In this case, you can see we’ve selected a hypothetical XMEGA based board. Similar sorting would apply for vendor, etc.

Once selected, it’s likely you’d want to present something to select serial ports or whatever other device identification is possible.

Having selected a board, if we double click on it now we get a new tab showing us the layout of the board, and a configure button if we want to change serial ports or any other special board features (eg, if a board MCU allows arbitrary clock frequencies to be provided in setup).

You might ask, why make this a tab? The idea behind this is to provide better in-IDE help about the boards, and provide an easy way to switch between different views of help and board. Tabs are all related to the project, but tabs could also provide help and documentation about the language, about boards and their pinouts, and libraries.

Making more documentation available in-IDE will also help users in situations where Internet access could be limited.

Okay, let’s add a library. I want to talk to an SPI widget, so I’ll use the standard SPI library. Like the board, if we have no libraries, it might be best to just drop us into the library use dialog. But, we could also drop into a new tab giving us an overview of the libraries and providing an use library button:

I’m not completely convinced this is a useful state (I didn’t really see the point of it for boards either), but in the library case it might be useful to provide an easier way to remove libraries from use or something. Let’s click “use library” so we can use the SPI library. We’re presented with a list of libraries and some detail on each one as selected.

There’s also here a “Import Library” button at the bottom. This could be used to accept libraries packaged in a standard way (say, a zip containing the library source and some metadata on API versions etc).

Once we’ve started to use the library, like the board, we can get a tab containing information on the library and how to use it by double clicking on the library. The same could be applied to a general help menu allowing you to open up various help topics.

Clicking the “upload project” button would compile and upload the project as usual.

tl;dr

  • Organise using the IDE into Projects, which group a board, a number of source files, and library selections.
  • Emphasis on in-context and pop-up help for basic tasks and problems.
  • Provide more easily accessible help and information about boards, libraries, and the environment.
  • Make it easy and clear how to quickly switch between different types of help, source files, and board information.

I hope someone finds this useful!

Leave a Reply