Modify information box to show a array of texts

As the text as increased, modified the info box
to show a array of text, one by one.

The data was moved to a new data.py file. Only the information
off chimpanzees is updated.

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

2 files changed, 200 insertions, 54 deletions

diff --git a/activity.py b/activity.py
index d618546..c483b07 100644
--- a/activity.py
+++ b/activity.py
@@ -18,6 +18,7 @@
 # gst-launch-0.10 playbin2 uri=file:///.....
 
 import os
+import math
 
 from gi.repository import GObject
 from gi.repository import Gtk
@@ -43,48 +44,7 @@ from sugar3 import profile
 from sugar3.graphics.icon import EventIcon
 
 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': ''}
-           )
+from data import DAT_DIC
 
 MAP_PAGE = 0
 VIDEO_PAGE = 1
@@ -191,7 +151,7 @@ class MyEcoTvActivity(activity.Activity):
                 self._notebook.remove_page(-1)
 
             info_box = InformationBox(data['icon_name'], _('Did you know?'),
-                                      data['text'])
+                                      data['text_easy'])
             self._notebook.append_page(info_box, None)
             self.set_current_page(INFO_PAGE)
 
@@ -285,6 +245,11 @@ class VideoPlayer(Gtk.EventBox):
 class InformationBox(Gtk.EventBox):
 
     def __init__(self, icon_name, title, text):
+        """
+        icon_name: str
+        title: str
+        text: array of str
+        """
         Gtk.EventBox.__init__(self)
         self._width = Gdk.Screen.width()
         self._height = Gdk.Screen.height() - style.GRID_CELL_SIZE
@@ -303,31 +268,44 @@ class InformationBox(Gtk.EventBox):
 
         if style.zoom(100) == 100:
             # xo
-            font_size = 12
+            self._font_size = 12
         else:
             # desktop
-            font_size = 25
+            self._font_size = 25
+
+        self._order = 0
+        self._text = text
 
         title_label = Gtk.Label()
         title_label.set_markup(
-            '<span foreground="white" font="Sans %d">%s</span>' %
-            (font_size, title))
+            '<span foreground="white" font="Sans %d"><b>%s\n</b></span>' %
+            (self._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(
+        self.text_label = Gtk.Label()
+        self.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)
+            (self._font_size, text[self._order]))
+        self.text_label.set_alignment(0.0, 0.5)
+        self.text_label.set_line_wrap(True)
+        vbox.pack_start(self.text_label, False, False, 10)
         roundbox.add(vbox)
 
+        self._xo_color = profile.get_color()
+
         overlay = Gtk.Overlay()
         self.add(overlay)
         overlay.add(roundbox)
 
-        self._xo_color = profile.get_color()
+        if len(text) > 0:
+            text_changer = TextChanger(self._xo_color, len(text))
+            text_changer.connect('change-text', self.__change_text)
+            text_changer.props.halign = Gtk.Align.CENTER
+            text_changer.props.valign = Gtk.Align.START
+            text_changer.props.margin_top = self._height - \
+                (style.GRID_CELL_SIZE * 3.5)
+            overlay.add_overlay(text_changer)
+
         icon = EventIcon(icon_name='globe', xo_color=self._xo_color)
         icon.props.halign = Gtk.Align.START
         icon.props.valign = Gtk.Align.START
@@ -346,6 +324,101 @@ class InformationBox(Gtk.EventBox):
 
         self.show_all()
 
+    def __change_text(self, widget, order):
+        self._order = order
+        self.text_label.set_markup(
+            '<span foreground="white" font="Sans %d">%s</span>' %
+            (self._font_size, self._text[self._order]))
+
+
+class TextChanger(Gtk.HBox):
+
+    __gsignals__ = {
+        'change-text': (GObject.SignalFlags.RUN_FIRST, GObject.TYPE_NONE,
+                        ([int])), }
+
+    def __init__(self, xo_color, array_size):
+        Gtk.HBox.__init__(self)
+        self._xo_color = xo_color
+        self._array_size = array_size
+        self._order = 0
+
+        prev_bt = EventIcon(icon_name='go-previous-paired-grey',
+                            xo_color=self._xo_color)
+        prev_bt.connect('button-press-event', self.__prev_clicked_cb)
+        self.pack_start(prev_bt, False, False, 5)
+
+        self.sequence_view = SequenceView(array_size)
+        self.pack_start(self.sequence_view, False, False, 5)
+
+        next_bt = EventIcon(icon_name='go-next-paired-grey',
+                            xo_color=self._xo_color)
+        next_bt.connect('button-press-event', self.__next_clicked_cb)
+        self.pack_start(next_bt, False, False, 5)
+
+    def __prev_clicked_cb(self, icon, event):
+        if self._order == 0:
+            self._order = self._array_size - 1
+        else:
+            self._order = self._order - 1
+        self.sequence_view.set_value(self._order)
+        self.emit('change-text', self._order)
+
+    def __next_clicked_cb(self, icon, event):
+        if self._order < self._array_size - 1:
+            self._order = self._order + 1
+        else:
+            self._order = 0
+        self.sequence_view.set_value(self._order)
+        self.emit('change-text', self._order)
+
+
+class SequenceView(Gtk.DrawingArea):
+
+    def __init__(self, cant, point_size=10):
+        Gtk.DrawingArea.__init__(self)
+        self._cant = cant
+        self._value = 0
+        self._point_size = point_size
+        logging.error('init SequenceView cant= %d', self._cant)
+        self.set_size_request(self._point_size * self._cant * 2,
+                              self._point_size)
+        self.connect('draw', self.__draw_cb)
+
+        def size_allocate_cb(widget, allocation):
+            self._width, self._height = allocation.width, allocation.height
+            self.disconnect(self._setup_handle)
+
+        self._setup_handle = self.connect('size_allocate',
+                                          size_allocate_cb)
+
+    def set_value(self, value):
+        self._value = value
+        self.queue_draw()
+
+    def __draw_cb(self, widget, ctx):
+        if self._cant == 0:
+            return
+
+        ctx.save()
+        radio = self._point_size / 2.0
+        ctx.translate(0, 0)
+        #ctx.rectangle(0, 0, self._width, self._height)
+        #ctx.set_source_rgb(1.0, 1.0, 1.0)
+        #ctx.fill()
+        ctx.translate(radio, self._height / 2 - radio)
+        for n in range(self._cant):
+            if n == self._value:
+                ctx.set_source_rgb(0.913, 0.733, 0.0)  # eebb00
+            else:
+                ctx.set_source_rgb(0.33, 0.33, 0.33)  # grey
+
+            ctx.arc(radio, radio, radio, 0., 2 * math.pi)
+            ctx.fill()
+
+            ctx.translate(self._point_size * 2, 0)
+        ctx.restore()
+
 
 class WorldMap(Gtk.EventBox):
 
diff --git a/data.py b/data.py
new file mode 100644
index 0000000..27fddf8
--- /dev/null
+++ b/data.py
@@ -0,0 +1,73 @@
+# This file have data to display
+from gettext import gettext as _
+
+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_easy': [
+                _('Chimpanzees are great apes that live in western and '
+                  'central Africa.'),
+                _('Chimpanzees have very long arms. Chimpanzees can hold '
+                  'things with their hands and with their feet.'),
+                _('Chimpanzees eat plants and meat. They are very clever '
+                  'animals. They often use tools to get food or to scare away '
+                  'other animals.'),
+                _('They live in groups. Each night they curl up in sleeping '
+                  'nests in trees.'),
+                _('Chimpanzees live about 40 years in the forest.'),
+                _('Chimpanzees are very noisy creatures.')],
+            'text_middle': [
+                _('Chimpanzees are great apes that live in western and '
+                  'central Africa. They are under threat from deforestation, '
+                  'human diseases and hunting as a food source.'),
+                _('Chimpanzees are covered in hair and have very long arms '
+                  'and can hold things with their hands as well as holding '
+                  'things with their feet.'),
+                _('Chimpanzees eat plants and meat. They are a very clever '
+                  'animal and are able to plan a course of action, such as '
+                  'using a stick to gather termites to eat. They also use '
+                  'tools to scare away other animals.'),
+                _('They live in community groups with each group having a '
+                  'leader. Each night they curl up in sleeping nests in '
+                  'trees.'),
+                _('Chimpanzees live about 40 years in the forest. It is '
+                  'estimated that there are 250000 chimpanzees in the wild '
+                  'at present.'),
+                _('Chimpanzees are very noisy creatures. Their danger call '
+                  'can be heard for several kilometres in the jungle or in '
+                  'the forest.')]
+            },
+           {'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': ''}
+           )