meme_captain 0.1.0 → 0.1.1

data/public/js/meme_captain.js

@@ -0,0 +1,403 @@
+var MEMECAPTAIN = (function (window, $, fabric) {
+    "use strict";
+
+    var my = {},
+
+        bingAppId = 'A120380275E87F0071F163210211F0592D0E964C',
+        facebookAppId = '108445492580525',
+        googleApiKey = 'ABQIAAAA-E0uJIHoMJX6M6atCgYANRS1DzXPXMqKnKNRJm2Z_PRWxvtqGBSOvBqyXOwxGZU5jLxExg_5ym69rw',
+        genUrl = '/g',
+        genDataType = genUrl === '/g' ? 'json' : 'jsonp',
+        imageMaxSide = 800;
+
+    function setSourceUrl(sourceUrl) {
+        $('#u').val(sourceUrl).addClass('attn');
+        $('#t1x,#t1y,#t1w,#t1h,#t2x,#t2y,#t2w,#t2h').val('');
+        $('#positionTextCanvasDiv').empty();
+        $('#positionTable').hide();
+    }
+
+    // scale width and height so that neither is larger than maxSide
+    function resizeToFit(width, height, maxSide) {
+        var result = {
+                width : width,
+                height : height
+            };
+
+        if (width > maxSide) {
+            result.width = maxSide;
+            result.height = Math.round(height * (maxSide / width));
+        }
+
+        if (result.height > maxSide) {
+            result.width = Math.round(
+                result.width * (maxSide / result.height)
+            );
+            result.height = maxSide;
+        }
+
+        return result;
+    }
+
+    // build an image search result thumbnail
+    function searchThumbnail(thumbnailUrl, imgUrl, imgWidth, imgHeight) {
+        var scaledDimensions = resizeToFit(imgWidth, imgHeight, imageMaxSide),
+            title = scaledDimensions.width + ' x ' + scaledDimensions.height,
+            thumbnailImage = $('<img />').attr({
+                src : thumbnailUrl,
+                title : title,
+                width : scaledDimensions.width / 4.0,
+                height : scaledDimensions.height / 4.0
+            }).addClass('thumb');
+
+        return thumbnailImage.click(function () { setSourceUrl(imgUrl); });
+    }
+
+    function showBingImages(resp) {
+        var div = $('#imageSearchResults'),
+            searchResponse = resp.SearchResponse,
+            image = searchResponse.Image;
+
+        if (image.Total > 0) {
+            $.each(image.Results, function (i, img) {
+                div.append(searchThumbnail(
+                    img.Thumbnail.Url,
+                    img.MediaUrl,
+                    img.Width,
+                    img.Height
+                ));
+            });
+        } else {
+            div.append($('<p />').append(
+                'No Bing results for "' + searchResponse.Query.SearchTerms + '".'
+            ));
+        }
+    }
+
+    function showGoogleImages(resp) {
+        var div = $('#imageSearchResults'),
+            searchResults = resp.responseData.results;
+
+        if (searchResults.length > 0) {
+            $.each(searchResults, function (i, img) {
+                div.append(searchThumbnail(img.tbUrl, img.unescapedUrl,
+                    parseInt(img.width, 10), parseInt(img.height, 10)));
+            });
+        } else {
+            div.append($('<p />').append('No Google results.'));
+        }
+    }
+
+    function loadSourceImages() {
+        $.get('source_images.json', function (data) {
+            var pos = 0,
+                div = $('#localSourceImages');
+
+            $.each(data.images, function (i, img) {
+                div.append($('<img />').attr('src',
+                    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAAXNSR0IArs4c6QAAAAJiS0dEAACqjSMyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AIBAQMqmgCy0wAAAAtJREFUCNdjYGAAAAADAAEg1ZTHAAAAAElFTkSuQmCC'
+                    ).addClass('thumb').css({
+                    'background-image' : 'url(' + data.thumbSpritesUrl + ')',
+                    'background-position' : pos + 'px 0px',
+                    height : data.thumbHeight,
+                    width : img.thumbWidth + 'px'
+                }).click(function () { setSourceUrl(img.url); }));
+
+                pos -= img.thumbWidth;
+            });
+        });
+    }
+
+    function imageSearch() {
+        var imageSearchInput = $('#imageSearch'),
+            imageSearchVal = imageSearchInput.val();
+
+        if (imageSearchVal.match(/[^\s]/)) {
+            imageSearchInput.val('');
+            $('#imageSearchResults').empty();
+
+            $.ajax({
+                type : 'GET',
+                url : 'http://api.bing.net/json.aspx',
+                data : {
+                    AppId : bingAppId,
+                    Query : imageSearchVal,
+                    Sources : 'Image',
+                    Version : '2.0',
+                    Market : 'en-us',
+                    'Image.Count' : 5,
+                    'Image.Filters' : 'Size:Large',
+                    'Image.Offset' : 0,
+                    JsonType : 'callback'
+                },
+                dataType : 'jsonp',
+                jsonp : 'JsonCallback',
+                success : showBingImages
+            });
+
+            $.ajax({
+                type : 'GET',
+                url : 'http://ajax.googleapis.com/ajax/services/search/images',
+                data : {
+                    imgsz : 'large',
+                    key : googleApiKey,
+                    q : imageSearchVal,
+                    rsz : '5',
+                    v : '1.0'
+                },
+                dataType : 'jsonp',
+                success : showGoogleImages
+            });
+        }
+    }
+
+    function positionText() {
+        var imageUrl = $('#u').val(),
+            canvas;
+
+        if (imageUrl.length > 0) {
+            $('#positionTable').show();
+            $('#positionTextCanvasDiv').empty().append($('<canvas />').attr({
+                id : 'positionTextCanvas'
+            }));
+
+            canvas = new fabric.Canvas('positionTextCanvas');
+
+            canvas.setBackgroundImage(imageUrl, function () {
+                var canvasSize = resizeToFit(canvas.backgroundImage.width,
+                    canvas.backgroundImage.height, imageMaxSide),
+                    textWidth,
+                    textHeight,
+                    rect1,
+                    rect2;
+
+                canvas.setWidth(canvasSize.width);
+                canvas.setHeight(canvasSize.height);
+
+                canvas.renderAll.bind(canvas);
+
+                textWidth = 0.9 * canvas.getWidth();
+                textHeight = 0.25 * canvas.getHeight();
+
+                rect1 = new fabric.Rect({
+                    top  : textHeight / 2.0,
+                    left : canvas.getWidth() / 2.0,
+                    width : textWidth,
+                    height : textHeight,
+                    fill : 'red'
+                });
+
+                rect1.name = '1';
+                rect1.set('lockRotation', true);
+
+                canvas.add(rect1);
+
+                rect2 = new fabric.Rect({
+                    top : canvas.getHeight() - (textHeight / 2.0),
+                    left : canvas.getWidth() / 2.0,
+                    width : textWidth,
+                    height : textHeight,
+                    fill: 'red'
+                });
+
+                rect2.name = '2';
+                rect2.set('lockRotation', true);
+
+                canvas.add(rect2);
+
+                canvas.observe('object:moving', function (o) {
+                    var target = o.memo.target,
+
+                        halfWidth = target.getWidth() / 2,
+                        leftSide = Math.round(target.getLeft() - halfWidth),
+                        rightSide = Math.round(target.getLeft() + halfWidth),
+
+                        halfHeight = target.getHeight() / 2,
+                        topSide = Math.round(target.getTop() - halfHeight),
+                        bottomSide = Math.round(target.getTop() + halfHeight);
+
+                    if (leftSide < 0) {
+                        target.setLeft(halfWidth);
+                    }
+                    if (rightSide > canvas.getWidth()) {
+                        target.setLeft(canvas.getWidth() - halfWidth);
+                    }
+                    if (topSide < 0) {
+                        target.setTop(halfHeight);
+                    }
+                    if (bottomSide > canvas.getHeight()) {
+                        target.setTop(canvas.getHeight() - halfHeight);
+                    }
+                });
+
+                canvas.observe('object:modified', function (o) {
+                    var target = o.memo.target;
+
+                    $('#t' + target.name + 'x').val(
+                        Math.round(target.getLeft() - (target.getWidth() / 2))
+                    );
+                    $('#t' + target.name + 'y').val(
+                        Math.round(target.getTop() - (target.getHeight() / 2))
+                    );
+                    $('#t' + target.name + 'w').val(Math.round(target.getWidth()));
+                    $('#t' + target.name + 'h').val(Math.round(target.getHeight()));
+                });
+
+                canvas.fire('object:modified', { target : rect1 });
+                canvas.fire('object:modified', { target : rect2 });
+            });
+        }
+    }
+
+    function redditLink(url) {
+        return $('<a />').attr('href',
+            'http://www.reddit.com/submit?url=' +
+            encodeURIComponent(url)).append('reddit');
+    }
+
+    // build a Twitter tweet link for a url
+    function tweetLink(url) {
+        return $('<a />').attr({
+            href : 'http://twitter.com/share',
+            'class' : 'twitter-share-button',
+            'data-count' : 'none',
+            'data-text' : ' ',
+            'data-url' : url
+        }).append('Tweet');
+    }
+
+    // build Twitter tweet script tag
+    function tweetScript() {
+        return $('<script />').attr(
+            'src',
+            'http://platform.twitter.com/widgets.js'
+        );
+    }
+
+    // build Facebook Like div for a url
+    function facebookLikeDiv(url) {
+        return $('<div />').attr('id', 'fb-root').addClass('share').append(
+            $('<fb:like />').attr({
+                href : url,
+                send : 'true',
+                width : '450',
+                show_faces : 'true',
+                font : ''
+            })
+        );
+    }
+
+    // Facebook asynchronous init
+    function fbAsyncInit() {
+        FB.init({
+            appId : facebookAppId,
+            status : true,
+            cookie : true,
+            xfbml : true
+        });
+    }
+
+    function facebookScript() {
+        return $('<script />').attr({
+            src : 'http://connect.facebook.net/en_US/all.js'
+        });
+    }
+
+    function createImage() {
+        var createdImageDiv,
+            uVal = $('#u').val();
+
+        if (uVal !== '') {
+            createdImageDiv = $('#createdImage');
+
+            $('#positionTextCanvasDiv').empty();
+
+            createdImageDiv.prepend($('<p />').append('Creating image ...'));
+
+            $.get(genUrl, {
+                u  : uVal,
+                t1 : $('#t1').val(),
+                t2 : $('#t2').val(),
+
+                t1x : $('#t1x').val(),
+                t1y : $('#t1y').val(),
+                t1w : $('#t1w').val(),
+                t1h : $('#t1h').val(),
+
+                t2x : $('#t2x').val(),
+                t2y : $('#t2y').val(),
+                t2w : $('#t2w').val(),
+                t2h : $('#t2h').val()
+            }, function (data) {
+                var img = $('<img />').attr('src', data.imageUrl),
+                    imgLink = $('<a />').attr('href', data.imageUrl).append(
+                        data.imageUrl
+                    ),
+                    templateLink = $('<a />').attr(
+                        'href',
+                        data.templateUrl
+                    ).append(data.templateUrl);
+
+                createdImageDiv.empty().append(img).append(
+                    $('<p />').append('Image: ').append(imgLink)
+                );
+
+                // template link
+                createdImageDiv.append(
+                    $('<p />').append('To make more with this source image: ').
+                        append(templateLink)
+                );
+
+                // reddit link
+                createdImageDiv.append($('<div />').addClass(
+                    'share'
+                ).append(redditLink(data.imageUrl)));
+
+                // tweet link
+                createdImageDiv.append($('<div />').addClass('share').append(
+                    tweetLink(data.imageUrl)
+                ).append(tweetScript()));
+
+                // Facebook like
+                createdImageDiv.append(facebookLikeDiv(data.imageUrl));
+                window.fbAsyncInit = fbAsyncInit;
+                createdImageDiv.append(facebookScript());
+            }, genDataType).error(function (j) {
+                createdImageDiv.empty().append($('<p />').text(j.responseText));
+            });
+        }
+    }
+
+    my.init = function () {
+        loadSourceImages();
+
+        $('#imageSearch').keypress(function (event) {
+            if (event.which === 13) {
+                event.preventDefault();
+                imageSearch();
+            }
+        });
+
+        $('#imageSearchButton').click(imageSearch);
+
+        $('#positionTextButton').click(positionText);
+
+        $('#createImageButton').click(createImage);
+
+        $('#upload').change(function () {
+            $('#uploadSubmit').removeAttr('disabled');
+        });
+
+        // highlight input fields that have been preloaded from the query string
+        $(":text[value!='']").addClass('attn');
+
+        if (!window.CanvasRenderingContext2D) {
+            $('.hasCanvas').hide();
+            $('.noCanvas').show();
+        }
+    };
+
+    return my;
+}(window, $, fabric));
+
+$(MEMECAPTAIN.init);

