Speed up your Dashboard

Every widget creates a cache file. In theory, these cache files are meant to speed up Dashboard performance. But, the cache files can get bloated or corrupted, resulting in the exact opposite effect. If your Dashboard seems to be running unusually slow, you may want to try clearing those caches.

Go to:

YourUserFolder/Library/Caches/DashboardClient

You’ll find a cryptic set of folders with no names, just numbers. Delete everything inside the “DashboardClient” folder.

In order to complete the process, you need to restart the Dock (it controls Dashboard). You can do this in two ways:

Type in the Terminal:

killall Dock

This will quit and restart the Dock.
Open the Activity Monitor application (in your Utilities folder). Type “dock” in the search field. Once you find it, select it and hit the “Quit Process” button. The Dock will quit and restart.
That’s it. You’ve successfully cleared the cache files for your widgets. For me, this resulted in a significant performance boost. Dashboard is actually usable again.

Note: If you run several widgets, it will probably take several seconds for Dashboard to display the info in each widget the first time it’s activated after clearing the caches. Dashboard needs to rebuild the cache for each widget. Don’t be alarmed when they initially come up blank.

It should also be noted that the caches do NOT hold the actual data in the widgets. So, if you’re running widgets like, Mint, iClip lite, or Daily Grind Timer, the data will NOT be lost by clearing the cache.

Run Widgets On Your Desktop

Open your favorite Mac widgets directly, without the need for any sort of special hacks. WidgetRunner is a free Mac app that opens your widgets outside the Dashboard, allowing you to use them more-or-less the way you would any other program.

Relegated to a separate desktop since Lion, developers seem to have abandoned the Dashboard in favor of making apps for the iPhone. That doesn’t mean there aren’t still useful widgets, though. From Delivery Status(tracks packages) to GV Connect (use Google Voice) to built-in staples like the calculator and unit converter, Widgets can be quite handy. Many users, however, wish they lived directly on the desktop instead of in the dedicated Dashboard.

If you like OS X Mountain Lion widgets, but wish you could access them on your desktop, WidgetRunner is perfect for you. With it you can use your favorite widgets as though they were regular pieces of software – or even pin them so they become part of your desktop wallpaper. Here’s how.

Using Widget Runner

Start Widget runner for the first time and you may not notice anything happening. Look at the menu bar, however, and you’ll see that the program is running — and that you can load widgets.

widgetrunner addwidget   How To Run Widgets On Your Desktop In Mountain Lion [Mac OS X]

Click Add and you’ll be taken to the folder where the widgets you’ve installed live. Pick one and it will run.

widgetrunner where   How To Run Widgets On Your Desktop In Mountain Lion [Mac OS X]

The folder you’re seeing is /Users/username/Library/Widgets, where “username” is the account you use to sign into your Mac. Of course, you’ll note that not every widget on your system is there – the default ones are notably missing. Instead, they’re at/Library/Widgets on your operating system drive.

widgetrunner widgets1   How To Run Widgets On Your Desktop In Mountain Lion [Mac OS X]

Add the widgets you want until you’re satisfied. By default they’ll all behave as standard windows – neither hovering above other programs or staying beneath them. You can change, that, though.

Top/Normal/Desktop

Right-click any widget to configure it. You’ll see the following options:

widgetrunner placement   How To Run Widgets On Your Desktop In Mountain Lion [Mac OS X]

By default all widgets are “Normal”. Clicking “Desktop” will embed your widgets as part of your desktop. You cannot interact with widgets set to this mode – you’ve basically turned them into part of the wallpaper. To close such widgets, or turn them back to normal, you need to first click the Widget Runner icon in the dock, then right-click the widget.

Clicking “Top” will put a given widget above any and every window you might open. Put simply: Widgets set to “Top” show up over everything else you’re doing. Many will find this annoying, but it’s nice to have upon occasion.

Are you a big fan the multiple desktops (Spaces) feature of Mission Control? You’ll quickly notice, then, that widgets show up on only one desktop. If you want to change this, right-click the Widget Runner dock icon. You’ll see these options:

widgetrunner desktops   How To Run Widgets On Your Desktop In Mountain Lion [Mac OS X]

Simply click All Desktops and your widgets will show up everywhere.

Download WidgetRunner

Ready to check this out? Go ahead and Download Widget Runner. There have been no updates since 2010, but Widget Runner still works well on Mountain Lion (we tested it).

It’s a free program created by Sam Madden, an MIT Professor. Thanks for the app, Sam!

Pros and Cons

Longtime Mac users know there’s another way to place your widgets on the desktop. It involves turning on developer mode and dragging your widget from the Dashboard to the desktop. Knowing this exists, why should Mac users run a dedicate program instead?

Well, for one thing, this undocumented hack results in widgets that float above every other window – like those set to Top in Widget Runner. Some (if not most) users will find this annoying. And another thing: it’s unclear whether this trick even works in Mountain Lion. For every person you find in a forum who got it to work you’ll find nine more who can’t. I’m among the nine, so I’m glad I found Widget Runner.

Of course, there are cons to using Widget Runner as well. Some widgets are buggy, and certain features don’t work in certain widgets. Did you get the developer mode hack working? Let me know in the comments below, and which version of OS X you’re using!

Widgets To Try Out

deliver main   How To Run Widgets On Your Desktop In Mountain Lion [Mac OS X]

Wondering what kind of apps you’d actually use this with? Check out Jackson’s list of Mac widgets you can’t live without. We also recommend the (previously-mentioned) Delivery Status and GV Connect, as well as Symbol Caddy.

Move Dashboard Like Spaces

The Dashboard can be moved around now, just by clicking and dragging it to where you want to leave it. You can even move it to your secondary monitor on a dual monitor setup.

move-dashboard

Backup and Restore Dashboard Widgets

Time Machine is one solution for backing up your Dashboard Widgets, but this option is not always optimal, especially when you have limited hard drive space, or if you would rather use other backup methods. Luckily, you can backup your widgets and reinstall each of them manually without much effort.

How to Backup

  • Step 1: Choose go to folder in Finder by typing Shift + Command + G and go to “~/Library/Preferences”
  • Step 2: In the Finder window, search for every com.apple.dashboard file. Choose to sort files by name. Select all of the files the Finder displays, then copy them to a separate folder.
  • Step 3: Go to folder “~/Library/Widgets” Copy this folder along with all of the files to another backup folder. It is fine if you wish to only save only select widgets and not all of them.

Now all of your widgets and their associated files are backed up. Be sure to backup all of these files again if you decide to update your library otherwise you will have issues restoring them.

How to Restore

  • Step 1: On a Mac with which you want to restore your widgets, go to folder “~/Library/Preferences”
  • Step 2: Search for all com.apple.dashboard files, highlight all of them and send them to the trash.
  • Step 3: Highlight all of your previously backed up com.apple.dashboard files and move them to “~/Library/Preferences”
  • Step 4: Go to “~/Library/” and move your Widgets folder here.

Now simply restart your Mac and your widgets will show when you view your Dashboard. This has been confirmed to work with Macs running OS X 10.5 and higher.

Dashboard Hacks

A Dashboard Dilemma

When you look at the Dashboard of the average Mac user, it’s likely empty and never used, or overwhelmingly full of sports-news feeds and sticky-notes. Sometimes you see festive Christmas lights as well! Surely, there must be more to the Dashboard than this.

Chaotic Dashboard Screen
The dashboard was never meant for this! Well, hopefully it wasn’t.

We could move on with our lives and continue staring at our messy screens, but that’s not in accordance to the Mactuts+ style! Dashboards are dying out so let’s revive the scene by customizing our Widgets more than ever before.

To combat one aspect of this Widget-depression, we’ll edit the “Stickies” Widget and make it our own. The edits are simple: modify the backgrounds of the sticky-notes so that we can have specific note colors (and labels) for specific purposes. For example, we’ll have one sticky-note type for personal thoughts, one for a todo-lists, and possibly another for random notes. We’ll also be adding a custom “Erase All” button to make clearing our notes faster.

Dashboards are dying out so let’s revive the scene by customizing our Widgets more than ever before.

You’re going to need some HTML, CSS, and JavaScript knowledge, but the process certainly isn’t too advanced. Let’s get started!


Step 1: Get the Widget Open

All widgets are located in the folder “/Library/Widgets”. You can do a quick Comman+Shift+G to quickly access it. Because we’ll be editing the Stickies Widget, find the widget file Stickies.wdgt and make a copy to your Desktop. This way we can edit the files without having to worry about permissions and saving-based troubles.

On your desktop, right-click and select Show Package Contents in order to open the widget as a folder rather than open it up in the Dashboard.

Right-Click Widget
This will open up the widget as a folder, rather than in the Dashboard.

Now that we have the Widget’s files open, let’s take a look at the general structure of a Widget.


Step 2: Look at the Files

