Compulsory part 4

streamsync/colours/main.py

@@ -15,13 +15,32 @@ def _update_message(state):
 
 def decrement(state):
     state["counter"] -= 1
+    if state["counter"] >= 30:
+        state["too_high"] = True
+    else:
+        state["too_high"] = False
     _update_message(state)
 
 def increment(state):
     state["counter"] += 1
     # Shows in the log when the event handler is run
-    print(f"The counter has been incremented.")
+    if state["counter"] >= 30:
+        state["too_high"] = True
     _update_message(state)
+
+# Create a matlibplot figure with a line plot
+def plot(state):
+    import matplotlib.pyplot as plt
+    import numpy as np
+
+    x = np.linspace(0, 2 * np.pi, 100)
+    y = np.sin(x)
+
+    fig = plt.figure()
+    plt.plot(x, y)
+    plt.close(fig)
+
+    state["plot"] = fig
 
 # Initialise the state
 
@@ -35,6 +54,8 @@ def increment(state):
     "_my_private_element": 1337,
     "message": None,
     "counter": 26,
+    "too_high":False,
 })
 
-_update_message(initial_state)
+_update_message(initial_state)
+plot(initial_state)

streamsync/colours/ui.json

@@ -144,6 +144,29 @@
             "position": 1,
             "handlers": {},
             "visible": true
+        },
+        "nlssh3nikn80r1j9": {
+            "id": "nlssh3nikn80r1j9",
+            "type": "image",
+            "content": {
+                "src": "@{plot}",
+                "caption": "Image Caption"
+            },
+            "parentId": "c0f99a9e-5004-4e75-a6c6-36f17490b134",
+            "position": 3,
+            "visible": true
+        },
+        "xgqeoh5fwx9vig18": {
+            "id": "xgqeoh5fwx9vig18",
+            "type": "image",
+            "content": {
+                "src": "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Vienna_Convention_road_sign_B2a.svg/240px-Vienna_Convention_road_sign_B2a.svg.png",
+                "caption": "This sign says stop"
+            },
+            "parentId": "c0f99a9e-5004-4e75-a6c6-36f17490b134",
+            "position": 2,
+            "handlers": {},
+            "visible": "too_high"
         }
     }
 }