Shop Mobile More Submit  Join Login
About Deviant Member Dean BeedellMale/United Kingdom Groups :iconyahoowidgeteers: YahooWidgeteers
 
Recent Activity
Deviant for 3 Years
Needs Premium Membership
Statistics 435 Deviations 2,925 Comments 40,872 Pageviews

Newest Deviations

Favourites

Groups

Activity


Steampunk Weird Clock Yahoo Widget and Icons by yereverluvinuncleber
Steampunk Weird Clock Yahoo Widget and Icons
This is now fully completed, just a few bugfixes this update!

Pleeeeeease vote here: rocketdock.com/addon/icons/469…

Changes:

o Hands rotate to more or less the start position when the chain is pulled.
o The help valve shrinks when the widget is resized.
o Tooltip added to the help page
o New sound added, sounds effects re-ordered
o New security and dock images

Taking an older widget I was dissatisfied with and making it better. Well, actually making it worse, grunging it and weathering it, breaking bits off, adding shadows, menu options, making the crane and the valve actually function. Adding sounds &c.

This is now both an icon and a widget that you could certainly use on your desktop. Both are included in the zipfile.

Clicking on the rim will cause a locking pin to appear locking the widget in place. It has complete menus and new licence code.

The widget clock is a moveable widget that you can move anywhere around the desktop as you require. It tells the time just as you would expect it to do so.

Double-clicking on the Clock will cause a personalised Windows/Mac application to fire up. The first time you run it there will be no assigned function and so it will state as such and then pop up the preferences so that you can enter the command of your choice. The widget takes command line-style commands for windows or Mac OS/X.
This is part of a small set of icons/widgets for your desktop, there are plenty more.

Not quite sure what you are going to use the icon for, possibly for acces to some time or calendar function? That is up to you to decide. This icon is eminently usable on windows/ Mac OS/X / Linux &c. The widget is usable on both Windows and Macs.

The widget is a Yahoo widget and it needs the yahoo widget engine. You can get that here: lightquick.co.uk/steampunk-wid…

Here is just one more over 360 steampunk icons that I have created that will leave your Windows or Mac desktop looking absolutely spiffing. There is a whole set of the little thingies and I must say they do look very steampunk indeed! They really are a suitable replacement for the boring old default icons that come with Rocketdock/ObjectDock &c.

This icon and the others like it will spruce up your desktop and give it a bit of Victorian class. Compatible with MobyDock, ObjectDock, RK Launcher, and your default Windows icons.

Provided in the following formats:

Multiple size PNGs
Windows multiple size .ICO
Mac OS/X .ICNS
Mac OS/X finder format

To View: - You can see all my icons by clicking here: rocketdock.com/user/107284/add…

To Download : - I have created a couple of steampunk icon sets but you can download the main one here:
rocketdock.com/addon/icons/383…

If you want any new icons then just ask! I am always open to new (or old) ideas - please leave a comment, these icons are quite hard to do and a nice comment makes my day.

Rocketdock Installation: In the rocketdock folder there is a subfolder called icons. Move these icons into that folder or create a subfolder called steampunk icons and copy them in there. Then you simply change each of your individual icon images to any one of these. Easy enough.

The only condition for downloading and using is that you leave feedback. Please leave a message and rate the icons as it is the only payment I get for creating this small desktop addition :D

Thanks! Do enjoy the icon.
Download there on the right at the top - that's it, just there. Ooh yes, that's lovely, thankyou.
Loading...

Strange how we are unable to upload videos directly to DeviantArt but we can do so in the journals. In my recent deviations I have simply provided a link to a short video on youtube and knocked up the image to get your attention. However, here I can embed the actual youtube video.



All credit to Jeff Wayne and Rage Software & GT Interactive at www.thewaroftheworlds.com/

These are the two introductions from Jeff Wayne's War of the Worlds RTS PC game.

The original videos are very low quality and very small in width and height. It was also bundled in a format that was not available to all systems. So, I have extracted the video from the Bink FMV files bundled with the PC game, removed the interpolation that caused the weird horizontal lines and have created a new version with smoother and less jagged video.

