Finding positions to paint around a circle?
Posted
#1
(In Topic #794)
Guru

(Making a dial control)
If I use the following code…
Code (gambas)
- Paint.LineWidth = 1
- Paint.Ellipse(0, 0, 100,100)
- Paint.Stroke
But now i want to Paint things at various places around the circle
Say If it was a clock and i wanted to place 60 dots around it.
360 degrees divided by 60 places around the circumference
But what commands would i use to get those positions?
Any help appreciated
Posted
Regular

BruceSteers said
…360 degrees divided by 60 places around the circumference
But what commands would i use to get those positions?
A rotating vector can be generated using trigonometry, so I think you use the Cosine of the angle to find the x & y points to draw your dots/marks/mini-circles.
I'll try and generate an example when I have time later today, unless Charlie comes up with an oven-ready solution in the meantime.
Posted
Regular

It just uses a Form, DrawingArea and a Timer;
Code (gambas)
- intAngle = 0
- intRadius = dwgArea.Width * 0.4
- dwgArea.Refresh(intAngle)
- intAngle += 10
By changing line 19 to this, you get coverage of a second quadrant;
Code (gambas)
…and similar sign changes for the other 2 quadrants.
Obviously this is not the full solution to your problem, but I hope it sets you on the right path.
Posted
Guru

I'll try and generate an example when I have time later today, unless Charlie comes up with an oven-ready solution in the meantime.
That made the wife and me laugh this morning. In true cooking programming style, here is one I prepared earlier. Have a look at 'Analogue Clock' which is on the Gambas Farm. The maths was done by my friend Matt.
<IMG src="https://www.cogier.com/gambas/AN_CLOCK.png">
</IMG>
Posted
Guru

I have an old friend lives on your rock, Lucy Crick and her fella Mathew.
Thanks guys , i should be able to work stuff out from there
Posted
Guru

BruceSteers said
Not Matt Crick by any chance?
I have an old friend lives on your rock, Lucy Crick and her fella Mathew.
No not that Mathew, this one.
Posted
Guru

Run the code in a new graphical program.
<IMG src="https://www.cogier.com/gambas/GoFaster.png">
</IMG>Code (gambas)
- ' Gambas class file
- DA1 As DrawingArea
- .Height = 500
- .Width = 500
- .Padding = 5
- .Arrangement = Arrange.Vertical
- .Center
- .Text = "Go faster dial >>>>>>"
- .x = 0
- .y = 0
- .Height = 28
- .MaxValue = 360
- DA1.Clear
- ''Adds an outer circle
- ' With Paint
- ' .Begin(DA1)
- ' .LineWidth = 1
- ' .Arc(DA1.W / 2, DA1.H / 2, DA1.H / 2)
- ' .Stroke
- ' .End
- ' End With
- ''Draws the lines around the outside of the circle
- With Paint
- .Begin(DA1)
- Paint.Brush = Paint.Color(Color.Black)
- .LineCap = .LineCapRound
- .LineWidth = 2
- .Translate(DA1.W / 2, DA1.H / 2)
- .Translate(-(DA1.W / 2), -(DA1.H / 2))
- 'If iLoop Mod 5 = 0 Then iLen = 15 Else iLen = 25 ''For time
- .MoveTo(DA1.W / 2, DA1.H / iLen)
- .LineTo(DA1.W / 2, iLen)
- .Stroke
- .End
- ''Paints the pointer
- With Paint
- .Begin(DA1)
- Paint.Brush = Paint.Color(iCol)
- .LineCap = .LineCapRound
- .LineWidth = 10
- .Translate(DA1.W / 2, DA1.H / 2)
- .Translate(-(DA1.W / 2), -(DA1.H / 2))
- .MoveTo(DA1.W / 2, DA1.H / 2)
- .LineTo(DA1.W / 2, 40)
- .Stroke
- ''Paints the center circle and fills it in
- Paint.Brush = Paint.Color(Color.Blue)
- .Arc(DA1.W / 2, DA1.H / 2, 20)
- .Fill
- .Stroke
- .End
- Form_Resize()
Posted
Guru

cogier said
I have done a little more work on this. Does this help?
Run the code in a new graphical program.
That's awesome m8 thank you
minimalistic so easier to get my head around
To be honest, as much as I really appreciated the previous help it did give me a headache so i resorted to using images and the image.Rotate command.
But with that example i think i could get on it with a hand drawn object
My objective was to make a cool slider like object that spins like a dial.
What i've made is something i call ImageSpinner.class
<VIDEO content="https://bws.org.uk/images/screenrecord-2022-01-06_20.00.42.mp4">[video size=300,300]
You can use custom images for the background and for the button.
it's wip at mo and needs a lot of work on the mouse controls
With the above code example i think i can possibly add a custom background making property to add the ticks like on the dial of your example
Nice one fella, cheers
Posted
Guru

<IMG src="https://www.cogier.com/gambas/Dial.png">
</IMG>
Posted
Guru

cogier said
Hi Bruce, I had a look at your example and wondered if you were aware of the Dial available in Gambas. You need gb.qt5.ext for this: -
<IMG src="https://www.cogier.com/gambas/Dial.png"></IMG>
Haha , no i was not ,, that's exactly what i was aiming for. but not qt dependant.
I'm hoping to make mine highly customisable.
currently it has 2 modes, spinner and switch ,
spinner for a dial that goes round and round
and switch for a positional switch
1 guest and 0 members have just viewed this.


