Widgets

  

Make It Multitouch Workshop at MW2009

On Wednesday, Paul Lacey and I will be conducting a full-day workshop entitled, Make It Multitouch at the Museums and the Web Conference in Indianapolis. We’ll be explaining the technical aspects of multitouch and exploring emerging design practices through a series of exercises. I posted some initial thoughts on design multitouch and multiuser exhibits back in February, in three parts; Interaction and Feedback, Elements, Objects, and Environments, and the Visitor-Experience. During the workshop, we’ll look at the concepts presented in these posts along with other activities with some new additions. An important new area for discussion is the use of physical objects (with fiducial markers) in conjunction with multitouch tables.  A very interesting example came out just last week from the Media Computing Group, part of the Computer Science Department at RWTH Aachen University in Germany. Called, Slap Widgets these physical user-interface components work in conjunction with multitouch tables. The Media Computing Group has put together a short video explaining how Silicone ILluminated Active Peripherals, or SLAP widgets work.  

In our workshop, we are primarily concerned with the implications of multitouch and multiuser interactions, still it is hard not to think about the possibilities that physical objects can present for computer-based exhibits.  I don’t think a silicon slider or knob would last a day on the museum floor, but after working with hands-on science centers and other museums for so many years, the connection between computing and more physical interaction presented in this example is certainly intriguing. We’ll post more about the conference and the workshop later this week.

Update April 20, 2009: Shelly Mannion has some photos of multitouch table at MW2009.  You can see the photos that are tagged, multitouch in her Flickr group.

mt-table-meets-surfaceAlso, here is a picture we took of our multitouch table and the Microsoft Surface. We were moving out the our exhibit space, when we came across a Microsoft Surface set up for the a demo the next day. You can see more pictures in our Flickr set multitouch exhibits.

Update April 17, 2009:  Paula Bray wrote a story about the workshop for Fresh + New(er) blog entitled, MW2009 – Multi-touch: what does this technology hold for future museum exhibits?

Update April 16, 2009: Thanks to everyone who attended it was a fun day. Here’s the Introductory Presentation and the Design Considerations presentation in PDF format.

  
 
2
 
  
  

Museum Blogs and Museum Podcasts Directory Sites

The Museum Blogs directory site has been revised and relaunched. We have also added a companion site, Museum Podcasts (www.museumpodcasts.org). Both of these directory and aggregator sites are powered by our own RSS Mixer technology.  The posts, episodes and information about each contributing blog or podcast come directly from their respective RSS feeds. The directories are updated about every hour. 


Museum Blogs and Museum Podcasts have integrated widgets for viewing all posts and episodes in the directory. In addition, there is a ”detail” page for each blog and podcast each with its’ own individual widgets.  All of these widgets can be freely cut-and-pasted into other Websites or blogs. Both directories accept new blogs and podcasts, so if you have any additions please send them along.

  
 
 
  
  

Presentation for NMIPA

Tomorrow, myself and Chris Gerber, our top Flex developer will be presenting at the New Mexico Internet Professionals Association’s (NMIPA) monthly meeting.  We’re going to discuss Adobe Flex and how we’ve used it in recent projects. For example, the video player on the Open Exhibits Website was created with Flex, as was the Media Player and Web widget for RSS Mixer. We even created a interactive exhibit for NASA using Adobe Flex.  (It will be released in October, and we’ll add it to our portfolio, then.)  If you’re local, join us. There’s more about the event at the NMIPA website.

  
 
 
  
  

RSS Mixer – Combines Feeds for iPhone, Web, and Apple Widgets

Our latest prototype, RSS Mixer, is now available. This is by far the most elaborate of the prototypes we’ve been working on over the last few months. All of these experimental applications are part of a larger project that we are developing for release in 2008.

RSS Mixer allows you to combine various feeds into a new one that can be viewed as RSS, HTML, an iPhone page, as well as a Web and Apple Dashboard Widget.

rssmixerhome.jpg

The design is simple: you can create a title for your custom RSS mix and you can add up to ten feeds in the form. A listing of recent mixes, along with a few featured ones, is also included. This prototype (and the others) was programmed using Ruby on Rails.

customrssmix.jpg

