Webapp now show three columns

image, original text and corrected text. The highlighting is functional
as well.

5 files changed, 54 insertions, 29 deletions

diff --git a/web/main.py b/web/main.py
index 206eb86..b5174d8 100644
--- a/web/main.py
+++ b/web/main.py
@@ -9,9 +9,9 @@ import io
 class MainHandler(RequestHandler):
 
     def get(self, page_number):
-        areas, words = utils.gen_html(self.settings["book"], page_number)
+        orig_coords, orig_words, corr_coords_index, corr_words = utils.gen_html(self.settings["book"], page_number)
         self.render("index.html", page_number=page_number,
-                    areas=areas, words=words)
+                    orig_coords=orig_coords, orig_words=orig_words, corr_words=corr_words, corr_coords_index=corr_coords_index)
 
 class ImageHandler(RequestHandler):
 
diff --git a/web/static/css/style.css b/web/static/css/style.css
index e42975d..3005bc5 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -10,3 +10,15 @@ span:hover {
     float: left;
     margin-right: 1em;
 }
+
+#texte-non-corrige {
+    margin-top:0cm;
+    width: 10cm;
+    float: left;
+}
+
+#texte-corrige {
+    margin-top:0cm;
+    width: 10cm;
+    float: left;
+}
diff --git a/web/static/js/main.js b/web/static/js/main.js
index ff09fd1..2adf3ea 100644
--- a/web/static/js/main.js
+++ b/web/static/js/main.js
@@ -1,19 +1,21 @@
 $(document).ready(function() {
     $('#page').mapster({
-                mapKey: 'data-id',
-                fillColor: 'ff0000',
-                fillOpacity: 0.3, 
-    onMouseover: function (e) {
-        $("#" + e.key).addClass("selected");
-    },
-    onMouseout: function (e) {
-        $("#" + e.key).removeClass("selected");
-    }
-                
+        mapKey: 'data-id',
+        fillColor: 'ff0000',
+        fillOpacity: 0.3,
+        onMouseover: function (e) {
+            $("#" + "orig-" + e.key).addClass("selected");
+            $("#" + "corr-" + e.key).addClass("selected");
+        },
+        onMouseout: function (e) {
+            $("#" + "orig-" + e.key).removeClass("selected");
+            $("#" + "corr-" + e.key).removeClass("selected");
+        }
+
     }).mapster('resize', 500);
 
     $("span").mouseenter(function() {
-        $('area[data-id='+$(this).attr("id")+']').mapster("highlight");
+        $('area[data-id='+$(this).attr("id").replace(/\D+/,"")+']').mapster("highlight");
     });
 
     $("span").mouseout(function() {
diff --git a/web/templates/index.html b/web/templates/index.html
index b3b5fe0..2ba18c1 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -1,14 +1,25 @@
 {% extends "layout.html" %}
 
 {% block main %}
-    <div id="image_container">
-        <img id="page" src="{{page_number}}.jpg" usemap="#wordmap" />
-    </div>
-    <map name="wordmap">{% for id, coords in areas %}
-        <area href="#" shape="rect" coords="{{coords}}" data-id="{{id}}" />{% end %}
-    </map>
-    <div id="text">
-    {% for id, word in words %}
-    <span id="{{id}}">{{word}}</span> {% end %}
-    </div>
+<div id="image_container">
+  <img id="page" src="{{page_number}}.jpg" usemap="#wordmap" />
+</div>
+<map name="wordmap">
+  {% for i, coord in enumerate(orig_coords) %}
+  <area href="#" shape="rect" coords="{{coord}}" data-id="{{i}}" />
+  {% end %}
+</map>
+
+<div id="texte-non-corrige">
+  <h3>Texte original</h3>
+  {% for i, word in enumerate(orig_words) %}
+  <span id="orig-{{i}}">{{word}}</span>
+  {% end %}
+</div>
+<div id="texte-corrige">
+  <h3>Texte corrigé</h3>
+  {% for i, word in enumerate(corr_words) %}
+  <span id="corr-{{corr_coords_index[i]}}">{{word}}</span>
+  {% end %}
+</div>
 {% end %}
diff --git a/web/utils.py b/web/utils.py
index 8522841..71a5048 100644
--- a/web/utils.py
+++ b/web/utils.py
@@ -10,12 +10,12 @@ def gen_html(book, page_number):
     corrected_text = get_page(book, int(page_number))
     corrected_words = su.simplify(corrected_text).split()
     if d:
-        words, coords = zip(*d)
-        C = su.align(corrected_words, list(words), list(coords))
-        r = su.alignment_to_sexp(corrected_text.split(), words, coords, C[1])
-        corrected_words, coords = zip(*r)
-        coords_html = du.convert_to_htmlcoord(coords, page.size[1])
-    return (list(enumerate(coords_html)), list(enumerate(corrected_words)))
+        orig_words, orig_coords = zip(*d)
+        C = su.align(corrected_words, list(orig_words), list(orig_coords))
+        r = su.alignment_to_coord(corrected_text.split(), C[1])
+        corr_words, corr_coords_index = zip(*r)
+        orig_coords_html = du.convert_to_htmlcoord(orig_coords, page.size[1])
+    return orig_coords_html, orig_words, corr_coords_index, corr_words
 
 if __name__ == "__main__":
     gen_html(*sys.argv[1:3])