As best I can tell, the best program for creating individual customised widgets is UCCW. This app permits delving right into the nitty gritty of the properties of a widget. There are some pretty good tutorials on UCCW dotted around the web but a lot of the knowledge seems to be recorded in videos for which I have little patience.
Two related features of UCCW which seem incredibly powerful are barely mentioned in any documentation. In fact, they are each very easy to use but there are a few gotchas which if you are not ready for them can waste a lot of time. So, I set out below a short guide to using each. I am sorry I do not have time at the moment to do it properly, with screen shots and such like. This guide was based on version 4.0.5, which could be important because the developer seems pretty active and can change the interface between versions.
Text mapping
This guide starts with UCCW installed but not running. If you read this when you already have a skin created then skip to step 4. (By the way, purely as an attempt to clarify language but not as a tip or instruction, if you are a complete newbie, maybe you do not appreciate that "skin" kind of means "widget" here since once you design a skin and apply it to the UCCW widget, you effectively have a brand new re-usable widget. Ah, the joys of abstraction. Well to make it clear, I am going to call them "skidgets", no relation)
Step 1 - start UCCW
You should have UCCW already installed. Hopefully, you know your way around your existing launcher and can find it; I am afraid a guide to all possible launchers is beyond this little post. If you are using WP Launcher, press on your home button then swipe right to get to your list of installed apps. UCCW should be under "U". Tap on it.
After UCCW starts, you should be looking at a screen that says "UCCW" nearly at the top left next to a set of menu stripes with search and share buttons on the top right. On the line below should be three tabs reading "ALL", "LOCAL" and "APK".
At the bottom right of the screen there should be a coloured (green on my phone) circle with a plus symbol.
Step 2 - Create a new blank skidget
Tap on the plus symbol. A set of three additional buttons should pop up reading "Skins from google play", "Import Uzip skin" and "Create New Skin". Tap on the button next to the "Create New Skin" label.
You should now go to a screen headed "Templates". On my phone there are six templates. Only one of them is completely blank. Tap on that one.
Step 3 - Name the new blank skidget and insert basic details
You should now go to a screen headed "New" with three text fields to complete: "Name", "Width" and "Height". Press in each and a keyboard will pop up for you to complete. You can put what you like. Maybe since this is a training exercise you could go with "GStexttutorial" for the name. If, like me, you are aiming to use the resulting skidget in a Metro theme then the right figures for width and height are 360 and 180 for a two by one rectangular Metro tile.
Once you have your detail input, tap on the button "Create New Skin".
Step 4 - Add the text mapping object
You should now be at a screen with the title being the name you gave the skidget ("GStexttutorial" if you followed my suggestion) on the top left and a save button and further options button on the right with a rectangular white drawing area below. Below the drawing area is a list of property categories, each of which when tapped will take you to another screen. The second item on the list is "Objects" with the helpful caption below "Edit objects and their properties". Tap on that.
That will take you to a screen headed "Objects", which will have the same drawing area in white below the heading and now the green plus button is back at the bottom right. If you are an adherent of the Visual Basic school of thought the drawing area is kind of like the user form. Click on green plus button.
A scrollable selection list will now pop up, listing all of the available object types. If you are an adherent of the Visual Basic school of thought these objects are like controls. They are organised into groups, the first group is headed "Text" and the three items below are "Text", "Text series" and "Text multiline". Tap on "Text" the item, not the heading.
The selection list will disappear to be replaced by a mini properties dialog with two properties. The first property, which is a text field, is headed "Label". This is not the label that will appear in the finished skidget when inserted on your home screen. It is just a convenient handle to distinguish the control from any other controls you might add. Type in a sensible label, say, "MyTestText". The second property is headed "Source". Tapping on this causes a drop down scrollable list to appear. The items on this list are sources of data from your phone. The vast bulk of them are system supplied variables like date, time etc. Because it is the dead easiest to use, I am going to choose "Day of the week" but you can choose another. I strongly suggest that for your first time you choose "Day of the week" because it only has seven values so it is easy to populate all the necessary references as we will see below.
Once the two properties are filled in, tap "OK".
Step 5 - Configure the actual text mapping
You should now be back at the "Objects" screen mentioned in the second paragraph above under Step 4. Now, however, you will see your current day of the week in your drawing area. Below the drawing area you should see a single item in what has now become your objects list. If you followed my suggestion, that item will read "MyTestText (Text)".
Tap on the actual text of "MyTestText (Text)" (or whatever label you chose plus "(Text)"). (Note that if you tap on the three dots to the right, you will be given options to delete and copy, which are beyond this little post.)
You will now go to a screen headed with the label. Below that will be the now familiar drawing area and below that is scrollable a list of properties, the first being the label. The list is likely more than a screen full so you can scroll up and down to see what is there. You will see "Source" which should have next to it "Day of the Week".
The next property down is the important one: "Text mapping". Tap on it.
This takes you to a new largely blank screen with at the top left: a back arrow, a tick and a "Done" button; and on the top right, a save button, a folder button and the three dots button for further options. At the bottom right of the screen is the trusty green plus sign button. Tap on that.
This brings up a dialog box with two text fields. They are shadow-captioned "Key" and "Value". This is where the first "gotcha" appears. It is quite opaque what each means. However, "Key" means the actual text delivered to UCCW by the external ((to UCCW) data source. So, using "Day of the week" as the source, the actual data delivered to UCCW are "Monday", "Tuesday", "Wednesday" etc. "Value" means the string that you wish to display instead of the data delivered to UCCW. (I know, you are not that excited by the possibility of substituting for the days of the week but this is just a tutorial).
To get a quick feel for how this works, type into the "Key" field the day of the week that you are actually doing this. You need to get the case right so it must be "Tuesday" (say) in long form. Then type in some clearly recognisable text that is not the day into the "Values" field. Say, use "Dog Day" in honour of the Al Pacino movie. Click OK.
The dialog box will disappear and there will now be a single entry in the list which says "Tuesday - Dog Day". You can add some more mappings in the same vein now if you like e.g. the key of "Wednesday" with the value of "Hump Day". You can do all of your mappings for the whole week now if you like but it is time consuming and you can come back and do it later once you can see how it works.
Step 6 - save the mapping
Tap on the save button (should be a floppy disk icon) at the top right. A somewhat odd folder and file dialog takes over the screen. For now, I suggest that you use the folder that UCCW has already allocated for this skidget. You may have your own ideas about storing such resources in and around your phone but this worked well enough for me.
By default, UCCW seems to start in /storage/emulated/0 but I have to say, that could be some quirk arising out of my particular phone or version of Android or who knows what. There should be a subfolder of that path that you can scroll down to called "ultimateCustomClockWidget". If you tap on that folder, you should see a subfolder with the same name as you gave your skidget, my suggestion being ""TestTextMap". Tap on that. That will take you to a folder and file list which is probably empty except for the folder icon and two dots representing the next level of folders above. At the bottom of the screen will now be a grey band with a tick on the left and the label "Create File Here". This was the second gotcha for me. I kept tapping on the words "Create File Here" but they did nothing. It seems that you have to tap on the tick.
That will pop up a dialog for you to type in the file name for the text mapping. In theory you might have more than one text mapped control on your skidget so give it a logical name say "TestTextMap1". Then click "Create". You will now be back at the list of mappings.
Click "Done".
This should now take you back to the screen headed with the label you gave the object. The drawing area should now show (say) "Dog Day" instead of "Tuesday".
If that has worked, you have pretty much mastered text mapping. If it has not worked, it may because you mapped "Dog Day" to "Tuesday" but you are actually on Wednesday (gosh look at the time).
Step 7 - save all and use
Keep pressing the save button followed by your phone's back key until you have reached the screen headed "UCCW". Your new skidget will not necessarily already show in the list of "ALL" skidgets. You may need to exit out of UCCW and start it again for the new skidget to appear. You exit UCCW by pressing your phone's back key twice.
Image mapping
The developer of UCCW says this in his release notes:
Text mapping – Now custom text is replaced by text mapping. Its a very simple idea. For e.g. if the current value of sms source is ‘0’, it can be mapped to ‘no messages’.
Image mapping – same as text mapping but with images.
Ha ha! On that description you might think that you could just follow the seven steps I have set out above but that maybe, say in Step 5 when you are inputting "Key" and "Value" instead of putting in the value you want to display you put in the path to an image. Maybe you would expect there to be a little file browser to choose the image. Nope.
The technique is both simpler and more complicated at the same time. I will start by explaining the concept before moving on to the instructions.
The concept is that for image mapping, UCCW looks in a specific folder for an image file whose name exactly matches the external data for the source specified. So, for "Tuesday", UCCW will retrieve and display in your skidget the file "Tuesday.png". So long as the image files are already there, all you have specify in the UCCW design screen is the folder on your phone where all of the necessary images files for the image mapping are stored.
As to the technique, the naming of the files and the storing of the files in the folder you have to look after yourself. In theory, you might be able to use the tools in UCCW that assist you in inserting just a static image to navigate around your phone and corral them all into one place. I have not tried that because in practice it is just easier to use a file browser like ES File Browser. The files need to be named exactly to coincide with the data supplied by the source external to UCCW. So, suppose you wanted to map a different movie poster to each day, like the poster for "Dog Day Afternoon" for Tuesday. You would store the image file for that movie poster in a folder (say the same one you used for the text mapping configuration file mentioned above). You then rename the image file to "Tuesday.png". (I have only used .png files but it maybe UCCW can use jpeg and bmp etc.).
Now, as promised, here are the step by steps for image mapping. I use "A", "B" etc just to distinguish from the steps for text mapping.
Step A - Prepare your image files
How you prepare or source your image files is up to you. I used Windows Paint and then copied the files to my phone using a USB stick. I have only used relatively small (say 500 x 250 pixels approx.) png files.
I am going to stick with mapping to days of the week because it is simples. If you want to cover the entire week, you will need a different file for each day but for the purpose of testing out this process you only need one file named after the day you are actually working.
You can put the files wherever you like but I suggest that you copy the files to the same directory as UCCW is using for the skidget (see Step 6 above).
Step B - Get a skidget to work with
I will assume that you are using the skidget from the section above on text mapping but if not, follow Steps 1 to 3 above to get to a blank skidget.
Step C - Add the image mapping object
You should now be at a screen with the title being the name you gave the skidget ("GStexttutorial" if you followed my suggestion) on the top left and a save button and further options button on the right with a rectangular white drawing area below. Below the drawing area is a list of property categories, each of which when tapped will take you to another screen. The second item on the list is "Objects" with the helpful caption below "Edit objects and their properties". Tap on that.
That will take you to a screen headed "Objects", which will have the same drawing area in white below the heading and now the green plus button is back at the bottom right. If you are an adherent of the Visual Basic school of thought the drawing area is kind of like the user form. If you already followed all of the instructions under "Text mapping" above you will see your text object first in the list but note that you do not have to have the text map object. There is no necessary connection between a text map object and an image map object.
Click on the green plus button.
A scrollable selection list will now pop up, listing all of the available object types. They are organised into groups, the last group (scroll down to it) is headed "Image" and the two items below are "Image" and "Image Map". Tap on the "Image Map" item.
The selection list will disappear to be replaced by a dialog with one property "Label". This is not the label that will appear in the finished skidget when inserted on your home screen. It is just a convenient handle to distinguish the control from any other controls you might add. Type in a sensible label, say, "MyTestImageMap".
Tap "OK".
Step D - Configure the actual image mapping
You should now be back at the "Objects" screen mentioned in the second paragraph above under Step C. Now, however, you will probably see a large two digit number in your drawing area. Below the drawing area you should now see an item your objects list which is the image map object. If you are continuing from the text mapping example it will be the second item in the list.
Tap on the actual text of "MyTestImageMap (Image map)".
You will now go to a screen headed with the label. Below that will be the now familiar drawing area and below that is scrollable a list of properties, the first being the label. The list is likely more than a screen full so you can scroll up and down to see what is there. You will see "Source" which probably reads "Hour 01-12".
Tap on "Source". A scrollable list pops up. Choose "Day of the Week". (Or not, If you are feeling brave choose one of the other options but note that you must ensure that the files you had prepared in Step A must match the exact data produced by the source you choose. So, if you decide to stick with "Hour 01-12", you will need to name your files "01.png", "02.png" etc.)
Tap on "Folder" (which should be two above "Source"). You will get a choice between "Default" and "Custom". Tap "Custom" and navigate to where you stored your images in Step A. Tap on the tick (not the words "Select this Folder").
You will probably need to adjust the scale to be able to see the image sufficiently clearly to check that it has picked up the right image.
If that has worked, you have pretty much mastered image mapping. If it has not worked, it may because you mapped your image to "Tuesday" but you are actually on Wednesday. It may be you did not quite get the name right on your file or did not quite input the folder correctly.
Step E - save all and use
Follow Step 7 under text mapping to get out of UCCW.
Good luck!
