Converting a Bowlet to a Papilio-powered Cydget

Since Bowlets are made with HTML, CSS, and JavaScript, and the APIs exposed by Papilio are made to be compatible with Bowtie’s APIs, converting existing Bowlets to Papilio-powered Cydgets should be fairly simple. Here a few simple steps to follow.

Rename your Bowlet from SomeBowlet.bowTie to SomeBowlet.cydget
Make sure to check Get Info and make sure that it definitely ends with ".cydget" and not ".cydget.bowTie", as that won’t work.
Make sure the title of your Bowlet's index.html is the same as your Cydget's folder.
If your Cydget's folder is SomeBowlet.cydget, then the title of the page should be "SomeBowlet". The title is used by Papilio do directly access your Info.plist.

Note that I assume your Bowlet's HTML file will be called index.html, but it could be called anything else. In that case, make sure to substitute index.html for whatever your file is called for the rest of the guide.

Copy papilio.compiled.js to your .cydget folder and add the following tags inside of the head tags in your index.html:

<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="papilio.compiled.js"></script>

Add refreshCycle(); to the end of your body's onload attribute.
It must be the last element in the onload attribute, because if your onload contains an init function, Papilio may run before your variables are properly initialized, and therefore not work.
```
<body onload="refreshCycle();">
```
Or in the case where your code has an init function or other code in there:
```
<body onload="init(); refreshCycle();">
```
Cydget (the framework) requires a few things be added to your Cydget's Info.plist to know what to do when loading:
```
<key>Plugin</key>
<string>WebCycriptLockScreen</string>
<key>Configuration</key>
<dict>
<key>Homepage</key>
<string>file:///System/Library/LockCydgets/SomeBowlet.cydget/index.html</string>
<key>CycriptURLs</key>
<string>^file:///System/Library/LockCydgets/SomeBowlet\.cydget/index\.html$</string>
<key>Scrollable</key>
<string>NO</string>
</dict>
```
Please note that you must not remove anything from the Bowlet's existing Info.plist; Papilio gets certain information, such as artwork size from the plist.

Also make sure to substitute every occurence of SomeBowlet with the name of your Bowlet; the same one that you set as the title tag earlier.
Upload your Cydget to /System/Library/LockCydgets and enable it in Cydget's Settings pane.

Additional Touches

After following this process, you should have a Cydget that fully replicates your Bowlet's functionality. That said, it won't be perfect straight away.

Your Bowlet will be in the upper left of the screen; Papilio in itself does not manage anything but communication with iTunes, so you will have to fix your CSS yourself to center it properly.
~~There is currently no way to make the lock background appear through Cydgets; you will need to set your own background in your CSS.~~ If you set the background to /private/var/mobile/Library/LockBackground.jpg, the lock background will appear if it was set through the Photos or Settings app. If it was themed through WinterBoard, tough luck.
There is currently no way to make the native date/time LCD appear through Cydgets. However, Papilio provides a helper class to render your own more easily.

Caveats

Only Bowlets with default callback names will work with this method for now. If you don't know what this means, don't worry; 99% of Bowlets out in the wild aren't affected by this. It's just a precaution to know about in case you run into the one or two Bowlets that do this.
Although Bowlets using jQuery and other swiss army knife JavaScript frameworks should work when ported to Papilio, please remember that you are running on an iPhone, and not a desktop platform. Performance will suffer, so try to make your JavaScript as simple as possible, and use minimal animation frameworks like Émile instead of bringing out the big guns.

A Final Word

Please don't redistribute ported Bowlets without the original author's consent.

Back to Sakurina's iPhone Hacks
Back to r-ch.net