Self Service: How to add animated icons

davidhiggs
Contributor III

Stumbled upon a way to use animated icons within the Self Service app - Simply use an animated PNG file (APNG format). Looks like support has been around since iOS 8 and OS X 10.10. Have not tested this in Self Service for iOS.

This seems pretty harmless and if you stick to the recommended 128x128 canvas size, you should be OK. Maybe JAMF can comment :D

Below is an example I put together, two frames looping. This will animate if you use Safari or Firefox but not Chrome.

0cecb5d1ae6e4a038731715294a012cc

34 REPLIES 34

bpavlov
Honored Contributor

How do you go about creating one easily?

davidhiggs
Contributor III

I used pixlr.com for my photoshop tool and http://littlesvr.ca/apng/assembler/assembler.php to create it the file.

Looks like the mac app store has a tool https://itunes.apple.com/us/app/png-animator/id899480442?mt=12

I shrunk one of the images slightly, then increased the canvas size back to 128 (using pixlir), then uploaded to that assembler site

AVmcclint
Honored Contributor

I've been able to add animated GIFs just fine. 31a539c2e5d9493aa13692fd8fc899d4
That's a pic I've had in Self Service for Mac with no muss no fuss.

scottb
Honored Contributor

I use either PhotoShop or this app - 0.99¢ on the MAS. Not exactly a masterpiece, but it works.

GIF Animator

cwaldrip
Valued Contributor

HOLY CRAP! I never thought of this!

/must use this power judiciously and only for good...

mm2270
Legendary Contributor III

I wasn't going to comment on it originally, but part of me is concerned this is even a feature. While I can see some utility in being able to do this, hopefully most of us out there won't be bombarding our users with a bunch of flashing seizure inducing animated icons, and turning their Self Service into a 3-ring circus!

Then again its not really my business what anyone does with their Self Service. Carry on... : )

cwaldrip
Valued Contributor

I don't think it's a 'feature' as much as an unintended consequence. Self Service is basically an HTML application, so offering support for GIF and PNG also brings with it unintended support for animated GIFs and animated PNG.

mm2270
Legendary Contributor III

Good point on that.
Though it would be nice if Self Service.app actually supported all features of your average html application and not just some arbitrary subset. As much as it may be a "browser", many standard browser features don't work well with it.

Emmert
Valued Contributor

Does this work in the Slef Service iOS app?

davidhiggs
Contributor III

Personally i'd probably only use it for a single use, like my example and alerting the user to something. I agree @mm2270, we dont want Self Service looking like myspace :P

@Emmert haven't tested iOS, give it a go and report back!

Emmert
Valued Contributor

In iOS it just uses the first frame. Probably for the best.

gskibum
Contributor III

By random chance I grabbed an animated png from inside the Install OS X El Capitan.app. Didn't even know it until I saw it in Self Service.

I'd attach it here but it's so wild & spastic you'd all hate on me for attaching it. It's Coyote & Roadrunner spastic.

johnnasset
Contributor

0dc545d0907d4e5d9848577d247b9f79
Funny, I tried to upload the regular png converted from the InstallAssistant.icns from the Installer app for El Cap and can only get the animated icon.

gskibum
Contributor III

It's a hateful icon for sure.

gskibum
Contributor III

For a couple of months now I've been unable to get any .png icons to NOT animate. Not sure what has changed.

GIF is working for me however.

If anyone hasn't already upvoted this, please do so if you agree with a Self Service icon management tool.
Manage Self Service/Policy Icons Feature Request

mm2270
Legendary Contributor III

@gskibum

For a couple of months now I've been unable to get any .png icons to NOT animate

.
I'm not sure I understand your comment. You can't get them to NOT animate? As in, they always animate? Huh?

davidacland
Honored Contributor II
Honored Contributor II

I had this on a recent jumpstart. For Self Service I'd always used the "copy the icon, create new from clipboard in preview, export as png", but last month, they were all coming out animated after the png export. Re-exporting the exported file worked ok.

I didn't spend much time worrying about it but I'm sure preview didn't used to do that.

Brad_G
Contributor II