Dashboard widgets are relatively simple. They’re small HTML setups with JavaScript sprinkled in to make them interactive. Because of this, the files included within each widget are straight-forward and easy to modify, especially when we just want to change simple things like the images. The Stickies Widget is a great example of this simplicity.

Quick Look on Widget
Be sure to have opened the widget through a right-click -> Show Package Contents. Don’t open it and install it to your Dashboard.

In order to get an understanding of the workings of a Dashboard widget, let’s look at each individual file and see what it’s used for.

Info.plist

Info.plist file
The structure of the Info.plist file may look familiar if you’ve looked at the preference files of your Mac or iOS device before.

The Info.plist file determines information about the Widget. It’s central to the Widget as it includes the Bundle Name (“Stickies” here), the current version, the height and width of the widget, and more. However, because we’re only editing widgets in this tutorial, we can ignore this file.

Version.plist

This file is generally the same as the last. It holds more information about the widget. It has the version number, build number, etc. It’s not important for what we’re doing.

Stickies.html

This is the real meat of the widget. Here we have the code that makes up what we see. As stated before, each widget is just an HTML page, so this is easily editable. If you open it, you’ll find it very familiar if you’ve worked with websites before. (As a note, the “Stickies” in the file name changes based on the Widget, so this file does not always have the same name This is also true of the next two files.)

Stickies.css

Of course, with the HTML we’ll want to style the content, so here’s the CSS file to accompany it.

Stickies.js

The interactivity of the widget comes from JavaScript, and this is where all of it is held. We’ll get to editing this as well later on!

Default.png & Default@2x.png

When any widget loads, these images are shown as placeholders until everything is loaded. It’s the splash screen of the widget. (If you’re wondering what the “@2x” means at the end, it’s a bigger sized image for the Retina Display on newer screens.)

Icon.png & Icon@2x.png

When you’re adding a widget to your Dashboard, the icons you can see and drag are these files. Again, the “@2x” is for Retina Displays.

Images Folder

Images Folder
Just like any website, all the images are compiled in one place for easy access.

The Stickies widget uses an “Images” folder to hold all of its images. You’ll notice inside are all the backgrounds and icons that make up the widget.


Step 3: Edit the Images

The first and easiest thing we can do before stepping into the code is to edit the image files in order to change the appearance of the widget. In the case of the Stickies widget, and many other stock widgets, we can just drag and drop new images into the Widget folder in order to make changes. For example, if I wanted to change the Stickies icon, I could create new .png files and replace the old ones (“icon.png” and “icon@2x.png”).

Edited icon@2x.png File
You can treat the widget just like a website. Here, I’ve edited the icon!

I’ve also now changed the yellow background image in the “Images” folder by adding a theme of “personal thoughts.” I changed the colors and added an icon to the top-right to indicate the purpose of the note.

Edited yellow.png File
Just by replacing the first image with the second, we’ve edited the widget.

Now if we install the new Widget, we’ll instantly see the edits and our yellow notes will now have the “personal thoughts” theme. Let’s change one more note and this time turn it into a todo list.

Edited orange.png File
Another small change can make a widget much more personal and appealing.

Editing the images is a great way to add stylish flair to your widgets. It’s quick and simple to do, and if that’s all you’d like to do, then you can skip ahead to Step 5 to install the newly modified widget. Otherwise, let’s keep working at it.


Step 4: Edit the Code

Now it’s time to add some true functionality! This is where the HTML/CSS/JavaScript knowledge comes in handy because every widget is built with just that. We won’t be going too far in-depth into editing the code, but we’ll be working with all three files to get you acquainted. As I stated before, we’ll be working to add another small icon to the bottom-left that functions as an “erase all” button.

All three files
To the humble web developer, this feels right at home.

The HTML File

In order to add the new button, we’ll need to add another #eraseButton div right before the #infoButtondiv (line 21). Right now this is just an empty div with an image inside, but we’ll style it in order to make it look like an actual button soon. The img is a simple 12px by 12px “x” icon that I’ve placed in the “Images” folder.

1
2
3
<div id="eraseButton">
    <img src="Images/x.png">
</div>

The CSS File

Now in order to give the erase button styling, let’s turn to the Stickies.css file and add some basic location and size information before the #infoButton selectors. Let’s also give it a little more style by increasing the opacity when hovered over.

1
2
3
4
5
6
7
8
9
10
11
#eraseButton {
    opacity: 0.5;
    position:absolute;
    top: 166px;
    left: 15px;
    width:13px;
    height:13px;
}
    #eraseButton:hover {
        opacity: 1;
    }

The JS File

