Canvas drawline over camera panel? how?

khos

Member
Licensed User
Longtime User
Hi there,

I have looking at trying to use the camera and the canvas drawline function to draw some lines over the camera (which is loaded into a panel). This works but line I am drawing is not showing over the top of the camera panel but behind it. See attached pic:
screen.png
How do get the line to show on top (z-index 0 ?).

I found this thread |link| it shows a screenshot how Erel managed to do it :) how?

I'd like to be able to draw a line using canvas over the top of a camera panel, any help would be most appreciated.



Here is the code I have played with:
Sub Process_Globals
'These global variables will be declared once when the application starts.
'These variables can be accessed from all modules.
End Sub

Sub Globals
Dim camera1 As Camera
Dim btnTakePicture As Button
Dim Panel1 As Panel
Dim Canvas1 As Canvas
End Sub

Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("1")
Canvas1.Initialize(Activity)
DrawLines
End Sub
Sub Camera1_Ready (Success As Boolean)
If success Then
Camera1.StartPreview
btnTakePicture.Enabled = True
Else
ToastMessageShow("Cannot open camera.", True)
End If
End Sub

Sub Activity_Resume
btnTakePicture.Enabled = False
camera1.Initialize(Panel1, "Camera1")
End Sub

Sub Activity_Pause (UserClosed As Boolean)
camera1.Release
End Sub

Sub DrawLines
Canvas1.DrawLine(0dip, 30dip, 600dip, 100dip, Colors.Red, 10dip)
Activity.Invalidate
End Sub

Sub Camera1_PictureTaken (Data() As Byte)
camera1.StartPreview
Dim out As OutputStream
out = File.OpenOutput(File.DirRootExternal, "1.jpg", False)
out.WriteBytes(data, 0, data.Length)
out.Close
ToastMessageShow("Image saved: " & File.Combine(File.DirRootExternal, "1.jpg"), True)
btnTakePicture.Enabled = True
End Sub

Sub btnTakePicture_Click
btnTakePicture.Enabled = False
camera1.TakePicture
End Sub


Do I need to change the order of how the objects are created or in the designer, do I do something there perhaps. I am stil new at all this stuff, so hopefully someone could lend a hand or provide some advise.

Thanks in advance :)
 

khos

Member
Licensed User
Longtime User
What is that checkered thing?, depending on what it is you could use "SendToBack"

for example:

B4X:
Dim Picture As ImageView

...

Picture.SendToBack


Thanks for the reply, will give that a go, the checkered thing is the camera when running in an emulator, not sure if that is right or not?

Thanks,
Kim
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
I would suggest you to use a transparent Panel on top of the image and set the Canvas to that Panel.
In your case the Canvas is set to the Activity which is the deepest background, everything else is in front of it.

Best regards.
 
Upvote 0

khos

Member
Licensed User
Longtime User
I would suggest you to use a transparent Panel on top of the image and set the Canvas to that Panel.
In your case the Canvas is set to the Activity which is the deepest background, everything else is in front of it.

Best regards.



Ok, if I try to change to:
Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("1")
Canvas1.Initialize(Panel1)
DrawLines
End Sub

I cannot see the red line at all when running the code, would it be possible to review my code and advise line(s) I might need to change?
 
Upvote 0

khos

Member
Licensed User
Longtime User
Aha, wait got it sorted by adding another panel and using that with the "canvas Canvas1.Initialize(Panel2)", excellent! Thanks to everyone that help, most appreciated.

Vielen Dank Klaus :)
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
It depends on what you already have on Panel1.
Is Panel1 added in the Designer or by code ?
You could put Panel1 in front with Panel1.BringToFront to make shure that it is the top most.
Sometimes you need to add Panel1.Invalidate.
Probably with your Panel2 it works because it is the last view added so it is the top most.
If you are interested in you could post your project and I'll have a look at.

Best regards.
 
Upvote 0
Top