Add information box

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

3 files changed, 220 insertions, 90 deletions

diff --git a/activity.py b/activity.py
index 7f84629..d618546 100644
--- a/activity.py
+++ b/activity.py
@@ -24,7 +24,6 @@ from gi.repository import Gtk
 from gi.repository import Gdk
 from gi.repository import GdkPixbuf
 
-
 import pygst
 pygst.require('0.10')
 import gst
@@ -43,48 +42,53 @@ from sugar3.graphics import style
 from sugar3 import profile
 from sugar3.graphics.icon import EventIcon
 
-
-ANIMAL_DATA = ({'name': 'Butterfly', 'icon_name': 'butterflies',
-                'video': 'Butterflies.mp4', 'icon_position': (-0.7, 0.1),
-                'text': _('The monarch butterfly is famous for its southward '
-                        'migration and northward return in summer from '
-                        'Canada to Mexico and Baja California which spans '
-                        'the life of three to four generations of the '
-                        'butterfly. \n\n'
-                        'The journey is 3000 miles and take 6 months')},
-               {'name': 'Chimps', 'icon_name': 'chimps',
-                'video': 'Chimps.mp4', 'icon_position': (-0.1, -0.1),
-                'text': _('Chimpanzees are members of the Hominidae family, '
-                        'along gorilas, humans and orangutans. '
-                        'Chimpanzees splt from the human branch of the '
-                        'family about four to six millions years ago.')},
-               {'name': 'Polar bears', 'icon_name': 'polar-bears',
-                'video': 'PolarBears.mp4', 'icon_position': (0.0, 0.95),
-                'text': _('Polar bears have two types of fur- a top layer and '
-                        'an under layer. The top layer is made up of long '
-                        'oily hairs and the under layer is soft and fine.\n\n'
-                        'When the bears swim the top layer keeps the under '
-                        'layer from getting wet and afterwards they can '
-                        'shake off all of the water just like a dog.')},
-               {'name': 'Pandas', 'icon_name': 'pandas',
-                'video': 'Pandas.mp4', 'icon_position': (0.5, 0.3),
-                'text': _('The giant panda lives in the mountain ranges in '
-                        'central China. The giant panda has a black and '
-                        'white coat. Adults measure around 1.2 to 1.8 meters '
-                        'in length. \n\n'
-                        'Pandas eat any of 25 bamboos species in the wild')},
-               {'name': 'Whales', 'icon_name': 'whales',
-                'video': 'Whales.mp4', 'icon_position': (0.1, -0.8),
-                'text': _('Humpback Whales are giants amongst sea voyagers, '
-                        'they spend their year roaming the oceans between '
-                        'feeding and breading grounds.\n\n '
-                        'They follow the coast of Mexico and Nort America all '
-                        'the way to the Arctic, travelling day and night '
-                        'without pause covering over 500 miles a week')},
-               {'name': 'Kangaroos', 'icon_name': 'kangaroos',
-                'video': None, 'icon_position': (0.6, -0.3),
-                'text': None}
-               )
+from roundbox import RoundBox
+
+DAT_DIC = ({'name': 'Butterfly', 'icon_name': 'butterflies',
+            'video': 'Butterflies.mp4', 'icon_position': (-0.7, 0.1),
+            'text': _('The monarch butterfly is famous for its southward '
+                    'migration and northward return in summer from '
+                    'Canada to Mexico and Baja California which spans '
+                    'the life of three to four generations of the '
+                    'butterfly. \n\n'
+                    'The journey is 3000 miles and take 6 months')},
+           {'name': 'Chimps', 'icon_name': 'chimps',
+            'video': 'Chimps.mp4', 'icon_position': (-0.1, -0.1),
+            'text': _('Chimpanzees are members of the Hominidae family, '
+                    'along gorilas, humans and orangutans. '
+                    'Chimpanzees split from the human branch of the '
+                    'family about four to six millions years ago.')},
+           {'name': 'Polar bears', 'icon_name': 'polar-bears',
+            'video': 'PolarBears.mp4', 'icon_position': (0.0, 0.95),
+            'text': _('Polar bears have two types of fur- a top layer and '
+                    'an under layer. The top layer is made up of long '
+                    'oily hairs and the under layer is soft and fine.\n\n'
+                    'When the bears swim the top layer keeps the under '
+                    'layer from getting wet and afterwards they can '
+                    'shake off all of the water just like a dog.')},
+           {'name': 'Pandas', 'icon_name': 'pandas',
+            'video': 'Pandas.mp4', 'icon_position': (0.5, 0.3),
+            'text': _('The giant panda lives in the mountain ranges in '
+                    'central China. The giant panda has a black and '
+                    'white coat. Adults measure around 1.2 to 1.8 meters '
+                    'in length. \n\n'
+                    'Pandas eat any of 25 bamboos species in the wild')},
+           {'name': 'Whales', 'icon_name': 'whales',
+            'video': 'Whales.mp4', 'icon_position': (0.1, -0.8),
+            'text': _('Humpback Whales are giants amongst sea voyagers, '
+                    'they spend their year roaming the oceans between '
+                    'feeding and breading grounds.\n\n '
+                    'They follow the coast of Mexico and Nort America all '
+                    'the way to the Arctic, travelling day and night '
+                    'without pause covering over 500 miles a week')},
+           {'name': 'Kangaroos', 'icon_name': 'kangaroos',
+            'video': None, 'icon_position': (0.6, -0.3),
+            'text': ''}
+           )
+
+MAP_PAGE = 0
+VIDEO_PAGE = 1
+INFO_PAGE = 2
 
 
 class MyEcoTvActivity(activity.Activity):
@@ -103,22 +107,19 @@ class MyEcoTvActivity(activity.Activity):
         toolbar_box.toolbar.insert(Gtk.SeparatorToolItem(), -1)
 
         self._world_bt = ToolButton('world-map-au')
-        self._world_bt.set_sensitive(False)
         self._world_bt.connect('clicked',
                                self.__show_world_map_cb)
         toolbar_box.toolbar.insert(self._world_bt, -1)
 
         self._play_bt = ToolButton('player_play')
-        self._play_bt.set_sensitive(False)
         self._play_bt.connect('clicked',
                               self.__play_video_cb)
         toolbar_box.toolbar.insert(self._play_bt, -1)
 
-        self._help_bt = ToolButton('toolbar-help')
-        self._help_bt.set_sensitive(False)
-        self._help_bt.connect('clicked',
-                              self.__show_animal_text_cb)
-        toolbar_box.toolbar.insert(self._help_bt, -1)
+        self._info_bt = ToolButton('toolbar-help')
+        self._info_bt.connect('clicked',
+                              self.__show_info_cb)
+        toolbar_box.toolbar.insert(self._info_bt, -1)
 
         separator = Gtk.SeparatorToolItem()
         separator.props.draw = False
@@ -140,40 +141,59 @@ class MyEcoTvActivity(activity.Activity):
 
         self._videoplayer = VideoPlayer()
         self._notebook.append_page(self._videoplayer, None)
-
         self._notebook.show_all()
         self.set_canvas(self._notebook)
+        self._icon_selected = None
+        self.set_current_page(MAP_PAGE)
 
     def get_data_icon(self, icon_name):
-        for data in ANIMAL_DATA:
+        for data in DAT_DIC:
             if icon_name == data['name']:
                 return data
         return None
 
     def __icon_clicked_cb(self, worldmap, icon_name):
         logging.error('Icon %s clicked', icon_name)
+        self._icon_selected = icon_name
         data = self.get_data_icon(icon_name)
         logging.error(data)
         if data is not None and data['video'] is not None:
-            self.show_animal_panel(data)
+            self.show_video(data['video'])
 
-    def show_animal_panel(self, data):
-        self._notebook.set_current_page(1)
-        self._world_bt.set_sensitive(True)
+    def show_video(self, video):
+        # the information box resizes the notebook
+        # need remove it to have the video desplayed in
+        # the correct pvertical position
+        if self._notebook.get_n_pages() > 2:
+            self._notebook.remove_page(-1)
+
+        self.set_current_page(VIDEO_PAGE)
         video_path = os.path.join(activity.get_bundle_path(), 'video',
-                                  data['video'])
+                                  video)
         self._videoplayer.play(video_path)
 
     def __show_world_map_cb(self, button):
-        self._world_bt.set_sensitive(False)
-        self._videoplayer.stop()
-        self._notebook.set_current_page(0)
+        self._icon_selected = None
+        self.set_current_page(MAP_PAGE)
 
     def __play_video_cb(self, button):
-        pass
+        data = self.get_data_icon(self._icon_selected)
+        if data is not None and data['video'] is not None:
+            self.show_video(data['video'])
 
-    def __show_animal_text_cb(self, button):
-        pass
+    def __show_info_cb(self, button):
+        if self._icon_selected is None:
+            return
+        data = self.get_data_icon(self._icon_selected)
+        if data is not None:
+
+            if self._notebook.get_n_pages() > 2:
+                self._notebook.remove_page(-1)
+
+            info_box = InformationBox(data['icon_name'], _('Did you know?'),
+                                      data['text'])
+            self._notebook.append_page(info_box, None)
+            self.set_current_page(INFO_PAGE)
 
     def write_file(self, file_name):
         pass
