Always here?

From Pointui

Contents

Design your applet

You probably know what you want to see on your screen. Many good ideas whithout knowing how to proceed... A simple sketch on a sheet a paper is a good way to formalize it. Even if you're not yet an expert who can do everything with Home and scripting, let's express your imagination and creation whith your usual tools: pen and paper. This draft will guide you during all the applet building process. You will identify all elements it should contains, define their positions and sizes in the frame and eventually the effects that should be apply. Once done, you will plan the work in different sequences so that the job will be done surely and progressively. This is a basic but good approach.

Here is a purpose for your applet.

[image]

As you can see, it contains three elements:

  1. A title, 'Home Sweet Home' which is placed on the top left of the frame
  2. On the middle, an image which is centered
  3. A caption 'This is my home' placed just under the picture

All you have to do is to translate each element in the script. You are going to do this, step by step. Between each step, you will test your applet to see if the visual rendering in Home is conform to your goal and if so, validate it and go to the next step.


Code your applet

Step 1: adding the title

  • On your PC, open the notepad to edit your script file 'HomeSweetHome.cs'
  • Just under the '{' , add a line to declare the title as a text, which is a data Label type: 
class HomeSweetHomeApplet : Applet
{
	// Title declaration
	Label lblTitle;
}
  • Note:
    • you've added a comment line (with the two '//') before the declaration line. Even if you know what your are writing, it's very important to comment your code, for future maintenance by instance. And don't forget that if someone else reads your code, he will have less problem to understand it with your clear comments... This should become an habit!
    • there is a ';' after the code line. This character is very important, never forget it!
    • The text indentation is not imperative but it allows an easier reading.
    • the term lblTitle used to declare your title text is free. Try to choose an appropriate term, to have no doubt when using it later in the code.
  • Add the Load method to prepare the screen content: 
class HomeSweetHomeApplet : Applet
{
	// Title declaration
	Label lblTitle;
 
	// Preparing the content of the screen 
	void Load()
	{
	}
}
  • Note:
    • void is here to indicates that it's a method

the two '()' significate that the Load method doesn't need any parameters

  • Configure the title: 
class HomeSweetHomeApplet : Applet
{
	// Title declaration
	Label lblTitle;
 
	// Preparing the content of the screen 
	void Load()
	{
		// Big font size
		lblTitle.SetFont("Font.Title");
		// Text value
		lblTitle.SetText("Home Sweet Home");
	}
}
  • Add the Activated method to display the title on the screen: 
class HomeSweetHomeApplet : Applet
{
	// Title declaration
	Label lblTitle;
 
	// Preparing the content of the screen 
	void Load()
	{
		// Big font size
		lblTitle.SetFont("Font.Title");
		// Text value
		lblTitle.SetText("Home Sweet Home");
	}
	void Activated()
	{
		// First, clear the screen 
		Controls.Clear();
 
		// Add title on the screen
		Controls.Add(lblTitle);
 
		// Place the title on the top left 
		// without changing its width and height
		lblTitle.SetBounds(0,0,GetWidth(),GetHeight());
	}
}

Note:

    • GetWidth() and GetHeight() methods are used to directly get the right size of the frame necessited to display the text.
  • Save your script.

Step 2: adding the image

  • Choose a nice picture of your house (jpg format is required) and named it 'MyHouse.jpg'.
  • Drag and drop this picture from your PC to your device, always in the same applet folder \Program Files\Home2\AppletRibbon\HomeSweetHome
  • Go back to your script file 'HomeSweetHome.cs' on the notepad.
  • Add the image declaration and loading: 
class HomeSweetHomeApplet : Applet
{
	// Title declaration
	Label lblTitle;
 
	//Image declaration
	Image imgMyHouse;
 
