Mental math of GUI placement + widget tutorial

[vovchik]

Dear guys,

Here is an image event box using Alex's great roll-your-own scheme:

' ------------------
FUNCTION EVENT_IMAGE(STRING hug_file$, int hug_xsize, int hug_ysize)
' ------------------
LOCAL myframe, ebox
myimage = gtk_image_new_from_file(hug_file$)
ebox = gtk_event_box_new()
' add image to event box
gtk_container_add(ebox, myimage)
gtk_widget_set_events(ebox, GDK_POINTER_MOTION_MASK | GDK_KEY_PRESS_MASK | GDK_BUTTON_RELEASE_MASK | GDK_SCROLL_MASK)
g_signal_connect_data(ebox, "button-press-event", hug_mouse_event, 20, 0, 0)
g_signal_connect_data(ebox, "button-release-event", hug_mouse_event, 0, 0, 0)
g_signal_connect_data(ebox, "motion-notify-event", hug_mouse_event, 0, 0, 0)
g_signal_connect_data(ebox, "leave-notify-event", hug_mouse_event, 30, 0, 0)
IF HUG_WIDGET_SHOW THEN
gtk_widget_show_all(ebox)
END IF
hug_widget_xsize(STR$(ebox)) = hug_xsize
hug_widget_ysize(STR$(ebox)) = hug_ysize
hug_widget_s_widget(STR$(ebox)) = ebox
hug_widget_signal(STR$(ebox)) = 4
hug_widget_type$(STR$(ebox)) = "image"
hug_widget_font(STR$(ebox)) = myimage
hug_widget_focus(STR$(ebox)) = myimage
hug_widget_image$(STR$(ebox)) = hug_file$
RETURN ebox
END FUNCTION



It requires an image name (e.g. xxx.png), and the x and y sizes (like normal IMAGE), except that you can query the events, which is great.

Have fun.

With kind regards,
vovchik

[alexfish]

@ Vivchik , Oops I mean Vovchick , no Vovchik , write Vovchic 1000 times

@ Vochik.

MM!? | I Like this one

Very Versatile , could even make a simple game from it

Regards

alexfish

Edited , can't spell

@ Vovchik
@ Vovchik
@ Vovchik
@ Vovchik ................................................................Yes

Or a simple animation , think about that , a movie ? Can also just PICTURE that

[bigbass]

Hey alexfish,vovchik


I am testing the mouse events also
trying to make an include file for the functions that alexfish posted

maybe between the three of us we can get an include file going
the reason HUG.bac is needed to be renamed is for the declaration of all the variables
and there are a lot so... I understand why you guys are adding things this way for prototyping some ideas quickly the next step will be getting stand alone include files for each new idea added but this in itself is a big job (this one is much more complex than the other include file for SEDIT)

we will need to add this also so we can get the hug_widget used
FUNCTION GRAB$(NUMBER hug_widget) --->from HUG.bac

keep at guys all of this is great for the RAD and other future projects !

Joe

[bigbass]

keeping with the widget tutorial I will just organize the info into a how to
this is alexfish's work *very minor edits *

vovchik sent me a PM and suggested that I could just add the functions without modifying hug
and thanks for the snippet (straight gtk) on the other page too


compile the app below as is no edits to hug needed
then source it to see the output

./alexfish-mouse-event2

the output from the terminal will look like this

# Mouse X: 40
# Mouse Y: 36
# Mouse Btn.: -1
# Mouse Whl.: -1
# PARENT_ID.: 165572408


'alexfish-mouse-event2.bac
'add the functions directy to the app no edits to hug.bac
'thanks to alexfish for the original code and thanks to vovchik for the coding tip

INCLUDE "hug.bac"

' ------------------
FUNCTION EVENT_BUTTON (STRING hug_text$, int hug_xsize, int hug_ysize)
' ------------------

LOCAL but

but = gtk_button_new_with_mnemonic(hug_text$)
REM These lines add mouse events to the button
gtk_widget_set_events(but, GDK_POINTER_MOTION_MASK | GDK_KEY_PRESS_MASK | GDK_BUTTON_RELEASE_MASK | GDK_SCROLL_MASK)
g_signal_connect_data(but, "button-press-event", hug_mouse_event, 20, 0, 0)
g_signal_connect_data(but, "button-release-event", hug_mouse_event, 0, 0, 0)
g_signal_connect_data(but, "motion-notify-event", hug_mouse_event, 0, 0, 0)
g_signal_connect_data(but, "leave-notify-event", hug_mouse_event, 30, 0, 0)
IF HUG_WIDGET_SHOW THEN gtk_widget_show(but)

hug_widget_xsize(STR$(but)) = hug_xsize
hug_widget_ysize(STR$(but)) = hug_ysize
hug_widget_signal(STR$(but)) = 2
hug_widget_s_widget(STR$(but)) = but

hug_widget_type$(STR$(but)) = "button"
hug_widget_attach(STR$(but)) = but
hug_widget_font(STR$(but)) = gtk_bin_get_child(but)
hug_widget_focus(STR$(but)) = but

RETURN but

END FUNCTION




' ------------------  
FUNCTION EVENT_FRAME (int hug_xsize, int hug_ysize)
' ------------------

LOCAL myframe,ebox
myframe = gtk_frame_new(0)
ebox = gtk_event_box_new()
REM add the fram to event box
gtk_container_add(ebox, myframe)
gtk_widget_set_events(ebox, GDK_POINTER_MOTION_MASK | GDK_KEY_PRESS_MASK | GDK_BUTTON_RELEASE_MASK | GDK_SCROLL_MASK)
g_signal_connect_data(ebox, "button-press-event", hug_mouse_event, 20, 0, 0)
g_signal_connect_data(ebox, "button-release-event", hug_mouse_event, 0, 0, 0)
g_signal_connect_data(ebox, "motion-notify-event", hug_mouse_event, 0, 0, 0)
g_signal_connect_data(ebox, "leave-notify-event", hug_mouse_event, 30, 0, 0)


IF HUG_WIDGET_SHOW THEN gtk_widget_show_all(ebox)
hug_widget_xsize(STR$(ebox)) = hug_xsize
hug_widget_ysize(STR$(ebox)) = hug_ysize
hug_widget_s_widget(STR$(ebox)) = ebox
hug_widget_signal(STR$(ebox)) = 4

hug_widget_type$(STR$(ebox)) = "frame"

RETURN ebox

END FUNCTION


' ------------------
FUNCTION Mouse_Event
' ------------------

CLEAR
IF MOUSE(0) > -1 THEN
PRINT "# Mouse X: ", MOUSE(0)
PRINT "# Mouse Y: ", MOUSE(1)
PRINT "# Mouse Btn.: ", MOUSE(2)
PRINT "# Mouse Whl.: ", MOUSE(3)
PRINT "# PARENT_ID.: ", MOUSE(4)
END IF
RETURN TRUE    
END FUNCTION



'~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
'@ MAIN
'~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
INIT
win = WINDOW("BaCon RAD", 200, 300)
but=EVENT_BUTTON("Event_Button",100,50)
ATTACH(win,but,5,5)
frm=EVENT_FRAME(100,100)
ATTACH(win,frm,5,100)
'Note can not set the Text in frame with event box
TIMEOUT(100,Mouse_Event)            
DISPLAY



[vovchik]

Dear guys,

I have attached a little HUG program that moves a widget depending upon the mouse button pressed and sets the cursor to a particular style for a widget.

Have fun...

With kind regards,
vovchik

Attachments:

[vovchik]

Dear guys,

I have attached a little snippet that allows you to use SVG images within the source code (HUG-based) and to display them - i.e. no external loading of svg data.

Have fun.

With kind regards,
vovchik

Attachments:

[alexfish]

Hi Vovchik

Almost a Bulls eye 3 out of 4 , my mouse has a scroll wheel

it needs some target practice

up a bit down a bit , fire

can only guess what is coming next

can also use this line , for zooming

<svg width=\"24\" height=\"24\">

regards

alexfish

[alexfish]

Here is a little routine to try

its a visual view port with a button

open the button.hug with text editor, find the lines

which indicate <edit x y>

play around with the values x and y , save , then click the load button
repeat:

Have fun

alexfish


ADDED: tip

open the button.hug with firefox , then view page source,

also if have WEB DEVELOPER in firefox , just for fun, play around with the image

Attachments:

[alexfish]

have gone one step further

try this bit of code / open up the .hug with text editor and edit the lines @
      <!-- below set the button with x="*"  y="*" -->
   <rect
      width="200"
      height="200"
      x="100"
      y="100"

now re load the viewport

Have Fun

Alex

[vovchik]

Dear all,

Here is a demo of inline pixmaps using HUG. You can include the pixmap data in your source and then you don't have to load external image files. I showed this technique for SVGs in some previous posts and in PegSolitaire. This basic technique now works for png and other pixmaps. How to use inline data is explained in the readme. The archive contains the source, a data file (which could actually be included within the source), a test png file, a 32-bit binary and a readme.

Have fun.

With kind regards,
vovchik

Attachments:

[vovchik]

Dear Joe,

I like your BaCon png and will use it for something or other.

Dear all,

I just wrote a little script that will create inline data for images. Just pass the image name to the script and it will create a xxx_inline.bac file, properly formatted and with no extra junk except for some comments about the image. I put it in /usr/local/bin. See my previous post on inline images for examples of use.

With kind regards,
vovchik

