Jump to content


Photo

[Solved] Help: create an area with vertical scrollbar, with buttons in

lua vertical scroll bar scroll bar with elements

  • Please log in to reply
12 replies to this topic

#1 Raul (ulneiz)

Raul (ulneiz)

    Big Super Masta Member

  • Normal Members
  • PipPipPipPipPipPipPipPipPipPip
  • 690 posts
  • Gender:Male
  • Location:Spain

Posted 10 December 2016 - 14:30

Is there a way to create a sort of list that contains buttons (and other elements) with a vertical scroll bar? Not text only!

 

I ask the same thing for horizontal scroll bars. Better an image:

 

dcsp-scrollbar-01.png

 

How to build horizontal and vertical scrollbar with elements inside (buttons, checkboxes...)?

 

Thanks!  ^_^

 

 

 


Edited by Raul (ulneiz), 16 December 2016 - 19:31.


#2 joule

joule

    Guruh Motha Fakka is Levitating and Knows Everything About Renoise Member

  • Normal Members
  • PipPipPipPipPipPipPipPipPipPipPipPipPip
  • 1322 posts
  • Gender:Not Telling
  • Location:Sweden
  • Interests:music, philosophy, engineering

Posted 10 December 2016 - 18:39

I'd check out the vLib demo, specifically vTable. That's the best "workaround" available afaik.



#3 Raul (ulneiz)

Raul (ulneiz)

    Big Super Masta Member

  • Normal Members
  • PipPipPipPipPipPipPipPipPipPip
  • 690 posts
  • Gender:Male
  • Location:Spain

Posted 10 December 2016 - 20:19

I'd check out the vLib demo, specifically vTable. That's the best "workaround" available afaik.

 

Thanks, I'll take a look, again. I would like to see the concrete and simple code. Maybe that solution is like a patch? An invention? I think that Danoise has made several tools using it.

 

A example:

scrollbar-xcleaner.png


Edited by Raul (ulneiz), 10 December 2016 - 20:19.


#4 joule

joule

    Guruh Motha Fakka is Levitating and Knows Everything About Renoise Member

  • Normal Members
  • PipPipPipPipPipPipPipPipPipPipPipPipPip
  • 1322 posts
  • Gender:Not Telling
  • Location:Sweden
  • Interests:music, philosophy, engineering

Posted 10 December 2016 - 20:53

Yes, that is most likely what he's using. The drawback is of course that the slider used as a scrollbar doesn't have a very conventional layout :)

 

I'd guess that the code is clearly readable and well laid out. Most likely object oriented in some fashion, and perhaps you can/should even use the vTable straight out (with some minor modifications?). Of course you will have to implement the solution yourself, depending on your needs.


Edited by joule, 10 December 2016 - 20:55.


#5 Raul (ulneiz)

Raul (ulneiz)

    Big Super Masta Member

  • Normal Members
  • PipPipPipPipPipPipPipPipPipPip
  • 690 posts
  • Gender:Male
  • Location:Spain

Posted 11 December 2016 - 01:30

Yes, that is most likely what he's using. The drawback is of course that the slider used as a scrollbar doesn't have a very conventional layout :)

 

I'd guess that the code is clearly readable and well laid out. Most likely object oriented in some fashion, and perhaps you can/should even use the vTable straight out (with some minor modifications?). Of course you will have to implement the solution yourself, depending on your needs.

 

I really do not like this solution (vTable.lua) https://github.com/r...sses/vTable.lua. It seems that the API available to create the tools does not have a concrete solution to solve this.

 

multiline_text and multiline_textfield (elements with scrollbar) only serve to text, not to include other elements inside. I believe.  :wacko:

 

I guess Danoise will have some very simple example of this code. The simple scheme:

 

----------------------------------------

|  text    button                        | |

|                                         scrollbar vertical

|  text    button                        | |

----------------------------------------



#6 joule

joule

    Guruh Motha Fakka is Levitating and Knows Everything About Renoise Member

  • Normal Members
  • PipPipPipPipPipPipPipPipPipPipPipPipPip
  • 1322 posts
  • Gender:Not Telling
  • Location:Sweden
  • Interests:music, philosophy, engineering

Posted 11 December 2016 - 22:31

Yes, indeed this is the best solution to a scrollbar available at the moment (as far as I know). vLib comes with a demo, in a very similar fashion to the viewbuilder "Example tool GUI" - both great places to start learn and experiment. HTML docs are also included.

 

My approach would be to use the vScrollbar class. It seems it will -> output some kind of step value -> that you can use to refresh an area -> that displays an offset list with N number of elements.



#7 danoise

danoise

    Probably More God or Borg Than Human Member

  • Renoise Team
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 6069 posts
  • Gender:Male
  • Interests:wildlife + urban trekking

Posted 12 December 2016 - 15:06

Hi Raul, joule
 

perhaps you can/should even use the vTable straight out (with some minor modifications?). Of course you will have to implement the solution yourself, depending on your needs.

 

Even if the vLib comes with examples for the various GUI widgets, they only come with a single example. And a thing like the vTable actually has many possible configurations (for example, it's powering my disk browser widget too...). 

What I'm saying is, the vTable is one of the most complex widgets but lacking a bit in the documentation department. 

 

So - Raul - I can offer you some code that creates a functional table for you, looking more or less like your screenshot?  

Then hopefully, you can figure out how to tie your own application logic to it...


Tracking with Stuff. API wishlist | Soundcloud


#8 Raul (ulneiz)

Raul (ulneiz)

    Big Super Masta Member

  • Normal Members
  • PipPipPipPipPipPipPipPipPipPip
  • 690 posts
  • Gender:Male
  • Location:Spain

Posted 12 December 2016 - 15:32

@Danoise...
 
dcsp-scrollbar-01.png

 

It is exactly the same as in the image, only the central frame:

-----------------------------------------------------------
THE TEXTS
-----------------------------------------------------------
TX_A01 = vb:horizontal_aligner { mode = 'right', height = 18 , vb:text { text = "Doofer  ➡  Gainer  ➡  Low EQ 10  ➡  Medium EQ 10  ➡  High EQ 10 ..." }, vb:text { font = 'bold', text = "    EQ 30 + Gainer"} }
TX_A02 = vb:horizontal_aligner { mode = 'right', height = 18 , vb:text { text = "Doofer  ➡  Gainer  ➡  Low EQ 10  ➡  Medium EQ 10  ➡  High EQ 10 ..." }, vb:text { font = 'bold', text = "    EQ 30 + Gainer"} }
TX_A03 = vb:horizontal_aligner { mode = 'right', height = 18 , vb:text { text = "Doofer  ➡  Gainer  ➡  Low EQ 10  ➡  Medium EQ 10  ➡  High EQ 10 ..." }, vb:text { font = 'bold', text = "    EQ 30 + Gainer"} }
TX_A04 = vb:horizontal_aligner { mode = 'right', height = 18 , vb:text { text = "Doofer  ➡  Gainer  ➡  Low EQ 10  ➡  Medium EQ 10  ➡  High EQ 10 ..." }, vb:text { font = 'bold', text = "    EQ 30 + Gainer"} }
TX_A05 = vb:horizontal_aligner { mode = 'right', height = 18 , vb:text { text = "Doofer  ➡  Gainer  ➡  Low EQ 10  ➡  Medium EQ 10  ➡  High EQ 10 ..." }, vb:text { font = 'bold', text = "    EQ 30 + Gainer"} }
TX_A06 = vb:horizontal_aligner { mode = 'right', height = 18 , vb:text { text = "Doofer  ➡  Gainer  ➡  Low EQ 10  ➡  Medium EQ 10  ➡  High EQ 10 ..." }, vb:text { font = 'bold', text = "    EQ 30 + Gainer"} }
TX_A07 = vb:horizontal_aligner { mode = 'right', height = 18 , vb:text { text = "Doofer  ➡  Gainer  ➡  Low EQ 10  ➡  Medium EQ 10  ➡  High EQ 10 ..." }, vb:text { font = 'bold', text = "    EQ 30 + Gainer"} }
TX_A08 = vb:horizontal_aligner { mode = 'right', height = 18 , vb:text { text = "Doofer  ➡  Gainer  ➡  Low EQ 10  ➡  Medium EQ 10  ➡  High EQ 10 ..." }, vb:text { font = 'bold', text = "    EQ 30 + Gainer"} }
TX_A09 = vb:horizontal_aligner { mode = 'right', height = 18 , vb:text { text = "Doofer  ➡  Gainer  ➡  Low EQ 10  ➡  Medium EQ 10  ➡  High EQ 10 ..." }, vb:text { font = 'bold', text = "    EQ 30 + Gainer"} }
TX_A10 = vb:horizontal_aligner { mode = 'right', height = 18 , vb:text { text = "Doofer  ➡  Gainer  ➡  Low EQ 10  ➡  Medium EQ 10  ➡  High EQ 10 ..." }, vb:text { font = 'bold', text = "    EQ 30 + Gainer"} }

-----------------------------------------------------------
THE BUTTONS
-----------------------------------------------------------
class 'DCSP'

DCSP.CR = {
  BT_A01 = { 0x00,0x60,0x00 },
  BT_A02 = { 0x00,0x60,0x00 },
  BT_A03 = { 0x00,0x60,0x00 },
  BT_A04 = { 0x00,0x60,0x00 },
  BT_A05 = { 0x00,0x60,0x00 },
  BT_A06 = { 0x00,0x60,0x00 },
  BT_A07 = { 0x00,0x60,0x00 },
  BT_A08 = { 0x00,0x60,0x00 },
  BT_A09 = { 0x00,0x60,0x00 },
  BT_A10 = { 0x00,0x60,0x00 },
  BT_DEL = { 0x66,0x00,0x00 }  
}

DCSP_BT_A01 = vb:button {
  id = 'DCSP_BT_A01',
  tooltip = 'Insert A01',
  bitmap = "Icons/lock.bmp",
  text = '+',
  color = DCSP.CR.BT_A01,
  width = 28,
  height = 18,
  notifier = function()dcsp_A01() end
}

DCSP_BT_A02 = vb:button {
  id = 'DCSP_BT_A02',
  tooltip = 'Insert A02',
  bitmap = "Icons/lock.bmp",
  text = '+',
  color = DCSP.CR.BT_A01,
  width = 28,
  height = 18,
  notifier = function()dcsp_A02() end
}

DCSP_BT_A03 = vb:button {
  id = 'DCSP_BT_A03',
  tooltip = 'Insert A03',
  bitmap = "Icons/lock.bmp",
  text = '+',
  color = DCSP.CR.BT_A01,
  width = 28,
  height = 18,
  notifier = function()dcsp_A03() end
}

DCSP_BT_A04 = vb:button {
  id = 'DCSP_BT_A04',
  tooltip = 'Insert A04',
  bitmap = "Icons/lock.bmp",
  text = '+',
  color = DCSP.CR.BT_A01,
  width = 28,
  height = 18,
  notifier = function()dcsp_A04() end
}

DCSP_BT_A05 = vb:button {
  id = 'DCSP_BT_A05',
  tooltip = 'Insert A05',
  bitmap = "Icons/lock.bmp",
  text = '+',
  color = DCSP.CR.BT_A01,
  width = 28,
  height = 18,
  notifier = function()dcsp_A05() end
}

DCSP_BT_A06 = vb:button {
  id = 'DCSP_BT_A06',
  tooltip = 'Insert A06',
  bitmap = "Icons/lock.bmp",
  text = '+',
  color = DCSP.CR.BT_A01,
  width = 28,
  height = 18,
  notifier = function()dcsp_A06() end
}

DCSP_BT_A07 = vb:button {
  id = 'DCSP_BT_A07',
  tooltip = 'Insert A07',
  bitmap = "Icons/lock.bmp",
  text = '+',
  color = DCSP.CR.BT_A01,
  width = 28,
  height = 18,
  notifier = function()dcsp_A07() end
}

DCSP_BT_A08 = vb:button {
  id = 'DCSP_BT_A08',
  tooltip = 'Insert A08',
  bitmap = "Icons/lock.bmp",
  text = '+',
  color = DCSP.CR.BT_A01,
  width = 28,
  height = 18,
  notifier = function()dcsp_A08() end
}

DCSP_BT_A09 = vb:button {
  id = 'DCSP_BT_A09',
  tooltip = 'Insert A09',
  bitmap = "Icons/lock.bmp",
  text = '+',
  color = DCSP.CR.BT_A01,
  width = 28,
  height = 18,
  notifier = function()dcsp_A09() end
}

DCSP_BT_A10 = vb:button {
  id = 'DCSP_BT_A10',
  tooltip = 'Insert A10',
  bitmap = "Icons/lock.bmp",
  text = '+',
  color = DCSP.CR.BT_A01,
  width = 28,
  height = 18,
  notifier = function()dcsp_A10() end
}


-----------------------------------------------------------
PIECE OF THE GUI
-----------------------------------------------------------

-----------------------------------------------------------------START SCROLLBAR
    vb:column {
      style='group',
      vb:vertical_aligner {
        mode = "center",
        height = 182,
        vb:horizontal_aligner {
          width = 561,
          vb:column {
            width = 532,
              TX_A01, TX_A02, TX_A03, TX_A04, TX_A05, TX_A06, TX_A07, TX_A08, TX_A09, TX_A10
          },
          vb:column {
            DCSP_BT_A01, DCSP_BT_A02, DCSP_BT_A03, DCSP_BT_A04, DCSP_BT_A05, DCSP_BT_A06, DCSP_BT_A07, DCSP_BT_A08, DCSP_BT_A09, DCSP_BT_A10,
          }
        }
      }
    },
-----------------------------------------------------------------END SCROLLBAR

I do not know if it is possible, just show the bar, exactly the same as in the image. The idea is to insert many lines of text + button, about 30 or 40 or more. In the image only shows 10. And that the frame occupy approximately 6 lines in height.

 

Is it enough information?

 

Thanks!!!  ^_^



#9 danoise

danoise

    Probably More God or Borg Than Human Member

  • Renoise Team
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 6069 posts
  • Gender:Male
  • Interests:wildlife + urban trekking

Posted 14 December 2016 - 19:48

Here is the demo, as promised:

 

vtable-demo.png

 

Attached File  org.oscillity.vTableDemo.xrnx   411.13KB   16 downloads

 

The source code packed with comments, so please take some time to pick it all apart  B)

 

You should know that the cLib/vLib folders are the FULL libraries, they contain dozens of classes that are not even used in this simple demo. 

Just stick with the code for main.lua, vTableDemo_Prefs and vTableDemo_UI - this is the "implementation" of said libraries.

 


Tracking with Stuff. API wishlist | Soundcloud


#10 Raul (ulneiz)

Raul (ulneiz)

    Big Super Masta Member

  • Normal Members
  • PipPipPipPipPipPipPipPipPipPip
  • 690 posts
  • Gender:Male
  • Location:Spain

Posted 15 December 2016 - 12:51

@Danoise. Thank you for this!

 

I do not know the whole history of the API Lua available to create tools since the birth of Renoise.

 

But I really miss these three elements for the Viewbuilder: 

  1. A customizable checkbox. It would be a mix between a "button" and a "checkbox". Accept text, and bitmap at the same time. This saves a lot of space.
  2. This, a area customizable with scrollbar (horizontal and vertical) capable of supporting any element intermixed (text, checkboxes, switches, buttons, popups, etc). This saves a lot of space and serves to organize great things.
  3. Fonts customizables. At least, take the default skin color of Renoise.

Could Taktik can add these things? Or is the Lua API available a closed thing, untouchable?

 

For example, you have repeatedly used your "personalized scrollbar" (I do not know what to call it.). It is a clear sign that it is necessary. Why not include an official with the exact style used in Renoise? I'm surprised by this.

 

I will try to look at the demo in depth, but if it is too complicated or too loaded to add the scroll bar, I will have to use more switches.



#11 danoise

danoise

    Probably More God or Borg Than Human Member

  • Renoise Team
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 6069 posts
  • Gender:Male
  • Interests:wildlife + urban trekking

Posted 15 December 2016 - 13:35

is the Lua API available a closed thing

 

Yes, the APIs themselves are closed. Which is good, because if they changed too much then a lot of tools would constantly break.
Even though the API has not seen many changes from 3.0 to 3.1, the transition from 2.7 > 2.8 > 3.0 required changes to many tools.
 

For example, you have repeatedly used your "personalized scrollbar" (I do not know what to call it.). It is a clear sign that it is necessary.

 

You can call it vScrollbar :) 

 

But IMHO, you're just pointing out what is potentially nice about using something like vLib: 

  • You don't have to wait for Renoise to implement feature XYZ (assuming of course that the feature can be implemented with scripting). 
  • When/if the feature arrives, the vLib framework can replace it's custom implementation with the native one. 
  • Usually without any need to change the source code of the tool itself, as vLib is closely modelled after the viewbuilder API 

That's usually the point with frameworks - that they abstract away the implementation details. 

As for your checkbox suggestion, vLib features the "vToggleButton" which largely works like you suggest
You can see it working by cloning the vLib demo from github :)

 

I'm the one managing Renoise API suggestions, btw. Do you know of the API wishlist?
http://forum.renoise...ishlist-thread/


Tracking with Stuff. API wishlist | Soundcloud


#12 Raul (ulneiz)

Raul (ulneiz)

    Big Super Masta Member

  • Normal Members
  • PipPipPipPipPipPipPipPipPipPip
  • 690 posts
  • Gender:Male
  • Location:Spain

Posted 16 December 2016 - 19:18

Yes, the APIs themselves are closed. Which is good, because if they changed too much then a lot of tools would constantly break.
Even though the API has not seen many changes from 3.0 to 3.1, the transition from 2.7 > 2.8 > 3.0 required changes to many tools.
 

 

You can call it vScrollbar :)

 

But IMHO, you're just pointing out what is potentially nice about using something like vLib: 

  • You don't have to wait for Renoise to implement feature XYZ (assuming of course that the feature can be implemented with scripting). 
  • When/if the feature arrives, the vLib framework can replace it's custom implementation with the native one. 
  • Usually without any need to change the source code of the tool itself, as vLib is closely modelled after the viewbuilder API 

That's usually the point with frameworks - that they abstract away the implementation details. 

As for your checkbox suggestion, vLib features the "vToggleButton" which largely works like you suggest
You can see it working by cloning the vLib demo from github :)

 

I'm the one managing Renoise API suggestions, btw. Do you know of the API wishlist?
http://forum.renoise...ishlist-thread/

 

Wow. I still think that if one thing can be improved, there is no need to look at third-party tools. They will fix, and not slow Renoise's development. I do not care if my tool is going to break in the future. I'll sort it out. However, some things may be included for being new, and therefore, they do not break anything previous, because they are new, never used before.

 

I think vLIb, cLIb etc. is too advanced for most users, those who already understand enough of the code. The problem is not the code itself. It is read and can be studied. But rather its implementation in other tools. For example, a simple tool that weighs 40KB, would have to load more than half a MB of code libraries, in addition to adjusting the code of tool. Otherwise, it touches studying pieces and jumping from side to side to implement. However, they are a great help, you can find some very interesting solutions, and fix strange things that should not happen.

 

For example, in my case, I look for specific functions, the minimum necessary to optimize the code, and not add unnecessary things. I guess all programmers write like this. Now I'm at a point where I write faster, and some things I know will work without having to try them out. Less trial and error.  ^_^

 

:blink: Look what I've built:

valuebox-deploy-list.gif

 

Is a valuebox for deploy a list. Another homemade invention. What do you think?


Edited by Raul (ulneiz), 16 December 2016 - 19:20.


#13 Raul (ulneiz)

Raul (ulneiz)

    Big Super Masta Member

  • Normal Members
  • PipPipPipPipPipPipPipPipPipPip
  • 690 posts
  • Gender:Male
  • Location:Spain

Posted 16 December 2016 - 19:30

I will leave this matter as resolved....

 

I'm the one managing Renoise API suggestions, btw. Do you know of the API wishlist?

http://forum.renoise...ishlist-thread/

 

Not much, I'll take a deeper look when I have more time. Thanks!

 

I hope that the suggestions in the API will also continue to be addressed... Every time I get depressed more. I can not stop reading user complaints in the forums. Let's see if people are encouraged.  ^_^

 

Christmas arrives !!!


Edited by Raul (ulneiz), 16 December 2016 - 19:38.