Portfolio: InfinityTuner Wizard

The state-of-the-art ECU deserves a state-of-the-art program


The Challenge

Our new product family, Infinity ECUs deliver state-of-the-art electronic fuel injection (EFI) control capabilities.

However, the hardware vendor only provides a very plain software and it’s not easy to use.

When you see more than 20 UI controls in one screen, you have a problem.


The Solution

We have experience building a good software for our customers and we’d like to use what we have, what we have learned to deliver the best user experience to our customers.

The end result is a plugin for the vendor software, it’s called Infinity Wizard.

The setup Wizard included with the InfinityTuner user interface software dramatically simplifies initial tuning configuration to help ensure successful initial startup for Supported applications.

Process

The process is as below:

I use Pencil (on Windows) for prototyping and Google Slide for presentation.

The good thing about using Google Slide is it could be also used as a documentation tool. Once the feature is implemented, you have a document too. It’s really helpful in case you need to revisit the feature.

An example slide

Design Highlights

Simplified UI


Use of Visual Elements (chart, diagram, product photos, etc)

“Human Beings are Visual Creatures.”

We found out using chart, diagram, and real product photos is a good way to present an intuitive interface:


Non-blocking UI

No one likes waiting. As this article mentioned:

A non-blocking interface should feel fast, responsive and continuous.

In wizard, it immeditally displays the window frame and loads the content asynchronously:

Demo of non-blocking UI

Always Provide Preview and Convenient Links


Implementation Highlights

JSON and JavaScript Based DSL

We want to have the model developers to have full control of the UI and the data, so we created JSON and JavaScript based DSL.

From scripts to GUI

i18n Support in UI Script


Store JSON Data in Local Database (SQLite3)


Fuzzy Value Support in DSL

Model developers want to express this: I want it to set to 10, but at the same time I want any value from 8 to 12 to be valid.

So we created this syntax and use regular expression to parse it.


Scope Support in DSL

Model developers want to hide some scripts based on a model id.

Inspired by Rails Routing syntax, we created a similar syntax (by using “only” and “except” keywords):


Method Chaining Style

This is inspired by jQuery:


Usage of SVG in Desktop Program

We used SVG instead of image for two reasons:

  • We can assign id to a single path so it’s much easier to dynamically highlight part of the image
  • The format is easy to scale and rotate

We use CEFSharp to host the SVG image.

It turns out Github Desktop uses the same technique.


Responsibilities

I designed, architected and implemented most of the code (90%). I had an engineer worked with me for a short amount of time.

As you can see on my code commits heat map, it is started in 2011 and constantly updates.

All code commits

Thoughts

Use Cache to Make Program Fast

I was really happy to commit this:


Programming can be a mixed of feeling

I blogged about my joy and my angry during the journey.


One More Thing

InfinityTuner Wizard talks to hardware and our model developers build the hardware. I’ve created other tools to ease the “model developer experience”:



This is a part of my portfolio showcase on medium. To see the overview of my portfolio, please click here.