Lightquick Web Design - Elements of the past and the future combining to make something not quite as good as either

LightQuick Web Design - Latest News

HTML clipboardLightQuick has created a US version of the Goodwood Antiques targetted directly to US customers that want to buy in US dollars. The US market is potentially the largest market in the world for any product so it makes sense to focus upon this sector with a unique and targetted site. The US site can be found at HTML clipboard goodwoodantiques.com
You are here:
  • Decrease font size
  • Default font size
  • Increase font size
How to create a yahoo widget? PDF Print
(0 votes)

I'd be happy to show you the basics, it is really quite straightforward if not simple.

stamp I use the Photoshop CS to create the design. Photoshop uses layers, each cog, individual component exists on a layer and you paint it on that layer using the various methods that Photoshop has to do that. you can add shadows, internal gradients, colours, glows and the like using Photoshop tools. You build up the design in layers, each layer having a separate item on it.

stamp Then you group the layers in layer sets or groups according to their function on the widget. So, the slider on the steampunk clock widget is one layer set as it is going to be moved as a group of components. Fundamentally anything that is going to do something needs to be created as a layer set. Naming correctly is vital at this stage, every layer should be named according to its function. A silver ball on the end of the bar needs to be called something like "right hand silver ball for slider bar". groups need to be named appropriately after their function, the slider group for example should be called "slider".

When the design is done, you simply run a Photoshop script available from the Yahoo widgets developer's page. This script is run within Photoshop and converts the photoshop design groups to Yahoo widget entities. The script creates a XML file that describes each group/widget object's properties, ie: height, width, x and y offsets. It also creates a PNG image for each object and stores them in a \Resources folder created especially for the new widget.

The script is available here:
http://lightquick.co.uk/downloads/photoshop-script-to-create-yahoo-widgets.html?Itemid=264

You simply place it in the following folder:  DRIVE:\Program Files\Adobe\Photoshop CS\Presets\Scripts

A small PSD file with one or two layers will take no longer than a minute or two to render into a widget.

My steampunk clock /calendar, which is a very complex, multi-layer PSD takes approximately 20-30 mins to render into discrete objects. My machine is a core2duo 2.2ghz with 3gb Ram. The end result is a widget folder with a \Resources folder and a file with the  .KON suffix. This file is the thing you double-click on, if the Yahoo widget engine is installed it will then use the widget runtime engine to create your first Yahoo widget. It will run on your Windows or Mac OS/X desktop, it will be movable but at this stage it won't actually do anything.

stamp See here for my stamp widget that is basically the result of the above process:
http://lightquick.co.uk/downloads/other-downloads.html

This will demonstrate a fully functioning yahoo widget - but there is no code behind it to make it actually do anything. It just looks pretty on the desktop and you can move it about. You could do the same with any image you have to hand.

So, to make it do anything you need to add some code, in the case of Yahoo widgets this is achieved with Javascript. To do this you need to create a .js file in the widget folder and call it from the .KON file. Have a look in my thermometer .KON file and you will see a call to thermometer.js

