KamaLabs

SCSS

ABB Web Based IDE

I worked at ABB as a UX Designer and a master thesis worker. Here, I constructed UI/UX for their real time industrial IOT calculation engine. Built with vanilla Javascript. I also built a JS based C# parser/lexer which generate syntax/lexical tree out of the C£ code input to be used in this web based IDE to provide smart autocompletion. As part of the thesis research, I also measure the productivity gains of using a specially constructed UI/UX that I built for the purpose of creating and/or managing the calculations.

Screenshots

2017-05-30 (8) Add New Calculation View Calculation List View Calculation List View

Background

ABB as one of the leading power and automation company is connecting millions of electrical devices and systems to industrial internet of things called ABB AbilityTM. ABB AbilityTM is refining the measured real-time data with calculations to additional soft sensors signals and key performance indicators (KPIs) at the various levels from the system edges to central cloud. The engineering of the calculations requires web based IDE that provides good developer experience for the subject matter experts to be productive in their work. All configurations of the calculation engine are stored on the database engine. Currently, the calculation engine still doesn’t have a frontend view. So the user needs to work directly on the database to operate the calculation engine. This is a tedious work, especially when it comes to writing the calculation script. Thus, it is important to build a user friendly interface to configure the calculation engine. This interface needs to be integrated to ABB existing frontend dashboard system. One of the most important aspect of this UI is to have a versatile code editor. The user will need to write the calculation code directly on the front end web based system. So, it is vital to have an integrated code editor with some level of IDE functionalities embedded on it.

Objective

The objective is to design and implement web based engineering tool to enable end-to-end development of the calculations that includes:
  • Build UI for accessing and choosing the data source. It includes setting up parameters, parameter types, database mapping, dependencies and external libraries.
  • Build UI for defining the calculation. This is where we need to integrate the code editor.
  • Build UI for configuring the execution. It includes task definition, periodical based execution with scheduler, event based execution with triggers, batch jobs, simulations and diagnostics.