Mental math of GUI placement + widget tutorial

[bigbass]

Hey vovchik

You have helped me so much with code examples
and ideas and I am very sure there will be some places in this tutorial
were I will be calling for your expertise
in fact ... now is a great time ;D

most of the gtkdialog examples
will be a big challenge for me
but easy for you

Joe

[bigbass]

BaCon radiobox


' bacon-radiobox.bac

' Include the files for making a GUI.
INCLUDE "hug.bac"
INIT

' we want to "echo out" which radiobox was pressed
' this could launch another app

SUB radiobox_demo()
PRINT "radiobox_demo"
END SUB



' 1.) Create your main working window, 250 pixels wide x 100 pixels high
Mainwin = WINDOW( "BaCon radiobox", 250, 100 )

' remember create, ATTACH ,CALLBACK ,SUB
' remember radiobox has an extra field at the end than the checkbox



My_radiobox = RADIO("This is a radiobox", 150, 25,0)
ATTACH( Mainwin, My_radiobox, 5, 0 )
CALLBACK(My_radiobox, radiobox_demo)

DISPLAY



[bigbass]

BaCon listbox




' bacon-listbox.bac

' Include the files for making a GUI.
INCLUDE "hug.bac"
INIT

' we want to "echo out" which listbox was pressed
' this could launch another app use GRAB$

SUB My_listbox_demo()
Listbox_selected$ = GRAB$(My_listbox)
PRINT Listbox_selected$
END SUB



' 1.) Create your main working window, 250 pixels wide x 130 pixels high
Mainwin = WINDOW( "BaCon listbox", 250, 130 )

' remember create, ATTACH ,CALLBACK ,SUB

Menu_label = MARK("Select an option from the Menu" , 220, 30)
ATTACH( Mainwin, Menu_label, 5, 0 )

My_listbox = LIST(180, 75)
TEXT(My_listbox ,"First choice" )
TEXT(My_listbox ,"Second choice" )
TEXT(My_listbox ,"Third choice" )
ATTACH( Mainwin, My_listbox, 5, 30 )
CALLBACK(My_listbox, My_listbox_demo)



DISPLAY


[bigbass]

updated improved combobox to use GRAB$






BaCon combobox


' bacon-combobox.bac

' Include the files for making a GUI.
INCLUDE "hug.bac"
INIT

' we want to "echo out" which combobox was pressed
' this could launch another app use GRAB$

SUB My_combobox_demo()
Combobox_selected$ = GRAB$(My_combobox)
PRINT Combobox_selected$
END SUB



' 1.) Create your main working window, 250 pixels wide x 100 pixels high
Mainwin = WINDOW( "BaCon combobox", 250, 100 )

' remember create, ATTACH ,CALLBACK ,SUB

Menu_label = MARK("Select an option from the Menu" , 220, 30)
ATTACH( Mainwin, Menu_label, 5, 0 )

My_combobox = COMBO("First choice", 180, 30)
TEXT(My_combobox ,"Second choice" )
TEXT(My_combobox ,"Third choice" )
ATTACH( Mainwin, My_combobox, 5, 30 )
CALLBACK(My_combobox, My_combobox_demo)



DISPLAY







[bigbass]

clicking the Help button launches this



bacon-msgdialog

Note : remember a callback when using the msgdialog button options
thanks fragadelic for the button close trick


' bacon-msgdialog.bac

' Include the files for making a GUI.
INCLUDE "hug.bac"
INIT


' ------------------
SUB close_dialog(NUMBER widget)
' ------------------
SYSTEM "true"
FOCUS(Mainwin)
HIDE(widget)
END SUB


' ------------------
SUB SHOW_HELP()
' ------------------
SHOW(msgbox1)
END SUB



' 1.) Create your main working window, 250 pixels wide x 100 pixels high
Mainwin = WINDOW( "BaCon MSGDIALOG", 275, 100 )


Help_btn_ = STOCK("gtk-help", 100,30)
ATTACH(Mainwin, Help_btn_,5 ,0 )
CALLBACK(Help_btn_, SHOW_HELP )

'--- Help Dialog
msgbox1 = MSGDIALOG(CONCAT$("First line \n", \
"Second line\n", \
"Third line\n", \
"Fourth line"), \
350, 200, 0, 2)

CALLBACK(msgbox1, close_dialog)
DISPLAY


[Pjot]

Thanks bigbass for all your clear tutorials!

It makes me wonder if I need to reorganize this forum by adding a section about documentation... What do you think?

Best regards
Peter

[bigbass]

The next example I got from some code I modified from sunburnt (in the bugs section)
here is the code reference if you run both you'll see what was changed
basic-converter.proboards.com/index.cgi?board=bugs&action=display&thread=192

I wanted an example for TOGGLE and this works for toggle or button

I haven't figured out a good official example for TOGGLE yet but this simulates what I was looking for

