many times when trying out the gdi+x classes i have had to create a form and then type out the code and run the form to see the results. another problem i have had is looking up sample code to see how things are done. i have always wanted an easier way to manage this.

note: post has been updated with some new info. see below. also the download is now v1.2

the gdi+x pad is a visual foxpro 9 sp2  application where you can type in your gdi+x code to see how it looks immediately, before actually implementing it in your imgcanvas.beforedraw.

requirements

the gdi+x pad has a couple of external dependencies.

  • it requires the system.app that comes with the gdi+x classes to be in the same directory as itself. there is a pre compiled file with new functionality uploaded by cesar and can be downloaded from here http://vfpx.codeplex.com/workitem/view.aspx?workitemid=20164
  • it requires the foxtools.fll to be in the same directory as well. this file must also be copied from your vfp directory.
  • the code saved, is stored in the snippets table that is included in the download with some sample code already in it.
  • finally it requires vfp9sp2 to function properly.

the application is very easy to use and certain elements of the table are easily editable from the front end itself. it is split into 3 sections with buttons and options on the left, the code pane below and the viewing pane above. 

you can run the exe stand alone or from within the vfp ide. the only difference is that when run it from within vfp, you get intellisense, which is not available when run standalone. you also get an editing code surface with colour highlighting same as in vfp whichever way you start it.

 the following will describe the different parts to it and the usage.

the main buttons

reset - resets your code to the default template. the template is stored in an external file - default.gdix and may be edited either in the gdi+x pad and saved or by any text editor to create your own template.

clipboard - copies the current code in the editor to the clipboard for pasting into your imgcanvas.beforedraw method.

chart - displays the gdi+x colour chart for built in colours. the colours are displayed and their rgb value is shown as you move the mouse over them. you click on a colour to save that rgb colour to the clipboard. you can now paste it into your code as a rgb integer. this form also helps as a reference to the built in colours in gdi+.

colour - this button opens the typical vfp colour dialog to enable selection of a colour. the selected colour is inserted automatically into your code at the cursor position. to use it, position your cursor where you want the rgb integer to go and click this button. if you select a colour it will be inserted into your code as a rgb integer.

load - use this to load code from a file on the hard disk. a sample is provided.

save - saves your code to a disk file with a .gdix extension for later loading.

new - this pops up an input box where you can enter the name of your snippet. a new record is added to the table. once you have typed in and tested your code sample, you can use the save button next to it, to save the current code into the table to the current record.

save - another save option. this one saves the current code in the edit window to the current record in the table.

the snippet list

below the buttons above, is the list of saved code snippets. i have included some samples for easy reference here. any new snippets you save will be listed here. double click a snippet to load its code into the editing pane. if you need to make changes these can be saved back into that record.

snippet description

the description of each snippet is displayed here. note that you can edit this and the changes are saved immediately.

finally on the bottom left are two more buttons

more buttons

delete

this will delete the current record from the snippet table

refresh (f5)

this is used to run the code in the code pane. if you have loaded code from disk or from the snippet list, you can run the code to test it out immediately by pressing f5 or clicking this button. the result, if there are no errors will be displayed in the viewer pane above.

to the top right is the viewing pane and this deserves no further explanation. it is here that what you have coded will be displayed, when you hit refresh or f5.

the code window

finally you have the code window. here is where you will type in or edit your code before running. a default template is always accessible using the reset button to start with a clean state.

this is just like the vfp code window with syntax colouring and scroll bars. in addition if you run the exe within vfp you also get intellisense. at this time i have been unable to get proper usable intellisense at runtime in this window.

a simple walkthrough

1. click the reset button to reset to the default

2. highlight the part of code that says 100,100,100

3. click the "colour " button and select any colour. click ok to close the colour dialog.

4. your selected colour, converted to a rgb integer is inserted into your code, with a number replacing the highlighted 100,100,100.

5. hit f5 and the viewer pane will be filled with that colour.

6. after the above line add these 2 lines:

 

lobrush = .solidbrush.new(color.orange)

logfx.fillellipse(lobrush,30,30,300,200)

7. hit f5 and an ellipse will be drawn on the screen.

8. you can now use the upper save button to save this to a file on disk or create a new snippet and use the lower save to save this code into the snippet table.

additional info

1. the application has built in error trapping even for the code you enter in the code window. the following screens will show that, where i deliberately enter a wrong line into the code window and hit f5 to run this.

the error trapping kicks in and even though this is runtime, you are prompted as to the source line that caused this error, which can now be corrected.

2. the thick green line between the viewer pane and the code pane is a splitter bar that allows resizing the two panes to whatever sizes you like. just grab it and drag up or down to size.

3. the form may not be resized but may be maximised or minimised.

finally here is another image with a code segment of mine copied out of the glowing buttons class.

i am not releasing the source as yet, only the relevant exe and dependant files. i will release the source once this project has been completed fully .

all suggestions and bugs/fixes may please be posted here on this blog or on www.foxite.com and mention gdi+x pad. enjoy

