XWidgetSoft Forum

The U boat clock Xwidget is a dual time clock and stopwatch. Functional and gorgeous at the same time. This is the Xwidget that I created with the assistance of Cannuckenken/kjc66 and Harry Whitfield. It was originally a functional duplicate of Kjc66's original Xwidget clock but the widget has now advanced and moved on adding stopwatch functionality and two faces. It is now fundamentally different in operation, dynamic resizing, stopwatch functionality &c but it keeps the same underlying style.





CREDIT:

You can find Kjc66's Xwidget here - http://kjc66.deviantart.com/art/U-boat-574788544

BACKGROUND:

Kjc66 was working creating this clock using the Xwidget engine and while he was working on his own changes I just decided to create my own just to see how easy it is to build a clock for both the Xwidget and Yahoo widget. It turns out that the process is MUCH easier in the Xwidget engine. Using the Yahoo widget engine all the logic is done in XML and javascript code, in the Xwidget version there is no code required at all if you use Xwidgets built-in functions, timer, rotators &c.

CHANGES:

What changes did I make from the original Xwidget?

Whereas the Xwidget version does everything using core functions in the Xwidget IDE, this Xwidget does all the stopwatch functionality in javascript code. This code had to be written by hand rather then use the Xwidgets built-in functions.

o Took a new dial face from the web.
o Created new hands with textures and depth.
o Re-created the top right dial from scratch.
o Re-created and relocated the bottom left mini-dial.
o Added new shadows and reflections to give more depth and brightness to the face.
o Added new shadows on the hands.
o Made a completely new take on the rim.
o Added about us image with links and credits
o Minor fixes to numbers and background.
o Added three mini gauges.
o Stopwatch functionality added.
o Added menus and licence code.
o In the logic more accurate timekeeping with a smoothflow second hand.
o Updated default image
o Ability to switch between two timezones for both clocks on the main face.

o Added zooming in/out via the use of Mousewheel.
o New functionality to resize from within the preferences
o Now auto-resizes on startup
o Added comprehensive comments to explaining the code
o Alternative face, added ability to switch
o Added hints
o Add stopwatch functionality
o Add images to stop watch buttons and fade code.
o Stopwatch keys now display the stopwatch face if pressed
o Added ability to turn off hints.
o You can now define which way the mouse scrolls up/down for dynamically resizing the widget.

Quite a lot of changes and they all take time to complete. This was a learning process rather than a conversion process just to create another widget. I have seen how Xwidget handles registration points, image rotation and shadows. Discerned some of Xwidget's coding limitations, inability to detect keyclicks on an image, 0 opacity does not deactivate an object, moving a rotator in smaller intervals than a second requires javascript.

THINGS TO DO:

// The addition of sounds.
// Main screen function to be modified to place the widget correctly on tablets in portrait/landscape mode.

CREDIT:

All credit to kjc66 for his inspiration and the work he has done to find the original source clock from Itala Fontana, he recovered some of the major numbers, built the two small dials to create the whole concept. I used his PNGs as the base and added to that. I could have used the original image from Italo Fontana but it would have meant a fair bit of extra work so using Kjc66's parts allowed me to build a working widget much quicker. Credit to kjc66 for his work and to Italo Fontana for making the original design - the real clock that goes on a wrist.

Thanks also to kjc66 for the inspiration to make me start presenting my widgets in a more dramatic fashion too!



NOTE: There is also a Yahoo widget which is functionally identical to the Xwidget version: You can see that here: http://yereverluvinuncleber.deviantart.com/art/U-Boat-Dual-Time-Clock-Yahoo-Widget-576580516

Cool! Thanks for sharing

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

New version with sounds and on-widget controls.

Great!!!
Suggestion: I think you should edit 1) the "Default" image (should be the same size/position when the widget loads) and "empty" (move all the needles to "0") and 2) edit a bit the position of the background image, when you use the "switch mode".
The second one is not at the same position (x,y)

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

Noted - no matter where I place the two images, the scaleto - seems to place them so they jump about a bit.
Default image noted

Don't think you can make the "Default" image match the same size/position when the widget loads. This is because the widget resizes itself automatically to the last size set by the user so it is always different. Unless, of course you know how to resample the default image? If so, then please tell. It could be done by timer periodically.

I'm not sure if I know why the default image is there, if it is only present for displaying on the Xwidget dock or the gallery, then it should not really display on the desktop at all prior to running, there is no need for it at all. I only have a default image just in case it is important to have it in some other respect.

Simply, the widget should run and only appear when it is ready to go.

I have some changes to make to the help file but for the moment it is almost good enough.

The default is actually the image that is shown ON DESKTOP during the first run/loading of the widget. It's a steady png image that is created after pressing the corrisponding button. For the XWidget dock there is the "Widget icon" menu.
Since your widget has this auto-resize feature, an idea is to create an "empty" default image (uncheck the "Show in Default image" for all the components and then press again the "Automatically generated" in "Default Image")

When I started to create my first widgets, Tony told me about this (that the default image should be "clear", without the old data on it)
From my experience I can say that:
1) Better looking. It's a bit "ugly" see old data during loading
2) Helps for the proper loading of the widget, especially when it uses java script.
4) A bit faster loading, better reading data, less possibility to crash.
5) There are some effects or animations that you can add and are shown when the widget is loading

Tony can tell you more of course, but these are what I noticed all this time..

_________________
...and remember: don't take life too seriously...
My profile on Deviantart: http://jimking.deviantart.com/

I'll have play - thanks for that. Appreciated.