The quality is not up to modern standards but we aren't going to get any better unless the chap who worked on the game lets the originals go free given that the two companies that created the game went bust and the rights and ownership to the original images and videos is probably in dispute. I doubt that we will see the originals ever, certainly for the moment this is probably the best you will get.

Having said that I have just found higher definition snippets in this video on youtube.



Above you'll see some parts of the original Jeff Wayne PC game video content in higher definition. The content is clearly still available but has not yet been released in high def. yet - Chaps - enjoy the music and the girls!

Ladies, forgive me.

One day I may recreate these videos given time, a fair wind and a source of cash.



Hope you like these as much as I do. If you need advice on how to do this embedding, just ask, it isn't hard.

I'd be happy to show you the basics, it is really quite straightforward - if not simple. I create all my widgets first as Yahoo /Konfabulator widgets as the process is the easiest of all the engines. Then I convert to other widget engines as I wish, taking the code and porting it.

To create a Konfabulator or Yahoo widget is really just a few steps. First of all, take your image, pull it into Photoshop.

click to download the script from Adobe

I use Photoshop CS to create the design. Photoshop CS is the oldest version of Photoshop. It is a superb product and can do everything the later versions can do in respect of design and creativity. Later versions offer enhancements that can be useful but most are unnecessary. The earlier version is also much faster to operate and respond. Regardless, all that is demonstrated here is fundamentally the same in the later versions. FYI, you can get older versions of all the Adobe products entirely for free. All you need to do is register at adobe. The link to the old versions is here: helpx.adobe.com/creative-suite…

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.

Then you group the layers in layer sets or groups according toPhotoshop layers windows their function on the widget. So, the slider on the steampunk clock is created as a layer set/group  as it is going to be moved as a single group of components. Fundamentally anything that is going to perform a function needs to be created as a layer set/group. Naming the layers correctly is vital at this stage, every layer and group 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". A group of layers that will be a moving component, for example a crank handle, needs to be named? Yes you've guessed it - "crank handle"! Note: Each layer in your design needs to have a transparent background.

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

The script is now available here:
lightquick.co.uk/downloads/pho…

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

The script is called from the scripts menu.
 

A small PSD file with one or two layers will take no longer than 30 seconds to a minute or two to render into a widget. When done, copy the whole widget into a development location on your drive so that you don't accidentally overwrite it when you re-run the script.
My Steampunk Clock/Calendar Widget
My steampunk clock /calendar, which is a very complex, multi-layer high definition PSD takes approximately 20 mins to render into discrete objects. My machine is a core2duo 2.5ghz with 3gb Ram. The conversion process is fascinating to watch. The design is disassembled piece by piece, saved and then when the design has been completely deconstructed you will see it quickly reassemble and a widget is created before your eyes. You will need to close all other apps to free as much memory as you can if you are working with a very complex photoshop design.

The end result is a widget folder with the same name as your photoshop design, contained within a \Resources folder and a file with the  .KON suffix. This .KON file is the thing you double-click upon, if the Yahoo widget engine is already installed it will then use the widget runtime engine to run your first Yahoo widget. It will run on your Windows or Mac OS/X desktop so you have a multi-platform widget, it will be movable but at this stage it won't actually do very much. It will have a right click menu and will be moveable, it will also appear on the widget dock.

click to get this widget See here for my stamp widget that is basically the result of the above process:
lightquick.co.uk/jdownloads/br…

This will demonstrate a fully functioning yahoo widget - In the resources folder you will find all your layered and grouped images created as individual portions of the design, broken down into their constituent components. You'll have these and the .KON file that describes where these components will be displayed. However, there is no code behind any of this that would be needed to make it actually do anything. At the moment, 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. Note: Since I started to write this article I have added a bit of functionality to the stamp widget so there is now some more code for you to analyse.

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. See Figure 1. below.

