svg auto-generation

14 files changed, 330 insertions, 566 deletions

diff --git a/abacus_window.py b/abacus_window.py
index 9199513..715d77d 100644
--- a/abacus_window.py
+++ b/abacus_window.py
@@ -29,6 +29,74 @@ except:
 
 from sprites import Sprites, Sprite
 
+#
+# Utilities for generating artwork as SVG
+#
+
+def _svg_str_to_pixbuf(svg_string):
+    """ Load pixbuf from SVG string """
+    pl = gtk.gdk.PixbufLoader('svg')
+    pl.write(svg_string)
+    pl.close()
+    pixbuf = pl.get_pixbuf()
+    return pixbuf
+
+def _svg_rect(w, h, rx, ry, x, y, fill, stroke):
+    """ Returns an SVG rectangle """
+    svg_string = "       <rect\n"
+    svg_string += "          width=\"%f\"\n" % (w)
+    svg_string += "          height=\"%f\"\n" % (h)
+    svg_string += "          rx=\"%f\"\n" % (rx)
+    svg_string += "          ry=\"%f\"\n" % (ry)
+    svg_string += "          x=\"%f\"\n" % (x)
+    svg_string += "          y=\"%f\"\n" % (y)
+    svg_string += _svg_style("fill:%s;stroke:%s;" % (fill, stroke))
+    return svg_string
+
+def _svg_line(x1, y1, x2, y2):
+    """ Returns an SVG line """
+    svg_string = "<line x1=\"%f\" y1=\"%f\" x2=\"%f\" y2=\"%f\"\n" % \
+                  (x1, y1, x2, y2)
+    svg_string += _svg_style("stroke-width:1.5;stroke-linecap:round;")
+    return svg_string
+
+def _svg_bead(fill, stroke):
+    """ Returns a bead-shaped SVG object """
+    svg_string = "%s %s %s %s" % ("<path d=\"m1.5 15 A 15 13.5 90 0 1",
+                                  "15 1.5 L 25 1.5 A 15 13.5 90 0 1 38.5",
+                                  "15 A 15 13.5 90 0 1 25 28.5 L 15",
+                                  "28.5 A 15 13.5 90 0 1 1.5 15 z\"\n")
+    svg_string += _svg_style("fill:%s;stroke:%s;stroke-width:1.5" %\
+                             (fill, stroke))
+    return svg_string
+
+def _svg_header(w, h, scale):
+    """ Returns SVG header """
+    svg_string = "<?xml version=\"1.0\" encoding=\"UTF-8\""
+    svg_string += " standalone=\"no\"?>\n"
+    svg_string += "<!-- Created with Python -->\n"
+    svg_string += "<svg\n"
+    svg_string += "   xmlns:svg=\"http://www.w3.org/2000/svg\"\n"
+    svg_string += "   xmlns=\"http://www.w3.org/2000/svg\"\n"
+    svg_string += "   version=\"1.0\"\n"
+    svg_string += "%s%f%s" % ("   width=\"", w*scale, "\"\n")
+    svg_string += "%s%f%s" % ("   height=\"", h*scale, "\">\n")
+    svg_string += "%s%f%s%f%s" % ("<g\n       transform=\"matrix(", 
+                                  scale, ",0,0,", scale,
+                                  ",0,0)\">\n")
+    # svg_string += _svg_background()
+    return svg_string
+
+def _svg_footer():
+    """ Returns SVG footer """
+    svg_string = "</g>\n"
+    svg_string += "</svg>\n"
+    return svg_string
+
+def _svg_style(extras=""):
+    """ Returns SVG style for shape rendering """
+    return "%s%s%s" % ("style=\"", extras, "\"/>\n")
+
 def load_image(path, name, w, h):
     """ create a pixbuf from a SVG stored in a file """
     return gtk.gdk.pixbuf_new_from_file_at_size(
@@ -66,7 +134,8 @@ class Abacus():
 
         self.chinese = Suanpan(self)
         self.japanese = Soroban(self)
-        self.russian = Schety(self)
+        # self.russian = Schety(self)
+        self.russian = Fractions(self)
         self.mayan = Nepohualtzintzin(self)
 
         self.chinese.show()
@@ -76,6 +145,7 @@ class Abacus():
         self.mode = self.chinese
 
     def _button_press_cb(self, win, event):
+        """ Callback to handle the button presses """
         win.grab_focus()
         x, y = map(int, event.get_coords())
         self.press = self.sprites.find_sprite((x,y))
@@ -89,6 +159,7 @@ class Abacus():
         return True
 
     def _mouse_move_cb(self, win, event):
+        """ Callback to handle the mouse moves """
         if self.press is None:
             self.dragpos = 0
             return True
@@ -101,6 +172,7 @@ class Abacus():
             self.mode.move_mark(x-mx)
 
     def _button_release_cb(self, win, event):
+        """ Callback to handle the button releases """
         if self.press == None:
             return True
         self.press = None
@@ -108,10 +180,12 @@ class Abacus():
         return True
 
     def _expose_cb(self, win, event):
+        """ Callback to handle window expose events """
         self.sprites.redraw_sprites()
         return True
 
     def _destroy_cb(self, win, event):
+        """ Callback to handle quit """
         gtk.main_quit()
 
 
@@ -127,22 +201,30 @@ class AbacusGeneric():
         self.frame_width = 810
         self.frame_height = 420
         self.base = 10
-        self.colors = [load_image(self.abacus.path, "white",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale),
-                       load_image(self.abacus.path, "yellow1",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale),
-                       load_image(self.abacus.path, "yellow2",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale),
-                       load_image(self.abacus.path, "yellow3",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale)]
         self.create()
 
     def create(self):
+        rod_colors = ["#006ffe", "#007ee7", "#0082c4", "#0089ab", "#008c8b",
+                      "#008e68", "#008e4c", "#008900", "#5e7700", "#787000",
+                      "#876a00", "#986200", "#ab5600", "#d60000", "#e30038"]
+
         """ Create an abacus. """
+        white = _svg_header(BWIDTH, BHEIGHT, self.abacus.scale) +\
+                _svg_bead("#ffffff", "#000000") +\
+                _svg_footer()
+        yellow1 = _svg_header(BWIDTH, BHEIGHT, self.abacus.scale) +\
+                _svg_bead("#ffffcc", "#000000") +\
+                _svg_footer()
+        yellow2 = _svg_header(BWIDTH, BHEIGHT, self.abacus.scale) +\
+                _svg_bead("#ffff88", "#000000") +\
+                _svg_footer()
+        yellow3 = _svg_header(BWIDTH, BHEIGHT, self.abacus.scale) +\
+                _svg_bead("#ffff00", "#000000") +\
+                _svg_footer()
+        self.colors = [_svg_str_to_pixbuf(white),
+                       _svg_str_to_pixbuf(yellow1),
+                       _svg_str_to_pixbuf(yellow2),
+                       _svg_str_to_pixbuf(yellow3)]
         rod_h = (self.bot_beads+2+1+self.top_beads+2)*BHEIGHT*self.abacus.scale
         w = (self.num_rods+1)*(BWIDTH+BOFFSET)*self.abacus.scale
         dx = (BWIDTH+BOFFSET)*self.abacus.scale
@@ -152,23 +234,39 @@ class AbacusGeneric():
         o =  (BWIDTH+BOFFSET-5)*self.abacus.scale/2
 
         # Draw the frame...
+        frame = _svg_header(self.frame_width, self.frame_height,
+                            self.abacus.scale) +\
+                _svg_rect(self.frame_width, self.frame_height, 15, 15, 0, 0,
+                          "#000000", "#000000") +\
+                _svg_rect(self.frame_width-60, self.frame_height-60, 0, 0,
+                          30, 30, "#808080", "#000000") +\
+                _svg_footer()
         self.frame = Sprite(self.abacus.sprites, x-BHEIGHT*self.abacus.scale,
                             y-BHEIGHT*self.abacus.scale,
-                            load_image(self.abacus.path, self.name+"_frame",
-                            self.frame_width*self.abacus.scale,
-                            self.frame_height*self.abacus.scale))
+                            _svg_str_to_pixbuf(frame))
         self.frame.type = 'frame'
 
