Working on BGRAKnob features

[SandyG]

Was looking for a nice Knob control, UEControls don't seem to work under Linux (Ubuntu 23.x and Raspberry PI5), so gave the BGRA control and worked pretty well visually but was lacking some thing I needed, and had almost no event handlers except OnValueChange.

I also added support for the mouse wheel when hovering and a wheel speed to adjust how fast the wheel interacts with the knob.

Lastly something that is annoying is most knobs are sensitive at the edges, ie, Min and Max where the pointer will snap around from min to max setting. I added an option to force a greater movement before this happens (SlowSnap == true)

Added the following Event handlers

OnClick
OnDoubleClick
OnMouseDown
OnMouseUp
OnMouseEnter
OnMouseExit
OnMouseWheel

(Not sure if others might be useful, but let me know while I'm tinkering around I can possibly add)

Needs a bit more testing, but will make a pull request (once I get git installed and sorted out).

The mouse wheel speed controls how fast the knob will spin vs. changes in the mouse wheel. IF 0, mouse wheel is disabled. 1 is the slowest and finest control, 255 is fastest and coarse control.

Toggle the 'Slow Snap' check box to see the effect while dragging near knob min/max extremes, it will still wrap, but you must cross past the min or max value with the mouse or it will not flip.

Double click on the form to reset some display stuff, but most of the labels will show event handlers. Nothing magical in the code, just setting captions and a few properties, all changes in the BGRAKnob codebase.

Just a quick test and toss together.

Learning as I go, hopefully

Can't attach the example as it's too large for the forum so here's a pic. Nothing visually different then the stock BGRAKnob



Sandy

[KodeZwerg]

Some ideas while you're at:
- unsure how you realized but by reading about the mouse glitch between drag min<->max value I would reduce the available radius that can be selected
   as angles, min = 15°, max = 75°, 15° to 75° needs to be recalculated to represent 0 to 100% or the give min/max value
- add option at what angle the 0° should be so users can have it upsidedown or left<->right instead of basic 0° is down
- per option selectable angle° or percent% or value display

To your upload problem, in general when you just zip the relevant project files (*.lpi, *.lpr, *.lps, *.pas, *.inc) and maybe if needed additional image(s), all together zipped at max compress should be okay for forums 500kb limit.

[SandyG]

Yes, I have some code that does calculate 0-100% given the range and the value of the Knob. I might add a new property for that instead of the angle. It work like you said, it uses the min/max settings to compute the correct 0-100%. Likely will need a setter and getter to convert percent to and from the internal angle value.

[EDIT]

Code: Pascal  [Select][+][-]

1. // code to convert knob value to a 0-100% value with respect to min and max settings
2.  
3.      label11.Caption := FloatToStr(((BGRAKnob1.Value - BGRAKnob1.MinValue )/ (BGRAKnob1.MaxValue - BGRAKnob1.MinValue)) * 100.0);
4.  

[END-EDIT]

The way the movement is limited is looking for hitting either the min or max setting. And only moving across the gap IF the angle is back into a valid region (or so I think).

I will add a property to do the 0-100% as that is something that is useful and what I have seen on other controls. But will leave the original as well so it will not break any existing functionality on the existing.

Not sure what you mean by 'value display' as the third option, please explain, might be easy.

Will have to zip up not only the project source, but the BGRAKnob source, not a big deal, just may be more complicated to get working for some.

Sandy

Some ideas while you're at:
- unsure how you realized but by reading about the mouse glitch between drag min<->max value I would reduce the available radius that can be selected
   as angles, min = 15°, max = 75°, 15° to 75° needs to be recalculated to represent 0 to 100% or the give min/max value
- add option at what angle the 0° should be so users can have it upsidedown or left<->right instead of basic 0° is down
- per option selectable angle° or percent% or value display

To your upload problem, in general when you just zip the relevant project files (*.lpi, *.lpr, *.lps, *.pas, *.inc) and maybe if needed additional image(s), all together zipped at max compress should be okay for forums 500kb limit.

[SandyG]

Oh, almost forgot...

Looking to also make it a continuous spinner, like an encoder wheel. This may be better as a different component as the output might need to be an event that it moved left or right, but not sure yet. It may also need to just accumulate the value as it rotates + or - based on step size.

Have to think about this as it's not quite the same as a relative position type of knob.

Sandy

[KodeZwerg]

Not sure what you mean by 'value display' as the third option, please explain, might be easy.

Sure, I can do that.
I was thinking about 3 different display modes, mode1 would display current position as angle (0° to 360°), mode2 as percent (0% to 100%), mode3 as value (min to max).
Maybe this gets the idea started:

Code: Pascal  [Select][+][-]

1. type
2.   TKnobDisplay = (kdNone, kdAngle, kdPercent, kdValue);

A property, maybe "Display" that uses TKnobDisplay as type.
In your actual paint method do a simple "case FKnobDisplay of" to prepare the correct string value.

I hope I was clear enough to describe it.

[SandyG]

I think the ability for the knob to display a value string should not be part of the basic knob. It's seems more like something that could be a composite component based on the BGRAKnob.

That being said where do you envision the value to be displayed if part of the actual BGRAKnob code?

I think 2 of the modes might be the same, i.e., mode 1 Angle would be the same as Mode 3 since the baseline value is an Angle and the position in degrees is always respected by the Min/Max. The only way this might work is if the knob has a StartAngle, EndAngle for setting the angular range,  and a MinValue, MaxValue property for a numeric range (either angle, number range, or percent). Have to think about this, makes things more complicated 

As an example -
Right now if the Min was 30, the angle and setting the value of the knob can never go lower then 30 degrees or read lower then 30, however in the Percent mode 30 degs in this case would be returning a value of 0%  since the knob is all the way off.

Sandy

Not sure what you mean by 'value display' as the third option, please explain, might be easy.

Sure, I can do that.
I was thinking about 3 different display modes, mode1 would display current position as angle (0° to 360°), mode2 as percent (0% to 100%), mode3 as value (min to max).
Maybe this gets the idea started:

Code: Pascal  [Select][+][-]

1. type
2.   TKnobDisplay = (kdNone, kdAngle, kdPercent, kdValue);

A property, maybe "Display" that uses TKnobDisplay as type.
In your actual paint method do a simple "case FKnobDisplay of" to prepare the correct string value.

I hope I was clear enough to describe it.

[KodeZwerg]

Actually you should have for such control 3 variable properties that deal with the logic.
1. Min = that value will be the lower bound, can be positive or negative
2. Max = that value will be the higher bound, must at least 1 value higher than Min
3. Pos = that value will be in range of Min and Max including Min or Max

those above will always work same way and brings live to a knob

kdValue = current Integer position within Min and Max
kdPercent = Min is the 0%, Max is the 100%, Pos be current float position within
kdAngle = Min is the 0°, Max is the 360°, Pos be current float position within

kdPercent and kdAngle needs to be calculated by normalization/mapping/spanning (however its called) and will always deliver a positive float.
kdValue can also be negative.

And my suggestion was, depends on the TKnobDisplay to prepare a string with the correct value and simple draw it on knob (i assume it got a canvas) or as a second "Pos"-Property

[SandyG]

Yes, I think most of that is right on the money. I think the confusion for me is that the base control is not a Fixed angle, ie, the Min and Max, are really not quite right. That is, it sets the angular minimum and angular max where the knob starts and stops. I think most of the other controls like that fix the angular rotation at something like 30-330 degrees, then set the scale from that fixed range. I think that is what was confusing me.

I will have to think if it's worth it to fix the 'swing' of the knob, but I would rather not if possible. I do like the idea of a range, especially something like -1 to 1 stuff like that.

So I think to keep the adjustable start and stop angle as well as what you have described might need an additionally startAngle and stopAngle properties besides the range properties. I may be making it too complicated at this point

Will think about if for a bit and see what I come up with

Thanks for all your input so far!

Sandy

Actually you should have for such control 3 variable properties that deal with the logic.
1. Min = that value will be the lower bound, can be positive or negative
2. Max = that value will be the higher bound, must at least 1 value higher than Min
3. Pos = that value will be in range of Min and Max including Min or Max

those above will always work same way and brings live to a knob

kdValue = current Integer position within Min and Max
kdPercent = Min is the 0%, Max is the 100%, Pos be current float position within
kdAngle = Min is the 0°, Max is the 360°, Pos be current float position within

kdPercent and kdAngle needs to be calculated by normalization/mapping/spanning (however its called) and will always deliver a positive float.
kdValue can also be negative.

And my suggestion was, depends on the TKnobDisplay to prepare a string with the correct value and simple draw it on knob (i assume it got a canvas) or as a second "Pos"-Property

[SandyG]

OK,

Did a first cut of the enhanced BGRA knob.

Added a KnobType to define the following
ktAngle - Returns number in a default range of 0-360
ktPercent - Retuns number in a of 0-100
ktRange - Returns numbers in any range as specified 0 to 100, 0 to 360, -5 to 10, -100 to 100, etc. May remove ktAngle and ktPercent as this does the same
ktSector - Changes knob into a 'sectored' type of switch. You can specify the number of sectors from 1 to 255

As mentioned ktAngle and ktPercent may be really useless since ktRange does the same, but allows for some presets I guess (Feedback needed)

NOTE : The range of the knob that is returned in the Value property is different from the StartAngle and EndAngle. So no matter what the StartAngle and StopAngle are set at, the range set by MinValue and MaxValue will always be returned.

An example might be a knob that starts at 0 and ends at 180 degrees, but can return a range of -100 to 0

MinValue/MaxValue Range is a returned value mapped across the span of the knob
StartAngle EndAngle are in degrees of how the knob will be set up.

Added a bunch of missing events, the original only had onValueChange.
Added Mouse wheel support for all knob types with an option to allow the mouse wheel to go past the ends of scale (wrap)
Added a 'Slow Snap' feature that will keep the position of the knob more stable when moving the mouse near endpoints and wrapping around

Also with some simple tricks the knob can be made to be continuous spinner wheel, but you will have to figure out how to track the way you need. Possibly may need to expose a new event for this, but not sure. You can try this with a StartAngle = 0 and EndAngle = 359.999

The attached zip has the sample project that can test a lot of the features, pretty self explanatory, look at the code if you need to know!

This is just the first (what I would say) working cut where things seem to work well, or so I think 

To do build the project, it's a bit of a hack since I don't have the files set up correctly in github, so for now, unzip the file into a clean directory where you can build Lazarus projects, look in the folder for the BGRAKnob directory. You will need to rename you existing BGRAKnob.pas in the components directory (where ever that may be installed) and copy the BGRAKnob.pas into that directory.

Compile the BGRA Controls via the package manager, and then install (will rebuild Lazarus).

Testing was done with BGRA Controls v9.0 on Win11. Will test on Linux shortly

At this point bring up the project and compile. It might work...

A little more clean and testing is in order but getting close.

Sandy 

[lainz]

Hi, my first question is if this is retro compatible with the original knob and if it's not sure to change the name (if you already didn't do)..

You wish to add this to BGRAControls?

[SandyG]

I tried to make it compatible with the default setting on any new properties to allow it to work as the knob did before, but I need to test it to see what might be a problem as well as test on Linux as I'm not sure how what Linux does with the mouse wheel and some values that are passed back vs. Windows.

It's not a problem to change the name if needed, it would have made testing a bit more difficult since I'm not familiar with how to get a component built, icons, installed, etc. withing the BGRA components framework.

I have a bit more work to do on a few 'Todo's' in the code, but whatever works to get it into the BGRA components is my plan and any Tips are very much welcome (Including coding!).

Sandy

Hi, my first question is if this is retro compatible with the original knob and if it's not sure to change the name (if you already didn't do)..

You wish to add this to BGRAControls?

[SandyG]

Just tried a simple test initially built with the original BGRA knob, then swapped out the bgraknob.pas and recompiled and reinstalled the package.

All worked fine, except for a needing to change a couple of default values to match the original knob Min and Max values which are 30 and 330 respectively. So will make an update for that, and clean up Todo's.

I'm having some issues on my Linux box, will need to try on another to verify mouse wheel.

Sandy

[lainz]

Ok keep going. Thanks for your efforts. 

[SandyG]

Got it finally cleaned up... or so I think

Tried it on an older version of Linux/Lazarus 2.x and seemed to work well. Mouse wheel values look the same as under Windows, so that makes it easy. Everything seems to check out on both O/S's. Fixed a bug that was causing the values not to be set from the design file. Removed debug stuff too.

Changed code to only have 2 types of knobs -
ktRange
ktSector

Previous version posted had ktAngle and ktPercent which were totally redundant as you can set those both as ktRange with the right values for the Min and Max values.

Also tested by replacing the STOCK/Original BGRAKnob.pas with the V2 version of the knob and it worked as before so that is a good sign for compatibility if upgrading.

@lainz what should I do with the source, should I just do a pull request for the BGRAKnob.pas file?  Someone besides me should definitely test.

Zip file includes v2 of BGRAKnob.pas and the test project, see above instructions for installing and building.

Sandy

[lainz]

Yes please do a pull request in the dev branch. Circular should test it because it's used in LazPaint.