block by dribnet ca82025288d87fa7adcde5a360bd0ca6

Image Exercise MDDN 441 2017

Full Screen

Image Exercise MDDN 441 2017

Scrape Montage

Put your own commentary here.

index.html

<head>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"></script>
<style>
body {padding: 0; margin: 0;}
#image-map {
  width: 960;
  height: 500;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
</style>
</head>
<body style="background-color:white">
<div id="image-map"></div>

<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script language="javascript" type="text/javascript" src="settings.js"></script>
<script language="javascript" type="text/javascript" src="zoom_image.js"></script>
<br>
<a href="montage.jpg">full size montage</a><br>
<a href="z_colorgrid.jpg">full size colorgrid</a><br>
<a href="smartgrid.jpg">full size smartgrid</a><br>
</body>

colorgrid.sh

#!/bin/bash

# show commands and stop if there is an error
set -ex

CUDA_VISIBLE_DEVICES="" \
  python /usr/local/anaconda/extras/smartgrid.py \
  --model color_lab \
  --input-glob 'resized/*' \
  --aspect-ratio 1.92 \
  --drop-to-fit \
  --output-path colorgrid

download.sh

#!/bin/bash

# show commands and stop if there is an error
set -ex

SEARCH_STRING="moon"

# get 5 pages
for PAGE in {1..50}
do
    ### Uncomment one of the following two (either group or tag)

    # this is an example with a group
    # URL='https://www.flickr.com/groups/'$SEARCH_STRING'/pool/page'$PAGE

    # this is an example with tags
    URL='https://www.flickr.com/photos/tags/'$SEARCH_STRING'/page'$PAGE

    echo "-------> about to fetch URL: " $URL
    sleep 1

    # fetch the images
    wget --adjust-extension \
         --random-wait \
         --limit-rate=100k \
         --span-hosts \
         --convert-links \
         --backup-converted \
         --no-directories \
         --timestamping \
         --page-requisites \
         --directory-prefix=downloads \
         --execute robots=off \
         --accept=.jpg \
         $URL

# other unused arguments
         # --recursive \
         # --level 1 \
         # --domains en.wikipedia.org \
     
done

montage.sh

#!/bin/bash

# show commands and stop if there is an error
set -ex

# this command makes a single image of whatever was not deleted
montage \
    -tile 49x32 \
    -geometry +0+0 \
    'resized/*.jpg' \
    montage.jpg

preview.sh

#!/bin/bash

# show commands and stop if there is an error
set -ex

# convert montage to preview shaped image
convert smartgrid.jpg \
    -resize "960x500^" \
    -gravity center \
    -crop 960x500+0+0 \
    +repage preview.jpg

# convert preview to thumbnail image
convert preview.jpg \
    -resize 50% \
    -gravity center \
    -crop 230x120+0+0 \
    +repage thumbnail.png

resize.sh

#!/bin/bash

# show commands and stop if there is an error
set -ex

# make the directory if it is not there
mkdir -p resized

# this command resizes to 128x128, chopping what doesn't fit
mogrify \
  -path resized \
  -thumbnail 128x128^ \
  -background black \
  -gravity center \
  -extent 128x128 \
  'downloads/*.jpg'

run_all.sh

#!/bin/bash

# show commands and stop if there is an error
set -ex

bash download.sh
bash resize.sh
bash montage.sh

settings.js

// update these image dimensions to match montage.jpg
var w = 8832;
var h = 4480;
var maxZoom = 5.2;
url = 'smartgrid.jpg';

smartgrid.sh

#!/bin/bash

# show commands and stop if there is an error
set -ex

# this command makes a single image of whatever was not deleted
python /usr/local/anaconda/extras/smartgrid.py \
  --input-glob 'resized/*' \
  --aspect-ratio 1.92 \
  --drop-to-fit \
  --output-path smartgrid

zoom_image.js

// Using leaflet.js to pan and zoom a big image.
// See also: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html

// create the slippy map
var map = L.map('image-map', {
  minZoom: 1,
  maxZoom: maxZoom,
  center: [0, 0],
  zoom: 1,
  crs: L.CRS.Simple
});

// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom()-1);
var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
var bounds = new L.LatLngBounds(southWest, northEast);

// add the image overlay, 
// so that it covers the entire map
L.imageOverlay(url, bounds).addTo(map);

// tell leaflet that the map is exactly as big as the image
map.setMaxBounds(bounds);