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.
Table of Contents
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 . 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.
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. 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.
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.
For a redesign we employed the Inkscape software tool  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 . 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.
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> <g id="input_control_buttons">
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.
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.
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.
<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>
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.
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. 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 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 .
A demonstration of an action routine to change the temperature based on a click on either the up or down button is show below.
var extTmp = document.getElementById('internalTemperature'); var tmp = parseInt(extTmp.textContent) + 1; if( tmp != 91 && tmp != 33 ) extTmp.textContent = tmp; } </script>
Figure 6. Simulation taking place on the automotive setup. Interaction with AC HMI achieved by using LCD's touch screen capability.
Automitive software is very diverse 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.
 Copyright © 2008 SVGOpen 2008. www.svgopen.org/2008. SVG for Automotive User Interfaces.
 Copyright © 2006 ICSE '06 May 20-28, Shanghai, China. 2006 ACM Challenges in Automotive Software Engineering.
 Copyright © 2009 SVGOpen 2009. SVGOpen-2009 www.svgopen.org. Lights, Camera, Action!
 Copyright © 2008 SVGOpen 2008. Graphic Design with SVG. www.svgopen.org. Achieving 3D Effects with SVG.
 Inkscape Vector Graphic Editor. http://www.inkscape.org .