Using DrawArea - Simplified

New to Gambas? Post your questions here. No question is too silly or too simple.
User avatar
Askjerry
Posts: 64
Joined: Saturday 18th August 2018 9:06pm
Location: Kyle, Texas, USA
Contact:

Using DrawArea - Simplified

Post by Askjerry »

This should not be so difficult.

I created a simple form (600x600) with only two objects.
- DrawingArea1
- Button1

Super simple... the idea is that if I click the button, it draws a line. Should be eazy-peasy... but I just don't understand what Gambas wants from me.
' Gambas class file

' Variables
Public x1 As Integer = 5
Public y1 As Integer = 5
Public x2 As Integer = 15
Public y2 As Integer = 15
Public mytask As Integer = 0

Public Sub Form_Open()

End

Public Sub form_Close()

End

Public Sub Button1_Click()

  mytask = 1
  x1 = 100
  y1 = 100
  x2 = 150
  y2 = 150
  DrawingArea1_Draw
  
End

Public Sub DrawingArea1_Draw()

  Draw.Begin(DrawingArea1)

  If mytask = 0 Then ' <-- This works (automatically)
     Draw.Line(x1, y1, x2, y2)
  Endif
  
  If mytask = 1 Then ' <-- This fails ( Can not paint outside of DRAW event handler )
       Draw.Line(x1, y1, x2, y2)
  Endif
  
  Draw.End

End
When run, the routine sees that mytask = 0 and it draws a small line... Apparently the Public Sub DrawingArea1_Draw() runs automatically when the form opens. Ok... I get that.

When I click the button, I reset the variables and tell it to run the routine again... crash and burn.

I was like... Ok... maybe I thought that I needed to put the Draw.Begin(DrawingArea1) in the Public Sub Form_Open() and the Draw.End in the Public Sub Form_Close()... nope... CRASH again.

If I can get Gambas to do something graphical when I press a button... then there is hope that I can do stuff on a slider change, or a timer activation... can someone help me please???
vuott
Posts: 262
Joined: Wednesday 5th April 2017 6:07pm
Location: European Union

Re: Using DrawArea - Simplified

Post by vuott »

Hello,
1) the instruction "DrawingArea1_Draw" in Button1_Click() routine makes no sense, as it conforms to an Event.
However, in your case you have to use the "DrawingArea.Refresh" Method.

2) The instruction: "Draw.Begin (DrawingArea1)" is not necessary within the "DrawingArea" Event, in which you have to draw.

3) I would avoid using the "Draw" Class, as it has long been considered obsolete/deprecated. You should use the "Paint" Class.

So... I suggest:
......
.....etc...

Public Sub Button1_Click()
 
  ...etc...
  ...etc...
  DrawingArea1.Refresh
   
End
 
Public Sub DrawingArea1_Draw()
 
  With Paint
    If mytask = 0 Then
      .MoveTo(x1, y1)
      .LineTo(x2, y2)
    Endif
    If mytask = 1 Then
      .MoveTo(x1, y1)
      .LineTo(x2, y2)
    Endif
    .Stroke
    .End
  End With
 
End
Europaeus sum !

Amare memorentes atque deflentes ad mortem silenter labimur.
User avatar
Askjerry
Posts: 64
Joined: Saturday 18th August 2018 9:06pm
Location: Kyle, Texas, USA
Contact:

Re: Using DrawArea - Simplified

Post by Askjerry »

VUOTT - Thank you!

That worked perfectly, and I see now the DrawingArea1.Refresh causes the drawing area to clear, and the subroutine DrawingArea1_Draw() is where all the graphics command must reside. Now I have a handle on it... I can make an array of points for a gauge arrow, then read a sensor in a timer function, update the coordinates with rotation, and send the focus to the DrawingArea1_Draw() routine where it will be updated.

I'll look into circle and fill commands, should be pretty simple now that I understand the process. :D

Reference: http://gambaswiki.org/wiki/comp/gb.qt4/paint

Thanks again!
Jerry

I will update when I have something interesting to show.
User avatar
Askjerry
Posts: 64
Joined: Saturday 18th August 2018 9:06pm
Location: Kyle, Texas, USA
Contact:

Re: Using DrawArea - Simplified

Post by Askjerry »

