add octodex support - able to print large-height images

.gitignore

@@ -1 +1,2 @@
 output.jpg
+*.jpg

README.md

@@ -1,14 +1,26 @@
 ## Process
 
-### 1. Webpage scraping
+### BigQuery import
+
+https://github.com/igrigorik/githubarchive.org
+
+### Page Layout and d3.js graphs
+
+Zurb foundation
+
+d3js.org
+
+http://zmoazeni.github.com/github-data/bubble/
+
+### Webpage scraping
 
 Pour le screengrab de la page html que je suis en train de dev pour "Le Github", j'utilises phantomjs - http://www.phantomjs.org/ - qui exporte une image:
 
 ```
-phantomjs rasterize.js
+phantomjs --local-to-remote-url-access=yes rasterize.js
 ```
 
-### 2. Image printing
+### Image printing
 
 puis je passe cette image dans la lib a2_printer:
 

image_to_printer.rb

@@ -0,0 +1,32 @@
+require 'rubygems'
+require 'a2_printer'
+require 'RMagick'
+
+serial = SerialConnection.new
+printer = A2Printer.new serial
+
+printer.begin
+printer.set_default
+
+source = "/Users/alx/code/le_github/output.jpg"
+image = Magick::Image::read(source).first
+
+if(image.rows < 384)
+  printer.print_image(source)
+else
+  p "large_image"
+  images = []
+  # cut images in 384px height images
+  ((image.rows / 384) + 1).times do |index|
+    image_source = source.gsub(".jpg", "_#{index}.jpg")
+
+    cut_image = image.crop(0,index*384,384,384)
+    cut_image.write image_source
+
+    images << image_source
+  end
+  images.each do |image_source|
+    p image_source
+    printer.print_image(image_source)
+  end
+end

index.html

@@ -34,7 +34,14 @@
 	<!-- container -->
 	<div class="container">
     <div id="logo" class="row">
-      <img src="images/logo.jpg">
+      <img src="images/logo.jpg"><br>
+      <span id="edition"></span>
+    </div>
+
+    <div id="bubble" class="row">
+    </div>
+
+    <div id="octodex" class="row">
     </div>
 	</div>
 	<!-- container -->
@@ -44,7 +51,8 @@
 
 	<!-- Included JS Files -->
 	<script src="javascripts/jquery.min.js"></script>
-	<script src="javascripts/foundation.js"></script>
+  <script src="javascripts/foundation.js"></script>
+  <script src="javascripts/moment.min.js"></script>
 	<script src="javascripts/app.js"></script>
 
 </body>

javascripts/app.js

@@ -94,4 +94,23 @@ jQuery(document).ready(function ($) {
 
 	/* DISABLED BUTTONS ------------- */
 	/* Gives elements with a class of 'disabled' a return: false; */
+
+   $.ajax({
+      type: "GET",
+      url: "http://feeds.feedburner.com/Octocats?format=xml",
+      dataType: "xml",
+      success: function(xml) {
+        var entries = $(xml).find('entry');
+        var selected_entry = entries[Math.floor(Math.random()*(entries.length + 1))];
+
+        // If there was entry yesterday, select it
+        var first_entry_day = moment(entries.find('updated')[0].textContent.split("T")[0], "YYYY-MM-DD");
+        var yesterday = moment().subtract('days', 1);
+        if(first_entry_day.diff(yesterday, 'days') == 0){
+          selected_entry = entries[0]
+        }
+
+        $("#octodex").html("<span class='fancy'><img src='" + $(selected_entry).find('img').attr('src') + "'></span>");
+      }
+   });
 });

stylesheets/app.css

@@ -14,17 +14,36 @@
    Shared Styles
 ----------------------------------------- */
 .container {
-  width:320px;
+  width:384px;
   padding: 0;
 }
 
 .row {
-  width:320px;
-  max-width: 320px;
-  min-width: 320px;
+  width:384px;
+  max-width: 384px;
+  min-width: 384px;
 }
 
 #logo {
   margin:0 auto;
   text-align:center;
 }
+
+span,img{padding:0;margin:0;border:0;}
+.fancy{
+	position:relative;
+	display:inline-block;
+	font-size:0;
+	line-height:0;
+}
+
+.fancy:after{
+	position:absolute;
+	top:1px;
+	left:1px;
+	bottom:1px;
+	right:1px;
+	border:1px solid rgba(255,255,255,0.5);
+	outline:1px solid rgba(0,0,0,0.2);
+	content:" ";
+}