Extend button editor to allow dynamically changing button image

traitsui/editors/button_editor.py

@@ -50,6 +50,9 @@ class ToolkitEditorFactory(EditorFactory):
     # (Optional) Image to display on the button
     image = Image
 
+    # The name of the external object trait that the button image is synced to
+    image_value = Str()
+
     # Extra padding to add to both the left and the right sides
     width_padding = Range(0, 31, 7)
 

traitsui/examples/demo/Advanced/Dynamically_changing_buttons_demo.py

@@ -0,0 +1,88 @@
+# (C) Copyright 2004-2021 Enthought, Inc., Austin, TX
+# All rights reserved.
+#
+# This software is provided without warranty under the terms of the BSD
+# license included in LICENSE.txt and may be redistributed only under
+# the conditions described in the aforementioned license. The license
+# is also available online at http://www.enthought.com/licenses/BSD.txt
+#
+# Thanks for using Enthought open source!
+
+"""
+This demo shows how to dynamically change the label or image of a button. Note
+in this demo clicking the button itself does nothing.
+
+Please refer to the `ButtonEditor API docs`_ for further information.
+
+.. _ButtonEditor API docs: https://docs.enthought.com/traitsui/api/traitsui.editors.button_editor.html#traitsui.editors.button_editor.ButtonEditor
+"""
+from pyface.api import Image, ImageResource
+from traits.api import Button, Enum, HasTraits, Instance, List, Str
+
+from traitsui.api import (
+    ButtonEditor,
+    Group,
+    ImageEditor,
+    InstanceChoice,
+    InstanceEditor,
+    Item,
+    UItem,
+    View
+) 
+
+
+class ImageChoice(InstanceChoice):
+    def get_view(self):
+        return View(
+            UItem('name', editor=ImageEditor(image=self.object))
+        )
+
+
+class ButtonEditorDemo(HasTraits):
+    my_button = Button()
+
+    my_button_label = Str("Initial Label")
+
+    my_button_image = Image()
+
+    my_button_image_options = List(
+        Image(),
+        value=[
+            ImageResource("run"),
+            ImageResource("previous"),
+            ImageResource("next"),
+            ImageResource("parent"),
+            ImageResource("reload")
+        ]
+    )
+
+    def _my_button_image_default(self):
+        return self.my_button_image_options[0]
+
+    traits_view = View(
+        Item(
+            "my_button",
+            style="custom",
+            editor=ButtonEditor(
+                label_value="my_button_label",
+                image_value="my_button_image",
+                orientation="horizontal"
+            )
+        ),
+        Item("my_button_label"),
+        Item(
+            "my_button_image",
+            editor=InstanceEditor(
+                name="my_button_image_options",
+                adapter=ImageChoice
+            ),
+            style="custom"
+        )
+    )
+
+# Create the demo:
+demo = ButtonEditorDemo()
+
+# Run the demo (if invoked from the command line):
+if __name__ == '__main__':
+    demo.configure_traits()

traitsui/examples/demo/Advanced/images/image_LICENSE.txt

@@ -0,0 +1,18 @@
+The icons are mostly derived work from other icons. As such they are
+licensed accordingly to the original license:
+
+Project                 License                   File
+----------------------------------------------------------------------------
+Nuvola                  LGPL                      image_LICENSE_Nuvola.txt
+
+Unless stated in this file, icons are the work of Enthought, and are
+released under a 3 clause BSD license.
+
+Files and orginal authors:
+----------------------------------------------------------------------------
+images:
+                           next.png | Nuvola
+                         parent.png | Nuvola
+                       previous.png | Nuvola
+                         reload.png | Nuvola
+                            run.png | Nuvola

traitsui/qt4/button_editor.py

@@ -25,8 +25,9 @@
 
 
 from pyface.qt import QtCore, QtGui
+from pyface.ui_traits import Image
 
-from traits.api import Str, List, Str, on_trait_change
+from traits.api import Str, List, Str, observe, on_trait_change
 
 # FIXME: ToolkitEditorFactory is a proxy class defined here just for backward
 # compatibility. The class has been moved to the
@@ -146,6 +147,8 @@ def update_editor(self):
 class CustomEditor(SimpleEditor):
     """ Custom style editor for a button, which can contain an image.
     """
+    #: The button image
+    image = Image()
 
     #: The mapping of button styles to Qt classes.
     _STYLE_MAP = {
@@ -173,9 +176,15 @@ def init(self, parent):
             self.control.setIcon(factory.image.create_icon())
 
         self.sync_value(self.factory.label_value, "label", "from")
+        self.sync_value(self.factory.image_value, "image", "from")
         self.control.clicked.connect(self.update_object)
         self.set_tooltip()
 
+    @observe("image")
+    def _image_updated(self, event):
+        image = event.new
+        self.control.setIcon(image.create_icon())
+
     def dispose(self):
         """ Disposes of the contents of an editor.
         """

traitsui/tests/editors/images/image_LICENSE.txt

@@ -0,0 +1,18 @@
+The icons are mostly derived work from other icons. As such they are
+licensed accordingly to the original license:
+
+Project                 License                   File
+----------------------------------------------------------------------------
+Nuvola                  LGPL                      image_LICENSE_Nuvola.txt
+
+Unless stated in this file, icons are the work of Enthought, and are
+released under a 3 clause BSD license.
+
+Files and orginal authors:
+----------------------------------------------------------------------------
+images:
+                           next.png | Nuvola
+                         parent.png | Nuvola
+                       previous.png | Nuvola
+                         reload.png | Nuvola
+                            run.png | Nuvola

traitsui/tests/editors/test_button_editor.py

@@ -10,8 +10,11 @@
 
 import unittest
 
+from pyface.api import ImageResource
+from pyface.ui_traits import Image
 from traits.api import Bool, Button, HasTraits, List, Str
 from traits.testing.api import UnittestTools
+
 from traitsui.api import ButtonEditor, Item, UItem, View
 from traitsui.tests._tools import (
     BaseTestMixin,
@@ -33,6 +36,10 @@ class ButtonTextEdit(HasTraits):
 
     play_button_label = Str("I'm a play button")
 
+    play_button_image = Image(
+        ImageResource(name="run")
+    )
+
     values = List()
 
     button_enabled = Bool(True)
@@ -60,6 +67,13 @@ class ButtonTextEdit(HasTraits):
 )
 
 
+custom_image_view = View(
+    UItem("play_button", editor=ButtonEditor(image_value="play_button_image")),
+    resizable=True,
+    style="custom",
+)
+
+
 @requires_toolkit([ToolkitName.qt, ToolkitName.wx])
 class TestButtonEditor(BaseTestMixin, unittest.TestCase, UnittestTools):
 
@@ -145,6 +159,23 @@ def test_simple_button_editor_disabled(self):
     def test_custom_button_editor_disabled(self):
         self.check_button_disabled("custom")
 
+    def test_custom_image_value(self):
+        button_text_edit = ButtonTextEdit()
+
+        tester = UITester()
+        with tester.create_ui(button_text_edit, dict(view=custom_image_view)) \
+                as ui:
+            button = tester.find_by_name(ui, "play_button")
+            default_image = button._target.image
+            self.assertIsInstance(default_image, ImageResource)
+
+            button_text_edit.play_button_image = ImageResource(
+                name='next',
+                search_path='traitsui/examples/demos/Advanced/images'
+            )
+            self.assertIsInstance(button._target.image, ImageResource)
+            self.assertIsNot(button._target.image, default_image)
+
 
 @requires_toolkit([ToolkitName.qt])
 class TestButtonEditorValuesTrait(BaseTestMixin, unittest.TestCase):

traitsui/wx/button_editor.py

@@ -14,7 +14,8 @@
 
 import wx
 
-from traits.api import Str
+from pyface.ui_traits import Image
+from traits.api import Str, observe
 
 # FIXME: ToolkitEditorFactory is a proxy class defined here just for backward
 # compatibility. The class has been moved to the
@@ -79,6 +80,8 @@ def dispose(self):
 class CustomEditor(SimpleEditor):
     """ Custom style editor for a button, which can contain an image.
     """
+    #: The button image
+    image = Image()
 
     def init(self, parent):
         """ Finishes initializing the editor by creating the underlying toolkit
@@ -106,9 +109,17 @@ def init(self, parent):
             self.update_object, "clicked", dispatch="ui"
         )
         self.sync_value(self.factory.label_value, "label", "from")
-
+        self.sync_value(self.factory.image_value, "image", "from")
         self.set_tooltip()
 
+    def _label_changed(self, label):
+        self._control.label = self.string_value(label)
+
+    @observe("image")
+    def _image_updated(self, event):
+        image = event.new
+        self._control.image = image
+
     def dispose(self):
         """ Disposes of the contents of an editor.
         """