Pulsating dot in a Canvas

General
1

I need some help in form of a Code Snippet please.

I would like to create a 16x16 Canvas which is transparent the most time. But sometimes a green circle should appear. Like a pulsating green light.
Never did this before and hope someone here already made something like this and is willing to share some code to get me started with. :slight_smile:

2

How about using a gif for this?

Have a look at the animation example in the example folder. This animates a soccer ball. You don’t need to change position but only the transparency value.

3

something like this ?
Example

4

Sascha within a WebApp? Use Rect (e.g. 24px width and height) and round corners of 12px on each corner in WebStyle.
To get the pulsating effect I would use the Animator Class to increase width and height and offset the position.

5

[quote=222618:@Tomas Jakobs]Sascha within a WebApp? Use Rect (e.g. 24px width and height) and round corners of 12px on each corner in WebStyle.
To get the pulsating effect I would use the Animator Class to increase width and height and offset the position.[/quote]

In a Webapp, this would be easy. :wink:
I am searching for a Windows/OS X Desktop App (32Bit) solution.

6

I imagined a pulse as a sine wave and came up with this. Change freq to make it pulse faster or slower and set seconds for the amount of time. Frames per second (fps) is defined in 2 places.

Add a Button, Timer, Canvas and property…


Property pulserFrame As Integer = -1  //tracks frame of animation, -1 is off


Sub Action()   //PushButton - resets and starts
  
  pulserFrame = 0
  
  const fps = 30

  pulserTimer.Period = 1000 / fps
  pulserTimer.Mode = 2

End Sub


Sub Action()  //pulserTimer - increments frame and tests for stop
  
  pulserFrame = pulserFrame + 1
  
  const fps = 30
  const secondsToRun = 4
  
  if pulserFrame >= fps * secondsToRun then  //stop
    pulserFrame = -1
    me.Mode = 0
  end
  
  pulserCanvas.Invalidate
  
End Sub


Sub Paint(g As Graphics, areas() As REALbasic.Rect)  //pulserCanvas
  
  if pulserFrame < 0 then return //skip drawing when off
  
  const freq = 2  //pulses per second
  const tau = 6.28318
  const fps = 30
  
  dim v As double = cos((pulserFrame / fps) * freq * tau) / 2 + 0.5
  
  g.ForeColor = RGB(0, 255, 0, v * 256)
  g.FillOval(0, 0, g.Width, g.Height)

End Sub
7

Thank you all for your examples. Thank you very much. I will test them later this day when i am at home and report back here.

8

Assuming you can use a shape as blinking object, this code works fine:

a) Add a timer, adjust the period to your desired frequency (500ms = 1Hz)
b) Add a circular shape and change fillcolor, border color. Name it pulsatingcircle (or whatever name you want)
c) In the timer’s action event, write
pulsatingcircle.visible = not pulsatingcircle.visible

You can initialize the visible property and the timer enabled properties.
When you want to stop the blinking, set the timer enabled to false, and the shape visibility to your “not blinking” state (visible or not).

9

With a combination of @Axel Schneider and @Will Shank examples i could make the following:

Download Link: https://www.sendspace.com/file/u6fike

The Pulser is a ContainerControl i can now use in my Project.

Thank you to all of you :slight_smile: