Not all functionality described below is supported by the Swing client. E.g. the outline color does only work in the phone

I will add a clock type later on, it will have properties for analogue/digital, position and size. You can place a background image behind it, and specify font colors if the clock is digital.

The layout in the Swing editor is displaying mdpi, and positions, sizes (even font size) will be scaled if the user is using an hdpi device. It's therefore advisable to use custom images that are larger than the mdpi size.

Properties that are mandatory in all types:

Property Type Valid values Description/Comment
type string image|text The type of the element that should be rendered.
content string Specifies what content that should be rendered, see each type for valid values.
x double Specifies the x-coordinate of the upper left corner of the area that should be rendered.
y double Specifies the y-coordinate of the upper left corner of the area that should be rendered.
w double Specifies the width of the area that should be rendered.
h double Specifies the height of the area that should be rendered.

Properties that are specific to the image type:

Property Type Valid values Description/Comment
content string icon|file icon[index] specifies that the icon that is associated with forecast[index] should be drawn. icon[0] means the icon for the first entry, icon[5] the 6th entry. file means that a custom image should be rendered. The name of the file should be specified in the filename property.
filename string mandatory if content=file, should specify the filename of the image to render.

Properties that are specific to the text type:

Property Type Valid values Description/Comment
content string time|location|temp|forecast time[0] specifies that the time of the 1st forecast should be drawn, temp[0] means temperature of 1st entry, location[0] means the location that the forecast is valid for (e.g. Stockholm). A forecast does only have one location. forecast[0] is the forecast text for the first entry.
format string short|medium|long The format of the text that should be drawn, e.g. short for forecast is “sunny” while long can be “Partly cloudy. 3m/s, gentle breeze from west-northwest. 0mm precipitation. 998hPa air pressure.” Short time is “mon 18:00” long time is “Tue, 21st of June, 18:00”. format=short is default
gravity string top|left|right|bottom|center_horizontal|center_vertical|center Specifies where the text should be drawn if it is shorter than the bounding box (width/height)Several values can be specified. E.g. gravity=top|left, means that the text should be rendered in the upper left corner of the bounding box. gravity=top|left is default
lines string single|multiple|1|* Single or 1 means that the text should be rendered on one line, the text will be truncated if the the text is longer than width. multiple or * means that the text should wrap if it is longer than width. lines=1 is default.
size double Specifies the font size in pixels. size=14 is default.
style string normal|bold|italic Specifies the font style. Several can be specified. style=bold|italic means both bold and italic. style=normal is default.
color int The font color, should be specified in hex, and in the format of AARRGGBB, e.g ff000000 is black. color=ffffffff (white) is default.
color2 int The outline color of the font, should be specified in hex, and in the format of AARRGGBB, e.g ff000000 is black. color2=ff000000 (black) is default.


The format of the layout-file. The file is a text file and should contain 3 sections, info, portrait and landscape. A section is identified by section-name={}, so an empty text file should look like this:

info={
}

portrait={
}

landscape={
}

The info block contains information regarding the layout and author. Example:

info={
	name=first;
	credit=Kaj Bjurman,\nSnowstorm Layout example;
	supports=4x2;
}

The block above specifies that the name of the layout is “first”, credit/description is “Kaj Bjurman,\nSnowstorm Layout example” where \n represents newline. The layout is made for widget with size 4×2 cells (a cells is about 80 pixels wide, and 100 pixels in height)

The portrait block should contain the layout for the widget in portrait mode. A simple example is.

portrait={
	type=image;
	content=file;
	filename=background.png; 
	x=0; 
	y=0; 
	w=318;
	h=198;
,
	type=image;
	content=icon[0];    
	x=6; 
	y=6; 
	w=96;
	h=96;
,
	type=text;
	content=location[0];
	x=106; 
	y=6; 
	w=155;
	h=16; 
	style=bold;     
	size=12; 
	color=ffeeeeee; 
	color2=ff000000;
}

The block above draws a custom image as background, then places the icon associated with the first forecast in the upper left corner, on top of the background. The location text is then drawn in bold. The font color is light gray, with a black outline.

An element that should be rendered does always end with ',', but it's optional for the final element. A property is in the format of property-name=value and is terminated with ';'. Spaces are optional, so the layout above could also have been written as:

portrait={
type=image;content=file;filename=background.png;x=0;y=0;w=318;h=198;,
type=image;content=icon[0];x=6;y=6;w=96;h=96;,
type=text;content=location[0];x=106;y=6;w=155;h=16;style=bold;size=12;color=ffeeeeee;color2=ff000000;
}

Properties can be specified in any order.


snowstorm/layout.txt · Last modified: 2011/06/21 03:44 by kaj