Android Question Draw Canvas Lines (Angles) with Angle Numbers Each End

A

Azhar

Active Member
Licensed User
Longtime User
Hi All,

My app draws two lines (shaded rectangles) to represent two Airport Runways exactly to the angles that the user entered.
I just need to place the runway markers at each end to represent the angle each runway is pointing to.
I start off with drawing a shaded long and thin rectangle and their respective angles are configured through the app (so each long/thin rectangle is rotated)
My problem now is knowing how to place text markers at each end and preferably rotate and align the text runway markers along the axis of their respective runway.
Can anyone give me an idea of how to locate the ends of each runway?

part of drawing the runways: 
    'setup canvas for the visualise runway/wind
    Dim cvs As Canvas
    cvs.Initialize(pnlVisualise)
    Dim rwy1 As Rect
    Dim rwy2 As Rect
    Dim rwy1Angle, rwy2Angle As Int
   
    rwy1Angle = common.Val(lblRWY1L.Text) * 10
    rwy2Angle = common.Val(lblRWY2L.Text) * 10

    rwy1.Initialize(200dip,100dip,220dip,350dip)
    cvs.DrawRectRotated(rwy1,Colors.Gray,True,5,rwy1Angle)
   
    rwy2.Initialize(200dip,100dip,220dip,350dip)
    cvs.DrawRectRotated(rwy2,Colors.DarkGray,True,5,rwy2Angle)
    Activity.Invalidate
   
End Sub
 
Sort by date Sort by votes
E

emexes

Expert
Licensed User
Something like this, maybe:
B4X: 
Dim RunwayMiddleX As Int = (100 + 220) / 2
Dim RunwayMiddleY As Int = (200 + 350) / 2

Dim RunwayRadius As Int = (220 - 100 + 350 - 200) / 2 / 2
Dim LabelRadius As Int = RunwayRadius + 30    'eg labels 30 pixels past end of runway

Dim RunwayAngleDegrees = RunwayNumber * 10
Dim RunwayAngleRadians = RunwayAngleDegrees / 180 * 3.14159

Dim LabelX As Int = RunwayMiddleX + Sin(RunwayAngleRadians) * LabelRadius - half of label width?
Dim LabelY As Int = RunwayMiddleY + Cos(RunwayAngleRadians) * LabelRadius - half of label height?

edit:
1/ might have to add 180 degrees to runway angle to get label at the correct (incoming) end
2/ will leave it to you to rotate the labels; trick might be to put them on a panel and then rotate the panel

epiphany:
put the runway and its runway number labels onto a panel, and then rotate the panel - the runway numbers will rotate with the runway - magic!

yikes:
you don't even need a canvas, can all be done with Designer widgets
 
Last edited:
Upvote 0
E

emexes

Expert
Licensed User




B4X: 
Private Label1 As Label
Private Label2 As Label
    
Private Pane1 As B4XView
    
Dim Timer1 As Timer
Dim RunwayAngle As Int

Timer1.Initialize("Timer1", 100)
Timer1.Enabled = True

Sub Timer1_Tick
    
    RunwayAngle = RunwayAngle + 1
    If RunwayAngle >= 360 Then
        RunwayAngle = RunwayAngle - 360
    End If
    
    Dim RunwayNumber As Int = RunwayAngle / 10

    Label2.Text = NumberFormat(RunwayNumber, 2, 0)
    Label1.Text = NumberFormat((RunwayNumber + 18) Mod 36, 2, 0)
    
    Pane1.Rotation = RunwayAngle
    
End Sub
 
Upvote 0
A

Azhar

Active Member
Licensed User
Longtime User
This is absolutely fantastic Emexes.
I really can't thank you enough for your expertise.
I'll give it a whirl now.

Azhar
 
Upvote 0
E

emexes

Expert
Licensed User
Azhar said:
This is absolutely fantastic
Click to expand...
Yeah, I was pretty chuffed with how well it turned out too. ?

