diff options
Diffstat (limited to 'tutorius/viewer.py')
-rw-r--r-- | tutorius/viewer.py | 423 |
1 files changed, 423 insertions, 0 deletions
diff --git a/tutorius/viewer.py b/tutorius/viewer.py new file mode 100644 index 0000000..272558e --- /dev/null +++ b/tutorius/viewer.py @@ -0,0 +1,423 @@ +# Copyright (C) 2009, Tutorius.org +# +# This program is free software; you can redistribute it and/or modify +# it under the terms of the GNU General Public License as published by +# the Free Software Foundation; either version 2 of the License, or +# (at your option) any later version. +# +# This program is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU General Public License for more details. +# +# You should have received a copy of the GNU General Public License +# along with this program; if not, write to the Free Software +# Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA +""" +This module renders a widget containing a graphical representation +of a tutorial and acts as a creator proxy as it has some editing +functionality. +""" +import sys + +import gtk, gtk.gdk +import cairo +from math import pi as PI +PI2 = PI/2 + +import rsvg + +from sugar.bundle import activitybundle +from sugar.tutorius import addon +from sugar.graphics import icon +from sugar.tutorius.filters import EventFilter +from sugar.tutorius.actions import Action +import os + +# FIXME ideally, apps scale correctly and we should use proportional positions +X_WIDTH = 800 +X_HEIGHT = 600 +ACTION_WIDTH = 100 +ACTION_HEIGHT = 70 + +# block look +BLOCK_PADDING = 5 +BLOCK_WIDTH = 100 +BLOCK_CORNERS = 10 +BLOCK_INNER_PAD = 10 + +SNAP_WIDTH = BLOCK_WIDTH - BLOCK_PADDING - BLOCK_INNER_PAD*2 +SNAP_HEIGHT = SNAP_WIDTH*X_HEIGHT/X_WIDTH +SNAP_SCALE = float(SNAP_WIDTH)/X_WIDTH + +class Viewer(object): + """ + Renders a tutorial as a sequence of blocks, each block representing either + an action or an event (transition). + + Current Viewer implementation lacks viewport management; + having many objects in a tutorial will not render properly. + """ + def __init__(self, tutorial, creator): + super(Viewer, self).__init__() + + self._tutorial = tutorial + self._creator = creator + self.alloc = None + self.click_pos = None + self.drag_pos = None + self.selection = [] + + self.win = gtk.Window(gtk.WINDOW_TOPLEVEL) + self.win.set_size_request(400, 200) + self.win.set_gravity(gtk.gdk.GRAVITY_SOUTH_WEST) + self.win.show() + self.win.set_deletable(False) + self.win.move(0, 0) + + vbox = gtk.ScrolledWindow() + self.win.add(vbox) + + canvas = gtk.DrawingArea() + vbox.add_with_viewport(canvas) + canvas.set_app_paintable(True) + canvas.connect_after("expose-event", self.on_viewer_expose, tutorial._states) + canvas.add_events(gtk.gdk.BUTTON_PRESS_MASK \ + |gtk.gdk.BUTTON_MOTION_MASK \ + |gtk.gdk.BUTTON_RELEASE_MASK \ + |gtk.gdk.KEY_PRESS_MASK) + canvas.connect('button-press-event', self._on_click) + # drag-select disabled, for now + #canvas.connect('motion-notify-event', self._on_drag) + canvas.connect('button-release-event', self._on_drag_end) + canvas.connect('key-press-event', self._on_key_press) + + canvas.set_flags(gtk.HAS_FOCUS|gtk.CAN_FOCUS) + canvas.grab_focus() + + self.win.show_all() + canvas.set_size_request(2048, 180) # FIXME + + def destroy(self): + self.win.destroy() + + + def _paint_state(self, ctx, states): + """ + Paints a tutorius fsm state in a cairo context. + Final context state will be shifted by the size of the graphics. + """ + block_width = BLOCK_WIDTH - BLOCK_PADDING + block_max_height = self.alloc.height + + new_insert_point = None + cur_state = 'INIT' + + # FIXME: get app when we have a model that supports it + cur_app = 'Calculate' + app_start = ctx.get_matrix() + try: + state = states[cur_state] + except KeyError: + state = None + + while state: + new_app = 'Calculate' + if new_app != cur_app: + ctx.save() + ctx.set_matrix(app_start) + self._render_app_hints(ctx, cur_app) + ctx.restore() + app_start = ctx.get_matrix() + ctx.translate(BLOCK_PADDING, 0) + cur_app = new_app + + action_list = state.get_action_list() + if action_list: + local_height = (block_max_height - BLOCK_PADDING)/len(action_list) - BLOCK_PADDING + ctx.save() + for action in action_list: + origin = tuple(ctx.get_matrix())[-2:] + if self.click_pos and \ + self.click_pos[0]-BLOCK_WIDTH<origin[0] and \ + self.drag_pos[0]>origin[0]: + self.selection.append(action) + self.render_action(ctx, block_width, local_height, action) + ctx.translate(0, local_height+BLOCK_PADDING) + + ctx.restore() + ctx.translate(BLOCK_WIDTH, 0) + + # insertion cursor painting made from two opposed triangles + # joined by a line. + if state.name == self._creator.get_insertion_point(): + ctx.save() + bp2 = BLOCK_PADDING/2 + ctx.move_to(-bp2, 0) + ctx.line_to(-BLOCK_PADDING-bp2, -BLOCK_PADDING) + ctx.line_to(bp2, -BLOCK_PADDING) + ctx.line_to(-bp2, 0) + + ctx.line_to(-bp2, block_max_height-2*BLOCK_PADDING) + ctx.line_to(bp2, block_max_height-BLOCK_PADDING) + ctx.line_to(-BLOCK_PADDING-bp2, block_max_height-BLOCK_PADDING) + ctx.line_to(-bp2, block_max_height-2*BLOCK_PADDING) + + ctx.line_to(-bp2, BLOCK_PADDING) + ctx.set_source_rgb(1.0, 1.0, 0.0) + ctx.stroke_preserve() + ctx.fill() + ctx.restore() + + + event_list = state.get_event_filter_list() + if event_list: + local_height = (block_max_height - BLOCK_PADDING)/len(event_list) - BLOCK_PADDING + ctx.save() + for event, next_state in event_list: + origin = tuple(ctx.get_matrix())[-2:] + if self.click_pos and \ + self.click_pos[0]-BLOCK_WIDTH<origin[0] and \ + self.drag_pos[0]>origin[0]: + self.selection.append(event) + self.render_event(ctx, block_width, local_height, event) + ctx.translate(0, local_height+BLOCK_PADDING) + + ctx.restore() + ctx.translate(BLOCK_WIDTH, 0) + + # FIXME point to next state in state, as it would highlight + # the "happy path". + cur_state = event_list[0][1] + + if (not new_insert_point) and self.click_pos: + origin = tuple(ctx.get_matrix())[-2:] + if self.click_pos[0]<origin[0]: + new_insert_point = state + + if event_list: + try: + state = states[cur_state] + except KeyError: + break + yield True + else: + break + + ctx.set_matrix(app_start) + self._render_app_hints(ctx, cur_app) + + if self.click_pos: + if not new_insert_point: + new_insert_point = state + + self._creator.set_insertion_point(new_insert_point.name) + + yield False + + def _render_snapshot(self, ctx, elem): + """ + Render the "simplified screenshot-like" representation of elements positions. + """ + ctx.set_source_rgba(1.0, 1.0, 1.0, 0.5) + ctx.rectangle(0, 0, SNAP_WIDTH, SNAP_HEIGHT) + ctx.fill_preserve() + ctx.stroke() + + if hasattr(elem, 'position'): + pos = elem.position + # FIXME this size approximation is fine, but I believe we could + # do better. + ctx.scale(SNAP_SCALE, SNAP_SCALE) + ctx.rectangle(pos[0], pos[1], ACTION_WIDTH, ACTION_HEIGHT) + ctx.fill_preserve() + ctx.stroke() + + def _render_app_hints(self, ctx, appname): + """ + Fetches the icon of the app related to current states and renders it on a + separator, between states. + """ + ctx.set_source_rgb(0.0, 0.0, 0.0) + ctx.set_dash((1,1,0,0), 1) + ctx.move_to(0, 0) + ctx.line_to(0, self.alloc.height) + ctx.stroke() + ctx.set_dash(tuple(), 1) + + bundle_path = os.getenv("SUGAR_BUNDLE_PATH") + if bundle_path: + icon_path = activitybundle.ActivityBundle(bundle_path).get_icon() + icon = rsvg.Handle(icon_path) + ctx.save() + ctx.translate(-15, 0) + ctx.scale(0.5, 0.5) + icon_surf = icon.render_cairo(ctx) + ctx.restore() + + + def render_action(self, ctx, width, height, action): + """ + Renders the action block, along with the icon of the action tool. + """ + ctx.save() + inner_width = width-(BLOCK_CORNERS<<1) + inner_height = height-(BLOCK_CORNERS<<1) + + paint_border = ctx.rel_line_to + filling = cairo.LinearGradient(0, 0, 0, inner_height) + if action not in self.selection: + filling.add_color_stop_rgb(0.0, 0.7, 0.7, 1.0) + filling.add_color_stop_rgb(1.0, 0.1, 0.1, 0.8) + else: + filling.add_color_stop_rgb(0.0, 0.4, 0.4, 0.8) + filling.add_color_stop_rgb(1.0, 0.0, 0.0, 0.5) + tracing = cairo.LinearGradient(0, 0, 0, inner_height) + tracing.add_color_stop_rgb(0.0, 1.0, 1.0, 1.0) + tracing.add_color_stop_rgb(1.0, 0.2, 0.2, 0.2) + + ctx.move_to(BLOCK_CORNERS, 0) + paint_border(inner_width, 0) + ctx.arc(inner_width+BLOCK_CORNERS, BLOCK_CORNERS, BLOCK_CORNERS, -PI2, 0.0) + ctx.arc(inner_width+BLOCK_CORNERS, inner_height+BLOCK_CORNERS, BLOCK_CORNERS, 0.0, PI2) + ctx.arc(BLOCK_CORNERS, inner_height+BLOCK_CORNERS, BLOCK_CORNERS, PI2, PI) + ctx.arc(BLOCK_CORNERS, BLOCK_CORNERS, BLOCK_CORNERS, -PI, -PI2) + + ctx.set_source(tracing) + ctx.stroke_preserve() + ctx.set_source(filling) + ctx.fill() + + addon_name = addon.get_name_from_type(type(action)) + # TODO use icon pool + icon_name = addon.get_addon_meta(addon_name)['icon'] + rsvg_icon = rsvg.Handle(icon.get_icon_file_name(icon_name)) + ctx.save() + ctx.translate(BLOCK_INNER_PAD, BLOCK_INNER_PAD) + ctx.scale(0.5, 0.5) + icon_surf = rsvg_icon.render_cairo(ctx) + + ctx.restore() + + ctx.translate(BLOCK_INNER_PAD, (height-SNAP_HEIGHT)/2) + self._render_snapshot(ctx, action) + + ctx.restore() + + def render_event(self, ctx, width, height, event): + """ + Renders the action block, along with the icon of the action tool. + """ + ctx.save() + inner_width = width-(BLOCK_CORNERS<<1) + inner_height = height-(BLOCK_CORNERS<<1) + + filling = cairo.LinearGradient(0, 0, 0, inner_height) + if event not in self.selection: + filling.add_color_stop_rgb(0.0, 1.0, 0.8, 0.6) + filling.add_color_stop_rgb(1.0, 1.0, 0.6, 0.2) + else: + filling.add_color_stop_rgb(0.0, 0.8, 0.6, 0.4) + filling.add_color_stop_rgb(1.0, 0.6, 0.4, 0.1) + tracing = cairo.LinearGradient(0, 0, 0, inner_height) + tracing.add_color_stop_rgb(0.0, 1.0, 1.0, 1.0) + tracing.add_color_stop_rgb(1.0, 0.3, 0.3, 0.3) + + ctx.move_to(BLOCK_CORNERS, 0) + ctx.rel_line_to(inner_width, 0) + ctx.rel_line_to(BLOCK_CORNERS, BLOCK_CORNERS) + ctx.rel_line_to(0, inner_height) + ctx.rel_line_to(-BLOCK_CORNERS, BLOCK_CORNERS) + ctx.rel_line_to(-inner_width, 0) + ctx.rel_line_to(-BLOCK_CORNERS, -BLOCK_CORNERS) + ctx.rel_line_to(0, -inner_height) + ctx.close_path() + + ctx.set_source(tracing) + ctx.stroke_preserve() + ctx.set_source(filling) + ctx.fill() + + addon_name = addon.get_name_from_type(type(event)) + # TODO use icon pool + icon_name = addon.get_addon_meta(addon_name)['icon'] + rsvg_icon = rsvg.Handle(icon.get_icon_file_name(icon_name)) + ctx.save() + ctx.translate(BLOCK_INNER_PAD, BLOCK_INNER_PAD) + ctx.scale(0.5, 0.5) + icon_surf = rsvg_icon.render_cairo(ctx) + + ctx.restore() + + ctx.translate(BLOCK_INNER_PAD, (height-SNAP_HEIGHT)/2) + self._render_snapshot(ctx, event) + + ctx.restore() + + def on_viewer_expose(self, widget, evt, states): + """ + Expose signal handler for the viewer's DrawingArea. + This loops through states and renders every action and transition of + the "happy path". + + @param widget: the gtk.DrawingArea on which to draw + @param evt: the gtk.gdk.Event containing an "expose" event + @param states: a tutorius FiniteStateMachine object to paint + """ + ctx = widget.window.cairo_create() + self.alloc = widget.get_allocation() + ctx.set_source_pixmap(widget.window, + widget.allocation.x, + widget.allocation.y) + + # draw no more than our expose event intersects our child + region = gtk.gdk.region_rectangle(widget.allocation) + r = gtk.gdk.region_rectangle(evt.area) + region.intersect(r) + ctx.region (region) + ctx.clip() + ctx.paint() + + ctx.translate(BLOCK_PADDING, BLOCK_PADDING) + + painter = self._paint_state(ctx, states) + while painter.next(): pass + + if self.click_pos and self.drag_pos: + ctx.set_matrix(cairo.Matrix()) + ctx.rectangle(self.click_pos[0], self.click_pos[1], + self.drag_pos[0]-self.click_pos[0], + self.drag_pos[1]-self.click_pos[1]) + ctx.set_source_rgba(0, 0, 1, 0.5) + ctx.fill_preserve() + ctx.stroke() + + return False + + def _on_click(self, widget, evt): + # the rendering pipeline will work out the click validation process + self.drag_pos = None + self.drag_pos = self.click_pos = evt.get_coords() + widget.queue_draw() + + self.selection = [] + + def _on_drag(self, widget, evt): + self.drag_pos = evt.get_coords() + widget.queue_draw() + + def _on_drag_end(self, widget, evt): + self.click_pos = self.drag_pos = None + widget.queue_draw() + + def _on_key_press(self, widget, evt): + if evt.keyval == gtk.keysyms.BackSpace: + # remove selection + for selected in self.selection: + if isinstance(selected, EventFilter): + self._creator.delete_state() + else: + self._creator.delete_action(selected) + widget.queue_draw() + + |