<action trigger="onload"> <![CDATA[
           include("thermometers.js");
           startup();
// ]]> </action>


This action line causes the.KON file to call a javascript program called thermometer.js. punk-camera.png

For each object in the .KON file you can add some javascript code to handle a mouse drag or click event. You can see how this is done by opening thermometer.js in my widget and having a poke around. You can add similar code to your widget. Then it is all up to you. You might get more of an idea from the steampunk widget as it is a lot more complicated and has more functions to comprehend. Here is an example of some typical code:

<name>redTap3</name>
<hOffset>951</hOffset>
<vOffset>1257</vOffset>
<opacity>255</opacity>
<onMouseDown> <![CDATA[
               redTap3.rotation=redTap3.rotation +16;
               if (preferences.muteswitchPref.value == "enable")
                      {  puffit();  };
               if (bulbglow.visible == true)
                      {
                          bulb.visible = false;
                          bulbglow.visible = false;
               if (preferences.muteswitchPref.value == "enable")
                     
                          play(suck,false);  };
                      }
                      else
                      {
                             if (preferences.muteswitchPref.value ==
                                              "enable")
                                      {  play(zzzz,false);  };
                             bulb.visible = true;
                             bulbglow.visible = true;
               }
// ]]> </onMouseDown>
<visible>true</visible>

My widgets come packaged up, zipped, so you have to unzip them before you can open them and see the contents. There is a widget called the widget converter by Ricky Romero that converts widgets back and forth between zip and folder formats, you'll need that.

The converter widget is available here:

http://lightquick.co.uk/steampunk-widgets.html?Itemid=264

steampunk-console.pngYou'll also need a decent editor. The ConTEXT editor is the one you'll most probably get to grips with straight out of the box. Open source. The editor is available here:

http://www.contexteditor.org

Development has stopped on the context editor but don't let that put you off - it is still a very good, streamlined code and general edtor.

Top tip, if you are going to venture into widget development, backup your widget code EVERY time before you do any packaging/widget deletion. The widget engine has the nasty habit of occasionally removing your code entirely when you remove a widget, so you need to have backups.

I hope the above isn't daunting, once you know what to do it is easy. Creating that stamp widget took 15 minutes, creating the steampunk clock/calendar widget cumulatively took weeks of my time.

photoshop.pngThe two versions of Photoshop CS that I use are version 8.0 (Photoshop CS1) and Photoshop CS2. The script works with both these versions of Photoshop. A full blown version of Photoshop is fairly expensive but you need not worry as you can download the older but fully functional versions of Photoshop for free at the link below.

GIMP (the GNU Image Manipulation Program) can work with Photoshop layers and might be able to run a photoshop compatible script - I have not tried it. GIMP is free and you will be able to design a widget using it. I just do not know whether the conversion script would function. To manually create all the layers and export them individually to PNG files, then create the XML file to position the objects as a manual process is entirely feasible and can be done using GIMP. It is just slow and painful. My suggestion is to get a copy of Photoshop by hook or by crook!

Photoshop is available here:

http://www.adobe.com/downloads/cs2_downloads/index.html


As and when I get time I will drop some more screenshots here to illustrate the process.
 

If you liked this, please consider buying me a beer., any contribution is appreciatedmfBeer Joomla! Plugin

Comments (0)Add comments

Write comment

busy
Last Updated ( Sunday, 24 March 2013 )
 
< Prev   Next >

Cookies

By EU law we have to leave this message about cookies - In order to deliver a personalised, responsive service and to improve the site, it remembers and stores information about how you use it. This is done using simple text files called cookies which sit on your computer. These cookies are completely safe and secure and will never contain any sensitive information. They are used only by Lightquick or the trusted partners we work with ie. Google. By continuing to use this site you accept the use of these cookies. Remember all sites use these cookies but if you are unhappy with this cookie usage, then unfortunately we have to ask you to leave the site.

 

RSS feeds listed below - Select the format of feed that you require.

Steampunk Yahoo Widget

How about something special for the weekend sir?

Steampunk Yahoo clock/calendar widget download

LightquSteampunk Stamp Widgetick have a nice little Yahoo widget for you to download. Click on the image above.

Do you need a stamp with that madam?

     

Steampunk Widget Downloads

Download the Steampunk Underwidget here

Steampunk Underwidget 0.3

Downloads: 186
Avg. Rating:
StarStarStarStarStar(3)

Download the Steampunk Moon Phase Widget here

Steampunk Moon Phase Widget 0.9

Downloads: 236
Avg. Rating:
StarStarStarStarStar(6)

Download the Widget Vault - A Steampunk Widget Appstore here

Widget Vault - A Steampunk Widget Appstore 1.1

Downloads: 305
Avg. Rating:
StarStarStarStarStar(3)

Download the Steampunk Rotating Earth Widget here

Steampunk Rotating Earth Widget 1.0

Downloads: 1334
Avg. Rating:
StarStarStarStarStar(61)

Download the Steampunk Volume XWidget here

Steampunk Volume XWidget 1.0.1

Downloads: 675
Avg. Rating:
StarStarStarStarStar(0)

Download the Steampunk Volume Widget here

Steampunk Volume Widget 1.0.4

Downloads: 872
Avg. Rating:
StarStarStarStarStar(3)

Download the Steampunk Orrery Plasmoid Widget for Linux Ku... here

Steampunk Orrery Plasmoid Widget for Linux Ku...

Downloads: 670
Avg. Rating:
StarStarStarStarStar(5)

Download the Steampunk Orrery XWidget here

Steampunk Orrery XWidget 0.1

Downloads: 872
Avg. Rating:
StarStarStarStarStar(2)

Download the Steampunk Orrery Rainmeter Skin here

Steampunk Orrery Rainmeter Skin 0.1

Downloads: 925
Avg. Rating:
StarStarStarStarStar(6)

Download the Steampunk Resource Monitor Widget here

Steampunk Resource Monitor Widget ver 1.0.2

Downloads: 3504
Avg. Rating:
StarStarStarStarStar(45)

Download the Jupiter Planetary Desktop Widget here

Jupiter Planetary Desktop Widget 1.0.1

Downloads: 928
Avg. Rating:
StarStarStarStarStar(5)

Download the Steampunk Clock Widget here

Steampunk Clock Widget ver 1.1

Downloads: 1857
Avg. Rating:
StarStarStarStarStar(6)

Download the Joomla Multi-Site Status Steampunk Yahoo Widg... here

Joomla Multi-Site Status Steampunk Yahoo Widg...

Downloads: 344
Avg. Rating:
StarStarStarStarStar(5)

Download the Yahoo Widget SDK and Runtime Engine for Windo... here

Yahoo Widget SDK and Runtime Engine for Windo...

Downloads: 2798
Avg. Rating:
StarStarStarStarStar(9)

Download the Steampunk Orrery Calendar Clock Yahoo Widget here

Steampunk Orrery Calendar Clock Yahoo Widget

Downloads: 6942
Avg. Rating:
StarStarStarStarStar(2)

Download the Steampunk Weather Widget here

Steampunk Weather Widget 1.0.8

Downloads: 51750
Avg. Rating:
StarStarStarStarStar(38)

Download the Cyberpunk Yahoo thermionic nixie tube valve w... here

Cyberpunk Yahoo thermionic nixie tube valve w...

Downloads: 5319
Avg. Rating:
StarStarStarStarStar(15)

Download the Steampunk CPU / GPU temperature monitor Yahoo... here

Steampunk CPU / GPU temperature monitor Yahoo...

Downloads: 11700
Avg. Rating:
StarStarStarStarStar(26)

Virtuemart Assistance

If you require assistance regarding VM or Joomla then please contact lightquick here...

Contact me here

Site Total Page Views

mod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_counter
mod_vvisit_counterToday124
mod_vvisit_counterYesterday1115
mod_vvisit_counterThis week6634
mod_vvisit_counterThis month1240
mod_vvisit_counterAll Visitors1131900

Site Last Modified

Site Last Modified:Thursday 24 July 2014, 14:40

Administrator Login Form

Log In / Sign Up

Our Sponsors Adverts

Support Sponsored Links

Click on our sponsors advert to support this site... it helps pay for all the free downloads you will find here