so download the file below, get the correct system.app and foxtools.fll and give it a go. you may actually have fun programming in gdi+.

update 16 apr 2009

thanks to koen for pointing out that the colour chart did not work as "advertised"

this was because despite the images being compiled into the exe, the functions i was using expected them to be on disk. i have changed the functions and the chart form works properly now. 

you move the mouse over the colours and the top box shows the colour under the arrow. if you click, the selected colour and rgb is displayed in the bottom box and also copied to the clipboard. you can now ctrl+v to paste the rgb integer into your code.

please download the updated version from the link below.

Download

7 Responses to Introducing the GDI+X Pad

  • xinjie says:

    Very Good!

  • Awesome Bernard. I like your results.

  • Mike says:

    Another Good One that is really very helpful! Keep it up Bernard!

  • mary says:

    good job

  • Hi Bernard
    -Always good designs and new ideas thank you.
    -I give you my first impressions on this beautiful work-some details only :

    0-there is no source to studay codes.i hope you follow this later.

    VFP is not zero based so everything should start with 1 not 0 normal smile Yes code will be released later once all bugs ironed out.

    1-I would see if i click on the grid ,directly the draw on the canvas (on line)
    and not go to dblclick,refresh or pressing F5….interactiveChange.

    The snippets are samples for storage or to start new code. How many times will you run and look at the same example. The idea is you load the code into the code window, make changes and then run. So just running the code everytime it is loaded is not the way to go IMO. Besides even in Visual Studio, when you open a project you do not immediately run it, you have to press F5 No?

    2-when moving the splitter between the canvas and the editbox:

    What gives you the idea that the code window is an EDITBOX? Does an Editbox have a Horizontal scrollbar?
    The code window is not an Editbox.

    toward down or toward up
    there is not synchronisation with moving the two shapes.the resize is doing only
    at mouseup. also when maximize the form there is a delay for editbox who resizes but
    late (lockscreen ?). put the command resize in mousemove
    if nbutton=1
    thisform.myresize()
    endi
    that allows to resize online.

    The code runs on MouseMove not MouseDown or Mouse Up. Anyway I have fixed it when sizing the windows.
    For when the form is maximised, I am leaving it as is.

    3-this pad support only one method: imgcanvas.beforedraw isn’t it ?

    Yes. It is a test bed for testing out your code in which is usually placed in the imgCanvas.BeforeDraw.
    I have found that that is where I place most of my code when using GDI+X

    4-can customize colors (form titlebar,canvas background,)+add summary help in a button and
    display on canvas or dummy.

    No. This is an application for learning/testing GDI+X. As such why would you want to change the colours and titlebar? How many applications you use allow you to change the colours and titlebar?

    Maybe later I will look at online help.Regarding the Help, I have put all the Help needed on the blog. Just print it out and keep it as a ready reckoner.

    the form titlebar contains some graphitis (right to center) ?

    And yes, there is a subtle graphic in the titlebar.

    5. In the contextuel menu by rightclic on editbox,there is too things who dont needed.
    Make just what is necessary(but its the dummy.prg menu !).
    There is for ex an option to execute dummy3.prg…if yes….returns error…
    add this to make hand on buttons: thisform.setAll(“mousepointer”,15,”commandbutton”)

    This is a standalone EXE. If you run it standalone, you will not see the Execute command. I have no control over that context menu. That is internal VFP. And I prefer not changing the mouse to a hand. It is really not necessary as the button gives you feedback when the mouse is over it. Besides that is not a Hand” but “giving the finger” and is insulting. very big smile

    6.In the form chart,you can make it smaller then.
    No. Then the text becomes difficult to read.

    The page hatch colour:
    does anything with “Move the mouse over the colour……” in
    right,and copying to clipboard.The hatch colour returns any thing ??

    No that is for display purposes only. I know of very few instances where I would ever use a hatch pattern. I prefer colours and gradients. Can you think of somewhere where you would use a hatch pattern?

    this form seems modal,but if select a color must close like getcolor() ? better if
    can drag drop the color into the dummy.prg window ?

    This form is not modal. In GETCOLOR(), it does NOT close automatically when you select a colour. You need to click OK. Also you cannot drag and drop from GETCOLOR(). I may look at that later on if I have the time.

    7-Function xBeforeDraw(oCanvas,oForm)……i get error
    try/catch/finall/endtry….incompatibility or error.Error at line6.
    I have this but i cannot re simulate it

    I have posted to Koen who reported a similar problem. This is because of Try…Catch…Endtry. I have changed it to On Error and will upload a version soon.

  • erik gomez says:

    awesome…thanks for sharing

  • Lynda Loveland says:

    Does this come with sample code? If not, where do I find the correct syntax for the different functions?

    Lynda

    By downloading the GDI+X classes fron VFPX and looking at the sample code in the samples provided these. This is just a tool to assist in using that class.

Leave a Reply

Your email address will not be published. Required fields are marked *