5,814,633 Members 53,257 Now Online
XDA Developers Android and Mobile Development Forum
View Poll Results: Are you interested in making or editing a CHT widget?
YES 82 95.35%
NO 4 4.65%
Voters: 86. You may not vote on this poll

[tutorial] How-To-Make-A-CHT-Widget

Tip us?
 
poyensa
Old
(Last edited by poyensa; 15th December 2013 at 04:39 PM.)
#1  
poyensa's Avatar
Forum Moderator / Retired Recognized Developer - OP
Thanks Meter 2,551
Posts: 3,114
Join Date: Apr 2010
Location: mi patria en mis zapatos
Wink [tutorial] How-To-Make-A-CHT-Widget

Are you interested in making or editing a CHT widget? To make a widget for Co0kie Home Tab 2.0.0 is not such a difficult job as you may think, I tell you by experience. I have no previous formation in programs or informatic code but i could make a few widgets(*) and I would like to share this experience with you. This is not so altruistic work, I am expecting a huge amount of widgets made by all of you to install and enjoy in my brand-repaired HD2

Co0kie Master has allready published a guide for making a CHT widget (it is into the widgets kitchen); also Genius_Rat_2665 has made a tutorial for making a cht clock widget, so -the third time lucky- lets bring here all that knowledge and try to make a simple widget step-by-step. Also this could be a good place to share and learn each other some code for widgets. Things like how to make an blinking element, how to change number in text, how to read from the registry, etc.

(*) What is for sure is that no one widget I could ever do without the help of others. Lets start quoting the existing Co0kie's guide:


Quote:
Here is a guide on how to build your own widget for CHT.
I decided to break this up into 3 parts.
The kitchen section is a brief description of the kitchen structure and batch files.
The guide section will tell you how to build your own widget and make a cab to install it.
The "how it works" section will tell you what's going on in the background - why the system is the way it is.

#####################
*** 1) Kitchen ******
#####################

Just a few words about the kitchen folder structure:
- Workspace - here you'll find all the raw files that are being worked on currently
- Tools - all the needed tools
- deploy - just a little temp dir used by the batch scripts to compile and deploy files directly to your device
- cab - the cab file and setup.dll
- cab\_files_final - all the final compiled files that will need to be inside the cab

The batch files:
These files automate the process of editing manila files.
Connect your device to your PC via ActiveSync to be able to run the batches.

z_init.bat - You need to run this one before starting. You just need to run it one time. It will copy restartmanila.exe to you device.
_Deploy_to_device_in_dev_mode.bat - this batch will:
1) compile the lua files from \workspace\_lua and copy them to the deploy folder
2) copy all files from \workspace\mode9 and other \workspace\ subfolders to the deploy folder
3) use rapicopy.exe to copy everything from the deploy folder to \windows on your device (it's set to overwrite exitsting files)
4) restart manila on your device
_Generate_files_for_cab.bat - this will compile and copy the workspace files but it will not deploy them to your device,
instead it will copy them to \cab\_final_files
it will also rename the base mode9 and lua files to CHTmode9 and CHTlua - more on this in the "how it works" section

[[ It also needs to be modified the files _Generate_files_for_cab.bat & _Deploy_to_device_in_dev_mode.bat to addapt them to your own widget. Click with the right button of the mouse over the files and select edit, then change the name of the widget (PoyTEST.lua & PoyTESTtranslation.lua in the attached example) and the corresponding manila files ]]


[[ Tools folder includes m9editor for the edition of mode9 files, notepad2 for the edition of the Lua files, CFC_GUI for the qtc files (graphics), manilaHASH to obtain the right manila names corresponding to .luac files, and some other .exe files used automatically by the kitchen. ]]



################################
*** 2) Making your widget ******
################################

Guide - how to make CHT addon widgets:
First of all, because you will be developing, you need to turn on CHT's dev mode.
Open the reg key HKCU\Software\HTC\Manila\ and create a DWORD value, call it "CHTI.AddonWidgets.DevMode" and set it to 1.
This will allow you to deploy and test your widget directly from the kitchen.

[[ This is very important as you do not need to create and install the cab for test the widget, just using DevMode the widget will go from \workspace\ directly to your device, so you can make changes and see results easily. ]]


Now proceed to build your widget. I suggest you use the analog clock addon as a base. [[ You can use PoyTEST, its much simplier ]]
There are two rules you simply must follow:
1) For every new widget, its CHTWidgetDev.lua file must change the "widgetName" property. It must something unique.
I suggest a naming system of "CreatorName_WidgetName" - that should ensure that the names are unique - there must not any conflict here!
Modify anything else however you'd like. The rest of the fields in that file don't need to be as unique as the "widgetName" property.
2) The 30182CB6_manila mode9 file must follow a special rule: The "Scene" section must not contain any components. See how it looks like in the example addon.
That's how it must look for all new widgets.

[[ Making a widget is like making a puzzle (but much more funny ), you have to put the right pieces in the right places. There is no a fix rule and there is a lot of trial and error. Where to find the right pieces? Co0kie gave us thousand of decompiled lines of Lua code in CHT_Source. Download it from post#6 of CHT 2.0.0 thread. Also look in every published widget's kitchen in CHT thread, Rat_2665, Dunc0001, ZaxXx, Azarbel, Colossus_r, RoryB, MnCessna ... (Sorry I dont remember all right now!) ]]


Once you've done that you can do ahead and run "_Deploy_to_device_in_dev_mode.bat" - that will compile the files, copy them to your device and restart manila.
Then just go to the edit widget menu in CHT - your widget should be at the bottom of the list - add it and test it.

When you have finished making your widget, you can pack it up into a cab file.
To prepare the files for the cab you have to run "_Generate_files_for_cab.bat".
The final files will be in the \cab\_files_final\ folder.

Making the cab file - this is what an addon cab must have:
1) Every last one of those files from \cab\_files_final\ need to be in the cab and they have to be set to be copied to %windows%.
Do NOT set the install dir to %windows%, set the files to be copied to %windows%.
2) The setup.dll that is in the \cab\ folder also needs to be added to the cab.
3) Last, but extremely important, set the install dir to \CHTAddons\^widgetName^ - where ^widgetName^ should be your unique widget name same as in the lua file.

[[ This is really important. If you are not creating a new widget but just editing the mode9 and/or lua files, please do not modify the installation dir in the cab properties, as it is used in the installation process and modification may cause problems in CHT ]]

If you want to test that cab on your device make sure you disable dev mode first ("CHTI.AddonWidgets.DevMode" to 0), so that the dev mode widget you were working on and the newly installed one do not conflict.
A widget must not be installed in both dev mode and as a cab at the same time!


##########################
*** 3) How it works ******
##########################

CHT addons plug into slots that interface with the core layout manager.
There is maximum number of addon slots (that number is 10 for the dev preview beta, but it will be 20 for the final).

Each widget consists of 4 parts:
1) a mode9 file for the CHT widget interface
2) a lua file for the CHT widget interface
3) any number of extra mode9 or lua files
4) xml file with a manila file list for CHTScheduler

Numbers 1-3 there are directly needed for CHT. Number 4 is needed for CHTScheduler (I'll leave the explanation of that for the CHTS thread - it's not need for now if you just want to try to build your own widget).

Numbers 1 and 2 are the most important and they are directly linked to the slots.
Here is how:
The interface mode9 and lua need to have a specific names depending on which slot they go into.
To make this happen those 2 files are dynamically named on install.

While you are developing your widget you are working with the dev widget slot. There is only one of these so it has one pair of mode9/lua names (30182CB6_manila and 7D241726_manila).
But once you make the addon cab the widget can be installed in any slot (first one found to be free). That's why in the release files, there is a CHTmode9_manila and CHTlua_manila.
Those are the same files that you were developing with (30182CB6_manila and 7D241726_manila) - they will be renamed on the fly once installed - this is where the special setup.dll comes in.
The dll will look for the first free addon slot and install the widget there, i.e. it will rename the files so they correspond to the first slot.
The install dir name that you had to specifically enter is used as the widget install ID and will be stored in HKCU\Software\HTC\Manila\ "CHTI.AddonWidgets.SlotX" (this is needed to uninstall the widget correctly).
The files that are being installed should all go to \windows so you set that directly for the files, and that allows the install dir name cab field to be used for this purpose.

If you have reached here I recomend you re-read Co0kie's guide, is short but it contains a lot of information, i would say every word is important!

So now the first trial:

1.- Install the kitchen: Every widget has its own kitchen, I have attached a kitchen for a very simple widget. Just download in your PC and copy all the files & folders in a separate folder (\CHTwidgets\PoyTEST\) same as they are inside the .rar

Now connect your PC and your device via USB and sinchronize. Then run the file z_init.bat - You need to run this one before starting. You just need to run it only one time. It will copy restartmanila.exe to you device.

2.- Put your device in DevMode: Go to HKCU\Software\HTC\Manila\CHTI.AddonWidgets.DevMode and change to DWORD =1 (create if does not exit). Now restart Sense.

3.- Run the file _Deploy_to_device_in_dev_mode.bat. Your device will automatically restart Sense. Then go to Edit Mode - Add new element - Select PoyTEST - done. You should see now the simple widget in your device's screen.

It will continue ....
Attached Files
File Type: rar PoyTEST.rar - [Click for QR Code] (2.81 MB, 278 views)
The Following 6 Users Say Thank You to poyensa For This Useful Post: [ Click to Expand ]
 
poyensa
Old
(Last edited by poyensa; 21st March 2011 at 07:36 PM.)
#2  
poyensa's Avatar
Forum Moderator / Retired Recognized Developer - OP
Thanks Meter 2,551
Posts: 3,114
Join Date: Apr 2010
Location: mi patria en mis zapatos
SENSE CRASHED? NO PANIC


It is normal to crash sense when you are doing some experiments, but it normally get solved just deleting files 30182CB6_manila & 7D241726_manila in \windows folder\ and/or dissabling DevMode in registry HKCU\Software\HTC\Manila\CHTI.AddonWidgets.DevMode = 0

Quote:
Originally Posted by rat_2665
It's a tricky thing. Do you use one of Co0kies widgets? For this I "took it over" at first. I didn't change the structure, only made new names in the manila files. You have to check over and over. A blank space in a name in the mode9 file cost me a day. In the next step you can try to change the behaviour.
What you see is the normal screen for an error (i had it often ). Check if all variables in the lua files are also in the mode9 file. Then in the developer mode you can't see errors in the lua scripts (absent end in functions and so on). For this I used sometimes the m9editor, compiled the scripts and looked for errors.


Even we can learn from this crashs:

Quote:
Originally Posted by Co0kie Monster
Sense nuke and lua "debugging"
The empty screen after adding your widget will happen if there is an error in your widgets lua code. Alternatively it could be a bug in the mode9 file (but those usually cause sense not to start at all), or maybe you left dev mode on and installed your widget via cab - dev mode uses a special widget slot and it will cause a conflict if a widget is installed both via cab and in dev mode at the same time, so remember to turn off dev mode.

But, anyway I'm guessing the problem would usually be in the lua code. In that case you need to debug it. I've uploaded all the needed tools to "Co0kie's Home Tab\_Development\Lua_debugging_tools". (* inlcuded in the widget kitchen)

Because lua is a script It's not really debugging, it's pretty much just a trace log.
Run attach.bat while your device is connected via active sync and that will collect trace information and display any errors along with the file and line where they occurred.

All the info is collected in debug-attached.txt.
Do whatever causes the bug, then run terminate.bat to stop pdebug (that will also restart manila).

Open up the log and look for **Lua Error******.
Other than that you will also see trace() output there.

The other batch (run.bat) is for debugging from startup. You need to turn off manila (WM Settings->Home-> turn off HTC Sense from the list) and then hit run.bat - it will start manila and log at the same time. That's only needed in case of startup errors.


HOW TO SOLVE SOME GRAPHICS ISSUES

Quote:
Originally Posted by santod040 about some graphic issues
I am not exactly sure yet why the 16 rule only applies to some roms. I think this may actually be the difference between a CFC and non CFC manila.
Though Im digging into this more still.
I also think of this more as one rom listening to the mode9, no matter what the image claims to be or is.
Where the other needs the image to specifically be what it expects, according to the mode9 and lua.
I also think it's more about "4" and "16"
Here's a few key items from Mode9 and a small bit about each.
Though it may be somewhat irrelevant mostly.

