There have been many requests for an instruction on how to build a configurator application. Actually, it’s not so difficult to build such an application if you have good understandings of views in Composer and some knowledge of HTML coding.
Here is a procedure you can follow. In this tutorial, we just use the GotoView() method, which can be used without Player Pro license.
Those who are already familiar with Composer’s intelligent views and HTML coding quite well can directly jump to the discussion of actual coding section at the bottom of this page.
0. Create Views
You might want to review our previous podcasts such as this and this in order to create intelligent views that can partially save and update selected properties of specified actors in Composer. In this tutorial, we access intelligent views through an API to change parts but not to change camera position or orientation and other parts.
1. Write an HTML source code
For this tutorial, we just create a simple web application with a title, Player ActiveX Control, and the control field that display radio buttons to configure parts. Here is the entire set of the source code we begin with:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Configurator</title>
</head>
<body>
<h1>Radio Controlled Car Configurator</h1>
<div id="container">
<object id="_player" classid="CLSID:410B702D-FCFC-46B7-A954-E876C84AE4C0"
height="480px" width="640px">
<param name="FileName" value="Radio_controlled_car.smg">
<param name="AntiAliasingOnIdle" value="0">
<param name="AutoPlay" value="0">
<param name="CameraPlayMode" value="0">
<param name="GroundGrid" value="0">
<param name="RenderGroundShadow" value="0">
<param name="RenderMode" value="0">
<param name="ShowCameraToolBar" value="0">
<param name="ShowCollabToolBar" value="0">
<param name="ShowCollabTreeBar" value="0">
<param name="ShowCuttingPlaneToolBar" value="0">
<param name="ShowMain3DToolBar" value="0">
<param name="ShowMarkerBar" value="0">
<param name="ShowRenderToolBar" value="0">
<param name="ShowStandardToolBar" value="0">
<param name="ShowStatusBar" value="0">
</object>
<div id="controls">
</div>
</div>
</body>
</html>
Underneath the title, which is enclosed with the <h1></h1>tags, we set a region defined by the <div id="container"></div> tags to define Player ActiveX Control on the left hand side and button controls on the right hand side. We will define the details about the controls field later.
This should give an IE display as below.
2. Add CSS to define a layout and styles
We write the following CSS codes to define a layout for the application:
<style type="text/css">
#container {
width: 940px;
height: 480px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
}
#controls {
top: 100px;
left: 640px;
float: right;
width: 300px;
height: 480px;
overflow-y: auto;
background-color: #eeeeee;
}
</style>
Here,
#container
is adjusted to include the Player ActiveX and the control field with the sum of their widths and their exact height. We put a solid line around #container to define the space. margin-left: auto; and margin-right: auto; are set to centralize
#container
.
This is not necessary but in order to give a consistent style for all elements defined in this HTML, we define the following:
* {
margin: 0px;
padding: 0px;
font-family: "Segoe UI Light";
}
where “margin” and “padding” are defined to have 0 values for us to control them, rather than the browser window itself. We also define the font type to give a modern look at the application.
Up to now, this should yield the following screen:
3. Defining controls
Now, we are ready to define switches to control the configuration. We first define necessary radio buttons to configure the model and a push button to go back to the default view of the model.
<div id="configurator">
<h3>Default</h3>
<input type="button" value="Default" />
<h3>Color</h3>
<label>Red <input type="radio" name="color" checked /></label>
<label>Green <input type="radio" name="color" /></label>
<label>Blue <input type="radio" name="color" /></label>
<label>Yellow <input type="radio" name="color" /></label>
<h3>Wheel</h3>
<label>Type A <input type="radio" name="wheel" checked /></label>
<label>Type B <input type="radio" name="wheel" /></label>
<h3>Body</h3>
<label>Type A <input type="radio" name="body" checked /></label>
<label>Type B <input type="radio" name="body" /></label>
<h3>Spoiler</h3>
<label>Type A <input type="radio" name="spoiler" checked /></label>
<label>Type B <input type="radio" name="spoiler" /></label>
<h3>Springs</h3>
<label>Type A <input type="radio" name="springs" checked /></label>
<label>Type B <input type="radio" name="springs" /></label>
<h3>Antenna</h3>
<label>Type A <input type="radio" name="antenna" checked /></label>
<label>Type B <input type="radio" name="antenna" /></label>
<h3>Exhaust</h3>
<label>Type A <input type="radio" name="exhaust" checked /></label>
<label>Type B <input type="radio" name="exhaust"/></label>
<h3>Bumper</h3>
<label>Type A <input type="radio" name="bumper" checked /></label>
<label>Type B <input type="radio" name="bumper" /></label>
</div>
Since by default “Type A” is selected for all parts, we added “checked” for the Type A controls.
Please also note that we inserted these controls within the <div id="configurator"></div> tags so that we can give some blank spaces around the buttons. In order for such spaces, we also need to define a CSS code sequence:
#configurator {
padding: 10px;
}
So far, the HTML window should look like this:
4. Adding API
We now add the API to access the views defined in Composer. Let’s first define a behavior for the default button.
The suitable API for this purpose is the GotoView() method. Since we already gave view names such as “Default”, we can simply use the string as an argument of the GotoView() method.
<input type="button" value="Default" onclick="_player.GotoView('Default')" />
where “_player” is the ID given to the Player ActiveX Control object within the <object></object> tags.
Next, we add the GotoView() method with an appropriate view name to each radio button. For example, for the Red radio button, we write something like this to associate the click event on the radio button with the view change via the onclick event:
<input type="radio" name="color" onclick="_player.GotoView('Red')" checked />
where “Red” is the name of the view we defined earlier as an intelligent view in Composer that can change the color of the body and the spoiler to red.
We continue adding the GotoView() method until the end.
The end result should look like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Configurator</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
font-family: "Segoe UI Light";
}
#container {
width: 940px;
height: 480px;
border: 2px solid black;
margin-left: auto;
margin-right: auto;
}
#controls {
top: 100px;
left: 640px;
float: right;
width: 300px;
height: 480px;
overflow-y: auto;
background-color: #eeeeee;
}
#configurator {
padding: 10px;
}
</style>
</head>
<body>
<h1>Radio Controlled Car Configurator</h1>
<div id="container">
<object id="_player" classid="CLSID:410B702D-FCFC-46B7-A954-E876C84AE4C0"
height="480px" width="640px">
<param name="FileName" value="Radio_controlled_car.smg">
<param name="AntiAliasingOnIdle" value="0">
<param name="AutoPlay" value="0">
<param name="CameraPlayMode" value="0">
<param name="GroundGrid" value="0">
<param name="RenderGroundShadow" value="0">
<param name="RenderMode" value="0">
<param name="ShowCameraToolBar" value="0">
<param name="ShowCollabToolBar" value="0">
<param name="ShowCollabTreeBar" value="0">
<param name="ShowCuttingPlaneToolBar" value="0">
<param name="ShowMain3DToolBar" value="0">
<param name="ShowMarkerBar" value="0">
<param name="ShowRenderToolBar" value="0">
<param name="ShowStandardToolBar" value="0">
<param name="ShowStatusBar" value="0">
</object>
<div id="controls">
<div id="configurator">
<h3>Default</h3>
<input type="button" value="Default" onclick="_player.GotoView('Default')" />
<h3>Color</h3>
<label>Red <input type="radio" name="color" onclick="_player.GotoView('Red')" checked /></label>
<label>Green <input type="radio" name="color" onclick="_player.GotoView('Green')" /></label>
<label>Blue <input type="radio" name="color" onclick="_player.GotoView('Blue')" /></label>
<label>Yellow <input type="radio" name="color" onclick="_player.GotoView('Yellow')" /></label>
<h3>Wheel</h3>
<label>Type A <input type="radio" name="wheel" onclick="_player.GotoView('Wheel A')" checked /></label>
<label>Type B <input type="radio" name="wheel" onclick="_player.GotoView('Wheel B')" /></label>
<h3>Body</h3>
<label>Type A <input type="radio" name="body" onclick="_player.GotoView('Body A')" checked /></label>
<label>Type B <input type="radio" name="body" onclick="_player.GotoView('Body B')" /></label>
<h3>Spoiler</h3>
<label>Type A <input type="radio" name="spoiler" onclick="_player.GotoView('Spoiler A')" checked /></label>
<label>Type B <input type="radio" name="spoiler" onclick="_player.GotoView('Spoiler B')" /></label>
<h3>Springs</h3>
<label>Type A <input type="radio" name="springs" onclick="_player.GotoView('Springs A')" checked /></label>
<label>Type B <input type="radio" name="springs" onclick="_player.GotoView('Springs B')" /></label>
<h3>Antenna</h3>
<label>Type A <input type="radio" name="antenna" onclick="_player.GotoView('Antenna A')" checked /></label>
<label>Type B <input type="radio" name="antenna" onclick="_player.GotoView('Antenna B')" /></label>
<h3>Exhaust</h3>
<label>Type A <input type="radio" name="exhaust" onclick="_player.GotoView('Exhaust A')" checked /></label>
<label>Type B <input type="radio" name="exhaust" onclick="_player.GotoView('Exhaust B')" /></label>
<h3>Bumper</h3>
<label>Type A <input type="radio" name="bumper" onclick="_player.GotoView('Bumper A')" checked /></label>
<label>Type B <input type="radio" name="bumper" onclick="_player.GotoView('Bumper B')" /></label>
</div>
</div>
</div>
</body>
</html>
Now, the configurator application is ready.
