Skip to content

Instantly share code, notes, and snippets.

Avatar

Web Apprentice webapprentice

View GitHub Profile
@webapprentice
webapprentice / tutorial_21_example_1.html
Created Nov 15, 2013
Embed an image from Flickr in a web page
View tutorial_21_example_1.html
<a href="http://www.flickr.com/photos/floridamemory/4989625093/" title="Child and dog by State Library and Archives of Florida, on Flickr">
<img src="http://farm5.staticflickr.com/4125/4989625093_ff64f876d9_n.jpg" width="229" height="320" alt="Child and dog">
</a>
@webapprentice
webapprentice / tutorial_22_example_1_file_1.rb
Last active Dec 28, 2015
Server action code for this tutorial
View tutorial_22_example_1_file_1.rb
# Extract EXIF metadata from a photo on the server
get '/tutorial_22_demo_1' do
# load the library file that contains methods used this tutorial
require 'lib/tutorial_22.rb'
# Extract the metadata from an image file on the server
@photo = MiniExiftool.new(File.join(root_dir, "/public/assets/photo_metadata_1_400.jpg"))
# Get the Latitude and Longitude values and convert to decimal format
@webapprentice
webapprentice / tutorial_22_example_1_file_3.html
Last active Dec 28, 2015
ERB view file for tutorial 22 server code
View tutorial_22_example_1_file_3.html
<img src='/assets/photo_metadata_1_400.jpg' alt='photo of snow geese in Skagit Valley, WA, USA'>
<br>
<div id="map_canvas"></div>
<br>
Latitude / Longitude &nbsp; <%= sprintf("%10.5f", @latitude_0) %>, <%= sprintf("%10.5f", @longitude_0) %>
<br>
<br>
<h2>Dump of all the Metadata for this Image</h2>
<table>
View tutorial_22_example_1_file_2.rb
# lib/tutorial_22.rb - methods related to tutorial_22
require 'mini_exiftool_vendored'
# Convert Lat Lon in Deg, Min, Sec to Decimal format
# e.g 122 deg 25' 25.20" W -> 122.42366666
def dms_to_decimal(coordinate)
decimal = 0.0
if coordinate =~ /^(\d+)\s+deg\s+(\d+)\'\s+([\d\.]+)\"\s+(\S)\s*$/
deg = $1.to_f
@webapprentice
webapprentice / tutorial_24_example_1.html
Last active Dec 28, 2015
Access the Google Maps Geocoding API to get the Latitude and Longitude for a user-supplied address
View tutorial_24_example_1.html
<h2>Geocode</h2>
<p>Enter Address <input type='text' id='address_in' size='50'> and hit Return</p>
<p>e.g. The White House, Washington DC</p>
<p>Latitude : <span id='latitude'></span></p>
<p>Longitude : <span id='longitude'></span></p>
<br>
<h2>Reverse Geocode</h2>
<p>Enter Latitude, Longitude Pair <input type='text' id='coordinates' size='50'> and hit Return</p>
<p>e.g. 38.897847,-77.036499</p>
@webapprentice
webapprentice / tutorial_25_example_1.html
Last active Dec 28, 2015
Embedding Gravatars in a Web page
View tutorial_25_example_1.html
<p>Web Apprentice Gravatar</p>
<pre>http://www.gravatar.com/avatar/68bbbd2c1cefab1b0104d53cd6a15bab?s=80</pre>
<img src="http://www.gravatar.com/avatar/68bbbd2c1cefab1b0104d53cd6a15bab?s=80" alt='gravatar for Web Apprentice' />
<br> <br>
<p>Default Gravatar</p>
<pre>http://www.gravatar.com/avatar/00000000000000000000000000000000?s=80</pre>
<img src="http://www.gravatar.com/avatar/00000000000000000000000000000000?s=80" alt='default gravatar'/>
<br> <br>
<p>Specific Default Gravatar - 'mm'</p>
View tutorial_26_example_1.erb
<!-- depends on gems: sinatra/rack and useragent -->
<style>
th {
white-space: nowrap;
text-align: left;
vertical-align: baseline;
font-weight: normal;
color: darkred;
}
@webapprentice
webapprentice / tutorial_27_example_1.html
Last active Dec 29, 2015
Simple example of using spin.js (http://fgnass.github.io/spin.js) from Felix Gnass
View tutorial_27_example_1.html
<style>
.spinner {
position: fixed;
top: 50%;
left: 50%;
}
</style>
<script src="/javascripts/spin.js"></script>
<script>
View tutorial_28_example_1.geojson
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View tutorial_28_example_2.geojson
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.