tag:blogger.com,1999:blog-42421553765658293832024-03-06T03:35:49.981+11:00Coxys' BlogA place for everything...Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.comBlogger60125tag:blogger.com,1999:blog-4242155376565829383.post-80904013089760688892012-05-27T15:31:00.002+10:002012-05-27T15:31:30.347+10:00Android App Inventor - More SMS ServicesSince I wrote my last tutorial about using SMS services in AppInventor I have had a number of questions on the post which I thought I would expand on here.<br />
<br />
I have added a some additional logic to the SMSTest application that will display the text message on the screen.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bazM74i5bfUBbuv2gqycQ6kXvMG0-g8abaRh9NzCclTzmm_dthi3zmw5Ne9fpRkVu2bshjUq4hlAGgTTcC5Bsr-XZpfcA0eqKYjD78zwbbILK_jK60rAEBFoEC_TJ6XZyDKKHSRyrF8/s1600/Screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bazM74i5bfUBbuv2gqycQ6kXvMG0-g8abaRh9NzCclTzmm_dthi3zmw5Ne9fpRkVu2bshjUq4hlAGgTTcC5Bsr-XZpfcA0eqKYjD78zwbbILK_jK60rAEBFoEC_TJ6XZyDKKHSRyrF8/s320/Screen.png" width="320" /></a></div>
<br />
<br />
To achieve this I added a Label to the form called lblMessageReceived. When the phone receives a text message it will be displayed here.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpZSCp2MSg8IEEscXuIUwHA4nTQQVWAA5JBFKLfAVQb_8fkIhBJBlMNpTib1h_iXUeA58N4RhTS1wZ80O-oUxtzUp2oUAHDP8xiW3c_PMscu7CJRRB3zWehhe4cgjv9Xv_wSCKybo4OD4/s1600/Blocks.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpZSCp2MSg8IEEscXuIUwHA4nTQQVWAA5JBFKLfAVQb_8fkIhBJBlMNpTib1h_iXUeA58N4RhTS1wZ80O-oUxtzUp2oUAHDP8xiW3c_PMscu7CJRRB3zWehhe4cgjv9Xv_wSCKybo4OD4/s320/Blocks.png" width="320" /></a></div>
<br />
<br />
I changed my <b>IF</b> blocks to a <b>IFELSE</b> block and included a block to set the lblMessageReceived.Text to the value of Message1.messageText if the messageText is NOT 'Status?'.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg07fSsWbpewOCj4__JLQPevNhA9wcPzySE3NPX0TOHXDttfbuXQNLpJSb6TsrLwZiUMzRu7x9YfYeoPRjdGAVOo9ELxEfxdMbx7cHE2SxP-eLwTDmLCgKWclddUXAf0E0t44lz_VCsFgY/s1600/Result%25232.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg07fSsWbpewOCj4__JLQPevNhA9wcPzySE3NPX0TOHXDttfbuXQNLpJSb6TsrLwZiUMzRu7x9YfYeoPRjdGAVOo9ELxEfxdMbx7cHE2SxP-eLwTDmLCgKWclddUXAf0E0t44lz_VCsFgY/s320/Result%25232.png" width="158" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq7_cA82VaGARt60jC88DyT2iY2ksfPFBUUvfx62JBm4JodLKboze8rG-YXxk-7u8gGm4cBtB_KP1DKEUWwVkG2d_ISyuZ5vm-cq8BsTUNFMllWZtN9RNmWJUOs3SGI0H4MvmoAWV7abQ/s1600/Result%25231.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq7_cA82VaGARt60jC88DyT2iY2ksfPFBUUvfx62JBm4JodLKboze8rG-YXxk-7u8gGm4cBtB_KP1DKEUWwVkG2d_ISyuZ5vm-cq8BsTUNFMllWZtN9RNmWJUOs3SGI0H4MvmoAWV7abQ/s320/Result%25231.png" width="158" /></a></div>
<br />
The image above shows the application running on emulator 5554 receiving a message from emulator 5556. You can see the label showing the contents of the text message.<br />
<br />
This also shows the use of two running emulators to test communication application. The number in the title bar is the phone number of the emulator. This makes it very easy to test SMS applications.<br />
<br />
<br />
I hope this tutorial has been helpful. Please feel free to comment if you need further information.<br />
<br />
I have added a link to the source code <a href="http://coxydave.blogspot.com/p/app-inventor-source.html">here</a>.<br />
<br />
My other App Inventor tutorials:<br />
<a href="http://coxydave.blogspot.com/2010/10/android-app-inventor-location.html">App Inventor - Location Services</a><br />
<a href="http://coxydave.blogspot.com/2011/03/android-app-inventor-lists.html">App Inventor - Lists</a><br />
<a href="http://coxydave.blogspot.com.au/2011/02/android-app-inventor-simple-sms.html">App Inventor - SMS Services</a><br />
<a href="http://blog.davidcox.id.au/files/ListToWebDB.zip">App Inventor - TinyWebDB Tutorial Source</a><br />
<a href="http://blog.davidcox.id.au/files/coxytinywebdb.zip">App Inventor - TinyWebDB Part 2 - Web Service Source</a>Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com2tag:blogger.com,1999:blog-4242155376565829383.post-45099412387457685912011-10-18T21:51:00.000+11:002011-10-18T21:51:25.999+11:00Google Maps - Image Overlay Tutorial<br />
I have recently been working with my father on expanding our family tree and adding information to individuals. One of the items he had was some annotated maps produced by his uncle showing the various pieces of property owned by the family in a small country town in NSW.<br />
<br />
When I first saw these maps I immediately thought that it would be a good idea to have them overlayed onto a Google map to allow other members of the family to view them in context.<br />
<br />
At the time, I had no idea of how to do this, but had seen the results on some other history websites. It was only when I watched the '<a href="http://www.youtube.com/watch?v=ATfdi-oYWzw">Map Your Business - Inside and Out</a>' presentation from Google IO 2011 that I obtained the necessary knowledge and tools to produce these maps.<br />
<br />
Although this presentation told me what tools were required to build the maps it was lacking in instructions on how to use the tools. I am hoping this blog post will provide a bit more guidance and some helpful hints on getting a result from these tools.<br />
<br />
The general workflow for producing a map overlay from a hand-drawn or annotated map is:<br />
<ul>
<li>Obtain Source Maps</li>
<li>Geo Reference the Source Maps</li>
<li>Produce Overlay Tiles</li>
<li>Build Page to display Overlap Map on Google Maps.</li>
</ul>
<br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">Obtain Source Maps</span><br />
<br />
My source maps were hand-annotated maps that had been scanned as TIFF files. I resized these images and uploaded them to my hosting account. This was necessary to use the Overlay-Tiler tool in the next section. For the purposes of this tutorial I will use a historic map from Gosford, NSW.<br />
<br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">Geo-reference the Source Maps</span><br />
<br />
The first step to displaying these maps as overlays on Google Maps is to determine the latititude/longitude for the corners of the map. To make this easier, the Maps team from Google has provided a tool called Overlay-Tiler. This is an interactive map where you can drag the corners of a overlay image around until it lines up with the underlying Google Map. The output of this tool is a GDAL_TRANSLATE command line script which you can run against the image to produce a geo-referenced TIFF.<br />
<br />
<u>Step 1.</u><br />
Open the <a href="http://overlay-tiler.googlecode.com/svn/trunk/upload.html">Overlay-Tiler</a> web application in Chrome. The initial screen below allows you to specify the image location (published on web-site) and the initial location for the Google Map.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeciCISU1Ww-1SF_9tn1-LgTWDCH9idJjd8_vVVWZDXdHOrNisJPGbT05ofF1QdLU2B_NUJyMeIzGSaAKCAca8-UGf3fAoNpxU6sC4qEgXtL_t9zNUEst1bGy5lG3SeEmrYvSfPWo1G2o/s1600/screenshot.2.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeciCISU1Ww-1SF_9tn1-LgTWDCH9idJjd8_vVVWZDXdHOrNisJPGbT05ofF1QdLU2B_NUJyMeIzGSaAKCAca8-UGf3fAoNpxU6sC4qEgXtL_t9zNUEst1bGy5lG3SeEmrYvSfPWo1G2o/s320/screenshot.2.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Step 1 - Provide Overlay Image and Initial Location</td></tr>
</tbody></table>
<u>Step 2.</u><br />
Pressing the Upload button will display the main screen for the Overlay-Tiler application. Your initial map will be displayed along with a semi-transparent overlay of your map image. This image is shown with control-points on three corners to allow you to drag and rotate the image to match the underlying Google Map.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD7xyCeUkZhGhvf4HX93GeLpRMn2CUyEuevuTQM4CLw7nQacUeSHy23J6V4yU9kVAAm7emVAYz_XsvHs58qYseY1sUvxThEt51ritOBAnKdRHkXq3h9cpXQjQ-GD-oK2OlLb-2Wj6HkPc/s1600/screenshot.4.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD7xyCeUkZhGhvf4HX93GeLpRMn2CUyEuevuTQM4CLw7nQacUeSHy23J6V4yU9kVAAm7emVAYz_XsvHs58qYseY1sUvxThEt51ritOBAnKdRHkXq3h9cpXQjQ-GD-oK2OlLb-2Wj6HkPc/s320/screenshot.4.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Step 2 - Overlay Image displayed on Google Map</td></tr>
</tbody></table>
<u>Step 3.</u><br />
By dragging the handles of overlay image and changing the zoom levels of the underlying Google Map it should be possible to line up major features of both maps. This can be quite time-consuming depending on the accuracy of the overlay map.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqaXDC_fpGIACVpqaZUvX3qTXDb5FN0hRJO3sV0RAv2dq2w1EwKXYrUDiUD6482_0fVuIBf4Hg2bnflT-xcU3ywO-x5QjuVi1PfNA-2yjcAAIREK6BCb4ELtJGbqtJL5L0JsZ7UMOh3gM/s1600/screenshot.5.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqaXDC_fpGIACVpqaZUvX3qTXDb5FN0hRJO3sV0RAv2dq2w1EwKXYrUDiUD6482_0fVuIBf4Hg2bnflT-xcU3ywO-x5QjuVi1PfNA-2yjcAAIREK6BCb4ELtJGbqtJL5L0JsZ7UMOh3gM/s320/screenshot.5.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Step 3. Overlay Map re-sized and rotated to line-up with Google Maps</td></tr>
</tbody></table>
<u>Step 4.</u><br />
Once the overlay map has been aligned to the Google Map the GDAL_TRANSLATE command line will be displayed in the box in the bottom right-hand corner of the screen. Copy this command line to a safe place. I store these in the same directory as my maps.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzL_qkmybF87Q6XT22g8WeQydzMei48E1EpQoF6-4Cj7ivWMy7yfBath1NDyS5Xy41ir7Uvy8qUHJWd-etsXB4MskGvf0TFwc5NGaWWjzSkhBKw4MBepZC0wO_v-sa4djUs1dXuBEQBw/s1600/screenshot.6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzL_qkmybF87Q6XT22g8WeQydzMei48E1EpQoF6-4Cj7ivWMy7yfBath1NDyS5Xy41ir7Uvy8qUHJWd-etsXB4MskGvf0TFwc5NGaWWjzSkhBKw4MBepZC0wO_v-sa4djUs1dXuBEQBw/s320/screenshot.6.jpg" width="320" /></a></div>
<br />
The GDAL_TRANSLATE command line script will produce a new geo-referenced image. To run this command you will need to have the GDAL tools installed on your machine. Various versions of this toolset exist for most operating systems. I am using Windows so I downloaded and installed the desktop version of <a href="http://trac.osgeo.org/osgeo4w/">OSGeo4W (Open Source GEO for Windows)</a>. This will install an environment on your machine to run GDAL tools.<br />
<br />
<u>Step 5.</u><br />
To produce the geo-referenced image, start the OSGeo4W command prompt and copy the command line script from Step 4 above. The '\' characters will need to be removed from the command script.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilsLP3hbKEQXViru2ByDgSnz8unXi8yNa5Q_JrnD74Q9s9VTOzH3VzVpm9BluG8egdrHXAWXrXEansI7MJas3QrCfkNWfOxvxO9CFwNSYjeCFqyOnW3mA1tDE7Noo3DYg7vDhzFqEWt3w/s1600/screenshot.7.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilsLP3hbKEQXViru2ByDgSnz8unXi8yNa5Q_JrnD74Q9s9VTOzH3VzVpm9BluG8egdrHXAWXrXEansI7MJas3QrCfkNWfOxvxO9CFwNSYjeCFqyOnW3mA1tDE7Noo3DYg7vDhzFqEWt3w/s320/screenshot.7.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Step 5 - Run the GDAL_TRANSLATE script to produce the geo-referenced image.</td></tr>
</tbody></table>
The output from this section is a PNG image that includes embedded geo information. <br />
<br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">Produce Map Tiles for your map</span><br />
<br />
The final output from this process is a collection of tiles that can be referenced by the Google Maps API to overlay over the standard Google Maps tiles. A common way to produce these tiles is to use the GDAL2TILES Python script. This will produce a series of tiles that are named appropriately to publish and use in Google Maps API. As I do not currently have a Python environment installed I decided to use the MapTiler application which is a Graphical Interface to the GDAL2TILES script.<br />
<br />
<u>Step 1.</u><br />
Run the MapTiler desktop application. Select the type of Tileset to create. We are creating a Google Map overlay so will select the first option.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgd0W_iTqacvvW0RKMKdi2aHXDHEYBWcZACaYj4bQzXWFg_NVn2DeLa9Aj8cs54ZlfNg5REhfdZvLVrqsWR15HluFj505ugGzQyCM53xx064wlPLN-tF3OUassYnHZfp2F6VlSof1ojyI/s1600/screenshot.8.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgd0W_iTqacvvW0RKMKdi2aHXDHEYBWcZACaYj4bQzXWFg_NVn2DeLa9Aj8cs54ZlfNg5REhfdZvLVrqsWR15HluFj505ugGzQyCM53xx064wlPLN-tF3OUassYnHZfp2F6VlSof1ojyI/s320/screenshot.8.jpg" width="320" /></a></div>
<br />
<u>Step 2.</u><br />
Add a new Source Data file (Overlay Image created in the previous section). If the geo-referencing has occurred correctly, the Georeference column will show 'GCPs'. <br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisBtVBxyaPL1PqL8i8xu1RYk7H5eZbVpcIpzro40uAkMEVcdgrXsvooPoy57XhOaPfxNxg6Mv4SPmE7_pg5U329b-LpHXGJFnVwBk5CxVl38b5f4CUGS2rtHE9e41sZsdDib10AFxjBGc/s1600/screenshot.9.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisBtVBxyaPL1PqL8i8xu1RYk7H5eZbVpcIpzro40uAkMEVcdgrXsvooPoy57XhOaPfxNxg6Mv4SPmE7_pg5U329b-LpHXGJFnVwBk5CxVl38b5f4CUGS2rtHE9e41sZsdDib10AFxjBGc/s320/screenshot.9.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Step 2 - Add a Source Data File</td></tr>
</tbody></table>
<br />
<u>Step 3.</u><br />
Select a Spatial Reference System - for Google Maps overlays the most appropriate is WGS84.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcXVpF378hCgXp0ShxGJ2a-iIOI4jer3OlFn_D75qKMvOFS1O3eit7RmS2fgrHJ1mDQ-CJGA0qfu26HX1Y52l9ggPmqoXH5wmXexu9EECwbf_DUkhifXlBJv5uMa-T1sM8IPMfl9UFWQw/s1600/screenshot.10.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcXVpF378hCgXp0ShxGJ2a-iIOI4jer3OlFn_D75qKMvOFS1O3eit7RmS2fgrHJ1mDQ-CJGA0qfu26HX1Y52l9ggPmqoXH5wmXexu9EECwbf_DUkhifXlBJv5uMa-T1sM8IPMfl9UFWQw/s320/screenshot.10.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Step 3 - Confirm the Spatial Reference System</td></tr>
</tbody></table>
<br />
<u>Step 4.</u><br />
The next step in the MapTiler application is to select the Google Map zoom levels your overlay will be shown on. The application will default to the most appropriate zoom levels however you can adjust the levels to suit. The higher zoom levels will require a higher resolution image to avoid 'jaggies'.<br />
<br />
You can also select the file format at this point.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOnpuJucgjdiXoUNKFiyHM_LI3kkt7uzII9zgGkVCPgYH7UOKhR1qlSxfZvdbzEkKJIK4JLiDfVb2FqPPySNRDFZMWNQMPrYbnQWs1Ox_4YtwdIlbROi_fkPWsHQpzCHEBX3lb2vXaxpo/s1600/screenshot.11.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOnpuJucgjdiXoUNKFiyHM_LI3kkt7uzII9zgGkVCPgYH7UOKhR1qlSxfZvdbzEkKJIK4JLiDfVb2FqPPySNRDFZMWNQMPrYbnQWs1Ox_4YtwdIlbROi_fkPWsHQpzCHEBX3lb2vXaxpo/s320/screenshot.11.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Step 4 - Tile Pyramid</td></tr>
</tbody></table>
<u>Step 5</u><br />
Enter the location where you would like the files to created.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic58lLi4pQZlrz7NDHk3VU3qlKy1RIobaUhZOnn-NsTIjDEcUPwmr2y2xYS8Abf2LIbcqP_p4hfIliH27O050vnGvbtyDmrfAwFM-5TlYxwV_2vp3vLZn_Rqp5WbFVa4x1IG0QEutSJNA/s1600/screenshot.12.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic58lLi4pQZlrz7NDHk3VU3qlKy1RIobaUhZOnn-NsTIjDEcUPwmr2y2xYS8Abf2LIbcqP_p4hfIliH27O050vnGvbtyDmrfAwFM-5TlYxwV_2vp3vLZn_Rqp5WbFVa4x1IG0QEutSJNA/s320/screenshot.12.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Step 5 - File Location</td></tr>
</tbody></table>
<u>Step 6</u><br />
Select the Web Viewers you would like MapTiler to generate. These are a HTML page that contains the appropriate code to display the overlay on either a Google Map or OpenLayers Map. These can be used as a base for your own pages.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQbtxV0Tto6u0DglbcwnerkNwmITYsSv3kUycSS3nnJvTfjIHt1T4gKBxAaWl4P6KkGv5uu5i26hXqeuvaEbrJ3I_0R3yCvVNFi3U6d08zi0v8OqGfvyBY3QP7f2wySqK40Rb0Qunl-00/s1600/screenshot.13.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQbtxV0Tto6u0DglbcwnerkNwmITYsSv3kUycSS3nnJvTfjIHt1T4gKBxAaWl4P6KkGv5uu5i26hXqeuvaEbrJ3I_0R3yCvVNFi3U6d08zi0v8OqGfvyBY3QP7f2wySqK40Rb0Qunl-00/s320/screenshot.13.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Step 6 - Selection of Web Viewer</td></tr>
</tbody></table>
<br />
<u>Step 7</u><br />
The next step in the process is to configure the Google Maps API Key. If you are testing only on your local machine you do not require a Maps API Key. If you want to publish on the web you will need to obtain a <a href="http://code.google.com/apis/maps/signup.html">Google Maps API Key</a>. This key is restricted to a single domain.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSBg6yauTBfw6tiniuvn-EZh_CP8Ts3C4evHnJusC9mMdlaGsKfqzO13wERRSPvtdoB-3CUdapXIVyzMUSmEtAKD3rLy6nPfyQAAoLGn-aou8QsYraAY3kS2YNX1dnA3kb_up2UDbCRUQ/s1600/screenshot.14.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSBg6yauTBfw6tiniuvn-EZh_CP8Ts3C4evHnJusC9mMdlaGsKfqzO13wERRSPvtdoB-3CUdapXIVyzMUSmEtAKD3rLy6nPfyQAAoLGn-aou8QsYraAY3kS2YNX1dnA3kb_up2UDbCRUQ/s320/screenshot.14.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Step 7 - Enter Google Maps API Key</td></tr>
</tbody></table>
<br />
<u>Step 8</u><br />
The final step of the process is to Render the tiles. This will create a series of image tiles at each zoom level and the Map Viewer HTML.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKwuvIU0oT0yMIN-rcrO8-HE-Gy9raMmstRrmgEqZi3tP5ztB5-02s19TfaS7fCp4LotGNSg9BDCv-wHnR5HDrnkzEFI_abjNpjFs12tH4332Y5js4eQ5H3h7gHJ-R5DjA2K_dl5MO6xw/s1600/screenshot.15.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKwuvIU0oT0yMIN-rcrO8-HE-Gy9raMmstRrmgEqZi3tP5ztB5-02s19TfaS7fCp4LotGNSg9BDCv-wHnR5HDrnkzEFI_abjNpjFs12tH4332Y5js4eQ5H3h7gHJ-R5DjA2K_dl5MO6xw/s320/screenshot.15.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Step 8 - Render the Tiles</td></tr>
</tbody></table>
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">Publish your Map</span><br />
<br />
The output from the MapTiler application is the collection of tiles (at various zoom levels) and one or two HTML Pages (depending on map options selected).<br />
This directory structure can be copied directly to your web host, where it can be viewed as a full page map. Due to the simplicity of the HTML it is very strait-forward to modify the layout and contents of the page.<br />
<br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif;">Conclusion</span><br />
<br />
Using this technique to show overlay maps on Google Maps is a great way to show historic mapping in context of the current day. It also allows the overlay of other information (floor plans, evacuation maps)<br />
<br />
The following examples show a Google Map and OpenLayers Map created as part of this tutorial.<br />
<br />
<a href="http://www.davidcox.id.au/blog/BlogMap/googlemaps.html">Google Map Example</a><br />
<a href="http://www.davidcox.id.au/blog/BlogMap/openlayers.html">OpenLayers Example</a><br />
<br />
I hope you find this tutorial useful. Feedback is always welcome.<br />
<br />
Enjoy.Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com10tag:blogger.com,1999:blog-4242155376565829383.post-77020974472878611862011-08-17T21:25:00.001+10:002011-08-17T21:25:45.504+10:00Android App Inventor - MIT Center for Mobile LearningGoogle <a href="http://googleresearch.blogspot.com/2011/08/new-mit-center-for-mobile-learning-with.html">announced</a> today that Google App Inventor will be a key part of the MIT Centre for Mobile Learning. MIT will take stewardship of the project and will actively develop and promote the service as a teaching tool.<br />
<br />
Given the track record MIT have with open source software this is good news for the App Inventor community.Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com0tag:blogger.com,1999:blog-4242155376565829383.post-37092377362524901972011-08-11T19:35:00.000+10:002011-08-11T19:36:01.123+10:00Android App Inventor - Closing DownWith the winding down of Google Labs, Google has <a href="http://www.googlelabs.com/show_details?app_key=agtnbGFiczIwLXd3d3IUCxIMTGFic0FwcE1vZGVsGPOaIgw">announced</a> that Android App Inventor will no longer be supported by Google and will be converted to an Open Source application.<br />
<br />
The service will remain available until at least the end of the year, however the URL will change in the near future. The viability of the product will depend on a benefactor taking control of the project and providing hosting.<br />
<br />
<br />
<br />Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com0tag:blogger.com,1999:blog-4242155376565829383.post-80919032887163201912011-07-16T14:25:00.000+10:002011-07-16T14:27:35.501+10:00Android App Inventor - Load CSV File to DatastoreIn a previous <a href="http://coxydave.blogspot.com/2011/04/android-app-inventor-tinywebdb.html">post</a> I described how to use the TinyWebDB component within the Android App Inventor. This post described using the Google supplied TinyWebDB web service to store data on the web.<br />
<br />
I was recently asked a question about how to pre-load the web service with data. Google provides a <a href="http://code.google.com/appengine/docs/python/tools/uploadingdata.html">bulk-uploader</a> service that you can use to load values from a file. After doing some research into the bulk-uploader it seemed to be very complex and I started to think of other ways to achieve a similar result.<br />
<br />
The solution I created was using the web interface provided in the web service to upload a comma-separated file to the blobstore and subsequently loading the value into the datastore. I have attached the <a href="http://blog.davidcox.id.au/files/coxytinywebdb.zip">source</a> code of this new version of the TinyWebDB web service to my <a href="http://coxydave.blogspot.com/p/app-inventor-source.html">source code page. </a><br />
<br />
The main visible change to the application is the addition of a page to handle the uploads of the CSV files to the App Engine Blobstore. This uses a standard File Upload form control to display the File Open Dialog.<br />
<br />
The page also displays the uploaded files along with an option to load the contents of the CSV file to the App Engine Datastore.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjDYKhmZq64CeRr0-Tv9BReKREt-iHlqMW0CqP6ACtrgxD0gprgw0AiiWaA1rYqbvK_htQ-ga1K53S6DCciCgm77qwHySVKf110LvsAFRD3aYaOFQ9GgJpmmvUcXHD9bsoMlmgvJn0TQQ/s1600/Upload.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjDYKhmZq64CeRr0-Tv9BReKREt-iHlqMW0CqP6ACtrgxD0gprgw0AiiWaA1rYqbvK_htQ-ga1K53S6DCciCgm77qwHySVKf110LvsAFRD3aYaOFQ9GgJpmmvUcXHD9bsoMlmgvJn0TQQ/s200/Upload.jpg" width="200" /></a></div>
<br />
The main logic of the Blobstore Upload was courtesy of User: <a href="http://stackoverflow.com/users/451007/010110110101">010110110101</a> on StackOverflow who provided a great example of using Blobstore to store files in App Engine. I added this logic to the TinyWebDB web service code.<br />
<br />
With the file uploaded to the blobstore, the web service then uses the Python CSV reader to read the file and load each key/value pair into the datastore. These key/value pairs are then available to the AppInventor application through the standard operations. <br />
<br />
Feel free to use/modify this code for your own purposes. Enjoy.<br />
<br />
My other App Inventor tutorials are:<br />
<a href="http://coxydave.blogspot.com/2011/02/android-app-inventor-simple-sms.html">App Inventor - Simple SMS</a><br />
<a href="http://coxydave.blogspot.com/2010/10/android-app-inventor-location.html">App Inventor - Location Services</a><br />
<a href="http://coxydave.blogspot.com/2011/03/android-app-inventor-lists.html">App Inventor - Lists</a><br />
<a href="http://coxydave.blogspot.com/2011/04/android-app-inventor-tinywebdb.html">App Inventor - TinyWebDB</a> <br />
<br />
Links<br />
<a href="http://appinventor.googlelabs.com/learn/reference/other/tinywebdb.html">TinyWebDB Web Service</a><br />
<a href="http://stackoverflow.com/questions/81451/upload-files-in-google-app-engine/4787543#4787543">Blobstore Python Code</a> - StackOverflow<br />
<a href="http://stackoverflow.com/questions/5491616/access-tab-separated-value-content-stored-in-a-gae-blob-but-using-universal-newl">CSV Reader in AppEngine</a> - StackOverflow<br />
<br />Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com3tag:blogger.com,1999:blog-4242155376565829383.post-78239737984065883862011-06-29T22:08:00.001+10:002011-06-29T22:15:12.350+10:00Google+After years of speculation, Google has <a href="http://googleblog.blogspot.com/2011/06/introducing-google-project-real-life.html">released details</a> of its answer to Facebook. Google+ aims to make sharing and dissemination of information easy and targeted, no more spamming all your friends with a link only a handful will appreciate.<br />
<blockquote>We’d like to bring the nuance and richness of real-life sharing to software. We want to make Google better by including you, your relationships, and your interests.</blockquote> Information about the site is limited to the original blog post as well as a post on <a href="http://www.wired.com/epicenter/2011/06/inside-google-plus-social/">Wired</a> describing the service. Access is limited to 'invite-only' at this time and there is a <a href="https://services.google.com/fb/forms/googleplus/">form</a> available to register your interest. <br />
<br />
Once I receive my invite I will post my impressions.<br />
<br />
<i>Links</i><br />
<a href="http://googleblog.blogspot.com/2011/06/introducing-google-project-real-life.html">http://googleblog.blogspot.com/2011/06/introducing-google-project-real-life.html</a><br />
<a href="http://www.wired.com/epicenter/2011/06/inside-google-plus-social/">http://www.wired.com/epicenter/2011/06/inside-google-plus-social/</a>Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com0tag:blogger.com,1999:blog-4242155376565829383.post-72556746724513952752011-06-12T14:53:00.000+10:002011-06-12T14:53:37.123+10:00Nearmap Aerial Mapping<a href="http://www.nearmap.com/">Nearmap</a> is a Photomap and location-based media company that provides high resolution aerial photography of Australias major population centres. These photographs are updated on a regular basis and the historical imagery is available.<br />
<br />
A majority of the imagery is at 7.5cm resolution. This means that each pixel in the image represents 7.5cm of the earth surface. This means these images show more detail than many other mapping services.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Sans7o_OovwueeoM_1EwQUTjPySHXRnM9wgfxBO2hBNqhUEw-t9vjUXZ6Z39fsxVrtUr4Jei_8j2BCNwFBazioOgVbZWeU3MhMxHlQmuIjqYq7Sp0B_rh0qjbHNHxQ6S4_LcsfUCRvg/s1600/Overall.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Sans7o_OovwueeoM_1EwQUTjPySHXRnM9wgfxBO2hBNqhUEw-t9vjUXZ6Z39fsxVrtUr4Jei_8j2BCNwFBazioOgVbZWeU3MhMxHlQmuIjqYq7Sp0B_rh0qjbHNHxQ6S4_LcsfUCRvg/s320/Overall.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sample Image from Nearmap</td></tr>
</tbody></table>One of the more unique features of the Nearmap service is the fact that the imagery is updated on a regular basis. Many metropolitan areas are updated on a monthy basis and the other major population centres are updated quarterly. Once captured and processed these new images are available very quickly. As the older imagery is also available it is possible to view and compare images from one month to the next.<br />
<br />
Nearmap also provide a <a href="http://www.nearmap.com/documentation/browsermap/">Javascript API</a> to allow developers to embed maps into their own webpages. I have a simple example of this API <a href="http://blog.davidcox.id.au/nearmap.html">here</a>.<br />
<br />
Overall, I find this service extremely useful. It is well worth signing up to.Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com0tag:blogger.com,1999:blog-4242155376565829383.post-58753258645307438552011-05-14T15:59:00.000+10:002011-05-14T15:59:03.376+10:00Google I/O 2011 - Keynote Day 2Here is the Day 2 Keynote from Google I/O. <br />
<div class="separator" style="clear: both; text-align: center;"><object class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="http://1.gvt0.com/vi/MiYND_zvIc0/0.jpg" height="266" width="320"><param name="movie" value="http://www.youtube.com/v/MiYND_zvIc0&fs=1&source=uds" /><param name="bgcolor" value="#FFFFFF" /><embed width="320" height="266" src="http://www.youtube.com/v/MiYND_zvIc0&fs=1&source=uds" type="application/x-shockwave-flash"></embed></object></div>Todays keynote was about Chrome, Chromebooks and HTML5.<br />
<br />
Enjoy.Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com0tag:blogger.com,1999:blog-4242155376565829383.post-71964602856246662622011-05-11T21:39:00.001+10:002011-05-11T21:59:19.798+10:00Google I/O 2011 - Keynote Day 1<div class="separator" style="clear: both; text-align: left;">For those developers not able to attend Google I/O 2011, here is the link to the Keynote for Day 1.</div><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/OxzucwjFEEs?feature=player_embedded' frameborder='0'></iframe></div><br />
So far Google has announced:<br />
<ul><li> <a href="http://music.google.com/">Google Music</a>, </li>
<li><a href="http://developer.android.com/guide/topics/usb/adk.html">Android Open Accessory Developer Kit</a></li>
<li><a href="http://mashable.com/2011/05/10/android-at-home/">Android @ Home</a> </li>
<li><a href="http://blog.golang.org/2011/05/go-and-google-app-engine.html">GO Language Support in Google App Engine</a> </li>
</ul>More to come...Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com0tag:blogger.com,1999:blog-4242155376565829383.post-44825912079439408302011-04-05T15:22:00.001+10:002011-04-16T08:44:51.692+10:00Android App Inventor - TinyWebDBThe next post in my series on Android App Inventor makes use of one the 'Not for Primetime' components. The <a href="http://appinventor.googlelabs.com/learn/reference/components/notready.html#TinyWebDB">TinyWebDB </a>component allows you to store data on a web service. This means that the data can be accessed by the Android phone as well as a web application.<br />
<br />
For testing purposes Google have provided a test web service at <a href="http://appinvtinywebdb.appspot.com/">http://appinvtinywebdb.appspot.com/</a>. This service is a limited service and will only store 1000 entries. Due to these limitations it should NOT be used for your applications. Google provides <a href="http://appinventor.googlelabs.com/learn/reference/other/tinywebdb.html">instructions</a> on how to create your own web service using Python and the Google App Engine.<br />
<br />
The following example uses the application I built for the <a href="http://coxydave.blogspot.com/2011/03/android-app-inventor-lists.html">Android App Inventor - Lists</a> post. This post will show how to store the contents of a list to the TinyWebDB web service and also retrieve the contents of a list from the TinyWebDB web service.<br />
<br />
<br />
To begin we need add two buttons (btnStoretoWeb & btnGetListfromWeb).<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVmiGZ5m9BzgNEtnrSuAIZcaG3NwC8GWwJ_vbxF-ndP3qBXb9pTI5WIVZLJI5hyphenhyphenVr9jW1MeMmQtAo1ZhI2r8hXWRcFfoj8_z0lk5P5oCHzcKiFDgN625_rDbNvac6uJ8XiI7X1CFTRrok/s1600/GUI_StoreGet.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="36" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVmiGZ5m9BzgNEtnrSuAIZcaG3NwC8GWwJ_vbxF-ndP3qBXb9pTI5WIVZLJI5hyphenhyphenVr9jW1MeMmQtAo1ZhI2r8hXWRcFfoj8_z0lk5P5oCHzcKiFDgN625_rDbNvac6uJ8XiI7X1CFTRrok/s320/GUI_StoreGet.png" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI3yKyhLhNhNu7SVnRcwxW9n4FVuA2JUBSvnqB2R65AfP2nIx8bqQb__y3hxSZObBVkAErtHc_pHAguKtRvRVxJFF86BYxrreiYZtjWzqZPLxymhJtET1j5_uK41H2I9Ke-o19IK59C3s/s1600/GUI_StoreGet_Buttons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI3yKyhLhNhNu7SVnRcwxW9n4FVuA2JUBSvnqB2R65AfP2nIx8bqQb__y3hxSZObBVkAErtHc_pHAguKtRvRVxJFF86BYxrreiYZtjWzqZPLxymhJtET1j5_uK41H2I9Ke-o19IK59C3s/s1600/GUI_StoreGet_Buttons.png" /></a></div><br />
We also need to add the TinyWebDB component. I have also added a Notifier component to allow us to return a message to the user when the data is stored.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9fCUVv6Fm4tzIYCER-vCl5YGfwBibiT0YdG-pLPcQs4kmilOSM3iHhmR78Sv2ZlIZs9mdpyS0h7meJtcbQRYKiWDkUjq5rE26jRvZszvY26V55Ex2SnqblWItC9F3qhimuuiTVCclWhE/s1600/GUI_NonVisible.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9fCUVv6Fm4tzIYCER-vCl5YGfwBibiT0YdG-pLPcQs4kmilOSM3iHhmR78Sv2ZlIZs9mdpyS0h7meJtcbQRYKiWDkUjq5rE26jRvZszvY26V55Ex2SnqblWItC9F3qhimuuiTVCclWhE/s320/GUI_NonVisible.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: left;"> The TinyWebDB1 control needs to have the ServiceURL set to the debug URL: <a href="http://appinvtinywebdb.appspot.com/">http://appinvtinywebdb.appspot.com/</a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh41EDGUk7zPG3QDsDNt3LDUZGZba6KQqhoiN2wL0v8XrqwyLddIP_FK1AeW7F5u9EHqUfo3NxMbDEfP0R8jBkAjATuk9fDXHW2QbAjturkboa4NMHxtKvMEFDK_xslaQ4A9-44Ki80GqM/s1600/GUI_NonVisible_Details.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh41EDGUk7zPG3QDsDNt3LDUZGZba6KQqhoiN2wL0v8XrqwyLddIP_FK1AeW7F5u9EHqUfo3NxMbDEfP0R8jBkAjATuk9fDXHW2QbAjturkboa4NMHxtKvMEFDK_xslaQ4A9-44Ki80GqM/s1600/GUI_NonVisible_Details.png" /></a></div><br />
Once the GUI has been configured we start the block editor and create the logic to save the list to the TinyWebDB.<br />
<br />
To store a value on the web service we add the btnStoretoWeb.Click event. Within the event we call the TinyWebDB1.StoreValue method. This method has two parameters. The 'tag' parameter allows you to assign a key to the data. The second parameter is the list you are going to store.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qdmfNy22J1ptbe1Q1o70GFcjv_katA_3hUxWOZFLynDLtnGj8CaMS2T5DZgs6ls5LQeB__LYRzokio9_CuS8nhNIFX06dBXaHFEXzJF6NWynPp5i3M6aDYijd2ZEoiS4aj_JNFDMdfA/s1600/StoreToWeb.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qdmfNy22J1ptbe1Q1o70GFcjv_katA_3hUxWOZFLynDLtnGj8CaMS2T5DZgs6ls5LQeB__LYRzokio9_CuS8nhNIFX06dBXaHFEXzJF6NWynPp5i3M6aDYijd2ZEoiS4aj_JNFDMdfA/s320/StoreToWeb.png" width="320" /></a></div>The second event shown above is the TinyWebDB1.ValueStored event. When a value is stored in the TinyWebDB this event is triggered. I have used it to provide a notification to the user that it worked.<br />
<br />
The next step is to retrieve the values from the web service and repopulate the list. In this case I have used a button to manually trigger the load of the list. In a production application you may want to put this code into the Screen.Initialize event.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj0-Tv2tyB6qZ2cu-Aq1rdzHynqMI14BFaPDCHfwLgi3a8Dei28ylU4IgZRKlRn0uQwMyv9Qu-3bBE1mRgC3ZvPOx75O1L2xp2_dGy-hZwOqSNKmbkEG4KVchoVUCBnXNJCJuTcf1uPF0/s1600/GetFromWeb.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj0-Tv2tyB6qZ2cu-Aq1rdzHynqMI14BFaPDCHfwLgi3a8Dei28ylU4IgZRKlRn0uQwMyv9Qu-3bBE1mRgC3ZvPOx75O1L2xp2_dGy-hZwOqSNKmbkEG4KVchoVUCBnXNJCJuTcf1uPF0/s320/GetFromWeb.png" width="320" /></a></div>In the btnGetFromWeb.Click event we call the TinyWebDB1.GetValue method with the name of the 'tag' we want to retrieve. In this case it is the MyStoredList tag.<br />
<br />
Once the GetValue call is sent we need to wait for the TinyWebDB1.GotValue event to be called. This ensures that our application can remain responsive even if the call to the web service is slow to respond. When the event is triggered the application has access to the parameter valuefromWebDB. This contains the list we stored previously.<br />
<br />
We can then store this value into the list. We also update the label to show the number of items in the list. I also load the ListPicker1 component.<br />
<br />
I hope this tutorial has been helpful. Please feel free to comment if you need further information.<br />
<br />
I have added a link to the App Inventor source <a href="http://coxydave.blogspot.com/p/app-inventor-source.html">here</a>.<br />
<br />
My other App Inventor tutorials are:<br />
<a href="http://coxydave.blogspot.com/2011/02/android-app-inventor-simple-sms.html">App Inventor - Simple SMS</a><br />
<a href="http://coxydave.blogspot.com/2010/10/android-app-inventor-location.html">App Inventor - Location Services</a><br />
<a href="http://coxydave.blogspot.com/2011/03/android-app-inventor-lists.html">App Inventor - Lists</a>Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com12tag:blogger.com,1999:blog-4242155376565829383.post-58860979920467054312011-04-05T11:51:00.000+10:002011-04-05T11:51:01.962+10:00Commuting Time - Productive?As I spend around 3 hours of my day on a train commuting I found this article by Dave Burke very interesting. It shows that with the right technology it is possible to be productive even when you re travelling.<br />
<br />
<div style="text-align: left;"><a href="http://googleblog.blogspot.com/2011/03/20-percent-time-spent-coding-in-clouds.html?m=1">Official Google Blog: 20 percent time spent coding in the clouds</a></div><div style="text-align: left;"><br />
</div><div style="text-align: left;">In the past I have typically used the time on the train to read or sleep but due to the better mobile data plans I am able to login to services such as <a href="http://appinventor.googlelabs.com/">App Inventor</a> to develop applications for my Android phone.</div><div style="text-align: left;"><br />
</div><div style="text-align: left;">Now instead of 3 hours of wasted time I can be productive. </div><div style="text-align: left;"><br />
</div><div style="text-align: left;"><br />
</div>Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com0tag:blogger.com,1999:blog-4242155376565829383.post-72144652376178134732011-03-04T17:05:00.001+11:002011-03-20T21:11:42.689+11:00Android App Inventor - ListsThis post will explain the use of lists and list controls in Android App Inventor.<br />
<br />
There are three parts to this post. In the first part I will examine how to create a list and add items to the list via the GUI, the second part will show how to make use of items in a list directly and thirdly I will show how to link a list to a GUI list control to select and display items.<br />
<br />
To create a list we go to the Block Editor and define a new variable called 'list'. We can then call a 'make a list' method which will create a blank list. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB-ic3YdB3_uB4feJhOKwRvoOAN_vLsQmtW7ntu5eA41-uOpAbQFVhZHYFDpfDy7NB1TpPGs2pG_QDG3pRf4FDVoESBkSR2bFawT2P7Hkddp6m_T3T2VsN8GcySp-lL7KQPtE5tEbUYNA/s1600/Android+Lists+-+Block+-+Add+Item.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB-ic3YdB3_uB4feJhOKwRvoOAN_vLsQmtW7ntu5eA41-uOpAbQFVhZHYFDpfDy7NB1TpPGs2pG_QDG3pRf4FDVoESBkSR2bFawT2P7Hkddp6m_T3T2VsN8GcySp-lL7KQPtE5tEbUYNA/s320/Android+Lists+-+Block+-+Add+Item.png" width="320" /></a></div><br />
<br />
<br />
<br />
In the GUI add a textbox and button. The textbox will be where you add the value you want added to the list. The button will call the btnAddText.Click event to add the text in the textbox to the list.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_D_2Hoy_nWSwSlA25IR4u-33S5KWYPQCqfmxAqIhjeEvWp1_zzMvRxT29vH4pi28hVHqSufh6ZN5tUwFvS4NXXUQkrXpe-AoXjRlxmoOvaYlv2C8GkTzdRhGo7Hh0O_sXmbrz3XfdA9c/s1600/Android+Lists+-+GUI+-+Insert+Entry.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_D_2Hoy_nWSwSlA25IR4u-33S5KWYPQCqfmxAqIhjeEvWp1_zzMvRxT29vH4pi28hVHqSufh6ZN5tUwFvS4NXXUQkrXpe-AoXjRlxmoOvaYlv2C8GkTzdRhGo7Hh0O_sXmbrz3XfdA9c/s1600/Android+Lists+-+GUI+-+Insert+Entry.png" /></a></div>The code will also update the label underneath the button to show the current number of items in the list. <br />
<br />
The next step is to make use of this list. In the screenshot below I have added a button and a label to the screen. The label is not visible as it is empty at the moment.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvbS83UdbZpmGXSWyPD3ZsacVEeFcv4tyvvkBtdXoVGcJwHPx4-uzf998Iu0dmxv6X-Sqj2-ZlyDaI78tvjfvrKzB2UG-c-SFs-ImesVkVwhwR7ZimvPqmL9UICDO1oHEw2ZIxr55ZFsU/s1600/Android+Lists+-+GUI+-+Show+Random.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvbS83UdbZpmGXSWyPD3ZsacVEeFcv4tyvvkBtdXoVGcJwHPx4-uzf998Iu0dmxv6X-Sqj2-ZlyDaI78tvjfvrKzB2UG-c-SFs-ImesVkVwhwR7ZimvPqmL9UICDO1oHEw2ZIxr55ZFsU/s1600/Android+Lists+-+GUI+-+Show+Random.png" /></a></div>When the button is selected on-screen the btnRandom.Click event is called. This event will randomly select one of the list items and display it in the label. The call to the random function is surrounded by an IF block to ensure that the list is not empty.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtpxAmJe_QVIGNbiN_mYyC2EUyDMplF2d4lcLn92tqLPPIcz2bwXtiBVaLQtKpaM4Qp_9baKXwnB2BipbmFTuxpYQzezmC39yb4Fb0Ofc_qnzFhRqzGcvm04j-bO2n_e40X3z1GGzkdHQ/s1600/Android+Lists+-+Block+-+Show+Random.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="96" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtpxAmJe_QVIGNbiN_mYyC2EUyDMplF2d4lcLn92tqLPPIcz2bwXtiBVaLQtKpaM4Qp_9baKXwnB2BipbmFTuxpYQzezmC39yb4Fb0Ofc_qnzFhRqzGcvm04j-bO2n_e40X3z1GGzkdHQ/s320/Android+Lists+-+Block+-+Show+Random.png" width="320" /></a></div>Finally, the last thing to do is associate this list with an on-screen control that we can access to select items.<br />
<br />
On the GUI a ListPicker control has been added. We also add a Label to show the returned value.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKln_WcZmVd71mFoXG-emcynu3AODUZ95Xqe7oJRynaOgkN8T_eYoIEGQswAjlcn20Dws4FwCa2wcuUnP9vUNPrNEeLvXbq2X5J5lEI9jP-cVK7zpT-gDMwNyl3gjU1sGE5eFwP4MJpc/s1600/Android+Lists+-+GUI+-+Launch+List+Selection.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdKln_WcZmVd71mFoXG-emcynu3AODUZ95Xqe7oJRynaOgkN8T_eYoIEGQswAjlcn20Dws4FwCa2wcuUnP9vUNPrNEeLvXbq2X5J5lEI9jP-cVK7zpT-gDMwNyl3gjU1sGE5eFwP4MJpc/s1600/Android+Lists+-+GUI+-+Launch+List+Selection.png" /></a></div>This control will display a list of values and when the user selects one it will return the value back to the user. To associate a List with a ListPicker control we call pass the list into the ListPicker.Elements method.<br />
<br />
In our example this is done as part of the btnAddText.Click method. This ensures that the list control is updated each time an item is added to the List. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB-ic3YdB3_uB4feJhOKwRvoOAN_vLsQmtW7ntu5eA41-uOpAbQFVhZHYFDpfDy7NB1TpPGs2pG_QDG3pRf4FDVoESBkSR2bFawT2P7Hkddp6m_T3T2VsN8GcySp-lL7KQPtE5tEbUYNA/s1600/Android+Lists+-+Block+-+Add+Item.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB-ic3YdB3_uB4feJhOKwRvoOAN_vLsQmtW7ntu5eA41-uOpAbQFVhZHYFDpfDy7NB1TpPGs2pG_QDG3pRf4FDVoESBkSR2bFawT2P7Hkddp6m_T3T2VsN8GcySp-lL7KQPtE5tEbUYNA/s320/Android+Lists+-+Block+-+Add+Item.png" width="320" /></a></div>Now that we have associated the list to the ListPicker control we can use a ListPicker.AfterPicking block to show the returned value on the Label.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf7B7wVIm1R7cnCcimmmFXHD2hym9PDqw8JHl7fYEOoDd7qpTgTPkys9gXcrk790cysIPs9ZLE2zD_2vT0HFdt2FO_sShFgL9rKMq-5zWuPm3f5MYRyUhL02QuUyXGtp2ouBu8swALioo/s1600/Android+Lists+-+Block+-+Select+from+List.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="82" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf7B7wVIm1R7cnCcimmmFXHD2hym9PDqw8JHl7fYEOoDd7qpTgTPkys9gXcrk790cysIPs9ZLE2zD_2vT0HFdt2FO_sShFgL9rKMq-5zWuPm3f5MYRyUhL02QuUyXGtp2ouBu8swALioo/s320/Android+Lists+-+Block+-+Select+from+List.png" width="320" /></a></div>The following is some screenshots showing the overall GUI design with the names of the controls. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5vjAM7eLWd5xDiVxDAzDe0r5ENnAOmMDiCPFK_RBcm2BlQ1KUP4NQZGrDt1hOCpiZAjb8UFyFtpavkGvcZha9ZIl1hwncS0xinQUZjZx4CvaSpMUBJSEpDUHLmVfSaIygNmmh69NQF1Y/s1600/Android+Lists+-+GUI+-+Overall.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5vjAM7eLWd5xDiVxDAzDe0r5ENnAOmMDiCPFK_RBcm2BlQ1KUP4NQZGrDt1hOCpiZAjb8UFyFtpavkGvcZha9ZIl1hwncS0xinQUZjZx4CvaSpMUBJSEpDUHLmVfSaIygNmmh69NQF1Y/s320/Android+Lists+-+GUI+-+Overall.png" width="320" /></a></div><br />
I hope this tutorial has been helpful. Please feel free to comment if you need further information.<br />
<br />
My other App Inventor tutorials are:<br />
<a href="http://coxydave.blogspot.com/2011/02/android-app-inventor-simple-sms.html">App Inventor - Simple SMS</a><br />
<a href="http://coxydave.blogspot.com/2010/10/android-app-inventor-location.html">App Inventor - Location Services</a>Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com3tag:blogger.com,1999:blog-4242155376565829383.post-71078926812805079322011-02-24T21:40:00.002+11:002011-04-16T08:45:35.125+10:00Android App Inventor - Simple SMSRecently, I have been doing some further development on Android App Inventor. My focus for this work was getting the application to send and receive SMS messages. To aid others in doing this I put together this tutorial which shows this.<br />
<br />
The first part of the tutorial shows how to send an SMS from within an App Inventor App. This is relatively simple and requires a a couple of text boxes (Mobile Number & Message Text) and a button to press to send the message.<br />
<br />
You will also need to add a non-visual Texting component to the form. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDN2glM8HYqP7j8khzSc72k7JOkQ4QyV8s3fwM09DYCdvzkoJ0k2lqpzioQiPBJ5cpfnRrncqNlQSoizz-TCx3SsfsVAPFsY6_dlTf2XsK-OTXRgPw0PsQiTwu3l566DUS9VnRXIT0wTA/s1600/Send+SMS+-+GUI.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDN2glM8HYqP7j8khzSc72k7JOkQ4QyV8s3fwM09DYCdvzkoJ0k2lqpzioQiPBJ5cpfnRrncqNlQSoizz-TCx3SsfsVAPFsY6_dlTf2XsK-OTXRgPw0PsQiTwu3l566DUS9VnRXIT0wTA/s320/Send+SMS+-+GUI.png" width="320" /></a></div><br />
<br />
Once the form has been created, the Blocks required to send a message should be configured as in the following image.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8xCRQ9amZjPCW2Qg8B1vknfj7tiZhUbCdzEx8x0fgNuSDoA4TwmH_gwmcgqLzWAtdDMr8ACl0UkMCc8eTgsHPnM0zm9oEZYsz4McAOMpRBiW-1Bp9BEnuxpDYYlxlD2PAj4jeWWKqQpE/s1600/Send+SMS+-+Blocks.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="109" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8xCRQ9amZjPCW2Qg8B1vknfj7tiZhUbCdzEx8x0fgNuSDoA4TwmH_gwmcgqLzWAtdDMr8ACl0UkMCc8eTgsHPnM0zm9oEZYsz4McAOMpRBiW-1Bp9BEnuxpDYYlxlD2PAj4jeWWKqQpE/s320/Send+SMS+-+Blocks.png" width="320" /></a></div><br />
This block of code is executed when the user clicks the Send Message button. The first two actions are to set the Mobile Number and Message text on the Texting object to the values in the text boxes.<br />
<br />
The last action calls the Texting.SendMessage method to actually send an SMS. Simple.<br />
<br />
Note: This code does not do any error checking or validation. Erroneous data may cause the application to Force Close.<br />
<br />
The second part of the tutorial will show how to make an App Inventor application respond to an SMS that it receives. For this application there is no GUI as the application handles the logic in the background. All we need are some blocks to intercept the SMS messages received.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz4TqAyCMcoE0z7dsxfh27MLrRujWMLcd3bGza0uqoqMfiCAMsl21BCV5n4TNW74Kqc-LvCgx3SThp3wBM4fF_H88mERKKardc5UiQL3RYOhjqxPuCy1BCEGh1CygHf1KmOynbnGLLKk0/s1600/Respond+SMS+-+Blocks.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz4TqAyCMcoE0z7dsxfh27MLrRujWMLcd3bGza0uqoqMfiCAMsl21BCV5n4TNW74Kqc-LvCgx3SThp3wBM4fF_H88mERKKardc5UiQL3RYOhjqxPuCy1BCEGh1CygHf1KmOynbnGLLKk0/s320/Respond+SMS+-+Blocks.png" width="320" /></a></div><br />
<br />
This block of code is executed when the phone gets a SMS message.<br />
<br />
The MessageRecieved method exposes two values: number and messageText. You can store these in a couple of variables.<br />
<br />
<br />
The second thing this block does is to check the message to see if it contains the text 'Status?' If this text is in the message it will create a new TextMessage using the received number and respond with the message 'All Good!'. This is a simple application for this but could be used for such things as responding with a user location or responding with a simple message if the user is unavailable.<br />
<br />
I hope this tutorial has been helpful. Please feel free to comment if you need further information.<br />
<br />
I have added a link to the source code <a href="http://coxydave.blogspot.com/p/app-inventor-source.html">here</a>.<br />
<br />
My other App Inventor tutorials:<br />
<a href="http://coxydave.blogspot.com/2010/10/android-app-inventor-location.html">App Inventor - Location Services</a><br />
<a href="http://coxydave.blogspot.com/2011/03/android-app-inventor-lists.html">App Inventor - Lists</a>Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com10tag:blogger.com,1999:blog-4242155376565829383.post-71086126186057318352011-02-20T01:07:00.000+11:002011-02-20T01:07:57.923+11:00GPS VisualiserOne of the online tools I use regularly while working with GPX files and mapping is the <a href="http://www.gpsvisualizer.com/">GPS Visualizer</a> website. The GPS Visualizer website is a collection of tools that work with GPX files to produce maps and profiles of GPS tracks.<br />
<br />
The main functions I use on the website are:<br />
<br />
1. <a href="http://www.gpsvisualizer.com/map_input">Draw a Map</a><br />
<br />
The Draw a Map page allows you to select a GPX file and display it overlayed on a variety of different map types including Google Streetmap, Google Satellite and Google Terrain. Once created the image can be captured as an image file.<br />
<br />
2. <a href="http://www.gpsvisualizer.com/profile_input">Draw a Profile</a><br />
<br />
The Draw a Profile page allows you to select a GPX file and display a elevation profile for this GPX file. The profile can be colorcoded to show elevation, speed, heart rate and other data points. Where a GPX file does not include elevation data the form gives the ability to add elevation data from a DEM dataset.<br />
<br />
3. <a href="http://www.gpsvisualizer.com/elevation">Lookup Elevations</a><br />
<br />
<a href="http://www.gpsvisualizer.com/elevation"></a>The Lookup Elevation page allows you to recreate the elevation data for a GPX track using a DEM dataset. This is useful if the existing GPX file does not have elevation data or the data is incomplete. Rather than directly rendering a profile (as in point 2) the page gives you the option to save a new GPX file.<br />
<br />
As well as these easy to use functions there are a multitude of ways to make use of the GPS Visualizer service. If you are using GPX files on a regular basis this service is a very handy addition to your tools.Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com0tag:blogger.com,1999:blog-4242155376565829383.post-4318257581730118972010-11-07T22:20:00.000+11:002010-11-07T22:20:08.582+11:00Endomondo Android ApplicationIn previous posts <a href="http://coxydave.blogspot.com/2010/09/my-tracks-for-android.html">here</a> and <a href="http://coxydave.blogspot.com/2009/06/gps-mapping.html">here</a> I documented how I use GPS enabled mobile phones to record my mountain bike rides. I have recently been evaluating <a href="http://www.endomondo.com/home">Endomondo</a>. Endomondo is an Android application which records your rides, runs, swims, and any other exercise.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGSNjP2wNwapbiVSarBMDi4alAHX93XiV2rQRAHHJCVrcoociWLZxqh-dk15_9Ovi9d3EeMEsq54o3_aLCp8TCtMNK2CYvZVc4naPHoIJ0BYjVkZot6_qxnxuf3-O_EHn_MisFQgaW_RI/s1600/Mobile-app-CMYK.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGSNjP2wNwapbiVSarBMDi4alAHX93XiV2rQRAHHJCVrcoociWLZxqh-dk15_9Ovi9d3EeMEsq54o3_aLCp8TCtMNK2CYvZVc4naPHoIJ0BYjVkZot6_qxnxuf3-O_EHn_MisFQgaW_RI/s320/Mobile-app-CMYK.jpg" width="320" /></a></div>The Endomondo service consists of a mobile application (Android, iPhone, Blackberry and Symbion) that makes use of the GPS functionality of the phone to track your workouts. This is paired with a web-based service that will store a history of your workouts along with allowing you to see your workouts overlayed on a Google Map.<br />
<br />
Some of the key features of the Endomondo service which make it interesting to use are:<br />
<br />
<ol><li>Audio Coach: the Audio Coach uses the text to speech functionality on your Android phone to announce your current progress at each kilometer. It means you do not need to constantly check your progress on your phone.</li>
<li>Live Tracking: if you have a mobile connection active on your phone, the application will constantly update the web service with your progress. This will allow interested people to follow your progress via your profile page. An interesting addition to this is the ability for someone to send a message to your device which will then be read out by your device.</li>
<li>Routes: if you have a favourite ride/run this can be published as a route on the web service which means that anybody can ride/run this course and compare their times to yours. </li>
</ol><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkA6k0MVf-nXSfJHJtHj_pTzdpu5mDlxcVjU683qSmjCCiTmu6ACR3zMUSkD9AIzFvwLhw4XcrMDa0WH5H-j8SPpIA6FK6mKbz69U8_8MwewH0kVo4owDExKLfkoWwSz2Ah00Q-2XfQZw/s1600/Workout-CMYK.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkA6k0MVf-nXSfJHJtHj_pTzdpu5mDlxcVjU683qSmjCCiTmu6ACR3zMUSkD9AIzFvwLhw4XcrMDa0WH5H-j8SPpIA6FK6mKbz69U8_8MwewH0kVo4owDExKLfkoWwSz2Ah00Q-2XfQZw/s320/Workout-CMYK.jpg" width="320" /></a></div><br />
Overall, the application and web service work together very well. The workout history is reasonably comprehensive and the statistics collected can be used to see how many kilometers are ridden in a year.Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com1tag:blogger.com,1999:blog-4242155376565829383.post-76276454696733131192010-10-17T17:27:00.003+11:002011-04-16T08:46:40.509+10:00Android App Inventor - Location<div style="margin: 0px auto 10px; text-align: center;"><div style="text-align: left;">I <a href="http://coxydave.blogspot.com/2010/09/htc-desire-android-phone.html">recently</a> got a new HTC Desire phone. One of the main reasons for purchasing an Android phone was the ability to write and deploy my own applications to it. Just prior to getting the phone I had seen a post from Google regarding the new <a href="http://appinventor.googlelabs.com/about/">App Inventor for Android</a> tool. The tool is in beta at this time so I signed up hoping that I would get an invite and I would be try out this new tool. Last week I got the invite and started playing with App Inventor.</div><div style="text-align: left;"><br />
</div><div style="text-align: left;">As I am interested in GPS and location aware applications I decided to develop a small application that would show the current location, current address and the option to launch the Google Maps application on the phone.</div><div style="text-align: left;"><br />
</div><div style="text-align: left;"> The Android App Inventor is a web application that has a visual GUI builder to create the GUI and uses 'blocks' in place of code to provide the logic in the application.</div><div style="text-align: left;"><br />
</div><div style="text-align: left;">The screenshot below shows the GUI builder with the 4 controls used to display the current latitude and longitude and the street address if known from the Google geocoding service. It also has a button to initiate the display of a Google map centered on the current co-ordinates.<br />
<br />
To obtain the GPS co-ordinates you will need to add a <a href="http://appinventor.googlelabs.com/learn/reference/components/sensors.html#LocationSensor">LocationSensor</a> to the non-visible components. This sensor allows you to access the built-in GPS on Android devices. It includes methods to enable/disable the internal location sensor, read the sensors and get the current address.</div><div style="text-align: left;"></div><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh03K1i-AM9MJ6D9OxwKun52ZLs3YJSjyx-fI4yTfcCtFTNsHYRZeOGmiQkG9Mke5Zg4DuAeWBmWmHRd1IGoptnzmmCgV4JJIH6-iykxAI8iXjKG5M5JeVhvjJLfz8bjduXd9ROD27SsJg/s1600/Location_GUI.jpg"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh03K1i-AM9MJ6D9OxwKun52ZLs3YJSjyx-fI4yTfcCtFTNsHYRZeOGmiQkG9Mke5Zg4DuAeWBmWmHRd1IGoptnzmmCgV4JJIH6-iykxAI8iXjKG5M5JeVhvjJLfz8bjduXd9ROD27SsJg/s320/Location_GUI.jpg" /></a> </div>The next screenshot shows the logic required to display the latitude, longitude and address on the screen whenever the phone is moved.<br />
<br />
It also shows the logic for the ActivityStarter to create and display a Google Map. Information on how to setup the properties for the Google Maps ActivityStarter is in the <a href="http://appinventor.googlelabs.com/learn/tutorials/maptour/maptour.html">MapTour</a> tutorial.<br />
<br />
<div style="margin: 0px auto 10px; text-align: center;"><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi85HAO9ZCZdxbYqyFp53WC4vOdqZbKLpGkM2kIjKrMt0P67uVB6NunUWL5b3swRVYAEPLtPep3etYYM2erCF5xwvwDCl-Xo4i445gUtyCoRJq0c59Vrn6mMqekKpboIE2oEbm40aClwZc/s1600/Location_Block.jpg"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi85HAO9ZCZdxbYqyFp53WC4vOdqZbKLpGkM2kIjKrMt0P67uVB6NunUWL5b3swRVYAEPLtPep3etYYM2erCF5xwvwDCl-Xo4i445gUtyCoRJq0c59Vrn6mMqekKpboIE2oEbm40aClwZc/s320/Location_Block.jpg" /></a> </div><div style="clear: both; text-align: center;"></div><br />
Once the properties are configured you will need to generate the URI to pass to the Map Activity. I have shown this above as it took a couple of attempts to get this right. As it is not currently possible to simulate the location sensor in App Inventor the app will need to be compiled and deployed to either the Android SDK emulator or a real phone.I did this a number of times prior to getting it to work.<br />
<br />
I hope this information helps if you are trying to use LocationSensor and Google Maps activities on App Inventor.<br />
<br />
I have added a link to the source code <a href="http://coxydave.blogspot.com/p/app-inventor-source.html">here</a>.<br />
<br />
My other App Inventor tutorials are here:<br />
<a href="http://coxydave.blogspot.com/2011/03/android-app-inventor-lists.html">App Inventor - Lists</a><br />
<a href="http://coxydave.blogspot.com/2011/02/android-app-inventor-simple-sms.html">App Inventor - SMS Services</a>Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com8tag:blogger.com,1999:blog-4242155376565829383.post-4003578305932233172010-09-16T16:29:00.001+10:002010-09-16T16:31:12.654+10:00My Tracks for AndroidIn the past I have done some mapping of the various mountain bike tracks around the Central Coast. In a previous <a href="http://coxydave.blogspot.com/2009/06/gps-mapping.html">blog post</a> I documented how I used my Nokia phone and a bluetooth GPS dongle to do mapping.<br />
<br />
Now I have a HTC Desire this process has now become much easier to do and I only have to carry one device while I ride.<br />
<br />
The key to using the HTC Desire for mapping is the <a href="http://mytracks.appspot.com/">My Tracks for Android</a> application. This application was built by some Google engineers in their 20% time and the results have been open-sourced for the community to benefit.<br />
<br />
The My Tracks application uses the GPS in your Android device to record your location as you walk, run or ride. The resulting information can then be exported to either Google Documents to record the details or Google Maps to visualise the route.<br />
<br />
Here is an example of a map produced by the My Tracks application.<br />
<br />
<iframe frameborder="0" height="300" marginheight="0" marginwidth="0" scrolling="no" src="http://maps.google.com.au/maps/ms?hl=en&ie=UTF8&msa=0&msid=115873633534979095170.00048ff413bbb75b52274&ll=-33.420338,151.34697&spn=0.021492,0.025749&z=14&output=embed" width="300"></iframe><br />
<small>View <a href="http://maps.google.com.au/maps/ms?hl=en&ie=UTF8&msa=0&msid=115873633534979095170.00048ff413bbb75b52274&ll=-33.420338,151.34697&spn=0.021492,0.025749&z=14&source=embed" style="color: blue; text-align: left;">2GO Track</a> in a larger map</small><br />
<br />
An example of the data collected and archived in Google Docs is <a href="https://spreadsheets.google.com/pub?key=0AgBLDBeAYYrBdG9fd195dXBzTDVXbDRlQXdOUHA2ZkE&hl=en&output=html">here</a><br />
.<br />
My experience so far with Google My Tracks has been very positive and I will continue to use it for both my riding and running.Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com1tag:blogger.com,1999:blog-4242155376565829383.post-3563822551246131722010-09-12T21:12:00.000+10:002010-09-12T21:12:28.866+10:00HTC Desire - Android PhoneTwo weeks ago I got myself a <a href="http://www.htc.com/www/product/desire/overview.html">HTC Desire</a>. For the last couple of months I have been watching the release of various Android phones to decide which one I should get once my contract was up on my old Nokia. The winner was the HTC Desire. It was universally billed as one of the best Android phones available today.<br />
<br />
I had decided to get an Android phone because as a developer I would like to be able to create applications for my phone. The other reason to get an Android rather than a iPhone (iOS) was that all the tools required to develop applications are freely available and run on Windows or Linux.<br />
<br />
Over the coming months I will try to document my attempts at building some simple applications for the HTC Desire.Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com0tag:blogger.com,1999:blog-4242155376565829383.post-792475740936450752010-08-24T21:23:00.000+10:002010-08-24T21:23:42.074+10:00Don Norman - Business of Software Conference TalkIn my first year of university, one of the first subjects used a book called '<a href="http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107/ref=sr_1_1?ie=UTF8&s=books&qid=1282648183&sr=8-1">The Design of Everyday Things</a>' by Don Norman. It was an interesting look at the design of normal objects and some of the mistakes made by designers when it comes to interface design.<br />
<br />
Last year Don Norman was a speaker at the Business of Software Conference. This <a href="http://blog.businessofsoftware.org/2010/06/don-norman-at-business-of-software-2010.html">post </a>from the Business of Software blog includes his presentation from the conference. Well worth watching for anybody in the software development field.Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com0tag:blogger.com,1999:blog-4242155376565829383.post-91792934687650378242010-08-16T17:30:00.000+10:002010-08-16T17:30:00.400+10:00Gigapixel PhotosGigapixel images are large images made using special panoramic camera rigs. Images are created from 100's and 1000's of individual images taken using a digital cameraand stitched together using panorama software.<br />
<br />
The <a href="http://gigapan.org/">Gigapan</a> website includes a large number of images and the tools required to build your own gigapixel images.<br />
<br />
<ul><li> <a href="http://gigapan.org/gigapans/56602/">Lavendar Bay, North Sydney</a></li>
<li><a href="http://70gigapixel.cloudapp.net/">Budapest</a></li>
<li><a href="http://gigapan.org/gigapans/48492/">Dubai</a></li>
<li><a href="http://gigapan.org/gigapans/2934/">Boston</a></li>
<li><a href="http://gigapan.org/gigapans/7536/">Bath</a></li>
</ul> This is a really interesting technology and could have uses other than just for landscape photographs. Imagine a photo of an item that you could zoom into to see detail. For example a circuit board would be visible at both the high level as well as at a very macro level to show traces and connects.Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com0tag:blogger.com,1999:blog-4242155376565829383.post-77861624070960779922010-08-05T20:05:00.000+10:002010-08-05T20:05:35.231+10:00Google Wave is being discontinued.According to the Official Google Blog, Google Wave will no longer be developed as a standalone product. Although the product was reasonably well received internally and by Google fans it never managed to be embraced by the general public.<br />
<br />
The underlying technology will continue to be developed as part of other products and the site will be maintained till at least the end of the year.<br />
<br />
For more information refer to the <a href="http://googleblog.blogspot.com/2010/08/update-on-google-wave.html">Official Google Blog</a> post.Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com0tag:blogger.com,1999:blog-4242155376565829383.post-507061453461735732010-07-14T20:55:00.000+10:002010-07-14T20:55:30.161+10:00The Joys of Engineering Leadership - Google I/O 2010 TechTalkAn interesting talk was given by<span style="font-size: small;"> Brian W. Fitzpatrick and Ben Collins-Sussman at Google I/O 2010. For anybody who leads a team of software engineers this has some great pointers on how to be a successful leader. </span><br />
<span style="font-size: small;"></span><br />
<span style="font-size: small;">Watch the video <a href="http://code.google.com/events/io/2010/sessions/lose-friends-alienate-people-engineering-leadership.html">here</a>. A PDF containing the slides from the presentation is available from this page.</span><br />
<span style="font-size: small;"></span><br />
<span style="font-size: small;">Enjoy.</span>Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com0tag:blogger.com,1999:blog-4242155376565829383.post-37575990817728897602010-06-15T20:15:00.000+10:002010-06-15T20:15:45.031+10:00Google I/O 2010 - Session VideosIf you didn't get to go to Google I/O this year the next best thing is to watch the videos. Most come with a PDF of the slide pack to follow along.<br />
<br />
<a href="http://code.google.com/events/io/2010/sessions.html">Google I/O 2010 Session Videos</a><br />
<br />
A large variety of different talks covering most of the major Google products. Something for everyone.<br />
<br />
Enjoy.Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com0tag:blogger.com,1999:blog-4242155376565829383.post-48096598642029659382010-06-03T21:57:00.000+10:002010-06-03T21:57:59.955+10:00First Look at the Arduino DuemilanoveReceived my <a href="http://arduino.cc/">Arduino Duemilanove</a> from <a href="http://www.toysdownunder.com/">Toysdownunder</a> today. It was ordered yesterday morning and shipped late yesterday afternoon. I got it just after lunch today.I am very impressed by Toysdownunder and their fast turnaround time.<br />
<br />
I purchased the <a href="http://toysdownunder.com/arduino-inventors-kit.html">Arduino Inventors Kit</a> due to the larger number of sensors and other pieces like servos and motors that are included. The other notable inclusion is a booklet of simple projects showing how to use the various sensors included in the kit. <br />
<br />
After I got home tonight I installed the Arduino IDE and connected the Arduino to the USB port. After installing the USB Serial Port drivers the Arduino was immediately recognised by the PC.<br />
<br />
Once the Arduino was connected to the PC I started the IDE and loaded the 'Blink' sketch. After compiling and loading it to the Arduino using the IDE. Almost immediately the small yellow led on the board starts flashing.<br />
<br />
Over the next couple of days I will run through the various circuits in the booklet. As I have not had any experience with electronics previously it should be an interesting couple of weeks.Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com0tag:blogger.com,1999:blog-4242155376565829383.post-62253698545981877172010-05-27T08:49:00.000+10:002010-05-27T08:49:50.915+10:00Moonrise over an Ayers Rock Sunset<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQdmhZW-LctzGtkGTLXlQosq_YiUA4iQ6OgldLQOPKKh90mjjTFAg9rzN8Ex-uw-Zfe52Ee-jN1PSSbvqqbSg8QcXppXF43Oo1GSrFibhLKG-0TDvAui0ghgiv8H9EjpJypeT_crgfGLY/s1600/DSCN0386.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQdmhZW-LctzGtkGTLXlQosq_YiUA4iQ6OgldLQOPKKh90mjjTFAg9rzN8Ex-uw-Zfe52Ee-jN1PSSbvqqbSg8QcXppXF43Oo1GSrFibhLKG-0TDvAui0ghgiv8H9EjpJypeT_crgfGLY/s320/DSCN0386.JPG" width="320" /></a>Taken on Wednesday May 26th 2010 from the <a href="http://www.ayersrockresort.com.au/sounds-of-silence/">Sounds of Silence</a> location.Dave Coxhttp://www.blogger.com/profile/03571763707968242416noreply@blogger.com1