click to get this widgetHave a look in my thermometers widget and open it using the widget converter. The widget converter is a widget you install and decompresses other people's widgets so you can see how they are constructed. You can copy/borrow code from them and see how things are done. Each widget is designed differently and there are many methods to obtain the same result. It is up to you how you do things.

My widgets come packaged up, zipped, so you have to unzip them before you can open them and see the contents. The widget converter that converts widgets back and forth between zip and folder formats is available here:

lightquick.co.uk/downloads/yah…

The cpu/gpu thermometer is not the best-written widget in the world. It was one of my first but it will still give you an idea as to how it is put together. The widget can be downloaded here:

lightquick.co.uk/downloads/ste…

click to get this widgetAssuming you have decompressed and opened my thermometers widget you'll have a widget folder and a few files within. Open the .KON file and you will see a call to thermometer.js. This action trigger line causes the.KON file to call a javascript program called thermometer.js. It does this when the widget loads and immediately after runs a function called startup. The startup function would be the main program function.

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


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 clock widget as it is a lot more complicated and has more functions to comprehend. Here is an example of some typical code, a mix of XML and javascript:

<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>


This demonstrates the mousedown event on an object called redtap3. In one of my widgets redtap3 is a red valve and when it is pressed the red valve rotates by sixteen percent. It then calls a function that emits a puff of steam. The next thing that occurs is that two images called bulb and bulbglow are made visible. You get the idea...

This shows how code can be attached to an image so that when it is clicked on something happens. This is XML code with javascript embedded between the tags <![CDATA[   and   // ]]> . The same code could be called instead within the thermometer.js code and it would look like this:

//==============================
// the tap turns...
//==============================
redTap3.onMouseDown = function () {
               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;
               }

};

You need an editor!Simple javascript. Now, even for simple widget/programming development there is often an IDE. There is unfortunately no IDE for Yahoo Widgets. Instead you'll 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. I use it ALL the time for everything as it really rather good. The editor is available here:

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 editor. Notepad++ is another good alternative.
 
Without an IDE debugging can be difficult. So, for debugging there is a solution provided by the developers, a debugging window which shows errors during widget runtime. This functionality is difficult to find for some. So pay attention. :) It is turned on by finding the Yahoo Widget Engine icon in the systray. Hovering over that icon and pressing shift+ctrl then right clicking on the mouse will bring up a menu with an extra hidden option - DEBUG. Click on it, enable it. Then close and restart your widget. This time the debug window will appear and any errors will be shown as debug messages.

A simpler way is to put these lines in the beginning of your .KON file.

    <settings>
        <setting name="allowCustomObjectAttributes" value="true"/>
        <setting name="debug" value="on"/>
    </settings>
 

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. To prevent this don't store your development widgets in the default widget folder, put them elsewhere in a separate development folder.

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 but it is VERY complex.

GNU is fine editorThe 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 above.

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 and an editor. It is just a little more slow and a bit more painful. My suggestion is to get a copy of Photoshop by hook or by crook!

Some might ask themselves why create a Yahoo widget at all? Well, the reason I do it is that the YWE! is the most elegant solutions of all the widget engines. It uses almost pure javascript which means that your code can be re-usable on the web with only a little migration. Also, using the process described above, it is much easier to create a Yahoo widget than say creating a Xwidget version of the same sort using the Xwidget IDE. The conversion to Xwidgets is relatively simple and I will document it here later. The javascript in the two engines is more or less identical.

It is as simple as this - when your chosen widget engine goes obsolete will the code still be usable elsewhere? With javascript the code will always work somewhere. Your investment in time is safe. The code will always be readable and usable. If the yahoo widget engine stops working then it can run under Xwidget, if Xwidget goes under then it can be ported to QT Widgets. Can the same be said of Rainmeter code? (A Rainmeter expert is welcome to answer this question)

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

 

"Dagenham is dead. This monstrous misplanned place
Must kill the best that's in the human race,
The town's a blot upon the River's side"
The traveller spoke, but yet I knew he lied.

