meme_captain 0.1.0 → 0.1.1

data/views/index.erb

@@ -14,13 +14,17 @@
 <div id="chooseSourceImage">
 
 <p>
-Enter an image URL, click a thumbnail or search for an image then click its
-thumbnail.
+Enter an image URL, upload an image, click a thumbnail or search for an image
+then click its thumbnail.
 </p>
 
 <p>
 <label for="u">Source image URL: </label>
 <input type="text" id="u" name="u" size="64" value="<%= h @u %>" />
+<form action="upload" method="post" enctype="multipart/form-data">
+<input type="file" id="upload" name="upload" />
+<input type="submit" id="uploadSubmit" value="Upload" disabled="disabled" />
+</form>
 </p>
 
 <div id="localSourceImages"></div>
@@ -50,7 +54,12 @@ thumbnail.
 
 <div id="positionText">
 
-<p>
+<p class="noCanvas" style="display : none;">
+If you were using a browser with canvas support such as Chrome, Firefox,
+Safari or Internet Explorer 9 you could position the text on the image here.
+</p>
+
+<p class="hasCanvas">
 <input type="button" id="positionTextButton" value="Position Text" />
 Optionally set the position and size of the text on the image.
 </p>
@@ -112,339 +121,9 @@ Contact: Matthew M. Boedicker <a href="mailto:matthewm@boedicker.org">matthewm@b
 
 <p><a href="https://github.com/mmb/meme_captain">source code and API</a></p>
 
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script src="js/jquery-1.7.2.min.js"></script>
 <script src="js/fabric.min.js"></script>
-<script>
-function setSourceUrl(sourceUrl) {
-    "use strict";
-
-    $('#u').val(sourceUrl);
-    $('#t1x,#t1y,#t1w,#t1h,#t2x,#t2y,#t2w,#t2h').val('');
-    $('#positionTextCanvasDiv').empty();
-    $('#positionTable').hide();
-}
-
-function showBingImages(resp) {
-    "use strict";
-
-    var div = $('#imageSearchResults'),
-        searchResponse = resp.SearchResponse,
-        image = searchResponse.Image;
-
-    if (image.Total > 0) {
-        $.each(image.Results, function (i, img) {
-            div.append($('<img />').attr('src', img.Thumbnail.Url).click(
-                function () { setSourceUrl(img.MediaUrl); }
-            ));
-        });
-    } else {
-        div.append($('<p />').append(
-            'No Bing results for "' + searchResponse.Query.SearchTerms + '".'
-        ));
-    }
-}
-
-function showGoogleImages(resp) {
-    "use strict";
-
-    var div = $('#imageSearchResults'),
-        searchResults = resp.responseData.results;
-
-    if (searchResults.length > 0) {
-        $.each(searchResults, function (i, img) {
-            div.append($('<img />').attr('src', img.tbUrl).click(
-                function () { setSourceUrl(img.url); }
-            ));
-        });
-    } else {
-        div.append($('<p />').append('No Google results.'));
-    }
-}
-
-function imageSearch() {
-    "use strict";
-
-    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 : 'A120380275E87F0071F163210211F0592D0E964C',
-                Query : imageSearchVal,
-                Sources : 'Image',
-                Version : '2.0',
-                Market : 'en-us',
-                'Image.Count' : 5,
-                'Image.Filters' : 'Size:Large',
-                'Image.Offset' : 0,
-                JsonType : 'callback'
-            },
-            dataType : 'jsonp',
-            jsonpCallback : 'showBingImages',
-            jsonp : 'JsonCallback'
-        });
-
-        $.ajax({
-            type : 'GET',
-            url : 'http://ajax.googleapis.com/ajax/services/search/images',
-            data : {
-                imgsz : 'large',
-                key : 'ABQIAAAA-E0uJIHoMJX6M6atCgYANRS1DzXPXMqKnKNRJm2Z_PRWxvtqGBSOvBqyXOwxGZU5jLxExg_5ym69rw',
-                q : imageSearchVal,
-                rsz : '5',
-                v : '1.0'
-            },
-            dataType : 'jsonp',
-            jsonpCallback : 'showGoogleImages'
-        });
-    }
-}
-
-function loadSourceImages() {
-    "use strict";
-
-    $.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;
-        });
-    });
-}
-
-// scale width and height so that neither is larger than maxSide
-function resizeToFit(width, height, maxSide) {
-    "use strict";
-
-    var result = {
-            width : width,
-            height : height
-        };
-
-    if (width > maxSide) {
-        result.width = maxSide;
-        result.height = height * (maxSide / width);
-    }
-
-    if (result.height > maxSide) {
-        result.width = result.width * (maxSide / result.height);
-        result.height = maxSide;
-    }
-
-    return result;
-}
-
-function positionText() {
-    "use strict";
-
-    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, 800),
-                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 createImage() {
-    "use strict";
-
-    var createdImageDiv = $('#createdImage');
-
-    $('#positionTextCanvasDiv').empty();
-
-    createdImageDiv.append($('<p />').append('Creating image ...'));
-
-    $.get('/g', {
-        u  : $('#u').val(),
-        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
-            ),
-            tweetLink = $('<a />').attr({
-                href : 'http://twitter.com/share',
-                'class' : 'twitter-share-button',
-                'data-count' : 'none',
-                'data-text' : ' ',
-                'data-url' : data.imageUrl
-            }).append('Tweet');
-
-        createdImageDiv.empty().append(img).append(
-            $('<p />').append('Image: ').append(imgLink)
-        );
-
-        // tweet link
-        createdImageDiv.append($('<p />').append(tweetLink).append(
-            $('<script />').attr('src',
-                'http://platform.twitter.com/widgets.js')
-        ));
-
-        // Facebook like
-        createdImageDiv.append(
-            $('<div />').attr('id', 'fb-root')
-        ).append(
-            $('<fb:like />').attr({
-                href : data.imageUrl,
-                send : 'true',
-                width : '450',
-                show_faces : 'true',
-                font : ''
-            })
-        );
-
-        window.fbAsyncInit = function () {
-            FB.init({
-                appId : '108445492580525',
-                status : true,
-                cookie : true,
-                xfbml : true
-            });
-        };
-
-        createdImageDiv.append($('<script />').attr({
-            src : 'http://connect.facebook.net/en_US/all.js'
-        }));
-    }).error(function (j) {
-        createdImageDiv.empty().append($('<p />').text(j.responseText));
-    });
-}
-
-$(function () {
-    "use strict";
-
-    loadSourceImages();
-
-    $('#imageSearch').keypress(function (event) {
-        if (event.which === 13) {
-            event.preventDefault();
-            imageSearch();
-        }
-    });
-
-    $('#imageSearchButton').click(imageSearch);
-
-    $('#positionTextButton').click(positionText);
-
-    $('#createImageButton').click(createImage);
-});
-</script>
+<script src="js/meme_captain.js"></script>
 
 </body>