Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Here's a skin to improve that hideous Dashboard calculator

nagromme

nagromme

macrumors G5
Original poster
May 2, 2002
12,546
1,196
The orange edges don't match each other (look at the bottom corners!), the gray box behind the keys is ugly, and the number contrast is poor! How did Apple let that poor craftsmanship out the door? There... that's out of my system :)

So FWIW, I whipped up this easy-to-install fix. It still has the orange scheme, just cleaned up. And the buttons and numbers are unchanged by this--it's just a single file that changes the calculator body (including making the screen "brighter" for readability).

Try at your own risk... I expect it will work well, but I don't have Tiger running yet so I can't test it yet myself!

Just Show Package Contents on the calculator widget, and drop the attached file "Calculator.png" into the "Images" folder. (And back up your widget first! Who knows what future updates might be confused by the change, so you might want to do this with a copy of the widget.)

If I have the image name or size wrong or anything, please post. I also wouldn't mind seeing before/after screenshots so I know how it works!

If people want I can easily post alternate colors of the same.
 

Attachments

  • Calculator.png
    Calculator.png
    5.2 KB · Views: 24,115
I hated the Apple Calculator widget at first but I love it now. Widgets are designed to visually look different from normal apps because, well, they are different. The widgets have grown on me.
 
Same here!

At first I thought, "why the needless wild colors and shapes?" But the bright colors and unusual shapes serve a purpose! Dashboard summons ALL your chosen widgets at once--and then you must single out the one you want. You can do so instantly because they are so visually distinctive from each other. That's good UI design--and since Dashboard is separate from other windows, and usually hidden, visual variety here does not equal annoying clutter.

It's as though each widget IS its own icon in a way--in the sense of an icon as a visual cue to locate a function.

So I kept the basic orange concept of the Apple calculator--which I no longer hate--and just improved (to my eye) the slightly-off implementation.

Plus I wanted to be a Tiger developer :D
 
Here are some mods I made. More to come...possibly :)
 

Attachments

  • green.png
    green.png
    6.5 KB · Views: 23,911
  • indigo.png
    indigo.png
    6.7 KB · Views: 23,903
  • maroon.png
    maroon.png
    6.6 KB · Views: 23,880
  • pink.png
    pink.png
    6.6 KB · Views: 23,835
Glad it works :D

Sometime I'd like to add a buttons for Copy, Paste, and one to launch the full calculator (preferably with the number transferred)... but I don't know how doable that would be.
 
Hmm it's interesting poking around the package contents, makes the widgets much more customizable. The images are just .pngs, one can use any graphics program to edit them. I've tweaked the calculator as well, and one can also tweak icon.png which is the icon on the bottom when adding widgets, and default.png which is what you see when you drag the calculator from the setup bar.

Poke through the other widgets, most of them are easily customized as well.
 
Can anyone post screenshots of the widget with the modfied skin? I'd like to see it in action! Thanks.
 
Those look awesome. I wouldn't mind a burnt orange one, though. Would be WAY better than that hideous maroon one...;)
 
Here's my calc skin contribution. It's a bit more advanced, you have to change the LCD backlight image as well. Hope you like it, there are more to come :)

I've included screenshots, visible below.
 

Attachments

  • Calculator.png
    Calculator.png
    23.4 KB · Views: 23,099
  • lcd-backlight.png
    lcd-backlight.png
    3.7 KB · Views: 22,993
  • Picture 3.png
    Picture 3.png
    47.4 KB · Views: 11,732
  • Picture 4.png
    Picture 4.png
    43.4 KB · Views: 11,727
More skins! :) Use the LCD image provided in an earlier post.
 

Attachments

  • Calculator_bondi.png
    Calculator_bondi.png
    13.7 KB · Views: 22,802
  • Calculator_brushed.png
    Calculator_brushed.png
    20 KB · Views: 22,749
  • Calculator_grape.png
    Calculator_grape.png
    14.4 KB · Views: 22,704
  • Calculator_indigo.png
    Calculator_indigo.png
    14 KB · Views: 22,722
  • Calculator_natural.png
    Calculator_natural.png
    49 KB · Views: 22,657
Cool :) I didn't know the LCD would be a separate image--so with a few choices of those you could mix and match...

Maybe Apple's badly-crafter calculator was a blessing in disguise. The other widgets could be skinned but it's the calculator that really caught my eye as needing some help!
 
Hi there,

Just packaged up iindigo's best skin (IMO) so it is easy to install for n00bs (yes I mean you :))

Just to clear this up, this skin was created using iindigo's graphical skills, not mine (except for the little icon change I sneaked in).

For the 1337 among you, you can force-quit installer when it finishes and go to Terminal then killall Dock to get Dashboard to update rather than log out. If you don't understand how to do this, then just follow the installer instructions.

iindigo's Skin in Handy PKG format

Enjoy!
 

Attachments

  • Picture 4.png
    Picture 4.png
    43.4 KB · Views: 11,478
Wicked Cool

Thanks for the nice one iindigo. Going to start changing my Calendar one now too. That one is ugly.

P.S. Widgets are located Hard Drive>Library>Widgets
 
This is sweet stuff - I can't wait to get Tiger so I can play with it. What's the word on individual images for calculator buttons or displayed numbers? I'm going to date myself, but the first calculator I owned had red LED numerals for display. It would be fun to duplicate that look, along with the buttons themselves.
 
The buttons clearly have 2-3 images each: up, down, and for operatiors (like + and -) an "active state" highlighted as it waits for the next number.

The digits may be in some font, but even if so, the font color should be controllable in the JavaScript.
 
There should be one that's blank, maybe inside a folder. I'm guessing it's called "Calculator.png" and is inside an "Images" folder. Nobody has posted that I got that wrong, but I could have--dig around and see, and if the details aren't what I've said I'll correct my post.

But as was noted above, there are other images in there too. Maybe the one you're looking at with numbers already on it is just the drag-image for when you first drag it out of the widget bar? Or maybe it's the widget's icon that shows in the bar?
 
nagromme said:
There should be one that's blank, maybe inside a folder. I'm guessing it's called "Calculator.png" and is inside an "Images" folder. Nobody has posted that I got that wrong, but I could have--dig around and see, and if the details aren't what I've said I'll correct my post.

But as was noted above, there are other images in there too. Maybe the one you're looking at with numbers already on it is just the drag-image for when you first drag it out of the widget bar? Or maybe it's the widget's icon that shows in the bar?
Click to expand...

Okay I found it. Dashboard first loads the master in the contents folder then loads the images folder.

BTW: to keep widgets on your desktop just hold down F12 when dragging out a widget. ;)
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back