HMI Design using SVG for an Automotive AC Interface

Automotive Component Design via an SVG Widget

Jesus Rocha

Jesus Rocha is an avid automotive enthusiast, and computer scientist, who enjoys integrating his career into his hobby. His love for cars, and software grew at an early age, and although he comes from a background with limited resources, he has overcome tremendous obstacles to move into the cutting-edge of his career. Jesus has the envisionment of future automotive cockpit interfaces where reprogrammable computers have subtle and easy to use interfaces, with customizable preferences and integration with onboard vehicle systems. Such belief, has drive Jesus to integrate a laptop with docking station in the trunk of his car and output the vga video to a monitor above his navigation system in the cockpit area. They say a car defines who you are, however Jesus likes to believe it's how you make it personal, as he wishes automobiles will offer an API to exchange information between his car and computer, thus breaking into a new realm of increadible opportunities for both software engineers and custom vehicle enthusiast. In the mean time, Jesus loves to use his car computer to watch movies, music videos, listen to music, play video games, and browse the internet. During his consulting at Pacific Stereo (, his innovative entertainment system was challenged with the installation of an ipad on a truck, however he sees ipads lack extensive integration and limited to audio/video, therefore, in this battle the computer will be prominent to deliver digital gatgetry for automotive application.


The advent of liquid crystal display (LCD) monitors has rapidly evolved into the transportation industry and the motivation for superior automotive human machine interfaces (HMI) has followed by its side. The latest HMI's are built using LCD's on newer vehicles to deliver an innovative, unprecedented and interactive experience to the driver encompassing various categories such as comfort, entertainment and safety. A fundamental HMI, the AC control unit, provides comfort with relative simplicity and is commonly found on high-end automotive platforms, and such HMI is further explored in this paper. The unit allows a driver or passenger to maintain a comfortable climate within the vehicle's cabin. This paper models such system digitally through an LCD backed by a computer, since traditional physical HMI components are becoming obsolete to those technologically infused. The digital world has the ability in which one physical component, the LCD, can model extensive physical counterparts.

Further discussion integrates important characteristics for the HMI and expresses how scalable vector graphics (SVG) can fulfill the graphical structure to deliver superior usability and design. The model includes technologies such as CSS and JavaScript, to enhance the aesthetics and provide interactivity. In addition, scripting is used to mimic a finite state machine (FSM) to simulate the alternate state of operation. The digital model extends beyond the physical counterpart by allowing itself to become personal with visual customization features. Finally, since the model is designed to have fully interactive capabilities, in turn it is simulated in a real work environment to provide adaptive visual response following user input.

Table of Contents

Automotive Setup
GUI Design
Providing an Aesthetic Appearance
Providing Simulation
Conclusion and Outlook


People rely heavily on transportation, and the current means have rapidly evolved into complex systems. The amount of software in cars has grown exponentially as cheaper and more powerful hardware becomes available [3]. With respect to the driver, HMI's provide high-level interactions with the underlying complexity thus implying an important role throughout the life of the vehicle. Different vehicles vary among price ranges; and its HMI are designed and developed accordingly. Regardless of price, this component becomes obsolete in the sense of outdated and non-upgradeable after the car ages. Older cars should have the ability to be retrofitted with software upgrades or customizable interfaces on the original installed hardware; consequently, in order to model an HMI on an existing vehicle requires proper setup.

Automotive Setup

The setup consisted on installation of a portable touch screen LCD on a vehicle to replace the original AC control interface location. The AC control was relocated to the glove compartment, and the LCD attached to a laptop mounted in the trunk. The laptop has no communication with the vehicle system however the system setup is sufficient to implement and showcase the model using SVG to provide the graphical user interface.

The figure below illustrates the simulation environment and potential production deployment, because automotive manufacturers do not allow an application programming interface (API). Although the vehicle communication does not exist, the trunk-mounted laptop has the audio ported into the sound system. The laptop runs the latest windows operating system and has drivers installed in order to operate via the touch-input on the LCD. The setup allows the use of a computer to render all media types, including internet access, thus making it one of the first vehicles to be retrofitted with a computer to expand the multimedia experience.

Figure. 1

Figure 1. LCD screen replaced stock AC control interface location which was relocated to glove compartment. Used for multimedia entertainment while the lower LCD is the stock navigation unit. A/C is controlled via steering wheel's alternative controls.

GUI Design

The design of HMI's varies among the same component and to speed up implementation time the original design from the physical AC control unit is utilized. This original design clearly labels the button's intended action in order to make itself noticed right away on how to go about toggling the cabin's climate. Furthermore, the feedback is labeled succinctly in its normal operation and non-distracting. Labeling the inside of the buttons is a greatest feature on this design, and considered in the digital design.

Figure 2.

Figure 2. Factory installed AC module relocated to glove compartment.

For a redesign we employed the Inkscape software tool [6] to provide a fast mockup of the original. The existence of several SVG authoring tools makes the design of new HMI graphic content a simpler task [2]. The original design has a ratio of width almost twice the height, and while the LCD supports an 800x600 optimal resolution this lead to tradeoffs explored in the new design. On the Inkscape design, the feedback display was enlarged in order to match up with the same area allocated for the inputs and avoid empty spaces above and below the usable area.

Figure 3.

Figure 3. Inkscape structure design for implementation


A good interface demands to be functionally easy to understand and use without having to read a manual or brochure, thus good usability is the design goal. Usability from the beginning consisted of a well defined overall structure and layout, and clear distinction between input and output. Larger displays with concrete elements allow faster learning and is emphasized the initial mockup above.


The design phase demonstrated a usable system, and it helped to refine a simple widget to model. Having a mockup in Inkscape is useful as an initial reference to the overall structure, and as development progresses several enhancements will be applied, made possible by SVG, to give life and greater appearance on the final product.


The structure complemented to the original layout but with some adjustments, and was partially attained from the mockup developed using Inkscape. This primitive structure consisted of ‘rect' and ‘g' tags which were consolidated and organized to allow the code be self descriptive. The unit is implemented based on objects from top to bottom, and consolidation of the objects from the mockup provided a visual structure that complements the code structure. The hierarchical order of pieces laid-out in the design is as followed:

These four pieces follow the same ordering both in our code and in our visual mockup.

<rect id="background" ... />
<rect id="main_dislay_screen" ... />
<g id="main_display_data">
</g> <g id="input_control_buttons">
... </g>

Similarly to web development practices, structuring and labeling SVG components properly provide better readability and faster understanding. This help when the code is revisited for extensibility of the design.

The background and main display screen are tags to provide the general layout, while further grouped objects such as main display data is contained within the display screen and the input buttons belong to the empty space below the screen. The ‘rect' tags are comparable to div tags utilized in HTML in order to encapsulate a section within a bounding box.

Display Data

Inside of the display data group tag, additional subgroups that encompass certain regions of the display are mapped to particular functions identical to the original design.

The following components are subgroups within the display data.

The code for these components is vertical which required precise calculations to orient the objects to their respective locations, while the visual appearance is horizontal. The aim is to attain excellent usability, so for proper margins and padding are used to ensure visible identification of feedback to the user.

Our display data consists of 'text' tags for rendering temperatures back to the user, however for the fan speed decided to construct an identical visual representation of the original display. The fan speed in the original component consisted of trapezoids stacked over each other with varying widths to denote higher speeds. In SVG the trapezoid is realized via "polygon" tags which were provided four coordinate points for the tag to render lines through each adjacent point with the last point wrapping around to the first. Below the five trapezoids used to model the fan speed.

<polygon name="fanSpeed" points="20,0 120,0 105,25 20,25"/>
<polygon name="fanSpeed" points="20,30 105,30 90,55 20,55"/>
<polygon name="fanSpeed" points="20,60 90,60 75,85 20,85"/>
<polygon name="fanSpeed"  points="20,90 75,90 60,115 20,115"/>
<polygon name="fanSpeed" points="20,120 60,120 45,145 20,145"/>

The first trapezoid above begins in the top left corner, then move to the right only on the x axis a certain distance. Then it comes downs towards the third point via a negative one slope. Then it moves to the fourth point by going left on the x axis until it's directly underneath the starting point. The same is done for further polygons, however at a smaller scale.

Control Buttons

In our model the buttons are labeled identically, large and easy to perceive the action which will result. These buttons are non-trivial and easily implemented with 'rect' tags along with 'line' tags do denote directions 'up' and 'down' for buttons within the same task. Additionally they are complemented with text to provide information towards the actions they provide.

Each individual column of input buttons is a sub group within our top 'g' tag, and translated to its corresponding position along the x-axis. Below is the first column of buttons, while the others are identical in structure as well, thus demonstrating only their translation across the x-axis.

<g id="column1"> 
<rect class="button" rx="15" ry="15" width="90" height="90" x="5" y="205" id="button1"/>
<rect class="button" rx="15" ry="15" width="90" height="90" x="5" y="305" id="button2"/>
<g id="column2" transform="translate(140,0)" >...</g>
<g id="column3" transform="translate(250,0)" >...</g>
<g id="column4" transform="translate(360,0)" >...</g> ...
<g id="column10" transform="translate(690,0)" >...</g>

Color Tone

The original color tone is grey throughout the unit and the feedback display is black with green data elements. The grey tone is unchangeable on the physical unit, and integrated with the surrounding color to provide a smooth subtle flow. The physical design works well with buttons reflecting the same color as the surrounding background. The model's digital buttons appear flushed with background also, and CSS provided their outline.

To extend the appearance of the digital model, predefined color schemes were implemented also. With different schemes the model would fit well into any vehicle's cockpit display panels. Furthermore, it allows itself to be changed to a new experience similar to changing the background on mobile phones or operating systems.

Providing an Aesthetic Appearance


Gradients are a first step to enhance the model, and allow a modern look and feel. The code below defines a gradient used for the display screen. It is a smooth transition from all black to almost black in order to make the feedback screen semi-glossy.

