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 461 Deviations 3,080 Comments 43,841 Pageviews

Newest Deviations

Favourites

Groups

Activity


Steampunk Underwidget Black and White by yereverluvinuncleber
Steampunk Underwidget Black and White
The Steampunk Underwidget (black and white) is a 24hr clock that sits on your steampunk desktop looking as if it is part of that desktop.

It has been made black and white to correspond with my black and white desktop wallpapers that you can get here: yereverluvinuncleber.deviantar…

The underwidget is designed to work with the Steampunk Timekeeper Orrery MkII that has a transparent glass middle section that can be made fully opaque or fully transparent. When fully transparent the underwidget does its job acting as the orrery's internal gubbins. However, the underwidget does not need the orrery and can simply sit on the desktop on its own. It has a shadow that can be enabled to make it seem to sit deeper into the desktop in a three dimensional sense. The Underwidget works better with one of our existing background wallpapers that you can get here . You can see how it works from the image below. The widget really looks as if it is embedded into the actual desktop.

The underwidget is still beta and some bits may not work completely, although most bugs have now been fixed. Added dock vitality, correct layering inherited from the orrery widget. Still need to fix the installation image though.

Note that the widget is not just eye-candy, it also acts as a working 24hr clock, the single hand points to both the hour and minutes indicating the time. The cogs and wheels rotate providing a clockwork motion giving life to your static desktop.

The red tap removes the shadow and re-enables it each time you click upon it. You can even interact with each individual cog. Simply click on each.

Clicking on the upper winding point opens the widget's preferences. Whilst all these things are happening full sound effects are provided.

The widget can be locked into position by clicking on the outer ring. A locking pin will appear in position to indicate the widget is locked into place.

The underwidget can be seen doing its job through the orrery centre glass in the image below - note the cogs and the wheels, they are all moving.

You will, of course, need the Konfabulator engine for this widget to run. Get the Yahoo widget Konfabulator engine here.Â

and the Mac version here: desktopwidgets.zenfs.com/4.5.2…

All javascript widgets need an engine to function, in this case the widget uses the Konfabulator widget engine. The engine interprets the javascript and creates the widget according to the XML description and using the images you provide.

This widget works with Windows XP SP3, it has been tested on Vista, Windows 7 /8 and Mac Os/X so it should work on all of these o/s with no problems. There is full help for this widget to be found here .

To run this widget properly you will also need:

1. Steampunk Orrery Timekeeper Widget here: yereverluvinuncleber.deviantar…
2. Steampunk Moon Phase III widget here: yereverluvinuncleber.deviantar…

These will be posted on DeviantArt shortly.

Note: The zipfile provided here contains the yahoo widget ready to install,

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

You may use any of my images in your own creations but commercially only with my permission. In all cases I require a credit to the original artist using my name or pseudonym and a link to my own site.
Loading...
Steampunk Leather Desktop Wallpaper Black White by yereverluvinuncleber
Steampunk Leather Desktop Wallpaper Black White
This is a reissue of my wallpaper that is designed to go behind my Steampunk orrery timekeeper widget. Some people seem to like black and white versions so here is one!

Rather than just one size, I have created a zipfile that contains a variety of different size screens.

1024x768
1280x960
1366x768
1280x720
1440x900
1920x1080 <- now included by request!

It works perfectly with my widgets, giving the underwidget and the steampunk orrery a place to 'be'.

That mechanism has now been created and is available here: yereverluvinuncleber.deviantar…

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 (Big Grin)

You may use any of my images in your own creations but commercially only with my permission. In all cases I require a credit to the original artist using my name or pseudonym and a link to my own site.
Loading...

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.
 


 

A Military Desktop Wallpaper in Black and White by yereverluvinuncleber
A Military Desktop Wallpaper in Black and White
A wallpaper of a military desktop, currently just a 1280 x 800 pixel size but if you want more you'll need to ask.

I created it using the real items, none of this is virtual, then I took a snap with a 'real' film camera and took away the colour. I own all these items in 'real' life and when composed they make a good wallpaper. Removing the colour makes it not too busy.
Loading...
Aston Martin Zagato DB4GT by yereverluvinuncleber
Aston Martin Zagato DB4GT
A quick sketch I made a while ago of an Aston Martin Zagato that I drew in the real form, pencil on paper.
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. Do you run XP, Vista, Win 7 or 8? Well, if you do, that means under the skin you are still running NT5 or 6, all basically the same fundamental o/s. The only real differentiator is the GUI that MS foists upon you. Now, a GUI is a GUI and should not be confused with the underlying operating system. You should be able to decide which GUI 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 and customise as you wish. This just isn't the case with any Microsoft operating system as the current 'look and feel' is the only thing that really sets it apart from the previous version.

So, with this in mind, 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:
 
:iconllexandro:
llexandro Featured By Owner Apr 22, 2015  Hobbyist Digital Artist
thank you very much for watching - this is a great honor for me !!!
Reply
:iconyereverluvinuncleber:
It is good to see what you are producing.
Reply
:iconllexandro:
llexandro Featured By Owner Apr 20, 2015  Hobbyist Digital Artist
hi, thanks again for your awesome work, I have used some of your widgets to create a cool desktop:
My Desktop 17.April 2015 by llexandro
Reply
:iconyereverluvinuncleber:
Thankyou Ilexandro.
Reply
: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
Add a Comment: