This Annotated Reality Design for Novices project page describes how to use the project's hostpots.js script library version 0.7.9 to quickly create a medium-fidelity protoyping of an experience by adding and of three types of hotspots to a 360° experience created using the A-Frame web framework. The hotspots appear as circular icons and when the viewer brings one of them to the center of their field of view, one of three different types of boxes appears (and then disappears when the viewer looks away). You can see an example in a simple annotated reality experience of a campus mall with gaze-activated fact boxes, information boxes, and picture boxes. This experience can then be viewed on devices from a desktop to a mobile device to a VR headset.
The library supports adding simple fact boxes, information boxes with a title and a bullet list of facts, and a photo box that can have captions above and/or below a small image. This library has been tested with version 1.2.0 of the aframe-master.js file (external link).
There is a function for creating each of the three types of hotspots.
Within each, there are some mandatory parameters (such as the coordinates
at which to position it, and some content information). The others (such
as background and foreground color, and box size) can either be left out
or have null passed in to have default values used.
The functions are as follow (with optional parameters in brown):
function insertSingleFactBox(coords, fact, boxWidth, boxHeight, colorFore, colorBack, dotOpacity)
function insertSingleInfoBox(coords, heading, bullets, boxWidth, boxHeight, colorFore, colorBack, dotOpacity)
function insertSinglePictureBox(coords, captionTop, image, imageHeight, captionBot, boxWidth, boxHeight, colorFore, colorBack, dotOpacity)
Note: For the insertSinglePictureBox method, the captionTop and captionBot
parameters can be given as null if you do not want that type of
caption for the image, but the image filename must be valid.
For example, this could be applied as:
insertSingleFactBox("11 22",
"Fact Box Example",
35, 10);
insertSingleInfoBox("11 -22",
"Info Box Title",
[
"item #1",
"item #2",
"item #3",
"item #4"
],
65, 25);
insertSinglePictureBox("-11 -22",
"Top Caption",
"photo.jpg", 20,
"Bottom Caption",
50, 30);
You can see two simple example pages, each of which has the above examples live within it on a wireframe backdrop. One has the VR experience embedded within a webpage with other content, and the other is full-screen. Either can work on a smartphone in a "cardboard" VR headset with browsers such as Chrome and Firefox, and with an Oculus Rift if you load the page in a recent version of Firefox, by first clicking on the "goggles" icon in the lower right-hand corner to trigger a split view for VR.
We have also created a simple coordinate finder page that will allow you to edit it to specify the name of your equirectangular image (and the color of the display text) and then determine the coordinates of any spot in your image.
The library also supports text-to-speech in
many browsers
(not the available Oculus browsers at the moment).
Text-to-speech is off by default.
Your page's VR experience can have it being on as the default by adding
turnSoundOn();
into the
onLoad
string in the body tag.
You can also set the default voice to either the browser's
built-in "male" voice
setMaleVoice();
or built-in "female" voice
setFemaleVoice();
in the onLoad string as well.
The user can also control the sound using the keyboard.
s = Sound On
m = Sound Off
b = "Male" Voice
g = "Female" Voice
If the text-to-speech sound is on, then when a billboard appears, the
text will start to be read aloud. If the user looks away and the billboard
disappears, then the reading of that billboard will stop.
You can experience a simple example of audio turned on by default
in this wireframe example.
Currently, there is not support for an additional description of images
other than what you provide for the top and bottom captions around the image.
All of the above code and examples can be download in a single zip file here that can be put on a web server for exploration and use.
For more information about this project, please contact Evan Golub