For example if you take the next alarm date #SAD…# you can write #SADRd’days,’ Rh’h’ Rm’m'# to show “2 days, 2h 3m”. But what if i do not want to show the days but i still want to know if date will be past the 24 hours? Well, you can then use “T” which shows total amount, so #SADTh# will show you how many hours till next alarm even if there are more than 24, so if you have an alarm in 3 days it will show 72 hours, same for minutes. This feature applies to all date field, so the old “calendar remaining time” (#C0R…#) and “alarm time left” (#SAL…#) are now obsolete (but still working).

From 2.22 as said you can also use this on fixed dates, so, some examples:

• Time to midnight: #D0000Rhh’h ‘Rmm’m'# will render “2h 03m” at 09.57pm
• Time to new year #D01010000Rd’ days ‘Rhh’h ‘Rmm’m'# now renders “241 days 12h 07m”

Off course you can also use this in progress bars for example if you want to have, don’t know, a progress bar which shows how much time is left till your birthday or whatever.

Enjoy!

• ‘=’ & ‘!=’ for identity, supports both Strings and numbers
• ‘<’ (less then), ‘>’ (greater then),  ‘<=’ (less then or equal), ‘>=’ (greater than or equal)  for numbers only

The format of the test pattern is:

$ LEFT OPERAND RIGHT [? THENTEXT [: ELSETEXT]] $

The then and else parts are optional, if the then is not present then the LEFT will be rendered if condition is met, if else instead is not there an empty string will be chosen when condition is false. So:

• $#BLEVN#>10?Good!:Look for a charger!$

   will render “Good!” if battery level is greater than 10 or “Look for a charger!” otherwise

• $#C0SHH:mm#!=00:00$

  will render the starting HH:mm of first calendar event only if it is different than “00:00″

• Is it August $#DM#=8?Yes:No$

    will render “Is it August: Yes” during August, “Is it August: No” otherwise

• $#BLEVN#<10?Battery is low!$

    will render “Battery is low!” only if battery is <10, nothing otherwise.

• $#LCN#!=Germany$

    will render the Country name only if its not Germany (nothing otherwise)

• $#C0D#=1?#C0Shh\:mm#$

  will show the time of first calendar event start in 12 h format only if the entry is not an all day event (please remember to escape the “:” into “\:” otherwise it will be considered an “else” block!)