@@ -181,10 +201,23 @@ class MyEcoTvActivity(activity.Activity):
     def read_file(self, file_name):
         pass
 
+    def set_current_page(self, page):
+        self._notebook.set_current_page(page)
+        self._world_bt.set_sensitive(page != MAP_PAGE)
+        self._info_bt.set_sensitive(page == VIDEO_PAGE)
+        self._play_bt.set_sensitive(page == INFO_PAGE)
+        if page != VIDEO_PAGE:
+            self._videoplayer.stop()
+
 
 class VideoPlayer(Gtk.EventBox):
     def __init__(self):
         super(VideoPlayer, self).__init__()
+
+        self._width = Gdk.Screen.width()
+        self._height = Gdk.Screen.height() - style.GRID_CELL_SIZE
+        self.set_size_request(self._width, self._height)
+
         self.set_double_buffered(False)
         self.set_app_paintable(True)
 
@@ -233,7 +266,7 @@ class VideoPlayer(Gtk.EventBox):
                 activity.get_bundle_path(), 'video', filename)
             self._vpipeline.set_property('uri', "file://" + path)
 
-        ret = self._vpipeline.set_state(gst.STATE_PLAYING)
+        self._vpipeline.set_state(gst.STATE_PLAYING)
         self.playing = True
 
     def stop(self):
@@ -249,6 +282,71 @@ class VideoPlayer(Gtk.EventBox):
         self.paused = False
 
 