Dead? When I have seen those bitter fights
Where bosses schemed, and craftsmen held their rights,
And welded with a sure and patient hand
Their doubting fellows in a solid band?

Where girls with shielded eyes and new-found skill
Beneath a blinding glare of sparkling showers,
Make white-hot metal streams obey their will
Creating joints that held tremendous power.

No! Dagenham lives, and spite of darkest night,
Will play its part in struggles for the right.
The ones who live amidst this sorry scheme
Will help to build the Britain of our dream.

F.L. Ives
Dagenham is Dead.
Your thoughts on this poetry please. Not before published on an artistic site such as this. My grandfather's unpublished work.
Loading...
Steampunk Weathered Clock Icon and Widget by yereverluvinuncleber
Steampunk Weathered Clock Icon and Widget
This is now both an icon and a widget that you could certainly use on your desktop. Both are included in the zipfile.

Please vote here: rocketdock.com/addon/icons/469…

Clicking on the rim will cause a locking pin to appear locking the widget in place. It has complete menus and new licence code.

The widget clock is a moveable widget that you can move anywhere around the desktop as you require. It tells the time just as you would expect it to do so.

Double-clicking on the Clock will cause a personalised Windows/Mac application to fire up. The first time you run it there will be no assigned function and so it will state as such and then pop up the preferences so that you can enter the command of your choice. The widget takes command line-style commands for windows or Mac OS/X. 

This is part of a small set of icons/widgets for your desktop, there are plenty more.

Not quite sure what you are going to use the icon for, possibly for acces to some time or calendar function? That is up to you to decide. This icon is eminently usable on windows/ Mac OS/X / Linux &c. The widget is usable on both Windows and Macs.

The widget is a Yahoo widget and it needs the yahoo widget engine. You can get that here: lightquick.co.uk/steampunk-wid…

Here is just one more over 360 steampunk icons that I have created that will leave your Windows or Mac desktop looking absolutely spiffing. There is a whole set of the little thingies and I must say they do look very steampunk indeed! They really are a suitable replacement for the boring old default icons that come with Rocketdock/ObjectDock &c.

This icon and the others like it will spruce up your desktop and give it a bit of Victorian class. Compatible with MobyDock, ObjectDock, RK Launcher, and your default Windows icons.

Provided in the following formats:

Multiple size PNGs
Windows multiple size .ICO
Mac OS/X .ICNS
Mac OS/X finder format

To View: - You can see all my icons by clicking here: rocketdock.com/user/107284/add…

To Download : - I have created a couple of steampunk icon sets but you can download the main one here:
rocketdock.com/addon/icons/383…

If you want any new icons then just ask! I am always open to new (or old) ideas - please leave a comment, these icons are quite hard to do and a nice comment makes my day.

Rocketdock Installation: In the rocketdock folder there is a subfolder called icons. Move these icons into that folder or create a subfolder called steampunk icons and copy them in there. Then you simply change each of your individual icon images to any one of these. Easy enough.

The only condition for downloading and using is that you leave feedback. Please leave a message and rate the icons as it is the only payment I get for creating this small desktop addition :D

If you feel so disposed you could donate a point or two to my deviantart pool? yereverluvinuncleber.deviantar…

Thanks! Do enjoy the icon.
Download at the top, that's it, just there. Ooh yes, that's lovely, thankyou.
Loading...

Journal History

deviantID

yereverluvinuncleber's Profile Picture
yereverluvinuncleber
Dean Beedell
United Kingdom
My alter ego is yereverluvinunclebert. You'll find me around the web. Where you find steampunk design I won't be far away.

I focus on Steampunk Design, why do I do it?

Well, I can't bear the look and feel of current desktop computing being so locked into a 1980s 'modern' paradigm. Current GUIs deriving mostly from Microsoft's efforts have a basis in the GUIs from the late 80s and early 90s and despite the regular changes they still haven't moved on much. You run XP, Vista, Win 7 or 8? Well, that means under the skin you are still running NT5 or 6, all basically the same o/s. The only real differentiator is the GUI that MS foists upon you. A GUI is a GUI and not the operating system, you should be able to decide which you want to run. A GUI ought to be independent of the o/s or at the very least the o/s should be very easy to theme. This just isn't the case with any Microsoft operating system as the current look is the only thing that really sets it apart.

