Tutorial: How to create your own Google Calendar BumpTop widget

While external widgets functionality is a bit limited, they are also very simple to make. I'm going to show you how to create a BumpTop external widget without any programming skills required. I hope this will inspire someone to write their own widget. And share it with others, of course :).

This widget will create a screenshot from Google calendar and create a wall type calendar.

I heve used Siteshooter for getting the image and ImageMagick for converting it.

You have to log in to your Google Calendar in Internet Explorer, so Siteshooter can take a screenshot.

1. 1. Download ImageMagick and siteshooter After installing Imagemagick rename convert.exe to imconvert.exe as explained here.
2. 2. BumpTop Widgets are stored in
   C:\Users\Userame\AppData\Roaming\Bump Technologies, Inc\BumpTop\Widgets (Vista) or
   C:\Documents and Settings\Userame\Application Data\Bump Technologies, Inc\BumpTop\Widgets (XP).
   Navigate to this location and create a new folder - name it calendar.widget (must have .widget extension). Then copy siteshooter.exe to this folder.
3. 3. Create two more folders and name them data and images, then copy background image (i used size 800x600 in this example) to images dir and name it calendar-back.jpg.
4. 4. Create a copy of widget.json from another widget or create a new file (check this how-to for more info about widget.json).
5. 5. Replace application name with calendar.cmd:
   "startupApplication" : { "path" : "calendar.cmd", "args" : "-run"},
6. 6. Replace icon image with calendar.png and label with "calendar"
   "icons" : [{"filename" : "calendar.png","label" : "calendar","launchApplication" : {...



7. 7. Replace application to be launched when callendar image is double clicked with firefox and google calendar's url as parameter. Make sure to include real path of firefox. Note that backslashes are doubled.
   "path" : "C:\\Program files\\Mozilla Firefox\\firefox.exe","args" : "
   http://www.google.com/calendar/render"}}]}



8. 8. create a new text file and name it calendar.cmd:
   cd ..
   SiteShoter.exe /URL http://www.google.com/calendar/render /Filename ' + '.\images\calendar-google.png
   imconvert .\images\calendar-google.png -crop 175x150+10+155 .\images\calendar-google-s.png
   imconvert .\images\calendar-google-s.png -resize 200% .\images\calendar-google-m.png
   composite -gravity east -geometry +100+0 .\images\calendar-google-m.png .\images\calendar-back.jpg .\data\calendar.png
   This script will take the screenshot, crop it, resize it and join it with background image.
   That's it. Restart BumpTop to test the widget.
   Or skip all that and get it here :).



9. 9. To create an installer, right click on calendar.widget folder and select add to archive... from winrar's menu. Select sfx archive, advanced, sfx options and enter "%AppData%\Bump Technologies, Inc\BumpTop\Widgets" (without "); press enter to create archive.
10. 10. Upload it (http://www.filehostingreview.com/), then come back here and write about it!

This widget only refreshes at BumpTop startup, so you may want to add it to windows scheduled tasks (under control panel).

The scrip in this example, does only the most basic stuff. If you wish to add some design, check some ImageMagick examples here.

Leon

Widget mini How-To for Bumptop

Let's actually look at this one for a min.
Here is the general outline for How to do widgets in Bumptop.

First we will have to create a "Widgets" directory in : C:\Users\Your Name\AppData\Roaming\Bump Technologies, Inc\BumpTop
I have all Vista and Win 7 machines and this is where I find it. It might be different for XP. Been too long, Can't remember...
Anyway. Here in the "Widgets" directory you will create your widget's directory.(Try explaining that one to an idiot :) ). We will give an example of "Clock.widget" The widget's directory name must end with ".widget" or Bumptop will not recognize it as a widget.

Now in the "Clock.Widget" directory, you will need to have three things.
1) a "widget.json" file that will contain the data for bumptop to piect together as a widget. This will look like this:
{
// Widget header block
"header" : {
"version" : "0.1",
"name" : "Clock 1",
"author" : "Indakind Designs, Inc.",
"description" : "Gives Bumptop a clock",
"url" : "http://widgets.indakind.com/",

// NOTE: This represents the schema from which this widget file will be validated
// against. This allows BumpTop to add and modify default widget changes as
// time progresses, and allows theme developers to ensure that their widgets
// work on the latest compatible versions of BumpTop. Do not change this
// value, unless your widget conforms to the specified in the value.
// Please see the widget docs for more information.
"schema" : "widget/0.1"
},

"widget" : {

"relativeWorkingDirectory" : "data/",

// application to load on startup, and has the same lifetime as the BumpTop process itself
"startupApplication" : {
"path" : "Clock.exe",
"args" : ""
},

"icons" : [
{
"relativeWorkingDirectory" : "data/",
"filename" : "clock.png",
"label" : "Clock",
"launchApplication" : {
"path" : "Clock.exe",
"args" : "-edit"
}
}
]
}
}

and this brings us to our second point.

2) you will need a working directory within "Clock.widget" to contain any and all icons/pictures you want to show on the desktop. For a clock we will only have one picture that is updated every min. So we have the "relativeWorkingDirectory" assigned as "data/" :
C:\Users\Your Name\AppData\Roaming\Bump Technologies, Inc\BumpTop\Widgets\Clock.widget\data

Which brings us to our third point. The picture.

3) The way Bumptop uses images to make 3D icons is different. But if you think about it, it is good and we can use that. We Have a choice of different filetypes to choose from in Bumptop: jpg, bmp, gif, animated .gif (Still Buggy), and my personal favorite, .png. I ALWAYS use .png for the Alpha Transparency factor. I recomend that you use it as well.
Anyway. this image that goes in the "Data" folder will be the only icon in this widget.

When you are making widgets for Bumptop, I tend to make the shortcut load up a dialog from my .exe in order to edit the settings. ergo the lines:
"launchApplication" : {
"path" : "Clock.exe",
"args" : "-edit"
}
You must also include the lines to start up the application:
"startupApplication" : {
"path" : "Clock.exe",
"args" : ""
}

Well, That should about cover it. Yes it would be nice to have an actual API to work from. But HEY, They are doing us all a favor by doing this much. We should say Thank You.

Thank You Bumptop :)

L8r

Jon

If you want to add your own BumpTop related tutorial (or just a tip), the forum is the place to post.