Very Simple GUI

[bplus]

Hope to save you a bit of work:  Labels should not be clickable.  They are what they are, labels to describe something.  If you want to replace the label whilst the program is running, then the existing should be deleted and new label added within the code.  For instance, you may have a label describing what a button should do, but when you click the button, you may no longer need the label, or may need to change it to something else.

However, I am not happy with the colours used for the controls.  I would like to see something like the normal Windows colours, but with the ability to change the colours whilst the program is running.  At the moment, there doesn't appear to be any way of doing this without going back into the library files.

Clickable labels is what Fellippe was doing with his Tic Tac Toe revision, see video.

What are normal Windows colors? Depends on preferences or themes doesn't it? I did show where in the BI colors are created just change it to what you want.

Anyway, custom colors coming up with a final Makeover for June 2022. I hope to have Text Box fixed and a number of Options for the controls including Font Height so that you, the GUI app developer, may have more control, maybe a couple new control types as well.

[bplus]

Properties is a Visual Basic term for all the qualities a control has to do what it is designed to do. For want of a better word that is the subject of this post.

Currently the list is (for adding a (New)Control to bas code under NewControl function:
ConType: Button=1, TextBox = 2, ListBox = 3, Label = 4, PictureBox = 5
X and Y for top left corner of box
W and H for width and height of box
Text for main string associated with control.

Additionally or internally there are:
N1 to N6 Long Type for addition numbers the control needs to do it's thing and can be used in code for further manipulation.
Text2 is  2nd string used internally to help the control do it's thing.

Proposed new Properties I've been sketching out:
FC and BC for Fore and Back colors of control to satisfy RNBW's request which is very fitting.

Also fitting, FontH for Coolman's request for readable Font size for his use and potential users, watching Fell's video, we may have to specify different Fonts. I am impressed that Font's and Font heights could be used in Fells text boxes and List boxes, because of the unstable print widths that have to be anticipated.

File for images (Button or Picture Box), data for List, and now I see Font. Hmm, might have to read file extension to use either as Font or image or data.... maybe have to parse file property to see if 2 files are listed for Picture Box?

TabStop - whether a control is important or not for user to Tab to or be next automatically activated control.

Hide/Hidden - whether the control should be shown/drawn in and is actively used in code section that is activated.

These seem to me to be next most important properties to add and already I am stuck on how to pass color values. I was first thinking of adding an opts$ parameter to NewControl but color numbers are complicated RGB needs 3 numbers, &H numbers need &H and  probably ~& tacked onto an 8 digit text or number... ? Too much parsing of opts$ in my opinion, so probably just go with default set of values to get the control on board in code.

So is this the essential minimal list, it is going to go back and change something the farther we go adding properties.

Speaking of essential and minimal, I've ruled out Radio Buttons because a List box does the same thing, one selection from many. A check box is pretty much more than covered with Text Box which can not only do y/n for yes or no, but also single digits for numbers or letters... ie not essential controls also progress bars are just a special case of a picture box ie just require some sub or function routine to modify a picture box to function as a progress bar.

Back to the color Dilemma, if I am forced to create a routine to convert some text to a color, I could get by with a 3 digit number system each digit is a red, green, blue scale from 0-9. But can people live with only 1000 colors? 3 digits number is pretty simple and really about the limit the human eye could detect and name or guess with a 3 digit number ie guess the red value from 0 none to 9 all, green/yellow value 0 none and 9 to all, blue value 0 none to 9 all...???

Yesterday and Monday, I helped my brother change out a chandelier 18' up, it hangs nearly 90" long! He rented scaffolding (anticipated) and a truck (not anticipated because of a miss measure of his van)  Rental BTW was 20$ for first 45 mins and additional fees for every 15 mins after that ABSOLUTELY NO OVERNIGHT rentals without huge, huge fine! Plus .40 milage, $300 security deposit but no extra insurance thing like Car Rental places. Anyway, at several points along the way 2 minds were better than one specially when both those minds had watched different You Tubes for putting up scaffolding. Several points along the way, I would have given up and we did just plain luck out and successfully completed the project without serious injury to ourselves or giant window and glass door we worked next to. This included an assembly of scaffold over a stairway due to another miss-measure that did not account for molding and wheel base of scaffolding increasing the width needed to fit in a hallway, sheez it's a miracle it all worked.

My point is, I can't and don't even want to try to do this alone!

[Coolman]

hello @bplus. i am testing under linux and freebasic raylib and its module raygui which allows to manage a graphic interface with many gadgets. see the post here :

https://www.freebasic.net/forum/viewtopic.php?t=31729

for a correct installation and a correct use of raylib and raygui. all the examples work and the resultas is very good. to see:

raygui_controls_test_suite.bas

test the examples. they are impressive.

well. the documentation is insufficient but by studying the examples, it is possible to do interesting things with this gui.

the same wrapper for qb64. that would be nice.

the work you have done is excellent but it seems that you want to create a complete gui. this was not the purpose of my post:

https://qb64phoenix.com/forum/showthread.php?tid=281

i guess you had the idea to create a gui by looking at this post.

i was thinking of a simple and light gui with eventual font size management. this gui could be used to create light programs with a simple window. it would take a lot of time and motivation to create a complete gui based only on qb64 graphics commands. for this, the adaptation of raylib and its module raygui to qb64 could be done in a few days with a complete wrapper. and it would be a multiplatform solution. the last advantage is that raylib can be compiled in static mode and requires no dependencies.

[bplus]

Well yes, I do not want dependencies but already have some Font file need and direnter.h so maybe dependcies is not thing I am after... not sure what I am after, maybe just build a GUI I can understand and use sticking to essential GUI... I don't know... just something to do?

I know I don't like using someone else library mainly because I don't know all ins and outs of using it and you can only know that if you build it or watch it being built from the start, ie knowing all the thinking that went into to project. That is learning it from ground up and not from some abstract manual after the thing is done.

@Coolman it was probably RNBW's post with the FB attempt that got me hooked, that plus memories of my difficulties with Fellippe's Project. BTW I have whole new appreciation of that looking over just the one video for Tic Tac Toe update with Labels! Really nice work Fellippe! Rho Sigma's project is great too, I am sure, just look at the skins on his controls! but I downloaded it some years ago and his model is based on something I had 0 experience with so very hard to relate, with Fellippe's at least we have same VB base experience. BTW if Fellippe had a text property for Text Boxes and an TextEditor Box like a word processor, like VB, this thread would not exist, I'd probably be posting way more InForm projects.

So I will probably appreciate more your (Coolman's) raylib links later on too. I think I have to try the thing myself first though.

[bplus]

Here is 3 Digit Color Picker I was talking about yesterday, run this file along side upcoming Control Designer Form for 3 digit colors 1000 colors. In screenshot I found closest pure green that matched Pic Box Title BC.

Code: (Select All)

Option _Explicit
'$include:'vs GUI.BI'
'   Set Globals from BI              your Title here VVV
Xmax = 400: Ymax = 540: GuiTitle$ = "3 Digit Color Picker"
OpenWindow Xmax, Ymax, GuiTitle$ ' need to do this before drawing anything from NewControls
' GUI Controls
'                     Dim and set Globals for GUI app
Dim Shared As Long lblC, TBC, btnC, picC, btnR0, btnG0, btnB0, btnRP, btnGP, btnBP, btnRM, btnGM, btnBM
Dim Shared As Long btnR9, btnG9, btnB9, btnR5, btnG5, btnB5

lblC = NewControl(4, 10, 20, 200, 32, "3 Digit Color:")
TBC = NewControl(2, 220, 20, 50, 32, "000")
btnC = NewControl(1, 290, 20, 100, 32, "Color")

picC = NewControl(5, 10, 70, 380, 200, "Color Sample")

btnR0 = NewControl(1, 30, 290, 100, 32, "Red 0")
btnG0 = NewControl(1, 150, 290, 100, 32, "Green 0")
btnB0 = NewControl(1, 270, 290, 100, 32, "Blue 0")

btnR5 = NewControl(1, 30, 340, 100, 32, "Red 5")
btnG5 = NewControl(1, 150, 340, 100, 32, "Green 5")
btnB5 = NewControl(1, 270, 340, 100, 32, "Blue 5")

btnR9 = NewControl(1, 30, 390, 100, 32, "Red 9")
btnG9 = NewControl(1, 150, 390, 100, 32, "Green 9")
btnB9 = NewControl(1, 270, 390, 100, 32, "Blue 9")

btnRP = NewControl(1, 30, 440, 100, 32, "Red +1")
btnGP = NewControl(1, 150, 440, 100, 32, "Green +1")
btnBP = NewControl(1, 270, 440, 100, 32, "Blue +1")

btnRM = NewControl(1, 30, 490, 100, 32, "Red -1")
btnGM = NewControl(1, 150, 490, 100, 32, "Green -1")
btnBM = NewControl(1, 270, 490, 100, 32, "Blue -1")

' End GUI Controls

Dim Shared As _Unsigned Long SampleC

MainRouter ' after all controls setup

Sub BtnClickEvent (i As Long)
    Dim t3$
    Select Case i
        Case btnC ' update Color Sample from TB text
            SampleC = c3S~&(con(TBC).Text)
            _Dest con(picC).N1
            Color , SampleC
            Cls
            _Dest 0
            drwPic picC, 0
        Case btnR0
            t3$ = Right$("000" + _Trim$(con(TBC).Text), 3) ' make sure we are right size
            Mid$(t3$, 1, 1) = "0"
            con(TBC).Text = t3$
            drwTB TBC, 0
            BtnClickEvent btnC
        Case btnG0
            t3$ = Right$("000" + _Trim$(con(TBC).Text), 3) ' make sure we are right size
            Mid$(t3$, 2, 1) = "0"
            con(TBC).Text = t3$
            drwTB TBC, 0
            BtnClickEvent btnC
        Case btnB0
            t3$ = Right$("000" + _Trim$(con(TBC).Text), 3) ' make sure we are right size
            Mid$(t3$, 3, 1) = "0"
            con(TBC).Text = t3$
            drwTB TBC, 0
            BtnClickEvent btnC
        Case btnRP
            t3$ = Right$("000" + _Trim$(con(TBC).Text), 3) ' make sure we are right size
            If Val(Mid$(t3$, 1, 1)) < 9 Then
                Mid$(t3$, 1, 1) = _Trim$(Str$(Val(Mid$(t3$, 1, 1)) + 1))
                con(TBC).Text = t3$
                drwTB TBC, 0
                BtnClickEvent btnC
            End If
        Case btnRM
            t3$ = Right$("000" + _Trim$(con(TBC).Text), 3) ' make sure we are right size
            If Val(Mid$(t3$, 1, 1)) > 0 Then
                Mid$(t3$, 1, 1) = _Trim$(Str$(Val(Mid$(t3$, 1, 1)) - 1))
                con(TBC).Text = t3$
                drwTB TBC, 0
                BtnClickEvent btnC
            End If
        Case btnGP
            t3$ = Right$("000" + _Trim$(con(TBC).Text), 3) ' make sure we are right size
            If Val(Mid$(t3$, 2, 1)) < 9 Then
                Mid$(t3$, 2, 1) = _Trim$(Str$(Val(Mid$(t3$, 2, 1)) + 1))
                con(TBC).Text = t3$
                drwTB TBC, 0
                BtnClickEvent btnC
            End If
        Case btnGM
            t3$ = Right$("000" + _Trim$(con(TBC).Text), 3) ' make sure we are right size
            If Val(Mid$(t3$, 2, 1)) > 0 Then
                Mid$(t3$, 2, 1) = _Trim$(Str$(Val(Mid$(t3$, 2, 1)) - 1))
                con(TBC).Text = t3$
                drwTB TBC, 0
                BtnClickEvent btnC
            End If
        Case btnBP
            t3$ = Right$("000" + _Trim$(con(TBC).Text), 3) ' make sure we are right size
            If Val(Mid$(t3$, 3, 1)) < 9 Then
                Mid$(t3$, 3, 1) = _Trim$(Str$(Val(Mid$(t3$, 3, 1)) + 1))
                con(TBC).Text = t3$
                drwTB TBC, 0
                BtnClickEvent btnC
            End If
        Case btnBM
            t3$ = Right$("000" + _Trim$(con(TBC).Text), 3) ' make sure we are right size
            If Val(Mid$(t3$, 3, 1)) > 0 Then
                Mid$(t3$, 3, 1) = _Trim$(Str$(Val(Mid$(t3$, 3, 1)) - 1))
                con(TBC).Text = t3$
                drwTB TBC, 0
                BtnClickEvent btnC
            End If
        Case btnR9
            t3$ = Right$("000" + _Trim$(con(TBC).Text), 3) ' make sure we are right size
            Mid$(t3$, 1, 1) = "9"
            con(TBC).Text = t3$
            drwTB TBC, 0
            BtnClickEvent btnC
        Case btnG9
            t3$ = Right$("000" + _Trim$(con(TBC).Text), 3) ' make sure we are right size
            Mid$(t3$, 2, 1) = "9"
            con(TBC).Text = t3$
            drwTB TBC, 0
            BtnClickEvent btnC
        Case btnB9
            t3$ = Right$("000" + _Trim$(con(TBC).Text), 3) ' make sure we are right size
            Mid$(t3$, 3, 1) = "9"
            con(TBC).Text = t3$
            drwTB TBC, 0
            BtnClickEvent btnC
        Case btnR5
            t3$ = Right$("000" + _Trim$(con(TBC).Text), 3) ' make sure we are right size
            Mid$(t3$, 1, 1) = "5"
            con(TBC).Text = t3$
            drwTB TBC, 0
            BtnClickEvent btnC
        Case btnG5
            t3$ = Right$("000" + _Trim$(con(TBC).Text), 3) ' make sure we are right size
            Mid$(t3$, 2, 1) = "5"
            con(TBC).Text = t3$
            drwTB TBC, 0
            BtnClickEvent btnC
        Case btnB5
            t3$ = Right$("000" + _Trim$(con(TBC).Text), 3) ' make sure we are right size
            Mid$(t3$, 3, 1) = "5"
            con(TBC).Text = t3$
            drwTB TBC, 0
            BtnClickEvent btnC
    End Select
End Sub

Sub LstSelectEvent (control As Long)
    Select Case control
    End Select
End Sub

Sub PicClickEvent (i As Long, Pmx As Long, Pmy As Long)
    Select Case i
    End Select
End Sub

Sub PicFrameUpdate (i As Long)
    Select Case i
    End Select
End Sub

Function c3S~& (digit3$) ' parameter as a string of 3 digits
    Dim s3$
    Dim As Long r, g, b
    s3$ = Right$("000" + digit3$, 3)
    r = Val(Mid$(s3$, 1, 1)): If r Then r = 28 * r + 3
    g = Val(Mid$(s3$, 2, 1)): If g Then g = 28 * g + 3
    b = Val(Mid$(s3$, 3, 1)): If b Then b = 28 * b + 3
    c3S~& = _RGB32(r, g, b)
End Function

' not used in this app but is c3s~& partner in Coloring from 3 digits
Function c3I~& (i As Long) 'parameter as an integer up 0-999 noi red until 3rd digit!
    Dim s3$
    Dim As Long r, g, b
    s3$ = Right$("000" + _Trim$(Str$(i)), 3)
    r = Val(Mid$(s3$, 1, 1)): If r Then r = 28 * r + 3
    g = Val(Mid$(s3$, 2, 1)): If g Then g = 28 * g + 3
    b = Val(Mid$(s3$, 3, 1)): If b Then b = 28 * b + 3
    c3I~& = _RGB32(r, g, b)
End Function


'$include:'vs GUI.BM'

   

[bplus]

I found the Form Designer to be quite clunky as far as adding Controls goes, it's easier and faster to just type stuff in, so I am going to create a form you can fill out in your favorite (default .txt file editor) to pass your Control Property Values back to the made over Form Designer.

Code: (Select All)

Fill in Control Property Values on the Right side of equal sign.

                                Control Name / Handle =
Control type 1:Btn, 2:TB, 3:Lst, 4:Lbl, 5:Pic conType =
                                          Left side X =
                                                Top Y =
                                              Width W =
                                             Height H =
                                       Font Height FH =
                                                 Text =
              Font .ttf, Data .txt or Image .png File =
                                3 Digit Fore Color FC =
                                3 Digit Back Color BC =
                   T/F, Yes:-1 or No:0 = -1  Tab Stop = -1
                  T/F: active/hidden use -1 or 0 Hide = -1

Note:
All are Long number types except Text and File which are strings, colors are 3 digits Integers for RGB conversion.

[bplus]

A tiny correction to the 3 Digit Color picker. The 2nd Dim Shared line for the Control handles was missing an "As Long" Type specification, probably would not effect performance but just in case...

And now the zip has been replaced.

[bplus]

This went pretty well! Now you make controls from a form in your favorite txt editor, the QB64 code reads the form and writes the NewControl line for your app and you check it over and add it to the Control Stack.txt file if looks OK or send it back to editor (or quit).

Code: (Select All)

_Title "Make New Controls with Properties" ' b+ 2022-06-30
' oh put in defaults if things are left blank, eh do it with NewControl Function need to know conType.

Input "Clear the Controls Stack.txt file (for fresh start)? Enter y/n "; answer$

If LCase$(answer$) = "y" Then
    Open "Controls Stack.txt" For Output As #1
    Close #1
End If
Do
    Input "Enter 'e' to Edit last control saved, enter 'a' for A new control blank, enter 'q' to Quit "; answer$
    If LCase$(answer$) = "e" Then
        GoTo edit
    ElseIf answer$ = "a" Then
        GoTo again
    Else
        End
    End If

    again: ' fresh form
    Open "Control Properties Form.txt" For Output As #1
    Print #1, "      Edit your New Control Properties as needed:"
    Print #1, ""
    Print #1, "  Tip: Run the 3 Digit Color Picker with the txt Editor."
    Print #1, ""
    Print #1, "                                Control Name / Handle = "
    Print #1, "Control type 1:Btn, 2:TB, 3:Lst, 4:Lbl, 5:Pic conType = "
    Print #1, "                                          Left side X = "
    Print #1, "                                                Top Y = "
    Print #1, "                                              Width W = "
    Print #1, "                                             Height H = "
    Print #1, "                                       Font Height FH = "
    Print #1, "                                3 Digit Fore Color FC = "
    Print #1, "                                3 Digit Back Color BC = "
    Print #1, "                       T/F, Yes:-1 or No:0   Tab Stop = -1"
    Print #1, "                  T/F: active/hidden use -1 or 0 Hide = 0"
    Print #1, "                                                 Text = "
    Print #1, "              Font .ttf, Data .txt or Image .png File = "
    Print #1, ""
    Print #1, ""
    Print #1, "Fill out the parts right of = sign, Save and Exit you txt Editor."
    Print #1, ""
    Print #1, "Note:"
    Print #1, "All are Long number types except Text and File which are strings, colors are 3 digits Integers for RGB conversion."
    Close #1

    edit: ' current form
    Shell Chr$(34) + "Control Properties Form.txt" + Chr$(34)

    ' Write a NewControl line and check it
    Open "Control Properties Form.txt" For Input As #1
    For i = 1 To 5
        Line Input #1, fl$
    Next
    s$ = RightOf$(fl$, "=") + " = NewControl(" ' name/handle
    Line Input #1, fl$
    s$ = s$ + RightOf$(fl$, "=") + ", " ' contype
    Line Input #1, fl$
    s$ = s$ + RightOf$(fl$, "=") + ", " ' X
    Line Input #1, fl$
    s$ = s$ + RightOf$(fl$, "=") + ", " ' Y
    Line Input #1, fl$
    s$ = s$ + RightOf$(fl$, "=") + ", " ' W
    Line Input #1, fl$
    s$ = s$ + RightOf$(fl$, "=") + ", " ' H
    Line Input #1, fl$
    s$ = s$ + RightOf$(fl$, "=") + ", " ' FH
    Line Input #1, fl$
    s$ = s$ + RightOf$(fl$, "=") + ", " ' FC
    Line Input #1, fl$
    s$ = s$ + RightOf$(fl$, "=") + ", " ' BC
    Line Input #1, fl$
    s$ = s$ + RightOf$(fl$, "=") + ", " ' Tab
    Line Input #1, fl$
    s$ = s$ + RightOf$(fl$, "=") + ", " ' Hide
    Line Input #1, fl$
    s$ = s$ + Chr$(34) + RightOf$(fl$, "=") + Chr$(34) + ", " ' Text
    Line Input #1, fl$
    s$ = s$ + Chr$(34) + RightOf$(fl$, "=") + Chr$(34) + ")" ' File
    Close #1
    Print s$ ' let's see what we have
    Input "Add to Controls Stack y/n"; answer$
    If LCase$(answer$) = "y" Then
        Open "Controls Stack.txt" For Append As #1
        Print #1, s$
        Close #1
    End If
Loop

' update these 2 in case of$ is not found! 2021-02-13    mod with trim$  for this app
Function RightOf$ (source$, of$)
    If InStr(source$, of$) > 0 Then RightOf$ = _Trim$(Mid$(source$, InStr(source$, of$) + Len(of$))) Else RightOf$ = ""
End Function

[Kernelpanic]

Very good work - and a lot of effort. It's no longer a simple GUI.

First of all, the color is not important. Important for a GUI is what the screenshot shows. I created an EXE file from the "Tax" (Mehrwertsteuer) program. A GUI has to be able to do something like that, and that can no longer be easy.

It would be the best to combine Visual Basic with the possibilities of QB64, a up to date version of Quick Basic - but it will be probably a wet dream. One thing is for sure, you have learned a lot. - There is no simple GUI. That is an illusion.
Keep cool! 


ARKONA - Stenka Na Stenku

[bplus]

Still a ways to go but...
   

There's 4 different fonts in that snapshot.