Good evening.
For some time I've been asked by a number of users, especially TOPS, if we could have more customisation of the maps and device icons. It's been a challenge getting Google Maps to do what was wanted but I think we're there now and a promise is a promise
The latest version is now 0.5.30
You can download the new version from this link:
https://www.dropbox.com/s/vtnxa5ssxvroga2/iFindStuff.zip?dl=1
While you're downloading files you might want to download a set of new icons for maps if you're using that feature from this link:
https://www.dropbox.com/s/gyvtykowqteqcsn/iFindStuffIcons2.zip?dl=1
Understanding Maps & Features
There are two types of maps that Google Maps API can generate: Static and Dynamic.
Static Maps - These are the maps that are generated and saved as PNG files so you can use them on your control pages. There are a number of restrictions:
1. You can't draw lines - so you can't show the range from a geofence
2. You can only have five different custom icons on a single map
3. You can't add labels to icons
4. Custom icons are limited to 60x60 pixels in size
Otherwise they're identical to their Dynamic counterparts.
Dynamic maps - These are maps that are generated and saved as HTML files. They are a lot more flexible and you can have bigger icons, you can add labels that appear when you hover and maps can be a lot bigger so you can show all of your devices. The problem is that Indigo can't display them on Control Pages yet
So to give you more functionality you'll notice that I've provided some new icons. They are called PhoneXStatic.png or PhoneXDyn.png. The Static files are used to display information on the Static maps and, if you haven't already guessed, the Dyn files are used on Dynamic maps. The Static map icons are all 60x60 pixels in size while the Dynamic ones are a lot bigger.
You need to put these new icons in specific places.
The Dynamic icons should be placed in the same directory where you store your maps. You've probably already got a couple in there already. If you place them here then configuring iFindStuff is a lot easier.
Placing the Static icons is more difficult. Google insists that they must be stored on the internet under a http:// address. This took me a while to understand and also to find a place to put them. Fortunately I realised that one place I could store them was on my DROPBOX drive and I've found that works really well.
So I created a directory on Dropbox called Icons and then copied the files inside. If you don't have dropbox then get an account. It's free and very accessible. Just go to http://www.dropbox.com. Here's my dropbox directory with the Icons folder in place.
- Dropbox
- Screen Shot 2015-09-18 at 17.02.16.png (87.49 KiB) Viewed 1617 times
You should copy all of the XXXXXStatic.png files from the icons file you downloaded into this directory as we're going to use it soon. If you decide to put them somewhere else on the web you'll need to know how to share a link from that place so iFindStuff can find them.
What's changed in version 0.5.30?
F19 - I'd like to add custom icons for each device to the maps. You can now add up to 10 custom icons that can be used to display devices on maps. First of all you need to tell iFindStuff where the files are. To do this you'll need to open the iFindStuff configuration screen.
- New Configuration Screen
- Screen Shot 2015-09-18 at 17.07.18.png (240.56 KiB) Viewed 1617 times
You'll notice that I've added 10 new fields - Custom Icons. This is where you'll save the path to your PNG files.
To copy a path follow these instructions (for Dropbox):
- Dropbox icons folder
- Screen Shot 2015-09-18 at 17.10.34.png (230.37 KiB) Viewed 1617 times
- Share Dropbox Link
- Screen Shot 2015-09-18 at 17.12.26.png (206.76 KiB) Viewed 1617 times
- Paste link
- Screen Shot 2015-09-18 at 17.15.18.png (58.34 KiB) Viewed 1617 times
1. Open your Dropbox Folder and then open the folder where you saved your Static icon files
2. Now right click on the file, in this case Phone1Static.png, and select Share Dropbox link
3. Right click in the field where you want to put the path, in this case Custom Icon 1 and Paste the link...
4. Edit the link in the following way. My link looks link this:
https://www.dropbox.com/s/8ejlgg39hcd0g9y/Phone1Static.png?dl=0
I need to change it to an http:// link and change dl=0 to dl=1 so it ends up like this:
http://www.dropbox.com/s/8ejlgg39hcd0g9y/Phone1Static.png?dl=1
5. Repeat for every file you want to have available... MAKE SURE THAT YOU LINK ONLY TO STATIC PNG FILES otherwise you won't get custom icons.
You can also add a filename for a default GeoFence icon in the last box for Dynamic Maps. In the example below I've used GeoFence2Dyn.png This is one of the files that you saved in your maps directory.
Ok - now that's done click Save
That's the hard bit over with.Now you can update your devices with your new graphics like this:
- Device Configuration
- Screen Shot 2015-09-18 at 17.23.16.png (115.08 KiB) Viewed 1617 times
1. Edit an iDevice and then Edit Device Settings...
You'll see two new fields - one for Static Maps and one for Dynamic Maps.
2. Click on the dropdown for the Static Maps and select an icon for your device. You can also select Default if you want iFindStuff to choose.
3. Now enter a filename for a Dynamic Map device icon in the second field.
And that's it... just Save the device.
Now your chosen icons should be displayed on the Static (control page) and Dynamic (menu) Maps.
Here are a couple of samples from my test system...
First a static map with custom icons... Notice that the GeoFence icon is a standard pointer. This allows you to have five custom icons dedicated to devices only.
- Static Map showing custom icons
- Screen Shot 2015-09-18 at 19.03.21.png (283.38 KiB) Viewed 1617 times
Now the same map as a menu generated dynamic map...
- Same map by Dynamic from Menu Option
- Screen Shot 2015-09-18 at 19.04.15.png (596.8 KiB) Viewed 1617 times
Finally an all devices Dynamic Map...
- All devices Dynamic Map...
- Screen Shot 2015-09-18 at 19.04.55.png (515 KiB) Viewed 1617 times
The key things are:
1. The link to a static image MUST start with http:// NOT https://
2. The size of a static icon CANNOT EXCEED 60x60 (I use the free Paint2 app to save files at this resolution)
If you don't follow the instructions then the icons will not display. I've tried to make them as easy and step by step as possible. But if you have a problem let me know
F18 - I'd like to see all of the devices on a single static map on a control page. Ok you will now get this map (it's called ALLDEVICES.jpg in your Maps folder). However, from this screen short you can see the logistical difficulties if your GeoFences are too far apart. In this screen shot my daughter is in Portugal at the moment so Google's scaling of the map causes a loss of resolution. I need to think about how we can deal with this elegantly. The other issue is that you can only have 5 custom icons. If you select a device that's assigned Custom Icon 6-10 then it will automatically be assigned the Default Icon. If you'd like to have a special icon for a device then only assign Custom Icon 1-5. This restriction doesn't apply to dynamic maps. Way to go on consistency Google!
- ALL Devices Control Page
- Screen Shot 2015-09-18 at 18.59.28.png (238.05 KiB) Viewed 1617 times
As you can see from the earlier screen shot the Dynamic Map is much better at this sort of display - but I appreciate not as useful for control pages
Bug Fixes
B37 - The map for my device doesn't seem to update from the Home Geofence. Tricky problem this but I discovered the cause completely by accident so I've changed the code to eliminate the problem. Let me know if it's worked.
Thanks so much for all your support
See you all soon - I'm off to the pub to watch the Rugby World Cup and see if England can thrash Fiji
BTW - I don't know if you've seen this post for a UK get together http://forums.indigodomo.com/viewtopic.php?f=133&t=13563#p101991. I'm going and I think it would be great if as many UK people could go as well
See you there?Mike
