Wednesday, September 28, 2016

Adding a B2 iOS webapp

**UPDATE - Thanks to Martin, this "hack" has been added to the "official" current firmware (18th October 2016) for the B2. No need to edit or host any images - just skip straight to the 3rd Step and go to your B2 ip address and add to home screen.  I leave the original post below for anyone wishing to make changes etc or improve for themselves.**

The B2 has a great android app and also a great webpage but is missing a great iPhone or iOS app.  Thankfully with a few lines of code and Safari's "Add to home screen" you can have a great icon linked "app" for your iPhone:



Notes before you start:
 - your Brennan B2 needs a static or never changing IP address.  Tips on how to do this can be found on the Brennan website.
- The code will also not survive any official updates, but any created webapp will still work even after an update. You will need to re-do these steps if you wish to make any changes to the icon etc - (18th October UPDATE  No longer true, Martin now hosts the icon and changes to the code on the B2 itself). 

Steps:

1. Host the following "icon" png file.  I suggest a dropbox public folder (howto link). 




2. You need to log on to the Brennan and edit index.html file.

This can be found at /var/www  My screenshots below, assume editing with vi, but please use which ever method you fill comfortable with, but of of scope for this post.





Add the following 2 lines - making sure you edit the link to the location of your icon file (My dropbox will not be around forever ;-) ):




<link rel="apple-touch-icon" sizes="180x180" href="https://dl.dropboxusercontent.com/u/1531955/apple-touch-icon-180x180.png">
<meta name="apple-mobile-web-app-capable" content="yes">

3.  Using Safari, goto the IP address of your B2:




Then click the middle icon "Box with up arrow" to "Share or add Bookmark":


Then click "Add to Home Screen". On the next screen click "Add"

This adds an the webapp icon and allows you to control your B2 as an app seemingly independent from the Safari web browser.

For more on developing iOS webapps I suggest the following links to start with:


Have fun. 

Pat

2 comments:

  1. Brilliant! On my ancient iPhone 4 (IOS 7) I had to choose "Add to Home Screen" for the icon to work

    ReplyDelete
  2. Great work. It works on iPhone 6 for a much needed addition to the B2.

    ReplyDelete