If you look at the Stickies.js file, you’ll realize it’s very well documented and written thanks to Apple. This makes it easy for us to work with it.

The JavaScript code to make the erase button work is a very simple function that just sets the content of the textbox to nothing. Add this code anywhere in the Stickies.js, preferably where it fits with other functions. I put it after the textToHTML function.

1
2
3
function eraseAll() {
    mydiv.innerHTML = "";
}

In order to call the JavaScript code, let’s add an onclick event to the #eraseButton in theStickies.html file.

1
2
3
<div id="eraseButton" onclick="eraseAll();">
    <img src="Images/x.png">
</div>

And the button is done! It’s a very simple example, but it also shows the extendability of widgets like these because of their simplicity


Step 5: Install the New Widget

If you ever want to test out your widget as you make changes, there are two options: open up the .html file in your browser like a website, or install the widget and test it out in the Dashboard. The first is faster for development, while the second provides a true Dashboard experience.

Installing Widget Prompt
We’ve changed the icon, the backgrounds, and added a new function!

Installing a widget is very simple as well. All it takes is a double click on a widget and a “yes” to the install prompt. Be sure that before you install your new widget, you save a copy of your edited version. This is because as you install it, the file will be moved to “~/Library/Widgets”. Also note that when we install the new Stickies Widget, it will overwrite the last as it has the same name.

Installing Widget Prompt
Just as we wanted, the new button works and our new backgrounds work.

Editing the widget seemed daunting at first, but its simplicity allowed us to make changes easily. We’ve finished editing our Stickies Widget, and hopefully gave the Dashboard world a small rumble. If we wanted, we could now continue to create more backgrounds and add more functions to satisfy our needs.

Tip: If you would like to download the widget file from this tutorial, you can download it right here. This is the customized Dashboard widget that is created by the end of this tutorial, with all the images and edits predone. This means you can install it directly to your Dashboard and play around with the changes right away.

Make Your Own Dashboard Widget

020211_dashboard.jpg.jpg

That dashboard button is the route to an awesome desktop resource: custom widgets.

One feature of OS X and Safari we are surprised gets little love is Web Clipping. When you just can’t find a widget or need to have quick access to information, web clipping can save the day. If you are unfamiliar, Safari provides a neat little button that allows you to clip parts of web pages and use them on your dashboard.

We use this feature to keep track of financial commodity prices throughout the day. Yes, we know that might sound odd, but there are no readily available commercial widgets available currently that can show all of the commodities we need. We also have the ability to keep track of a large amount of information on our Dashboard that would otherwise not be timely or require the usage of a Bloomberg terminal. Hence our love of the Dashboard clipping feature.

Here’s how to make your own Dashboard widget in 3 easy steps:

22011CMEGROUPSHOT.jpg

1. Choose the site you want to clip. In our case, it is the CME Group for oil and natural gas futures contract prices.

22011screenshotexpand.jpg

2. Clip the part of the website you want We choose to pull the full spread of commodities. This allows us to not only view real time prices, but to also click on the hyperlink embedded in our new widget.

3. Customize your widget to look however you need it to. We stuck with stock glass theme, but there are others available. Additionally, working with your new widget does mean it take a short time to load new information; it is not bad, but there is a delay from when you open the dashboard.

22011dashboardshot.jpg

Enjoy your new free, no coding required, widget!

Preinstalled Dashboard Widgets

Your computer has several Dashboard widgets already installed. To view them, swipe right with three or four fingers. Or press the Dashboard key or F12 key (Fn-F12 on portable keyboards).

Dashboard keyboard key

Widget How to use it
Business Choose a business name from the search field’s pop-up menu, or type a category (such as “pizza”), and view your results in the expanded window. To change the city, click the Info button (i).
Calculator Enter numbers by clicking the buttons or using your keyboard.
Calendar Click the pane showing today’s date to switch between a small or expanded widget. Click the arrow buttons to move to the next or previous month, or press the arrow keys on your keyboard. The Up and Down Arrow keys display previous and next years.
Contacts Type a name or number in the search field.
Dictionary Type a word in the search field and press Return. Use the pop-up menu to change the source (for example, to Thesaurus).
ESPN Click the Info button (i) in the upper-right corner and choose a sport from the pop-up menu. Then click News to view the latest news feeds from ESPN, or click Scores to see how your team is faring.
Flight Tracker Choose an airline, departure city, and arrival city from the pop-up menus, or enter the information in the fields. Then click Find Flights, select the flight in the results, and click Track Flight.
Google Type a word or phrase in the field. Your default web browser opens to display the search results.
iTunes iTunes must be open for this widget to work. Use the controls to play, pause, and skip forward and backward through songs in your iTunes library or a playlist, or to listen to Internet radio. To control the volume, drag the dot in the outer dial.To choose a playlist, click the Info button (i).
Movies The first time you open the Movies widget, click anywhere inside the widget to enlarge it. You can view movies for today, tomorrow, or the upcoming week. To see a description, click a movie’s title. To view a trailer, click the trailer button. To buy tickets, click a theater’s name and a viewing time. If it is possible to buy tickets online, the Buy Tickets button is available.To view theaters near you, click the Info button (i) and type your zip code.
Ski Report Click the Info button (i) in the bottom-right corner and type the name of a resort.
Stickies Type on the Stickies note. To change the note color and font, click the Info button (i) in the bottom-right corner.
Stocks To enter a company, click the Info button (i) in the bottom-right corner. To view a graph that shows the highs and lows over a period of time, click a company symbol.There is up to a 20-minute delay in tracking stocks.
Tile Game Click the widget to scramble the tiles. Click it again to stop. To rearrange tiles, click a tile that borders the empty space to move it in its place. Continue until you see the picture again.To realign the tiles to show the picture, press Command (⌘)-R.
Translation Choose the languages that you want to translate from and to using the pop-up menus, type the word or phrase in the text box below “Translate from,” and press Return.
Unit Converter Choose a unit category from the Convert pop-up menu. Then use the other pop-up menus to choose the unit you want converted and the unit you want it converted to. Type a value in the left field.
Weather To change the city, click the Info button (i).
World Clock To change the city, click the Info button (i).You can open multiple World Clock widgets to keep track of different time zones.

Shortcuts for Dashboard

You can use these shortcuts to work with Dashboard and Dashboard widgets.

Dashboard keyboard key

Action Shortcut
Show or hide Dashboard Dashboard keyIf your keyboard doesn’t have a Dashboard key, press F12 (Fn-F12 on a portable keyboard).
Reload the current widget Command (⌘)-R
Show or hide the widget bar Command (⌘)-Equal Sign (=)
Scroll the widget bar Command (⌘)-Left Arrow, Command (⌘)-Right Arrow

To change the shortcuts for Dashboard, choose Apple menu > System Preferences, and then click Mission Control.

Get quick info with Dashboard

Dashboard is a collection of small programs, called “widgets,” that let you quickly do a wide variety of tasks such as checking stock prices, finding local or global weather information, looking up words in the dictionary, and more.

Examples of Dashboard widgets

Dashboard comes with many widgets already installed. If you’re connected to the Internet, you can download additional widgets. There are also two easy ways to create your own widgets: Web Clips and Dashcode.

Some widgets are linked to larger apps. With the Contacts widget, for example, you can search for a name and address without opening the full Contacts app. Other widgets, such as Weather, provide web-based information without opening a web browser.

  • To open Dashboard from your trackpad, swipe right with three or four fingers. To close Dashboard, swipe left.
  • To open Dashboard from your keyboard, press the Dashboard key, or press F12 (Fn-F12 on portable keyboards). To close Dashboard, press the key again.

Dashboard keyboard key

Create a Web Clip widget

You can make a portion of your favorite webpage into a Web Clip widget and add it to Dashboard. When the webpage’s content is updated, your Web Clip widget is also updated. When you click a Web Clip widget in Dashboard, the webpage you used to create it opens.

  1. Open Safari and go to the webpage you want to make into a widget.
  2. Choose File > “Open in Dashboard.”
  3. To select the portion of the webpage you want to make into a widget, move the highlighted rectangle around.
  4. When the portion you want to make into a widget is highlighted, click it.
  5. To reposition the highlighted portion, drag it. To resize the portion, drag the round handles on its edges.
  6. When you’re done adjusting the widget outline, click Add. Dashboard appears, with the Web Clip displayed.
  7. To customize the widget, move the pointer over its lower-right corner. Click the Info button (i) when it appears, and then select any of these options:
    Option Description
    Theme: Choose a look for the widget.
    Only play audio in Dashboard: If your widget is a sound clip, select this checkbox if you want the sound to stop playing when you close Dashboard.
    Edit: To resize the widget or reposition the content, click Edit. Drag the content around to reposition it, and drag the Web Clip’s lower-right corner to resize it.

A Web Clip widget remains in Dashboard until you remove it. If you remove a Web Clip widget, the only way to get it back is to create it again.You can create as many Web Clip widgets as you want.