Android Question I can't see the line that i draw

[Enthousiastic]

Hello , i tried to make a voice meter taking as example the rotating needle from the beginners guide.
In line 102 i drew the line but when i compiled i can't see it.

What i have done wrong ?

This i want it as the beginning to use this line latyer in volume meter as animated needle.

Can you help me please ?

I don't understand the role of SRectNeedle and DRectNeedle from RotatingNeedle example in beginners guide.

Thanks Enthousiastic

 

[klaus]

Impossible to test your program, missing imagages.
The images files expected in the code dont correspond to those in the Assets folder.
It is frustrating trying to help on not working projects.
The problem is that you draw the line onto the Activity and you have an ImageView on top of it hiding the line !
In the RotatingNeedle program the needle is drawn with DrawBitmap.
This method needs a source rectangle and a destination rectangle (SRectNeedle and DRectNeedle).

 

[sorex]

you might need to invalidate for the changes to become visible. (didn't check the source yet)

 

[Enthousiastic]

Hello , sincerely apologize i sent it again and i removed the code that i don't need at the moment.
The draw line command is in line 88 as you see. In above answer you told me that the line is hidden . What can i do ?

Coming back in the question about SRectNeedle and DRectNeedle you ment that SRectNeedle is the needle position before animate and DRectNeedle after animate ?

 

[sorex]

try adding

pnlVumeter.Invalidate

after the drawline command.

see it as a refresh of the view.

 

[sorex]

sorry, I just see that you did it lower in the source.

I'll have a closer look at it.

 

[klaus]

In your new code you draw on pnlVumeter which is behind the ImvVumeter imageView hiding the line.
I would suggest you to add a transparent panel over pnlVumeter and draw on this one to be able to erase the current posintion. With this no need of ImvVumeter you can set the image as the pnlVumeter background image.

Coming back in the question about SRectNeedle and DRectNeedle you ment that SRectNeedle is the needle position before animate and DRectNeedle after animate ?

SRectNeedle is the whole rectangle of the needle bitmap.
DRectNeedle is rectangle of the needle bitmap centered on the compass panel before rotation.

 

[sorex]

indeed, the structure is not what it should be.

I corrected it below.

keep an eye on the !!!!!!!! comments.

    ImvNeedle.Initialize("")  
    'ImvNeedle.Bitmap = bmpneedle '!!!!!!!!! remove this
  '  ImvNeedle.Color=Colors.Transparent

  
    ax=pnlVumeter.Width
    ay=pnlVumeter.Height
    x1 = (100%x - bmpVumeter.Width) / 2
    y1 = (100%y - bmpVumeter.Height) / 2
    pnlVumeter.AddView(ImvVumeter, 0,0,ax, ay)
    pnlVumeter.AddView(ImvPlayOff,12,16,x1,y1)
    pnlVumeter.AddView(ImvRecOff,192,16,x1,y1)
    pnlVumeter.AddView(ImvPlayOn,12,16,x1,y1) ' when music plays
    pnlVumeter.AddView(ImvRecOn,192,16,x1,y1)  ' when records music
    pnlVumeter.AddView(ImvNeedle,105,15,ax,ay) ' !!!!!!!!!!!!!!!
    csvLine.Initialize(ImvNeedle) ' !!!!!!!!
    csvLine.DrawLine(5,5,50,150,Colors.Red,10dip) '!!!!!!
    ImvNeedle.Invalidate '!!!!!!!

 

[klaus]

I think that this is what you are looking for.
I changed a few things in your code:
- The vumeter bitmap had a light color part at the bottom, I removed it.
- The panel and the imageview you used to display the vumeter didn't respect the original whdth/heigt ratio.
- The needle is drawn with a line on a separate panel, no need to draw a bitmap.
- There is no need to have an ImageView on top of the vumeter panel, the vumeter bitmap is set to the vumeter panel background.
- Instead of using four ImageViews for the LEDs added in the code, only two added in the Designer are sufficient and chage their backgound image for the two states.

Attached the test project.

 

[Enthousiastic]

Hello thanks a lot ! I have a question about line 85 . The values -0.1847 * x * x + 6.9177 * x - 1.3645 , where they come off ?
How can you find the x,y coordinates generally ? Do you have another algorithm in mind ?

 

[klaus]

Sorry for answering somewhat late, but I was on travel the whole week.
The scale in your image is not linear, so I calculated a function with Excel and the equation you are refering to is the result.

How can you find the x,y coordinates generally ? Do you have another algorithm in mind ?

What coordinates you are speaking of ?
In the example of post #9, I calculated once the center of the needle pivot (NeedleX0, NeedleY0) according to the orientation of the scale ticks.
In the code I calculate the the angle with the equation you are refering to and then two other needle coordinates (NeedleX1, NeedleY1) with trigonometry.

 

[Enthousiastic]

Hello , klaus sorry for late answering , I was sick in the hospital . In your question now about coordinates . When i was young i start learning basic language with spectrum computer , if you know this small one with tape.There was a command goto x,y meaning in screen pixels. Now with panels if a panel has 320 x 240 dimensions , i confuse the dpi and canvas coordinates , when i want put or draw something. Sorry for my ignorense !
Now in above VoiceRec3 you sent me ( really fantastic and thank you ) , i put the code in Vizartest2 , but doesn't work . What i am doing wrong ?

Thanks in advanced , i am waiting your answer . I LOVE THIS FORUM IS AMAZING !!!

 

[klaus]

Now in above VoiceRec3 you sent me ( really fantastic and thank you ) , i put the code in Vizartest2 , but doesn't work . What i am doing wrong ?

- You must set the background color of pnlNeedle to transparent !
- You must respect the width / height ratio of the original image (290/120), I changed it from 180/120 to 180/75
and it works.

All drawings with a canvas are done in pixels.
To make a drawing density independant you shoud use dip values.

In your example, for the needle, the coordinates are calculated according to dimensions of pnlNeedle in pixels.
The only constraint is, as written above, the width / height ratio must remain the same as the original.