INCLUDE "hug.bac"
INIT

SUB TOGGLE_LABEL
   IF GRAB$(btnMAIN_) = "on" THEN
   TEXT(btnMAIN_, "off")
 
   ELSE
     TEXT(btnMAIN_, "on")
   END IF
   PRINT  GRAB$(btnMAIN_)
END SUB

Mainwin = WINDOW("Toggle button name", 300, 100)
My_label = MARK( "Toggle button name and state", 280, 30 )
ATTACH( Mainwin, My_label, 10, 10 )
FONT(My_label, "sans 14")

btnMAIN_ = BUTTON("on", 60, 40)
ATTACH(Mainwin, btnMAIN_, 10, 40)
CALLBACK(btnMAIN_, TOGGLE_LABEL)
FONT(btnMAIN_, "sans 14")
DISPLAY



[bigbass]

Hey Pjot

Peter
It makes me wonder if I need to reorganize this forum by adding a section about documentation...

You have the topic
Small programs, examples, challenges
I don't know how this forum is set up but if you could make a "sticky" for documentation and or code examples of your choice it wouldn't get lost with many posts

*when we finally finish ....I could convert it all to html in one long page with images that way you could just put it all where ever you prefer easily without having to move stuff around one post at a time and if you want /need to modify it would be easier too

P.S I am having fun with BaCon
Thanks!
Joe

[Pjot]

OK bigbass

I have moved your topic to this board now.

Thanks again for all your good work,

Peter

[fragadelic]

Pjot - this is a great idea.

I think I might split off all my little components of my remastersys-gui and put them here as they show how to do a lot of different things with bacon and hug.

[bigbass]

Note there are two examples on this page
this is like the input file example but has a call back to grab the text in the box
and take input from a file

BaCon EDIT

' bacon-edit.bac

' Include the files for making a GUI.
INCLUDE "hug.bac"
INIT

SUB TEXT_OUT
PRINT GRAB$(EDIT_BOX)
ENDSUB

' 1.) Create your main working window, 350 pixels wide x 200 pixels high
Mainwin = WINDOW( "BaCon EDIT ", 350, 200 )

My_label = MARK( "Type or paste something in the box ", 300, 30 )
ATTACH( Mainwin, My_label, 10, 10)
FONT(My_label, "sans 12")

' formatting changes if you use another label  name
My_label = MARK( "Press Text out when done ", 300, 30 )
ATTACH( Mainwin, My_label, -20 ,30)
FONT(My_label, "sans 12")


EDIT_BOX = EDIT(310, 100)
ATTACH( Mainwin, EDIT_BOX, 20, 60 )

My_btn = BUTTON("Text out", 80, 25)
ATTACH( Mainwin, My_btn, 140, 165 )
CALLBACK( My_btn, TEXT_OUT)


' Create a button.
My_chk = STOCK("gtk-quit", 80, 25)
ATTACH( Mainwin, My_chk, 255, 165 )

' Make button do something
CALLBACK( My_chk, QUIT)
DISPLAY








BaCon EDIT2
get input from a file



' bacon-edit2.bac

' Include the files for making a GUI.
INCLUDE "hug.bac"
INIT

SUB TEXT_OUT
PRINT GRAB$(EDIT_BOX)
ENDSUB

' 1.) Create your main working window, 350 pixels wide x 200 pixels high
Mainwin = WINDOW( "BaCon EDIT ", 350, 200 )

My_label = MARK( "Type or paste something in the box ", 300, 30 )
ATTACH( Mainwin, My_label, 10, 10)
FONT(My_label, "sans 12")

' formatting changes if you use another label name
My_label = MARK( "Press Text out when done ", 300, 30 )
ATTACH( Mainwin, My_label, -20 ,30)
FONT(My_label, "sans 12")


EDIT_BOX = EDIT(310, 100)
ATTACH( Mainwin, EDIT_BOX, 20, 60 )

My_btn = BUTTON("Text out", 80, 25)
ATTACH( Mainwin, My_btn, 140, 165 )
CALLBACK( My_btn, TEXT_OUT)


' Create a button.
My_chk = STOCK("gtk-quit", 80, 25)
ATTACH( Mainwin, My_chk, 255, 165 )

' Make button do something
CALLBACK( My_chk, QUIT)


'--- get the display info using a system call  ---'
'--- the bash command "date" is used as input ---'
result_input2$ = EXEC$("date")
TEXT(EDIT_BOX, NL$)
TEXT(EDIT_BOX, NL$)
TEXT(EDIT_BOX, result_input2$)
DISPLAY



[bigbass]

BaCon SPINBOX

This shows a simple SPINBOX and a simple FRAME
and the first example using GET to see the output from the spinbox


' bacon-spin.bac

' Include the files for making a GUI.
INCLUDE "hug.bac"
INIT



SUB My_SPINBOX()
PRINT GET(SPIN_STR)
END SUB



' 1.) Create your main working window, 250 pixels wide x 100 pixels high
Mainwin = WINDOW( "BaCon SPINBOX ", 250, 100 )

FRAME_STR = FRAME(225, 50)

ATTACH( Mainwin, FRAME_STR, 10, 10 )

'  SPIN uses GET to see the value in the SUB  
SPIN_STR = SPIN(100,30, 1, 10, 1)
ATTACH( Mainwin, SPIN_STR, 15, 20 )


' Create a button.
GET_NUMBER = BUTTON("get number", 100, 25)
ATTACH( Mainwin, GET_NUMBER , 40, 65 )



' Create a button.
My_chk = STOCK("gtk-quit", 80, 25)
ATTACH( Mainwin, My_chk, 155, 65 )

' Make button do something
CALLBACK( My_chk, QUIT)
CALLBACK(GET_NUMBER, My_SPINBOX)


DISPLAY


[bigbass]

This post has two examples vslider and hslider


BaCon VSLIDER


' bacon-vslider.bac

' Include the files for making a GUI.
INCLUDE "hug.bac"
INIT



SUB My_VSLIDER()
PRINT GET(VSLIDER_STR)
END SUB




' 1.) Create your main working window, 250 pixels wide x 200 pixels high
Mainwin = WINDOW( "BaCon VSLIDER ", 220, 200 )

FRAME_STR = FRAME(195, 150)

ATTACH( Mainwin, FRAME_STR, 10, 10 )



' VSLIDER uses GET to see the value in the SUB
VSLIDER_STR = VSLIDER(100,130, 1, 10, 1)
ATTACH( Mainwin, VSLIDER_STR, 15, 15 )



' Create a button.
GET_NUMBER = BUTTON("ok", 80, 25)
ATTACH( Mainwin, GET_NUMBER , 10, 165 )



' Create a button.
My_chk = STOCK("gtk-quit", 80, 25)
ATTACH( Mainwin, My_chk, 125, 165 )

' Make button do something
CALLBACK( My_chk, QUIT)
CALLBACK(GET_NUMBER, My_VSLIDER)


DISPLAY








BaCon HSLIDER



' bacon-hslider.bac

' Include the files for making a GUI.
INCLUDE "hug.bac"
INIT



SUB My_HSLIDER()
PRINT GET(HSLIDER_STR)
END SUB




' 1.) Create your main working window, 250 pixels wide x 200 pixels high
Mainwin = WINDOW( "BaCon HSLIDER ", 220, 200 )

FRAME_STR = FRAME(195, 150)

ATTACH( Mainwin, FRAME_STR, 10, 10 )



' HSLIDER uses GET to see the value in the SUB
HSLIDER_STR = HSLIDER(100,130, 1, 10, 1)
ATTACH( Mainwin, HSLIDER_STR, 15, 15 )



' Create a button.
GET_NUMBER = BUTTON("ok", 80, 25)
ATTACH( Mainwin, GET_NUMBER , 10, 165 )



' Create a button.
My_chk = STOCK("gtk-quit", 80, 25)
ATTACH( Mainwin, My_chk, 125, 165 )

' Make button do something
CALLBACK( My_chk, QUIT)
CALLBACK(GET_NUMBER, My_HSLIDER)


DISPLAY



[bigbass]

BaCon progressbar

Pjot has made a new progress bar demo that he has added to the Hug documentation
it makes use of TIMEOUT H.U.G. 0.76 documentation *please update if you have an old example *
www.basic-converter.org/hugdoc.html#TIMEOUT

This is a more advanced widget and a little more complex for those getting started with BaCon
because it uses some new commands SET, GET, TIMEOUT and RETURN TRUE/FALSE

to keep all the examples the same this was added instead
INCLUDE "hug.bac"






-------------------------------------------------------------------------------
some help to explain code and other options
TEXT(widget, "text")

Widget ......................... Behavior
Progressbar .................. Sets the text in the progressbar

*not used but this allows numbers to be seen instead of the word "demo"
TEXT(pb, STR$(x))



SET(widget, value)
SET(pb, x) this gets the value of x in the progressbar

GET
PRINT GET(pb) this echos out to the terminal the number value





'progressbar-demo.bac
INCLUDE "hug.bac"
DECLARE pb, x, offset
offset = 1

FUNCTION set_value
   INCR x, offset
   IF x >= 100 OR x <= 0 THEN offset = -1*offset
   SET(pb, x)
   PRINT GET(pb)
   RETURN TRUE
END FUNCTION

INIT
win = WINDOW("Progressbar", 200, 30)
pb = PROGRESSBAR("demo", 200, 30)
ATTACH(win, pb, 0, 0)
TIMEOUT(100, set_value)
DISPLAY




[konaexpress]

Hey guy, you are the "Bomb"! Did anyone tell you that?

Best regards, John