|
In order to create custom user interfaces, it is often necessary to create customized icons and markers. These custom icons can depict anything you want and are specified using simple ".png" graphics files using the "alpha" channel for transparency to indicate where the marker is to be "cut away". Creating custom icons can be used for both creating custom markers and also for creating custom cursors. In this example, we will create some custom markers.
- Add Javascript "include" files
The first step is to include a set of Javascript resource files that contain the Javascript code that defines the MarkUp API. Normally, when you export a model from Hypercosm Teleporter, these "include" files are automatically added to the web page for you and so you don't need to worry about this and can skip ahead to the next step. If you are creating the HTML page from scratch or you just would like to know what files are involved, the neccessary files are listed below:
<script src="scripts/utilities/javascript_utils.js"></script>
<script src="scripts/utilities/web_browser_utils.js"></script>
<script src="scripts/utilities/string_utils.js"></script>
<script src="scripts/utilities/browsersniffer.js"></script>
<script src="scripts/utilities/hc_checkforplayer.js"></script>
<script src="scripts/utilities/rgb_color.js"></script>
<script src="scripts/utilities/common_colors.js"></script>
<script src="scripts/utilities/hc_vector3.js"></script>
<script src="scripts/overlays/hc_overlay.js"></script>
<script src="scripts/overlays/hc_colored_overlay.js"></script>
<script src="scripts/overlays/hc_marker.js"></script>
<script src="scripts/overlays/hc_icon.js"></script>
<script src="scripts/components/component.js"></script>
<script src="scripts/applet/hc_applet.js"></script>
<script src="scripts/applet/hc_scriptable_applet.js"></script>
<script src="scripts/applet/hc_markup_applet.js"></script>
- Create a new icon
The next step is to create a new icon object using the image file that you specify. The constructor for the HCIcon object has three parameters: the file name, the horizontal alignment, and the vertical alignment. Remember, since the image files are used by the applet, not the web page, any path that you specify for the image file must be relative to the applet.
applet.onload = function() {
// create new icon
//
var icon1 = new HCIcon("icons/icon.png", "center", "bottom");
}
- Create a new marker using the new icon
The next task that needs to be done is to create a new marker as described in the previous example. In order to create a marker using a custom icon, we provide the icon as an optional second parameter following the XYZ location of the marker.
applet.onload = function() {
// create new icon
//
var icon1 = new HCIcon("icons/icon.png", "center", "bottom");
// create new marker using new icon
//
var marker1 = new HCMarker(new HCVector3(-10, -10, 20), icon1);
}
- Add the custom marker to the scene
Once you've created a new customized marker, the next step is to add it to the scene. This is done using the applet's "addOverlay" method.
applet.onload = function() {
// create new icon
//
var icon1 = new HCIcon("icons/icon.png", "center", "bottom");
// create new marker using new icon
//
var marker1 = new HCMarker(new HCVector3(-10, -10, 20), icon1);
// add new custom marker to applet
//
applet.addOverlay(marker1);
}
|