Got it? Feel the power? Ok, now we can even combine this to the RichText awesome parameters, so, for example [z=$#BLEVN#>10?00FF00:FF0000]#BLEV#[/c]  will render a green (00FF00) battery percentage if battery is over 10% otherwise battery will be red. Cool eh? And you can even use Tasker variables in here, and also ZW variables generated by Tasker variables if you absolutely need to.

If you find any bug please let me know as this is absolutely beta.

Current basic data templates include hours, minutes and temperature, more values and manual editing of fields will be added on next release.

Image shows the ProgressClock 2×2 template available inside the widget.
Happy editing!

As usual please remember that overlapping works correctly only and only if the modules are on the same horizontal anchor (so all left, all center or all right), stacking is not guaranteed on different anchors. Thanks to Oliver for the feature suggestion

As you can see from the screenshot above the latest release of ZW allows you to use a new module called “Rich Text” which allows “bbcode” like markup language, multiple lines, margins and a lot of cool stuff. Right now the supported features are:

• Bold and italic styles
• Font size (both relative like “0.7″ and absolute)
• Bsic text conversion modes (lowercase, uppercase  and capitalization)
• Simple number to text (like in the “text module”)
• Colors (so you can have multiple colors on the same line)

In the future however i will add more modifiers like the “o’clock” support, the ordinals “1st, 2st” and much more, so stay tuned and keep an eye to the BBCode reference page!

Currently the only workaround working is to press the “menu” button on the bottom left of the phone to solve the problem (yes, the hardware button, and i do not know why sadly). This is not “optimal” i know, if some of you is able to use ADB (and has this specific issue) please please drop me a line at android@zooper.org so we’ll try together to fix this!

Thanks!

So, this set has also been copied from source code, what it does is:

• Provide weather conditions bitmaps
• Use different icons for day and night
• Support also 2 days weather as ZW does

How to support 2 days weather?

To support the forecast we used “modes” as for the battery but not in a static way, so our mode configuration is this:

<!-- We provide current and 2 days weather -->
  <mode value="#WCCODE#">Current Weather</mode>
  <mode value="#W0CODE#">Today's Weather</mode>
  <mode value="#W1CODE#">Tomorrow's Weather</mode>

This means that the value of “#MODE#” in the widget will reflect the choice the user did, so it will be the code for current codition if mode is set to #WCCODE# or, for example, tomorrow weather if mode is #W1CODE#.

How does the code work?

Zooper Widget might support in the future multiple weather providers however we do not want everyone to rewrite their sets every time the provider changes so we choosed a fixed set of codes that will be always there no matter which service is used to get weather data. Current conditions are:

<!-- 
Weather conditions:
 0 = UNKOWN
 1 = STORM
 2 = THUNDERSTORM
 3 = DRIZZLE
 4 = RAIN
 5 = SHOWERS 
 6 = FLURRIES
 7 = RAINANDSNOW
 8 = SNOW
 9 = HAIL
10 = FOG 
11 = HAZE 
12 = WIND
13 = PARTLY_CLOUDY
14 = MOSTLY_CLOUDY
15 = CLEAR 
16 = FAIR
-->

If you think something is missing just let me know!

How to distinguish between day and night?

So how can i show day icons during the day and different on the night? Well, we just use sunrise and sunset hours, so it will be always correct! To make things more simple we just use the hours, so for example:

<!-- Nightly icons block will be skipped entirely if his conditions do not match -->
  <condition>
    <!-- We just check if sunrise hour is greater than current -->
    <test>#ARHH#&gt;#DHH#</test>
    <!-- Or if sunset if minor than current -->
    <test>#ASHH#&lt;#DHH#</test>
    <!-- Storm -->
    <condition>
      <test>#MODE#=1</test>
      <image>weather-storm-night.png</image>
    </condition>
    <!-- More night conditions will be here--->
  </condition>
  <!-- Daily conditions (parser will arrive here if it did not catch anything in night block) -->
  <condition>
    <!-- Storm -->
    <test>#MODE#=1</test>
    <image>weather-storm-day.png</image>
  </condition>
  <!-- more daily conditions will be here .... -->

That’s all, everything else should be quite simple.

To download the full working sample please click HERE

This is the most basic example for a PNG based Icon Set representing current battery state. For more info on the Icon Sets please see the Icon Set Page. This example comes out directly from the source code, what we wanted to achieve is:

• Provide battery images for both charging and discharging states
• Provide a static image representing an alarm

If you want to skip the tutorial and directly download the example file and edit it yourself please scroll to the bottom of this page for the link.

Create the structure

In order to create the iconset we start with an empty folder called “myiconset”, in this folder we create an empty “config.xml” file and another folder called “icons” were we store all the PNG images we are going to use. The images should all have the same size otherwise there will be weird results on screen. You should also avoid using images that are too big.

Create a basic config

Then we start editing the configuration, so we start creating a minimal configuration just with the mandatory fields:

<?xml version="1.0" encoding="utf-8"?>
<!-- 
This is a PNG based iconset showing battery discharging/charging images plus or
a static alarm icon useful to show next alarm.
-->
<config>
  <!-- Title as displayed to the user -->
  <title>ZW Battery Icons</title>
  <!-- Description displayed to the user -->
  <description>Oxygen based battery Iconset with Alarm static Icon mode</description>
  <!-- The demo Icon is mandatory and must exist -->
  <demo>battery_charging_060.png</demo>
  <!--
  This is the path inside the iconset where icons are found, usually "icons"
  is fine, this is a static value and will not be parsed by the text parser and
  it's mandatory
  -->
  <icons>icons</icons>
  <!-- 
  Default icon is mandatory, will be used when parser doesn't know what to 
  render so it will fall back to this image. 
  -->
  <default>battery_discharging_000.png</default>
  <!-- 
  We provide battery level mode or static alarm icon, for the battery level we 
  assign mode to #BLEVN# because in this way the parser with convert #BLEVN# only 
  once before checking the conditions 
  -->
  <mode value="#BLEVN#">Battery Icons</mode>
  <mode value="ALARM">Static Alarm icon</mode>
</config>

The configuration above is already a valid Icon Set however it has no “conditions” so it will always end up displaying the default image (battery_discharging_000.png in this specific case). In order to make it “dynamic” we need to add some more logic to it so we need to create some condition. A condition is the “core” of the sets, it basically represents a test to perform, the test, if true, will return the image to display.

Add conditions

So, let’s add the the end of the file (and before the </config>) the following conditions:

<!-- First we check for static icons -->
  <condition>
    <!-- Alarm Icon -->
    <test>#MODE#=ALARM</test>
    <image>alarmclock.png</image>
  </condition>
  <!-- Status Unknown, we display fully dischargen battery -->
  <condition>
    <test>#BSTATN#=1</test>
    <image>battery_discharging_000.png</image>
  </condition>
  <!-- Battery Full -->
  <condition>
    <test>#BSTATN#=5</test>
    <image>battery_discharging_100.png</image>
  </condition>

What we did? We added 3 conditions, the first one will just check the value of #MODE# and see if it equals to “ALARM”, #MODE# is always expanded with the value specified on the “<mode>” configuration we did in the first phase, in this case is a simple string we use to undertsand that we want just to return a static icon, so we add as “<image>” the “alarmclock.png”.

Second and third conditions are a little bit more complex, if #MODE# is not set to “ALARM” it will be set to “#BLEVN#” which will be translated to a number representing the battery level, but battery is not just a “level” is also a “state” that can be, charging, discharging, unknwn or full (please check the Android dev page here for further info on the codes). So first we add 2 conditions for the “unknown” and “full” states returning an image with an empty battery if unknown (we could also return a question mark or something like that) and a full battery if its full.

Cool eh? What if the battery is charging or discharging? Well, for that we need to add some more stuff:

  <!-- Battery Charging? Lets use charging icons -->
  <condition>
    <test>#BSTATN#=2</test>
    <!-- Level > 90% -->
    <condition>
      <test>#MODE#&gt;80</test>
      <image>battery_charging_100.png</image>
    </condition>
    <!-- Level > 80% -->
    <condition>
      <test>#MODE#&gt;60</test>
      <image>battery_charging_080.png</image>
    </condition>
    <!-- Level > 60% -->
    <condition>
      <test>#MODE#&gt;40</test>
      <image>battery_charging_060.png</image>
    </condition>
    <!-- Level > 40% -->
    <condition>
      <test>#MODE#&gt;20</test>
      <image>battery_charging_040.png</image>
    </condition>
    <!-- Level > 20% -->
    <condition>
      <test>#MODE#&gt;10</test>
      <image>battery_charging_020.png</image>
    </condition>
    <!-- Level < 20% -->
    <condition>
      <test>#MODE#&lt;10</test>
      <image>battery_charging_000.png</image>
    </condition>
  </condition>
  <!-- From now on battery must be discharging -->
  <!-- Level > 90% -->
  <condition>
    <test>#MODE#&gt;80</test>
    <image>battery_discharging_100.png</image>
  </condition>
  <!-- Level > 80% -->
  <condition>
    <test>#MODE#&gt;60</test>
    <image>battery_discharging_080.png</image>
  </condition>
  <!-- Level > 60% -->
  <condition>
    <test>#MODE#&gt;40</test>
    <image>battery_discharging_060.png</image>
  </condition>
  <!-- Level > 40% -->
  <condition>
    <test>#MODE#&gt;20</test>
    <image>battery_discharging_040.png</image>
  </condition>
  <!-- Level > 20% -->
  <condition>
    <test>#MODE#&gt;10</test>
    <image>battery_discharging_020.png</image>
  </condition>
  <!-- Level < 20% -->
  <condition>
    <test>#MODE#&lt;10</test>
    <image>battery_discharging_000.png</image>
  </condition>

Code above first checks “state” again, if its “charging” than we add “nested conditions”, it means that we will add some more “ifs” before returning an image. But what means “#MODE#&gt;80″ ??? That means “#MODE#>80″ in XML terms, this will be translated to “#BLEVN#>80″ and finally to “#90>80#” if battery level is 90. You might be asking, why not using #BLEVN# instead of mode? Well, you could do that, but using #MODE# is more efficient. If you use #MODE# the text parser will check the battery level just once when “#MODE#” is parsed, otherwise it will be called every time a test is evaluated.

So, if you can, always bind #MODE# to a value you will need to parse a lot to avoid the parser being called too many times.

Create the final Icon Set

Now that you created the icon set is time to test it on the device! Let’s zip the contents of the file into a zip and copy it in your phone under the “iconsets” folder. If everything has been done correctly it will show up in the iconsets list.

Download the full example HERE

So, the free version stores a template called “FreeAutoSave” every time you exit the configuration, you cannot see it in Free because that version is not able to load templates from SD but once you move to the PRO you will find it, so, if you are upgrading and you have only one widget on screen then you are done.

What if you have more? Then you need to follow this procedure:

• Click on the Free widget you want to import, enter config and exit
• Add a widget same size with pro, load the “FreeAutoSave” template
• Remove the Free widget you have just imported on screen
• Optionally, just to be sure, save current template using PRO
• Apply same procedure for all Free widgets on screen

Once this process is over you can safely uninstall the Free version. Future versions will have a better approach, when it will be out i will update this article.

Stay tuned!!!

So how to monitor the SD card on SIII if ZW will not distinguish between internal and external storage? Well, just manually put the path in the system info pattern this way:

#SF/mnt/extSdCard/# -> Will show sdcard free space
#ST/mnt/extSdCard/# -> Will show sdcard total space
#SF/mnt/extSdCard/M# -> Will show sdcard free space in megabytes
#ST/mnt/extSdCard/M# -> Will show sdcard total space in megabytes

This trick off-course does not work just with the SIII SD card you can use it with any path, so you can also monitor your /cache or /system filesystems if you want to!

Enjoy!