Making backgrounds for Projects Looking Glass

This tutorial show how make backgrounds and add it to Project Looking Glass by Background Manager demo application from lg3d incubator project.

Note: If You Want Use "BackgroundChangeRequestEvent" event You can skeep several steps. About making images is in steps 1.1 , 2.1, 3.1

There are three types of backgrounds used by Project Looking Glass (for now).

• Panorama Background. Series of images ( 2-8 ) which create panorama of some place.
  

  

• Layered Background. Few images (2+) which are placed one on second and creates 3D visual effect

• Image Background. Simple image like in traditional 2D desktop.

Model background and Layered Panorama background will be add in future, like we hope many others.

1.How create Panorama Background from one panorama image.

1.1Cutting panorama image to single images.

All images size in Lg3d should (read must) be ... example 64x64, 128x128, 256x256, 512x512,1024x1024 etc. All demo backgrounds use 512x512 pixles images with compress quality between 75% to 95 % for JPEG, also PNG are supported. For panorama background or image backgroun best choice is JPEG format at all. Square images are stretched to screen size (Canvas3D^?) best practice is cut big panorama image to 1024x768 pixles or 4 (width) x3 (height) proportion to smaller images., and after that resize(scale) it one by one to 512x512 pixles . Prefered names for single images is: BGNAME-IMAGE_NUMBER_FROM_LEFT.JEPG. Example (stanford-0.jpeg , stanford-1.jpeg , stanford-2.jpeg, stanford-3.jpeg). All images should be put to folder with the same name like background in this case stanford if it is posible.

Note: For standard monitors proportion is 4x3 but for panoramic screen can be diffrent even 16x9. More You can find in monitor specyfication.


Panorama in single image



Panorama stretched to 512x512 pixles for single image

1.2 Making thumbnail image for Background Manager

All backgrounds for BgManager^? application must have thumbnail image. Preffered size is 128x128. The thumbnail will be showing in main application frame, also should be putting to background folder. The name of this file is frelly. Example (stanford-thumb.jpeg)

1.3 Writing Config.XML for panorama background.

Config.XML is background descriptor for BgManager^? application. Construction of this file is very intuitive. This file is build with two major block. In first block is the same for all types of backgrounds end include many metadata. First tag is <Background> after that are metadata

- Name,name of background
- Thumbnail , path to thumbnail image
- Author , author name
- Date
- Description,info, copyright, etc.

   <Name>BACKGROUND NAME</Name>
   <Thumbnail>resources/Backgrounds/stanford/stanford-thumb.jpg</Thumbnail>
   <Author>AUTHOR</Author> 
   <Date>Date</Date>
   <Description>DESCRIPTION</Description>

after that is<BGType> tag. In this case is vaule is Panorama Background, other will be for layered and simple background.

<BGType>Panorama Background</BGType>

below is initial background tag and number of images is below. If number will be to small or to big background always will be start with first image

<InitialBackground>2</InitialBackground>

Tag <Image>PATH_FOR_IMAGE</Image> one per one image.

<Image>resources/Backgrounds/stanford/stanford-0.jpg</Image>-image number 0
<Image>resources/Backgrounds/stanford/stanford-1.jpg</Image>-image number 1
<Image>resources/Backgrounds/stanford/stanford-2.jpg</Image>-image number 2
<Image>resources/Backgrounds/stanford/stanford-3.jpg</Image>-image number 3

example redy config file for panorama background

<Background>
   <Name>Stanford</Name>
   <Thumbnail>resources/Backgrounds/Stanford/stanford-thumb.jpg</Thumbnail> 

   <Author>Hideya</Author>
   <Date>11-03-2005</Date>
   <Description>stanford</Description>
   <BGType>Panorama Background</BGType>
        <InitialBackground>2</InitialBackground>
           <Image>resources/Backgrounds/Stanford/Stanford-0.jpg</Image>
           <Image>resources/Backgrounds/Stanford/Stanford-1.jpg</Image>
           <Image>resources/Backgrounds/Stanford/Stanford-2.jpg</Image>
           <Image>resources/Backgrounds/Stanford/Stanford-3.jpg</Image>
</Background>

2.How create Layered Background

Layered Background. Few images (2+) which are placed one on second and creates 3D visual effect. Every single image creata a layer like in graphical programs (Gimp, Photoshop etc.). First layer is farest and next are closer the user. When cursor is moving the layers also are moving and create cool effect.

2.1 Making images for Layered background
In this type of background first time we use transparency of images. Tested format with transparency is PNG (Portable Network Graphics) and that format should be used. When transparency isn't needed You should use JPEG format. Like in steps 1.1 and 3.1 we need to create squerd images, but not neccesery, can be example (256x512 pixles ) like in GrandCanyon^? background. Good solution is making all layers images in the same size. Like in bacground bellow.

layer 0 (farest) layer 1 layer 2

layer 3

Lyere 0 is JPEG format because don't need transparet color, other layers is in PNG. Location of objects will be the same in background like on the layers images.


