Gauge gadget and ARC drawing

[blueb]

Stargate posted a small program a few years ago that shows a gauge -100 to +100...

http://www.purebasic.fr/english/viewtop ... 31#p356231

HTH
blueb

[netmaestro]

Looks like some fun. Let's make a start and cover the more difficult parts first. We'll draw a needle that we can use for an indicator and set it up so that it can be pointed anywhere on the gauge that is appropriate for the given temperature. You would create a table of temps with corresponding angles for the needle and to display the temperature just look up its angle and call the drawing procedure. Here's a small demo of what I have so far, I have to create the other image components like the face and bezel but before we spend time on that we'll get the needle working and test it (should be good to go on all platforms):

Code: Select all

Enumeration
  #Needle
  #Face
  #Bezel
  #Crystal
  #GaugeOutput
EndEnumeration

For i=#needle To #GaugeOutput
  CreateImage(i, 192, 192, 32, #PB_Image_Transparent)
Next

; Draw Needle Image...
StartVectorDrawing(ImageVectorOutput(#Needle))
  VectorSourceLinearGradient(90, 20, 96, 20)
  VectorSourceGradientColor(RGBA(206, 10, 10, 255), 0.0)
  VectorSourceGradientColor(RGBA(231, 156, 156, 255), 0.5)
  VectorSourceGradientColor(RGBA(206, 10, 10, 255), 1.0)
  MovePathCursor(93,20)
  AddPathLine(96,31)
  AddPathLine(96,90)
  AddPathLine(90,90)
  AddPathLine(90,31)
  ClosePath()
  FillPath()
StopVectorDrawing()

Procedure DrawGauge(gadget.i, angle.d)
  CreateImage(#GaugeOutput, 192,192,32,#PB_Image_Transparent)
  StartVectorDrawing(ImageVectorOutput(#GaugeOutput))
    ; // TODO: Draw the other image components to the output first
    ; // Then the needle gets drawn at the appropriate angle as we're doing now
    RotateCoordinates(96,96,angle)
    ResetPath()
    DrawVectorImage(ImageID(#Needle))
    ; // TODO: If there is a crystal image, draw it here
  StopVectorDrawing()
  SetGadgetState(gadget, ImageID(#GaugeOutput))
EndProcedure

OpenWindow(0, 0, 0, 400, 400, "", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)

AddWindowTimer(0, 1, 1)

ImageGadget(0, 100,100,192,192,ImageID(#GaugeOutput))
angle.d = -70.0
fwd=1

Repeat
  Event = WaitWindowEvent()
  If Event=#PB_Event_Timer
    DrawGauge(0, angle)
    
    If fwd
      angle+2.0 : If angle > 70.0  : fwd=0 : EndIf 
    Else
      angle-1.0 : If angle < -70.0 : fwd=1 : EndIf
    EndIf
  EndIf
Until Event = #PB_Event_CloseWindow

[davido]

@netmaestro,
Works smoothly on Windows 10.
Works very differently on my MacBook Pro i7. However, changing timeout from 1 to 5 and it works smoothly.

Nice example, thanks.

[Michael Vogel]

Some flickering here on a slower notebook, would use a CanvasGadget to get a smoother effect...

Code: Select all

:
Procedure DrawGauge(gadget.i, angle.d)
	CreateImage(#GaugeOutput, 192,192,32,#PB_Image_Transparent)
	StartVectorDrawing(ImageVectorOutput(#GaugeOutput))
	; // TODO: Draw the other image components to the output first
	; // Then the needle gets drawn at the appropriate angle as we're doing now
	RotateCoordinates(96,96,angle)
	ResetPath()
	DrawVectorImage(ImageID(#Needle))
	; // TODO: If there is a crystal image, draw it here
	StopVectorDrawing()
	StartDrawing(CanvasOutput(0))
	Box(0,0,192,192,#White); without that line you'll get a nice moire effect
	DrawAlphaImage(ImageID(#GaugeOutput),0,0)
	StopDrawing()
EndProcedure
:
CanvasGadget(0, 100,100,192,192)
:

[netmaestro]

That's just because it's a 32bit image in an image gadget, the finished version will use 24bit and there won't be flickering. The canvas gadget would do likewise but all those events aren't needed so an image gadget will be fine.

[Ioannis]

Hi.
This program returns an error at Line 10: CreateImage():Incorrect number of parameters.

I am new to PureBasic so please forgive my newbie questions.
Ioannis

Looks like some fun. Let's make a start and cover the more difficult parts first. We'll draw a needle that we can use for an indicator and set it up so that it can be pointed anywhere on the gauge that is appropriate for the given temperature. You would create a table of temps with corresponding angles for the needle and to display the temperature just look up its angle and call the drawing procedure. Here's a small demo of what I have so far, I have to create the other image components like the face and bezel but before we spend time on that we'll get the needle working and test it (should be good to go on all platforms):

Code: Select all

Enumeration
  #Needle
  #Face
  #Bezel
  #Crystal
  #GaugeOutput
EndEnumeration

For i=#needle To #GaugeOutput
  CreateImage(i, 192, 192, 32, #PB_Image_Transparent)
Next

; Draw Needle Image...
StartVectorDrawing(ImageVectorOutput(#Needle))
  VectorSourceLinearGradient(90, 20, 96, 20)
  VectorSourceGradientColor(RGBA(206, 10, 10, 255), 0.0)
  VectorSourceGradientColor(RGBA(231, 156, 156, 255), 0.5)
  VectorSourceGradientColor(RGBA(206, 10, 10, 255), 1.0)
  MovePathCursor(93,20)
  AddPathLine(96,31)
  AddPathLine(96,90)
  AddPathLine(90,90)
  AddPathLine(90,31)
  ClosePath()
  FillPath()
StopVectorDrawing()

Procedure DrawGauge(gadget.i, angle.d)
  CreateImage(#GaugeOutput, 192,192,32,#PB_Image_Transparent)
  StartVectorDrawing(ImageVectorOutput(#GaugeOutput))
    ; // TODO: Draw the other image components to the output first
    ; // Then the needle gets drawn at the appropriate angle as we're doing now
    RotateCoordinates(96,96,angle)
    ResetPath()
    DrawVectorImage(ImageID(#Needle))
    ; // TODO: If there is a crystal image, draw it here
  StopVectorDrawing()
  SetGadgetState(gadget, ImageID(#GaugeOutput))
EndProcedure

OpenWindow(0, 0, 0, 400, 400, "", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)

AddWindowTimer(0, 1, 1)

ImageGadget(0, 100,100,192,192,ImageID(#GaugeOutput))
angle.d = -70.0
fwd=1

Repeat
  Event = WaitWindowEvent()
  If Event=#PB_Event_Timer
    DrawGauge(0, angle)
    
    If fwd
      angle+2.0 : If angle > 70.0  : fwd=0 : EndIf 
    Else
      angle-1.0 : If angle < -70.0 : fwd=1 : EndIf
    EndIf
  EndIf
Until Event = #PB_Event_CloseWindow

[Little John]

Hi.
This program returns an error at Line 10: CreateImage():Incorrect number of parameters.

I am new to PureBasic so please forgive my newbie questions.
Ioannis

If you are getting that error message, then you are using a pretty old version of PureBasic. The syntax of the CreateImage() function has changed in the past. Using a recent PureBasic version, netmaestro's code runs well.

[Ioannis]

Thanks Little John,

Updated to 5.70 and runs OK now.

Other code samples found on the forum do not run even on 5.70 and are giving me errors of the type something is not a function, array, list, map or macro.

Have a lot to learn...

Ioannis

[netmaestro]

The types of errors you are getting could arise from a variety of sources. PureBasic is a living dynamic entity and it is constantly being updated and added to with new versions. When new versions arrive they sometimes bring some unwanted baggage with them, like commands that have been discontinued, updated libraries that are less compatible now, and many others. You just have to figure out how to give the compiler what it wants, which usually isn't too difficult. It is always fully explained in the docs when a new version drops that might cause a glitch.

[Ioannis]

I suppose so.

Thanks for the reply and support
Ioannis