Server side conversion scripts

ImageServer.py

@@ -0,0 +1,54 @@
+from URLtoPebblePng import get_pebble_png
+import SimpleHTTPServer
+import SocketServer
+import cgi
+import sys
+import urlparse
+
+PORT = 8000
+
+class ServerHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):
+
+    def do_GET(self):
+    	# For a get request, just return the Pebble_image.png
+    	# This is taken care of by the simeple HTTP server
+    	# request handler
+        return SimpleHTTPServer.SimpleHTTPRequestHandler.do_GET(self)
+
+    def do_POST(self):
+
+     	# Get the length of the image URL from the HTTP headers
+    	length = int(self.headers['Content-length'])
+
+    	# Storing data in a post data structure.
+    	# Can send multiple segments of data which can be decoded and
+    	# stored in post_data.
+    	post_data = urlparse.parse_qs(self.rfile.read(length).decode('utf-8'))
+
+    	# Image url is stored at the imageurl key
+    	ImageURL = str(post_data["imageurl"])
+        print ImageURL
+
+        # Get type of Pebble you want to do the conversion for
+        PebbleType = str(post_data["PebbleType"])
+        print PebbleType
+
+	  	# Using substring to remove excess characters
+    	ImageURL = ImageURL[3:-2]
+        PebType = int(PebbleType[3:-2])
+
+    	#performing the conversion for that image
+    	get_pebble_png(ImageURL,PebType)
+    	#sending an OK response to the caller
+    	self.send_response(200)
+
+
+
+
+Handler = ServerHandler
+
+httpd = SocketServer.TCPServer(("", PORT), Handler)
+
+# port that the server is running on
+print "Serving at port 8000 forever!"
+httpd.serve_forever()

README.md

@@ -100,3 +100,17 @@ on image processing, please refer to the [Advanced techniques
 videos](https://developer.getpebble.com/events/developer-retreat-2014/) from the
 Pebble Developer Retreat 2014.
 
+## Scripts for server side conversion
+
+Two python scripts for conversion of images to Pebble Time compliant images:
+
+- URLtoPebblePng.py makes use of the Python PIL library to read the URL of the 
+  image. It then resizes the image and dithers it to use only 64 colors
+- ImageServer.py is used to field conversion requests and serve the converted 
+  images.
+
+The pebble-js-app.js was modified to make POST requests to the server, followed 
+by GET requests to get the converted image. The URL of the server fielding the 
+requests should be changed by the user. 
+
+

URLtoPebblePng.py

@@ -0,0 +1,65 @@
+from PIL import Image
+import urllib2
+import ctypes
+import argparse
+import os
+import png
+
+# Create pebble 64 colors-table (r, g, b - 2 bits per channel)
+def pebble_get_64color_palette():
+    pebble_palette = []
+    for i in xrange(0, 64):
+        pebble_palette.append(((i >> 4) & 0x3) * 85)   # R
+        pebble_palette.append(((i >> 2) & 0x3) * 85)   # G
+        pebble_palette.append(((i     ) & 0x3) * 85)   # B
+    return pebble_palette
+
+#Get image from URL and generate pebble compliant png
+def get_pebble_png(input_url, PebbleType):
+    img = urllib2.urlopen(input_url)
+    localFile = open('TempImage.jpg', 'wb')
+    localFile.write(img.read())
+    localFile.close()
+    #Getting current aspect ratio of image
+    tempIm = Image.open('TempImage.jpg')
+    #first index is the width
+    width = tempIm.size[0]
+    #second indes is the height
+    height = tempIm.size[1]
+    #maintaining aspect ratio of image
+    ratio = min(144/float(width),168/float(height))
+    size = int(float(width*ratio)),int(float(height*ratio))
+    #resizing image to fit Pebble screen
+    im_smaller = tempIm.resize(size,Image.ANTIALIAS)
+    Palet = pebble_get_64color_palette()
+    if PebbleType == 1:
+        # Two step conversion process for using Pebble Time palette
+        # and then dithering image
+        paletteIm = Image.new('P',size)
+        paletteIm.putpalette(Palet * 4)
+        dithered_im = im_smaller.convert(mode='RGB',
+                                         dither=1,
+                                         palette=paletteIm)
+
+        dithered_im = dithered_im.convert(mode='P',
+                                         dither=1,
+                                         colors=64,
+                                         palette=Image.FLOYDSTEINBERG)
+    else:
+        #converting to grayscale and then dithering to black and white
+        im_tempo = im_smaller.convert('LA')
+        dithered_im = im_smaller.convert('1')
+    #saving dithered image as PNG
+    dithered_im.save("Pebble_image.png","PNG")
+    os.remove("TempImage.jpg")
+
+def main():
+    parser = argparse.ArgumentParser(
+        description='Get image from URL and convert to 64-color palettized PNG for Pebble Time')
+    parser.add_argument('input_url', type=str, help='URL from which to convert image')
+    parser.add_argument('PebbleType', type=int, help='0 is OG Pebble, 1 is Pebble Time')
+    args = parser.parse_args()
+    get_pebble_png(args.input_url, args.PebbleType)
+
+if __name__ == '__main__':
+    main()

requirements.txt

@@ -0,0 +1,5 @@
+Python libraries that need to be installed:
+PIL:
+pip install PIL  --allow-unverified PIL --allow-all-external
+
+

src/js/pebble-js-app.js

@@ -1,5 +1,9 @@
 var transferInProgress = false;
 
+/*Global URL var for image conversion server
+  Replace with your server */
+var toServer = "http://35418b8a.ngrok.com";
+
 Pebble.addEventListener("ready", function(e) {
   console.log("NetDownload JS Ready");
 });
@@ -27,8 +31,24 @@ Pebble.addEventListener("appmessage", function(e) {
 });
 
 function downloadBinaryResource(imageURL, callback, errorCallback) {
+
+
+    /*POSTing the image URL to the server for conversion.
+      This conversion is only for Pebble Time. On an original
+      Pebble the dithering should convert the image to have 
+      to 2 colors*/
+    var req1 = new XMLHttpRequest();
+    req1.open("POST",toServer, false);
+    imageURL = "imageurl=" + imageURL+"&PebbleType=0";
+    req1.setRequestHeader("Content-type", "imageURL");
+    req1.setRequestHeader("Content-length", imageURL.length);
+    req1.setRequestHeader("Connection", "close");    
+    req1.send(imageURL);
+
+    //getting converted image, which is always at <server>/Pebble_image.png
     var req = new XMLHttpRequest();
-    req.open("GET", imageURL,true);
+    var img_return = toServer+ "/Pebble_image.png"; 
+    req.open("GET", img_return, true); //do get from image url which is standard
     req.responseType = "arraybuffer";
     req.onload = function(e) {
         console.log("loaded");