1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
\r
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
\r
7 <title>jSpeed - Theme howto</title>
\r
8 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
9 <meta name="description" content="Make your own theme for jSpeed by following this easy howto." />
10 <meta name="keywords" content="theme,howto,themes,speedometer,jspeed,maemo" />
11 <meta name="robots" content="index, follow" />
\r
12 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
\r
13 <script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
\r
14 <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script>
\r
15 <script type="text/javascript" src="js/script.js"></script>
\r
16 <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="all" />
\r
17 <link rel="stylesheet" href="css/style.css" media="all" type="text/css" />
\r
24 <li><a href="http://jspeed.garage.maemo.org/">Info</a></li>
\r
25 <li><a href="#download">Download</a></li>
\r
26 <li><a href="http://jspeed.garage.maemo.org/documentation.html">Documentation</a></li>
\r
27 <li><a href="http://jspeed.garage.maemo.org/themes.html">Themes</a></li>
\r
28 <li class="selected"><a href="http://jspeed.garage.maemo.org/theme-howto.html">Theme howto</a></li>
\r
33 <div id="main-content">
\r
35 <h1>Theme howto</h1>
\r
37 <ul class="contents">
\r
39 <a href="#screens">Mainscreen and detailscreen tags</a>
\r
42 <a href="#tag-spec">Tag specification</a>
\r
45 <a href="#common-options">Common options</a>
\r
47 <li><a href="#effects">Effects</a></li>
\r
51 <a href="#tag-rectangle">Tag: rectangle</a>
\r
54 <a href="#tag-image">Tag: image</a>
\r
57 <a href="#tag-pointer">Tag: pointer</a>
\r
60 <a href="#tag-compass">Tag: compass</a>
\r
63 <a href="#tag-text">Tag: text</a>
\r
69 <p>jSpeed theme files (e.g. default.jspeed) are just <strong>regular zip-files</strong> renamed to .jspeed. The path for theme files is /home/user/.jspeed/themes.</p>
\r
71 <p>Each of these zip-files contains at least one file called theme.xml, which contains all the information required to draw the theme. Theme file may also contain image files and fonts required for the theme.</p>
\r
73 <p>A simple theme.xml could look like this:</p>
\r
77 <mainscreen orientation="landscape">
\r
79 <xpos>100</xpos>
\r
80 <ypos>100</ypos>
\r
81 <data>{SPEED}</data>
\r
82 <size>36</size>
\r
88 <p>This would print the current speed on screen at position (100, 100) using default font and font size 36. This kind of theme would only work in landscape mode. If one would like the get the theme to also work in portrait mode, there should be another <mainscreen> tag with orientation="portrait" and maybe different positions for speed display.</p>
\r
90 <h2 id="screens">Mainscreen and detailscreen tags</h2>
\r
92 <p>Each theme.xml must contain at least one <mainscreen> tag like in the example above. jSpeed contains also a detail screen which automatically contains specific speed, time and trip data. The font color and background of this screen can be changed similarly using <detailscreen> tag. Detail screen can also be themed differently in portrait and landscape mode, or the same specification can apply to both portrait and landscape mode by setting attribute orientation="both" on detailscreen tag.</p>
\r
94 <p>Here's the source code of jSpeed's default theme. The specific explanation of all possible tags is below.</p>
\r
98 <detailscreen orientation="both" color="#fff">
\r
100 <xpos>0</xpos>
\r
101 <ypos>0</ypos>
\r
102 <src>background.png</src>
\r
104 </detailscreen>
\r
105 <mainscreen orientation="landscape">
\r
107 <xpos>0</xpos>
\r
108 <ypos>0</ypos>
\r
109 <src>background.png</src>
\r
112 <data>000</data>
\r
113 <font>digital7.ttf</font>
\r
114 <size>320</size>
\r
115 <xpos>100</xpos>
\r
116 <ypos>75</ypos>
\r
117 <color>#17202b</color>
\r
118 <align>right</align>
\r
119 <width>600</width>
\r
122 <data>{SPEEDUNIT}</data>
\r
123 <xpos>520</xpos>
\r
124 <ypos>402</ypos>
\r
125 <font>Nokia Sans Bold</font>
\r
126 <size>24</size>
\r
127 <color>#fff</color>
\r
128 <bold>true</bold>
\r
129 <uppercase>true</uppercase>
\r
130 <effect name="dropshadow">
\r
131 <xoffset>0</xoffset>
\r
132 <yoffset>0</yoffset>
\r
133 <radius>35</radius>
\r
134 <color>#a5efff</color>
\r
138 <data>{SPEED}</data>
\r
139 <font>digital7.ttf</font>
\r
140 <size>320</size>
\r
141 <xpos>100</xpos>
\r
142 <ypos>75</ypos>
\r
143 <color>#fff</color>
\r
144 <align>right</align>
\r
145 <width>600</width>
\r
146 <format>%.0f</format>
\r
147 <effect name="dropshadow">
\r
148 <xoffset>0</xoffset>
\r
149 <yoffset>0</yoffset>
\r
150 <radius>35</radius>
\r
151 <color>#a5efff</color>
\r
154 </mainscreen>
\r
155 <mainscreen orientation="portrait">
\r
157 <xpos>0</xpos>
\r
158 <ypos>0</ypos>
\r
159 <src>background.png</src>
\r
162 <data>000</data>
\r
163 <font>digital7.ttf</font>
\r
164 <size>250</size>
\r
165 <xpos>0</xpos>
\r
166 <ypos>260</ypos>
\r
167 <color>#17202b</color>
\r
168 <align>right</align>
\r
169 <width>470</width>
\r
172 <data>{SPEEDUNIT}</data>
\r
173 <xpos>330</xpos>
\r
174 <ypos>522</ypos>
\r
175 <font>Nokia Sans Bold</font>
\r
176 <size>22</size>
\r
177 <color>#fff</color>
\r
178 <bold>true</bold>
\r
179 <uppercase>true</uppercase>
\r
180 <effect name="dropshadow">
\r
181 <xoffset>0</xoffset>
\r
182 <yoffset>0</yoffset>
\r
183 <radius>35</radius>
\r
184 <color>#a5efff</color>
\r
188 <data>{SPEED}</data>
\r
189 <font>digital7.ttf</font>
\r
190 <size>250</size>
\r
191 <xpos>0</xpos>
\r
192 <ypos>260</ypos>
\r
193 <color>#fff</color>
\r
194 <align>right</align>
\r
195 <width>470</width>
\r
196 <format>%.0f</format>
\r
197 <effect name="dropshadow">
\r
198 <xoffset>0</xoffset>
\r
199 <yoffset>0</yoffset>
\r
200 <radius>35</radius>
\r
201 <color>#a5efff</color>
\r
204 </mainscreen>
\r
208 <h2 id="tag-spec">Tag specification</h2>
\r
210 <p>As you can see on the example above, each detailscreen and mainscreen tags consists of other tags that cause something to be drawn on the screen. Each tag contains specific options to alter its look.</p>
\r
212 <h3 id="common-options">Common options</h3>
\r
214 <p>Common options that work on all tags are listed below.</p>
\r
216 <table class="spec">
\r
218 <th class="col1">Option</th>
\r
219 <th>Definition</th>
\r
220 <th class="col3">Example</th>
\r
224 <td>Defines the x-position of an element in pixels</td>
\r
225 <td><pre><xpos>80</xpos></pre></td>
\r
229 <td>Defines the y-position of an element in pixels.</td>
\r
230 <td><pre><ypos>40</xpos></pre></td>
\r
234 <td>Defines the z-index of an element. An element with bigger zpos gets painted over an element with smaller zpos.</td>
\r
235 <td><pre><zpos>5</xpos></pre></td>
\r
238 <td>visiblewhen</td>
\r
239 <td>Defines when element should be visible. Possible values are <strong>always</strong> (default), <strong>poivisible</strong> (show only when there is a poi (e.g. a speed camera) in view) and <strong>speedexceeded</strong> (show only when speed threshold is exceeded and speed alarm is enabled).</td>
\r
243 <td>Defines an effect to used with the element. See <a href="#effects">effects</a> for more details.</td>
\r
244 <td><pre><effect name="blur">
\r
245 <radius>20</radius>
\r
246 </effect></pre></td>
\r
250 <h4 id="effects">Effects</h4>
\r
252 <p>Each element can contain one effect which is used every time the element is painted or updated. <strong>Note: </strong>There are some bugs in effect redrawing in Qt especially on 24-bit png-images.</p>
\r
254 <table class="spec">
\r
256 <th class="col1">Effect name</th>
\r
257 <th>Possible options</th>
\r
258 <th class="col3">Example</th>
\r
263 <strong>radius: </strong>changes the blur radius. Bigger radius will cause the element to be blurred more.
\r
265 <td><pre><effect name="blur">
\r
266 <radius>20</radius>
\r
267 </effect></pre></td>
\r
270 <td>dropshadow</td>
\r
272 <strong>radius: </strong>changes the shadow radius. Bigger radius will cause the element to have bigger and more spread shadow.<br />
\r
273 <strong>color: </strong>sets the color of the shadow.<br />
\r
274 <strong>xoffset: </strong>shadow's x-distance from the element.<br />
\r
275 <strong>yoffset: </strong>shadow's y-distance from the element<br />
\r
278 <pre><effect name="dropshadow">
\r
279 <xoffset>0</xoffset>
\r
280 <yoffset>0</yoffset>
\r
281 <radius>35</radius>
\r
282 <color>#a5efff</color>
\r
283 </effect></pre>
\r
289 <strong>opacity: </strong>sets the opacity of an element. Value of 1.0 means totally visible and value of 0.0 totally invisible.<br />
\r
292 <pre><effect name="opacity">
\r
293 <opacity>0.8</opacity>
\r
294 </effect></pre>
\r
300 <strong>interval: </strong>sets the flickering interval of an element in milliseconds.<br />
\r
303 <pre><effect name="flicker">
\r
304 <interval>500</interval>
\r
305 </effect></pre>
\r
310 <h3 id="tag-rectangle">Tag: rectangle</h3>
\r
312 <p>Rectangle tag draws an rectangle with specified size and color on the screen. Possible options for rectangle are listed below.</p>
\r
314 <table class="spec">
\r
316 <th class="col1">Option</th>
\r
317 <th>Definition</th>
\r
318 <th class="col3">Example</th>
\r
322 <td>Defines the width of the rectangle.</td>
\r
323 <td><pre><width>600</width></pre></td>
\r
327 <td>Defines the height of the rectangle.</td>
\r
328 <td><pre><height>400</height></pre></td>
\r
332 <td>Defines color of the rectangle. Color must be in hexadecimal form.</td>
\r
333 <td><pre><color>#2e94b5</color></pre></td>
\r
341 <xpos>100</xpos>
\r
342 <ypos>100</ypos>
\r
343 <width>300</width>
\r
344 <height>200</height>
\r
345 <color>#fff</color>
\r
351 <h3 id="tag-image">Tag: image</h3>
\r
353 <p>Draws an image on specific location on the screen. The image file should be placed in the same .jspeed file as theme.xml.</p>
\r
355 <table class="spec">
\r
357 <th class="col1">Option</th>
\r
358 <th>Definition</th>
\r
359 <th class="col3">Example</th>
\r
363 <td>Image is resized to this width. If width is set to 0, it is calculated automatically from height to constrain proportions. If both width and height are set to 0 or are not set at all, the image will be painted in its original size.</td>
\r
364 <td><pre><width>600</width></pre></td>
\r
368 <td>Image is resized to this width. If height is set to 0, it is calculated automatically from width to constrain proportions.</td>
\r
369 <td><pre><height>400</height></pre></td>
\r
377 <xpos>100</xpos>
\r
378 <ypos>100</ypos>
\r
379 <width>300</width>
\r
384 <p>Another example, shows a flickering speed camera warning image when there is a speed camera in view.</p>
\r
388 <src>speedcamera.png</src>
\r
389 <xpos>15</xpos>
\r
390 <ypos>50</ypos>
\r
391 <visiblewhen>poisivible</visiblewhen>
\r
392 <effect name="flicker">
\r
393 <interval>400</interval>
\r
398 <p>Images in theme files should be saved in 256 colors because the dithering in Qt/Maemo is not very good. You can do that in example in <a href="http://www.irfanview.com/">IrfanView</a> by selecting Image -> Decrease color depth. Just make sure that "Use Floyd-Steinberg dithering" is selected. Although 256 colors may not sound much, it is enough for most of the images. Here's the difference between gradient at 16.7 million colors and 256 colors on the N900's screen:</p>
\r
400 <div class="imageinfo">
\r
401 <img src="img/16M.png" alt="16.7 Million colors" />
\r
402 <p>16.7 million colors</p>
\r
405 <div class="imageinfo">
\r
406 <img src="img/256.png" alt="256 colors" />
\r
412 <h3 id="tag-pointer" class="clear">Tag: pointer</h3>
\r
414 <p>Draws a pointer which moves according to current speed. Can be used to draw analog speedometers. The image file should be placed in the same .jspeed file as theme.xml. The xpos and ypos of a pointer are specified as the rotation point of the pointer on screen (usually somewhere in the middle of the screen).</p>
\r
416 <table class="spec">
\r
418 <th class="col1">Option</th>
\r
419 <th>Definition</th>
\r
420 <th class="col3">Example</th>
\r
424 <td>The image file used to draw the pointer.</td>
\r
425 <td><pre><src>pointer.png</src></pre></td>
\r
429 <td>The minimum speed in km/h of a pointer (usually 0).</td>
\r
430 <td><pre><zerospeed>0</zerospeed></pre></td>
\r
434 <td>The maximum speed of a pointer in km/h. (usually the maximum speed value in analog speedometer).</td>
\r
435 <td><pre><fullspeed>220</fullspeed></pre></td>
\r
439 <td>When speed is at zerospeed or lower, the pointer is rotated this much in degress from its original state.</td>
\r
440 <td><pre><zeroangle>-30</zeroangle></pre></td>
\r
444 <td>When speed is at fullspeed or higher, the pointer is rotated this much in degress from its original state.</td>
\r
445 <td><pre><fullangle>210</fullangle></pre></td>
\r
448 <td>xrotationpoint</td>
\r
449 <td>The pointer rotates around the point defined with xrotationpoint and yrotationpoint. It is usually located inside the pointer image.</td>
\r
450 <td><pre><xrotationpoint>200</xrotationpoint></pre></td>
\r
453 <td>yrotationpoint</td>
\r
454 <td>The pointer rotates around the point defined with xrotationpoint and yrotationpoint. It is usually located inside the pointer image.</td>
\r
455 <td><pre><yrotationpoint>12</yrotationpoint></pre></td>
\r
463 <src>pointer.png</src>
\r
464 <zeroangle>-20</zeroangle>
\r
465 <fullangle>210</fullangle>
\r
466 <zerospeed>0</zerospeed>
\r
467 <fullspeed>230</fullspeed>
\r
468 <xpos>400</xpos>
\r
469 <ypos>355</ypos>
\r
470 <xrotationpoint>278</xrotationpoint>
\r
471 <yrotationpoint>14</yrotationpoint>
\r
477 <h3 id="tag-compass">Tag: compass</h3>
\r
479 <p>Draws a compass which is always rotated so that the top of the compass image points to north. The xpos and ypos of a pointer are specified as the rotation point of the compass on screen (usually somewhere in the middle of the screen).</p>
\r
481 <table class="spec">
\r
483 <th class="col1">Option</th>
\r
484 <th>Definition</th>
\r
485 <th class="col3">Example</th>
\r
489 <td>The image file used to draw the compass.</td>
\r
490 <td><pre><src>pointer.png</src></pre></td>
\r
493 <td>xrotationpoint</td>
\r
494 <td>The compass rotates around the point defined with xrotationpoint and yrotationpoint. It is usually located inside the compass image.</td>
\r
495 <td><pre><xrotationpoint>200</xrotationpoint></pre></td>
\r
498 <td>yrotationpoint</td>
\r
499 <td>The compass rotates around the point defined with xrotationpoint and yrotationpoint. It is usually located inside the compass image.</td>
\r
500 <td><pre><yrotationpoint>12</yrotationpoint></pre></td>
\r
508 <src>pointer.png</src>
\r
509 <xpos>400</xpos>
\r
510 <ypos>320</ypos>
\r
511 <xrotationpoint>100</xrotationpoint>
\r
512 <yrotationpoint>100</yrotationpoint>
\r
518 <h3 id="tag-text">Tag: text</h3>
\r
520 <p>Draws a text block on the screen.</p>
\r
522 <table class="spec">
\r
524 <th class="col1">Option</th>
\r
525 <th>Definition</th>
\r
526 <th class="col3">Example</th>
\r
530 <td>The actual textual data. Can be a plain text (e.g. "Speed:") or a special field (e.g. "{SPEED}"). Special fields are automatically updated to contain their value in unit which is specified in settings. Possible special fiels are listed below:<br/>
\r
531 <strong>{TRIP}: </strong>Trip value.<br />
\r
532 <strong>{TOTAL}: </strong>Total travelled kilometers or miles.<br />
\r
533 <strong>{SPEED}: </strong>Current speed.<br />
\r
534 <strong>{MAXSPEED}: </strong>Maximum speed.<br />
\r
535 <strong>{AVGSPEED}: </strong>Average speed.<br />
\r
536 <strong>{UNIT}: </strong>Distance unit (km or mi).<br />
\r
537 <strong>{SPEEDUNIT}: </strong>Speed unit (km/h or mph).<br />
\r
538 <strong>{TIME}: </strong>Current time, formatted according to timeformat tag.<br />
\r
539 <strong>{DATE}: </strong>Current date, formatted according to dateformat tag.<br/>
\r
540 <strong>{POIDISTANCE}: </strong>Distance to the nearest poi (e.g. speed camera). Empty if there is no poi in view<br />
\r
541 <strong>{ANGLE}: </strong>Angle of current direction in degrees. 0 means north.<br />
\r
542 <strong>{LATITUDE}: </strong>Current latitude.<br />
\r
543 <strong>{LONGITUDE}: </strong>Current longitude.<br />
\r
545 <td><pre><data>{SPEED}</data></pre></td>
\r
549 <td>Special fields trip, total, speed, maxspeed, avgspeed, poidistance, angle, latitude and longitude will be printed according to this format. This field should be in <a href="http://en.wikipedia.org/wiki/Printf">prinf</a> format.</td>
\r
550 <td><pre><format>%.1f</format></pre></td>
\r
554 <td>The width of the text block.</td>
\r
555 <td><pre><width>200</width></pre></td>
\r
559 <td>Text align inside the text block (left, center or right).</td>
\r
560 <td><pre><align>right</align></pre></td>
\r
564 <td>Text color in hexadecimal form.</td>
\r
565 <td><pre><color>#000000</color></pre></td>
\r
569 <td>Text size in pixels.</td>
\r
570 <td><pre><size>20</size></pre></td>
\r
574 <td>Text font. Can be a font file inside the theme file (e.g. "somefont.ttf") or a name of a font intalled in system (e.g. "Tahoma").</td>
\r
575 <td><pre><font>arial.ttf</font></pre></td>
\r
579 <td>Sets <strong>bold</strong> text.</td>
\r
580 <td><pre><bold>true</bold></pre></td>
\r
584 <td>Sets <em>italic</em> text.</td>
\r
585 <td><pre><italic>true</italic></pre></td>
\r
589 <td>Prints all letters in UPPERCASE.</td>
\r
590 <td><pre><uppercase>true</uppercase></pre></td>
\r
593 <td>letterspacing</td>
\r
594 <td>Sets the spacing between letters.</td>
\r
595 <td><pre><letterspacing>150</letterspacing></pre></td>
\r
598 <td>timeformat</td>
\r
599 <td>Special field time will be printed according to this format. See <a href="http://doc.qt.nokia.com/4.6/qtime.html#toString">Qt QTime manual</a> for possible expressions.</td>
\r
600 <td><pre><timeformat>hh:mm</timeformat></pre></td>
\r
603 <td>dateformat</td>
\r
604 <td>Special field date will be printed according to this format. See <a href="http://doc.qt.nokia.com/4.6/qdate.html#toString">Qt QDate manual</a> for possible expressions.</td>
\r
605 <td><pre><dateformat>dd.MM.yyyy</dateformat></pre></td>
\r
613 <data>{SPEED}</data>
\r
614 <font>digital7.ttf</font>
\r
615 <size>320</size>
\r
616 <xpos>100</xpos>
\r
617 <ypos>75</ypos>
\r
618 <color>#fff</color>
\r
619 <align>right</align>
\r
620 <width>600</width>
\r
621 <format>%.0f</format>
\r
622 <effect name="dropshadow">
\r
623 <xoffset>0</xoffset>
\r
624 <yoffset>0</yoffset>
\r
625 <radius>35</radius>
\r
626 <color>#a5efff</color>
\r
632 <br class="clear" />
\r
640 <div id="bottom-content">
\r
642 <div class="bottom-box">
\r
644 <h3 id="download">Download</h3>
\r
646 <p>jSpeed can be downloaded from Maemo extras-devel repository.</p>
\r
650 <div class="bottom-box">
\r
654 <p>jSpeed is licensed under the terms of the <a href="http://www.gnu.org/licenses/gpl.txt">GNU General Public License</a>.</p>
\r
658 <div class="bottom-box">
\r
663 <li><a href="https://garage.maemo.org/projects/jspeed/">Project page</a></li>
\r
664 <li><a href="http://maemo.org/packages/view/jspeed/">Package overview and changelog</a></li>
\r
665 <li><a href="https://garage.maemo.org/tracker/?atid=6134&group_id=1756&func=browse">Bug tracker</a></li>
\r
670 <div id="copyright">
\r
671 Copyright © 2010 Jesse Hakanen | <a href="mailto:jessehakanen@gmail.com">Contact</a>
\r
projects / jspeed / blob