String: UTF-16LE encoded strings (represented as UTF-8 in XML and YAML)
Path: UTF-16LE encoded strings (represented as UTF-8 in XML and YAML)
UInt32: 4 byte unsigned integer
Q16: 4 byte Q16.16 fixed point number
Int32: 4 byte signed integer
Boolean: 4 byte, either 1 or 0
Vector3: 3*4 bytes of Q16 numbers (X,Y,Z)
RectQ16: 4*4 bytes Q16 numbers (X,Y,Width,Height)
RectInt: 4*4 bytes of signed integers (X,Y,Width,Height)
Size: 4*2 bytes of Q16 (Width,Height)
Color: 4*1 bytes (R,G,B,A)
Viewport: either a Vector3 or a RectQ16, depends on size
FrameValue: either a Vector3 or a Q16 number, depends on size
BinaryScript: a binary value, encoded as Base64 in the XML or YAML file


The CFC should not be used as a standard.
Heres why:
Non Cfc and Cfc images, will work on a Cfc rom.
Whereas Cfc images will not work right on a non Cfc rom(any stock rom).
So to be universal, non Cfc is the best approach.
Also consider that manila, and your device have to decompress as they use the images.

So, to offer Cfc as an option is nice, but not the universal offering.
Quote:
Originally Posted by santod040
Similar issue again.
The qtc needed to be a more accepted dimension by manila.
I still don't have any concrete answers behind it, other then the info I already posted regarding textures and sizes in manila.
So, I adjusted the mode9 and also the qtc to be standard sizes.
I have made a few that worked.
The first was 256x64, but then was hard to move, lol.
So I edited again and made it 512x64 and reposted just now.
It seems to move just fine.
Now only to move the resize button up some and it would be near perfect.
But since it's almost 3am, that will have to wait.
Quote:
Originally Posted by santod040
Something else to think about.
As far as the 16 rule.
I also mentioned 4.
So for example,
64 divided by 16 = 4 (good number)
96 divided by 16 = 6 (bad number)
128 divided by 16= 8 (good number)


only 10 widget slot problem solution

Quote:
Originally Posted by mike2nl
We, the CHT teams, have found a solution for the 10 slots for widget issue.
After we had changed things we are now in state to use 20 widgets(*) at all (0..19).
It is tested on HD2 and TP2 WM phones, and it's running without any issue until now.

The new file was tested by santod040, MichelDiamond, poyensa and me.

My last test was to use 20 widgets on the HD2 about the performance. And yes it does the work .

Quote:
How to install the fix:
1. unzip the manila file
2. switch off sense
3. copy the 7c60907d_manila file o the \Windows directory
4. restart your phone
5. switch on sense
6. have fun to install more widgets now (max. of 20)
7. follow the install routine from every widget

Last but not least, thank you to all involved team members...
Attached Files
File Type: rar home.mode9.40slotsBG.rar - [Click for QR Code] (14.5 KB, 30 views)
File Type: rar sencityHomeClock.rar - [Click for QR Code] (50.2 KB, 33 views)
File Type: rar windroidHomeClock.rar - [Click for QR Code] (17.4 KB, 29 views)
The Following 5 Users Say Thank You to poyensa For This Useful Post: [ Click to Expand ]
 
poyensa
Old
(Last edited by poyensa; 24th March 2011 at 11:51 AM.)
#3  
poyensa's Avatar
Forum Moderator / Retired Recognized Developer - OP
Thanks Meter 2,551
Posts: 3,114
Join Date: Apr 2010
Location: mi patria en mis zapatos
You can do your own widget just changing PoyTEST - PoyText1 - PoyGraphic1 for your own names



The best way to make a new widget is start from another widget, in this case we can start from PoyTEST, its a simple widget with 2 variables to display in the home screen of our devices: one graphic file as background and one text field. This 2 fields (or variables) will be created by the mode9 file. We have to give unique names for all the variables so the easiest way is just to change PoyTEST - PoyText1 - PoyGraphic1 - for your own names in every line of the files involved. So open file 30182CB6_manila using m9editor and do the changes. (If you are not familiar with m9editro go here)





The mode9 file 30182CB6_manila use to define also the content of the graphic variables (SetTexture) but we will do it later for this example. Other important thing is the order in mode9 stablish the order of the elements shown in ours screen. It means that we will see PoyText1 over PoyGraphic1 as we like.

Now we have to change the file CHTWidgetDev.lua using Notepad2 and change all the PoyTEST - PoyGraphic1 & PoyText1 for the name previously used in the mode9 file. It not dificult just change PoyTEST -nothing else- in every line where it appears, substitute for the name previously used in mode9 file. YES YOU HAVE TO LEAVE THE SMALL w



Some important things:
Be careful with capital and lower letters. For lua languaje 'PoyTEST' is different than 'poyTEST' so only one letter can make the widget not working.

If the line strat with '--' then the line is dissabled, this is usefull for notes & reminders and also to activate and deactivate lines. If you use Notepad2 the deactivated line will be green coloured.

The files 30182CB6_manila (mode9) & CHTWidgetDev.lua always have to be in any CHTwidget, and they must have always the same structure. In mode9 file 30182CB6_manila we do create the variables and in CHTWidgetDev.lua (renamed as CHTlua_manila in the cab) we connect the widget to the rest of Co0kie Home Tab.

Now we do not need to change anything, may be later when we are more familiar with widgets:
* Lines 3-8 is to register the widget in CHT
* Line 8 is connected to line 82-83-84. We define there how many layouts is going to have the widget (black-white-etc). We leave everything as it is now ...
* Lines 10-48 are to control the size of the widget, in the future you can play there a bit specially in line 42 if you wish your widget bigger, but now we leave it as it is.
* Lines 50-62 are very important. We do nothing there -never- just change the names for our's widget name. Specially line 62 we put there the object (clockface, bakcground, etc) that is going to react when we press it with our finger. In our case it will be PoyGraphic1 (change it for the variable name used in mode9 file 30182CB6_manila).
* Line 64 conect to our widget lua file. As you may know the lua file defines the behaviour of the widget. In this lua file we are going to say what our widget is going to do. Is time to open ManilaHash and find the manila name of our widget's lua file. Dont change the path just the final name, you can use any but by convention better use something like CreatorName_WidgetName.lua
* Lines 82-84 is to add more layouts in our widget. You can see some examples in other widgets and also in CHT_Widgets.lua (CHT source), but dont forget to modify line 8 then!
* Lines 88-104 is defined the animation effect how the widget comes to the screen when swipping between levels. I never touch anything there.
* same for lines 106-116. It was there before me and i never modify anything there (just the widget name)
* Now have a look again to every line, check the spelling, capital letters, etc.




Now you are using manilaHash you can also find the name for any other graphic file you are going to use. e. Dont change the path just the final name

Now we can start to modify the file PoyTEST.lua. Using Notepad2 you have to change PoyTEST for your widget name used in the previous lua file and also modify the name of the variables defined in the mode9 file 30182CB6_manila (PoyText1 & PoyGraphic1) in all the lines where those appears.






In this lua file can be added some properties that use to be set in mode9 file (lines 15-25) I do that for one reason: This file does not change the name in the widget installation process, as the other CHT files (CHTmode9_manila & CHTlua_manila) does. This file will be always 41CBC6DC_manila in \windows\ folder so it is easy to substitute later to correct some bugs, etc.

You can get out of the line 29 (just put -- at the begining of the line it will be green cloured) This is a test I am doing for translate widgets regarding this post. If so you have also to activate the line 28 (delete -- then the line will be black colour) and delete file PoyTESTtranslation.lua in \PoyTEST\workspace\_lua

I cannot say much more for this file. Here comes the problems. How to do things? I am not a coder I have only read and read and read a lot of code in other widgets and CHT_Widgets.lua and other files in CHT source, and try and try and try a lot, and finally ask rat_2665

* Line 33 is a way to set texture for graphic fields in lua files instead of mode9 files
* Lines 38-63 is to define what the widget does when pressed


You can do your own widget just changing PoyTEST - PoyText1 - PoyGraphic1 for your own names

Now is time to check the USB conection, device is sinchronized, then click on _Deploy_to_device_in_dev_mode.bat and see your widget working!
[[be sure the .bat file has been edited correctly by adding your widget name, as explained in post#8]]

Sense crashed ... dont worry. Nobody has got it at the first time!

1. Be sure you are in DevMode
2. Check that all the names are correctly written, specially capital letters- lower letters
3. if you got an error in the black screen after run .bat file, read it slowly. It will help
4. Once you make the corrections you can run again .bat, even with sense crashed.





MAKING THE CAB


Quote:
Originally Posted by Co0kie Monster
When you have finished making your widget, you can pack it up into a cab file.
To prepare the files for the cab you have to run "_Generate_files_for_cab.bat".
The final files will be in the \cab\_files_final\ folder.

Making the cab file - this is what an addon cab must have:
1) Every last one of those files from \cab\_files_final\ need to be in the cab and they have to be set to be copied to %windows%.
Do NOT set the install dir to %windows%, set the files to be copied to %windows%.
2) The setup.dll that is in the \cab\ folder also needs to be added to the cab.
3) Last, but extremely important, set the install dir to \CHTAddons\^widgetName^ - where ^widgetName^ should be your unique widget name same as in the lua file.

Be sure that you have edited the file _Generate_files_for_cab.bat with your own name widget as explained in post#8. By running this file all the lua files will be recompiled automatically and all the files will go from \workspace\ to \cab\_final_files\ If you have a look to the screenshot you will notice that some files names have changed: we will find there CHTlua_manila & CHTmode9_manila. This 2 files will change the name again when the cab be installed in the device, depending the free slot asigned will take the final manila in \windows\ folder in your device. Isn't magic?





Dont forget to add the magic setup.dll. When you add the files into the cab select windows as location. Then in cabinet properties - Installation directory do create a folder in \root\CHTAddons\NameOfTheWidget with the same name as your widget (line 5 of chtwidgetdev.lua) and mark hard-coded-path. Finally save the cab.



CHTScheduler

If we add a xml file named as CHTWidget_NameOfYourWidget.xml (CHTWidget_PoyTEST.xml in this case) directly in \windows\ folder with just a description of the manila files names used in our widget (see some of them as example) this widget will be used by CHTSheduler for diferents profiles, baselines, etc.



It does not seems dificult, isnt it? it simple but if you substitute the qtc file attached 1F88A376_manila, and change the color property for the text in line 17 of PoyTEST.lua to black (0,0,0,255) .... it could be the begining of an usefull widget



1.- Lets do our own CHTwidget
2.- Using JMLMenuSense
3.- Final touches
4.- A Bit of CHTS
Attached Files
File Type: rar 1F88A376_manila.rar - [Click for QR Code] (3.9 KB, 29 views)
The Following 2 Users Say Thank You to poyensa For This Useful Post: [ Click to Expand ]
 
poyensa
Old
(Last edited by poyensa; 27th February 2011 at 07:31 PM.)
#4  
poyensa's Avatar
Forum Moderator / Retired Recognized Developer - OP
Thanks Meter 2,551
Posts: 3,114
Join Date: Apr 2010
Location: mi patria en mis zapatos
Its good to have a look into CHTWidgetDev.lua from Co0kie's Standalone Analog Clock, with extended comments by Co0kie (in green). You have it into the Co0kie's widgets kitchen. We all started here:



Quote:
-- File name: 7D241726_manila -- \windows\htc\home\scripts\home\chtwidgetdev.luac

-- ##### CHT Wigdet interface file #####
-- this script is an abstraction layer that sits between a widget and the core CHT Layout Manager
-- the template needs to be filled in the correct way, but once it is, the created widget will be plugged into the layout manager
-- and automatically behave like any other CHT widget - be movable, have access to different layout profiles, correct lockscreen behaviour etc.
-- even if I do say so myself, the system is *very* powerful

-- the comments below should provide a good description of the template
-- the primary and most important comments will be marked plainly with --
-- secondary comments will be marked with --// and they will contain some additionl points of interest, but not critical info
-- on your first read through I suggest you stick to just the primary comments
-- lines marked with --%% are commented out code that could be part of a template, but is not needed for this example in particular
-- if you have any other question, hit me in the social group

-- this first line creates a new template file based on 'WidgetTemplate' (defined originally in CHT_core.lua)
--// it's best to make it a local - it can be a global too, but there's really no need since it will not be accessed directly anywhere
--// except in this file - and one less global means less polution in the global namespace which could be very important going forward


