New Library (3.0): "vLib", a UI library for Renoise


#1

Say hello to vLib, a library for building user interfaces with theRenoise API

The groundwork was done during the development of Redux, as I was collecting presets and organizing content for the release.
To do that, I started to remake the XRNI-merger - the original tool is still online, but it’s a monster - 3000 lines of code, and hardly re-usable.

So I decided to split the user-interface into a separate project, and expand on it. vLib is the result of these efforts.

Basically, it contains a number of widgets that you can use in your own tools, with a syntax that lies very close to the Renoise Viewbuilder API.

For example, this is the code you need to create a hierarchical tree widget:

-- include class files
_vlibroot = "classes/vLib/"
require (_vlibroot.."vLib")
require (_vlibroot.."vTree")

vtree = vTree{
  vb = vb,
  id = "vTree",
  width = 340,
  height = 200,
  num_rows = 12,
  data = {
    name = "Root",
    {
      name = "Node",
      expanded = true, -- initial state of this node/branch
      {
        name = "Item #1",
      },
      {
        name = "Item #2",
      }
    },
  },
}

-- once created, we can add it to an existing view 
viewbuilder_view:add_child(vtree.view)

Of course, you can change it’s properties after having created it. The vTree even supports seamless loading of XML files, I have tried loading an entire Renoise song into it (it was slow, but it worked…)

A functional demo of all components is included with the library - you can launch it by choosing “vLib Demo” from the tools menu after having installed the tool.

Here is a screenshot of the vTree page in the demo tool.

vLib_demo.png?raw=1

Other useful components include full-blown grid/table component (vTable), a graph and more. And the demo allows you to access most, if not all properties and methods of each component and change them in realtime.

For now, I will just release vLib as it is. I have found it to be quite solid and fundamental changes to it’s design are not likely to happen. I do have plenty of ideas for optimizations, but this is also not a reason to hold back.

If you encounter a bug, have ideas for the library, or want to use it in your own projects, this is the place to discuss it :slight_smile:

Source is available on Github
HTML-formatted documentation can be found here


#2

Oh snap. Sweet. Thanks for this.

Please now make each day a few hours longer so I have time to play with this. :slight_smile:


#3

@Neurogami: since summer solstice was yesterday, I’m afraid the opposite is true :stuck_out_tongue:

On a more general note, it’s interesting to see how far we can push things using pure lua.

Performance is a key issue here, and especially the vGraph is absolutely killing my old netbook…but I have some ideas on how to improve that.

Additional native components would be great, but nothing we could realistically expect would be as flexible as (for example) the current state of the vTable. In fact, I think a project like vLib is great for discovering exactly which things we need (i.e. a drawable canvas, luajit) and which things we don’t necessarily need (a table/grid editor)


#4

vGraph worked far better than I expected, this is neat


#5

It just occurred to me that we can simulate clickable text by inserting a hidden checkbox in front of the text.

This is so, because the viewbuilder API basically hardwires acheckbox to any text immediately following it - the text then acts as a label

What this means in practice is that e.g. the vTree or VFileBrowser can be made to act much more like the Renoise counterpart :slight_smile:

Edit #1:implemented this change to vTree, and made it selectable.

Edit #2: Source is now on github.


#6

Hi, does the vTree support drag’n’drop events?


#7

Hi, does the vTree support drag’n’drop events?

No, it’s impossible to track the mouse position, so this is a no-go.

You are looking for the ability to re-arrange items somehow?


#8

You are looking for the ability to re-arrange items somehow?

Yes exactly, I was thinking about an alternative plugin tree where drag’n’drop works…


#9

Well, in an alternative-alternative reality where mice does not exist, we could make this happen with the keyboard.

Essentially, copy+paste with ability to insert at the selected node. Could even make it so that an item can’t be pasted, but only shuffled around.

But, regardless of what is done - the proper solution would require some kind of focus and clipboard management for vLib.

Otherwise, it couldn’t answer a simple question such as “what item did we just copy?” reliably when multiple trees or tables were present.

As always, one idea leads to the next :lol:


#10

Hehe. Anyway cool worx, as always.


#11

Looks great,

got me some learning to do!


#12

Do i need to copy vlib classes to my tool folder or maybe I can import it from tools (after installing it as a tool)?


#13

vLib is not (yet) a “real” library in the sense that it’s not distributed along with Renoise.
And even if it was, this is what the info on the github repository has to say about that:

Note: Distributed XRNX files should never rely on ANY external Libraries!! If your tools depends on a library, copy and paste this library locally into your tool before distributing it: make sure your distributed tools are always self-contained! The “Libraries” folder should only used temporarily for developers who are working with the trunk.

So, take a copy of the vLib classes, don’t rely on the vLib as tool/library


#14

Please now make each day a few hours longer so I have time to play with this. :slight_smile:

Please now make each day a few hours longer so I will have time to do with this :slight_smile:

Ah, I thought I was having a deja vu here…

We could take vLib to the southern hemiphere where days are now becoming longer?

Here in Berlin, I’m afraid the opposite is true for the next few months. But then, autumn and winter is a good chance to actually get something done…


#15

Hey danoise,

can add a simple color picker control, similar to the xStream’s one?


#16

The color picker is part of the vPrompt class:

https://github.com/renoise/xrnx/blob/master/Tools/com.renoise.vLib.xrnx/vLib/classes/vPrompt.lua#L58

This is the one xStream is using, supply a callback function and the dialog will take care of itself.

For example:https://github.com/renoise/xrnx/blob/master/Tools/com.renoise.xStream.xrnx/source/xStreamUI.lua#L749


#17

Thanks!

mmmh, vlib doesn’t seem to update thru renoise tool updater?

Does it require xlib, too? Used github version…


#18

No xLib dependancies, no. It does make use of vColor though (try it - your script will complain about missing required files).

Speaking of tool updater: this only works when publishing the tool on http://www.renoise.com/tools


#19

Hm, but it states different, xLib missing. Wanted to make a sortable vtable, first column a editable textfield, second an editable color field, sortable by contents of first field… I guess not possible?


#20

Well, OK…something is making use of xLib then. Should be obvious from the error message?
You can get xLib from github as well (here). I suspect you’ll only need the core class (which is just a bunch of handy functions really).

And any kind of custom sorting you’d have to implement yourself (manipulate the ‘data’ property and pass it over to the table).