+class InformationBox(Gtk.EventBox):
+
+    def __init__(self, icon_name, title, text):
+        Gtk.EventBox.__init__(self)
+        self._width = Gdk.Screen.width()
+        self._height = Gdk.Screen.height() - style.GRID_CELL_SIZE
+        self.set_size_request(self._width, self._height)
+        self.modify_bg(Gtk.StateType.NORMAL,
+                       style.COLOR_WHITE.get_gdk_color())
+        self._icon_name = icon_name
+
+        roundbox = RoundBox()
+        roundbox.background_color = style.Color('#179820')
+        roundbox.border_color = style.Color('#179820')
+        roundbox.props.margin = style.GRID_CELL_SIZE
+
+        vbox = Gtk.VBox()
+        vbox.props.margin = style.GRID_CELL_SIZE * 2
+
+        if style.zoom(100) == 100:
+            # xo
+            font_size = 12
+        else:
+            # desktop
+            font_size = 25
+
+        title_label = Gtk.Label()
+        title_label.set_markup(
+            '<span foreground="white" font="Sans %d">%s</span>' %
+            (font_size, title))
+        title_label.set_alignment(0.0, 0.0)
+        vbox.pack_start(title_label, False, False, 10)
+        text_label = Gtk.Label()
+        text_label.set_markup(
+            '<span foreground="white" font="Sans %d">%s</span>' %
+            (font_size, text))
+        text_label.set_alignment(0.0, 0.5)
+        text_label.set_line_wrap(True)
+        vbox.pack_start(text_label, False, False, 10)
+        roundbox.add(vbox)
+
+        overlay = Gtk.Overlay()
+        self.add(overlay)
+        overlay.add(roundbox)
+
+        self._xo_color = profile.get_color()
+        icon = EventIcon(icon_name='globe', xo_color=self._xo_color)
+        icon.props.halign = Gtk.Align.START
+        icon.props.valign = Gtk.Align.START
+        icon.props.margin_top = 0
+        icon.props.margin_left = int(style.GRID_CELL_SIZE * 2.6)
+        overlay.add_overlay(icon)
+        icon.set_size(style.zoom(266))
+
+        icon = EventIcon(icon_name=self._icon_name, xo_color=self._xo_color)
+        icon.props.halign = Gtk.Align.START
+        icon.props.valign = Gtk.Align.START
+        icon.props.margin_top = style.GRID_CELL_SIZE / 2
+        icon.props.margin_left = style.GRID_CELL_SIZE * 3
+        overlay.add_overlay(icon)
+        icon.set_size(style.zoom(200))
+
+        self.show_all()
+
+
 class WorldMap(Gtk.EventBox):
 
     __gsignals__ = {
@@ -266,7 +364,7 @@ class WorldMap(Gtk.EventBox):
         self._fixed = Gtk.Fixed()
         self.connect('draw', self.__draw_cb)
 
-        for data in ANIMAL_DATA:
+        for data in DAT_DIC:
             icon = EventIcon(icon_name=data['icon_name'],
                              xo_color=self._xo_color)
             icon.set_size(100)
@@ -280,9 +378,17 @@ class WorldMap(Gtk.EventBox):
         self.add(self._fixed)
 
     def __draw_cb(self, widget, ctx):
+        ctx.rectangle(0, 0, self._width, self._height)
+        ctx.set_source_rgba(1.0, 1.0, 1.0, 1.0)
+        ctx.paint()
+        ctx.save()
         ctx.translate(0, 0)
+        scale_x = float(self._width) / self._background_pixbuf.get_width()
+        scale_y = float(self._height) / self._background_pixbuf.get_height()
+        ctx.scale(scale_x, scale_y)
         Gdk.cairo_set_source_pixbuf(ctx, self._background_pixbuf, 0, 0)
         ctx.paint()
+        ctx.restore()
 
     def __icon_button_press_cb(self, icon, event, data_name):
         self.emit('icon-clicked', data_name)
diff --git a/globe.svg b/globe.svg
deleted file mode 100644
index c29b149..0000000
--- a/globe.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   version="1.1"
-   width="150"
-   height="150"
-   viewBox="0 0 150 150"
-   id="Layer_1"
-   xml:space="preserve"><metadata
-     id="metadata23"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
-     id="defs21" /><path
-     d="m 121.262,72.716 c 0,-25.552 -20.713,-46.264 -46.262,-46.264 -19.533,0 -36.238,12.105 -43.023,29.224 -2.09,5.273 -3.238,11.021 -3.238,17.04 0,25.549 20.711,46.262 46.262,46.262 3.014,0 5.961,-0.287 8.816,-0.838 l 15.154,5.408 5.363,-15.059 c 10.336,-8.486 16.928,-21.359 16.928,-35.773 z"
-     id="path3"
-     style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-miterlimit:10;stroke-opacity:1;stroke-dasharray:none" /><path
-     d="m 121.262,72.716 c 0,-25.552 -20.713,-46.264 -46.262,-46.264 -19.533,0 -36.238,12.105 -43.023,29.224 -2.09,5.273 -3.238,11.021 -3.238,17.04 0,25.549 20.711,46.262 46.262,46.262 3.014,0 5.961,-0.287 8.816,-0.838 l 15.154,5.408 5.363,-15.059 c 10.336,-8.486 16.928,-21.359 16.928,-35.773 z"
-     id="path5"
-     style="fill:none;stroke:none" /></svg>
\ No newline at end of file
diff --git a/roundbox.py b/roundbox.py
new file mode 100644
index 0000000..b6ccbdf
--- /dev/null
+++ b/roundbox.py
@@ -0,0 +1,49 @@
+import math
+from gi.repository import Gtk
+from gi.repository import Gdk
+from sugar3.graphics import style
+
+
+class RoundBox(Gtk.HBox):
+    __gtype_name__ = 'RoundBox'
+
+    _BORDER_DEFAULT = style.LINE_WIDTH
+
+    def __init__(self, **kwargs):
+        Gtk.HBox.__init__(self, **kwargs)
+        self._radius = style.zoom(30)
+        self.border = self._BORDER_DEFAULT
+        self.border_color = style.Color('#000000')
+        self.background_color = None
+        #self.set_reallocate_redraws(True)
+        self.connect("draw", self.__draw_cb)
+
+    def __draw_cb(self, widget, cr):
+        rect = self.get_allocation()
+        x = rect.x + self._BORDER_DEFAULT / 2
+        y = rect.y + self._BORDER_DEFAULT / 2
+        width = rect.width - self._BORDER_DEFAULT - (self.props.margin * 2)
+        height = Gdk.Screen.height() - self._BORDER_DEFAULT - \
+            (self.props.margin * 5)
+
+        cr.move_to(x + self._radius, y)
+        cr.arc(x + width - self._radius, y + self._radius,
+               self._radius, math.pi * 1.5, math.pi * 2)
+        cr.arc(x + width - self._radius, y + height - self._radius,
+               self._radius, 0, math.pi * 0.5)
+        cr.arc(x + self._radius, y + height - self._radius,
+               self._radius, math.pi * 0.5, math.pi)
+        cr.arc(x + self._radius, y + self._radius, self._radius,
+               math.pi, math.pi * 1.5)
+        cr.close_path()
+
+        if self.background_color is not None:
+            r, g, b, __ = self.background_color.get_rgba()
+            cr.set_source_rgb(r, g, b)
+            cr.fill_preserve()
+
+        if self.border_color is not None:
+            r, g, b, __ = self.border_color.get_rgba()
+            cr.set_source_rgb(r, g, b)
+            cr.set_line_width(self.border)
+            cr.stroke()