PS. The parsing could certainly be improved and made more efficient/elegant - this is just a quick stab.

Attachments:

[vovchik]

Dear guys,

Here is a little demo that shows how to crop inline pixbufs and to display them using GTK, GDK and HUG. The source is in the next post.

With kind regards,
vovchik

Attachments:

[vovchik]

The source contains the inline data file and the bacon program.

Attachments:

[bigbass]

Here is a good little widget example that shows some features of the
ENTRY widget

* I used the date as an example
if your date string is in English this will work
the date however is subject to change
A bonus the code to look at starts at line 70 if you want to test conditions with the result
from GRAB$




to see the testing of the conditions you will have to source the binary like this (after compiling)

./bacon-entry-grab

The output from the terminal will look something like this

Test GRAB--> Thu Jul 19 10:04:14 UTC 2012

Today is Thursday
The month is July
The day number is 19


' bacon-entry-grab.bac

INCLUDE "hug.bac"
INIT


' we want to "echo out" text in the entry

SUB entry_demo()
PRINT "entry_demo"
END SUB

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



SUB demo1()
PRINT "enable"
ENABLE(My_entry)
END SUB


SUB demo2()
PRINT "disable"
DISABLE(My_entry)
END SUB



SUB demo4()
PRINT "refresh"
result_input2$ = EXEC$("date")
' remember create, ATTACH ,CALLBACK ,SUB

My_entry = ENTRY(result_input2$, 205, 25)
ATTACH( Mainwin, My_entry, 5, 50 )
END SUB



SUB demo5()
PRINT "clear"

My_entry = ENTRY("", 205, 25)
ATTACH( Mainwin, My_entry, 5, 50 )
END SUB



' 1.) Create your main working window, 260 pixels wide x 170 pixels high
Mainwin = WINDOW( "BaCon action_types ", 260, 170 )



' place a label for the entry to say what it does notice negative number
My_label = MARK( "<span color=\"blue\">The date in the entry</span> ", 180, 30 )
ATTACH( Mainwin, My_label, -10, 25 )


result_input2$ = EXEC$("date")
' remember create, ATTACH ,CALLBACK ,SUB

My_entry = ENTRY(result_input2$, 205, 25)
ATTACH( Mainwin, My_entry, 5, 50 )
CALLBACK(My_entry, entry_demo)



PRINT "Test GRAB--> " ,GRAB$(My_entry)
CODE_OUT$ = CONCAT$(GRAB$(My_entry))

SPLIT CODE_OUT$ BY " " TO words$ SIZE dim
IF words$[0] = "" THEN
PRINT "EMPTY"      
END IF

IF words$[0]= "Thu" THEN
PRINT "Today is Thursday"
END IF

IF words$[1]= "Jul" THEN
PRINT "The month is July"
END IF

IF words$[2]= "19" THEN
PRINT "The day number is 19"
END IF

PRINT words$[0]
PRINT words$[1]
PRINT words$[2]




' Create a button
My_btn = BUTTON( "enable", 80, 25)

' Attach button to the main window
ATTACH( Mainwin, My_btn, 5, 90 )

' Make button do something
CALLBACK( My_btn, demo1)


' Create a button
My_btn = STOCK( "disable", 80, 25)

' Attach button to the main window
ATTACH( Mainwin, My_btn, 85, 90 )

' Make button do something
CALLBACK( My_btn, demo2)



' Create a button
My_btn = BUTTON( "refresh", 80, 25)

' Attach button to the main window
ATTACH( Mainwin, My_btn, 5, 115 )

' Make button do something
CALLBACK( My_btn, demo4)


' Create a button
My_btn = BUTTON( "clear", 80, 25)

' Attach button to the main window
ATTACH( Mainwin, My_btn, 85, 115 )

' Make button do something
CALLBACK( My_btn, demo5)




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

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



[bigbass]

dynamic combobox widget

read a text file into the combobox



' bacon-combobox.bac

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

' we want to "echo out" which Combobox_selected$ was pressed


SUB combo_choices_demo()
Combobox_selected$ = GRAB$(combo_choices)
PRINT Combobox_selected$
END SUB



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



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



result_input$ = EXEC$("cat /tmp/biglist2.txt")

'-----------------
SUB MAKE_FILE_LIST
'-----------------

SPLIT result_input$ BY NL$ TO words$ SIZE dim

   FOR i = 0 TO dim - 1

       combo_choices_text$ = words$[i]
   
       TEXT(combo_choices, words$[i])
       PRINT words$[i]
           
   NEXT

END SUB




combo_choices = COMBO("Select a name", 180, 30 )

MAKE_FILE_LIST

ATTACH(Mainwin, combo_choices,5, 30)
CALLBACK(combo_choices, combo_choices_demo)

DISPLAY


Attachments: