Gambas ONE

THE community for Gambas users
https://forum.gambas.one/

Using DrawArea - Simplified

https://forum.gambas.one/viewtopic.php?t=1297

Page 1 of 2

Using DrawArea - Simplified

Posted: Thursday 24th March 2022 11:39pm
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???

Re: Using DrawArea - Simplified

Posted: Friday 25th March 2022 2:30am
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

Re: Using DrawArea - Simplified

Posted: Friday 25th March 2022 7:32pm
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.

Re: Using DrawArea - Simplified

Posted: Saturday 26th March 2022 6:26pm
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

Re: Using DrawArea - Simplified

Posted: Saturday 26th March 2022 8:32pm
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: ;)

Re: Using DrawArea - Simplified

Posted: Wednesday 30th March 2022 2:15am
by Askjerry
If all works... this is a sample file.

Attached:
Sample.zip
(28.35 KiB) Downloaded 218 times
Feedback Welcome

Re: Using DrawArea - Simplified

Posted: Wednesday 20th April 2022 9:35pm
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

Re: Using DrawArea - Simplified

Posted: Thursday 21st April 2022 11:55am
by cogier
These are really nice. Just shows what can be done.

Minor point regarding using the Quit command see here.

Re: Using DrawArea - Simplified

Posted: Thursday 21st April 2022 10:53pm
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

Re: Using DrawArea - Simplified

Posted: Tuesday 12th July 2022 1:48pm
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
All times are UTC
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited