How do I get information from the user using an HTML page?
Html is one of the ways of showing information to a user and getting them to respond. All devices that can run the mscape player can also show HTML unlike Adobe Flash. One of the benefits of HTML is that you can display dynamic information such a a score without having to create images for all possibilities. You can also get the user to tap on links and buttons in the HTML and then respond to that from inside your mediascape. This how to is about finding out when a user has tapped on the Html and responding to it, there is lots more information on other aspects of using HTML in mediascapes here !!!Insert link to html in doc's!!! Let's begin by starting the mscape maker and creating a new mediascape. For this how to you will also need a way of editing very simple html documents (also called web pages). I recommend Windows Notepad, you should be able to get to this from the start menu by clicking on Start-> All Programs -> Accessories -> Notepad. You can of course use your favourite web page maker like Dreamweaver or Front Page. The extra code added automatically by Microsoft word when editing html tends to cause problems and so is best avoided.Open Notepad and copy and paste the following text into Notepad.
<html> <body> Hello, this is a web page <BR> <a href="page2.html">Go to second page</a> </body> <html>
Now save this document as page1.html into somewhere you can find and then import it into your new mediascape. For more on importing media please see How to import media into a mediascape. So this is a very simple page it will let the user go to a different page but will not let them trigger events in your mediascape. Now we are going to add a new page that will give the user the chance to interact with the mediascape, again open Notepad, past this in and save it out as page2.html then import page2.html. It does not matter if you do not understand what is happening just yet it will be explained later on.
<html> <head/> <body> This is page 2 <BR> <a href="page1.html">Go to First page</a> <BR> <a href="mediascape://Play">Play a sound</a> <BR> <a href="mediascape://Stop">Stop a sound</a> </body> <html>
Now we can go back to the mscape maker. This is a good time to import a piece of audio that we will control with the second web page that you have just added. To start this off we want the first page to show up when the user starts the mediascape, to do this we click on the Mediascape object at the very top of the left hand panel in the maker. You should now see two events in the events panel near the bottom of the maker window. Drag the object called page1 into the OnLoaded event, type "." and select Show. This now means that when the mediascape is loaded the html page called page1 will be shown to the user.
If you look at the html in page one you will see that it has a link to page 2. This is a normal kind of link that you get on many web pages, it will cause page 2 to be shown. Now if you look at page 2 then you will see that there is a normal kind of link to page 1 and also two extra links. These extra links have a slightly different kind of address in the href, the address start "mediascape://". If the user clicks on a link who's href starts "mediascape://" it will not go to a new page, instead the information will go to your mediascape as an event.
Now I will explain how to use these events and then once you have tried it in the tester this should all make sense. Click on page2 in the left hand panel of the maker. You will see three events in the events panel near the bottom of the maker OnLoaded, OnLinkClicked and OnFormPosted. It is the middle one OnLinkClicked that we will use in this how to. !!!Image of three event tabs!!! When a special link (one that has "mediascape://") is clicked on then this event will trigger. If you select the OnLinkClicked tab and then click on the little icon on the right of all the tabs
!!!Image of parameters button!!!
Then you will see a new little panel called the Parameters panel in the bottom right of the maker window. This will have two entries in it Me and link.
!!!Image of parameters panel!!!
These parameters are extra bits of information that we can use in this event. For this we are going to use the link parameter. This link parameter is the bit of text after the "mediascape://" in the href. So if the user clicks on the link that says
<a href="mediascape://Play">Play a sound</a>then the link parameter will be the single word
Play. It is best to avoid spaces and special characters for the link text as this can make it work differently between the tester and the player.
In order to play the audio we imported at the beginning using the special links, the mediascape needs to match the right link with the right action. To do this we compare the link parameter with the words "Play" and "Stop" as those are the words after "mediascape://" in the html. Here is an example of doing that for a piece of audio called audio1.
if(link == "Play")
{
audio1.Play();
}
if(link == "Stop")
{
audio1.Stop();
}
This mediascape is now ready to be tested in the tester. If you click on the tester button on the makers tool bar then you should see the tester come up in a new window and page1 will show up in the left hand panel that is meant to represent the device screen. If you click on the link in that page then you will see page2, here there is the link back to the first page and the two special links that we added. If you click play then you should here the music start to play and the stop link should stop the audio.
Congratulations you have now learnt how to add links between html pages and your mediascape! If you are having trouble why not look at the example that is now posted here: !!!Post example here!!!
