Image Editor GUI

Summary:

This control can be used to give the visitor a chance to edit his own image. It uses memory on the server to store the options of the user. The user can edit his commands and choose among nice selections for editing (like paths and images). He is also able to save his image anytime on his PC. Just install the control, and use it. Help is integrated when overLib is also installed (see corresponding section for more info).

Click here for an image example

...More:

The control is tightly connected to the Image Editor script file which must be present in order for an image to be drawn. This control is just a GUI for producing right commands for the script. When first showed, it shows the Initialization options (image characteristics setup) and brush options for the background. The brush options is always present and defines backgrounds and fills when available. The user then clicks the Continue button. According to the instructions found on the Image Editor script page, a hashatble is produced and stored in Session (also, another two slots of Session are required). The image then changes to the current selections of the user. The zoom is always 100%.
The act edit options pop out. With them the user can define single commands for the image, but in order. After editing his command, he clicks the Add/Replace Act to add the act-command to the hashtable. If he ever wants to reset his image, he can click the corresponding button. There is also the delete button for deleting single act-commands, defined by the number in the act number textbox. He can also change the background and initialization options anytime by clicking the Back button.

Properties & Specifications:

The control inherits from the Control class.

PropertyAssignment TypeDefault ValueComments
UseOverlibHelpBooleanFalseIf this is true, you must have installed the overlib javascript script. Then, help is provided at some points with "(?)"
UseTextureBrushBooleanTrueOn my PC, the texture brush presents an Out Of Memory asp.net error. So, turn it off with this boolean. Also, turn it off if you do not want people to load up images from your server.
UseImageAddBooleanTrueCheck if you allow users to locate an image on the server and load it on the edit image.
ImageEditoraspxPathString"/Files/IMG-ImageEditor.aspx"The relative path where the Image Editor script file is located.

CSS Style ClassDescription
ImageEditorTitleThe titles of the control.
ImageEditorMainTitleThe main title of the control.
ImageEditorTxtBoxGnerally for textboxs. Usually for 2-digit textboxs.
ImageEditorTxtBoxNoWidthRestrTextboxs without width restriction, such as filepaths.
ImageEditorTxtBoxColorTextboxs used for hex color input.
ImageEditorTxtBoxOpacityTextboxs used for opacity input (that is a 3-digit number).
ImageEditorTxtButtonThe buttons of the control.
These styles are found in the Styles.css file in the Files folder. You can modify it, but you have to copy according to the Install Instructions.
overLib help Support
Help is essential for the visitors to understand how to use the Image Editor Wizard (GUI). Help is given by some question marks (?) that can be clicked to show up help or open help windows. But to use these, you must have installed properly the overLib script (it's not copyright to me) and test it first on the page you want to add the control to (an example of overLib is the menu of this guide on the top of each page, or the screenshot pop-ups). Then, change the corresponding property of the control to True. More info on installing the overLib script file can be found on its website. You can find the link in the Contacts / Links page.

Usage:

You can either use the control through script by referring to TPControls.ImageEdit (according to the install instructions), or either through placing a control instance on an .aspx page like this:

<TP:ImageEdit runat="server" [UseOverlibHelp=Help boolean] [UseTextureBrush=Boolean] [UseImageAdd=Boolean] [ImageEditoraspxPath=Relative path] />
The brackets [ ] are used to show the optional. Italics are used to show the text you need to type according to your preferences.

e.g. <TP:ImageEdit runat="server" UseOverlibHelp=True ImageEditoraspxPath="Functions-Includes/IMG-ImageEditor.aspx" UseTextureBrush=False />