Show and Tell: Disk Sensei by Oskar Groth

About Oskar

Oskar is an independent Mac developer who is committed to enhancing the Mac experience.
Since founding Cindori, he has designed, developed and released several popular apps such as Trim Enabler, Disk Sensei and VR Desktop.

About Disk Sensei

Disk Sensei helps you monitor and analyze your Mac’s drives, enhance your Mac’s performance and clean your system safely and efficiently.

Info

• Company Website
• Disk Sensei Product Page
• Cindori Apps on twitter
• Oskar on twitter

What Oskar particularly likes in Disk Sensei:

“Disk Sensei is all about optimizing your Mac performance, so I knew I wanted a way to let users find and delete large old files.
After settling on the idea to build a sunburst chart to visualize the file system hierarchy, I struggled for a long time to build something that was responsive, performant and beautiful.
Eventually, I turned to an unconventional solution: I built a component using D3, a JavaScript visualization library, and integrated it in Disk Sensei using a web view.
The end result was a beautiful sunburst chart with slick animations, at the cost of only a few hundred lines of Obj-C.”

and particularly dislikes:

“Disk Sensei offers features that are related to both hardware and software. In some cases, this means that the user must select the storage drive for which he wants to display data or perform actions on.
For example, the Health feature, which displays diagnostic data and predicts the remaining lifetime of your hard drive or SSD.

To avoid having to select a storage drive over and over when switching between features in the app, I opted for a global option and put a drive selection button right in the menu bar of the application window.
This made it very easy to toggle between drives from any view in the app. But it also created several problems:
It broke the conventions of the menu by having the button look like it’s supposed to behave like a menu option.
It created even further confusion by being accessible while using features that wasn’t related to the currently selected drive. As if that wasn’t enough, the button was just too small to fit the full drive name, creating cryptic titles such as “APPLE”.
All in all, this was a poor solution.”

Thank you, Oskar, for sharing :)

About the “Show and Tell” Blog Series

Show and Tell presents developers’ and designers’ most and least favorite elements of UI/UX in an app they helped create or design.
If you’d like to share, submissions are open! Submit your app here!
Thank you :)

 

Advertisements

New Blog Series: Show and Tell

In this new series on this blog, I’d like to give developers and designers a place to show off  one UI / UX element they’re particularly proud of, and one they particularly dislike, in an app they worked on.

Submit now :)

If you’re a developer or designer and would love to share a UI/UX element in your app you particularly like, and one you particularly dislike, please mail me!

What I need from you

• Your name, or, if you like, state that your submission should be anonymous. Your email and other contact info will not be published
• Your website, twitter/facebook/instagram/github handle, or any other way you’d like to be credited (if it’s not an anonymous submission)
• A short description of who you are and what you do
• Your involvement with the app
• The name of the app with a link (if you’re willing to share, but it’s not a must)
• A screenshot, short video or gif of a UI/UX element in your app you particularly like, with 1-2 sentences of why you like it
• A screenshot, short video or gif of a UI/UX element in your app you particularly dislike, with 1-2 sentences of why you don’t like it
• Please only send apps you worked on yourself
• Multiple submissions are fine

A post will look something like this:

Submissions will be published on no particular schedule in no particular order on this blog.
You’ll be notified beforehand with a preview.
Submissions will (or will not) be published at my own discretion.

I’m looking forward to your submissions!

For updates, please follow this blog, or @showandtell_ui on twitter.

Developer Tip: Custom Icons for Quick Actions

Notice: I’ve moved the blog over to blog.eternalstorms.at – please update your bookmarks!

When creating a custom Quick Action for macOS Mojave’s Finder, you have the option to supply a custom icon:

But this is what happens when you supply an ordinary image in Dark Mode:

or Light Mode:

(in Light Mode, it’s obviously better, but still not as subdued as it should be, which is more grey than pitch-black, or whatever color your original icon file might have).

Tip #1 – Getting the icon’s color right

The trick is to have the file end in ‘Template’, like ‘MyWorkflowIconTemplate.tiff’. But that’s not all there is to it. When you add a custom icon through Automator, it automatically gets renamed into ‘workflowCustomImage.png’. So no matter what you name your file, it won’t matter.

To fix this, add a custom icon to your Quick Action in Automator, save, switch to Finder and navigate to /Users/yourname/Library/Services/, where your newly saved Quick Action will end up.
There, right-click your Quick Action, select ‘Show Package Contents’, and navigate into Resources, where your icon file will be. Rename it to ‘workflowCustomImageTemplate.png’.
Now, navigate into Contents and open Info.plist. Look for <key>NSIconName</key> and change ‘workflowCustomImage’ to ‘workflowCustomImageTemplate’. Save.

Now the icon will look like this:

That’s much better. But there’s another issue we need to take care of:

The icon’s a bit too large, even though in Finder and the “More…” menu, it looks well-sized.

Tip #2 – Getting the Touch Bar icon to play nice

I thought I’d be smart about it, since the “append ‘Template’ “ trick worked, I’d have three differently sized images and append @2x and @3x. But it didn’t work.
The trick is to have a TIFF file with 2 (or 3, to be on the safe side) representations – one at 1x, one at 2x and one at 3x.
And voila, it worked:

To create the TIFF, I wrote a small app that takes my icon file, creates three NSBitmapImageRep objects from it and adds them to an NSImage instance. Then it writes the NSImage object’s TIFFRepresentation to disk.
Open that file in Preview.app and you’ll notice all three icons inside that one TIFF (you might have to select View – Thumbnails in the menu to show them)
Select the first and select Tools -> Adjust Size… in the menu bar.
Resize the image to 16×16 (which I found to be working nicely) and set its resolution to 72, if it isn’t already.
Select the next thumbnail and resize it to 32×32 at 144 DPI, and the third thumbnail to 48×48 at 216 DPI. Save.
Now repeat Tip #1 with this new file and you’re all set.

I hope this will save you some time, as it cost me plenty ;)

_____
Matthias Gansrigler | Founder & Developer – Eternal Storms Software
e: blog@eternalstorms.at
twitter | facebook | instagram