	// Preparing the content of the screen 
	void Load()
	{
		// Big font size
		lblTitle.SetFont("Font.Title");
		// Text value
		lblTitle.SetText("Home Sweet Home");
 
		// Load of the house picture according to the resolution
		if (Device.IsVGA())
		{
	   	imgMyHouse.Surface.LoadFromFile("MyHouse.jpg",280,180);
		}
		else
		{
	   	imgMyHouse.Surface.LoadFromFile("MyHouse.jpg",140,90);
		}
	}
	void Activated()
	{
		// First, clear the screen 
		Controls.Clear();
 
		// Add title on the screen
		Controls.Add(lblTitle);
 
		// Place the title on the top left 
		// without changing its width and height
		lblTitle.SetBounds(0,0,GetWidth(),GetHeight())
	}
}
  • Note:
    • The 'if' condition is used to resized the picture. In our example, it's not a proportional resizing. If the picture is bigger than these values, it will be cut.
  • Add the image display: 
class HomeSweetHomeApplet : Applet
{
	// Title declaration
	Label lblTitle;
 
	//Image declaration
	Image imgMyHouse;
 
	// Preparing the content of the screen 
	void Load()
	{
		// Big font size
		lblTitle.SetFont("Font.Title");
		// Text value
		lblTitle.SetText("Home Sweet Home");
 
		// Load of the house picture according to the resolution
		if (Device.IsVGA())
		{
		   imgMyHouse.Surface.LoadFromFile("MyHouse.jpg",280,180);
		}
		else
		{
		   imgMyHouse.Surface.LoadFromFile("MyHouse.jpg",140,90);
		}
	}
	void Activated()
	{
		// First, clear the screen 
		Controls.Clear();
 
		// Add title on the screen
		Controls.Add(lblTitle);
 
		// Place the title on the top left 
		// without changing its width and height
		lblTitle.SetBounds(0,0,GetWidth(),GetHeight())
 
		// Add image on the screen
		Controls.Add(imgMyHouse);
 
		// Place the image centered according to the resolution
		if (Device.IsVGA())
		{
	   		imgMyHouse.SetBounds(100,50);
		}
		else
		{
	   	imgMyHouse.SetBounds(50,25);
		}
	}
}


[image]

Great!

You can now see your home on your screen.

Step 3: adding the caption

  • Go back to your script file 'HomeSweetHome.cs' on the notepad.
  • Add the caption declaration, loading and display in the code: 
class HomeSweetHomeApplet : Applet
{
// Title declaration
Label lblTitle;
 
//Image declaration
Image imgMyHouse;
 
// Caption declaration
Label lblCaption;
 
// Preparing the content of the screen 
void Load()
{
	// Big font size
	lblTitle.SetFont("Font.Title");
	// Text value
	lblTitle.SetText("Home Sweet Home");
 
	// Load of the house picture according to the resolution
	if (Device.IsVGA())
	{
	   imgMyHouse.Surface.LoadFromFile("MyHouse.jpg",280,180);
	}
	else
	{
	   imgMyHouse.Surface.LoadFromFile("MyHouse.jpg",140,90);
	}
 
	// Little font size for the caption
	lblCaption.SetFont("Font.Small");
	// Text value for the caption
	lblCaption.SetText("This is my house!");
	// Label must be centered
	lblCaption.SetAlign("Center","Top");
}
 
void Activated()
{
	// First, clear the screen 
	Controls.Clear();
 
	// Add title on the screen
	Controls.Add(lblTitle);
 
	// Place the title on the top left 
	// without changing its width and height
	lblTitle.SetBounds(0,0,GetWidth(),GetHeight());
 
	// Add image on the screen
	Controls.Add(imgMyHouse);
 
	// Place the image centered according to the resolution
	if (Device.IsVGA())
	{
	   imgMyHouse.SetBounds(100,50);
	}
	else
	{
	   imgMyHouse.SetBounds(50,25);
	}
 
	// Add caption on the screen
	Controls.Add(lblCaption);
 
	// Place the caption under the picture, centered
	if  (Device.IsVGA())
	{
		lblCaption.SetBounds(0,240,GetWidth(),GetHeight());
	}
	else
	{
		lblCaption.SetBounds(0,145,GetWidth(),GetHeight());
	}
}
}

[image]

Wow, You've done it! Now you can say: Home is my Home!

Conclusion

Retrieved from "http://docs.pointui.com/Always_here%3F"