From b669d70758a42ff2c6d9a5578ac8cecc769878ed Mon Sep 17 00:00:00 2001 From: Benjamin Berg Date: Tue, 13 Jan 2009 16:48:06 +0100 Subject: [PATCH] Add a colorpicker to Sugar. Only the ColorToolButton is public for now. --- src/sugar/graphics/Makefile.am | 1 + src/sugar/graphics/colorbutton.py | 524 ++++++++++++++++++++++++++++++ 2 files changed, 525 insertions(+) create mode 100644 src/sugar/graphics/colorbutton.py diff --git a/src/sugar/graphics/Makefile.am b/src/sugar/graphics/Makefile.am index 0a3a8467..3f147b4d 100644 --- a/src/sugar/graphics/Makefile.am +++ b/src/sugar/graphics/Makefile.am @@ -4,6 +4,7 @@ sugar_PYTHON = \ alert.py \ animator.py \ combobox.py \ + colorbutton.py \ entry.py \ icon.py \ iconentry.py \ diff --git a/src/sugar/graphics/colorbutton.py b/src/sugar/graphics/colorbutton.py new file mode 100644 index 00000000..6fac4046 --- /dev/null +++ b/src/sugar/graphics/colorbutton.py @@ -0,0 +1,524 @@ +# Copyright (C) 2007, Red Hat, Inc. +# Copyright (C) 2008, Benjamin Berg +# +# This library is free software; you can redistribute it and/or +# modify it under the terms of the GNU Lesser General Public +# License as published by the Free Software Foundation; either +# version 2 of the License, or (at your option) any later version. +# +# This library 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 +# Lesser General Public License for more details. +# +# You should have received a copy of the GNU Lesser General Public +# License along with this library; if not, write to the +# Free Software Foundation, Inc., 59 Temple Place - Suite 330, +# Boston, MA 02111-1307, USA. + +import gettext +import gtk +import gobject +import struct + +from sugar.graphics import style +from sugar.graphics.icon import Icon +from sugar.graphics.palette import Palette, ToolInvoker, WidgetInvoker + +_ = lambda msg: gettext.dgettext('sugar-toolkit', msg) + +def get_svg_color_string(color): + return '#%.2X%.2X%.2X' % (color.red / 257, color.green / 257, color.blue / 257) + +class _ColorButton(gtk.Button): + """This is a ColorButton for Sugar. It is similar to the gtk.ColorButton, + but does not have any alpha support. + Instead of a color selector dialog it will pop up a Sugar palette. + + As a preview an sugar.graphics.Icon is used. The fill color will be set to + the current color, and the stroke color is set to the font color. + """ + + __gtype_name__ = 'SugarColorButton' + __gsignals__ = { 'color-set' : (gobject.SIGNAL_RUN_FIRST, gobject.TYPE_NONE, + tuple())} + + def __init__(self, **kwargs): + self._title = _('Choose a color') + self._color = gtk.gdk.Color(0, 0, 0) + self._has_palette = True + self._has_invoker = True + self._palette = None + self._accept_drag = True + + self._preview = Icon(icon_name='color-preview', + icon_size=gtk.ICON_SIZE_BUTTON) + + gobject.GObject.__init__(self, **kwargs) + + if self._accept_drag: + self.drag_dest_set(gtk.DEST_DEFAULT_MOTION | + gtk.DEST_DEFAULT_HIGHLIGHT | + gtk.DEST_DEFAULT_DROP, + [('application/x-color', 0, 0)], + gtk.gdk.ACTION_COPY) + self.drag_source_set(gtk.gdk.BUTTON1_MASK | gtk.gdk.BUTTON3_MASK, + [('application/x-color', 0, 0)], + gtk.gdk.ACTION_COPY) + self.connect('drag_data_received', self.__drag_data_received_cb) + self.connect('drag_data_get', self.__drag_data_get_cb) + + self._preview.fill_color = get_svg_color_string(self._color) + self._preview.stroke_color = \ + get_svg_color_string(self.style.fg[gtk.STATE_NORMAL]) + self.set_image(self._preview) + + if self._has_palette and self._has_invoker: + self._invoker = WidgetInvoker(self) + # FIXME: This is a hack. + self._invoker.has_rectangle_gap = lambda : False + self._invoker.palette = self._palette + + def create_palette(self): + if self._has_palette: + self._palette = _ColorPalette(color=self._color, + primary_text=self._title) + self._palette.connect('color-set', self.__palette_color_set_cb) + self._palette.connect('notify::color', self.__palette_color_changed) + + return self._palette + + def __palette_color_set_cb(self, palette): + self.emit('color-set') + + def __palette_color_changed(self, palette, pspec): + self.color = self._palette.color + + def do_style_set(self, previous_style): + self._preview.stroke_color = \ + get_svg_color_string(self.style.fg[gtk.STATE_NORMAL]) + + def do_clicked(self): + if self._palette: + self._palette.popup(immediate=True) + + def set_color(self, color): + assert isinstance(color, gtk.gdk.Color) + + if self._color.red == color.red and \ + self._color.green == color.green and \ + self._color.blue == color.blue: + return + + self._color = gtk.gdk.Color(color.red, color.green, color.blue) + self._preview.fill_color = get_svg_color_string(self._color) + if self._palette: + self._palette.props.color = self._color + self.notify('color') + + def get_color(self): + return self._color + + color = gobject.property(type=object, getter=get_color, setter=set_color) + + def set_icon_name(self, icon_name): + self._preview.props.icon_name = icon_name + + def get_icon_name(self): + return self._preview.props.icon_name + + icon_name = gobject.property(type=str, + getter=get_icon_name, setter=set_icon_name) + + def set_icon_size(self, icon_size): + self._preview.props.icon_size = icon_size + + def get_icon_size(self): + return self._preview.props.icon_size + + icon_size = gobject.property(type=int, + getter=get_icon_size, setter=set_icon_size) + + def set_title(self, title): + self._title = title + if self._palette: + self._palette.primary_text = self._title + + def get_title(self): + return self._title + + title = gobject.property(type=str, getter=get_title, setter=set_title) + + def _set_has_invoker(self, has_invoker): + self._has_invoker = has_invoker + + def _get_has_invoker(self): + return self._has_invoker + + has_invoker = gobject.property(type=bool, default=True, + flags=gobject.PARAM_READWRITE | + gobject.PARAM_CONSTRUCT_ONLY, + getter=_get_has_invoker, + setter=_set_has_invoker) + + def _set_has_palette(self, has_palette): + self._has_palette = has_palette + + def _get_has_palette(self): + return self._has_palette + + has_palette = gobject.property(type=bool, default=True, + flags=gobject.PARAM_READWRITE | + gobject.PARAM_CONSTRUCT_ONLY, + getter=_get_has_palette, + setter=_set_has_palette) + + def _set_accept_drag(self, accept_drag): + self._accept_drag = accept_drag + + def _get_accept_drag(self): + return self._accept_drag + + accept_drag = gobject.property(type=bool, default=True, + flags=gobject.PARAM_READWRITE | + gobject.PARAM_CONSTRUCT_ONLY, + getter=_get_accept_drag, + setter=_set_accept_drag) + + # Drag and Drop + def __drag_begin_cb(self, widget, context): + pixbuf = gtk.gdk.Pixbuf(gtk.gdk.COLORSPACE_RGB, TRUE, 8, + style.SMALL_ICON_SIZE, + style.SMALL_ICON_SIZE) + + red = self._color.red / 257 + green = self._color.green / 257 + blue = self._color.blue / 257 + + pixbuf.fill(red << 24 + green << 16 + blue << 8 + 0xff) + + context.set_icon_pixbuf(pixbuf) + + def __drag_data_get_cb(self, widget, context, selection_data, info, time): + data = struct.pack('=HHHH', self._color.red, self._color.green, + self._color.blue, 65535) + selection_data.set(selection_data.target, 16, data) + + def __drag_data_received_cb(self, widget, context, x, y, selection_data, \ + info, time): + if len(selection_data.data) != 8: + return + + dropped = selection_data.data + red = struct.unpack_from('=H', dropped, 0)[0] + green = struct.unpack_from('=H', dropped, 2)[0] + blue = struct.unpack_from('=H', dropped, 4)[0] + # dropped[6] and dropped[7] is alpha, but we ignore the alpha channel + + color = gtk.gdk.Color(red, green, blue) + self.set_color(color) + + +class _ColorPalette(Palette): + """This is a color picker palette. It will usually be used indirectly + trough a sugar.graphics.ColorButton. + """ + _RED = 0 + _GREEN = 1 + _BLUE = 2 + + __gtype_name__ = 'SugarColorPalette' + # The color-set signal is emitted when the user is finished selecting + # a color. + __gsignals__ = { 'color-set' : (gobject.SIGNAL_RUN_FIRST, gobject.TYPE_NONE, + tuple())} + + def __init__(self, **kwargs): + self._color = gtk.gdk.Color(0, 0, 0) + self._previous_color = self._color.copy() + self._scales = None + + Palette.__init__(self, **kwargs) + + self.connect('popup', self.__popup_cb) + self.connect('popdown', self.__popdown_cb) + + self._picker_hbox = gtk.HBox() + self.set_content(self._picker_hbox) + + self._swatch_tray = gtk.Table() + + self._picker_hbox.pack_start(self._swatch_tray) + self._picker_hbox.pack_start(gtk.VSeparator(), + padding=style.DEFAULT_SPACING) + + self._chooser_table = gtk.Table(3, 2) + self._chooser_table.set_col_spacing(0, style.DEFAULT_PADDING) + + self._scales = [] + self._scales.append( + self._create_color_scale(_('Red'), self._RED, 0)) + self._scales.append( + self._create_color_scale(_('Green'), self._GREEN, 1)) + self._scales.append( + self._create_color_scale(_('Blue'), self._BLUE, 2)) + + self._picker_hbox.add(self._chooser_table) + + self._picker_hbox.show_all() + + self._build_swatches() + + def _create_color_scale(self, text, color, row): + label = gtk.Label(text) + label.props.xalign = 1.0 + scale = gtk.HScale() + scale.set_size_request(style.zoom(250), -1) + scale.set_draw_value(False) + scale.set_range(0, 1.0) + scale.set_increments(0.1, 0.2) + + if color == self._RED: + scale.set_value(self._color.red / 65535.0) + elif color == self._GREEN: + scale.set_value(self._color.green / 65535.0) + elif color == self._BLUE: + scale.set_value(self._color.blue / 65535.0) + + scale.connect('value-changed', + self.__scale_value_changed_cb, + color) + self._chooser_table.attach(label, 0, 1, row, row + 1) + self._chooser_table.attach(scale, 1, 2, row, row + 1) + + return scale + + + + def _build_swatches(self): + for child in self._swatch_tray.get_children(): + child.destroy() + + # Use a hardcoded list of colors for now. + colors = ['#ed2529', '#69bc47', '#3c54a3', + '#f57f25', '#0b6b3a', '#00a0c6', + '#f6eb1a', '#b93f94', '#5b4a9c', + '#000000', '#919496', '#ffffff'] + + # We want 3 rows of colors. + rows = 3 + i = 0 + self._swatch_tray.props.n_rows = rows + self._swatch_tray.props.n_columns = (len(colors) + rows - 1) / rows + for color in colors: + button = _ColorButton(has_palette=False, + color=gtk.gdk.color_parse(color), + accept_drag=False, + icon_size=gtk.ICON_SIZE_LARGE_TOOLBAR) + button.set_relief(gtk.RELIEF_NONE) + self._swatch_tray.attach(button, + i % rows, i % rows + 1, + i / rows, i / rows + 1, + yoptions=0, xoptions=0) + button.connect('clicked', self.__swatch_button_clicked_cb) + i += 1 + + self._swatch_tray.show_all() + + def __popup_cb(self, palette): + self._previous_color = self._color.copy() + + def __popdown_cb(self, palette): + self.emit('color-set') + + def __scale_value_changed_cb(self, widget, color): + new_color = self._color.copy() + if color == self._RED: + new_color.red = int(65535 * widget.get_value()) + elif color == self._GREEN: + new_color.green = int(65535 * widget.get_value()) + elif color == self._BLUE: + new_color.blue = int(65535 * widget.get_value()) + self.color = new_color + + def do_key_press_event(self, event): + if event.keyval == gtk.keysyms.Escape: + self.props.color = self._previous_color + self.popdown(immediate=True) + return True + elif event.keyval == gtk.keysyms.Return: + self.popdown(immediate=True) + return True + return False + + def __swatch_button_clicked_cb(self, button): + self.props.color = button.get_color() + + def set_color(self, color): + assert isinstance(color, gtk.gdk.Color) + + if self._color.red == color.red and \ + self._color.green == color.green and \ + self._color.blue == color.blue: + return + + self._color = color.copy() + + if self._scales: + self._scales[self._RED].set_value(self._color.red / 65535.0) + self._scales[self._GREEN].set_value(self._color.green / 65535.0) + self._scales[self._BLUE].set_value(self._color.blue / 65535.0) + + self.notify('color') + + def get_color(self): + return self._color + + color = gobject.property(type=object, getter=get_color, setter=set_color) + + + +def _add_accelerator(tool_button): + if not tool_button.props.accelerator or not tool_button.get_toplevel() or \ + not tool_button.child: + return + + # TODO: should we remove the accelerator from the prev top level? + + accel_group = tool_button.get_toplevel().get_data('sugar-accel-group') + if not accel_group: + logging.warning('No gtk.AccelGroup in the top level window.') + return + + keyval, mask = gtk.accelerator_parse(tool_button.props.accelerator) + # the accelerator needs to be set at the child, so the gtk.AccelLabel + # in the palette can pick it up. + tool_button.child.add_accelerator('clicked', accel_group, keyval, mask, + gtk.ACCEL_LOCKED | gtk.ACCEL_VISIBLE) + +def _hierarchy_changed_cb(tool_button, previous_toplevel): + _add_accelerator(tool_button) + +def setup_accelerator(tool_button): + _add_accelerator(tool_button) + tool_button.connect('hierarchy-changed', _hierarchy_changed_cb) + +# This not ideal. It would be better to subclass gtk.ToolButton, however +# the python bindings do not seem to be powerfull enough for that. +# (As we need to change a variable in the class structure.) +class ColorToolButton(gtk.ToolItem): + __gtype_name__ = 'SugarColorToolButton' + __gsignals__ = { 'color-set' : (gobject.SIGNAL_RUN_FIRST, gobject.TYPE_NONE, + tuple())} + + def __init__(self, icon_name='color-preview', **kwargs): + self._accelerator = None + self._tooltip = None + self._palette_invoker = ToolInvoker() + self._palette = None + + gobject.GObject.__init__(self, **kwargs) + + # The gtk.ToolButton has already added a normal button. + # Replace it with a ColorButton + color_button = _ColorButton(icon_name=icon_name, has_invoker=False) + self.add(color_button) + + # The following is so that the behaviour on the toolbar is correct. + color_button.set_relief(gtk.RELIEF_NONE) + color_button.icon_size = gtk.ICON_SIZE_LARGE_TOOLBAR + + self._palette_invoker.attach_tool(self) + + # This widget just proxies the following properties to the colorbutton + color_button.connect('notify::color', self.__notify_change) + color_button.connect('notify::icon-name', self.__notify_change) + color_button.connect('notify::icon-size', self.__notify_change) + color_button.connect('notify::title', self.__notify_change) + color_button.connect('color-set', self.__color_set_cb) + color_button.connect('can-activate-accel', + self.__button_can_activate_accel_cb) + + def __button_can_activate_accel_cb(self, button, signal_id): + # Accept activation via accelerators regardless of this widget's state + return True + + def set_accelerator(self, accelerator): + self._accelerator = accelerator + setup_accelerator(self) + + def get_accelerator(self): + return self._accelerator + + accelerator = gobject.property(type=str, setter=set_accelerator, + getter=get_accelerator) + + def create_palette(self): + self._palette = self.get_child().create_palette() + return self._palette + + def get_palette_invoker(self): + return self._palette_invoker + + def set_palette_invoker(self, palette_invoker): + self._palette_invoker.detach() + self._palette_invoker = palette_invoker + + palette_invoker = gobject.property( + type=object, setter=set_palette_invoker, getter=get_palette_invoker) + + def set_color(self, color): + self.get_child().props.color = color + + def get_color(self): + return self.get_child().props.color + + color = gobject.property(type=object, getter=get_color, setter=set_color) + + def set_icon_name(self, icon_name): + self.get_child().props.icon_name = icon_name + + def get_icon_name(self): + return self.get_child().props.icon_name + + icon_name = gobject.property(type=str, + getter=get_icon_name, setter=set_icon_name) + + def set_icon_size(self, icon_size): + self.get_child().props.icon_size = icon_size + + def get_icon_size(self): + return self.get_child().props.icon_size + + icon_size = gobject.property(type=int, + getter=get_icon_size, setter=set_icon_size) + + def set_title(self, title): + self.get_child().props.title = title + + def get_title(self): + return self.get_child().props.title + + title = gobject.property(type=str, getter=get_title, setter=set_title) + + def do_expose_event(self, event): + child = self.get_child() + allocation = self.get_allocation() + if self._palette and self._palette.is_up(): + invoker = self._palette.props.invoker + invoker.draw_rectangle(event, self._palette) + elif child.state == gtk.STATE_PRELIGHT: + child.style.paint_box(event.window, gtk.STATE_PRELIGHT, + gtk.SHADOW_NONE, event.area, + child, 'toolbutton-prelight', + allocation.x, allocation.y, + allocation.width, allocation.height) + + gtk.ToolButton.do_expose_event(self, event) + + def __notify_change(self, widget, pspec): + self.notify(pspec.name) + + def __color_set_cb(self, widget): + self.emit('color-set') +