<linearGradient  id="screen" gradientUnits="objectBoundingBox"  x1="1" x2="1" y1="0" y2="1">
<stop stop-color="#222222" offset="0"/>
<stop stop-color="#111111" offset=".5"/>
<stop stop-color="#000" offset="1"/>

The gradients are applied vertically, and within the "stop" tags the offsets for the various shades of black. This yielded a reflective nature in our screen and enhanced its appearance.

Gradients were also applied on the control inputs to gives the illusion of a virtual lighting source shining down from above button object[5]. The color transitions are from a lighter to darker brightness of a particular color applied vertically as well.


Filters further enhance gradients and everything else it's applied to. The filters implemented[5] were adjusted to add unique touch.

	<filter id="virtual_light" filterUnits="objectBoundingBox" x="-0.1" y="-0.1" width="1.2" height="1.2">
  	<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="alpha_blur"/>
   <!-- virtual shadow effect -->
		<feOffset in="alpha_blur" dx="3" dy="3" result="offset_alpha_blur"/>
   <!-- vitual lighting effect -->
  	<feSpecularLighting in="alpha_blur" surfaceScale="5" specularConstant="1"
			specularExponent="20" lighting-color="#FFFFFF" result="spec_light">
			<fePointLight x="-5000" y="-10000" z="10000"/>
<feComposite in="spec_light" in2="SourceAlpha" operator="in"
result="spec_light"/> <feComposite in="SourceGraphic" in2="spec_light"
operator="out" result="spec_light_fill"/> <!-- combine effects --> <feMerge> <feMergeNode in="offset_alpha_blur"/>
<feMergeNode in="spec_light_fill"/> </feMerge>

The filters were applied to both the buttons and the background to achieve a richer presentation and more realistic implementation through an aesthetically enhanced look. The alpha effects utilized on the filters are very familiar to graphic artists using applications like Photoshop [4].

Figure 4.

Figure 4. Added gradient to feedback display, and applied 3D filter to background

Figure 5.

Figure 5. Demostration of color scheme for vehicle enthusiast customization

Providing Simulation

After completing an excellent replica of the physical AC module via SVG art work, it was time to add a bit of actions to provide a sense of interactions with the system. The initial implementation was the on/off feature; a straight forward hide and show function using DOM and JavaScript. After the power feature, temperature button was mapped with its corresponding feedback, and employed proper constraints for the bounds of the internal temperature. To do show we integrated JavaScript action listeners on certain tags which processed the request and found the corresponding tags to change their state.

A demonstration of an action routine to change the temperature based on a click on either the up or down button is show below.

<rect ... onclick="tempUP()" /> <script type="text/javascript">
function tempUp()
var extTmp = document.getElementById('internalTemperature'); var tmp = parseInt(extTmp.textContent) + 1; if( tmp != 91 && tmp != 33 ) extTmp.textContent = tmp; } </script>

When the button is clicked, we trigger a JavaScript function which in turn grabs the object containing the temperature, then adds one to it. Before writing back to that same object, it checks to make sure that the temperature is within bounds for internal temperature. This similar function is applied to lower the temperature as well.

Figure 6.

Figure 6. Simulation taking place on the automotive setup. Interaction with AC HMI achieved by using LCD's touch screen capability.

Conclusion and Outlook

SVG is a great graphical tool made more powerful when combined with Javascript to add functionality and life. With Javascript an additional HMI, such as an audio control interface, the LCD can be extended to a multi-functional display when a driver switches from the audio control mode the climate control mode [2]. These complex HMI integrations are installed in today's luxury vehicles, and have equal potential to be ported into any vehicle through a vehicle API or utilizing an adapter pattern.

Automitive software is very diverse[1] and the industry is still its infancy in the similar case compared to the field of computer science. As we progress into the future, the ties between technology and application will grow next to each other and enhance our ability to have greater communication with our vehicles. Communication is vital among man and machine, and because man has grown to depend on transportation, there is a need for enhanced communication between the two. GUI's implemented via SVG provide a new direction for superior interactions, and computer science will provide new hope for the automotive community who takes great pride in the vehicles.


[1] Alexander Pretschner, Manfred Broy, Ingolf H. Krüger and Thomas Stauner. Copyright © 2007 Future of Software Engineering. 0-7695-2829-5/07 IEEE. Software Engineering for Automotive Systems: A Roadmap.

[2] Dr. Sébastien Boisgérault, Mohamad Othman Abdallah, and Jean-Marc Temmos. Copyright © 2008 SVGOpen 2008. SVG for Automotive User Interfaces.

[3] Manfred Broy. Copyright © 2006 ICSE '06 May 20-28, Shanghai, China. 2006 ACM Challenges in Automotive Software Engineering.

[4] Alex Danilo. Copyright © 2009 SVGOpen 2009. SVGOpen-2009 Lights, Camera, Action!

[5] Dr. Jun Fujisawa and Mr. Anthony Grasso. Copyright © 2008 SVGOpen 2008. Graphic Design with SVG. Achieving 3D Effects with SVG.

[6] Inkscape Vector Graphic Editor. .