@gskibum Actually one of my coworkers @PhilMaul ran across this. In short if I remember correctly, when you open the icon in preview, there is a pane on the left of multiple icon sizes (making the animated image you're seeing). Pull the 128x128 icon out and onto the desktop which creates a single sized .tiff file. Open that in Preview and export it as .png

gskibum
Contributor III

@Brad_G Thank you. That makes sense to pass it through as a TIFF first. Adds a bit of hassle though.

Wah-wah-wah.

gskibum
Contributor III

I missed @mm2270's and @davidacland's replies.

Yes like it nor not I've been getting nothing but animated icons in Self Service. When I open Self Service these animated icons draw me in and I stare at them like a deer in headlights. Takes me about 15 seconds to snap out of it and return to earth. :-)

So it looks like it's necessary to double-save to get this to stop.

davidacland
Honored Contributor II
Honored Contributor II

On my to do list is an Automator action that you can drop apps onto, and have it spit a self service png icon the other end. Unfortunately it's been on the to do list for around 4 years now :(

Anyone else already have something like that?

mm2270
Legendary Contributor III

There shouldn't be a need to copy it to the Desktop first. Just select the 128 version in Preview and press Command+A to select the entire image, copy, then choose New from clipboard and it creates a new file with just the one image in it. Save it and then upload it. Still extra work, but why clutter up your possibly already cluttered Desktop with more droppings.

I can see why now you were getting animated icons. If you pull the full png or icns file in its actually a list of multiple image sizes all stacked on top of one another, so it makes sense now that you'd be seeing it animate :)

davidhiggs
Contributor III

The behaviour changed with the Preview.app that shipped with El Capitan, so there is an extra step as @mm2270 mentions. This is how I made the discovery for this post!

mm2270
Legendary Contributor III

@davidacland Your post gave me a great idea about making an app or droplet like that. Since I tend not to do things in Automator too much though, I whipped something together in Platypus with a bash script. Its very basic right now (as in, if it runs into any errors, it just exits), but in testing it seems to work pretty well with almost any app I've thrown at it!

I posted it to my github page and called it "Self Service Icon Maker"

AVmcclint
Honored Contributor

@mm2270 you deserve an award for Self Service Icon Maker! That saves so much time!
f07d6aac4cc74d6e8144fff009495a8e

davidacland
Honored Contributor II
Honored Contributor II

Thanks @mm2270 Just tried it, works great, real time saver :)

roiegat
Contributor III

I might be doing it different, but I never get animated PNG....here's my methodology.

1) Select app I want to have icon for and click "Get Info"
2) Click on the icon in the Get Info window and click copy
3) Open preview and it select new
4) Scroll down the left side and find the 128 x 128 version (usually number 6)
5) Right click on the icon in the sidepan and select "Export As"
6) For format change to PNG and then name it

Upload to Casper and your all good. This works for Yosemite and El Capitan. It gives you nice looking Self Service Icons.

cwaldrip
Valued Contributor

@roiegat That's exactly how I do it too. The only time I get animated PNGs is when I'm not paying attention and export the entire thing as a PNG.

I usually don't notice until i upload it. And since there's no icon management panel (feature request outstanding), then it's off to edit the database and pray. :-

@mm2270 You sir are awesome. But I think we all know that already. Any change on a 128 or 256 setting? The JSS will take any size, and 128 is the default. But I've heard suggestions to use 256 for future proofing.

mm2270
Legendary Contributor III

@cwaldrip You asked for it and you got it. I just uploaded a 1.1 version. Changes are detailed on the github page: https://github.com/mm2270/Self-Service-Icon-Maker

mm2270
Legendary Contributor III

FYI for anyone using the app I posted above, I just updated it to version 1.3. The main change in this version is that it can now accept multiple applications dropped on it at once, so you can in theory select and drag in every app in your Applications folder and create icons in 128 or 256, etc. png format for all of them in one operation!

slundy
New Contributor III

Was the animated icon 'feature' removed from SS? Tried multiple APNG's and it doesn't seem to work anymore.

diradmin
Contributor II

@slundy Yes, the behavior of animated icons changed with the revamping of Self Service starting with Jamf Pro 10.x.

slundy
New Contributor III

boo

Ojok
New Contributor II

Interesting that one can animate app icons but cannot use an animated gif in the Self Service Banner image.