Keyboard looking better.

4 files changed, 90 insertions, 42 deletions

diff --git a/TODO b/TODO
index fdb4923..5995726 100644
--- a/TODO
+++ b/TODO
@@ -1,11 +1,12 @@
 Typing Turtle
 
 First Release
-+ Working medals assignment: "You got a medal!" popup, display next to lesson.
+- Working medals assignment: "You got a medal!" popup, display next to lesson.
 + Graphical WPM and accuracy meters.
 + Nice looking keyboard.
 + Highlighted keyboard keys when pressed.
 + Support for displaying modifier keys in Keyboard.
++ Allow lessons to choose between forcing correct keypresses and allowing incorrect ones (with support for Backspace).
 + Artwork and animations.
   + Background picture in main screen.
   + Animated turtle in main screen.
@@ -17,7 +18,6 @@ First Release
   + Medal award sounds for each medal type: Bronze, Silver, Gold.
   + Incorrect key pressed sound. 
 + Develop lessons.
-  + Automatically generate lessons for keyboard regions: Home row, Top row, Bottom row, Numbers, etc.
   + Mark some lessons as "locational" versus "textual" and translate from the English keyboard to native.  Ex: Home row, Left hand, Numbers, etc.
   + Give each lesson criteria for each medal type based on Accuracy, WPM.
 
diff --git a/keyboard.py b/keyboard.py
index 3dd4838..a7250ca 100644
--- a/keyboard.py
+++ b/keyboard.py
@@ -46,6 +46,9 @@ KEY_PROPS = [
     # Gap between keys. Used by 'horizontal' and 'verical' layout algorithms.
     { 'name': 'key-gap', 'default': 0 },
 
+    # Text label to be displayed on keys which do not generate ASCII keys.
+    { 'name': 'key-label', 'default': '' },
+
     # Character generated by the key, when no modifier keys are pressed.
     { 'name': 'key-normal', 'default': '' },
 
@@ -66,12 +69,12 @@ KEY_PROPS = [
 DEFAULT_LAYOUT = {
     'layout-name': "default",
 
-    'layout-width': 555,
+    'layout-width': 775,
     'layout-height': 300,
 
     'group-layout': 'horizontal',
 
-    'key-width': 40,
+    'key-width': 45,
     'key-height': 45,
     'key-gap': 5,
 
@@ -79,17 +82,18 @@ DEFAULT_LAYOUT = {
 	{
 	    'group-name': "row0",
             'group-x': 10,
-            'group-y': 7.5,
- 
-            'key-width': 100,
-            'key-height': 30,
-            'key-gap': 45,
-    
+            'group-y': 10,
+
+            'key-height': 35,
+
 	    'keys': [
-		{'key-normal':"X",'key-shift':"X"}, 
-		{'key-normal':"O",'key-shift':"O"}, 
-		{'key-normal':"X",'key-shift':"X"}, 
-		{'key-normal':"O",'key-shift':"O"}
+	     {'key-normal':"",'key-shift':""}, # Escape 
+	     {'key-normal':"",'key-shift':""}, # Show Source
+	     {'key-normal':"",'key-shift':"",'key-width':182}, # Zoom
+	     {'key-normal':"",'key-shift':"",'key-width':182}, # Size 
+	     {'key-normal':"",'key-shift':"",'key-width':181}, # Volume
+	     {'key-normal':"",'key-shift':""}, # Window
+	     {'key-normal':"",'key-shift':""}, # Frame
 	    ]
 	},
 	{
@@ -98,6 +102,7 @@ DEFAULT_LAYOUT = {
             'group-y': 50,
 
 	    'keys': [
+	     {'key-normal':"`",'key-shift':"~",'key-width':35}, 
 	     {'key-normal':"1",'key-shift':"!"}, 
 	     {'key-normal':"2",'key-shift':"@"}, 
 	     {'key-normal':"3",'key-shift':"#"}, 
@@ -109,7 +114,8 @@ DEFAULT_LAYOUT = {
 	     {'key-normal':"9",'key-shift':"("}, 
 	     {'key-normal':"0",'key-shift':")"}, 
 	     {'key-normal':"-",'key-shift':"_"}, 
-	     {'key-normal':"=",'key-shift':"+"}
+	     {'key-normal':"=",'key-shift':"+",'key-width':65},
+	     {'key-label':"erase",'key-width':95}
 	    ]
 	},
 	{
@@ -118,6 +124,7 @@ DEFAULT_LAYOUT = {
             'group-y': 100,
 
 	    'keys': [
+	     {'key-label':"tab"},
 	     {'key-normal':"q",'key-shift':"Q"}, 
 	     {'key-normal':"w",'key-shift':"W"}, 
 	     {'key-normal':"e",'key-shift':"E"}, 
@@ -129,7 +136,8 @@ DEFAULT_LAYOUT = {
 	     {'key-normal':"o",'key-shift':"O"}, 
 	     {'key-normal':"p",'key-shift':"P"}, 
 	     {'key-normal':"[",'key-shift':"{"}, 
-	     {'key-normal':"]",'key-shift':"}"}
+	     {'key-normal':"]",'key-shift':"}",'key-width':55},
+	     {'key-label':"enter",'key-width':95,'key-height':95}
 	    ]
 	},
 	{
@@ -138,6 +146,7 @@ DEFAULT_LAYOUT = {
             'group-y': 150,
 
 	    'keys': [
+	     {'key-label':"ctrl",'key-width':55},
 	     {'key-normal':"a",'key-shift':"A"}, 
 	     {'key-normal':"s",'key-shift':"S"}, 
 	     {'key-normal':"d",'key-shift':"D"}, 
@@ -154,10 +163,11 @@ DEFAULT_LAYOUT = {
 	},
 	{
 	    'group-name': "row4",
-            'group-x': 55,
+            'group-x': 10,
             'group-y': 200,
 
 	    'keys': [
+	     {'key-label':"shift",'key-width':75},
 	     {'key-normal':"z",'key-shift':"Z"}, 
 	     {'key-normal':"x",'key-shift':"X"}, 
 	     {'key-normal':"c",'key-shift':"C"}, 
@@ -167,24 +177,27 @@ DEFAULT_LAYOUT = {
 	     {'key-normal':"m",'key-shift':"M"}, 
 	     {'key-normal':",",'key-shift':"<"}, 
 	     {'key-normal':".",'key-shift':">"}, 
-	     {'key-normal':"/",'key-shift':"?"}
+	     {'key-normal':"/",'key-shift':"?"},
+	     {'key-label':"shift",'key-width':75},
+	     {'key-label':"",'key-shift':""}, # Up
+	     {'key-label':"",'key-shift':""}, # Multiply
 	    ]
 	},
 	{
 	    'group-name': "row5",
-            'group-x': 55,
+            'group-x': 10,
             'group-y': 250,
 
 	    'keys': [
-	     {'key-normal':"fn",'key-shift':"fn"}, 
-	     {'key-normal':"HA",'key-shift':"HA"}, 
-	     {'key-normal':"alt",'key-shift':"alt"}, 
-	     {'key-normal':"space",'key-shift':"space", 'key-width':85}, 
-	     {'key-normal':"alt gr",'key-shift':"alt gr"}, 
-	     {'key-normal':"HA",'key-shift':"HA"}, 
-	     {'key-normal':"<-",'key-shift':"<-"}, 
-	     {'key-normal':"dn",'key-shift':"dn"}, 
-	     {'key-normal':"->",'key-shift':"->"}
+	     {'key-label':"fn",'key-width':35},
+	     {'key-label':"",'key-width':55}, # LHand
+	     {'key-label':"alt",'key-width':55}, # LAlt
+	     {'key-normal':" ",'key-shift':" ", 'key-width':325}, 
+	     {'key-label':"alt",'key-width':55}, # RAlt
+	     {'key-label':"",'key-width':55}, # RHand
+	     {'key-label':""}, # Left 
+	     {'key-label':""}, # Down
+	     {'key-label':""}, # Right
 	    ]
 	}
     ]
@@ -206,7 +219,7 @@ class Key:
 
 class Keyboard(gtk.DrawingArea):
     """A GTK widget which provides an interactive visual keyboard, with support
-       for data driven custom layouts."""
+       for custom data driven layouts."""
 
     def __init__(self):
         gtk.DrawingArea.__init__(self)
@@ -332,18 +345,53 @@ class Keyboard(gtk.DrawingArea):
         self._update_screen_layout()
 
         # Draw the keys.
-        style = self.get_style()
-        gc = style.fg_gc[gtk.STATE_NORMAL]
+        cr = self.window.cairo_create()
+        cr.rectangle(event.area.x, event.area.y, event.area.width, event.area.height)
+        cr.clip()
+
+        bounds = self.get_allocation()
 
         for k in self.keys:
-            # Outline rectangle.
-            gc.set_clip_rectangle(gtk.gdk.Rectangle(k.screen_x-1, k.screen_y-1, k.screen_width+2, k.screen_height+2))
-            self.window.draw_rectangle(gc, False, k.screen_x, k.screen_y, k.screen_width, k.screen_height)
+            cr.save()
+
+            x1 = k.screen_x
+            y1 = k.screen_y
+            x2 = k.screen_x + k.screen_width
+            y2 = k.screen_y + k.screen_height
+
+            # Outline rounded box.
+            corner = 5
+            cr.move_to(x1 + corner, y1)
+            cr.line_to(x2 - corner, y1)
+            cr.line_to(x2, y1 + corner)
+            cr.line_to(x2, y2 - corner)
+            cr.line_to(x2 - corner, y2)
+            cr.line_to(x1 + corner, y2)
+            cr.line_to(x1, y2 - corner)
+            cr.line_to(x1, y1 + corner)
+            cr.close_path()
+
+            cr.set_source_rgb(1.0, 1.0, 1.0)
+	    cr.fill_preserve()
+
+            cr.set_source_rgb(0.1, 0.1, 0.1)
+            cr.stroke_preserve()
+
+            cr.clip()
 
             # Inner text.
-            gc.set_clip_rectangle(gtk.gdk.Rectangle(k.screen_x+1, k.screen_y+1, k.screen_width-1, k.screen_height-1))
-            self.pangolayout.set_text(k.props['key-normal'])
-            self.window.draw_layout(gc, k.screen_x+5, k.screen_y+5, self.pangolayout)
+            if k.props['key-label']:
+                text = k.props['key-label']
+            else:
+                text = k.props['key-normal']
+
+            cr.set_font_size(16)
+            x_bearing, y_bearing, width, height = cr.text_extents(text)[:4]
+    
+            cr.move_to(x1+8 - x_bearing, y2-8 - height - y_bearing)
+            cr.show_text(text)
+
+            cr.restore()
 
         return True
 
diff --git a/lessons/LESSONS.en_US b/lessons/LESSONS.en_US
index 83b24d8..ee0413a 100644
--- a/lessons/LESSONS.en_US
+++ b/lessons/LESSONS.en_US
@@ -78,10 +78,6 @@
       {
         "instructions": "Now for the final two keys of the home row.  Move your right pinky finger over and press the <b>'</b> key.",
         "text": "'"
-      },
-      {
-        "instructions": "Now, move your right pinky finger over <i>two keys</i> and press the <b>Enter</b> key.",
-        "text": ""
       }
     ]
   }
diff --git a/typingturtle.py b/typingturtle.py
index add253d..ab9a0c7 100755
--- a/typingturtle.py
+++ b/typingturtle.py
@@ -78,7 +78,6 @@ class MedalScreen(gtk.EventBox):
         vbox = gtk.VBox()
 
         vbox.pack_start(cert0, True, False, 0)
-        vbox.pack_start(gtk.HSeparator(), False, False, 20)
         vbox.pack_start(cert1, False, False, 0)
         vbox.pack_start(gtk.HSeparator(), False, False, 20)
         vbox.pack_start(statbox, False, False, 0)
@@ -113,6 +112,11 @@ class LessonScreen(gtk.VBox):
         self.wpmlabel = gtk.Label()
         self.accuracylabel = gtk.Label()
 
+        #self.wpmarea = gtk.DrawingArea()
+        #self.wpmarea.connect('expose-event', self.wpm_expose_cb)
+        #self.accuracyarea = gtk.DrawingArea()
+        #self.accuracyarea.connect('expose-event', self.accuracy_expose_cb)
+
         hbox = gtk.HBox()
         hbox.pack_start(stopbtn, False, False, 10)
         hbox.pack_start(self.wpmlabel, True, False, 10)