by Nicole Yankelovich (nicole@openwonderland.org)

Purpose & Prerequisites#

This tutorial describes how to create posters using the HTML Poster module. Please be sure this module is installed before following the steps below.

Introduction#

Posters are 2D objects that can be edited to create signs, directories, and other graphical displays. They can be placed anywhere in a Wonderland world.

Creating a New Poster#

To create a new poster, navigate to the location you wish to add the poster. With your avatar facing the poster location select “Object” from the Insert menu. Locate and select “Poster” from the Insert Object dialog and click “Insert.”
A small “Hello World” poster will appear in front of your avatar.
Right click on the poster and select “Set Text” from the context menu.
An edit window opens, allowing you to change the poster text.
Type in alternate text to create a simple poster.
Clicking on the Preview button will show you how the poster will look. Here it is in the world after you click "OK":

Using HTML Markup#

Posters can also be created using simple HTML markup (CSS and style sheets are not currently supported). You can use HTML to add color and formatting to the poster, as in this simple example:
You can also use it to add images and links, for example, to create an interactive directory of your virtual space.
This poster includes an image from the Internet (the Open Wonderland logo), a link to an XYZ location in the world (the first “Portal” link), links to named placemarks (the rest of the items in the Directory section), and links to external documents (the items in the For More Information section). The location and placemark links will teleport the user to those locations and the links to external documents will open the page in a web browser on the user’s computer. Here’s the HTML code for the poster displayed above that you can use as a starting point.

<html>
<body bgcolor="black">
&nbsp; <img src="http://openwonderland.org/templates/wonderlandb/images/idy.png"> &nbsp;
<p>
<center>
<table bgcolor="white" width="85%" cellpadding="20">
<tr><td>
<h1>Demo Server Directory</h1>
<a href="?location=5.92+0+13&look=2.92">Portal</a><br>
<a href="?placemark=Almost+Empty">Almost Empty world</a><br>
<a href="?placemark=Auditorium">Auditorium</a><br>
<a href="?placemark=Gallery">Gallery</a><br>
<a href="?placemark=Japanese+Pavilion&look=180">Japanese Pavilion</a><br>
<a href="?placemark=Meeting+Complex">Meeting Complex</a><br>
<a href="?placemark=Town">Town</a><br>
<h1>For More Information</h1>
<a href="http://openwonderland.org">Open Wonderland web site</a><br>
<a href="http://blogs.openwonderland.org/">Wonderblog</a><br>
<a href="http://groups.google.com/group/openwonderland">Discussion Forum</a><br>
<a href="http://code.google.com/p/openwonderland/wiki/OpenWonderland">Documentation</a><br>
</td></tr>
</table>
</center>
<br>
</body>
</html>
Notice that both the location and the placemark links can optionally include a “look” tag to specify look direction. If the look tag is not included, it will default to zero for location links and it will default to the direction specified in the placemark for placemark links. Also note that placemark names that include spaces must use either the plus sign (+) to denote the spaces or the ASCII space character code (%20). If you wish to insert other non-ASCII characters in the link definition such as commas or quotation marks, refer to the URL Encoding Reference for the appropriate %XX codes. To figure out what values to use for the location and look tags:
  • Move your avatar to the exact location you wish to specify in the URL
  • Select “Add Placemark...” from the Placemarks menu
  • Note down the values in the X, Y, and Z Location fields
  • Note down the value in the Look Direction field
  • Click “Cancel” to exit this dialog without creating a Placemark
Typically you will want to round these numbers to the nearest whole number when constructing the URL, but it is fine use decimal values if you want the avatar to teleport to an exact location, as in the example above:
<a href="?location=5.92+0+13&look=2.92">Portal</a>
In the “Combined-wfs” default world, this link teleports the user to just in front of the portal to the Japanese Pavilion space. Note that both location values and look direction values can be negative numbers.

Adding Images#

As illustrated above, you can add images using the standard html image tag and link to an image on the Internet. In the example above, the poster includes the Wonderland logo (idy.png).
<img src="http://openwonderland.org/templates/wonderlandb/images/idy.png">
You can also add images to posters that are stored on the Wonderland server. This removes any dependencies on accessing content from the Internet. To add an image from the Wonderland content repository, you may first need to upload the image. Do this simply by dragging and dropping the image into the Wonderland world. As soon as you see the image appear, you can delete it from the scene. The image will remain on the server in your user directory. Let's say I drop in the Wonderland logo. It will now be in my user directory on the server:
/users/Nicole/idy.png
All content in the repository can be accessed using "wlcontent" URLs. So to reference the logo, the HTML code looks like this:
<img src="wlcontent://users/Nicole/idy.png">
If you wish to replicate a poster that includes location links, it can sometimes be helpful to specify these links in terms of relative position rather than absolute position. In this way, if you replicate the poster in a different portion of the world, the links will still go to the same relative location. To figure out relative locations, you need to know the location of your poster and how far away the location you want to jump to is. Here's an example. Let's say we have a Directory of Exhibits poster at the coordinates x=1000,y=2,z=3000 and a Y rotation value of 0.
We want the user to jump to standing in front of the space shuttle exhibit, such that they land at the coordinates x=970,y=0,z=3015 with a look direction of 20. To find the relative distance, we need to subtract to calculate the X and Z values and add to figure out the look direction:
1000 - 970 = 30
3000 - 3015 = -15
20 + 180 = 200
The Y value doesn't matter. The look direction is 180 degrees opposite of what shows up in the "Add Placemark" dialog, which is why we need to add 180 to the look direction value. Relative locations are specified using the at sign (@), so the relative URL looks like this:
<a href="?x=@30&z=@-15&look=@200">Space Shuttle</a>
Here's the HTML for the entire poster:
<html>
<body bgcolor="black">
<center>
<h1><font color="white">
&nbsp; &nbsp;Directory of Exhibits &nbsp;&nbsp;&nbsp;
</font></h1>
</center>
<br>
<font color="white">
&nbsp; <a href="?x=@30&z=@-15&look=@200">Space Shuttle</a><br>
&nbsp; <a href="">Satellite</a><br><br>
</font>
</body>
</html>

Add new attachment

Only authorized users are allowed to upload new attachments.

List of attachments

Kind Attachment Name Size Version Date Modified Author Change note
png
DirectoryOfExhibits-60p.png 340.2 kB 1 09-Dec-2011 19:01 Nicole Yankelovich
png
InsertObject-Poster.png 26.4 kB 1 16-Oct-2011 20:22 Nicole Yankelovich
png
Poster-Directory.png 126.6 kB 1 16-Oct-2011 20:22 Nicole Yankelovich
png
Poster-EnterPosterText-1.png 11.4 kB 1 16-Oct-2011 20:22 Nicole Yankelovich
png
Poster-EnterPosterText-2.png 16.5 kB 1 16-Oct-2011 20:23 Nicole Yankelovich
png
Poster-HTML-rendered.png 98.5 kB 1 16-Oct-2011 20:23 Nicole Yankelovich
png
Poster-HTML.png 21.8 kB 1 16-Oct-2011 20:23 Nicole Yankelovich
png
Poster-HelloWorld.png 108.3 kB 1 16-Oct-2011 20:23 Nicole Yankelovich
png
Poster-Plain.png 102.0 kB 1 16-Oct-2011 20:23 Nicole Yankelovich
png
Poster-SetText.png 101.6 kB 1 16-Oct-2011 20:23 Nicole Yankelovich
« This page (revision-16) was last changed on 21-Sep-2015 12:42 by Abhishek Upadhyay