cre.ations.net - Blog entry: iPhone 1.1.3 WebClip hack

Home About cre.ations.net Recent creations Nate True's blog Most popular Most viewed Browse creations

Categories:

"Art"Fashion Food Home Tech Video Other

Quick search

iPhone 1.1.3 WebClip hack - Speed Dial on your home screen

Tags: 1.1.3, hacks, iphone, no jailbreak needed, speed dial, webclip

640 800 Full

So the new iPhone 1.1.3 firmware allows you to put icons on your home screen for websites, but I know many of us want to put phone numbers on there for a Speed Dial screen.

I've put a little hack together that lets you have a (somewhat) speedy speed dial icon. There's no jailbreaking required for this one - it can all be done using Apple-approved Web Clip creation.

Check the images below for a walkthrough.

640 800 Full

Start by heading to (phone number).tel.QLNK.net on your 1.1.3 iPhone. QLNK.net is owned by me and .tel.qlnk.net hosts a special page that will redirect your iPhone to call the phone number you specify.

Advanced: Set your own speed-dial picture by adding "?picurl=http://path.to/photo" to the end of the URL. You can use QLNK's URL shortening service to make it easier to type on the phone.

Privacy warning: Due to the nature of this hack, your phone will request this page when you create a speed dial icon on your home screen. I assure you I will not use this data AT ALL FOR ANY REASON. It is entirely possible to put a similar script on your own web server, which will do the same thing without sending me any information; that course of action is recommended if you are at all concerned about your privacy.

As of January 25, 2008, the page returns you to a data: URI, which does not contact my server every time you hit the icon - just the first time when you create it. The dialing page is instead stored locally on your phone.

Lee Fernandes has instructions on putting this onto your own server.

640 800 Full

You will see a "Call" popup - for now, hit Cancel. Later when you are using the speed dial you will use the "Call" button.

Now hit the "+" button at the middle of the Safari bottom bar.

640 800 Full

Hit "Add to Home Screen".

640 800 Full

Enter a name for the speed dial entry, and hit Add.

640 800 Full

Congratulations! You have a speed dial icon on your phone. Here I have added Google 411.

When you want to dial, unfortunately, you have to tap twice - once on the icon and then once in Safari to hit Call.

I'm hoping for more native support for icon speed dial later on from Apple.

Return to Nate True's blog

Comments:

Posted by zeroburn 2 years ago ( 22-Jan-2008 15:12:08 ), comment hidden (show)

Nate,
Again another great program to help us out here in the iphone world. BUT, after trying to get my phone working with ibrickr as I posted below in the qlink comments I need help. I am willing to donate to help your ipod touch cause but I want to get this working first.

Please contact me xtczeroburn@gmail.com or post on the qlink post.
Thanks again in advance.
Lee

Posted by smitty 2 years ago ( 22-Jan-2008 21:46:42 )

what about the URL tel://12345678910

i can't test the home screen, i'm still on 1.1.2, but i can bookmark that in safari and it works fine. to get the icon, you might have to surf to a page with that picture, then type tel:/ url, hit cancel, then add web clip

This comment was edited at 2008-01-22 21:49:07

Posted by fightoffyourdemons 2 years ago ( 22-Jan-2008 23:26:37 )

smitty:

tel://(phone number) does indeed work to place a call, but after hitting 'cancel' on the call box, the URL remains the one of the page you're currently on, so you can't add a web clip for it.

Posted by natetrue 2 years ago ( 23-Jan-2008 01:29:45 )

Yeah, the way the hack works is that the URL you typed in will automatically pop up that call box when the page loads. So when you hit the icon in your home screen, it calls up the same page, which automatically brings up the call box, so you can hit Call.

The process is a bit indirect, I'll admit, but it works.

Posted by sjlinwarsaw 2 years ago ( 23-Jan-2008 04:43:33 )

Hi, this is cool and I would like to put a similar page on my own server, can you give as an example of the script? Or is it simply something that returns the tel://number directly as the text of the page?
Thanks

Posted by xfrosch 2 years ago ( 23-Jan-2008 17:35:20 ), comment hidden (show)

