Conclusion

With that, the inkBoard tutorial is finished. Hopefully it covered all the basic concepts required. You can have a look at the final tutorial.yaml below the video. Yours may not be the exact same, but hopefully the basic structure is similar.

The final tutorial.yaml
  1inkBoard:
  2  name: inkBoard Tutorial
  3
  4device:
  5  platform: desktop
  6
  7screen:
  8  background: inkboard
  9  minimum_hold_time: 1s
 10
 11elements:
 12  - type: Button
 13    id: my-button
 14    text: Hello World!
 15    font_color: white
 16    font_size: 0
 17    fit_text: true
 18    font: default-bold
 19    tap_action: custom:my_function
 20
 21  - type: Icon
 22    id: my-icon
 23    icon: mdi:earth
 24    icon_color: foreground
 25    background_color: inkboard-light
 26    background_shape: circle
 27    show_feedback: true
 28    tap_action:
 29      action: element:show-popup
 30      element_id: my-popup
 31
 32  - type: Counter
 33    id: my-counter
 34    accent_color: accent
 35    tile_layout: count;[down,up]
 36    horizontal_sizes:
 37      outer: w*0.1
 38    vertical_sizes:
 39      count: "?*1.5"
 40      outer: h*0.15
 41    element_properties:
 42      count:
 43        font_size: 0
 44        fit_text: true
 45      down:
 46        icon_color: accent
 47      up:
 48        icon_color: accent
 49    minimum: -10
 50    maximum: 10
 51    foreground_color: foreground
 52    on_count:
 53      action: element:update
 54      element_id: my-button
 55      data:
 56        text: Count me in!
 57
 58  - type: Slider
 59    id: my-slider
 60    minimum: -10
 61    maximum: 10
 62    color: accent
 63    thumb_color: foreground
 64    on_position_set:
 65      action: element:update
 66      element_id: my-button
 67      map:
 68        text: position
 69
 70layouts:
 71  - type: GridLayout
 72    foreground_color: foreground
 73    accent_color: accent
 74    rows: 2
 75    columns: 2
 76    column_sizes: [w/4, "?"]
 77    id: my-layout
 78    elements:
 79      - my-icon
 80      - my-button
 81      - my-counter
 82      - my-slider
 83
 84  - type: custom:LabeledElements
 85    id: my-custom-elements
 86    rows: 1
 87    columns: 1
 88    outer_margins: 100
 89    elements:
 90      - type: custom:DrawToggle
 91        tap_action: custom:my_print_function
 92        ##Why does this successfully call the function but not update the element?
 93
 94popups:
 95  - type: PopupMenu
 96    id: my-popup
 97    title: "Hello World!"
 98    menu_layout:
 99      type: GridLayout
100      elements:
101        - type: Button
102          text: Again!
103          id: my-popup-button
104
105statusbar:
106  outer_margins: [10, 5]
107  size: "?*0.075"
108  location: left
109  foreground_color: white
110  accent_color: inkboard-light
111  status_element_properties:
112    icon_color: foreground
113    background_color: accent
114    background_shape: circle
115  element_properties:
116    clock:
117      font_color: foreground
118      font: default-bold
119    device:
120      icon_feature: network
121
122main_tabs:
123  hide_navigation_bar: false
124  foreground_color: white
125  accent_color: inkboard-light
126  apply_default_sizes: false
127  vertical_sizes:
128    navigation: h*0.08
129  element_properties:
130    navigation:
131      active_color: accent
132      outer_margins: [0, 0, 0, "w*0.4"]
133      column_sizes: w*0.2
134      active_properties:
135        element_properties:
136          icon:
137            icon_color: white
138      inactive_properties:
139        element_properties:
140          icon:
141            icon_color: inkboard-light
142      option_properties:
143        tile_layout: icon;line
144        horizontal_sizes:
145          outer: "?"
146        vertical_sizes:
147          icon: h*0.75
148          inner: 5
149  tabs:
150    - element: my-layout
151      name: My Layout
152      icon: mdi:clipboard-text
153    - name: The Time
154      icon: mdi:clock
155      element:
156        type: AnalogueClock
157        minimum_resolution: 1000
158        clock_fill_color: inkboard-light
159        outline_color: white
160    - name: Custom Elements
161      icon: mdi:brush
162      element: my-custom-elements