local wStandaloneAnalogClock = WidgetTemplate:new()

-- this next step registers the newly created widget with the core CHT Layout Manager

CHTLayoutManager:RegisterWidget(wStandaloneAnalogC lock)

-- some basic information needs to be filed in about the widget
-- 'widgetName' field - try to make this name as unique as possible, because it is used to save/load widget registy information
-- the core widgets have plain names (Clock, Appointments, Tasks...), but give your widget unique names to avoid conflicts
-- the simplest unique naming scheme would be to just add your name before the widget name


wStandaloneAnalogClock.widgetName = "Co0kieStandaloneAnalogClock"

-- this defines the text that will appear in the advanced settings/add a widget menu
--// sadly, I could not find a way to make the localization system distributed for every widget so you can't enter localized "IDS_*" strings here


wStandaloneAnalogClock.settingsString = "Standalone analog clock"

-- this defines the category in which the widget will appear in the advanced settings/add a widget menu

wStandaloneAnalogClock.settingsCategory = "Clock"

-- the maximum layout count (the layouts that are cycled by the previous/next button on the popup menu or in the settings menu combo box)

wStandaloneAnalogClock.layoutCount = 1

-- should the widget snap to the center of a page
-- // but "center" isn't really center - it's more like snap to posX == 0, 480, 960..., if that position X is the center of a page depends on how you made your widget


wStandaloneAnalogClock.snapToCenterX = false

-- here you can define default settings for your widget on a "per layout" basis
-- if defaults for a level are not given, it will use {visible = false, layout = 0, posX = 0, posY = 0, scale = 1, pinned = false}
-- the visible, posX and posY fields speak for themselves
-- the layout field is the layout number (can be between 0 and layoutCount-1)
--// scale is used for storing size info for resizable widgets
--// pinned is used for storing the pinned state of pinnable widgets
--%% wStandaloneAnalogClock.defaults["HomeLevel0"] =


wStandaloneAnalogClock.defaults["HomeLevel1"] = {visible = false, layout = 0, posX = 0, posY = 0, scale = 1, pinned = false}

--%% wStandaloneAnalogClock.defaults["HomeLevel2"] =
--%% wStandaloneAnalogClock.defaults["HomeLevel3"] =
--%% wStandaloneAnalogClock.defaults["HomeLandscape"] =
--%% wStandaloneAnalogClock.defaults["CHTLockscreen"] =

-- now come the widget function definitions

-- 'Initialize' - and extremely important function
-- it's called when the widget it loaded for the first time (on startup or when added from the advanced menu)


wStandaloneAnalogClock.Initialize = function(self)

-- these first few lines should be the same for all addon widgets

local newComponent = Component()
WidgetLayer2D:Attach(newComponent) -- you may modify this to be either WidgetLayer2D or WidgetLayer3D -- more info on this later
if not self.addonWidgetID then -- this is very important, every addon widget must have these line - do not modify them
newComponent:SetComponentClipCharacter("CHTWidgetD evSlot")
else
newComponent:SetComponentClipCharacter("CHTWidgetS lot" .. tostring(self.addonWidgetID))
end
self.positionLayer = newComponent

-- these two need to be filled in but they differ depending on how you named your mode9 fields

self.animationLayer = StandaloneAnalogClockAnimationLayer -- the layer that will be animated (fade in/out or any other more interesting effect that you can define - dee below)
self:AddObject(SACFace) -- defines the touch surface that, when touched, will enable the widget to be moved

-- the rest is completely up to you

require("Home\\Scripts\\Home\\Co0kieAnalogClock2") -- the script file that describes the behaviour
-- make sure that all new names that you add are unique so that there are no conflict with built-in widgets or any other addon widgets
-- suggested naming scheme is: yourname_variablename
-- the unique name requirement goes for all objectc in mode9 files, lua global variables and classes


StandaloneAnalogClock = StandaloneAnalogClockClass(StandaloneAnalogClockGr oup, SACFace, SACMinuteHand, SACHourHand, SACSecondHand)
end

wStandaloneAnalogClock.GetPosX = function(self)
return self.posX + 128 * (1 - self.scale)
end

wStandaloneAnalogClock.GetPosY = function(self)
return self.posY - 128 * (1 - self.scale)
end

-- GetHeight and GetWidth provide feedback for layout manager so it can know the exact borders of a widget

wStandaloneAnalogClock.GetHeight = function(self)
return 256 * self.scale -- in this the base width of the analog clock is muliplied by the scale

end

wStandaloneAnalogClock.GetWidth = function(self)
return 256 * self.scale
end

-- resizing system definitions - I suggest you skip this part on your first read

wStandaloneAnalogClock.isResizable = true
wStandaloneAnalogClock.rotatingResizeButton = true

wStandaloneAnalogClock.GetResizeRefX = function(self)
return self.posX + 128
end

wStandaloneAnalogClock.GetResizeRefY = function(self)
return self.posY - 128
end

wStandaloneAnalogClock.GetResizeButtonXDelta = function(self)
return 90
end

wStandaloneAnalogClock.GetResizeButtonYDelta = function(self)
return -90
end

wStandaloneAnalogClock.CheckScaleLimit = function(self, scale)
return (scale >= 0.5 and scale <= 1.3), 0.5, 1.3
end

wStandaloneAnalogClock.GetResizeUnit = function(self)
return 128
end

wStandaloneAnalogClock.ApplyScale = function(self, newScale)
self.scale = newScale
local newRadius = self:GetResizeUnit() * newScale
self.animationLayer.Scale = Vector3Property(Vector3(newScale, newScale, newScale))
end


-- these are the layout control functions
-- this example widget has only one layout available, but these function come in very handy for defining multiple layouts

-- this function is run before any of the defined layout functions
-- this should contain something that should be set commonly for any layout


wStandaloneAnalogClock.CommonPreSetLayout = function(self)
StandaloneAnalogClockAnimationLayer.Center.x = SACFace.Size.width / 2
StandaloneAnalogClockAnimationLayer.Center.y = -SACFace.Size.height / 2

if not self:CheckScaleLimit(self.scale) then
self.scale = 1
end
self:ApplyScale(self.scale)
end

