Scroller 1.4 The scroller component is very easy to use. It can be customized in almost any way. In this documentation you will learn how to use and customize the scroller component to e.g. a timeline describing a company's history or a panorama. You will also be able to use it as a navigation tool. You can download and include it on your non-commercial homepage for free. There are no limitations in the not-registred version. If you register your version the label "Not registred - (c)nessal, Denmark" will be removed. What is the scroller component ? The scroller component is an applet which creates a canvas with a size given by the applets parameters. If the canvas is bigger than the applet size it is possible to scroll the canvas by dragging it with the mouse. It is possible to have the canvas reflected or let it be repeated. This way it is possible to display a panorama picture describing a 360 degree scenery. Otherwise it can be reflected at the ends. The canvas is sensitive to the speed of the mouse when dragging, and if the mouse button is released while dragging, the canvas will continue to scroll for a while, depending of the speed the mouse has when the button was released. It is therefore possible to "throw" the canvas in a sudden direction. The following elements can be inserted on the canvas: * Pictures * Text fields (with selected colors and fonts) * Sound areas that play an au-file each time the cursor enters the area * Hyperlink areas which by clicking in them works the same way as ordinary hyperlinks. * Zones. You can control the scroller component from a javascript program, and you can invoke javascript from the component. Example 1 - Scroller basic The first example is a timeline describing the Maersk company history. It is started by loading example1.html ( placed in the example1 folder) into your browser. When the example start the canvas runs by itself. This mode is called autorun. First time you click on the canvas with your mouse the canvas will stop. Your can control the position of the canvas by dragging the canvas (hold the mouse button down while you move the mouse). If you release the mouse button while your are dragging, the canvas will continue to run for a while depending of the speed it has, when the button was released. The example1.html contains the following lines: Maersk history

The history of Maersk

You can stop and "throw the canvas around" with the mouse.

Your browser don't support Java.
You can download a new browser from Netscapeor Microsoft The parameters to the applet has the following meaning: Parameter Description Default value inputFile The name of the file describing the context of the canvas input.txt delimeter A character delimiting the varies part of a line in the inputFile # imgwidth The width of the canvas in pixels 7000 imgheight The height of the canvas in pixels 300 sleeptime A number describing how long the applet should sleep between each iteration. This number has nothing to do with the speed of the applet (see later), and normally you can omit it. 50 bgColor Background color of the canvas in RGB-hexadecimal values. FFFFFF (White) reflectx If this parameter is true, the canvas will reflect when it reach the end in the x direction (horizontal), if false the image will start over again (be repeated). * true reflecty If this parameter is true, the canvas will reflect when it reach the end in the y direction (vertical), if false the image will start over again (be repeated) * true faktorAuto An integer describing the speed of the canvas, when it run in "Auto mode". 1 faktor An integer describing the speed of the canvas, when it is thrown by the mouse 5 test When building up the layout of the canvas you normally have a large area where you want to place text, images etc. To help you choose the right location on the canvas, the position on the canvas will be display in the browsers statusline when this parameter is true. false startincx An integer describing the direction of the applet in x-direction when it is running in "Auto mode". -1=right-to-left, 0= no Auto run, 1=left-to-right 1 startincy An integer describing the direction of the applet in y-direction when it is running in "Auto mode". -1=bottom-to-top, 0= no Auto run, 1=top-to- bottom 0 xpos The start x-position of the canvas. You are responsible that the position is inside the image 0 ypos The start y-position of the canvas. You are responsible that the position is inside the image 0 *) Please note that reflectx and reflecty cannot be false both at the same time. Repetition of the image in both directions is not yet supported. Note that in the same folder as contains 'example1.html', there are two class-files, 'scroller.class' and 'element.class'. It is important that these files are placed in the same folder as the html-file which contains the applet-tag. The context of the canvas is controlled by the "example1.txt"-file. You can open it in a text-editor. Each item on the canvas is associated with a line in this file. When the scroller component starts it read the file and the first character in each line decide whether the line describe an image, a text-field, a hyperlink area or a mouse-over field: 0 = Image 1 = Textfield 2 = Hyperlink area 3 = Mouse over/au-sound Each situations are described in the following. Please note that blank lines are ignored and that lines can be comment out with two slash (//) in the beginning of the line (like in C++/Java). The file is read from top to button, and the items is placed on one another on the canvas in this order. You can then put images on top of each other or make text remarks on an image etc. 0 = Image The first line in example1.txt is: 0¤50¤20¤images/m01.jpg The meaning of each of the values between the delimiters symbol '¤' are explained below: Value Description 0 Number indicating that the line is a picture 50 x-coordinate of the top left of the image 20 y-coordinate of the top left of the image images/m01.jpg Relative path to the image according to the class-file location 1 = Text field The fourth line in example1.txt is 1¤150¤35¤"Ariel", 0, 12¤000000¤150¤15¤Birth of Arnold Peter M›ller. The meaning of each of the values between the delimiters symbol '¤' are explained below: Value Description 1 Number indicating that the line is describing a text line 100 x-coordinate of the top left of the text line 35 y-coordinate of the top left of the text line "Ariel", 0, 12 Font for an item: "Font",style,size Font: This is the font name of the font. The number of fonts varies greatly across systems. If the chosen font is not available, the nearest will automatically be used. Normally at least following fonts is available: TimesRoman, Courier, Helvetica, Dialog, DialogInput Style: 0 = normal 1 = italic 2 = bold Size: Size of the font 0000ff Text color in RGB hexadecimal values 250 width of text field in pixels -se explanation below 15 Distance between text lines in pixels. If you write 'null', the component will automatic use an appropriate distance. If you just want the default value, which depends on the font and size, you just write null, and the scroller component will automatically find out which distance to use. Birth of Arnold Peter M›ller. Text to be displayed The text field is a bit tricky. Below is showed a text filed which start at (x,y) and have a 'Width'. The scroller applet will break the text line when a word goes out of the text field, and display the next word on the next line. It is not guarantied that the text will be within the text field. The text field is arrange this way to ensure that all word will be displayed, regardless how long they are. You can force a line break with a /n with space on each side e.g.: 1¤150¤35¤"Ariel", 0, 12¤000000¤150¤15¤Birth of \n Arnold \n Peter \n M›ller. Note that a text filed has no height. It will be filled out as long as there are more words. 2 = Hyperlink area A hyper link area is an area, in which you can click to activate a hyper link or to invoke a javascript function. There are no hyper links in example1.html, but example2 (in example2.txt) contains the following line 2¤20¤500¤250¤520¤http://www.microsoft.com¤main - which is a hyper link to Microsoft homepage. The meaning of each of the values between the delimiters symbol '¤' are explained below: Value Description 2 Number indicating that the line is describing an hyper link area 20 x-coordinate of the top left corner of the hyper link area 500 y-coordinate of the top left corner of the hyper link area 250 x-coordinate of the buttom right corner of the hyper link area 520 y-coordinate of the buttom right corner of the hyper link area http://www.microsoft.com Url of the hypertext area. If the url doesn't start with 'http' it is assumed to be a relative url to the class files. You can call a javascript routine from the component by specify a hyper link starting with javascript and the function name separated by a colon e.g.. javascript:displayAlert('Warning') Important: To call javascript from the component you have to place the netscape-folder and sub folder under your class files location. Also if you only intend to use MS Explore browser. Furthermore you have to change the applet tag to include a mayscript-statement e.g..