data/public/source_images.json

@@ -1,6 +1,6 @@
 {
   "thumbHeight": 50,
-  "thumbSpritesUrl": "http://memecaptain.com/thumbs.jpg",
+  "thumbSpritesUrl": "http://memecaptain.com/thumbs_1334973608.jpg",
   "images": [
     {
       "url": "http://memecaptain.com/all_the_things.jpg",
@@ -10,10 +10,26 @@
       "url": "http://memecaptain.com/all_the_things2.jpg",
       "thumbWidth": 67
     },
+    {
+      "url": "http://memecaptain.com/annoying_facebook_girl.jpg",
+      "thumbWidth": 50
+    },
     {
       "url": "http://memecaptain.com/aw_yeah.png",
       "thumbWidth": 50
     },
+    {
+      "url": "http://memecaptain.com/bad_joke_eel.jpg",
+      "thumbWidth": 67
+    },
+    {
+      "url": "http://memecaptain.com/bad_luck_brian.jpg",
+      "thumbWidth": 42
+    },
+    {
+      "url": "http://memecaptain.com/bad_time.jpg",
+      "thumbWidth": 60
+    },
     {
       "url": "http://memecaptain.com/bear_grylls.jpg",
       "thumbWidth": 45
@@ -26,6 +42,10 @@
       "url": "http://memecaptain.com/business_cat.jpg",
       "thumbWidth": 50
     },
+    {
+      "url": "http://memecaptain.com/conspiracy_keanu.jpg",
+      "thumbWidth": 50
+    },
     {
       "url": "http://memecaptain.com/cool_story_bro.jpg",
       "thumbWidth": 72
@@ -38,6 +58,10 @@
       "url": "http://memecaptain.com/dwight_schrute.jpg",
       "thumbWidth": 73
     },
+    {
+      "url": "http://memecaptain.com/first_world_problems.jpg",
+      "thumbWidth": 72
+    },
     {
       "url": "http://memecaptain.com/fry.png",
       "thumbWidth": 67
@@ -62,6 +86,10 @@
       "url": "http://memecaptain.com/joseph_ducreux.jpg",
       "thumbWidth": 38
     },
+    {
+      "url": "http://memecaptain.com/laundry_room_viking.jpg",
+      "thumbWidth": 67
+    },
     {
       "url": "http://memecaptain.com/me_gusta.png",
       "thumbWidth": 50
@@ -74,10 +102,22 @@
       "url": "http://memecaptain.com/ned_stark.jpg",
       "thumbWidth": 55
     },
+    {
+      "url": "http://memecaptain.com/neil_degrasse_tyson.png",
+      "thumbWidth": 50
+    },
+    {
+      "url": "http://memecaptain.com/not_bad.png",
+      "thumbWidth": 50
+    },
     {
       "url": "http://memecaptain.com/ok.png",
       "thumbWidth": 50
     },
+    {
+      "url": "http://memecaptain.com/paranoid_parrot.jpg",
+      "thumbWidth": 50
+    },
     {
       "url": "http://memecaptain.com/philosoraptor.jpg",
       "thumbWidth": 50
@@ -86,6 +126,10 @@
       "url": "http://memecaptain.com/rage.png",
       "thumbWidth": 50
     },
+    {
+      "url": "http://memecaptain.com/ron_swanson.jpg",
+      "thumbWidth": 73
+    },
     {
       "url": "http://memecaptain.com/sap.jpg",
       "thumbWidth": 50
@@ -102,10 +146,22 @@
       "url": "http://memecaptain.com/slowpoke.jpg",
       "thumbWidth": 50
     },
+    {
+      "url": "http://memecaptain.com/socially_awesome_awkward_penguin.jpg",
+      "thumbWidth": 50
+    },
     {
       "url": "http://memecaptain.com/success_kid.jpg",
       "thumbWidth": 50
     },
+    {
+      "url": "http://memecaptain.com/the_more_you_know.jpg",
+      "thumbWidth": 76
+    },
+    {
+      "url": "http://memecaptain.com/ti_duck.jpg",
+      "thumbWidth": 50
+    },
     {
       "url": "http://memecaptain.com/town_crier.jpg",
       "thumbWidth": 75
@@ -126,6 +182,10 @@
       "url": "http://memecaptain.com/tyler_durden.jpg",
       "thumbWidth": 50
     },
+    {
+      "url": "http://memecaptain.com/wonka.jpg",
+      "thumbWidth": 50
+    },
     {
       "url": "http://memecaptain.com/xzibit.jpg",
       "thumbWidth": 77
@@ -137,6 +197,10 @@
     {
       "url": "http://memecaptain.com/yao_ming.jpg",
       "thumbWidth": 42
+    },
+    {
+      "url": "http://memecaptain.com/you_should_feel_bad.jpg",
+      "thumbWidth": 67
     }
   ]
 }

data/script/thumb_sprites.rb

@@ -1,33 +1,76 @@
-require 'json'
-require 'RMagick'
+#!/usr/bin/env ruby
 
 # make a combined thumbnail image from a list of images for use in CSS sprites
 # generate source images description json
 
-url_prefix = 'http://memecaptain.com/'
+require 'json'
+require 'optparse'
+
+require 'RMagick'
+
+OPTIONS = {
+  :json_file => 'source_images.json',
+  :source_url_prefix => '',
+  :thumb_file => "thumbs_#{Time.now.to_i}.jpg",
+  :thumb_height => 50,
+  :url_root => 'http://memecaptain.com/',
+}
+
+OptionParser.new do |opts|
+  opts.banner = 'usage: thumb_sprites.rb [options] FILE...'
+
+  opts.on('-j', '--json-file JSON_FILE', 'output JSON file path') do |j|
+    OPTIONS[:json_file] = j
+  end
+
+  opts.on('-s', '--source-url-prefix SOURCE_URL_PREFIX',
+    'source image URL prefix') do |s|
+    OPTIONS[:source_url_prefix] = s
+  end
+
+  opts.on('-t', '--thumb-height THUMB_HEIGHT',
+    'thumbnail height in pixels') do |t|
+    OPTIONS[:thumb_height] = t
+  end
 
-data = {
-  :thumbHeight => 50,
-  :thumbSpritesUrl => "#{url_prefix}thumbs.jpg",
+  opts.on('-u', '--url-root URL_ROOT', 'URL root') do |u|
+    OPTIONS[:url_root] = u
+  end
+end.parse!
+
+DATA = {
+  :thumbHeight => OPTIONS[:thumb_height],
+  :thumbSpritesUrl => "#{OPTIONS[:url_root]}#{OPTIONS[:thumb_file]}",
   :images => [],
 }
 
-thumbs = Magick::ImageList.new
+puts <<eos
+source URL prefix: #{OPTIONS[:source_url_prefix]}
+thumbnail height: #{OPTIONS[:thumb_height]}
+URL root: #{OPTIONS[:url_root]}
+
+eos
+
+THUMBS = Magick::ImageList.new
 
 ARGV.sort.each do |file|
+  puts " processing #{file}"
   image = Magick::ImageList.new(file)
-  image.resize_to_fit!(0, data[:thumbHeight])
+  image.resize_to_fit!(0, DATA[:thumbHeight])
   image.each do |frame|
-    thumbs.push frame
-    data[:images] << {
-      :url => "#{url_prefix}#{File.basename(file)}",
+    THUMBS.push frame
+    DATA[:images] << {
+      :url =>
+        "#{OPTIONS[:url_root]}#{OPTIONS[:source_url_prefix]}#{File.basename(file)}",
       :thumbWidth => frame.columns
     }
   end
 end
 
-open('source_images.json', 'w') do |f|
-  f.write(JSON.pretty_generate(data))
+open(OPTIONS[:json_file], 'w') do |f|
+  f.write(JSON.pretty_generate(DATA))
+  puts "wrote #{OPTIONS[:json_file]}"
 end
 
-thumbs.append(false).write('thumbs.jpg')
+THUMBS.append(false).write(OPTIONS[:thumb_file])
+puts "wrote #{OPTIONS[:thumb_file]}"