Introducing the GDI+X Pad - by BERNARD BOUT
* This post is from Bernard Bout. Since Foxite Weblogs is not any more on air, I've just rescued this post from the WayBack machine, due to the importance of its contents to GdiPlusX project.
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.
Published Tuesday, April 14, 2009 5:18 PM by bbout
No comments:
Post a Comment