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:
() is the current tool - Click to bring up the TOOLS window
() is the primary color - Click to bring up the COLOR window
(
) swaps the primary and secondary colors
() is the secondary color - Click to bring up the COLOR window
() 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
The middle (currently blank) region will show icons/settings specific to the current tool
() 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)