-        # and then the beads.
+        # and then the rods and beads.
+        self.rods = []
         self.beads = []
-        o =  (BWIDTH-BOFFSET)/2*self.abacus.scale/2
+
+        bo =  (BWIDTH-BOFFSET)*self.abacus.scale/4
+        ro =  (BWIDTH+5)*self.abacus.scale/2
         for i in range(self.num_rods):
+            rod = _svg_header(10, self.frame_height-60, self.abacus.scale) +\
+                  _svg_rect(10, self.frame_height-60, 0, 0, 0, 0,
+                            rod_colors[i%len(rod_colors)], "#404040") +\
+                  _svg_footer()
+            self.rods.append(Sprite(self.abacus.sprites, x+i*dx+ro,
+                                    y,
+                                    _svg_str_to_pixbuf(rod)))     
+
             for b in range(self.top_beads):
-                self.beads.append(Sprite(self.abacus.sprites, x+i*dx+o,
+                self.beads.append(Sprite(self.abacus.sprites, x+i*dx+bo,
                                          y+b*BHEIGHT*self.abacus.scale,
                                          self.colors[0]))
             for b in range(self.bot_beads):
-                self.beads.append(Sprite(self.abacus.sprites, x+i*dx+o,
+                self.beads.append(Sprite(self.abacus.sprites, x+i*dx+bo,
                                          y+(self.top_beads+5+b)*BHEIGHT\
                                             *self.abacus.scale,
                                          self.colors[0]))
@@ -179,14 +277,17 @@ class AbacusGeneric():
             i.level = 0
 
         # Draw the dividing bar...
+        bar = _svg_header(self.frame_width-60, BHEIGHT, self.abacus.scale) +\
+              _svg_rect(self.frame_width-60, BHEIGHT, 0, 0, 0, 0,
+                        "#000000", "#000000") +\
+              _svg_footer()
         self.bar = Sprite(self.abacus.sprites, x, y+dy,
-                          load_image(self.abacus.path, self.name+"_bar",
-                                     w, BHEIGHT*self.abacus.scale))
+                          _svg_str_to_pixbuf(bar))
 
         self.bar.type = 'frame'
         self.bar.set_label_color('white')
 
-        # and the mark.
+        # and finally, the mark.
         o =  (BWIDTH+BOFFSET-15)*self.abacus.scale/2
         self.mark = Sprite(self.abacus.sprites, x+(self.num_rods-1)*dx+o,
                            y-(BHEIGHT-15)*self.abacus.scale,
@@ -197,6 +298,8 @@ class AbacusGeneric():
 
     def hide(self):
         """ Hide the rod, beads, mark, and frame. """
+        for i in self.rods:
+            i.hide()
         for i in self.beads:
             i.hide()
         self.bar.hide()
@@ -206,10 +309,12 @@ class AbacusGeneric():
     def show(self):
         """ Show the rod, beads, mark, and frame. """
         self.frame.set_layer(100)
-        for i in self.beads:
+        for i in self.rods:
             i.set_layer(101)
-        self.bar.set_layer(102)
-        self.mark.set_layer(103)
+        for i in self.beads:
+            i.set_layer(102)
+        self.bar.set_layer(103)
+        self.mark.set_layer(104)
 
     def set_value(self, string):
         """ Set abacus to value in string """
@@ -383,18 +488,6 @@ class Nepohualtzintzin(AbacusGeneric):
         self.frame_width = 715
         self.frame_height = 420
         self.base = 20
-        self.colors = [load_image(self.abacus.path, "white",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale),
-                       load_image(self.abacus.path, "yellow1",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale),
-                       load_image(self.abacus.path, "yellow2",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale),
-                       load_image(self.abacus.path, "yellow3",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale)]
         self.create()
 
     def value(self, count_beads=False):
@@ -449,18 +542,6 @@ class Suanpan(AbacusGeneric):
         self.frame_width = 810
         self.frame_height = 420
         self.base = 10
-        self.colors = [load_image(self.abacus.path, "white",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale),
-                       load_image(self.abacus.path, "yellow1",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale),
-                       load_image(self.abacus.path, "yellow2",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale),
-                       load_image(self.abacus.path, "yellow3",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale)]
         self.create()
 
 
@@ -476,18 +557,6 @@ class Soroban(AbacusGeneric):
         self.frame_width = 810
         self.frame_height = 360
         self.base = 10
-        self.colors = [load_image(self.abacus.path, "white",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale),
-                       load_image(self.abacus.path, "yellow1",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale),
-                       load_image(self.abacus.path, "yellow2",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale),
-                       load_image(self.abacus.path, "yellow3",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale)]
         self.create()
 
 
@@ -503,28 +572,19 @@ class Schety(AbacusGeneric):
         self.frame_width = 810
         self.frame_height = 420
         self.base = 10
-        self.black = load_image(self.abacus.path, "black",
-                                BWIDTH*self.abacus.scale,
-                                BHEIGHT*self.abacus.scale)
-        self.white = load_image(self.abacus.path, "white",
-                                BWIDTH*self.abacus.scale,
-                                BHEIGHT*self.abacus.scale)
-        self.colors = [load_image(self.abacus.path, "white",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale),
-                       load_image(self.abacus.path, "yellow1",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale),
-                       load_image(self.abacus.path, "yellow2",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale),
-                       load_image(self.abacus.path, "yellow3",
-                                  BWIDTH*self.abacus.scale,
-                                  BHEIGHT*self.abacus.scale)]
         self.create()
 
     def create(self):
         """ Override default in order to make a short rod """
+        white = _svg_header(BWIDTH, BHEIGHT, self.abacus.scale) +\
+                _svg_bead("#ffffff", "#000000") +\
+                _svg_footer()
+        black = _svg_header(BWIDTH, BHEIGHT, self.abacus.scale) +\
+                _svg_bead("#ffffcc", "#000000") +\
+                _svg_footer()
+        self.white = _svg_str_to_pixbuf(white)
+        self.black = _svg_str_to_pixbuf(black)
+
         # 10 beads + 2 spaces
         rod_h = (self.bot_beads+2)*BHEIGHT*self.abacus.scale
         dx = (BWIDTH+BOFFSET)*self.abacus.scale
@@ -542,6 +602,7 @@ class Schety(AbacusGeneric):
 
         # and then the beads.
         self.beads = []
+        self.rods = []
         o =  (BWIDTH-BOFFSET)/2*self.abacus.scale/2
         for i in range(self.num_rods):
             if i == 10:
@@ -708,3 +769,191 @@ class Schety(AbacusGeneric):
                     self.beads[i+ii].move_relative((0,
                                                    o*BHEIGHT*self.abacus.scale))
                     self.beads[i+ii].state = 0
+
+
+class Fractions(AbacusGeneric):
+
+    def __init__(self, abacus):
+        """ Create an abacus with fractions: 15 by 10 (with 1/2, 1/3. 1/4,
+            1/5, 1/6, 1/8, 1/9, 1/10, 1/12). """
+        self.bead_count = (10, 10, 10, 10, 10, 10, 2, 3, 4, 5, 6, 8, 9, 10, 12)
+        self.abacus = abacus
+        self.name = "schety"
+        self.num_rods = 15
+        self.top_beads = 0
+        self.bot_beads = 10
+        self.frame_width = 810
+        self.frame_height = 420
+        self.base = 10
+        self.white = load_image(self.abacus.path, "white",
+                                BWIDTH*self.abacus.scale,
+                                BHEIGHT*self.abacus.scale)
+        self.create()
+
+    def create(self):
+        """ Override default in order to make fraction rods. """
+        # 10 beads + 2 spaces
+        rod_h = (self.bot_beads+2)*BHEIGHT*self.abacus.scale
+        dx = (BWIDTH+BOFFSET)*self.abacus.scale
+        w = (self.num_rods+1)*(BWIDTH+BOFFSET)*self.abacus.scale
+        x = (self.abacus.width-w)/2
+        y = (self.abacus.height-rod_h)/2
+
+        # Draw the frame.
+        self.frame = Sprite(self.abacus.sprites, x-BHEIGHT*self.abacus.scale,
+                            y-BHEIGHT*self.abacus.scale,
+                            load_image(self.abacus.path, self.name+"_frame",
+                            self.frame_width*self.abacus.scale,
+                            self.frame_height*self.abacus.scale))
+        self.frame.type = 'frame'
+
+        # and then the beads.
+        self.beads = []
+        self.rods = []
+        o =  (BWIDTH-BOFFSET)/2*self.abacus.scale/2
+        for i in range(self.num_rods):
+            for b in range(self.bead_count[i]):
+                self.beads.append(Sprite(self.abacus.sprites, x+i*dx+o,
+                                         y+(12-self.bead_count[i]+b)*BHEIGHT*\
+                                         self.abacus.scale,
+                                         self.white))
+
+        for i in self.beads:
+            i.type = 'bead'
+            i.state = 0
+
+        # Draw a bar for the label on top.
+        self.bar = Sprite(self.abacus.sprites, x, y-BHEIGHT*self.abacus.scale,
+                          load_image(self.abacus.path, self.name+"_bar",
+                                     w, BHEIGHT*self.abacus.scale))
+
+        self.bar.type = 'frame'
+        self.bar.set_label_color('white')
+
+        # and the mark.
+        o =  (BWIDTH+BOFFSET-15)*self.abacus.scale/2
+        self.mark = Sprite(self.abacus.sprites, x+(self.num_rods-1)*dx+o,
+                           y-(BHEIGHT-15)*self.abacus.scale,
+                           load_image(self.abacus.path, "indicator",
+                                      20*self.abacus.scale,
+                                      15*self.abacus.scale))
+        self.mark.type = 'mark'
+
+    def value(self, count_beads=False):
+        """ Override to account for fourths """
+        string = ''
+        v = []
+        for r in range(self.num_rods+1): # +1 for overflow
+            v.append(0)
+
+        j = -1
+        r = -1
+        # Tally the values on each rod.
+        for i, b in enumerate(self.beads):
+            if j < i:
+                r+=1
+                j+=self.bead_count[r]
+            if b.state == 1:
+                if count_beads:
+                    v[r+1] += 1
+                else:
+                    v[r+1] += 10/self.bead_count[r]
+
+        if count_beads:
+            # Save the number of beads on each rod as a 2-byte int.
+            for j in v[1:]:
+                string += "%2d" % (j)
+        else:
+            # Carry to the left if a rod has a value > 9.
+            # First, process the short rod;
+            if v[11] == 10:
+                v[10] += 1
+            else:
+                v[12] += int(v[11])
+                v[13] += int(10*v[11]-10*int(v[11]))
+
+            # then, check the rods to the right of the short rod;
+            for j in range(4):
+                if v[len(v)-j-1] > 9:
+                    v[len(v)-j-1] -= 10
+                    if j < 3:
+                        v[len(v)-j-2] += 1
+                    else:
+                        v[len(v)-j-3] += 1 # skip over the short rod
+
+            # and finally, the rest of the rods.
+            for j in range(6,16):
+                if v[len(v)-j-1] > 9:
+                    v[len(v)-j-1] -= 10
+                    v[len(v)-j-2] += 1
+
+            # Convert values to a string.
+            for i, j in enumerate(v):
+                if i == 11:
+                    string += '.'
+                elif string != '' or j > 0:
+                    string += str(j)
+        return(string)
+
+    def set_rod_value(self, r, v):
+        """ Move beads on rod r to represent value v """
+        if r == 10:
+            beads = 4
+            bead_index = r*(self.bot_beads)
+            o = 8
+        elif r < 10:
+            beads = 10
+            bead_index = r*(self.bot_beads)
+            o = 2
+        else:
+            beads = 10
+            bead_index = r*(self.bot_beads)-6
+            o = 2
+
+        # Clear the rod.
+        for i in range(beads):
+            if self.beads[bead_index+i].state:
+                self.beads[bead_index+i].move((0, o*BHEIGHT*self.abacus.scale))
+            self.beads[bead_index+i].state = 0
+
+        # Set the rod.
+        for i in range(v):
+            self.beads[bead_index+i].move_relative((0,
+                                                  -o*BHEIGHT*self.abacus.scale))
+            self.beads[bead_index+i].state = 1 
+
+    def move_bead(self, bead, dy):
+        """ Override to account for short rod """
+        i = self.beads.index(bead)
+        r = i/self.bot_beads
+        # Take into account the rod with just 4 beads
+        if r < 10:
+            o = 2
+            b = i % self.bot_beads
+            n = self.bot_beads
+        elif i > 99 and i < 104:
+            o = 8
+            b = i % self.bot_beads
+            n = 4
+        else:
+            o = 2
+            b = (i+6) % self.bot_beads
+            n = self.bot_beads
+        if dy < 0 and bead.state == 0:
+            bead.move_relative((0, -o*BHEIGHT*self.abacus.scale))
+            bead.state = 1
+            # Make sure beads above this bead are also moved.
+            for ii in range(b+1):
+                if self.beads[i-ii].state == 0:
+                    self.beads[i-ii].move_relative((0,
+                                                  -o*BHEIGHT*self.abacus.scale))
+                    self.beads[i-ii].state = 1
+        elif dy > 0 and bead.state == 1:
+            bead.move_relative((0, o*BHEIGHT*self.abacus.scale))
+            bead.state = 0
+            # Make sure beads below this bead are also moved.
+            for ii in range(n-b):
+                if self.beads[i+ii].state == 1:
+                    self.beads[i+ii].move_relative((0,
+                                                   o*BHEIGHT*self.abacus.scale))
+                    self.beads[i+ii].state = 0
diff --git a/activity/activity.info b/activity/activity.info
index 102e9a0..d19699e 100644
--- a/activity/activity.info
+++ b/activity/activity.info
@@ -1,6 +1,6 @@
 [Activity]
 name = Abacus
-activity_version = 4
+activity_version = 5
 license = GPLv3
 bundle_id = org.sugarlabs.AbacusActivity
 exec = sugar-activity AbacusActivity.AbacusActivity
diff --git a/images/black.svg b/images/black.svg
deleted file mode 100644
index 14e6969..0000000
--- a/images/black.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="40.0"
-   height="30.0">
-      <path d="m1.5 15.0 A 15.0 13.5 90.0 0 1 15.0 1.5 L 25.0 1.5 A 15.0 13.5 90.0 0 1 38.5 15.0 A 15.0 13.5 90.0 0 1 25.0 28.5 L 15.0 28.5 A 15.0 13.5 90.0 0 1 1.5 15.0 z"
-       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:3.0;stroke-opacity:1;" />
-</svg>
diff --git a/images/divider_bar.svg b/images/divider_bar.svg
deleted file mode 100644
index 0c89eec..0000000
--- a/images/divider_bar.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="750"
-   height="30"
-   id="svg2">
-  <rect
-       width="750"
-       height="30"
-       x="0"
-       y="0"
-       style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:3;stroke-opacity:1" />
-</svg>
diff --git a/images/nepohualtzintzin_bar.svg b/images/nepohualtzintzin_bar.svg
deleted file mode 100644
index d18ccab..0000000
--- a/images/nepohualtzintzin_bar.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="715"
-   height="30"
-   id="svg2">
-  <rect
-       width="715"
-       height="30"
-       x="0"
-       y="0"
-       style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:3;stroke-opacity:1" />
-</svg>
diff --git a/images/nepohualtzintzin_frame.svg b/images/nepohualtzintzin_frame.svg
deleted file mode 100644
index 928c7c4..0000000
--- a/images/nepohualtzintzin_frame.svg
+++ /dev/null
@@ -1,117 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="715"
-   height="420"
-   id="svg2">
-  <defs
-     id="defs6" />
-  <g
-     transform="translate(339.53391,475.16949)"
-     id="g3886">
-    <rect
-       width="10"
-       height="360"
-       x="-287.03391"
-       y="-445.45639"
-       id="rect2881-6-78"
-       style="fill:#0082c4;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="-237.03391"
-       y="-445.45639"
-       id="rect2881-7-5-6"
-       style="fill:#0089ab;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="-187.03391"
-       y="-445.45639"
-       id="rect2881-69-8"
-       style="fill:#008c8b;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="-137.03391"
-       y="-445.45639"
-       id="rect2881-7-3-8"
-       style="fill:#008e68;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="-87.033897"
-       y="-444.8826"
-       id="rect2881-6-7-4"
-       style="fill:#008e4c;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="-37.033897"
-       y="-445.45639"
-       id="rect2881-7-5-4-3"
-       style="fill:#008900;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="12.966102"
-       y="-445.45639"
-       id="rect2881-7-52-1"
-       style="fill:#5e7700;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="62.966133"
-       y="-445.45639"
-       id="rect2881-6-5-4"
-       style="fill:#787000;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="112.9661"
-       y="-445.45639"
-       id="rect2881-7-5-47-9"
-       style="fill:#876a00;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="162.96609"
-       y="-445.45639"
-       id="rect2881-69-4-2"
-       style="fill:#986200;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="212.96609"
-       y="-445.45639"
-       id="rect2881-7-3-4-0"
-       style="fill:#ab5600;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="262.96609"
-       y="-445.45639"
-       id="rect2881-6-7-3"
-       style="fill:#d60000;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="312.96609"
-       y="-445.45639"
-       id="rect2881-7-5-4-0"
-       style="fill:#e30038;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  </g>
-  <rect
-     width="685"
-     height="390"
-     rx="15.5"
-     ry="15.5"
-     x="15"
-     y="15"
-     id="rect2818"
-     style="fill:none;stroke:#000000;stroke-width:30;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-</svg>
diff --git a/images/soroban_bar.svg b/images/soroban_bar.svg
deleted file mode 100644
index 0c89eec..0000000
--- a/images/soroban_bar.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="750"
-   height="30"
-   id="svg2">
-  <rect
-       width="750"
-       height="30"
-       x="0"
-       y="0"
-       style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:3;stroke-opacity:1" />
-</svg>
diff --git a/images/soroban_frame.svg b/images/soroban_frame.svg
deleted file mode 100644
index f22459a..0000000
--- a/images/soroban_frame.svg
+++ /dev/null
@@ -1,131 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="810"
-   height="360"
-   id="svg2">
-  <defs
-     id="defs6" />
-  <g
-     transform="matrix(1,0,0,0.85217453,406.52542,407.48726)"
-     id="g3768">
-    <rect
-       width="10"
-       height="360"
-       x="-356.52542"
-       y="-447.23602"
-       id="rect2881-4"
-       style="fill:#006ffe;fill-opacity:1;stroke:#404040;stroke-width:3.24980259;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="-306.52542"
-       y="-447.23602"
-       id="rect2881-7-7"
-       style="fill:#007ee7;fill-opacity:1;stroke:#404040;stroke-width:3.24980259;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="-256.52542"
-       y="-447.23602"
-       id="rect2881-6-6"
-       style="fill:#0082c4;fill-opacity:1;stroke:#404040;stroke-width:3.24980259;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="-206.52542"
-       y="-447.23602"
-       id="rect2881-7-5-5"
-       style="fill:#0089ab;fill-opacity:1;stroke:#404040;stroke-width:3.24980259;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="-156.52542"
-       y="-447.23602"
-       id="rect2881-69-6"
-       style="fill:#008c8b;fill-opacity:1;stroke:#404040;stroke-width:3.24980259;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="-106.52542"
-       y="-447.23602"
-       id="rect2881-7-3-9"
-       style="fill:#008e68;fill-opacity:1;stroke:#404040;stroke-width:3.24980259;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="-56.525425"
-       y="-446.66226"
-       id="rect2881-6-7-37"
-       style="fill:#008e4c;fill-opacity:1;stroke:#404040;stroke-width:3.24980259;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="-6.5254235"
-       y="-447.23602"
-       id="rect2881-7-5-4-4"
-       style="fill:#008900;fill-opacity:1;stroke:#404040;stroke-width:3.24980259;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="43.474575"
-       y="-447.23602"
-       id="rect2881-7-52-5"
-       style="fill:#5e7700;fill-opacity:1;stroke:#404040;stroke-width:3.24980259;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="93.474609"
-       y="-447.23602"
-       id="rect2881-6-5-2"
-       style="fill:#787000;fill-opacity:1;stroke:#404040;stroke-width:3.24980259;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="143.47458"
-       y="-447.23602"
-       id="rect2881-7-5-47-5"
-       style="fill:#876a00;fill-opacity:1;stroke:#404040;stroke-width:3.24980259;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="193.47458"
-       y="-447.23602"
-       id="rect2881-69-4-4"
-       style="fill:#986200;fill-opacity:1;stroke:#404040;stroke-width:3.24980259;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="243.47458"
-       y="-447.23602"
-       id="rect2881-7-3-4-7"
-       style="fill:#ab5600;fill-opacity:1;stroke:#404040;stroke-width:3.24980259;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="293.47458"
-       y="-447.23602"
-       id="rect2881-6-7-3-4"
-       style="fill:#d60000;fill-opacity:1;stroke:#404040;stroke-width:3.24980259;stroke-opacity:1" />
-    <rect
-       width="10"
-       height="360"
-       x="343.47458"
-       y="-447.23602"
-       id="rect2881-7-5-4-0-4"
-       style="fill:#e30038;fill-opacity:1;stroke:#404040;stroke-width:3.24980259;stroke-opacity:1" />
-  </g>
-  <rect
-     width="780"
-     height="330"
-     rx="17.169811"
-     ry="13.079269"
-     x="15"
-     y="15"
-     id="rect2818"
-     style="fill:none;stroke:#000000;stroke-width:30;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-</svg>
diff --git a/images/suanpan_bar.svg b/images/suanpan_bar.svg
deleted file mode 100644
index 0c89eec..0000000
--- a/images/suanpan_bar.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="750"
-   height="30"
-   id="svg2">
-  <rect
-       width="750"
-       height="30"
-       x="0"
-       y="0"
-       style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:3;stroke-opacity:1" />
-</svg>
diff --git a/images/suanpan_frame.svg b/images/suanpan_frame.svg
deleted file mode 100644
index 196b5c7..0000000
--- a/images/suanpan_frame.svg
+++ /dev/null
@@ -1,127 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="810"
-   height="420"
-   id="svg2">
-  <defs
-     id="defs6" />
-  <rect
-     width="10"
-     height="360"
-     x="51.5"
-     y="29.926229"
-     id="rect2881"
-     style="fill:#006ffe;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  <rect
-     width="10"
-     height="360"
-     x="101.5"
-     y="29.926229"
-     id="rect2881-7"
-     style="fill:#007ee7;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  <rect
-     width="10"
-     height="360"
-     x="151.5"
-     y="29.926229"
-     id="rect2881-6"
-     style="fill:#0082c4;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  <rect
-     width="10"
-     height="360"
-     x="201.5"
-     y="29.926229"
-     id="rect2881-7-5"
-     style="fill:#0089ab;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  <rect
-     width="10"
-     height="360"
-     x="251.5"
-     y="29.926229"
-     id="rect2881-69"
-     style="fill:#008c8b;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  <rect
-     width="10"
-     height="360"
-     x="301.5"
-     y="29.926229"
-     id="rect2881-7-3"
-     style="fill:#008e68;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  <rect
-     width="10"
-     height="360"
-     x="351.5"
-     y="30.5"
-     id="rect2881-6-7"
-     style="fill:#008e4c;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  <rect
-     width="10"
-     height="360"
-     x="401.5"
-     y="29.926229"
-     id="rect2881-7-5-4"
-     style="fill:#008900;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  <rect
-     width="10"
-     height="360"
-     x="451.5"
-     y="29.926229"
-     id="rect2881-7-52"
-     style="fill:#5e7700;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  <rect
-     width="10"
-     height="360"
-     x="501.50003"
-     y="29.926229"
-     id="rect2881-6-5"
-     style="fill:#787000;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  <rect
-     width="10"
-     height="360"
-     x="551.5"
-     y="29.926229"
-     id="rect2881-7-5-47"
-     style="fill:#876a00;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  <rect
-     width="10"
-     height="360"
-     x="601.5"
-     y="29.926229"
-     id="rect2881-69-4"
-     style="fill:#986200;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  <rect
-     width="10"
-     height="360"
-     x="651.5"
-     y="29.926229"
-     id="rect2881-7-3-4"
-     style="fill:#ab5600;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  <rect
-     width="10"
-     height="360"
-     x="701.5"
-     y="29.926229"
-     id="rect2881-6-7-3"
-     style="fill:#d60000;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  <rect
-     width="10"
-     height="360"
-     x="751.5"
-     y="29.926229"
-     id="rect2881-7-5-4-0"
-     style="fill:#e30038;fill-opacity:1;stroke:#404040;stroke-width:3;stroke-opacity:1" />
-  <rect
-     width="780"
-     height="390"
-     rx="17.169811"
-     ry="15.457318"
-     x="15"
-     y="15"
-     id="rect2818"
-     style="fill:none;stroke:#000000;stroke-width:30;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
-</svg>
diff --git a/images/white.svg b/images/white.svg
deleted file mode 100644
index 7efe422..0000000
--- a/images/white.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="40.0"
-   height="30.0">
-      <path d="m1.5 15.0 A 15.0 13.5 90.0 0 1 15.0 1.5 L 25.0 1.5 A 15.0 13.5 90.0 0 1 38.5 15.0 A 15.0 13.5 90.0 0 1 25.0 28.5 L 15.0 28.5 A 15.0 13.5 90.0 0 1 1.5 15.0 z"
-       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:3.0;stroke-opacity:1;" />
-</svg>
diff --git a/images/yellow1.svg b/images/yellow1.svg
deleted file mode 100644
index c16efb0..0000000
--- a/images/yellow1.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="40.0"
-   height="30.0">
-      <path d="m1.5 15.0 A 15.0 13.5 90.0 0 1 15.0 1.5 L 25.0 1.5 A 15.0 13.5 90.0 0 1 38.5 15.0 A 15.0 13.5 90.0 0 1 25.0 28.5 L 15.0 28.5 A 15.0 13.5 90.0 0 1 1.5 15.0 z"
-       style="fill:#ffffcc;fill-opacity:1;stroke:#000000;stroke-width:3.0;stroke-opacity:1;" />
-</svg>
diff --git a/images/yellow2.svg b/images/yellow2.svg
deleted file mode 100644
index 04a4f01..0000000
--- a/images/yellow2.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="40.0"
-   height="30.0">
-      <path d="m1.5 15.0 A 15.0 13.5 90.0 0 1 15.0 1.5 L 25.0 1.5 A 15.0 13.5 90.0 0 1 38.5 15.0 A 15.0 13.5 90.0 0 1 25.0 28.5 L 15.0 28.5 A 15.0 13.5 90.0 0 1 1.5 15.0 z"
-       style="fill:#ffff88;fill-opacity:1;stroke:#000000;stroke-width:3.0;stroke-opacity:1;" />
-</svg>
diff --git a/images/yellow3.svg b/images/yellow3.svg
deleted file mode 100644
index b207892..0000000
--- a/images/yellow3.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   version="1.1"
-   width="40.0"
-   height="30.0">
-      <path d="m1.5 15.0 A 15.0 13.5 90.0 0 1 15.0 1.5 L 25.0 1.5 A 15.0 13.5 90.0 0 1 38.5 15.0 A 15.0 13.5 90.0 0 1 25.0 28.5 L 15.0 28.5 A 15.0 13.5 90.0 0 1 1.5 15.0 z"
-       style="fill:#ffff00;fill-opacity:1;stroke:#000000;stroke-width:3.0;stroke-opacity:1;" />
-</svg>