Pocket Image Editor v1.1
- By Kingherc
Contents:
1) Introduction
2) Setup
3) Instructions of Use
3.1) Main Screen
3.2) Navigation & Keys & Point-&-Click Painting
3.3) Image Editing and File Functions
3.4) Making Selections and using them
3.5) Effects
3.6) Drawing Shapes & Text
3.7) Options
3.8) Other helpful dialogs
4) Contacts & Website
Top 1) Introduction
Thank you for using Pocket Image Editor!
The program is free and by using it, you are encouraging its sharing.
Pocket Image Editor is a free, new, simple image editor for .NET Compact Framework devices and PCs. The aim of the program is to help users do basic editing on images. Overview of abilities:
> Point-and-click painting with colors and sizes and different movement behaviours.
> Effects (Negative Colors, Black & White, Lightness).
> File functions. Mini file browser included. Opening File supported. Saving File supported (.bmp). New Image supported. Importing image into current image supported.
> Image Editing (Flipping, Resize, Paper Size).
> Drawing (Line, Rectangle, Polygon, Text, Ellipse).
> Basic Undo (still not full functional).
> Making Selections: Select a region and edit it. Also supported are Copy, Paste and Fill (fill is not exactly the usual one. this function replaces pixels with the same color in the selected region with another color).
> Comprehensive cursor-based GUI.
> Zoom.
> Advanced Cursor movement (normal, accelerated and "paint when move"). Also, 4 cursor styles.
> Auto-Loading (on start) and auto-save (on exit) options to the registry.
In addition, Pocket Image Editor is also intended to help developpers for .NetCF development. It contains useful forms you could use in your application such as File Explorer, Color Picker, File Save, Get Points, Input Dialog, Save Image to BMP file, Image Editing Functions etc. It can also be called by a program as a modal dialog box to return an image. Finally, it's an example of cross-platform programs. It customizes itself automatically for different platforms (PCs, Pocket PCs, Smartphones).
Small Note: Because Pocket Image Editor is intended for many devices. Keep in mind though, that smaller devices, with less capabilities, have smaller memory. So, it shouldn't be used heavily on smartphones for example.
Also, be sure to read Licence.txt and GPL.txt and this ReadMe.htm before using the program or the source in any way! Any help in its development would be appreciated!
Top 2) Setup
.NET Compact Framework platforms include: Windows Mobile 2003 or later (Smartphones 2003 or later), Pocket PCs 2003 or later, PCs with .Net (Compact) Framework installed. .NETCF is a new technology of Microsoft used in new platforms.
The only folder needed to be copied on your device is "Pocket Image Editor" contained in the original distribution package. First of all, copy the folder. Then, with your device's file explorer, go to your Program Files folder and paste the copied folder there. Open the folder and select/Menu>File/right-click Pocket Image Editor.exe and click Create Shorcut. Also select the newly-created shorcut and click Cut. Go now to the Windows directory of your device. Find the folder Start Menu and paste the shorcut there.
You can now run the program by clicking its shorcut from Start Menu > Programs.
Top 3) Instructions of Use
Top 3.1) Main Screen
The main screen is composed of basic image editing stuff. At the centre, there is the image edited and also the cursor which is for navigating the image. At the right and at the bottom, there are two scrollbars signifying the cursor's position relative to the image. There's also a small icon with a pencil. This icon sometimes changes to show how the cursor moves or paints. At the left of this icon are the coordinates of the current position of the cursor relative to the image (coordinates are X-horizontal and Y-vertical). Also the step is written. Step is the number of pixels the cursor moves when you press any of the navigation keys. At the right of the icon, there is a small black square. It's size signifies the size of the paint to be drawn when the action key (middle navigation key) is clicked.
If you run the program on a PC or Pocket PC, there will also be the following: To the left of the pencil icon, there will be two options for increasing and decreasing the cursor step and the paint size by clicking it. To the left of these options, there is a magnifying glass icon which toggles the zoom when clicked. You can also click the pencil icon and the small black square to change them.
Also note that each window usually has a Menu > Help button containing help for that window in case you do not know what to do.
Top 3.2) Navigation & Keys & Point-&-Click Painting
Navigating the image is fairly easy. Press any of the navigation keys and the cursor will move to that way according to the step which can be modified by keys 1 and 2. When the cursor is moved, the scrollbar changes to show the cursor's position relative to the image. To paint a spot, press the action button (middle nav key). The spot's size is according to the paint size which can be modified by keys 4 and 5. If you want to paint when you move, press 7. If you want to move automatically and just change direction with the nav keys press 6.
Keys:
Left nav key - Move left. (Keyboard: A)
Right nav key - Move right. (Keyboard: D)
Up nav key - Move up. (Keyboard: W)
Down nav key - Move Down. (Keyboard: S)
Middle nav key (action) - Paint a spot according to paint size. (Keyboard: Space)
1 - Reduce cursor step by 1. (Keyboard: T)
2 - Increase cursor step by 1. (Keyboard: Y)
3 - Toggle cursor visibility. (Keyboard: U)
4 - Decrease paint size by 2. (Keyboard: G)
5 - Increase paint size by 2. (Keyboard: H)
6 - Toggle floating cursor mode (automatically moves cursor and you just need to press the nav keys to change direction). (Keyboard: J)
7 - Toggle Paint When Move mode. (Keyboard: B)
8 - Toggle Zoom. (Keyboard: N)
# - If Pocket Image Editor was called by another program, this button close Pocket Image Editor and allows the previous program to continue its operation. (Keyboard: ,)
On PCs and Pocket PCs, you can also click on the image to move the cursor. You can also double-click it to paint if Options > Allow Double Click is checked.
Top 3.3) Image Editing and File Functions
To make a new image: Click Image > New Image... Follow the instructions to create an image with your selected background color.
Open File: To open an image (.jpg, .gif, .png, .bmp), click Image > Open File... Wait a moment. A File browser will appear. Navigate to the location you'd like and select the file to open. Press Done.
* File Explorer can be slow
Save Image: To save an image (.bmp) click Image > Save Image To... A dialog will appear. To change the destination directory click Menu > Choose Directory (a directory explorer will appear). Then enter the name of the file to be created. If the file exists, it is replaced.
* Is slow
Import Image: To import an image file (.jpg, .gif, .png, .bmp): If you want to import it with its actual size click Image > Import Image > Actual Size. A file browser will appear. Select your file and press done. The image will be draw with its upper-left point being the location of the cursor. If you want to import an image to a selection: Make a selection. Then click Image > Import Image > Inside selection. A browser will appear to select your file.
Flipping the Image: To flip the image: Click Image > Edit > Flip Horizontally to flip it horizontally. Click Vertically to flip it vertically.
Resizing Image: To resize the image click Image > Edit > Resize and follow the on-screen instructions.
Paper Size: With this you can adjust the canvas size. The image is not resized! So, if the image is bigger than the new dimensions, it is chopped and put in the center. To change paper size (you're also able to choose a background color) click Image > Edit > Paper Size...
Top 3.4) Making Selections and using them
Selections are very useful in the whole applications. They define a rectangular region where many things can be made (painting stuff, cut, copy, paste, flip, effects etc.). Also, many options in the menu are exclusively for selections (such as drawing an ellipse).
To make a new selection and enter selection mode you need to press Selection > New. Then many options are enabled and disabled in the menu. Not until a full rectangular region appears will the options work. To make such a region move the cursor to one of the desired corners of the region. Click the action (middle nav key) button. Then move the cursor to the other corner. You will see that as you move, the selection is visible. Stop the cursor when you're satisified. Your selection is now ready. To clear it out, click Selection > Clear Selection. Some useful things to do with selections:
Copy: To copy a selection to memory click Selection > Copy. The selection copied will stay in memory even when the selection is cleared.
Paste: If a selection is already copied, it is then pasted inside the selection resized.
Fill: To fill a selection with a color. Another function is available: to replace a color in the selection with another one.
New Selection from Copy: This is a special command to make a selection rather than edit it. When you copy a selection and you want to paste it to a selection with its actual size, you can't really measure the selection easily. So, if you have copied a selection, you can use Selection > New from Copy to make a selection with the size of the copied selection. The selection's upper-left point is the location of the cursor. If the selection is oversized (exceeds image's dimensions), it's not made.
Other: You can make the effects work only for selections. Also, you can flip a selection. Also, you can import an image to the selection. In addition, you can draw a rectangle or an ellipse or truncuate text into a selection.
Top 3.5) Effects
Many effects are available and more will come on the way! They're fun and pretty useful! You can apply them to all of the image or to a selection. Note that when effects are applied to large areas, they can be slow. Here's the current list:
Negative Colors: To turn the image to its negative, click Effects > Negative Colors.
Black and White: To make the image black and white (without color instances but only with black and white instances that is), click Effects > Black and White.
Lightness: To increase or decrease the lightness of the image click Effects > Lightness... Then you need to enter a value for the intensity of the effect. Negative values are for darkening and positive are for lightening.
Top 3.6) Drawing Shapes & Text
One of the basic functions of the program is drawing shapes & text. Each shape is described alone:
Line: A line is defined by two points. To make one click Draw > Line. To change the width of the border, click Menu > Choose Width... To change color click Menu > Choose Color... To choose the points of the line click Menu > Choose Points... You're now ready to paint the line. Click Done.
Rectangle: A selection is required. A dialog with the characteristics of the rectangle will appear. You can change the border, colors, fill ans shadow through the menu. Press Done when finished.
Ellipse: A selection is required (bounding rectangle for the ellipse). Same dialog will appear as for rectangle. Press Done when finished.
Polygon: Two dialogs will appear. The first one will require the points of the polygon. You can click the action button and move with the nav keys to define points. To change the number of points, use the menu. Press Done when finished. Then another dialog will pop-up. It's the same as for the rectangle. Change the characteristics through the menu and press Done when finished.
Text: A selection is optional. This function serves to paint text on the image. To draw text click Draw > Text... A dialog will pop-up. Enter the text you want (one line). Then define the size in em. Then select the characteristics for the text. Note that for now, it would be best to check only one checkbox at a time (that is not to select multiple checkboxes) because I have noted they do not work when they're checked altogether. Then from the drop-down list select the font you want. If you want to define your own through its name select UserDefined. If you choose UserDefined you must click Menu > Enter user-defined Font... to provide its name. Finally through the menu you can also choose the color.
Now, if you have not made a selection: You must define the upper-left point of the text to be drawn. To do that click Menu > Define Upper-left point.
If you have made a selection: You do not need to do anything else. Just keep in mind that the text to be drawn will not surpass the boundaries of the selection. Note that the text is not resized.
Press Done when finished.
Paint Color: Click Menu > Paint Color to choose the paint color of the cursor when the action is clicked.
On PCs and Pocket PCs: On some dialogs, you can also click the color boxes to select a color instead of clicking Menu > Select Color.
Top 3.7) Options
Some options are available for better functionality and comfort. They can be found at Menu > Options. A description for each of them:
Floating Cursor Speed: This option affects the speed of the cursor when it is automatically moved (click key 6 to toggle this function).
Cursor Style: Some cursor styles exist to ease navigation of the image. Note that all cursors are of rectangular shape and cannot be transparent. The default is a cursor with its outer color being white, and the inner being black and it has a white pixel right in the middle. It's the best of them all if you ask me. There is also its reversed version if the image you edit has much white in it.
Zoom: With this menu you can define the zoom depth when you click key 7 to toggle zoom. Unlike 50% or 100%, I provide another means to define zoom. It's based on the number of pixels the zoom shows on the screen. So, if you want the zoom to show for example 50x50 pixels of the area where the cursor is, select 50x50 pixels. The default is 20x20 which is the best in my opinion.
Paint When Moving: A useful option. When checked, the cursor will automatically paint (as if the action button was clicked) when it's moved. Please note that if the cursor step is bigger that the paint size, there will be spaces between the paint areas.
Low level Undo: This option is strictly for memory management. By default (low level), undo works only in some cases but prerserves much memory for long-time editing. If you however want to edit the image with few steps but want to reconsider your editing, uncheck this option for high level undo. High level undo is memory-consuming but works in all cases (even for a small point-and-click paint).
Default Explorer Dir: Select the Start folder of the File Explorer. For example, if you select My Documents, when you click Image > Open File... the file explorer will show My Documents and its subdirectories. Click Device Root to show up all file system directories. But this is not recommended for large systems because the program will freeze. Finally, if you select Prompt, then a message box will show up each time requiring you to select the start folder.
Allow Double Clicking: (PCs/Pocket PCs) If this is checked, you can double click the image on the main form to trigger the action button. This means, for example, that you can paint by double clicking.
Top 3.8) Other helpful dialogs
A number of helpful dialogs exist that show up many times to serve the same purpose each time. For example, such a dialog is the Color Picker. It shows up each time you click to choose a color. General help can be found for each dialog here:
Color Dialog: This dialog serves the purpose of choosing a color. Further help provide in Menu > Help.
You can choose colors with three modes: 1) From the pre-defined ones (from the image with the variety of colors) 2) from Red-Green-Blue values 3) From web-http color values 4) Pick a color from the image. When the dialog appears it enters mode 2 automatically.
Mode 2: Three boxes are enabled. They contain the Red (R), Green (G), Blue (B) intensities of the color you want. The intensities vary from 0 to 255. You can edit them and see the resulting color next to the boxes.
Mode 1: Click Menu > Choose Predefined to enter this mode. Then, with the nav keys you can move the cursor. With key 1 and 2 you can in/decrease its step. The color choosen can be seen on the color box on the bottom-right corner.
Mode 3: Click Menu > Hex/Html To Rgb to enter this mode. A box will appear. Enter the hex value of the color. The color will show next to the box.
Mode 4: Click Menu > Pick From Image... (if available). The point-picker dialog will appear. Choose with it the point you want and then the color will appear on the color box on the bottom-right corner.
Click Done when finished.
On PCs/Pocket PCs: You can also click on the pallette image to choose a color.
Point Selection: This dialog helps you choose points for different purposes (defining a line for example). It consists of the image, a cursor, it's location's coordinates. You can move the cursor with the nav keys and you can click the action button to define the point and move on to defining the following point. The current point always shows up on the bottom. When you finish selecting points, a text message Complete! will appear and you can click the action button again to complete the point selection process. Through the menu though you can do the following stuff:
Change the point style: The first three checks provide means to alter the appearance of points selected.
Reset Point Editing: If you changed your mind and want to select the points from the beginning, click this one.
Set Current Point: If you want to roll back to a previous point to select or you want to go to a next one, you can do it with this. Just provide the number of the point you want to edit. Selecting points will continue from the point you select.
Assign Current Point: If you do not want to select apoint with the cursor but you want to select it providing its coordinates, you can do it with this.
Set Number Of Points (if available): Useful when you define a polygon for example. You can set the number of points you want to select.
Show Assigned Values: To see the coordinates of each point you have selected so far.
Press Done when finished.
On PCs/Pocket PCs: You can also double click on the image to select a point.
File Explorer: This dialog helps you choose a folder or a file. When it's loaded, it shows up the search folder you selected at Options > Default Explorer Dir on the main window. You can navigate with the navigation keys or by clicking (On PCs/Pocket PCs). If allowed by the program, you can also change the parent folder by Menu > Load Directory. If you want to show/hide Files check Menu > Show Files. If you want to create a folder, click Menu > Create Folder.
Select the folder or file and click Done when finished.
If a reading error happens (for example, if a directory corresponds to a removable unit that is not present), an error item will show up under that folder.
On PCs: This window is also resizable.
Top 4) Contacts & Website
You can always contact me for any reason through a form on my website at http://www34.brinkster.com/kingherc/ where you can also find more information and updates on the program. If you need also help and other info you can contact me at king_herc@yahoo.com.