Simple question... Why isn't the pointer RED? I Used &H00FF0000 which as I understand it is Alpha, RED, GRN, BLU with alpha 00=100% Opaque.

Am I using the .COLOR command wrong?? (Well obviously... but why?) :roll:

The screen consist of only 3 items...
  • Drawarea1 (500,500 pixels)
    Textbox1 (Shows Slider value)
    Slider1 (Min=0 Max=220)
Help! (Thanks)
' Gambas class file

' Variables
Public x1 As Integer = 250
Public y1 As Integer = 250
Public x2 As Integer = 250
Public y2 As Integer = 250
Public mytask As Integer = 0

Public Sub Form_Open()

Slider1_Change ' <---- Paint initial slider state.

End

Public Sub form_Close()

End

Public Sub DrawingArea1_Draw()
  Dim offset_angle As Integer = -210 ' Radians like to be at the 3-O-clock point, I want them to start someplace else.
  
  With Paint
    x1 = 250
    y1 = 250
    .MoveTo(x1, y1)
    x2 = Cos(Rad(Slider1.value + offset_angle + 135)) * 20 + 250
    y2 = Sin(Rad(Slider1.value + offset_angle + 135)) * 20 + 250
    .LineTo(x2, y2)
    x2 = Cos(Rad(Slider1.value + offset_angle + 0)) * 200 + 250
    y2 = Sin(Rad(Slider1.value + offset_angle + 0)) * 200 + 250
    .LineTo(x2, y2)
    x2 = Cos(Rad(Slider1.value + offset_angle + 225)) * 20 + 250
    y2 = Sin(Rad(Slider1.value + offset_angle + 225)) * 20 + 250 
    .LineTo(x2, y2)
    .LineTo(x1, y1)
    '.Stroke <---------- REM this out to only fill the shape, not draw lines.
    .Color(&H00CC0000)
    .Fill
    .End
  End With
  
End

Public Sub Slider1_Change()  
  TextBox1.Text = Slider1.value
  DrawingArea1.Refresh 
End
User avatar
Askjerry
Posts: 64
Joined: Saturday 18th August 2018 9:06pm
Location: Kyle, Texas, USA
Contact:

Re: Using DrawArea - Simplified

Post by Askjerry »

Thanks to a Spanish web page and the wonders of Google Translate... I got it now.
  With Paint
    .Brush = Paint.Color(&H00FFCC00)
    x1 = 250
    y1 = 250
    .MoveTo(x1, y1)
    x2 = Cos(Rad(Slider1.value + offset_angle + 135)) * 20 + 250
    y2 = Sin(Rad(Slider1.value + offset_angle + 135)) * 20 + 250
    .LineTo(x2, y2)
    x2 = Cos(Rad(Slider1.value + offset_angle + 0)) * 200 + 250
    y2 = Sin(Rad(Slider1.value + offset_angle + 0)) * 200 + 250
    .LineTo(x2, y2)
    x2 = Cos(Rad(Slider1.value + offset_angle + 225)) * 20 + 250
    y2 = Sin(Rad(Slider1.value + offset_angle + 225)) * 20 + 250 
    .LineTo(x2, y2)
    .LineTo(x1, y1)
    '.Stroke <---------- REM this out to only fill the shape, not draw lines.
    .Fill
    .End
  End With
Now I can do any color i want... and what is really cool... I can use this to pick my exact colors.
https://www.w3schools.com/colors/colors_picker.asp

