use more features in the button example

Button/button.json

@@ -9,7 +9,8 @@
     {
       "id": "button",
       "attr": "stroke-width",
-      "value": "IF ENABLED(\"press_button\") THEN 6 ELSE 1 END"
+      "value": "IF ENABLED(\"press_button\") THEN 6 ELSE 1 END",
+      "ignore": "is now used in hover below"
     },
     {
       "id": "button_%0",
@@ -21,15 +22,19 @@
   "events": [
     {
       "id": "button",
-      "event": "toggle_button"
+      "event": "toggle_button",
+      "hover": { "attr":"stroke-width", "enter":"6", "leave":"1"}
     },
     {
       "id": "button_TRUE",
-      "event": "toggle_button"
+      "event": "toggle_button",
+      "hover": { "attr":"stroke-width", "enter":"3", "leave":"1", "id":"button"}
     },
     {
       "id": "button_FALSE",
-      "event": "press_button"
+      "event": "set_button",
+      "predicates" : ["newVal = bool(%shiftKey=FALSE)"],
+      "hover": { "attr":"stroke-width", "enter":"5", "leave":"1", "id":"button"}
     }
   ]
 }

Button/button.mch

@@ -12,5 +12,8 @@ OPERATIONS
   END;
   toggle_button = BEGIN
     button:= bool(button=FALSE)
+  END;
+  set_button(newVal) = PRE newVal:BOOL THEN
+     button := bool(newVal=TRUE)
   END
 END
\ No newline at end of file

Button/button.svg

-<svg height="230" width="200">
+<svg height="240" width="200">
   <circle id="button" cx="100" cy="100" r="80"
     stroke="black" stroke-width="3" fill="green" />
     <text  text-align="left"  x="50"  y="190"