Custom controls problem

Ask about the individual Gambas components here.
Post Reply
User avatar
BruceSteers
Posts: 1523
Joined: Thursday 23rd July 2020 5:20pm
Location: Isle of Wight
Contact:

Custom controls problem

Post by BruceSteers »

Hi all.
I am venturing in to the world of creating custom controls.

My first try. A Custom Checkbox :)

I call it Tickbox

How it differs to CheckBox... (edited)
Instead of the standard little x in a box a choice of custom stock images are used Setting the "TickBox1.Type" property. (forget that)

Instead of the standard little x in a box ANY custom or stock image can be used Setting the "TickBox1.Picture" property.

Text can be positioned to the left or right using the TickBox1.TextPosition = Align.Left (or Align.Right)Increasing font size will increase the button/image size too

It's current state is...
Working but a bit lacking in a few areas.

Things i am struggling with..
how to implement the controls internal layout and AutoResize property properly.

How to get the control to display properly in the IDE without a proper install into gambas
Or even if it's possible.
It displays okay when you run a program with the controls in them but they do not show in the IDE :(
THE ONLY way i can get it all to look good is by adding it to gb.form , if i add it as a control to gb.form and recompile/install gb.form then it displays in the ide just fine.

How they look just as a class..
CusomControlClass.png
how they look if you add them to gb.form and compile...
customControl_gb-form.png
Here's the class anyway so far. you may find it interesting.
TickBox.zip
It's been an education making it.
some of it is working but I am not sure how lol ;)
BruceS
Last edited by BruceSteers on Tuesday 9th March 2021 7:44pm, edited 3 times in total.
If at first you don't succeed , try doing something differently.
BruceS
User avatar
BruceSteers
Posts: 1523
Joined: Thursday 23rd July 2020 5:20pm
Location: Isle of Wight
Contact:

Re: Making custom controls

Post by BruceSteers »

