Android Oscillator Application Using Basic4Android - Tutorial Part 1

Submitted by donbermoy on Thursday, January 16, 2014 - 23:12.
In this tutorial, I will introduce the power of Basic4Android that creates an Oscilloscope Application in Android. The first thing that you will do is to create a design like the Image below. Have a one Panel and named it as Panel1, an 8 Label and named it as lblScale0 label it as “1 U / div”, lblScale1 label it as “2 U / div”, lblScale2 label it as “3 U / div”, lblScale3 label it as “4 U / div”, lblOffset0 label it as ” 1 U Offset”, lblOffset1 label it as ” 2 U Offset”, lblOffset2 label it as ” 3 U Offset”, lblOffset3 label it as ” 4 U Offset”. Have also 4 Spinner named spnScale0, spnScale1, spnScale2, spnScale3 for Scaling. Add also 4 EditText named edtOffset0, edtOffset1, edtOffset2, edtOffset3 for our Offset. Have also 3 RadioButton and named it as rbtScopeScope, rbtScopeMEM, rbtScopeRoll. Here’s the abstract design of the Oscillator. It must be in SupportedOrientations: landscape. Oscillator Design Now we will code first the Process Global Procedures. Initialize the variables like below:
  1. Sub Process_Globals
  2.         'These global variables will be declared once when the application starts.
  3.         'These variables can be accessed from all modules.
  4.         Dim Timer1 As Timer
  5.         Type Curves (Name As String, Color As Int, Width As Float, Scale As Double, Offset As Double, Draw As Boolean)
  6.         Dim CurveVal(4, 101) As Double
  7.         Dim ScreenX0, ScreenX1, ScreenY0, ScreenY1, ScreenW, ScreenH, Border As Int
  8.         Dim GridX0, GridX1, GridY0, GridY1, GridYm, GridW, GridH, Div As Int
  9.         Dim NbDivX, NbDivY As Int
  10.         Dim ScreenCol, GridLineCol As Int
  11.        
  12.         Dim t, dt As Double
  13.         Dim dx, xx, cx As Float
  14.         Dim ii As Int
  15.         Dim CurveI As  Int      ' curve index
  16.         Dim Curve(4) As Curves
  17.         Dim CurvesI(4) As Int
  18.         Dim CurvesNb As Int       : CurvesNb = 3
  19.         Dim CurvesNbDisp As Int
  20.         Dim y1(4) As Float
  21.         Dim y2(4) As Float
  22.         Dim SingleShot As Boolea    : SingleShot = False
  23.         Dim Stopped As Boolean          : Stopped = True
  24.         Dim ScopeMode As String         :ScopeMode = "ROLL"
  25.         Dim ScopeRolling As Boolean     : ScopeRollin= False
  26.         Dim w(4) As Double
  27.         Dim a(4) As Double
  28.         Dim TimeScale(10) As Double
  29.         Dim SignalScale(10) As Double
  30.  
  31. End Sub
Now that all the variables in the Global Process had been initialized, we will also initialized another variables for Sub Global Procedure like this one below:
  1. Sub Globals
  2.         Dim btnStart, btnStop, btnSingleShot As Button
  3.         Dim pnlOcilloscope, pnlScreen, pnlGraph, pnlCursor, pnlControl As Panel
  4.         Dim pnlCurveTools, pnlDispValues As Panel
  5.         Dim cvsScreen, cvsGraph, cvsCursor As Canvas
  6.         Dim rectScreen, rectGrid As Rect
  7.         Dim spnTimeScale As Spinner
  8.         Dim spnScale0, spnScale1, spnScale2, spnScale3 As Spinner
  9.         Dim lblScale0, lblScale1, lblScale2, lblScale3 As Label
  10.         Dim lblValue0, lblValue1, lblValue2, lblValue3 As Label
  11.         Dim lblOffset0, lblOffset1, lblOffset2, lblOffset3 As Label
  12.         Dim edtOffset0, edtOffset1, edtOffset2, edtOffset3 As EditText
  13.         Dim rbtScopeScope, rbtScopeMEM, rbtScopeROLL As RadioButton
  14.         Dim scvControl As ScrollView
  15.         Dim bmpRoll As Bitmap
  16. End Sub
  17.        
Note that we initialized 3 buttons above named btnStart, btnStop, btnSingleShot. Next, before we go to the Activty_Create, we have to code first the sub procedures before putting it to the form load. The first sub procedure is for drawing the curve for the Oscillator. Here’s the code below:
  1. Sub DrawCurves
  2.         Dim i, j As Int
  3.         Dim r1, r2 As Rect
  4.         Dim x, yy1(4), yy2(4) As Float
  5.        
  6.         If SingleShot = False Then
  7.                 Select ScopeMode
  8.                 Case "MEM"
  9.                         r1.Initialize(xx, 0, xx + dx, GridH)
  10.                         cvsGraph.DrawRect(r1, Colors.Transparent, True, 1)
  11.                 Case "ROLL"
  12.                         If ScopeRolling = True Then
  13.                                 cvsGraph.DrawRect(rectGrid, Colors.Transparent, True, 1)
  14.                                 For i = 0 To CurvesNb
  15.                                         If Curve(i).Draw = True Then
  16.                                                 yy1(i) = GridYm + (-Curve(i).Offset - CurveVal(i, 0)) * Curve(i).Scale
  17.                                                 For j = 1 To 99
  18.                                                         x = j * dx
  19.                                                         yy2(i) = GridYm + (-Curve(i).Offset - CurveVal(i, j)) * Curve(i).Scale
  20.                                                         cvsGraph.DrawLine(x - dx, yy1(i), x, yy2(i), Curve(i).Color, Curve(i).Width)
  21.                                                         yy1(i) = yy2(i)                        
  22.                                                 Next
  23.                                         End If
  24.                                 Next
  25.                         End If
  26.                 End Select
  27.         End If
  28.         For i = 0 To CurvesNb
  29.                 If Curve(i).Draw = True Then
  30.                         y2(i) = GridYm + (-Curve(i).Offset - CurveVal(i, ii)) * Curve(i).Scale
  31.                         If ii > 0 Then
  32.                                 cvsGraph.DrawLine(xx - dx, y1(i), xx, y2(i), Curve(i).Color, Curve(i).Width)
  33.                         End If
  34.                         y1(i) = y2(i)
  35.                 End If
  36.         Next
  37.         pnlGraph.Invalidate
  38.         DoEvents
  39. End Sub
After Drawing the curves, we will also add a sub procedure for initializing the color of our curves. Follow the code below:
  1. Sub InitCurves
  2.         Curve(0).Color = Colors.Red
  3.         Curve(1).Color = Colors.Blue
  4.         Curve(2).Color = Colors.Black
  5.         Curve(3).Color = Colors.RGB(64, 192, 0)
  6.  
  7.         Curve(0).Width = 1dip
  8.         Curve(1).Width = 1dip
  9.         Curve(2).Width = 1dip
  10.         Curve(3).Width = 1dip
  11.        
  12.         Curve(0).Scale = 20
  13.         Curve(1).Scale = 20
  14.         Curve(2).Scale = 20
  15.         Curve(3).Scale = 20
  16.  
  17.         Curve(0).Offset = 0
  18.         Curve(1).Offset = 1
  19.         Curve(2).Offset = -1
  20.         Curve(3).Offset = 2
  21.        
  22.         Curve(0).Draw = True
  23.         Curve(1).Draw = True
  24.         Curve(2).Draw = True
  25.         Curve(3).Draw = True
  26. End Sub
Next we will create also a sub procedure for initializing the list of items in the Spinner. The Spinner can choose the Time Scale, Signal Scale, and the Scaling of Curves. You will code like this one below:
  1. Sub InitSpinners
  2.         Dim i As Int
  3.        
  4.         TimeScale(0) = 10
  5.         TimeScale(1) = 5
  6.         TimeScale(2) = 2
  7.         TimeScale(3) = 1
  8.         TimeScale(4) = 0.5
  9.         TimeScale(5) = 0.2
  10.         TimeScale(6) = 0.1
  11.         TimeScale(7) = 0.05
  12.         TimeScale(8) = 0.02
  13.         TimeScale(9) = 0.01
  14.  
  15.         SignalScale(0) = 10
  16.         SignalScale(1) = 5
  17.         SignalScale(2) = 2
  18.         SignalScale(3) = 1
  19.         SignalScale(4) = .5
  20.         SignalScale(5) = .2
  21.         SignalScale(6) = .1
  22.         SignalScale(7) = .05
  23.         SignalScale(8) = .02
  24.         SignalScale(9) = .01
  25.  
  26.         For i = 0 To 9
  27.                 spnTimeScale.Add(TimeScale(i))
  28.                 spnScale0.Add(SignalScale(i))
  29.                 spnScale1.Add(SignalScale(i))
  30.                 spnScale2.Add(SignalScale(i))
  31.                 spnScale3.Add(SignalScale(i))
  32.         Next
  33.         spnTimeScale.SelectedIndex = 6
  34.        
  35.         spnScale0.SelectedIndex = 3
  36.         spnScale1.SelectedIndex = 3
  37.         spnScale2.SelectedIndex = 3
  38.         spnScale3.SelectedIndex = 3
  39.         Curve(0).Scale = Div / spnScale0.SelectedItem
  40.         Curve(1).Scale = Div / spnScale1.SelectedItem
  41.         Curve(2).Scale = Div / spnScale2.SelectedItem
  42.         Curve(3).Scale = Div / spnScale3.SelectedItem
  43. End Sub
  44.  
Now our Spinners can now have the values of the curve when choosing its scale. Next, we shall also initialize the code for calculating the values of our codes. Why? Because this will determine the exact rate of scaling in our Oscilloscope. Here’s the code:
  1. Sub InitCalcCurves
  2.         w(0) = 2 * cPI * 2.1
  3.         w(1) = 2 * cPI * 3.7
  4.         w(2) = 2 * cPI * 4.3
  5.         w(3) = 2 * cPI * 5.7
  6.        
  7.         a(0) = 1.0
  8.         a(1) = 2.0
  9.         a(2) = -1.0
  10.         a(3) = 1.5
  11. End Sub
After calculating the value of our curves, we will now proceed to get the values of these four curves. Type the code below:
  1. Sub GetValues
  2.         Dim i As Int
  3.        
  4.         For i = 0 To CurvesNb
  5.                 CurveVal(i, ii) = a(i) * Sin(w(i) * t)
  6.         Next
  7. End Sub
Now, one of the important parts is displaying the values of our codes but I made it in a Sub Procedure. Here’s the code below:
  1. Sub DispValues(x As Int)
  2.         Dim i As Int
  3.  
  4.         i = 100 / GridW * x
  5.         lblValue0.Text = NumberFormat(CurveVal(0, i), 1, 6)
  6.         lblValue1.Text = NumberFormat(CurveVal(1, i), 1, 6)
  7.         lblValue2.Text = NumberFormat(CurveVal(2, i), 1, 6)
  8.         lblValue3.Text = NumberFormat(CurveVal(3, i), 1, 6)
  9. End Sub
The first curve will display in the label of lblValue0, 2nd in the lblValue1.Text, and so on and so forth. As you can see, we just displayed the value of the curves in the Labels but it doesn’t change. In our Sub Global we used a Timer named Timer1. And that’s it! It will make the value of the curves into the Labels to change its value. Follow to type the following code below:
  1. Sub Timer1_Tick
  2.         Dim i, j As Int
  3.        
  4.         t = t + dt
  5.         xx = xx + dx
  6.         ii = ii + 1
  7.         If ii > 100 Then
  8.                 If SingleShot = True Then
  9.                         Timer1.Enabled = False
  10.                         SingleShot = False
  11.                         Stopped = True
  12.                         Return
  13.                 Else
  14.                         Select ScopeMode
  15.                         Case "MEM"
  16.                                 xx = 0
  17.                                 ii = 0
  18.                                 GetValues
  19.                                 DrawCurves
  20.                         Case "SCOPE"
  21.                                 EraseCurves
  22.                                 xx = 0
  23.                                 ii = 0
  24.                                 GetValues
  25.                                 DrawCurves
  26.                         Case "ROLL"
  27.                                 ii = 100
  28.                                 xx = 100 * dx
  29.                                 For i = 0 To 3
  30.                                         For j = 0 To 99
  31.                                                 CurveVal(i, j) = CurveVal(i, j + 1)
  32.                                         Next
  33.                                 Next
  34.                                 ScopeRolling = True
  35.                                 GetValues
  36.                                 DrawCurves
  37.                         End Select
  38.                         Return
  39.                 End If
  40.         End If
  41.         GetValues
  42.         DrawCurves
  43. End Sub
This is it for now. I will continue the code tomorrow for Activity_Create (our Form_Load), btnStart_Click, btnStop_Click, btnSingleShot_Click, and etc to complete our Oscillator Application. Best regards, Engr. Lyndon R. Bermoy IT Instructor/System Developer/Android Developer STI College - Surigao City 09126450702 [email protected] Follow and add me in my Facebook Account: https://www.facebook.com/donzzsky Visit my page on Facebook at: https://www.facebook.com/BermzISware
Tags
Android
Basic4android
Android Oscillator
Android Application

Add new comment

About text formats
  • 91 views