big-bass - 2013-06-06

Embed GTK3 in BaCon
updated to work on mint 20.1 xfce 64bit 2021

Summary Convert GTK3 official examples to BaCon

The official site is http://www.basic-converter.org/
The official forum is http://basic-converter.proboards.com/

Getting started with sample widgets
Most of the examples have been converted from the gtk3 official examples
ported to BaCon code
as a reference only to make it easier to see
how to code it with BaCon

and there are more demos here
Page 2 demos
Page 3 demos
Page 4 demos
Page 5 demos
Page 6 demos
Page 7 demos

Last edit: big-bass 2021-05-05

check-gtk3-proto.png

If you would like to refer to this comment somewhere else in this project, copy and paste the following link:

CHECK

how to convert official examples to Simplified embedded gtk ones in BaCon

using this official example code as the reference
https://developer.gnome.org/gnome-devel-demos/stable/checkbutton.c.html.en

Example code: check-gtk3-proto.bac

'--- updated to work wih 64 bit mint 20.1  April 26 2021
'--- set up for compiling embedded library GTK

PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0`
PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0`
PRAGMA INCLUDE <gtk-3.0/gtk/gtk.h>
PRAGMA COMPILER gcc
PRAGMA OPTIONS -Wno-implicit -Wno-deprecated-declarations
OPTION PARSE FALSE

PROTO gtk_init
PROTO gtk_window_new
PROTO gtk_main
PROTO gtk_main_quit
PROTO gtk_window_set_title
PROTO gtk_container_add
PROTO gtk_toggle_button_set_active
PROTO gtk_widget_show_all
PROTO gtk_window_set_default_size
PROTO gtk_window_set_title
PROTO gtk_application_new
PROTO gtk_application_window_new
PROTO gtk_check_button_new_with_label
PROTO g_signal_connect_data
PROTO gtk_toggle_button_get_active
PROTO gtk_main_quit


DECLARE window TYPE void*
DECLARE checkbutton TYPE void*




'=====================
SUB exit_prog
'=====================
    gtk_main_quit
END SUB





'====================
 SUB toggled_cb
'====================

    '--- signal handler for "toggled" signal of the CheckButton 
    TBUT = gtk_toggle_button_get_active (checkbutton)
    IF TBUT = 1 THEN
            gtk_window_set_title (window, "CheckButton Example")
    ELSE
            gtk_window_set_title (window, "Callback working")
    END IF
    PRINT TBUT       
END SUB


gtk_init(0, 0)  
window = gtk_window_new(0)
gtk_window_set_title (window, "CheckButton Example")
gtk_window_set_default_size (window, 300, 100)
g_signal_connect_data(window, "delete-event", exit_prog, 0, 0, 0)

checkbutton = gtk_check_button_new_with_label ("Show Title")
gtk_toggle_button_set_active (checkbutton, TRUE)

g_signal_connect_data(checkbutton, "notify::active",toggled_cb, 0, 0, 0)
gtk_container_add (window, checkbutton)
gtk_widget_show_all (window)    
gtk_main

Last edit: big-bass 2021-04-28

check-gtk3-proto.png

SPINNER

original code was not complete to show callbacks and a fully working example
https://developer.gnome.org/gnome-devel-demos/stable/spinner.c.html.en

had to add callbacks , buttons and signals

Example code: spinner-gtk3-proto.bac

'--- updated to work wih 64 bit mint 20.1  April 26 2021
'--- set up for compiling embedded library GTK

PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0`
PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0`
PRAGMA INCLUDE <gtk-3.0/gtk/gtk.h>
PRAGMA COMPILER gcc
PRAGMA OPTIONS -Wno-implicit -Wno-deprecated-declarations
OPTION PARSE FALSE



PROTO gtk_init
PROTO gtk_window_new
PROTO gtk_main
PROTO gtk_main_quit
PROTO gtk_window_set_title
PROTO gtk_widget_show_all
PROTO g_signal_connect_data
PROTO gtk_spinner_new
PROTO gtk_spinner_start
PROTO gtk_spinner_stop
PROTO gtk_container_add
PROTO gtk_window_set_default_size
PROTO gtk_box_new
PROTO gtk_box_set_homogeneous
PROTO gtk_box_pack_start

PROTO gtk_radio_action_set_group

DECLARE window TYPE void*
DECLARE spinner TYPE void*
DECLARE box TYPE void*
DECLARE radio1 TYPE void*
DECLARE radio2 TYPE void*
DECLARE action TYPE void*

'=====================
SUB exit_prog
'=====================
    gtk_main_quit
END SUB




'=====================
SUB radio_clicked()
'=====================

    CLEAR
    PRINT "button1"
    gtk_spinner_start (spinner)

END SUB




'=====================
SUB radio_clicked2()
'=====================
    CLEAR
    PRINT "button2"
    gtk_spinner_stop (spinner)

END SUB





gtk_init(0, 0)

window = gtk_window_new (0)
gtk_window_set_default_size (window, 250, 200)
gtk_window_set_title (window, "Spinner test")
g_signal_connect_data(window, "delete-event", exit_prog, 0, 0, 0)

box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 2)
gtk_box_set_homogeneous (box, TRUE)

spinner = gtk_spinner_new ()


'---Create a radio button1 with a label
radio1 = gtk_radio_button_new_with_label_from_widget (radio1, "Start spinner.")
g_signal_connect_data(radio1, "clicked",radio_clicked, 0, 0, 0)



'---Create a radio button2 with a label
radio2 = gtk_radio_button_new_with_label_from_widget (radio2, "Stop spinner.")
g_signal_connect_data(radio2, "clicked",radio_clicked2, 0, 0, 0)


'---Pack them into a box, then show all the widgets
gtk_box_pack_start (box, radio1, TRUE, TRUE,2)
gtk_box_pack_start (box, radio2, TRUE, TRUE,2)
gtk_box_pack_start (box, spinner, TRUE, TRUE,2)
gtk_container_add (window, box)

gtk_widget_show_all (window)
gtk_main

Last edit: big-bass 2021-04-28

spinner-gtk3-proto.png

RADIO

https://developer.gnome.org/gnome-devel-demos/stable/radiobutton.c.html.en

Example code: radio-gtk3-proto.bac

'--- updated to work wih 64 bit mint 20.1  April 26 2021
'--- set up for compiling embedded library GTK

PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0`
PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0`
PRAGMA INCLUDE <gtk-3.0/gtk/gtk.h>
PRAGMA COMPILER gcc
OPTION PARSE FALSE


PROTO gtk_init
PROTO gtk_window_new
PROTO gtk_main
PROTO gtk_main_quit
PROTO g_signal_connect_data
PROTO gtk_box_set_homogeneous
PROTO gtk_box_new
PROTO gtk_box_pack_start
PROTO gtk_container_add
PROTO gtk_widget_show_all


DECLARE window TYPE void*
DECLARE box TYPE void*
DECLARE radio1 TYPE void*
DECLARE radio2 TYPE void*
DECLARE radio3 TYPE void*

'=====================
SUB exit_prog
'=====================
    gtk_main_quit
END SUB



'=====================
SUB radio_clicked()
'=====================
    CLEAR
    PRINT "button1"
END SUB


'=====================
SUB radio_clicked2()
'=====================
    CLEAR
    PRINT "button2"
END SUB



'=====================
SUB radio_clicked3()
'=====================
    CLEAR
    PRINT "button3"
END SUB




gtk_init(0, 0)

window = gtk_window_new (GTK_WINDOW_TOPLEVEL)
gtk_window_set_title (GTK_WINDOW (window), "Radio 2021")
gtk_window_set_default_size (GTK_WINDOW (window), 330, 70)


box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 2)
gtk_box_set_homogeneous (box, TRUE)
g_signal_connect_data(window, "delete-event", exit_prog, 0, 0, 0)

'---Create a radio button1 with a label
radio1 = gtk_radio_button_new_with_label_from_widget (radio1, "I'm the first radio button.")
g_signal_connect_data(radio1, "clicked",radio_clicked, 0, 0, 0)

'---Create a radio button2 with a label
radio2 = gtk_radio_button_new_with_label_from_widget (radio2, "I'm the second radio button.")
g_signal_connect_data(radio2, "clicked",radio_clicked2, 0, 0, 0)

'---Create a radio button3 with a label
radio3 = gtk_radio_button_new_with_label_from_widget (radio3, "I'm the third radio button.")
g_signal_connect_data(radio3, "clicked",radio_clicked3, 0, 0, 0)

'---Pack them into a box, then show all the widgets
gtk_box_pack_start (box, radio1, TRUE, TRUE, 2)
gtk_box_pack_start (box, radio2, TRUE, TRUE, 2)
gtk_box_pack_start (box, radio3, TRUE, TRUE, 2)
gtk_container_add (window, box)
gtk_widget_show_all (window)

gtk_main

Last edit: big-bass 2021-04-28

radio-gtk3-proto.png

TEXT

another official example
https://developer.gnome.org/gnome-devel-demos/stable/textview.c.html.en

Example code: text-gtk3-proto.bac

'--- updated to work wih 64 bit mint 20.1  April 26 2021
'--- set up for compiling embedded library GTK

PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0`
PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0`
PRAGMA INCLUDE <gtk-3.0/gtk/gtk.h>
PRAGMA COMPILER gcc
PRAGMA OPTIONS -Wno-implicit -Wno-deprecated-declarations
OPTION PARSE FALSE




PROTO gtk_init
PROTO gtk_window_new
PROTO gtk_main
PROTO gtk_main_quit
PROTO g_signal_connect_data
PROTO gtk_container_add 
PROTO gtk_container_set_border_width 
PROTO gtk_scrolled_window_set_policy 
PROTO gtk_text_view_set_wrap_mode 
PROTO gtk_widget_show_all 
PROTO gtk_window_set_default_size 
PROTO gtk_window_set_title 
PROTO gtk_application_new 
PROTO gtk_application_window_new 
PROTO gtk_scrolled_window_new 
PROTO gtk_text_buffer_new 
PROTO gtk_text_view_new_with_buffer 


DECLARE window TYPE void*
DECLARE buffer  TYPE void*
DECLARE text_view TYPE void*
DECLARE scrolled_window TYPE void*

'=====================
SUB exit_prog
'=====================
    gtk_main_quit
END SUB




gtk_init(0, 0)

'--- Create a window with a title, and a default size 
window = gtk_window_new(0)
gtk_window_set_title (window, "TextView Example GTK3 2021")
gtk_window_set_default_size (window, 400, 200)
g_signal_connect_data(window, "delete-event", exit_prog, 0, 0, 0)

'--- The text buffer represents the text being edited 
buffer = gtk_text_buffer_new (NULL)


'--- Text view is a widget in which can display the text buffer. 
'--- The line wrapping is set to break lines in between words.

text_view = gtk_text_view_new_with_buffer (buffer)
gtk_text_view_set_wrap_mode (text_view, GTK_WRAP_WORD) 


'--- Create the scrolled window. Usually NULL is passed for both parameters so 
'--- that it creates the horizontal/vertical adjustments automatically. Setting 
'--- the scrollbar policy to automatic allows the scrollbars to only show up 
'--- when needed. 

scrolled_window = gtk_scrolled_window_new (NULL, NULL)
gtk_scrolled_window_set_policy (scrolled_window, GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC) 
'--- The function directly below is used to add children to the scrolled window 
'--- with scrolling capabilities (e.g text_view), otherwise, 
'--- gtk_scrolled_window_add_with_viewport() would have been used

gtk_container_add (scrolled_window, text_view)
gtk_container_set_border_width (scrolled_window, 5)

gtk_container_add (window, scrolled_window) 
gtk_widget_show_all (window)    
gtk_main

Last edit: big-bass 2021-04-28

text-gtk3-proto.png

SWITCH

Example code: switch-gtk3-proto.bac

'--- updated to work wih 64 bit mint 20.1  April 26 2021
'--- set up for compiling embedded library GTK

PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0`
PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0`
PRAGMA INCLUDE <gtk-3.0/gtk/gtk.h>
PRAGMA COMPILER gcc
PRAGMA OPTIONS -Wno-implicit -Wno-deprecated-declarations
OPTION PARSE FALSE


PROTO gtk_init
PROTO gtk_window_new
PROTO gtk_main
PROTO gtk_main_quit
PROTO g_signal_connect_data
PROTO gtk_container_add
PROTO gtk_widget_show_all
PROTO gtk_switch_new
PROTO gtk_window_set_title
PROTO gtk_window_set_default_size
PROTO gtk_container_set_border_width
PROTO gtk_switch_set_active
PROTO gtk_grid_set_column_spacing
PROTO gtk_grid_attach


DECLARE switch1 TYPE void*
DECLARE window TYPE void*
DECLARE grid TYPE void*
DECLARE label TYPE void*

'=====================
SUB exit_prog
'=====================
    gtk_main_quit
END SUB




'=====================
SUB switch_clicked()
'=====================
    CLEAR
    PRINT "switch button1"
    SW1 = gtk_switch_get_active (switch1)
    PRINT SW1
END SUB





gtk_init(0, 0)

'---Create a window with a set title and default size.
'---Also, set a border width for the amount of space
'---to leave inside the window

window = gtk_window_new(0)
gtk_window_set_title (window, "Switch Example")
gtk_window_set_default_size (window, 300, 100)
gtk_container_set_border_width (window, 10)
g_signal_connect_data(window, "delete-event", exit_prog, 0, 0, 0)



'---Create a label---'
label = gtk_label_new ("Title")


'---Create a switch with a default active state
switch1 = gtk_switch_new ()
gtk_switch_set_active (switch1, TRUE)


'---Create a grid and set the column spacing,
'---attach the label
'---switch onto the grid
'---position them accordingly
grid = gtk_grid_new()
gtk_grid_set_column_spacing (grid, 10)
gtk_grid_attach (grid, label, 0, 0, 1, 1)
gtk_grid_attach (grid, switch1, 1, 0, 1, 1)

'---Connecting the clicked signal to the callback
g_signal_connect_data(switch1, "notify::active",switch_clicked, 0, 0, 0)


gtk_container_add (window, grid)
gtk_widget_show_all (window)
gtk_main

Last edit: big-bass 2021-04-28

switch-gtk3-proto.png

SPINBUTTON3

original code ported and modified
https://developer.gnome.org/gnome-devel-demos/stable/spinbutton.c.html.en]

Example code: spinbutton-gtk3-proto.bac

'--- updated to work wih 64 bit mint 20.1  April 26 2021
'--- set up for compiling embedded library GTK

PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0`
PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0`
PRAGMA INCLUDE <gtk-3.0/gtk/gtk.h>
PRAGMA COMPILER gcc
OPTION PARSE FALSE



PROTO gtk_label_set_text
PROTO gtk_container_add
PROTO gtk_container_set_border_width
PROTO gtk_grid_attach
PROTO gtk_grid_set_column_homogeneous
PROTO gtk_grid_set_column_spacing
PROTO gtk_widget_set_hexpand
PROTO gtk_widget_show_all
PROTO gtk_window_set_default_size
PROTO gtk_window_set_title
PROTO gtk_adjustment_new
PROTO gtk_application_new
PROTO gtk_window_new
PROTO gtk_grid_new
PROTO gtk_label_new
PROTO gtk_spin_button_get_value_as_int
PROTO gtk_spin_button_new
PROTO gtk_init
PROTO gtk_main
PROTO g_signal_connect_data
PROTO gtk_main_quit



'--- Declare variables
DECLARE window TYPE void*
DECLARE label TYPE void*
DECLARE grid TYPE void*
DECLARE spin_button TYPE void*

DECLARE adjustment TYPE void*




'==============
SUB EXIT_PROG
'==============
    gtk_main_quit
END SUB




'--- This is the callback function.
'--- It is a handler function which reacts to the signal.
'--- In this case, it will notify the user the value of their spinbutton

'==============
SUB spin_clicked
'==============
    value = gtk_spin_button_get_value_as_int (GTK_SPIN_BUTTON(spin_button))
    PRINT value     
END SUB





gtk_init(0, 0)

'--- Create a window with a title, a border width, and a default size
window = gtk_window_new(GTK_WINDOW_TOPLEVEL)
gtk_window_set_title (GTK_WINDOW (window), "SpinButton Example 2021")
gtk_window_set_default_size (GTK_WINDOW (window), 330, 70)
gtk_container_set_border_width (GTK_CONTAINER (window), 5)

'---Connecting the clicked signal to the callback function
g_signal_connect_data(window, "destroy", EXIT_PROG, 0, 0, 0)

'--- Create a label to be shown in the window
label = gtk_label_new ("Press enter to get the value")

'--- Create an adjustment representing an adjustable bounded value
adjustment = gtk_adjustment_new (0, 0, 100, 1, 0, 0)