So, I set out to create a series of widgets and icons for an o/s interface that meets the aims and needs of a small but thoroughly dedicated group of chaps and ladies known as steampunkers.

I have set out my steampunk design skills in this way to demonstrate what I can do.

Whether or not you are a steampunker yourself, with these widgets and icons you can thoroughly steampunk your desktop. If you have a requirement for steampunk or similar retro design then you can contact me for my services.

This is my site where the widgets be...
Interests

AdCast - Ads from the Community

Comments


Add a Comment:
 
:iconbebovoptic:
BeBovOptic Featured By Owner Feb 6, 2015
I just discover dieselpunk/steampunk for me... What an amazing work! :love:
Reply
:iconyereverluvinuncleber:
yereverluvinuncleber Featured By Owner Feb 6, 2015
Glad it pleases you. Please view my whole gallery starting at the oldest stuff. There are some good things there.
Reply
:icontheangeldove:
TheAngeldove Featured By Owner Dec 24, 2014  Professional Interface Designer
:iconlightedx-mastree1plz::iconlightedx-mastree2plz:
:iconlightedx-mastree3plz::iconlightedx-mastree4plz::iconcip8::iconcip8::iconcip8::iconcip6:


:iconpurplebutterflyplz:¸¸♥´¯) Thank you so much always!
(¸☆´ (¸.♥´´¯`•.¸¸.ღ •.♥ .•´¯`•.¸¸.••Ƹ̵̡Ӝ̵̨̄Ʒ
:iconsparklesplz:


Your Friend Always,
dove :butterfly:
Reply
:iconyereverluvinuncleber:
Merry Christmas to you Dove! I'm sure you'll have a happy one.
Reply
:icontheangeldove:
TheAngeldove Featured By Owner Dec 25, 2014  Professional Interface Designer
:iconlightedx-mastree1plz::iconlightedx-mastree2plz:
:iconlightedx-mastree3plz::iconlightedx-mastree4plz::iconcip8::iconcip8::iconcip8::iconcip6:


:iconpurplebutterflyplz:¸¸♥´¯) Thank you so much always!
(¸☆´ (¸.♥´´¯`•.¸¸.ღ •.♥ .•´¯`•.¸¸.••Ƹ̵̡Ӝ̵̨̄Ʒ
:iconsparklesplz:


Your Friend Always,

dove :butterfly:
Reply
:iconllexandro:
llexandro Featured By Owner Edited Dec 9, 2014  Hobbyist Digital Artist
  Hi, I have start to play with some animation programs and would ask you, if you see any way to become a working widget in to a animation ? my first - -very simple - step can you see here:
Rotating Orb 009 by llexandro
 
Reply
:iconyereverluvinuncleber:
yereverluvinuncleber Featured By Owner Dec 9, 2014
You cannot make an animated GIF/PNG and still have a working widget, that is just an image. It won't do anything.

You can however use javascript functions to perform animation for you using the widget engine functionality. Try my original steampunk orrery and you'll see the animation in practice.
Reply
:iconllexandro:
llexandro Featured By Owner Dec 10, 2014  Hobbyist Digital Artist
ups - I'm not fit in javascript - I'm happy that I can make some pictures with photoshop. at the moment I try Corel Motion Studio where I can use videos as texture but the output quality is not so good - only the build in templates are very useful. I see I have many things to learn to be a "good" artist so thank you for the information.
Reply
:iconyereverluvinuncleber:
To make a widget actually function you will need programming knowledge as well as graphic ability. Javascript isn't that bad to learn.
Reply
(1 Reply)
:icontheangeldove:
TheAngeldove Featured By Owner Nov 8, 2014  Professional Interface Designer
Have-a-Great-WE by KmyGraphic
Reply
Add a Comment: