Merge pull request #384 from shorepine/tabview

adding first version of TabView to allow for tabbed UIScreens

docs/tulip_api.md

@@ -267,6 +267,22 @@ screen.add(tulip.UICheckbox(text=None, val=False, bg_color=None, fg_color=None,
 
 See our [`buttons.py`](https://github.com/shorepine/tulipcc/blob/main/tulip/fs/ex/buttons.py) example for `UIX` class use.
 
+### Tabbed UIs
+
+You can set up a tabbed UI in a `UIScreen` with our `TabView` class. It's set up to act like a mini `UIScreen`, where you can add elements. 
+
+```python
+def run(screen):
+ # This will create a TabView in the UIScreen, on the left, with three tabs
+ tabview = ui.TabView(screen, ["tab1", "tab2", "tab3"], size=80, position = lv.DIR.LEFT)
+ # Create any UIElement 
+ bpm_slider = tulip.UISlider(tulip.seq_bpm()/2.4, w=300, h=25, 
+ callback=bpm_change, bar_color=123, handle_color=23)
+ # Add it to the tab you want, same API as UIScreen.add()
+ tabview.add("tab2", bpm_slider, x=300,y=200)
+ screen.present()
+```
+
 ## Input
 
 Tulip supports USB keyboard input and touch input. It also supports a software on-screen keyboard, and any I2C connected keyboard or joystick on Tulip CC. On Tulip Desktop, mouse clicks act as touch points, and your computers' keyboard works.

tulip/shared/py/ui.py

@@ -293,6 +293,7 @@ def remove_items(self):
  self.group.delete()
 
 
+
 # Callback for soft keyboard to send chars to Tulip.
 def lv_soft_kb_cb(e):
  global lv_soft_kb, lv_last_mode
@@ -393,6 +394,47 @@ def launcher(ignore=True):
  b_power = lv_launcher.add_button(lv.SYMBOL.POWER,"Reset")
  b_power.add_event_cb(launcher_cb, lv.EVENT.CLICKED, None)
 
+# A tab view (that you can add other things to)
+class TabView:
+ def __init__(self, parent, tabs=[], position = lv.DIR.LEFT, size=100):
+ self.parent = parent
+ self.tabs = []
+ self.tab_names = tabs
+ self.tabview = lv.tabview(self.parent.group)
+ self.tabview.set_tab_bar_position(position)
+ self.tabview.set_tab_bar_size(size)
+ for t in self.tab_names:
+ self.tabs.append(self.tabview.add_tab(t))
+ self.last_obj_added = None
+
+ def tab(self, name):
+ return self.tabs[self.tab_names.index(name)]
+
+ def add(self, name, obj, first_align=lv.ALIGN.TOP_LEFT, direction=lv.ALIGN.OUT_RIGHT_MID, relative=None, pad_x=0, pad_y=0, x=None, y=None):
+ group = self.tab(name)
+
+ if(relative is not None):
+ self.last_obj_added = relative.group
+
+ if(type(obj) != list): obj = [obj]
+ for o in obj:
+ o.group.set_parent(group)
+ o.group.set_style_bg_color(pal_to_lv(self.parent.bg_color), lv.PART.MAIN)
+ o.group.set_height(lv.SIZE_CONTENT)
+ if(self.last_obj_added is None):
+ o.group.align_to(group,first_align,self.parent.offset_x,self.parent.offset_y)
+ else:
+ try:
+ o.group.align_to(self.last_obj_added, direction,pad_x,pad_y)
+ except lv.LvReferenceError:
+ self.last_obj_added = None
+ o.group.align_to(group,first_align,self.parent.offset_x,self.parent.offset_y)
+ o.group.set_width(o.group.get_width()+pad_x)
+ o.group.set_height(o.group.get_height()+pad_y)
+ if(x is not None and y is not None): o.group.set_pos(x,y)
+ self.last_obj_added = o.group
+
+
 
 # A text entry widget w/ ok and cancel 
 class TextEntry(UIElement):