Later thoughts were:
1/ make the runways gray or black(er) like yours, to match color of concrete or asphalt
2/ make runway numbers to be white on a black panel, like real runway numbers
3/ rotate top runway number 180 degrees to face incoming landings
4/ maybe even move the numbers onto the runway (but perhaps they'll then be too small)
5/ use the same panel-rotation trick to point a windsock or weathervane in the wind direction
6/ use Pane3.Visible = False to hide second runway

 
Last edited:
Upvote 0
A

Azhar

Active Member
Licensed User
Longtime User
I know this is a silly question but how do I initialize Pane1?

EDIT> Duh It's okay. Sussed it out now. This is great
 
Last edited:
Upvote 0
E

emexes

Expert
Licensed User
Azhar said:
how do I initialize Pane1?
Click to expand...
Pane1 should be initialized automatically by LoadLayout.

I did it in B4J but I know that B4A has the same ability to rotate panels, just using slightly different words (eg Pane vs Panel).

This is great
Click to expand...
Yeah, my eyes nearly fell out when @klaus showed me panel rotations.
 
Last edited:
Upvote 0
A

Azhar

Active Member
Licensed User
Longtime User
emexes said:
Check out these two samples of rotating with a super-basic el cheapo phone:

https://www.dropbox.com/s/spvnsh0m53wloe1/VID_20190403_223646.mp4

https://www.dropbox.com/s/qhym1b0i3hjxdg1/RotationSquared.mp4
Click to expand...
I'll take a look at those samples, but this is what I have so far...



The user enters the runway co-ordinates on the main runway first and I basically shaded that runway darker grey.
The little wind arrow was basically a fontawesome icon in a label as B4XView so that I could rotate it as per the panels (Runways).
What I might do is fill the runway panels with a generic runway .jpeg or something and see how that goes. That'll give a realistic image for sure.
Cool hey?
Thanks so much
 
Upvote 0
E

emexes

Expert
Licensed User
Looks great. Perhaps highlight the suggested runway a bit more, to minimize thinking time. Although maybe that's just me, not being a pilot.

 
Upvote 0
A

Azhar

Active Member
Licensed User
Longtime User
emexes said:
Looks great. Perhaps highlight the suggested runway a bit more, to minimize thinking time. Although maybe that's just me, not being a pilot.

View attachment 96917
Click to expand...
Yeah you're right because the more time you spend looking down at your phone, the greater chances are that your plane is in a very peculiar attitude when you look back up!
 
Upvote 0
E

emexes

Expert
Licensed User
Lol it'd be fairly simple to animate that arrow too. Let's say to move ArrowLabel up your unrotated runway, from y = 285 at the bottom to y = 93 at the top, then you'd set up a say 50 ms timer ArrowTimer to call:
B4X: 
Sub ArrowTimer_Tick

    Dim ArrowSpeed = -7    'how many pixels to move arrow each 50 ms

    ArrowLabel.Y = ( (ArrowLabel.Y - 93 + ArrowSpeed) Mod (285 - 93 + 1) ) + 93

    'or perhaps the simpler
    'Dim Y As Int = ArrowLabel.Y + ArrowSpeed
    'If Y < 93 Then
    '    ArrowLabel.Y = 285
    'ElseIf Y > 285 Then
    '    ArrowLabel.Y = 93
    'Else
    '    ArrowLabel.Y = Y
    'End If

End Sub
 
Last edited:
Upvote 0
E

emexes

Expert
Licensed User
Speaking of gurus... back when I was calculating areas on a sphere, this guy gave the absolute best explanation of it out of all that I found. Talk about an unexpected diamond in the rough.

 
Upvote 0
You must log in or register to reply here.

Similar Threads

  • Question
Android Question Zoom Drawing
Replies
1
Views
756
drgottjr
  • Question
Android Question ImageView "on the fly" with picture and border
Replies
4
Views
841
adriano.freitas
  • Article
Share My Creation Runway Relative wind calc
Replies
0
Views
783
harinder
  • Question
Android Question Draw panel border
Replies
2
Views
2K
imgsimonebiliato
  • Question
Android Question Draw any shape
Replies
7
Views
2K
BaGRoS
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…