This You can see in moon Background from BgManager^? app.


2.3 Writing Config.XML for Layered background.

Config.XML is background descriptor for BgManager^? application. Construction of this file is very intuitive. This file is build with two major block. In first block is the same for all types of backgrounds end include many metadata. First tag is <Background> after that are metadata

- Name,name of background
- Thumbnail , path to thumbnail image
- Author , author name
- Date
- Description,info, copyright, etc.

   <Name>BACKGROUND NAME</Name>
   <Thumbnail>resources/Backgrounds/stanford/stanford-thumb.jpg</Thumbnail>
   <Author>AUTHOR</Author> 
   <Date>Date</Date>
   <Description>DESCRIPTION</Description>

after that is<BGType> tag. In this case is vaule is Layered Background, other will be for simple and panorama background.

<BGType>Layerd Background</BGType>

for any sigle layer after</BGType> are tags for configuration this layers and start by tag <Layer> and end </Layer> between this tags are:
<Image>PATH_TO_LAYER_IMAGE</Image> - path to layer image file

<SizeHintY>1</SizeHintY> -This argument change size of layer in Y axis for 1 the layer size is the same like screen size.This argument is convener to Java Folat type

<TranslationHintY>0</TranslationHintY> This argument change taranslation in Y axis.

<TranslationZ>1</TranslationZ> Scale animation when You do something like open application or close etc.

full example config file for layered background:

<Background>
   <Name>Moon</Name>
   <Thumbnail>resources/Backgrounds/Moon/thumb.jpg</Thumbnail>
   <Author>Radek <Kierner</Author>
   <Date>11-03-2005</Date>
   <Description>Earth,Moon and IIS </Description>
<BGType>Layered Background</BGType>
   <Layer>
    <Image>resources/Backgrounds/Moon/0.png</Image>
 <SizeHintY>1</SizeHintY>
    <TranslationHintY>0</TranslationHintY>
    <TranslationZ>1</TranslationZ>
  </Layer>
  <Layer>
    <Image>resources/Backgrounds/Moon/1.png</Image>
    <SizeHintY>1</SizeHintY>
    <TranslationHintY>0</TranslationHintY>
    <TranslationZ>1</TranslationZ>
  </Layer>
  <Layer>
    <Image>resources/Backgrounds/Moon/2.png</Image>
    <SizeHintY>1</SizeHintY>
    <TranslationHintY>0</TranslationHintY>
    <TranslationZ>1</TranslationZ>>
  </Layer>
  <Layer>
   <Image>resources/Backgrounds/Moon/3.png</Image>
   <SizeHintY>1</SizeHintY>
   <TranslationHintY>0</TranslationHintY>
   <TranslationZ>1</TranslationZ> 
  </Layer>
</Background>

3 How create Image background.

Image background is simply image, more about making imges is in step 1.1. Your Image size should be is 4 (width) x3 (height) proportion. Most wallpapers are in this proportion (640x480, 800x600, 1024x768, 1200x1024 etc). Youn need only stretched it to 256x256, 512x512 or 1024x1024.

3.1 Writing Config.XML for image background

Config.XML is background descriptor for BgManager^? application. Construction of this file is very intuitive. This file is build with two major block. In first block is the same for all types of backgrounds end include many metadata. First tag is <Background> after that are metadata

- Name,name of background
- Thumbnail , path to thumbnail image
- Author , author name
- Date
- Description,info, copyright, etc.

   <Name>BACKGROUND NAME</Name>
   <Thumbnail>resources/Backgrounds/stanford/stanford-thumb.jpg</Thumbnail>
   <Author>AUTHOR</Author> 
   <Date>Date</Date>
   <Description>DESCRIPTION</Description>

after that is<BGType> tag. In this case is vaule is Simple Background, other will be for layered and panorama background.

<BGType>Simple Background</BGType>

after that is only one image like below <Image>PATH_FOR_IMAGE</Image> and ending tag </Background>
Example redy config file for panorama background:

<Background>
   <Name>Stanford</Name>
   <Thumbnail>resources/Backgrounds/Stanford/stanford-thumb.jpg</Thumbnail> 

   <Author>Author</Author>
   <Date>11-03-2005</Date>
   <Description>stanford</Description>
   <BGType>Simple Background</BGType>
        <InitialBackground>2</InitialBackground>
           <Image>resources/Backgrounds/Stanford/Stanford.jpg</Image>

</Background>

4 Placing Background folder in proper place.

When images and and config file are ready You can copy background folder to property location.
If You use binary realse You sholud copy background folder to lg3d-backgrounds.jar wich is in
LG3D_HOME/lib/ext folder or if You use binary realse sholud be copy background folder to
lg3d-incubator/src/classes/org/jdesktop/lg3d/apps/bgmanager/Backgrounds.

Note: When You want use other location remamber that. You must add full path to resources in config's.xml files.
example <Image>/root/lg3d/Backgrounds/stanford/stanford-3.jpg</Image>

5 Modifying bgConfig.XML.