\r
<head>\r
\r
-<title>jSpeed - Highly customizable speedometer application</title>\r
-<meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
+<title>jSpeed - Theme howto</title>\r
+<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+<meta name="description" content="Make your own theme for jSpeed by following this easy howto." />
+<meta name="keywords" content="theme,howto,themes,speedometer,jspeed,maemo" />
+<meta name="robots" content="index, follow" />\r
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>\r
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.2.pack.js"></script>\r
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script>\r
<ul id="mainmenu">\r
<li><a href="http://jspeed.garage.maemo.org/">Info</a></li>\r
<li><a href="#download">Download</a></li>\r
+ <li><a href="http://jspeed.garage.maemo.org/documentation.html">Documentation</a></li>\r
<li><a href="http://jspeed.garage.maemo.org/themes.html">Themes</a></li>\r
<li class="selected"><a href="http://jspeed.garage.maemo.org/theme-howto.html">Theme howto</a></li>\r
</ul>\r
<a href="#tag-pointer">Tag: pointer</a>\r
</li>\r
<li>\r
+ <a href="#tag-compass">Tag: compass</a>\r
+ </li>\r
+ <li>\r
<a href="#tag-text">Tag: text</a>\r
</li>\r
</ul>\r
\r
<p>jSpeed theme files (ie. default.jspeed) are just <strong>regular zip-files</strong> renamed to .jspeed. The path for theme files is /home/user/.jspeed/themes.</p>\r
\r
-<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. A simple theme.xml could look like this:</p>\r
+<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
+\r
+<p>A simple theme.xml could look like this:</p>\r
\r
<pre class="code">\r
<theme>\r
<td>Defines the z-index of an element. An element with bigger zpos gets painted over an element with smaller zpos.</td>\r
<td><pre><zpos>5</xpos></pre></td>\r
</tr>\r
+<tr>\r
+ <td>visiblewhen</td>\r
+ <td>Defines when element should be visible. Possible values are <strong>always</strong> (default), <strong>poivisible</strong> (show only when there is a poi (ie. speed camera) in view) and <strong>speedexceeded</strong> (show only when speed threshold is exceeded and speed alarm is enabled).</td>\r
+</tr>\r
<tr class="color">\r
<td>effect</td>\r
<td>Defines an effect to used with the element. See <a href="#effects">effects</a> for more details.</td>\r
\r
<h4 id="effects">Effects</h4>\r
\r
-<p>Each element can contain one effect which is used every time the element is painted or updated.</p>\r
+<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
\r
<table class="spec">\r
<tr class="color">\r
<yoffset>0</yoffset>\r
<radius>35</radius>\r
<color>#a5efff</color>\r
-</effect>\r
- </pre>\r
+</effect></pre>\r
</td>\r
</tr>\r
<tr>\r
</effect></pre>\r
</td>\r
</tr>\r
+<tr>\r
+ <td>flicker</td>\r
+ <td>\r
+ <strong>interval: </strong>sets the flickering interval of an element in milliseconds.<br />\r
+ </td>\r
+ <td>\r
+ <pre><effect name="flicker">\r
+ <interval>500</interval>\r
+</effect></pre>\r
+ </td>\r
+</tr>\r
</table>\r
\r
<h3 id="tag-rectangle">Tag: rectangle</h3>\r
</pre>\r
\r
\r
+<p>Another example, shows a flickering speed camera warning image when there is a speed camera in view.</p>\r
+\r
+<pre class="code">\r
+<image>\r
+ <src>speedcamera.png</src>\r
+ <xpos>15</xpos>\r
+ <ypos>50</ypos>\r
+ <visiblewhen>poisivible</visiblewhen>\r
+ <effect name="flicker">\r
+ <interval>400</interval>\r
+ </effect>\r
+</image>\r
+</pre>\r
+\r
+<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
+\r
+<div class="imageinfo">\r
+<img src="img/16M.png" alt="16.7 Million colors" />\r
+<p>16.7 million colors</p>\r
+</div>\r
+\r
+<div class="imageinfo">\r
+<img src="img/256.png" alt="256 colors" />\r
+<p>256 colors</p>\r
+</div>\r
+\r
\r
\r
-<h3 id="tag-pointer">Tag: pointer</h3>\r
+<h3 id="tag-pointer" class="clear">Tag: pointer</h3>\r
\r
<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
\r
\r
\r
\r
+<h3 id="tag-compass">Tag: compass</h3>\r
+\r
+<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
+\r
+<table class="spec">\r
+<tr class="color">\r
+ <th class="col1">Option</th>\r
+ <th>Definition</th>\r
+ <th class="col3">Example</th>\r
+</tr>\r
+<tr>\r
+ <td>src</td>\r
+ <td>The image file used to draw the compass.</td>\r
+ <td><pre><src>pointer.png</src></pre></td>\r
+</tr>\r
+<tr class="color">\r
+ <td>xrotationpoint</td>\r
+ <td>The compass rotates around the point defined with xrotationpoint and yrotationpoint. It is usually located inside the compass image.</td>\r
+ <td><pre><xrotationpoint>200</xrotationpoint></pre></td>\r
+</tr>\r
+<tr>\r
+ <td>yrotationpoint</td>\r
+ <td>The compass rotates around the point defined with xrotationpoint and yrotationpoint. It is usually located inside the compass image.</td>\r
+ <td><pre><yrotationpoint>12</yrotationpoint></pre></td>\r
+</tr>\r
+</table>\r
+\r
+<p>Example:</p>\r
+\r
+<pre class="code">\r
+<compass>\r
+ <src>pointer.png</src>\r
+ <xpos>400</xpos>\r
+ <ypos>320</ypos>\r
+ <xrotationpoint>100</xrotationpoint>\r
+ <yrotationpoint>100</yrotationpoint>\r
+</compass>\r
+</pre>\r
+\r
+\r
+\r
<h3 id="tag-text">Tag: text</h3>\r
\r
<p>Draws a text block on the screen.</p>\r
<strong>{SPEEDUNIT}: </strong>Speed unit (km/h or mph).<br />\r
<strong>{TIME}: </strong>Current time, formatted according to timeformat tag.<br />\r
<strong>{DATE}: </strong>Current date, formatted according to dateformat tag.<br/>\r
+ <strong>{POIDISTANCE}: </strong>Distance to the nearest poi (ie. speed camera). Empty if there is no poi in view<br />\r
+ <strong>{ANGLE}: </strong>Angle of current direction in degrees. 0 means north.<br />\r
+ <strong>{LATITUDE}: </strong>Current latitude.<br />\r
+ <strong>{LONGITUDE}: </strong>Current longitude.<br />\r
</td>\r
<td><pre><data>{SPEED}</data></pre></td>\r
</tr>\r
<tr class="color">\r
<td>format</td>\r
- <td>Special fields trip, total, speed, maxspeed and avgspeed 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
+ <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
<td><pre><format>%.1f</format></pre></td>\r
</tr>\r
<tr>\r
\r
</body>\r
\r
-</html>
\ No newline at end of file
+</html>
projects / jspeed / blobdiff