-- one of these functions is run depending on the selected layout
-- the string to be shown in the settings menu combo box is also defined here


wStandaloneAnalogClock.layoutName[0] = "[[IDS_NO_ALT_LAYOUTS]]" -- combo box text
wStandaloneAnalogClock.SetLayout[0] = function()
end

-- additional layouts can be defined here
-- the number of functions must match the layoutCount field defined above
--%%wStandaloneAnalogClock.layoutName[1] = "Second layout"
--%%wStandaloneAnalogClock.SetLayout[1] = function()
--%%end
--%%wStandaloneAnalogClock.layoutName[2] = "Third layout"
--%%wStandaloneAnalogClock.SetLayout[2] = function()
--%%end
--%%wStandaloneAnalogClock.layoutName[3] = "Etc"
--%%wStandaloneAnalogClock.SetLayout[3] = function()
--%%end

-- like CommonPreSetLayout this function is run for any of the layouts
-- but it's run after the layout specific function
--%%wStandaloneAnalogClock.CommonPostSetLayout = function(self)
--%%end

-- animation function, they are run when switching between level or adding/removing a widget
-- the basic thing that needs to be done here is make the widget visible or invisible,
-- but you can play around with the animations and put in some eye candy
--// Interopolate can be used with Opacity, Position, Rotation and Scale and some cool effect combinations can be made
--// post in the social group if you need more info


wStandaloneAnalogClock.AnimateIn = function(self, instant, swipeDown)
if instant then
self.animationLayer.Opacity.value = 100
else
self.animationLayer.Opacity:Interpolate(100, 10, 0, Interpolate_Linear)
end
end

wStandaloneAnalogClock.AnimateOut = function(self, instant, swipeDown)
if instant then
self.animationLayer.Opacity.value = 0
else
self.animationLayer.Opacity:Interpolate(0, 5, 0, Interpolate_Linear)
end
end

-- these two functions define what should be run to connect or disconnect widget press actions
-- the functions are called on transition to the lockscreen, edit mode, but also for some smaller details (like when menus are up)


wStandaloneAnalogClock.ConnectPressHandlers = function(self)
StandaloneAnalogClock:ConnectPressHandlers()
end

wStandaloneAnalogClock.DisconnectPressHandlers = function(self)
StandaloneAnalogClockisconnectPressHandlers()
end

-- these two do much the same as the previous functions, but the serve as exceptions for the lockscreen
-- in this case the analog clock should not have any action on the lockscreen
-- but for example, the music player uses these functions to reconnect the play controls on the lockscreen
--%%wStandaloneAnalogClock.ConnectLockscreenHandlers = function(self)
--%%end
--%%wStandaloneAnalogClock.ConnectLockscreenHandlers = function(self)
--%%end

-- this one is used to clear the the widgets selection status
-- in this example when the clock is pressed it sinks in a bit
-- in certain situations, there might be a need to deselect a widget even if it's still under the finger
-- (for example when a side scroll is started)
-- that's when this function is called


wStandaloneAnalogClock.ClearSelection = function(self)
StandaloneAnalogClock:ClearSelection()
end


You can try now making your own Clock-CHTWidget, following rat_2665 tutorial:


Quote:
This is a little guide for clock widgets:

