Excavator Controller UI
A prototype application to control the mechanical functions of an excavator boom.
A link to the working prototype of this app is attached towards the end of this report !
Project background
Mines and construction sites employ excavators for material handling. Extreme conditions like rock sliding, ground collapse, or excessive dust may make operating excavators challenging in reality. Remote operation of the excavator in these harsh situations can significantly reduce operator hazard. This project focuses on a UI that may be used to remotely control an excavator using a portable touch-screen tablet.
The Challenge
The operation of the excavator’s boom is done by means of two levers which are located on the left and right side of the operator. This lever's physical resistance and spring back action are vital for properly managing the excavator boom's hydraulic actuators. When developing a touch-screen-based excavator-controller, it is essential to simulate this physics in order to provide the proper feedback to the operator.
Mobility & Steering Function
The two levers in front of the operator control the excavator's tracks, which allow it go forward or backward and steer left or right.
Excavation Function
The arm swing, bucket position, and boom motions are all controlled by the left and right side levers.
Design & Development*
Digitizing the excavation functions
The position as well as the operating pattern of the excavator's physical controls are mimicked onto the digital controllers, reducing the learning curve and making the app's functionality familiar to excavator operators.
Spring back effect
-
The excavator's control levers activate a hydraulic valve that moves the boom or bucket. They are engineered to rebound back to their original
position after being pulled away. This mechanism is vital in controlling the flow of hydraulic fluid, so the app aims to recreate the equivalent
spring back effect on the digital version of the controller.
App Development
This app prototype was developed in ZIM, which is an open source JavaScript Framework for the HTML Canvas. ZIM is specialised in creating games, apps, puzzles, visualizations and digital art. Besides that, ES6 JavaScript methods used in this application have support for Object-Oriented programming components such as classes.
Since the focus of this project was solely on UI/UX of the app, the functioning prototype for this app presented here was constructed as a simulator operating a virtual excavator boom, owing to the intricacy needed in controlling a real machine.
Simulating the Excavator’s Motions
Since this project was largely about creating the controller app's user interface, the functioning prototypes developed had to only exhibit the component's feel. For this, a virtual excavator with a working boom and bucket was created to demonstrate the app's functionality. Although an excavator's digging-arm is composed of three distinct moving components (boom, arm, and bucket), they are all connected by three separate hydraulic actuators, which allows the arm to move in a synchronised manner as seen in the animation figure. Despite the absence of virtual hydraulic actuators in the app, the synchronisation provided by the app is accomplished by a series of scripts built using ZIM / JavaScript.
Mood Boards
Design Inspiration
The design of the user interface for this application was heavily influenced by material textures, geometric shapes and surface volumes seen on an excavator. These elements helped create a sense of robustness to the UI which would inspire operator confidence while using the app. Moreover, the colour scheme of the brand (CAT) was also employed on the UI that helped establish a connection to the excavator.
Colour pallet’s theme for the UI materialised from a typical job site of an excavator. The base colours were inspired from an open coal mine which consisted of earthy tones, while accent colours were inspired from various alert sign boards normally found in construction sites.
Open Coal Mine
Construction site Alert signs
User Interface
Low Fidelity
UI Design proposals
High Fidelity UI Mockup
The Controller in Use
App Demo
This application demo was created using ZIM, a JavaScript Framework for the HTML Canvas that utilises ES6 JavaScript techniques. Adobe Photoshop and Illustrator were used to produce all of the artwork.
Recommended screen-size & resolution: This app is responsive and it is designed to be run on any touch screen tablet. Additionally it can be also used on a laptop or a computer screen of any size/resolution.
Operating instructions:
Left control pad (drag right or left): Moves the Arm. Left control pad (drag up or down): Moves the Boom. Right control pad (drag right or left): Moves the Bucket.
* Due to the complexity of this project and the tight timelines, few segments in the design of UI and UX were led completely by literature research. Also, the user research and testing were restricted in scope and most were performed remotely with a small sample of participants, leaving room for improvement in future product revisions.