I wound up putting 'location.href="tel:+12128675309";' in a script block on a static page, which if you hardcode the phone number requires no server-side processing. If you put the script block at the end of your doc body then you can include an IMG tag to load a picture of whatever you want in your icon. If you set width=100% in the img tag it will stretch the picture across the icon. (works for me, YMMV).

If you don't want to leave the icon image up, first put up a no-script page including the image. Once you've bookmarked that to your home screen, you can take it down and replace it with another page with the script in the <head>, which will load faster.

The script-in-body page has what some might consider an advantage: the ability to publish your phone number in a format that your iPhone-owning friends can save directly to their home screens. If you make the image a picture of you, it'll be that much easier for them to use.

You ought to be able to script a static page to unpack a phone number from a query string, but I don't have that coded yet.

Posted by xfrosch 2 years ago ( 23-Jan-2008 21:10:47 )

ok, I have put up a page to encode phone numbers into bookmarklets, so you don't have to go over the air at all before dialing. Somebody else please try it out to make sure I haven't screwed up the instructions below (which are Mac-specific; I only use Windows when someone is paying me to do it, so you guys are on your own).

bring up Safari on your desktop, and load
http://carroll.jk.googlepages.com/unpackpn.html?(number)
where (number) is the phone number you want to dial (leave out the parens). When it's finished loading and running the script, you should find a tel: URI on the address line, with a message in the browser window complaining that OS X doesn't know how to cope with tel: URIs.

Hit your back button. You should see an URI beginning "data:text/html;charset=utf-8". Bookmark this puppy, and sync your iPhone.

on the iPhone, go to Safari and load the bookmark you just created. Verify that it starts dialing the number you encoded, but cancel at the prompt. Make sure that the data: URI appears on the address line, and save it to your home screen.

This is all self-contained client-side Javascript (and pretty simple Javascript at that); you should be able to save unpackpn.html and run/modify it from wherever you have online storage. I haven't worked out custom icons for bookmarklets yet; if you do, email me at carroll.jk@gmail.com. Also email me if you have questions or need help; I won't be checking back here much.

I got the idea for bookmarklets from Garth Minette's excellent Belfry SciCalc, which is all wrapped up in a bookmarkable data: URI.

This comment was edited at 2008-01-23 21:11:39

Posted by leefernandes 2 years ago ( 23-Jan-2008 21:19:08 )

Nate, you are too cool for words! Thanks for the idea!

Here's the script to do this on your own server. It's not Nate's script, as I don't think he shared that, but it's my own basic PHP/Javascript concoction. It's fast because it doesn't load the image every-time you hit the page, only during the bookmark. Careful, you're on your own in regards' to XSS.

http://digg.com/apple/iPhone_1_1_3_Speed_Dial_PHP_Script

This comment was edited at 2008-01-24 02:19:35

Posted by xfrosch 2 years ago ( 24-Jan-2008 14:40:33 )

I have replaced unpackpn.html with a new version that takes both phone number and icon image parameters. You invoke it with an URL like this:

http://carroll.jk.googlepages.com/unpackpn.html?pn=12128675309&iu=http://foo.com/image.jpg

Again, this is all javascript; you can put it wherever you want. You can run it from your desktop with a file: URL if you want to. The file you specify for the iu parameter MUST be online, though, so that Safari on the iPhone can see it.

Thanks to Lee for pointing me to the apple-touch-icon header.

Posted by xfrosch 2 years ago ( 24-Jan-2008 15:15:25 )

just tried running the script from the iPhone itself; doesn't work because the btoa() function is apparently missing. I suppose if you wanted to you could write your own base64 decoding function, but since you're going to be syncing with the desktop anyway, this is probably good enough.

I should come up with a better filename than unpackpn.html, which pretty much indicates the opposite of what the script actually does, but since it's there I'm going to leave it for now.

This comment was edited at 2008-01-24 15:42:01

Posted by sahuguet 2 years ago ( 24-Jan-2008 19:16:35 )

This is a great hack.
Is there way to prevent the page from reloading everytime.
Can we use some caching directive in the HTTP header to force Safari to cache the page and not fetch it every time you click the on the speed dial icon?

Arnaud

Posted by xfrosch 2 years ago ( 25-Jan-2008 08:54:54 )

