creating a shape

[hendryawan]

Dear all,
I has been made a form with water tank background, but still confuse about adding the small circle shape on my form.
If my logic is true my shape colour is green but if false the colour is red.
how to made it? please help me.

thank
regard

hendryawan

[Petr Schreiber]

Hi hendryawan,

I would recommend using Canvas control for what you need.

Create canvas control to cover whole dialog, then use Canvas_BitmapRender to render your image to it.

Then just use Canvas_Ellipse to draw the circle or ellipse with specified color on place where you need.

There are examples with Canvas control in SampleScripts/UI and documentation on this group of functions in Help file under:
thinBasic Modules > UI (User Interface) > Dedicated Control Functions > Canvas Control >


Petr

[hendryawan]

Thank Petr,
I has been search 'canvas' in this forum also in sample script, but I still feel confuse.
Sorry I just need example two button controlled circle colour.
If button1 click then circle colour = red, if button2 click then circle colour = green.
I will develop with my self with the sample program.
thank

hendryawan

[zak]

hello
here is a usage of the example "circle-rectangle-illusione" in the folder "C:\thinBasic\SampleScripts\UI\Canvas" as a template, (i do not memorize gui functions, i am always using the examples as a templates for GUI)
this example could be used as a traffic sign, if you want to make the line around the circle thinner or thicker just change "Canvas_Width(20)" to another value.
also look at an example for different shapes http://www.thinbasic.com/community/showthread.php?10597-canvas-tourism
the canvas commands in the help file can be accessed by positioning the cursor on a keyword in the IDE such as Canvas_Line then press F1 then click List Topics and then a huge number of canvas fuctions will be listed

' template by franko lionheart (ThinAIR)
Uses "ui"
Begin Const
%btnRed
%btnGreen
%canv

End Const
Dim colr, colrFill As Long
Function TBMain() As Long
Local xsize,ysize As Long
Local hdlg As Long
Local mygraf As Long

Dialog New Pixels,0,"Traffic Sign",0,0,600,400,%WS_SYSMENU Or %WS_MINIMIZEBOX Or %WS_CAPTION To hDlg
Control Add Button, hDlg, %btnRed, "Red", 550, 350, 50, 24 Call red()
Control Add Button, hDlg, %btnGreen, "Green", 450, 350, 50, 24 Call green()
Control Add Canvas, hDlg, %canv, "", 0, 0, 400, 400, %SS_NOTIFY
Control Handle hDlg,%canv To mygraf
Canvas_Attach mygraf, 0

Canvas_Clear(Rgb(255,255,255))

Dialog Show Modal hDlg Call showme()
End Function
'------------------------------------------------------------------------------
CallBack Function showme() As Long
Select Case CBMSG
Case %WM_INITDIALOG
Canvas_Attach(CBHNDL, %canv, %FALSE)

Canvas_Redraw

Case %WM_COMMAND
Select Case CBCTL
Case %IDCANCEL
Dialog End CBHNDL '
End Select
End Select
End Function
'------------------------------------------------------------------------------
CallBack Function green() As Long

Select Case CBMSG
Case %WM_COMMAND
If CBWPARAM = %btnGreen Then
Canvas_Width(20)
colr = Rgb(255, 81, 168) : colrFill = Rgb(0, 255, 0)
'circle(x,y,radius,colr,colrFill)
Circle(180,180,70,colr,colrFill)
Canvas_Width(15)
Canvas_Line((180,265),(180, 400) , Rgb(0, 0, 255) )
End If
Canvas_Redraw
End Select
End Function
CallBack Function red() As Long

Select Case CBMSG
Case %WM_COMMAND
If CBWPARAM = %btnRed Then
Canvas_Width(20)
colr = Rgb(255, 81, 168) : colrFill = Rgb(255, 0, 0)
'circle(x,y,radius,colr,colrFill)
Circle(180,180,70,colr,colrFill)
Canvas_Width(15)
Canvas_Line((180,265),(180, 400) , Rgb(0, 0, 255) )
End If
Canvas_Redraw
End Select
End Function

Function Circle(x As Long, y As Long, r As Long, colr, colrFill)
Canvas_Ellipse(x-r, y-r, x+r, y+r, colr, colrFill)
End Function


PS: as an add on ,to use a one Toggle button to switch between red and green i have added another button "Toggle" to replace the function of the two buttons

[hendryawan]

Thank you verymuch Zak

regard

hendryawn

[hendryawan]

I still can not using canvas, because if I use it my background is closed by canvas area.

So for clearing my problem, here I attach the picture that I want to apply with thin basic program. The components are text box, button, label, check box, circle shape and image thank background.
The green value in text box is already done with the rs485 thread in this forum.
Please help me.
thank and regard

Hendryawan

[Petr Schreiber]

Hi hendryawan,

if you need some nice image on background + other elements drawn, please consider not using "DIALOG SET IMAGE" and simply render the background image directly to Canvas:


Create canvas control before other controls, with size of whole dialog
Use Canvas_BitmapRender to render the background image over whole dialog
Use Canvas_BitmapRender to draw your devices
...

If you need masking, I can show you how.


Petr

[hendryawan]

Dear Petr,
Would you like give me an example?
thank

regard

hendryawan

[Petr Schreiber]

Hi hendryawan,

I attach example for you.

I created function called RenderImageToExistingCanvasWithMaskedColor :D there, which allows drawing image with transparent color at specified position.

It is implemented using ThinBASIC, but it gave me idea for native thinBasic function, I will think about it and then make feature request (for better speed).


Petr

[hendryawan]

Dear Petr,
I already modify your program.
Would you show me how to control the green and red circle base on timer.
thank

regard

Hendryawan

[Petr Schreiber]

Hi,

here I attach code for you.

The key is to create timer after receiving WM_INITDIALOG message and then check it each time WM_TIMER is fired.

It is good practice to release the timer in WM_CLOSE.


Petr

[zak]

Petr, those are great examples, versatile and great lessons by themselves, i suggest to include the two examples in the thinbasic examples in the UI folder, since there is no mention of the Canvas_BitmapRender and related in the examples even they are documented in the help file.
thank you

[ErosOlmi]

... i suggest to include the two examples in the thinbasic examples in the UI folder, since there is no mention of the Canvas_BitmapRender and related in the examples even they are documented in the help file.
thank you

I will do, thanks.
Added a task item: http://www.thinbasic.com/community/project.php?issueid=258

[hendryawan]

Thank you verymuch Petr.
I already try the program and it is good.
My question, what is maximum size of background image?
I try with 1353 x 821 pixels of background picture can not work.

regard

hendryawan

[ErosOlmi]

Can you post the image you are using so I can test?

[ErosOlmi]

OK, I made some tests and I can reproduce the problem.
Script is executing but window is not on screen

In any case I successfully tested up to 1024x768 background image
I will check other cases

Added:
tested with 1280x1024 24bit color and all seems ok
tested with 1480x1024 24bit color and all seems ok

[ErosOlmi]

Ok, I think I've found the problem.
It is not related to the image size but to the dialog size

It seems that if you create your POPUP dialog bigger than your monitor size, it is not shown on screen. Try to set the dialog size at maximum the size of your screen and check again


Dialog New Pixels, 0, "Masked image test",-1,-1, 1024, 1024, _
%WS_POPUP Or %WS_VISIBLE Or %WS_CAPTION Or %WS_SYSMENU Or %WS_MINIMIZEBOX To hDlg

I think it is a limitation of %WS_POPUP but I need to further investigate Windows documentation

Eros

[hendryawan]

Dear Eros,
My PC screen resolution setting is 1280 x 1024. Is it problem with the my program?
thankyou

here is my image:

[Petr Schreiber]

Hi,

I think Eros found the reason. I have 1920x1080 desktop, and dialog with bitmap you posted displayed ok. But when I try to set image bigger than my desktop as background, it will not display.


Petr

[ErosOlmi]

I found a woraround using thinBasic unique feature called ViewPort (http://www.thinbasic.com/public/products/thinBasic/help/html/control_add_viewport.htm) that is a special control that can contains a child window. If window is bigger than parent ViewPort you can scroll child window. When parent ViewPort is resized, child window view is automatically resized too. Mainly it is like having an hole through which you can view another window responding to whatever event.

So, you can have a main window used to control your application and one viewport (or many) each with its child window used to control your plant and that can scroll in whatever direction even if background (or child window) is bigger than the main window.

Attached an example (a little bit to be reworked commented and re-organized) that uses a single ViewPort inside which you can load any image size you like (well there are some limits :D ).
I tested with a 2592x1944 24bit BMP image taken from here (http://www.google.it/imgres?imgurl=http://www.encyclopedia-titanica.org/discus/files/dscn5556.jpg&imgrefurl=http://www.encyclopedia-titanica.org/discus/messages/6937/125510.html&usg=__ZlsLnhJfgdMYgUUnVsQDw_kWZ0M=&h=1944&w=2592&sz=991&hl=it&start=0&zoom=1&tbnid=8zxsibSJ8u7Y0M:&tbnh=147&tbnw=198&ei=aoNjTfzVBaOX4gaZ8_HWCQ&prev=/images%3Fq%3D%252Bmachinery%2B%252Bsoftware%2B%252Bcontrol%26hl%3Dit%26biw%3D1312%26bih%3D793%26gbv%3D2%26tbs%3Disch:1,isz:ex,iszw:2592,iszh:1944&itbs=1&iact=hc&vpx=136&vpy=117&dur=969&hovh=194&hovw=259&tx=143&ty=110&oei=aoNjTfzVBaOX4gaZ8_HWCQ&page=1&ndsp=20&ved=1t:429,r:0,s:0) and with your image.
Download image and substitute the one posted with the cat.

I think this workaround can open many additional ideas.
For reference check examples in
\thinBasic\SampleScripts\Tutorial\
or in
\thinBasic\SampleScripts\UI\ViewPort\
Especially Tutorial example can show you how to create different ViewPorts working together in the same main window.

Ciao
Eros