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.
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:
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.
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.
Thoughts
Use Cache to Make Program Fast
I was really happy to commit this:
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.