@sahuquet: if you run my javascript and bookmark the data: URI as explained above, you will accomplish the same thing as Nate's script without going over the air (and without giving him - or me - your phone number). Additionally, the version that is up now specifies the icon image in an apple-touch-icon link, so that it's only loaded once - when the home screen icon is created.

This comment was edited at 2008-01-25 09:56:05

Posted by cjyetman 2 years ago ( 26-Jan-2008 01:02:14 )

here's another possibility using just javascript:

<html>
<head>

<script type="text/javascript">
var str = window.location.search;
var icon = str.substring(str.indexOf('&')+6);
document.write('<link rel="apple-touch-icon" href="http://'+icon+'">');
var phone = str.substring(str.indexOf('phone')+6,str.indexOf('phone')+16);
window.location.replace('tel://'+phone,'mywin');
</script>

</head>
<body></body>
</html>

then use a url like this:
http://www.yourserver.com/yourpage.html?phone=2128675309&icon=www.yourserver.com/icon.jpg

Posted by rennok 2 years ago ( 27-Jan-2008 03:59:52 )

Nate, i managed to have it on iphone webserver using apache. however, i need the speeddial icon. can u mail to me please

Posted by zeigen 2 years ago ( 27-Jan-2008 04:33:56 )

Nate, this is awesome. However, I wanted a version that never sent the phone number to a server or a server log, and I wanted a nice Web front end to use right on the iPhone itself. So I duplicated your approach with the data stream and meta-refresh and have a nice simple version of this up on my site. Just point your iPhone to http://www.zeigen.com/dial/ I have a blog entry up at http://www.zeigen.com/blog/ Let me know what you think of the forms front-end. It just uses JavaScript, so you can view source to see how I'm doing it; I think it's the same method you use. My next step is to add some nice default icon selections.

Posted by rennok 2 years ago ( 28-Jan-2008 04:18:35 )

Hello All

you will definitely like this
i managed to have it all running on ur iphone. u do not need to have a webserver since u already have one on ur iphone.

The instructions:

1- download the package and extract it (will email u the package)
2- click on installer and install Apache
3- copy the extracted package speeddial folder to /Library/webserver/documents

to run it:

click on safari and type http://127.0.0.1/speeddial/index.html (add this address to u home screen to avoid the hassel of typing it each time u need to add a phone number)
Attached image:

640 800 Full

Posted by zeigen 2 years ago ( 28-Jan-2008 05:30:45 )

rennok, looks nice for people who have done jailbreaking.

If you haven't, try mine out at http://zeigen.com/dial -- thanks to Kevin Fox, there are now some default icons to choose from. More icons coming soon.

This comment was edited at 2008-01-28 05:45:21

Posted by iphonetico 2 years ago ( 28-Jan-2008 16:14:15 )

Rennok, your approach sounds really interesting. Can you post or upload your package somewhere?
I will like to try it!

Posted by rennok 2 years ago ( 29-Jan-2008 11:25:19 )

iphonetico, send me ur email to mail the package

Posted by iphonetico 2 years ago ( 29-Jan-2008 16:48:23 )

Tks jprivasb@gmail.com

Posted by ilover 2 years ago ( 01-Feb-2008 08:51:13 )

This is a cool concept. Something similar for the springboard back in October at: http://modmyifone.com/forums/showthread.php?p=65307

There's minor tweaking, but I got to upload my own icon and it's only one touch dialing. I'm not a pro like Nate, but I think that you can use this with any Jailbroken iPhone with SSH. You'll have to go here http://www.jonsthoughtsoneverything.com/iphone_apper to create the app. I followed the instructions made by "skihound" from the forum

This comment was edited at 2008-02-01 18:44:40

Posted by locklin 2 years ago ( 01-Feb-2008 20:00:37 )

Hey Rennok, I'd like to try your method, please send me the package to bgls@mac.com

Posted by mineshaftgap 1 year ago ( 17-Apr-2008 14:35:03 )

For those with a jailbroken iPhone, check out my application that creates speed dials on the iPhone which does not have to launch Safari or confirm the call.

SpringDial: Speed Dials for you SpringBoard

http://springdial.mineshaftgap.net/

Posted by jordandobson 1 year ago ( 03-Sep-2008 15:33:53 )

I've put together a SEXIER version of this that allows you to call the person again without hitting refresh.

http://madebysquad.com/iphone-photo-dial/