McBasic™Get McBasic™ ↗
Build 881
Hands-on tutorial · Media & graphics

Draw with Line and Shape

Use simple graphic controls as part of a Form layout.

1 Form / control designs1 complete BASIC filesGuided sample project

Graphic controls have their own bounds and appearance properties. They are useful for separators and meaningful diagrams, but they should not obscure interactive controls. Check their z-order and hit-testing when placing them near input fields.

Step 1Prepare a safe practice project#

Extract the archive into a new writable folder, separate from your own application. Open GraphicControls.mcproj in McBasic™. Keep every declared source, layout, resource and migration file together.

To reconstruct it yourself, create a DesktopApp project and add the files declared below. In the complete project, follow these steps as a guided rebuild: replace each named source file once and Check after all its procedures are present.

Exact project configuration
GraphicControls.mcproj
{
  "schemaVersion": 1,
  "projectId": "496d50aa-e31a-4d02-b121-33a50c91fbe9",
  "name": "GraphicControlsSample",
  "kind": "DesktopApp",
  "language": {
    "dialect": "McBasic1",
    "requireExplicit": true,
    "compare": "Binary",
    "defaultArrayBase": 0
  },
  "application": {
    "bundleIdentifier": "com.mcbasic.samples.graphiccontrols",
    "version": "0.1.0",
    "buildNumber": "1",
    "startupFormId": "form-main",
    "shutdownMode": "OnStartupFormClosed"
  },
  "forms": [
    {
      "id": "form-main",
      "typeName": "frmMain",
      "layout": "Forms/frmMain.form.json",
      "code": "Forms/frmMain.bas"
    }
  ],
  "modules": [],
  "classes": [],
  "tests": [],
  "references": [],
  "resources": [],
  "targets": [
    "osx-arm64"
  ],
  "capabilities": []
}

Step 2Build the Form and set its properties#

frmMain

Select the Form first and set its properties. Add containers before their children. These are initial Designer values, not statements to paste into a procedure.

Form propertyValue
Caption"Line and Shape — McBasic"
Width720
Height470
MinWidth620
MinHeight420
TypeNameParent
LinelinAccentForm
ShapeshpPanelForm
ShapeshpCircleForm
ShapeshpSquareForm
CommandButtoncmdChangeForm
CommandButtoncmdCloseForm
LabellblStatusForm
linAccent · exact Inspector values
PropertyValue
Left36
Top42
Width300
Height80
Angle12.5
StrokeThickness4
LineStyle"DashDot"
LineCap"Round"
ForeColor"#1565C0"
Anchor edgesLeft, Top, Right
shpPanel · exact Inspector values
PropertyValue
Left36
Top105
Width280
Height130
ShapeKind"RoundedRectangle"
StrokeThickness3
LineStyle"Solid"
FilledTrue
Radius18
ForeColor"#0D47A1"
BackColor"#BBDEFB"
Anchor edgesLeft, Top
shpCircle · exact Inspector values
PropertyValue
Left365
Top105
Width130
Height130
ShapeKind"Circle"
StrokeThickness5
LineStyle"Dot"
FilledTrue
Radius0
ForeColor"#6A1B9A"
BackColor"#E1BEE7"
Anchor edgesTop, Right
shpSquare · exact Inspector values
PropertyValue
Left530
Top105
Width130
Height130
ShapeKind"Square"
StrokeThickness3
LineStyle"Dash"
FilledFalse
Radius0
ForeColor"#2E7D32"
Anchor edgesTop, Right
cmdChange · exact Inspector values
PropertyValue
Left36
Top300
Width180
Height38
Caption"Change graphics"
TabIndex0
Anchor edgesLeft, Bottom
cmdClose · exact Inspector values
PropertyValue
Left520
Top300
Width140
Height38
Caption"Close"
TabIndex1
Anchor edgesRight, Bottom
lblStatus · exact Inspector values
PropertyValue
Left36
Top365
Width624
Height32
Caption"Authored graphics"
ForeColor"#37474F"
Anchor edgesLeft, Right, Bottom

Step 3Connect the events explicitly#

frmMain

ObjectEventProcedureParameters
cmdChangeClickcmdChange_ClickClick()
cmdCloseClickcmdClose_ClickClick()

Step 4Enter the complete behavior#

Open the named source file. Enter declarations first, then every procedure. Expand a procedure for its full body, or copy the complete file. Helpers are required: do not stop after entering the first Click handler.

Forms/frmMain.bas

Enter these declarations at file scope, before the procedures.

Forms/frmMain.bas · declarations
Option Explicit
Private Sub cmdChange_Click()

Enter the complete action, including its input checks and calls to helper procedures.

Forms/frmMain.bas · cmdChange_Click
Private Sub cmdChange_Click()
    linAccent.Angle = -22.5
    linAccent.LineStyle = "Dot"
    linAccent.StrokeThickness = 6
    shpPanel.ShapeKind = "Ellipse"
    shpPanel.BackColor = "#C8E6C9"
    shpPanel.ForeColor = "#1B5E20"
    shpCircle.Filled = False
    shpSquare.ShapeKind = "RoundedSquare"
    shpSquare.Radius = 24
    lblStatus.Caption = "BASIC changed angle, stroke, fill and shape geometry"
End Sub
Private Sub cmdClose_Click()

Enter the complete action, including its input checks and calls to helper procedures.

Forms/frmMain.bas · cmdClose_Click
Private Sub cmdClose_Click()
    Unload Me
End Sub
Copy the complete Forms/frmMain.bas file

Replace the file once; do not append duplicate procedures.

Forms/frmMain.bas
Option Explicit

Private Sub cmdChange_Click()
    linAccent.Angle = -22.5
    linAccent.LineStyle = "Dot"
    linAccent.StrokeThickness = 6
    shpPanel.ShapeKind = "Ellipse"
    shpPanel.BackColor = "#C8E6C9"
    shpPanel.ForeColor = "#1B5E20"
    shpCircle.Filled = False
    shpSquare.ShapeKind = "RoundedSquare"
    shpSquare.Radius = 24
    lblStatus.Caption = "BASIC changed angle, stroke, fill and shape geometry"
End Sub

Private Sub cmdClose_Click()
    Unload Me
End Sub

Step 5Keep resources and storage reproducible#

No external resource or migration files are declared. Any inline migration, seed data or local JSON is present in the code above. Runtime application data and private preferences are not included in the archive.

Step 6Check, run and test the result#

Save all files and run Check. Resolve diagnostics before Run. Developer CLI users can work from the extracted folder:

Developer CLI
mcbasic check GraphicControls.mcproj
mcbasic run GraphicControls.mcproj

Acceptance checklist

  • Run and inspect the initial shapes.
  • Activate the change command and compare the appearance.
  • Resize and check that the graphic remains aligned with its purpose.

Step 7Make one change and repeat the tests#

Add a labelled separator without blocking pointer input to the nearby command.

Save a working Git checkpoint first. Change one behavior, Check again and repeat the acceptance checklist. Compare with the downloaded solution if a regression appears.

Source baseline 20f4bfed6b · Build manifest