Merge pull request #69 from jonathanrocher/exercises_and_advanced_traitsui

Exercises and advanced traitsui slides

Author: siddhantwahal

slides/02_traits.md

@@ -200,13 +200,13 @@ class Child(HasStrictTraits):
 
     @observe('father.last_name')
     def _dad_name_updated(self, event):
-        print(Father name changed to', self.father.last_name)
+        print('Father name changed to', self.father.last_name)
 
 ```
 
 ```python
 dad = Parent(last_name='Zubizaretta')
-c = Child(father=Parent)
+c = Child(father=dad)
 ```
 
 ```python
@@ -426,7 +426,7 @@ Hint: Use `os.listdir` and `os.path.getsize`
 from math import pi
 from traits.api import Range, Float, Property, cached_property
 
-class Circle(HasTraits):
+class Circle(HasStrictTraits):
     radius = Range(0.0, 1000.0)
     area = Property(Float, observe='radius')
 
@@ -459,7 +459,7 @@ c.area
 import numpy as np
 from traits.api import Array, Range, observe
 
-class Beats(HasTraits):
+class Beats(HasStrictTraits):
     f1 = Range(1.0, 200.0, value=100)
     f2 = Range(low=1.0, high=200.0, value=104)
     signal = Array(dtype=float, shape=(None,))
@@ -504,7 +504,7 @@ t = Thing()
 ```
 
 ```python
-type(c.age)
+type(t.age)
 ```
 
 <!-- #region slideshow={"slide_type": "slide"} -->
@@ -515,15 +515,15 @@ type(c.age)
 <!-- #endregion -->
 
 ```python
-from traits.api import HasTraits
+from traits.api import Event, File, HasStrictTraits, Instance, observe, Str
 
 class DataFile(HasStrictTraits):
     file = File
     data_changed = Event
 
 
 class DataReader(HasStrictTraits):
-    file = DataFile
+    file = Instance(DataFile)
     content = Str
 
     @observe("file.data_changed")
@@ -540,12 +540,79 @@ r = DataReader(file=f)
 f.data_changed = True
 ```
 
-
 <!-- #region slideshow={"slide_type": "slide"} -->
 ## Exercise time!
 
-- Take the simple example without traits
-- Create a simple Traits model for it
+- From the starting script (`stage1_starting_script/face_detect.py`), extract
+  an object that represents an image file.
+- The class for the object should:
+    - Be a traits model, i.e., inherit from `HasStrictTraits`, and, expose
+    - Attributes:
+        - `filepath`: the absolute path to the image file
+        - `metadata`: a dictionary storing EXIF data
+        - `data` a numpy array containing the RGB data
+        - `faces`: a list containing detected faces
+    - Methods:
+        `detect_faces`: returns the list of detected faces
+    - Be reactive:
+        - Ensure `metadata` and `data` are updated with `filepath` is modified
+- Copy `stage1_starting_script/face_detect.py` to `stage2.1_traited_script` and
+  work there
 - *Do not do any plotting in the model!*
 
+- Hint for computing RGB data:
+
+```python
+import numpy as np
+import PIL.Image
+
+with PIL.Image.open(filepath) as img:
+    data = np.asarray(img)
+```
+- Example images available at `ets_tutorial/sample_images` for testing
+
+<!-- #endregion -->
+
+<!-- #region slideshow={"slide_type": "slide"} -->
+### Solution
+`stage2.1_traited_script/traited_face_detect.py`
+<!-- #endregion -->
+
+<!-- #region slideshow={"slide_type": "slide"} -->
+## Exercise time!
+
+- Develop another traits model, one that represents a folder containing several
+  image files
+- The class for the object should expose:
+    - Attributes:
+        - `directory`: the absolute path to the folder
+        - `images`: a list of `ImageFile` instances from the previous exercise
+        - `data`: a pandas `DataFrame` to store metadata for each file in the folder
+    - Be reactive:
+        - Ensure `images` and `data` are updated when `directory` is modified
+    - Override `__init__` to ensure directory exists at object initialization
+    - Save work in `stage2.1_traited_script/image_folder.py`
+
+- Hints:
+    - Create a `DataFrame` from `List(Dict)`:
+    ```python
+    import pandas as pd
+    >>> records = [
+        {'A': 5, 'B': 0, 'C': 3, 'D': 3},
+        {'A': 7, 'B': 9, 'C': 3, 'D': 5},
+        {'A': 2, 'B': 4, 'C': 7, 'D': 6}
+    ]
+    >>> df = pd.DataFrame(records)
+       A  B  C  D
+    0  5  0  3  3
+    1  7  9  3  5
+    2  2  4  7  6
+    ```
+    - `os.path.isdir(directory)` to determine if `directory` is valid
+
+<!-- #endregion -->
+
+<!-- #region slideshow={"slide_type": "slide"} -->
+### Solution
+`stage2.1_traited_script/image_folder.py`
 <!-- #endregion -->

slides/03_traitsui.md

@@ -5,9 +5,9 @@ jupyter:
       extension: .md
       format_name: markdown
       format_version: '1.3'
-      jupytext_version: 1.14.0
+      jupytext_version: 1.13.7
   kernelspec:
-    display_name: Python 3 (ipykernel)
+    display_name: Python 3
     language: python
     name: python3
 ---
@@ -231,6 +231,44 @@ p.edit_traits()
 <!-- #region slideshow={"slide_type": "slide"} -->
 ## Specifying an editor
 
+- Editors: encapsulate display instructions for a trait type
+    - Hide GUI-toolkit code behind an abstraction layer
+    - All standard traits has a predefined editor that is automatically
+      displayed when the trait is displayed, unless overridden
+<!-- #endregion -->
+
+<!-- #region slideshow={"slide_type": "slide"} -->
+## Examples
+
+This code automatically uses `StrEditor`, the default for `Str` traits:
+<!-- #endregion -->
+
+```python
+class Stringy(HasStrictTraits):
+    characters = Str()
+
+s = Stringy(characters='<b>Stringy characters</b>')
+s.edit_traits(
+    view=View(
+        Item("characters")
+    )
+)
+```
+<!-- #region slideshow={"slide_type": "slide"} -->
+This code uses an HTMLEditor:
+<!-- #endregion -->
+```python
+from traitsui.api import HTMLEditor
+s.edit_traits(
+    view=View(
+        Item("characters", editor=HTMLEditor())
+    )
+)
+```
+
+<!-- #region slideshow={"slide_type": "slide"} -->
+
+## A few useful editors
 - We illustrate the powerful `InstanceEditor` here
 - Consider the following
 
@@ -313,9 +351,140 @@ sam = Person(name='Sam', age=29, bff=frodo)
 sam.edit_traits()
 ```
 
+<!-- #region slideshow={"slide_type": "slide"} -->
+- Another useful editor allows us to interface with `DataFrame`s
+<!-- #endregion -->
+
+```python
+import pandas as pd
+from traits.api import Event, Instance, Int 
+from traitsui.api import ModelView
+from traitsui.ui_editors.data_frame_editor import DataFrameEditor
+
+class FramedData(HasStrictTraits):
+    data = Instance(pd.DataFrame)
+
+    def _data_default(self):
+        return pd.DataFrame([
+            {'A': 5, 'B': 0, 'C': 3, 'D': 3},
+            {'A': 7, 'B': 9, 'C': 3, 'D': 5},
+            {'A': 2, 'B': 4, 'C': 7, 'D': 6}
+        ])
+
+class FramedDataView(ModelView):
+    model = Instance(FramedData)
+
+    view = View(
+        Item("model.data", editor=DataFrameEditor(editable=True))
+    )
+
+FramedDataView(model=FramedData()).edit_traits()
+```
 
+<!-- #region slideshow={"slide_type": "slide"} -->
+## Enter plotting
+- Another useful editor is the `MplFigureEditor`
+- Allows interacting with `matplotlib.figure.Figure` instances
+- Included in the `ets_tutorial` package bundled in this repository
+<!-- #endregion -->
 
 <!-- #region slideshow={"slide_type": "slide"} -->
+Example:
+<!-- #endregion -->
+```python
+from matplotlib.figure import Figure
+import numpy as np
+from skimage.data import chelsea
+from traits.api import Array, HasStrictTraits, Instance
+from traitsui.api import View, Item
+
+from ets_tutorial.util.mpl_figure_editor import MplFigureEditor
+
+class ImageViewer(HasStrictTraits):
+    data = Array()
+
+    figure = Instance(Figure)
+
+    traits_view = View(
+        Item("figure", editor=MplFigureEditor(), show_label=False)
+    )
+
+    def _data_default(self):
+        return chelsea()
+
+    def _figure_default(self):
+        figure = Figure()
+        axes = figure.add_subplot(111)
+        axes.imshow(chelsea())
+        return figure
+
+ImageViewer().edit_traits()
+```
+<!-- #region slideshow={"slide_type": "slide"} -->
+## The ModelView object:
+- We want our science model to be free of UI code
+- But it's still useful for models and views to respond to changes to one
+  another -- `ModelView`s 
+- `ModelView`s also monitor UI toolkit events like window creation,
+  closing, user clicking OK or Cancel buttons
+- Example:
+<!-- #endregion -->
+
+```python
+from traits.api import observe
+class Image(HasStrictTraits):
+    data = Array()
+
+    def _data_default(self):
+        return chelsea()
+
+class ImageView(ModelView):
+    model = Instance(Image)
+
+    figure = Instance(Figure)
+
+    view = View(
+        Item("figure", editor=MplFigureEditor(), show_label=False)
+    )
+
+    @observe("model.data")
+    def build_mpl_figure(self, event):
+        figure = Figure()
+        axes = figure.add_subplot(111)
+        axes.imshow(self.model.data)
+        self.figure = figure
+
+```
+
+```python
+image = Image()
+image_view = ImageView(model=image)
+image_view.edit_traits()
+```
+
+```python
+from skimage.data import astronaut
+image.data = astronaut()
+```
+
+<!-- #region slideshow={"slide_type": "slide"} -->
+## Exercise time!
+- Starting from where we left off in Stage 2.1:
+    - Create a `ModelView` for the `ImageFile` object that displays its filepath
+      (readonly), and the image array in a matplotlib figure
+        - Ensure figure is updated if the `filepath` attribute of `ImageFile` is
+          modified
+    - Create a `ModelView` for the `ImageFolder` object that displays the directory
+      (readonly) and the `DataFrame`
+    - Bonus points:
+        - What mechanism would we use to hide the `DataFrame` if the directory doesn't have any images
+          and instead show a helpful message? 
+        - Hint: keyword arguments for `Item`
+<!-- #endregion -->
+<!-- #region slideshow={"slide_type": "slide"} -->
+## Solution
+
+<!-- #endregion -->
 ## Toolkit selection
 
 - TraitsUI supports: Qt or wxPython