It also looks like I can outline things too... pretty cool... I'm sure there is a way to specify an outlined and filled line with a simpler command... but at least this is working for me.
Public Sub DrawingArea1_Draw()
  Dim offset_angle As Integer = -210 ' Radians like to be at the 3-O-clock point, I want them to start someplace else.
  Dim Pointer_LEN As Integer = 180
  
  With Paint
    ' Make a filled shape for a pointer.
    .Brush = Paint.Color(&H00FFCC00)
    x1 = Cos(Rad(Slider1.value + offset_angle + 180)) * 30 + 250
    y1 = Sin(Rad(Slider1.value + offset_angle + 180)) * 30 + 250
    .MoveTo(x1, y1)
    x2 = Cos(Rad(Slider1.value + offset_angle + 135)) * 20 + 250
    y2 = Sin(Rad(Slider1.value + offset_angle + 135)) * 20 + 250
    .LineTo(x2, y2)
    x2 = Cos(Rad(Slider1.value + offset_angle + 0)) * Pointer_LEN + 250
    y2 = Sin(Rad(Slider1.value + offset_angle + 0)) * Pointer_LEN + 250
    .LineTo(x2, y2)
    x2 = Cos(Rad(Slider1.value + offset_angle + 225)) * 20 + 250
    y2 = Sin(Rad(Slider1.value + offset_angle + 225)) * 20 + 250 
    .LineTo(x2, y2)
    .LineTo(x1, y1)
    '.Stroke <---------- REM this out to only fill the shape, not draw lines.
    .Fill
    
    ' Trace lines around the pointer we just made.
    .Brush = Paint.Color(&H000000FF)
    x1 = Cos(Rad(Slider1.value + offset_angle + 180)) * 30 + 250
    y1 = Sin(Rad(Slider1.value + offset_angle + 180)) * 30 + 250
    .MoveTo(x1, y1)
    x2 = Cos(Rad(Slider1.value + offset_angle + 135)) * 20 + 250
    y2 = Sin(Rad(Slider1.value + offset_angle + 135)) * 20 + 250
    .LineTo(x2, y2)
    x2 = Cos(Rad(Slider1.value + offset_angle + 0)) * Pointer_LEN + 250
    y2 = Sin(Rad(Slider1.value + offset_angle + 0)) * Pointer_LEN + 250
    .LineTo(x2, y2)
    x2 = Cos(Rad(Slider1.value + offset_angle + 225)) * 20 + 250
    y2 = Sin(Rad(Slider1.value + offset_angle + 225)) * 20 + 250 
    .LineTo(x2, y2)
    .LineTo(x1, y1)
    .Stroke
    '.Fill  < - - - - - - - - - - REM this out To only draw the shape, lines not fill.
    
    .End
  End With
  
End
So yeah... I can load SVG backgrounds, make programmable components... very exciting to be able to build NICE graphic panels now!!! Finally... so now if I can only learn to read the ADS1115 Chip with piGPIO... I'll have everything sorted out. Well... pretty much. :D :shock: ;)
User avatar
Askjerry
Posts: 64
Joined: Saturday 18th August 2018 9:06pm
Location: Kyle, Texas, USA
Contact:

Re: Using DrawArea - Simplified

Post by Askjerry »

If all works... this is a sample file.

Attached:
Sample.zip
(28.35 KiB) Downloaded 194 times
Feedback Welcome
User avatar
Askjerry
Posts: 64
Joined: Saturday 18th August 2018 9:06pm
Location: Kyle, Texas, USA
Contact:

Re: Using DrawArea - Simplified

Post by Askjerry »

I've made a lot of progress on the graphics and how to make really nice looking controls. Not sure if there is an interest or not... if there is, I'll zip up everything and put it here for you.
Image
Attachments
Sample Control panel
Sample Control panel
Control Panel Demo.png (81.94 KiB) Viewed 3247 times
User avatar
cogier
Site Admin
Posts: 1118
Joined: Wednesday 21st September 2016 2:22pm
Location: Guernsey, Channel Islands

Re: Using DrawArea - Simplified

Post by cogier »

These are really nice. Just shows what can be done.

Minor point regarding using the Quit command see here.
User avatar
Askjerry
Posts: 64
Joined: Saturday 18th August 2018 9:06pm
Location: Kyle, Texas, USA
Contact:

Re: Using DrawArea - Simplified

Post by Askjerry »

I'll look into ways of ending/quitting/stopping the program.

Once I get this thing running... it will be for school events, robotics meetings, etc.
there won't... or shouldn't be much starting/stopping once we begin the event.

Ever since starting with the Raspberry Pi I've been looking for a way to make eye-catching programs... once I paired PIGPIO with GAMBAS3... I was home.

Jerry
seany
Posts: 32
Joined: Friday 6th December 2019 3:09pm

Re: Using DrawArea - Simplified

Post by seany »

Hi

Are your controls available under open source? I would love to use them for my work. Thank you.

PS: Is there a web repo of all available controls, made by community? Thank you
Post Reply