Read at first the widget development guide by Cokie (it's in the below mentioned kitchen) !!!

Step 1 manila hash names

1. Download the kitchen for the analog clock widget by cookie and make a temp folder in there. Copy the files for your analog clock in this folder (best if you have already a working clock for CHT 1.8.5). Save the pictures out of the qtc manila files as png in this folder (this is only useful for oversight). Rename the whole widget with your widget name.

2. Make a list with new names for your text and image objects with manilaHASH.
- the names should be unique. I use my name and a widget number as prefix, f.e. rat_w001_secondHand
- determine the manila hash name. For this use the line
\windows\htc\home\assets\images\Home\VGA\Your_Name .qtc
Save this list. You need it all the time for oversight.

3. Rename your images in the temp directory with the new manila names (this is only useful for oversight); then rename also your manila image files with these names.

4. Delete all files in the workspace\qtc directory and copy your new manila files into this (but not the old 1E1A6CCD_manila and 1EC5924B_manila)


Step 2 mode9 file.

5. Open the mode9 file in the workspace directory. Go in the library to the StandaloneAnalogclockGroup. There are the image and text objects for the clock.

6. If you have more objects in your old 1E1A6CCD_manila file for your analog clock add these objects in the group.

7. Then substitute
- for all objects the Instance value with your new name (f.e. rat_w001_secondHand),
- for the image objects the Texture path with the (here shortend) string that you used for the manila hash name (f.e. .\Assets\Images\Home\VGA\rat_w001_secondHand.qtc)
- for the text objects the String value to the variable used in the lua file (f.e. rat_w001_weekday). If you want to use AMPM like in the normal clock, don't change this value.

8. Change the name of the StandaloneAnalogClockGroup to a unique name (that is used later in the lua files, f.e. rat_w001_ClockGroup)

9. Change the name of the StandaloneAnalogClockAnimationLayer to a unique name (that is used later in the lua files, f.e. rat_w001_ClockAnimationLayer)

10. Save the file.

Now to the lua files.


Step 3 CHTWidgetDev

Substitute all uses of wAnalogClock2 with a unique name (f.e. w_rat_w001_Clock). You can do this in Notepad2 with the Edit/Replace function.

Then substitute in line 69 StandaloneAnalogClockAnimationLayer with the new unique name you used in the mode9 file for the animation layer (f.e. rat_w001_ClockAnimationLayer).

Do the same in line 74, 135, 136, 191, 195 and 212 for all uses of StandaloneAnalogClock (f.e. rat_w001_Clock)

Replace the string in line 28 with the name of your widget (f.e. "rat_w001_clock").
In the next line insert the string that is shown for the widget in the home layout (f.e. "my analog clock").
For an analog clock you don't need to change the next item (""Clock").

In line 70, 135 and 136 is the image object for touching mentioned. You have to substitute "SACFace" with your image object (at best the greatest, f.e. rat_w001_clockface)

The last part is line 73 and 74. In line 73 you have to substitute "Co0kieAnalogClock2" with the name of your special lua script (f.e. rat_w001_clock).
Line 74 is the bridge to your lua script. Here are the arguments of the ClockClass defined that are used in the StandaloneAnalogClockClass.__init function in your special lua file. Of course the name of the function is later also to be changed.
In the example it is:
rat_w001_Clock = rat_w001_ClockClass(rat_w001_ClockGroup, rat_w001_clockface, rat_w001_minuteHand, rat_w001_hourHand, rat_w001_secondHand)


Step 4 special lua file

For naming use the lua script file name you used in the CHTWidgetDev.lua file (rat_w001_clock)

In the first (commentary) line change the location with the new name instead of Co0kieAnalogClock2 and use the manilaHash app with this string:

\windows\htc\home\scripts\home\your_widget_name.lu ac

Then substitute also the manila name (f.e. -- File name: 1F2E1A7D_manila --\windows\htc\home\scripts\home\rat_w001_Clock.luac )

Substitute all uses of StandaloneAnalogClock with your name (rat_w001_Clock)

Change all uses of SACShowAMPM to your name (rat_w001_ShowAMPM).

That would be all if you only want to make a normal analog clock widget, but if you want to change more you have to go to the central function for the behaviour. For this you have to look in this two functions (these are the old Co0kie names):

StandaloneAnalogClockClass.UpdateTime = function(self)
StandaloneAnalogClockClass.UpdateSecondHand = function(self)

Here the update interval and the rotation of the hands is defined. In Co0kies clock it is pretty simple. If you want to add more functions here is the place. The names of the standard arguments clockGroup, clockFace, minHand, hourHand and secondHand should be unchanged in the whole file. For every other variable and object use your special unique name.

Of course you can add other functions in their own place. You find examples for this in my clock thread.

Now it is testing, testing, testing.



Step 5 bat.files

In the kitchen there are these two files
_Deploy_to_device_in_dev_mode.bat
_Generate_files_for_cab.bat
for handling in the development process.

Here you have to substitute in both files in the second luatool line 35E966AF_manila ..\Workspace\_lua\Co0kieAnalogClock2.lua
with your new widget name and its manila hash name. (in the example: 4C0089BA_manila ..\Workspace\_lua\rat_w001_Clock.lua)



Step 6 CHTS file

Rename the file in the CHTS with your new widget name (f.e. CHTWidget_rat_w001_Clock.xml).

Open the file with the windows editor.

Take your list with the manila hash names and substitute the objects with your new names and the manila names.

For the third line use your widget name and in the fourth line ("description") the string you used in the CHTWidgetDev.lua for the home layout description.
The Following 3 Users Say Thank You to poyensa For This Useful Post: [ Click to Expand ]
 
poyensa
Old
(Last edited by poyensa; 5th October 2011 at 05:45 PM.) Reason: adding useful links!
#5  
poyensa's Avatar
Forum Moderator / Retired Recognized Developer - OP
Thanks Meter 2,551
Posts: 3,114
Join Date: Apr 2010
Location: mi patria en mis zapatos
This links always useful ...

TUT: Editing manila!
LuaTool 1.2 - Lua Decompiler, Compiler and Compare
TF3D manila mode9 editor
CFC GUI - THE Manila/TF3D Image Editor
Manila file names
Manila CMD Kitchen Environment
Lua 5.1 Reference Manual
Manila Development for Beginners
Example of use of longpress thanks to RoryB
Modifications of the lua script/functions thanks to rat_2665
 
poyensa
Old
#6  
poyensa's Avatar
Forum Moderator / Retired Recognized Developer - OP
Thanks Meter 2,551
Posts: 3,114
Join Date: Apr 2010
Location: mi patria en mis zapatos
and reserved5 (i hope is enough )
 
Dunc001
Old
#7  
Dunc001's Avatar
Recognized Developer
Thanks Meter 1,334
Posts: 2,610
Join Date: Apr 2010
Location: Hiding out south of the border...
So here are a few little things I have gathered over the last few months which I have found useful.

The ManilaHash.txt contains two lines of text for you to cut and paste into Manila Hash which you need to generate the correct manila filenames for your widget scripts and qtc image files. Just open Manila Hash, open the txt, copy and paste the relevant line into MH and alter the last bit to your image/script name. Then click Get Manila and you'll have your unique manila filename. Then highlight the hashed name, right click and copy. If it is the name for your widget script you are generating you then need to use this in the two bat files (Deploy to device in dev mode/Generate files for cab) before you run either bat - right click and Edit and you'll see something like this:

Code:
@echo off
pushd tools

luatool /c -o ..\deploy\7D241726_manila ..\Workspace\_lua\chtwidgetdev.lua
luatool /c -o ..\deploy\3DFA729F_manila ..\Workspace\_lua\dunchexclock.lua


copy ..\Workspace\mode9\*.* ..\deploy >nul
copy ..\Workspace\qtc\*.* ..\deploy >nul
copy ..\Workspace\png\*.* ..\deploy >nul
copy ..\Workspace\locales\*.* ..\deploy >nul
copy ..\Workspace\CHTS\*.* ..\deploy >nul

rapicopy -d -e -s  ..\deploy \windows

rapistart restartmanila.exe

del /q /s ..\deploy\*.* >nul

pause
NB - The bat files included in the widget kitchen contain notation by co0kie but the code above shows the actual active parts of the bat.

The line you need to change is this one:

Code:
luatool /c -o ..\deploy\3DFA729F_manila ..\Workspace\_lua\dunchexclock.lua
Change the manila name to the one you just generated for the script (highlight/paste from MH) and change the script name to whatever name you are giving your widget script. BTW confusing as it may seem the hashed name is generated using .luac and the bat refers to it as .lua - this is correct!

Also for reference you should also edit the first line in your widget script to show the correct script name and hashed manila filename. Incidentally you'll notice this line in the script has -- at the start. This basically 'disables' the line so it becomes for reference only. This is handy during testing because you can remove elements from use without actually removing the text from the script, so they are easy to add back in later. If you are using Notepad2 which is in the tools folder (and I strongly recommend you do because it is specifically formatted for editing these scripts) you'll see that lines beginning with -- appear in green so you can easily identify inactive lines.

If you have generated a hashed name for a qtc file then simply copy the name, right click on your qtc file and Rename, highlight current filename and paste.

Widget mode9 Filenames.txt contains the hashed filenames for the mode9 files of each widget depending on which widget slot it is installed into. The mode9 and WidgetDev.lua filenames are generated during install depending on the slot number so you will need these if you are going to edit the mode9 after you have actually installed a widget (not relevant if you are still working on it in dev mode). You can also use this list to locate the mode9 file for any widgets you already have installed but which you may want to take a look at for reference or edit.

LUA Ref v5.1.pdf is a really useful quick reference guide for lua syntax, but before you get in a spin trying to get your head around lua for the first time I would strongly recommend reading this BEGINNERS GUIDE. There are many online references including the main LUA Reference Manual (there's a link to it in the site I've just linked to) but this one gives an easy to follow guide to the basics so read it first!

rat_2665's CHTAddon Dev Mode Switch - adds a new toggle switch in the CHT Toggle Switches list. Works like every other toggle to activate/deactivate Dev Mode rather than having to do it manually with a registry editor. Just toggle on/off and soft reset after each change to enter/leave Dev Mode. I'm sure rat won't mind me posting this here - it's all his work so all credit to him for this one - but it really is a timesaver when you are developing!

One final word of advice/experience - when you are first starting out on developing widgets it can be very VERY frustrating, especially if like me you have absolutely no previous experience of coding. However we are all here to help -that's what this community is all about. If you have a problem just ask. And be prepared for many many Sense crashes and resets! But hey, that's what dev mode is there for - another of co0kies little flashes of genius!

Right, that's just to give you all a hand with some basics! We are now open for business - ASK AWAY
Attached Files
File Type: txt ManilaHash.txt - [Click for QR Code] (131 Bytes, 17 views)
File Type: txt Widget Mode9 Manila Filenames.txt - [Click for QR Code] (1.1 KB, 19 views)
File Type: pdf LUA Ref v5.1.pdf - [Click for QR Code] (84.0 KB, 34 views)
File Type: cab CHTAddon_DevModeSwitch.cab - [Click for QR Code] (9.9 KB, 44 views)
HTC One
ViperOne 6.2.1+ Beta Sense 6.0 with Kangaroo Kernel

HTC One Mini
Completely stock and staying that way...

Google Nexus 7 Gen 2
MIUI 5-09

First HTC HD2
Tytung 4.4.2 DataOnExt

Second HTC HD2
MIUI JB DataOnExt
The Following 3 Users Say Thank You to Dunc001 For This Useful Post: [ Click to Expand ]
 
santod040
Old
#8  
santod040's Avatar
Recognized Developer / Recognized Contributor
Thanks Meter 8,417
Posts: 6,243
Join Date: Nov 2008
Location: NorCal

 
DONATE TO ME
Thanks Poy, Rat, Dunc, and all those involved with CHT and CHT widget dev.
This could prove to be very useful for anyone wanting to jump into making their own widgets and for collaborative efforts as well.
I look forward to seeing where this goes from here.
If I decide to add anything to the great info already posted, I will place it here.
Thanks for your efforts to get this going Poyensa.
Current Devices: HTC Thunderbolt | HTC Droid DNA | HTC One - m7 | HTC One - m8


Follow me on Twitter
ULTIMATE WALLS WVGA Wallpaper Collection
Donations always appreciated! Never required!


 
meltwater
Old
(Last edited by meltwater; 24th February 2011 at 09:45 PM.)
#9  
meltwater's Avatar
Recognized Developer
Thanks Meter 325
Posts: 2,066
Join Date: Jan 2009
Excellent thread, hope to try out the tutorial at some point.

At the moment interested in the toggle switches and how to make them, since it's not covered anywhere.

I've opened up rat_2665's toggle switch cab (hopefully that is ok - it is a good example).

The two key files are:
CHT_switch_DevMode.png
CHTlua_manila

The lua code is as follows:
Code:
Co0kieSwitchLink("DevMode Switch", "\\Windows\\CHT_switch_DevMode.png", _application.Store:GetValueChangedEvent(Lifetime_Permanent, "CHTI.AddonWidgets.DevMode"), function(l_1_0)
  if _application.Store:GetIntValue(Lifetime_Permanent, "CHTI.AddonWidgets.DevMode") == 0 then
    _application.Store:SetIntValue(Lifetime_Permanent, "CHTI.AddonWidgets.DevMode", 1)
  else
    _application.Store:SetIntValue(Lifetime_Permanent, "CHTI.AddonWidgets.DevMode", 0)
  end
end
, function(l_2_0)
  if _application.Store:GetIntValue(Lifetime_Permanent, "CHTI.AddonWidgets.DevMode") == 0 then
    return false
  else
    return true
  end
end
)
From the above you can identify:
The switch title - "DevMode Switch"
The graphic - "\\Windows\\CHT_switch_DevMode.png"
Trigger - _application.Store:GetValueChangedEvent(Lifetime_P ermanent, "CHTI.AddonWidgets.DevMode")
Action - function(l_1_0)
Switch position - function(l_2_0)

The setup.dll in the cab, sorts out the install side (as mentioned in the other posts).

Anyone know what lua file is the wifi switch? Or what regkey it monitors? Thanks.
Sorry if this info is written somewhere else, but I've not been able to find it so far.
HTC Touch HD
____
* Energy 28244|Feb 19| 2.5.2012114 Cookie *
Radio: 1.17.25.09

Sense Wiki | Facebook Tab v1.6 | RSS Tab | SenseUtil | CHTwPictureFrame
Android-On-A-Shoestring



___
PayPal: if you enjoy the fb/RSS tab!
The Following User Says Thank You to meltwater For This Useful Post: [ Click to Expand ]
 
ai6908
Old
#10  
ai6908's Avatar
Senior Member
Thanks Meter 266
Posts: 3,605
Join Date: Nov 2006
Location: Land of Lincoln

 
DONATE TO ME
Quote:
Originally Posted by meltwater View Post
Anyone know what lua file is the wifi switch? Or what regkey it monitors? Thanks.
Sorry if this info is written somewhere else, but I've not been able to find it so far.
I would like to know that as well.
Hit "THANKS" button if you like the above post!!
Moto Atrix HD ROM - Batakang
HTC Flyer (WiFi) ROM - Stock Honeycomb3.2 No Root
My UnderVolt Tweak for cfX
Tags
cht, lua, mode9, poyensa, widgets
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes