A simple GUI for Rebol3

Rebol3, developed by Oldes (https://github.com/Oldes/Rebol3), is improving day by day. Unfortunately, Rebol3 does not yet have a VID (except for Windows as a proof of concept), which means that attractive interfaces cannot yet be created. 

Fortunately, Oldes added a nice modules management to Rebol3, which allows this problem to be overcome. 

In this code, we use two modules:

Blend2D (https://github.com/Siskin-framework/Rebol-Blend2D) 

OpenCV (https://github.com/Oldes/Rebol-OpenCV) 

The idea is as follows: we use the Blend2D module to create the interface for our application and the OpenCV module to display the result. 

With Blend2D module, I created five buttons (simple blend2D boxes). Each button is associated with a Rebol3 function that will execute when the button is clicked. Button 1 calls the loadImage function, which allows you to select an image and display it. Buttons 2 and 3 call the convertTo function, which displays the image in grayscale or in HSV color space. Button 4 displays the original image and button 5 exits the application.

Now, the question is how to associate mouse movements with different buttons. Blend2D does not have a mouse manager, which is where the OpenCV module comes in.

Oldes has introduced a mouse event handler into the OpenCV module for these events:

• MOUSEMOVE
• LBUTTONDOWN
• RBUTTONDOWN
• MBUTTONDOWN
• LBUTTONUP
• RBUTTONUP
• MBUTTONUP
• LBUTTONDBLCLK
• RBUTTONDBLCLK
• MBUTTONDBLCLK
• MOUSEWHEEL
• MOUSEHWHEEL

With the cv/setMouseCallback function, we can retrieve the event type, the x and y position of the mouse, and the event flag. We also obtain the mouse position as a pair! x y.

;--OpenCV mouse callback in context

ctx: context [

    on-mouse-click: func [

        type  [integer!]

        x     [integer!]

        y     [integer!]

        flags [integer!]

    ][

    pos: mcb/pos ;--mouse position as a pair!

        if type == cv/EVENT_LBUTTONDOWN [

        if pos/y < 20 [

        case [

        all [pos > 0x0 pos < 80x20]   [loadImage]         ;--button 1

        all [pos > 80x0 pos < 160x20] [if isLoaded? [convertTo/GS fileName]]        ;--button 2

        all [pos > 160x0 pos < 240x20][if isLoaded? [convertTo/HSV fileName]]    ;--button 3

        all [pos > 240x0 pos < 320x20][showSource]    ;--button 4

        all [pos > 320x0 pos < 400x20][quit] ;--button 5

        ]

        ]

        ]

    ]

]

In the on-mouse-click function, we first check that the mouse is within the button area. Then we check that the mouse is on the selected button. If so, we execute the function associated with the button. In this example button 3 is clicked and convertTo function is executed.

The code is here: https://github.com/ldci/R3_tests/tree/main/GUI