Omni Paint

Whoo boy. This one is a big one. This screen is meant to be an image editor like Photoshop, specifically because there isn't one for Android that supports styluses (ie: Galaxy Note) while locking out the touch screen, and supporting advanced features like layers. I'm not actually aiming to clone Photoshop but make a good drawing program for devices with styluses. It just so happens that the best drawing program I've used is Photoshop.

However Android devices lacks the processing power of a desktop PC, and some UI methodology that worked OK with a mouse (like clicking and dragging to select an area) don't work at all with a touchscreen or stylus and had to be altered. So some things won't work the same way as you'd expect from Photoshop. Many features are missing or not complete, but this is going to be a rather long-term project.

There are 3 ways to open this screen:

-The mode select screen (the main menu) has OMNI PAINT under TYPE\FUNCTIONAL or SHOW\WATCHMEN

-When in the FILE EXPLORER, select an image on your device and click File\Edit

-From the Veidt OS, open the NOSTALGIA folder from the desktop, then OMNI PAINT

A description of the menus:

- File
  - NEW: Create a blank file (it will ask you for the Width and Height with a popup)
  - OPEN: Use Android's Content Chooser dialog to open an image.
  - OPEN RECENT: Shows a list of the last 10 files you've opened, clicking one will open that file
  - CLOSE: Close the current file, asking to save if any changes have been made
  - CLOSE ALL: Closes all open files, asking to save if any changes have been made
  - SAVE: Save the current image as the format it was opened in (if you added layers to a JPG or PNG file, it will ask if you want to save as an OMNI file)
  - SAVE AS: Save the current image as either a JPG, PNG or OMNI file
  - SHARE: Saves the image as a JPG, and sends it to Android's Share menu
  - EXIT: Exits Omni Paint to the Veidt OS desktop, if all open files close properly
- Edit
  - UNDO: Undoes the last thing you've done
  - REDO: Redoes the last thing you've done if you've undone it
  - CUT: Copies the selected area of the current layer to the clipboard, and erases it from the image
  - COPY: Copies the selected area of the current layer to the clipboard
  - COPY MERGED: Copies the selected area of every layer to the clipboard
  - PASTE: Pastes the clipboard within the selected or visible area
  - PASTE FROM: Use Android's Content Chooser dialog to copy/paste an image
  - CLEAR: Erases the selected area
  - FILL/STROKE:
  - ☑ Close path: When checked, the first and last points will be connected to each other
    - ☑ Fill: When checked, the selected area will be filled with the primary color
  - ☑ Anti Aliasing: When checked, the pencil tool will use anti aliasing to reduce the stair-stepping effect
    - : Which tool to use to draw around the edge of the selected area (use the Fill tool to leave the edge alone) Does not apply if you used the Magic Wand tool or Select INVERT menu to select the area
  - TRANSFORM
    - FLIP HORIZONTALLY: Flips the selected area along the X axis
    - FLIP VERTICALLY: Flips the selected area along the Y axis
    - ROTATE 90° LEFT/CW: Rotates the selected area one-quarter turn clockwise
    - ROTATE 90° RIGHT/CCW: Rotates the selected area one-quarter turn counter-clockwise
    - ROTATE 180°: Rotates the selected area one-half turn
    - ROTATE ARBITRARILY: Asks you how many degrees to rotate the selected area clockwise
    - SCALE: INCOMPLETE
    - ROTATE: INCOMPLETE
    - SKEW: INCOMPLETE
    - DISTORT: INCOMPLETE
  - ADJUSTMENTS: INCOMPLETE
    - BRIGHTNESS/CONTRAST
    - HUE/SATURATION
    - BLACK AND WHITE
    - INVERT COLORS
  - RESIZE IMAGE: Resize the image or canvas (See the RESIZE IMAGE popup)
  - CROP: The image will be cropped to the area selected using the Select Rectangle tool
  - TRIM EDGES: Crop based on the edges of the image automatically detected using a specific color (See the TRIM EDGES popup)
  - OPTIONS: INCOMPLETE
- Layer
  - NEW: Creates a blank layer above the current layer
  - DUPLICATE: Creates a copy of the current layer
  - DELETE: Deletes the current layer
  - RENAME: Asks you for a new name for the current layer
  - CLIPPING MASK: INCOMPLETE
  - MERGE DOWN: Merge the selected layer with the one beneath it
  - FLATTEN IMAGE: Merge all layers into the bottom-most layer
  - MERGE VISIBLE: Merge all visible layers with the layers beneath them, skipping over non-visible layers
- Select
  - ALL: Selects the entire current layer
  - DESELECT: Deselects the selection
  - INVERT: Swaps the selected and de-selected areas
  - COLOR RANGE: INCOMPLETE
- Filter
  - BLUR: INCOMPLETE
  - PIXELATE: INCOMPLETE
- View
  - ZOOM IN/ZOOM OUT: Zooms in/out by a small amount
  - 100%/200%/500%: Zooms in to that level
  - FIT ON SCREEN: Zooms out so the image fits perfectly inside the window
  - GRID: Shows gridlines over the image
  - RULERS: Shows rulers at the top and left of the viewing area
  - FILES: Shows a list of all the open files. Clicking one switches to that file
  - DEBUG: Options more useful to me, or advanced users
    - ALL OBJECTS: Sends info on all UI objects to a PC running the Android SDK or Basic4Android
    - RECALC BOUNDS: Recalculates the used area boundaries for each layer
    - SHOW BOUNDS: Shows the used area boundaries
- Window: Adds the following panels to the Windows List
  - INFO: Shows information (X/Y coordinate, color) on the pixel of the image the mouse cursor is over
  - THUMB: Shows the thumbnail of the image, and what part of it is currently visible
  - HISTORY: Shows a list of Undo snapshots
  - LAYERS: Shows all the layers in the current image
  - PALLET: Shows a larger list of colors to choose from and add to
  - CLONE SOURCE: INCOMPLETE

Some menu items will also show what their keyboard shortcut is on the right side

The lower bar shows:

-The name of the currently open file, it's dimensions in pixels, and a * if it hasn't been saved

-How much RAM is available to the SCIFI UI. This number will fluctuate wildly (much to my dismay), but the closer it gets to 0 bytes, the more likely you should save your work

The icons in the bottom bar:

1. () is the current tool - Click to bring up the TOOLS window

1. () is the primary color - Click to bring up the COLOR window
2. (

1. ) swaps the primary and secondary colors
2. () is the secondary color - Click to bring up the COLOR window
3. () shows the status of touch support. When this is shown over the icon then you can only draw with a stylus or mouse. The touchscreen will be ignored. You can only click this button with a stylus/mouse
4. The middle (currently blank) region will show icons/settings specific to the current tool
5. () Toggles visibility of the Window List

Information on file formats:

- JPG: Lossy compression (some data is discarded), which is good for photos of real objects. Doesn't support transparency, doesn't support layers
- PNG: Lossless compression (no data is discarded), which is good for drawings/pixel art. Supports transparency, doesn't support layers
- OMNI: Lossless compression (it's just a ZIP file of all the layers/data), which is good for files you want to continue editing later. Supports transparency and layers
- BMP: No compression, but Android doesn't support saving to this format
- GIF: Lossless compression, but Android doesn't support saving to this format. Only supports 256 colors. Supports transparency and animation

Windows:

TOOLS

The icon with the black background is the current tool

Clicking a tool will select it

☑ Auto close: When checked, clicking a tool will close this window

COLOR

Clicking/dragging the RGB sliders will change that channel of the color

Clicking a spot on the rainbow will show that color on the right side and select that color

The right side will show different shades of the current color from light to the pure color to dark

Clicking a spot on the right side will select that color

BRUSH

Changes the parameters of the current paintbrush

Diameter: The size of the paintbrush in pixels

Hardness: The diameter of the inner solid circle in percent

0% = No outer gradient

50% = 50% of the diameter will be the inner solid circle, the rest will be the gradient

100% = No inner solid circle

Interpolation method: Change how the space in between the points are drawn

- Line: A straight line from points A to B
- Curve: A bezier curve from points A to B to C

This will be expanded to have different brush shapes in the future

WINDOWS LIST

Clicking the icon in the top right corner will toggle visibility of the Windows List

Photoshop has a lot of sub-windows, which works really great if you have multiple monitors. Android however does not, so I had to make do with limited space by putting all those windows in a scroll-able list. Clicking the box in the top-left corner of a window will close it just like in the Veidt OS, and shift all windows below it upwards to fill the space.

INFO

Shows information (X/Y coordinate, color, Width/Height) on the pixel of the image the mouse cursor is over

When the Ruler tool is selected, Width/Height will be replaced with Distance/Angle

HISTORY

Shows a list of Undo snapshots.

Clicking one will go backwards to that snapshot. The up/down arrows control how many snapshots will be kept

The up/down arrows at the bottom left control how many undo states are retained. The text box next to them shows that number

Click Edit\Redo to forward past the last snapshot

THUMB

Shows the thumbnail of the image

The square shows what part of it is currently visible

Clicking will focus on the part of the image that you clicked

LAYERS

The image itself can be split into various layers, allowing you to edit different parts without affecting others.

- Clicking a layer will save the changes to the current image and select the new one
- Clicking "Opacity" will popup a slider to let you change the opacity of the current layer. 0=Completely transparent, 255=Completely Opaque
- The ☑ controls the visibility of that layer
- The up/down arrows at the bottom will move the current layer up/down in the order of layers (the bottom layer is at the bottom of the list)
- The third icon creates a new layer
- The fourth icon duplicates the current layer

PALLET

Stores a larger list of colors to choose from.

The first 3 icons control what happens when you click a color using the

tool

- 🚫 Nothing will happen
- - The color will be removed from the pallet
- + The color will be added to the pallet

The last icon is for loading a saved color pallet. I have included the 16 from Animal Crossing, and 1 from Mario Kart DS. The top one "[NEW]" will load a blank pallet.

On the second row:

- Palletization: Convert the selected area (or layer, if nothing is selected) to only use the colors in the pallet
- Sample Pallet: Brings up the Sample Pallet popup

Pallets are saved automatically when you exit the program, or load a new pallet. It will ask you for a filename for ones you created.

Clicking a color box will select that color

Tools:

Icon

Name

Move

Magnifying glass

Eyedropper

Select Rectangle/Oval

Select Lasso/Polygon

Transfer Selection

Save changes

Nudge

Paintbrush

Paintbrush shape

Eraser

Pencil

Ruler

Magic Wand

Fill

Spray can

Gradient

Pen

Clone Stamp

Text

Instructions

Drag the image to move the viewable area around

Click the image to zoom in there

- Zoom out
- Zoom in

Click the image to select the color of that pixel as your primary color

Selecting this tool will place 4 crosshairs on the image

Moving them around will position the selection area

You can also drag the edges of the selection area to move that edge

- ☑ Always square: Click to select a square/circle instead of a rectangle/oval

Similar to the Select Rectangle/Oval tool, but the selection area will not be limited to a rectangle

- Remove Point - Clicked points will be deleted
- Add Point - Points will be added where you click (or moved if you click a crosshair)
- ☑ Close Path: When checked, the final point will be connected to the first one

Moves the selected area to the editing layer (you need to do this before you can use the nudge tool on the selected area)

Moves the editing layer back to the current layer

Drag the image to move either the editing layer, all the crosshairs in unison, or the current layer

Drag the image to draw the current paintbrush shape over top of it using the primary color

Brings up the BRUSH window to edit the shape of the paintbrush/eraser/pencil tools

Drag the image to erase the current paintbrush shape from it

Drag the image to draw the current pencil shape over top of it using the primary color

Faster than the Paintbrush tool and looks better at low diameters (1-3 pixels), but the shape drawn will always be a circle

Measures the distance and angle between 2 crosshairs and puts it in the INFO window

Selects pixels in the image based on how close they are to the color of the pixel you clicked

Tolerance: How close must a pixel be to the starting color to be selected. 0=pixels must be an exact match, 255=the biggest difference possible (click to change the number)

☑ Use all layers: When unchecked, it will only check the pixels in the current layer. When checked, it will check every layer
- ☑ Contiguous: When unchecked, all pixels in the image will be checked. When checked, it'll stop checking when it reaches pixels that don't match

ie: if you click inside a square, with contiguous checked it won't check outside the square. With it unchecked, it will check the whole image

Similar to the Magic Wand tool, but will fill the selected pixels with the primary color

Similar to the regular Paintbrush tool, but the alpha level of the pixels will be randomized

Draws smooth color transitions between 2 points starting from where you touch/click, ending where you lift your finger/mouse

- Bar Gradient - Drawn in a straight line

- Radial Gradient - Drawn in a circle/oval, starting at the center, radiating outwards

- Sweep Gradient - Drawn in a circle/oval, like the sweeping sensor line seen on radars (ignores the modes below)

- Clamp mode - The gradient should continue drawing using the last color

- Repeat mode - The gradient should continue drawing by just repeating the entire gradient

- Mirror mode - The gradient should continue drawing by just repeating the entire gradient but mirrored so it blends together
- Alpha - Scale the Alpha channel of each stop by this percent
- ☑ Transparency - Disable the Alpha channel, and set every stop to 100%
- Brings up the Gradient Editor popup

Uses my vector API to generate smooth curves for use with the Fill/Stroke menu item

Each tool requires a certain number of points in series to connect. A new series will use the last point in the previous series (so the new series will need one less point than the first series needed)

This tool modifies raw data for my vector API, so it can be a bit unpredictable. It works best if you start with no points, select either Bezier or Bicubic from the start, and stick with that tool the whole time. Once you start mixing tools, it may become unstable.

Why did I use the vector API instead of starting from scratch? Cause the API does a LOT already, and starting over would take a lot more time. The API also lets you pick which curve type you want to use, as some people prefer to use the simpler Bezier curves, and others prefer the more powerful Bicubic curves.

- Remove Point - Clicked points will be deleted
- Move Point - New points will not be created if you click away from the crosshairs
- Line tool - The next 2 points will act as a straight line (the tool is better if you're only going to use lines)
- Simple curve tool - The next 3 points will act as a bezier curve (a simpler way to make curves than the complex curve tool. SAI uses these)
- Complex curve tool - The next 4 points will act as a complex curve (the kind Photoshop uses for it's pen tool, which gives you a lot more control over the curve)
- Polygons [#] - How many smaller lines each curve will be made up of. The larger the number, the smoother the curve.
- INCOMPLETE - Copy the points to the Polygon select tool

INCOMPLETE - Clone one part of the image to another

Place text onto the image (can only use Android's built-in fonts, and fonts used by the SCIFI UI due to limitations with Android)

- Click the icon to change the text color
- Click "Size" and a slider will popup to let you change the font size
- Click an alignment icon to change where the text will be drawn
- Click the "FONT/STYLE" button to bring up the font/style selection popup
- When a text layer is selected, the text area will be shown with crosshairs
- Click inside the text area (away from the crosshairs) to change the text without bringing up the font/style selection popup
- Clicking a layer that isn't a text layer will create a text layer automatically
- Left Align
- Center Align
- Right Align
- Equidistant Align - Text will be equally spaced apart to fill the text area

Popups:

Font/Style

The Font/Style changes won't be saved until you click the "OK" button.

Changes to the text will save even without clicking "OK"

- ☑ BOLD: Toggle the bold style of the font
- ☑ ITALIC: Toggle the italic style of the font
- LINE SPACING: How many pixels will be drawn between each line
- Text: The current text of the layer, click this to edit the text. This is how the text will look with the current options
- A list of fonts: Click one to select the font

Sample Pallet

- ☑ White, Black, Primary/Secondary Color: Force these colors to be included in the pallet
- Tolerance: How close a color must be to be counted as an existing color (out of 255. 255=Exact match, 1=A color would have to be extremely different from one in the pallet to count as a new color)
- Max Colors: Stop collecting colors once the pallet reaches this limit

Trim Edges

- ☑s Based On - What color to count as an edge (only 1 can be selected)
- ☑s Trim Away - Which edges to remove (Any number of which can be selected)

Resize Image

- Current Size: (Pixels) - Self-explanatory
- New Size - The desired size in the selected units
- ☑ Keep Aspect Ratio - While checked, when you change one axis, the other will be changed to keep the original shape of the image intact
- Units - Which unit of measurement to use for the New Size (Currently just Pixels and Percent)
- Scale Mode - Which method to use to change the image's size
  - Disabled: The canvas itself will only be resized, the images themselves will not be modified
  - Normal: The method Android uses by default (low quality)
  - Anti-Aliased: Android's anti-aliasing mode will be turned on
  - Nearest-Neighbor: No interpolation between pixels will be used, best for pixel-art
- Anchor - If "Scale Mode" is set to "Disabled", then this is used to select where the old image will be placed inside the new dimensions

Gradient Editor

- Click a gradient sample from the top to select that gradient
- LOAD FILE - Select a gradient file from a list of those built into the app, and in the OMNIDIR directory (the current file is saved automatically when you open a new one)
- NEW GRADIENT - Add a (mostly) blank gradient to the list to edit
- DELETE GRADIENT - Delete the selected gradient
- Stops - Edit the individual stops along the gradient. Click and drag the arrows to move them around. Clicking an area more than 5% away from an existing stop will make a new one where you clicked. The number above the gradient shows the current Alpha percentage of the stop. The arrow below shows the color (1=Primary color, 2=Secondary color)
- Alpha - Changes the Alpha channel (transparency) percentage of the selected stop
- Location - Changes the location percentage of the selected stop

- - Brings up the Mini Color Picker popup to choose the color of the selected stop
- Delete - Delete the selected stop from the gradient (you can't delete the last 2)

Mini Color Picker

Whenever you click a

it will bring up this popup to edit the color

It's similar to the Color window, but with the White/Black buttons moved out of the way, and 2 more buttons to use your primary (^#1) and secondary (^#2) colors

To do:

- Everything marked as incomplete
- Make it so that new crosshairs will be placed in-between the 2 closest crosshairs, instead of just before the closest one
- Fix dragging to be smoother at higher zoom factors
- Recover lost files
- Keyboard/game controller/right-click/mouse wheel support
- Google font downloading (if possible)

Page updated

Google Sites

Report abuse