Desktop ScrollBar Demo

Gallery
1

this is a demo project demonstrating the implementation and usage of desktop scroll bars

NOTE:
    this is only meant to be a minimal example
    and as such, the following are NOT supported:
        buttons
        paging
        track paging
            clicking on the track, outside of the thumb
            would scroll by one page
        scroll wheel interaction



DONE:
scroll bar behaviour identical to desktop scroll bars
    if any differences, please notify

NOTE:
    overflow is currently disabled
        in that when scrolling past the end of content,
        the content will anchor itself to the end of
        the viewport

        NOTE:
            it is still possible to scroll past the end of content
            this happens when the viewport size is greater than
            the content size

    when overflow is enabled
        scrolling past the end of content is possible


the classes are modelled after Android OS to provide easier porting to Android and other operating systems (since Android OS's model is easy to follow)

this DOES NOT follow Android OS’s View Hierarchy, as such it is possible to have the viewport size being updated AFTER the scrollbar size

(however since the viewport is the window itself, it will be impossible for the viewport size to update AFTER the scrollbar size)

in this case, you can simply make a callback to the scrollbar as such


class yourView extends View {

    ScrollBarView scrollBar;

    
    @Override
    void onSizeChanged(int w, int h, int oldW, int oldH) {
        super.onSizeChanged(w, h, oldW, oldH);

        // your code here

        // scrollBar may be null
        if (scrollBar != null) {
            // this method DOES NOT exist in the ScrollBarView class
            // this assumes you have created such a method in ScrollBarView
            scrollbar.onViewportSizeChanged(w, h, oldW, oldH);
        }
    
    }

}

yourView content = new yourView();
ScrollBarView verticalScrollBar = new ScrollBarView(ScrollBarView.VERTICAL);

void callOnSizeChanged(View view, int w, int h) {
  view.onSizeChanged(w, h, view.getWidth(), view.getHeight());
}

void setSize(int width, int height) {
  this.width = width;
  this.height = height;

  // give the scroll bar a width of 20
  // and reduce its height by 20
  callOnSizeChanged(verticalScrollBar, 20, height - 20);
}

void setup() {
    content.setup(P2D);
    verticalScrollBar.setup(P2D);
    verticalScrollBar.document = content;
    content.scrollBar = verticalScrollBar;


    // assume our content will never change size
    // and only set its size once
    // 
    // we do not need to worry about
    // this being called after the scroll bar
    //
    // note that this will call
    // 
    // verticalScrollBar.onViewportSizeChanged(w, h, oldW, oldH);
    // 
    // this method DOES NOT exist in the ScrollBarView class
    // this assumes you have created such a method in ScrollBarView
    // 
    callOnSizeChanged(view, contentWidth, contentHeight);
}

you can find a more complete example in Processing-3-Scrollable-View/scrollbar_main.pde at 646d05fd4578ebaa46754816375c7abad5a10bf2 · mgood7123/Processing-3-Scrollable-View · GitHub

which is only 66 lines (52 lines of code)

2 Likes
2

@mgood7123

very nice! ^^