how it looks using it
(yes i know the texts do not match the images lol :D I've been doing a lot of experimenting with different things)

all the objects in the image are TickBoxes that work just like checkboxes
snap.png
If at first you don't succeed , try doing something differently.
BruceS
User avatar
cogier
Site Admin
Posts: 1118
Joined: Wednesday 21st September 2016 2:22pm
Location: Guernsey, Channel Islands

Re: Making custom controls

Post by cogier »

How to get the control to display properly in the IDE without a proper install into gambas
Or even if it's possible.
You were so nearly there, it's just the name of the icon that's wrong. You need the class name. In .hidden/control you need tickboxim.png, and then it works.

Image
User avatar
BruceSteers
Posts: 1523
Joined: Thursday 23rd July 2020 5:20pm
Location: Isle of Wight
Contact:

Re: Making custom controls

Post by BruceSteers »

cogier wrote: Saturday 20th February 2021 11:55am
How to get the control to display properly in the IDE without a proper install into gambas
Or even if it's possible.
You were so nearly there, it's just the name of the icon that's wrong. You need the class name. In .hidden/control you need tickboxim.png, and then it works.
Aaah thanks Charlie but that was not my problem, that little icon i made is somewhere in my /usr/share/gambas3 folder so i did not notice it missing in the ide because the name was wrong in the source folder.

I do not think there is a solution to my issue.
Bruce Bruen on the m/l answered (he knows a ridiculous amount about gambas (slightly jealous lol)
Said they tried looking into it before but it was not worth it :(

the snapshot you posted should look like this..

Image

Like i said the only way to get it looking correct in the IDE is to install it into the gb.form component and re-compile gb.form :(
that's how i got the above snapshot , but it's a pain, to make adjustments/edits i have to do the following...
1. I've made a custom gambas source folder branch with git.
2. I've added the TickBox to gb.form in the branch
3. I make the changes to the class in the new branch , re-compile and re-install install gb.form.
4. then i have to close gambas and relaunch it to load the new gb.form.
5. If that didn't work then go back to step 3 and do it again.

It's a pain , without adding it to gb.form I get the snapshot you posted.
It does not show the texts just the object Names it does not show LH or RH text and it does not show the picture icons for each TickBox.
Add it to gb.form and boom , all works okay :(

Makes it very awkward to work on.

Sigh , maybe i should do what bruce said to do and "just write the code correct to begin with" ;) lol
He's a great help but a cheeky bugger (hmm we possibly share that in common) :lol:

Cheers anyway
Bruce
If at first you don't succeed , try doing something differently.
BruceS
User avatar
BruceSteers
Posts: 1523
Joined: Thursday 23rd July 2020 5:20pm
Location: Isle of Wight
Contact:

Re: Making custom controls

Post by BruceSteers »

And they said it couldn't be done.... :lol:

I say , pish posh , I'll find a way :)




Benoit gave me the clue when all he said was the IDE can only display controls loaded by the IDE itself.

So now in preferences i can set additional custom controls for gambas to load as it starts.

How it works...
You use dialog to select your control.gambas file and gambas saves it in its settings.
As gambas loads, all files in the custom control list have the ProjectDir/.info file copied to ProjectDir/.hidden/info/controlname.info and then it Tries Component.Load() on the control

And it works a treat as seen in the clip above :)

Changes to gambas code can be seen here...
https://gitlab.com/bsteers4/gambas/-/tr ... m-controls

Bruce
If at first you don't succeed , try doing something differently.
BruceS
User avatar
BruceSteers
Posts: 1523
Joined: Thursday 23rd July 2020 5:20pm
Location: Isle of Wight
Contact:

Re: Making custom controls (Painted)

Post by BruceSteers »

Hi all.

I went back to the drawing board with this, or more technically "back to the DrawingArea board ;) )

I've started to re-write it from scratch but the difference this time is i am not using any controls.
Ie. the last version was a Label and a Button control inside a panel and used panels and borders to highlight.

This version uses no controls at all and hand draws the CheckBox in a DrawingArea

It is incomplete , i have not done right handed text mode / Text alignment or properly done the event triggers yet but I have a problem I wonder if anyone knows a fix?

In the attached app is the new checkbox so far.
I can run in QT and it looks fine
I can run in gtk3 and looks fine
If i run with gtk2 then only one of the checkboxes get drawn ?? :-\


Run with GTK3...
Snap1.png

Run with GTK2...
Snap2.png

Any clues appreciated :)
BruceS
If at first you don't succeed , try doing something differently.
BruceS
User avatar
BruceSteers
Posts: 1523
Joined: Thursday 23rd July 2020 5:20pm
Location: Isle of Wight
Contact:

Re: Making custom controls

Post by BruceSteers »

Never mind the GTK2 problem folks it was a bug in 3.15.90 only that has now been fixed.
If at first you don't succeed , try doing something differently.
BruceS
User avatar
BruceSteers
Posts: 1523
Joined: Thursday 23rd July 2020 5:20pm
Location: Isle of Wight
Contact:

Re: Making custom controls

Post by BruceSteers »

Well this is much improved...

I've done away with any panels or Native controls and just drawn it manually in a DrawingArea

its got a few options (that possibly need tweaking)

text position can be left or right.

It's overall alignment can be set. meaning if it's in an expanded container it can align left right or center without a HBox and a spring

Text alignment can be set which will force the text area to fill the width of the expanse and align left right or center.
see pic for variations

Mouse Enter and Leave highlights nicer
keyboard Tab and arrow keys work to select focus (had to code the arrow keys)

Still a bit WIP (gotta refine text alignment as want to be able to align text without growing it)
but fairly functional now :)
I also need to work out how to implement the NoTabFocus property as at present it is faulty (that's why the box does not remove itself from the big thumbs up text)

thinking of changing the label to a TextLabel to enable a few html codes too.
If at first you don't succeed , try doing something differently.
BruceS
Post Reply