Show icons with the users colors

The implementation create a png at server side. Can be improved usinga
svg and changing the colors at the client side.

Signed-off-by: Gonzalo Odiard <gonzalo@laptop.org>

2 files changed, 69 insertions, 4 deletions

diff --git a/server.py b/server.py
index 602082d..275da10 100644
--- a/server.py
+++ b/server.py
@@ -28,6 +28,10 @@ import utils
 import tempfile
 import base64
 import json
+import StringIO
+
+import cairo
+from sugar3.graphics.icon import _IconBuffer
 
 
 class DatastoreHandler(web.StaticFileHandler):
@@ -38,6 +42,50 @@ class DatastoreHandler(web.StaticFileHandler):
         self._path = path
 
 
+class IconHandler(web.RequestHandler):
+
+    def initialize(self, path):
+        self._path = path
+
+    def get(self, *args, **kwargs):
+        logging.error('requested %s', (args))
+        image_name = args[0]
+        [icon_name, stroke_color, fill_color] = image_name.split('_')
+        icon_name = str(icon_name) + '.svg'
+        logging.error('icon_name %s stroke %s fill %s',
+            icon_name, stroke_color, fill_color)
+
+        icon_buffer = _IconBuffer()
+        icon_buffer.file_name = os.path.join(self._path, 'images', icon_name)
+        icon_buffer.stroke_color = '#%s' % str(stroke_color)
+        icon_buffer.fill_color = '#%s' % str(fill_color)
+        icon_buffer.width = 50
+        icon_buffer.height = 50
+        icon_surface = icon_buffer.get_surface()
+        surface = cairo.ImageSurface(cairo.FORMAT_RGB24, icon_buffer.width,
+            icon_buffer.height)
+        context = cairo.Context(surface)
+        context.set_source_rgba(1, 1, 1, 1)
+        context.rectangle(0, 0, icon_buffer.width, icon_buffer.height)
+        context.fill()
+        context.set_source_surface(icon_surface, 0, 0)
+        context.paint()
+        out = StringIO.StringIO()
+        surface.write_to_png(out)
+        self.write(out.getvalue())
+        self.finish()
+
+    def write(self, chunk):
+        """
+        Overwrited to avoid write the content as utf8
+        """
+        if self._finished:
+            raise RuntimeError("Cannot write() after finish().  May be caused "
+                               "by using async operations without the "
+                               "@asynchronous decorator.")
+        self._write_buffer.append(chunk)
+
+
 class JournalWebSocketHandler(websocket.WebSocketHandler):
 
     def initialize(self, instance_path, journal_manager):
@@ -122,6 +170,7 @@ def run_server(activity_path, activity_root, jm, port):
     application = web.Application(
         [
             (r"/web/(.*)", web.StaticFileHandler, {"path": static_path}),
+            (r"/icon/(.*)", IconHandler, {"path": static_path}),
             (r"/datastore/(.*)", DatastoreHandler, {"path": instance_path}),
             (r"/websocket", JournalWebSocketHandler,
                 {"instance_path": instance_path, "journal_manager": jm}),
diff --git a/web/index.html b/web/index.html
index e0ff3a3..18279d7 100644
--- a/web/index.html
+++ b/web/index.html
@@ -8,6 +8,15 @@
 
         local = (window.location.hostname == '0.0.0.0');
 
+        function prepare_xo_image_link(stroke_color, fill_color, size) {
+            stroke_color = stroke_color.replace('#', '');
+            fill_color = fill_color.replace('#', '');
+            img = "<img style='border: 0px;vertical-align: middle' width="+ size + " " +
+                "src='/icon/computer-xo_" + stroke_color + "_" +
+                fill_color + "?v=x'/>";
+            return img;
+        }
+
         function create_tr(item, tr) {
             id = item.id;
             title = item.title;
@@ -18,7 +27,12 @@
             if (downloaded_by.length > 0) {
                 for (var i = 0; i < downloaded_by.length; i++) {
                     user_data = downloaded_by[i];
-                    downloaded_list += downloaded_list.concat(user_data.from);
+                    downloaded_list = downloaded_list +
+                        prepare_xo_image_link(user_data.icon[0], user_data.icon[1], 30) +
+                        " " + user_data.from;
+                    if (i < downloaded_by.length - 1) {
+                        downloaded_list = downloaded_list + ",";
+                    }
                 }
             }
 
@@ -30,7 +44,8 @@
                 "<td class='desc_td'>"+
                 "<table class='desc_table'>"+
                 "<tr><td class='title'>" + title + "</td></tr>"+
-                (shared_by.from != '' ? "<tr><td>Shared by " + shared_by.from +
+                (shared_by.from != '' ? "<tr><td>Shared by " +
+                prepare_xo_image_link(shared_by.icon[0], shared_by.icon[1], 30) + shared_by.from +
                  "</td></tr>" : "") +
                 (desc != '' ? "<tr><td>" + desc + "</td></tr>" : "")+
                 (downloaded_list != '' ? "<tr><td>Downloaded by " + downloaded_list +
@@ -48,9 +63,10 @@
 
         function init() {
             $.getJSON("/datastore/owner_info.json", function(owner_info) {
+                $('#header').append(prepare_xo_image_link(owner_info.stroke_color, owner_info.fill_color, 60));
                 $('#header').append("Journal of " + owner_info.nick_name);
-                $('#header').css('color', owner_info.stroke_color);
-                $('#header').css('background-color', owner_info.fill_color);
+                //$('#header').css('color', owner_info.stroke_color);
+                //$('#header').css('background-color', owner_info.fill_color);
             });
 
             $.getJSON("/datastore/selected.json", function(selected) {