'--- Create a spin button that is to be as wide as possible
spin_button = gtk_spin_button_new (adjustment, 1, 0)
gtk_widget_set_hexpand (spin_button, TRUE)

'--- Connecting the "value-changed" signal for the spinbutton
'--- to the appropriate callback function.
g_signal_connect_data(spin_button, "activate", spin_clicked, 0, 0, 0)

'--- Create a grid and arrange everything accordingly
grid = gtk_grid_new ()
gtk_grid_set_column_spacing (GTK_GRID (grid), 10)
gtk_grid_set_column_homogeneous (GTK_GRID (grid), TRUE)
gtk_grid_attach (GTK_GRID (grid), spin_button, 0, 0, 1, 1)
gtk_grid_attach (GTK_GRID (grid), label, 0, 1, 1, 1)

gtk_container_add (GTK_CONTAINER (window), grid)
gtk_widget_show_all (window)
gtk_main

Last edit: big-bass 2021-04-28

spinbutton-gtk3-proto.png

PROGRESS

alternate text

This is how to add a timeout to GTK3
and use it with PROTO

now the progressbar auto updates automatically
there wasn't a complete simple example so I had to make one

I had to add a few void* casts for 64 bit machines

Example code: progress-gtk3-proto.bac

'--- updated to work with 64 bit mint 20.1  April 26 2021
'--- set up for compiling embedded library GTK

PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0`
PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0`
PRAGMA INCLUDE <gtk-3.0/gtk/gtk.h>
PRAGMA COMPILER gcc
OPTION PARSE FALSE


PROTO gtk_init
PROTO gtk_window_new
PROTO gtk_main_quit
PROTO gtk_main
PROTO gtk_container_add
PROTO gtk_grid_attach
PROTO gtk_grid_attach_next_to
PROTO gtk_progress_bar_pulse
PROTO gtk_widget_show_all
PROTO gtk_window_set_title
PROTO gtk_application_new
PROTO gtk_button_new_with_label
PROTO gtk_grid_new
PROTO gtk_progress_bar_new
PROTO gtk_window_new
PROTO g_signal_connect_data
PROTO gtk_progress_bar_set_fraction
PROTO gtk_progress_bar_get_fraction
PROTO gtk_window_set_default_size
PROTO  g_timeout_add



'--- Declare variables
DECLARE window TYPE void*
DECLARE progress_bar TYPE void*
DECLARE grid TYPE void*
DECLARE button TYPE void*

fraction = 0.1

'---How to use a time out to update a progress bar

'=============================
FUNCTION timeout_callback TYPE int
'=============================

    gtk_progress_bar_pulse (progress_bar)   

    '---Increase the bar by 10% each time this function is called

    '---Fill in the bar with the new fraction
    gtk_progress_bar_set_fraction (progress_bar, fraction)

    fraction = fraction + 0.1
    IF fraction >= 1 THEN
        fraction = 0
    END IF

    RETURN TRUE

END FUNCTION



'==============
SUB EXIT_PROG
'==============
    gtk_main_quit
END SUB




    gtk_init(0, 0)

    '---Create the window and set a title
    window = gtk_window_new (0)
    gtk_window_set_title (window, "Progress Example")
    gtk_window_set_default_size (window, 270, 70)
    g_signal_connect_data(window, "destroy", EXIT_PROG, 0, 0, 0)


    '---Create a button with a label
    button = gtk_button_new_with_label ("QUIT")

    '---Create the progress bar
    progress_bar = gtk_progress_bar_new ()

    '---Create a grid and attach the button and progress bar accordingly
    grid = gtk_grid_new ()
    gtk_grid_attach (grid, button, 1, 1, 1, 1)
    gtk_grid_attach_next_to (grid, \
                         progress_bar, \
                         button, \
                         GTK_POS_BOTTOM, 1, 1)

    '---Connecting the clicked signal to the callback function
    g_signal_connect_data (button, "clicked", EXIT_PROG,0,0,0)


    g_timeout_add(500, (void*)timeout_callback, NULL)
    gtk_container_add (window, grid)
    gtk_widget_show_all (window)
    gtk_main

Last edit: big-bass 2021-04-28

progress-gtk3-proto.png

BaCon PROTO Wiki

bacon code examples for gtk3 2021 (64 bit tested)

Home

Discussion

CHECK

SPINNER

RADIO

TEXT

SWITCH

SPINBUTTON3

PROGRESS