|
Steampunk clock/calendar resizing is such a chore... |
|
|
|
Thursday, 13 January 2011 |
|
 Steampunk widget MKII
The widget has had some large additions of code just to do one or two
small features. First of all I decided to get to grips with the resizing
of the whole clock. This was easier said than done. The clock is made up
of 70 discrete image components (probably too many) and each has to be
resized individually. The images are defined in the .kon file and each
has height, width, vertical and horizontal offset properties. These need
to be modified for all the images in order to scale the whole clock.
eg.
<image>
<src>Resources/pendulumSet.png</src>
<name>pendulumSet</name>
<visible>false</visible>
<hOffset>579</hOffset>
<vOffset>292</vOffset>
<opacity>255</opacity>
<width>46</width>
<height>192</height>
<hRegistrationPoint>23</hRegistrationPoint>
<vRegistrationPoint>192</vRegistrationPoint>
</image>
The code for changing the size is quite simple:
pendulumSet.hoffset = pendulumSethoffsetDefault / clockScale *
100;
pendulumSet.voffset = pendulumSetvoffsetDefault / clockScale *
100;
pendulumSet.width = pendulumSetwidthDefault / clockScale * 100;
pendulumSet.height = pendulumSetheightDefault / clockScale * 100;
The trouble is it has to be repeated for each image in turn, this
results in a hefty addition of code (280 lines) just to do a simple resize.
To get round this I decided to write a simple loop to go through all the
images and resize them automatically. This would reduce the additonal
code to just a few new lines. Unfortunately, it turns out there is no
simple function within the konfabulator environment or available in
javascript to select the next defined image so you have to write some
complex code to loop through your code identifying which image objects.
This turned out to be way beyond me. My chum Harry, came up wioth the
goods. He wrote me a complex routine which I inserted into my code to do
exactly that.
//===============================
// function to
//===============================
function getImages(object) {
screenwrite("Running Getimages");
log("Running Getimages ");
var images = [], elementType, element, obj, theName;
for (element in object) {
if (object.hasOwnProperty(element)) {
obj = object[element];
//log("obj ", obj);
elementType = String(typeof obj).toLowerCase();
//log("elementType ", elementType);
if (elementType === "object")
{
//log("obj = ", obj);
if (obj)
{
theName = obj.name;
//log("theName ", theName);
if (theName)
{
log("object name = ", theName);
log("object indexof = ", theName.indexOf("Image"));
if (theName.indexOf("Image") == -1)
{
//log("theName ", theName);
images.push(obj);
print(element + ": " + theName);
//screenwrite("Getimages",element + ": " +
theName);
//log("Getimages ",element + ": " + theName);
} //end if (theName.indexOf("Image") === 0)
} //end if (theName)
} //end if (obj)
} //end if (elementType === "object")
} //end if(object.hasOwnProperty(element)) {
} //end for
return images;
}
//=====================
//End function
//=====================
Unfortunately, it failed to recognise any of the images defined within
the .kon file. For some reason when the images are defined in the .kon
file they are not properly defined as image objects, the name property
appears to be undefined. To make the routine work all the image
definitions needed to be removed from the .kon file and instead they are
inserted into the main javascript code:
I transferred all the image defines from the.kon file to definititions
in the .js (what a tedious job)
eg.
I loaded them all (70 images) with:
pendulumSet= new newImage("Resources/pendulumSet.png",579,292, 46 , 192
, 255, "false",23,192);
backscreen = new newImage("Resources/backscreen.png", 350, 225, 0, 0,
255, "true", 0 , 0 );
.
.
.
Then I created this routine to register the images:
//=================================
// function to register a new image
//=================================
function newImage(src, hOffset, vOffset, width, height, opacity,
visible,hRegistrationPoint, vRegistrationPoint)
{
&
var o = new Image();
o.src = src;
o.hOffset = hOffset;
o.vOffset = vOffset;
o.width = width;
o.height = height;
o.opacity = opacity;
o.visible = visible;
o.hRegistrationPoint=hRegistrationPoint;
o.vRegistrationPoint=vRegistrationPoint;
return o;
}
//=====================
//End function
//=====================
This successfully defined the images and loaded them into an array where
they could be manipulated and properties assigned to resize the images.
However, this is as far as I got because the clock startup is now over a
minute long and uses loads of cpu...
So, I have reverted to the old .kon image definition method for the
moment and manually resizing instead of trying to do it the more clever
way.
I'll do some more testing but I fear that defining the images in the .js
makes startup a lot slower, or perhaps it is the routine to load the
images into the array. I'll have to test. There may be an issue with my
routine for registering the images. I'll save this for another day as I
was up to 03:30 am doing these changes and they have left me with a
annoying taste in my mouth and I am loathe to waste more time revisiting
them.
I will do so in a few days. For the moment I am off to put my laptop in
the oven... no really. More on this later.
 |
|
Last Updated ( Friday, 16 September 2011 )
|
Click on the image above.
(2)
Subscribe to this comment's feed