Each custom mix includes Widgets, an iPhone formatted version, and links to the various feeds in the mix. Below are some links to a custom mix called Environmental News.

Take a look at the site and let us know what you think.

  
 
4
 
  
  

Desktop Widgets on the Web

widgepedia.jpgRecently, we tried our hand and developing a Mac OS X Dashboard widget, the Solar Viewer. We built the Yahoo! Widget version earlier in the year with some success–at least as far the number of downloads are concerned. Having developed now for two of the more popular widget platforms (we haven’t looked at Google Gadgets, Opera Widgets, or DesktopX, yet) there are few interesting sites in Dashboard and Yahoo! Widget world worth pointing out. These sites are great for finding new widgets or for promoting ones that you’ve developed.

For the Mac OS X Dashboard there is of course the official Apple Dashboard site, which includes a Top 50 listing. (The Solar Viewer is currently #34, is #20 moving up the charts (updated 11/16/06) between a Tarot Reading widget and one that links to movie trailers.) Yahoo! Widgets has a similar directory although it could use a Top 50 (or some other way of browsing) as widgets get quickly buried on their site.

Mac Update has an extensive list of Dashboard widgets and they actually went to the trouble of posting the Solar Viewer and then emailing us, inviting us to become a developer. Once you’ve signed up as a developer, you get access to tools to track the number of downloads, rating and comments. You can also start an adword campaign to promote your software, which is why Mac Update is so helpful in getting you started. Still, the tools are well designed and the site is relatively easy to use, whether you’re looking for widgets or promting one.

Dashboard Widgets has the latest news on Apple Dashboard widgets directed primarily at the widget developer. However, there is also an excellent showcase which contains over 1,500 widgets for Mac OS X.

Softpedia is a massive collection of software of all kinds widgets included, but I’ve found it difficult to search and to use.

Widgipedia has a decidedly “Web 2.0â€? look and feel and it is “Beta” (of course). The concept is a good one, although it doesn’t get as nearly much traffic as some of the other more established directories listed here do, perhaps it will in time. The site keeps track of the High Rated, Latest Widgets and has all sorts of “viralâ€? software tools for emailing and embedding links and RSS feeds of their categories. The site accepts and contains a variety of desktop widgets; Dashboard, Yahoo!, and even DesktopX ones can be found.

WidgetWorld is yet another widget directory this one is based in the Netherlands. It looks like they’re just getting started as they only have about two dozen widgets. Although, it was nice to see they already had the Solar Viewer in their collection.

Finally, I came across The Flip Side, a well-designed blog for Mac Dashboard widget developers. There’s a number of resources for developers including what must be the world’s only podcast for widget developers. There are also links to what appear to be “widget only” design and development firms such as Taco Widgets, WidgetMachine, among others. Flip Side promises more posts and podcasts soon. We’ll be watching.

  
 
 
  
  

Latest Images of the Sun: Mac OS X Dashboard Widget

solar_viewer_widget_01.jpgWe’ve just finished developing version 1.0 of the Solar Viewer widget this time as a Dashboard Widget for Mac OS X. Earlier in the year we developed a Yahoo! widget version that works with both Mac and Windows, although you’ll need the Yahoo! Widget Engine to make it go.
Both versions (Yahoo! and Mac Dashboard) show the latest images of the sun from NASA satellites and ground-based observatories. More information about the images and links to larger images are provided. We first collected all of the amazing solar images for the Sun Earth Viewer, a Flash-based interactive that we developed with NASA back in 2004.

If you’re interested we posted a how-to for Yahoo! Widgets when we developed the first version of the Solar Viewer. We hope to have some time in the next couple of weeks to do something similar for the Mac version.

The Dashboard widget should be available on the Apple site soon. In the meantime, you can download it from Solar Viewer Widget page in the Ideum portfolio.

  
 
2
 
  
  

National Science Foundation: Latest Image

Our latest widget is now available in Yahoo! Widget Gallery. This one displays images from the National Science Foundation’s Multimedia Gallery. The gallery is updated fairly often and the images are a compelling mix of science-related photographs and visualizations. We’re still working on Mac OS X Desktop versions of some of our widgets, the construction is bit more complex than those of the Yahoo!/Konfabulator variety. If you’re interested learning more about Widgets, Kevin Silver here at Ideum wrote an excellent piece entitled, So You Want to Build a Yahoo! Widget.

38840-shot.jpg

  
 
 
  
  

Solar Viewer mini

Yahoo! has just posted our new Widget, the Solar Viewer Mini. O.K., We know it is still a big widget, but compared to first Solar Viewer it is slimmer and who wants to see tiny images of the sun anyway. This version has “drawers” and scrollers to make it more compact. We’ve had nearly 2,000 downloads just today! Our previous solar viewer has over 38,000 downloads in a little over a month. We developed this widget for NASA’s Sun-Earth Connection Education Forum. Both widgets are based on the Flash-based Sun-Earth Viewer which Ideum also developed for NASA.

You’ll need the Yahoo! Widget Engine for Mac and PC to run this. We’re currently working on the Mac OS X Dashboard version of this same widget. We will let you know when that is available.

  
 
 
  
  

Solar Widget 31,000?

The Solar Widget has now topped 31,000 downloads on the Yahoo! Widget Gallery. The widget has been available for a little over two weeks.

What’s surprising is that even though the widget itself is now buried a bit in the Yahoo! Widget site, we are still getting more than our fair share of downloads. This may be due to the fact that Yahoo! seems to be promoting their Widgets more heavily. I’ve noticed Yahoo! Widgets featured on the front page of Yahoo! last weekend. You can’t do better than that for promotion. After all Yahoo! is the most popular site on the Internet.

  
 
 
  
  

So you want to build a Yahoo Widget…

Developing the Solar-Viewer was fun. I was surprised at how native the widget environment seemed to be, though there were a few quirks. If you have some knowledge of XML and Javascript, you will be able to build a widget as well. The widget engine is well documented and you will want to take a look at the development tools and references that Yahoo provides. Definitely print out and read the Widget Creation Tutorial, we found it to be an excellent jumping off point into widget world.

How We Did It

We built the Solar-Viewer widget using the Widget Creation Script for Photoshop CS. Our designer Kemper created the look for the widget in Photoshop. He then used the Widget Creation Script(a plugin for Photoshop) to convert the .PSD into a widget. Yep, it actually converts your photoshop file into a working widget. So we took this:

Photoshop Widget Mock Up

And we got this:

Output of Photoshop Widget Creation Script

The really cool thing is that it scrapes your layers and converts them to PNGs and it also creates a .kon file with all of the elements defined. For those new to widgets a .kon contains the main code for the widget. It is an xml file that looks like this:

<?xml version="1.0" encoding="macintosh"?>
<widget version="1.0" minimumVersion="2.0">
<debug>off</debug>
<!--
Solar-Viewer
Written by: Ideum

Generated by Photoshop Widget Generator Script
Copyright (C) 2004 - 2005 Pixoria, Inc. All Rights Reserved.

Any modifications will be lost if the generation script is run again.
-->

<window title="Solar Viewer">
<name>mainWindow</name>
<width>616</width>
<height>404</height>
<visible>1</visible>
<shadow>1</shadow>
</window>

<image xsrc="Resources/aurora.png" mce_src="Resources/aurora.png">
<name>aurora</name>
<hOffset>3</hOffset>
<vOffset>3</vOffset>
<width>609</width>
<height>397</height>
<opacity>100%</opacity>
</image>

Note: A widget is simply a group of files saved as a package. You can easily look at the source code of widgets by either right clicking on them and selecting “Show Package Contents”? (OSX) or by changing the file extension to .zip and then opening the zip file (Windows).

After the conversion, each layer of the photoshop is referenced in the .kon file as an xml element. The script correctly placed and sized the layer in the widget using <hOffset>, <vOffset>, <width>, and <height> properties of the <image> element — again, too cool!

<image xsrc="resources/full_image.png" mce_src="resources/full_image.png">
<name>fullimage</name>
<hOffset>286</hOffset>
<vOffset>58</vOffset>
<width>314</width>
<height>315</height>
<opacity>100%</opacity>
</image>

The source of the image is also defined. The sources for the images were placed in a folder called resources. One thing we learned is to be careful with your naming conventions. The script will name the widget elements just as you have your layers named, so make sure you name your layers in a meaningful manner.

In step one we created the widget from a Photoshop file, so now we need to make the widget dynamic. The images of the sun are loaded dynamically when the widget is launched from their source on the web. The widget was created with placeholders for the images. The placeholders were layers that got exported as image elements. You can reference element properties using JavaScript:

fullimage.src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_eit_171_512.jpg" mce_src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_eit_171_512.jpg";

So all I did was set the source of the placeholder image to the url of the image. I used the “€œonload”€? trigger of the element to trigger the load all of the images. To load the images I simply changed the source of their respected placeholder:

<action trigger="onload">
img01.src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_eit_171_65.jpg" mce_src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_eit_171_65.jpg";
img02.src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_eit_195_65.jpg" mce_src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_eit_195_65.jpg";
img03.src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_eit_284_65.jpg" mce_src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_eit_284_65.jpg";
img04.src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_eit_304_65.jpg" mce_src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_eit_304_65.jpg";
img05.src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_LASCOc2_65.jpg" mce_src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_LASCOc2_65.jpg";
img06.src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_LASCOc3_65.jpg" mce_src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_LASCOc3_65.jpg";
img07.src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_trace_171_65.jpg" mce_src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_trace_171_65.jpg";
img08.src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_bbso_white_65.jpg" mce_src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_bbso_white_65.jpg";
img09.src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_bbso_halpha_65.jpg" mce_src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_bbso_halpha_65.jpg";
</action>

Next, we needed to allow the users to select a thumbnail image and have a larger version of the thumbnail be displayed. At the same time a description of the image needed to be displayed. We used the <onMouseUp> event for the image element to trigger a change in the source of the full size image.

<image xsrc="Resources/img09.png" mce_src="Resources/img09.png" >
<name>img09</name>
<hOffset>198</hOffset>
<vOffset>208</vOffset>
<width>66</width>
<height>66</height>
<opacity>100%</opacity>
<onMouseUp>
fullimage.src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_bbso_halpha_512.jpg";
description.data = filesystem.readFile("Resources/
image09.txt");
</onMouseUp>
</image>

To display the text we created a <textarea> element and placed it over a graphical placeholder. The data property of the <textarea> element was changed on the same event that triggered the main image change. The data is pulled from text files located in the resources folder using the filesystem.readFile() function. We included the text files with in the widget because the original files had HTML in them and, unless you do some scripting a widget can not render HTML.

Along the same lines we used two other mouse events, <onMouseEnter> and <onMouseExit> to turn on and off an image that creates the rollover state:

<image xsrc="Resources/img09.png" mce_src="Resources/img09.png">
<name>img09</name>
<hOffset>198</hOffset>
<vOffset>208</vOffset>
<width>66</width>
<height>66</height>
<opacity>100%</opacity>
<onMouseEnter>
glow09.visible = true;
</onMouseEnter>
<onMouseUp>
fullimage.src="http://ds9.ssl.berkeley.edu/imageviewer/
images/images2/latest_bbso_halpha_512.jpg";
description.data = filesystem.readFile("Resources/image09.txt");
</onMouseUp>
<onMouseExit>
glow09.visible = false;
</onMouseExit>
</image>

The last major piece of functionality was to have the widget update the images every hour and display when the last update was. We used another element called <timer> to accomplish this. The <timer> was set to run every 3600 seconds (60 minutes) and when it ran, it triggered the <onTimerFired> element nested with the <timer>. On that trigger all of the code was run within the <onTimerFired> element:

<timer name="mainTimer" interval="3600" ticking="true">
<onTimerFired>
theHour = String(theDate.getHours());
time.data = "Reloading images...";
img01.reload();
img02.reload();
img03.reload();
img04.reload();
img05.reload();
img06.reload();
img07.reload();
img08.reload();
img09.reload();
fullimage.reload();
time.data = "Updated today at: " + theHour + ":00";
</onTimerFired>
</timer>

The code reloads the images (you can not just change their source, they have to be reloaded) and sets the data of an additional <text> element that displays our last update message.

I hope this gives you a good overview of how we built the Solar-Viewer widget. We will be making a Mac widget version of this soon and I will write up a description of how we built that as soon as we are done.

  
 
7
 
  
Page 1 of 212