Mark wrote:Here's my "simple" trick:
Note: the original remainder of this post has been deleted as I later learned a much more elegant solution for this task. See "iPhone Button Icons, Part 2" later in this thread--Mark
Continued from a previous post...
OK... that first kludge had to go, as I've since learned the right way to get custom icons on my iPhone Home page buttons for my Indigo Control pages.
First, you'll no longer get miniature snapshots of your control pages if you have iPhone create a Home page button of your Indigo control pages, because Matt has kindly placed an image of the Indigo logo in the location Safari on iPhone looks for it to create its button icons. It's here if you want to take a look:
Hard Drive:Library:Application Support:Perceptive Automation:Indigo 2:IndigoWebServer:apple-touch-icon.png
But that solution still creates the same logo for all your Control pages. If you want to have
different, custom icons for each of your pages, read on...
1. Create a new folder within the IndigoWebServer folder to store your custom icons. I named mine "iPhone" and put it in the "images" folder, like this:
Hard Drive:Library:Application Support:Perceptive Automation:Indigo 2:IndigoWebServer:images:iPhone:
The name and location are important, as you'll see later. I'd recommend naming it with just letters, and no spaces.
2. Create icons for each of your Control pages and put them in the new "iPhone" folder you just created. Apple spec's the icon image to be a 57 x 57 pixel PNG file. But I found that Safari on iPhone will resize any image to fit on its buttons. In fact, the icons actually render at a higher resolution than 57 x 57, so I use a higher resolution image and the icons display with more detail (sharper). I use 171 x 171 (3 times 57). Here's a sample:
It's important you name the icons correctly. They have to be named exactly as your Control pages are, and with the ".png" suffix, like this: "control_page_name.png". I haven't tested this method with Control names that use anything but letter characters. I don't know how this will work if you have spaces in your Control page names. Mine use just letters.
Your PNG files can have a transparent background, or a colored or textured one. I included the Indigo logo so I can easily see which are my Indigo buttons. My Mac's Home folder icon was a good place for me to start. I set the background color of the folder that contains my Home folder to grey, set the folder to icon view, adjusted the size of the icon view to 120 x 120, then took a screen shot of the icon. I used Photoshop from there to create the PNG file with the Indigo logo "flag."
3. Finally, edit the Control page template to let Safari on iPhone know where the custom icons are. The template file is here:
Hard Drive:Library:Application Support:Perceptive Automation:Indigo 2:IndigoWebServer:templates:controlpage.html
Be sure to back up the file before you edit it, in case you want to revert your changes.
Simply add this line of code within the <head> section of the controlpage.html file:
- Code: Select all
<link rel="apple-touch-icon" href="/images/iPhone/${pageName}.png"/>
That's it. Create your new Home page buttons on your iPhone and you'll get your new, custom icons for each page on each button.
The code instructs Safari on iPhone to look for a custom icon for each Control page, within the "iPhone" folder. If you name the images with anything other than the name of your control page, it won't work. And if you decide to use a different location than the one I suggested, you'll have to edit the html code to reflect that.
You'll need to add this code to the template each time you upgrade Indigo, as the changes will be overwritten. I doubt Matt will add this code permanently, as it overrides the Indigo icon he's created for this purpose, and unless his other Indigo users create custom icons, they wouldn't get the Indigo icon when they create their iPhone Home page buttons.
Have fun, share your icons. Here's some 57 x 57 versions of some of my "Mac OS Inspired" icons (hope Apple doesn't mind). Let me know if you want any of mine in a larger size:
