User interface

This page describes the in-game user interface (or in-game UI for short). The UI allows the player to choose between placing boxes, crosses, or other marks that can help solve the nonogram. It also allows use of weapons (only available to guild participants), customization of the nonogram colors and toolbar, and much more. You will encounter this UI every time you want to solve a nonogram, so getting familiar with it is essential.
==Number bars==
Number bars (sometimes also called "clues") are ambiguous instructions for how to solve a nonogram. They are ambiguous, because the player must figure out through logic how to color each cell. Number bars are comprised of one vertical bar and one horizontal bar. The vertical bar gives the clues for how cells should be colored vertically, and the horizontal bar gives the clues for how cells should be colored horizontally. 
Number bars have 3 extra settings, which are mainly used for easier solving of 20x20 or bigger nonograms. Touch and drag on parts of the number bars to use these features:
*Number bar - scroll the number bar between clues.
*Black arrow with yellow overlay - move the number bar closer or farther from the nonogram grid.
*Black triangle with blue overlay - increase or decrease the size of numbers/cells on the number bars.
*Align mode - aligns numbers on the number bars to the opposite side.
Number bars - scroll left.png|Scrolling left on the number bars.
Number bars - scroll right.png|Scrolling right on the number bars.
Number bars - closer.png|Moving the number bar closer.
Number bars - farther.png|Moving the number bar farther.
Number bars - zoom in.png|Increasing the size of numbers/cells.
Number bars - zoom out.png|Decreasing the size of numbers/cells.
=== Number align mode ===
This feature aligns the numbers on the number bars to the opposite border of the number bars, which makes solving nonograms on top and left borders much easier. This feature needs a bit setting up, because in some nonograms it is not needed.
How to align numbers to the left border on the vertical numbers:
*Zoom in the nonogram.
*Unlock the vertical number bar.
*Scroll all the way left on the number bar.
*A new button will appear on the vertical number (below the button for locking the number bar).
*Tap the new button.
Note: the number bar doesn't need to be scrolled scrolled all the way for the number align button to appear. When the button appears varies with the length of number bar and the number of numbers/clues visible to the player.
To align the numbers back, press the same button (slightly different icon).
Number align mode - step 1.png|Step 1: Zoom in the nonogram.
Number align mode - step 2.png|Step 2: Unlock the number bars.
Number align mode - step 3.png|Step 3: Scroll the numbers to to opposite side.
Number align mode - step 4.png|Step 4: Tap the number align button.
400px|center|thumb|A short video about how number align mode works.
==Toolbar==
The toolbar consist of 10 main buttons, most of which can be can be customized. Below are explanations of buttons, menus and sub-menus.
Default buttons
Button	Explanation
 	Color button - when selected, tapping on a cell colors it black or the color selected. When tapped, opens a menu with two options.
 	Cross button - when selected, tapping on a cell puts a cross on it. Cells with crosses mean, that these cells are 100% NOT colored.
 	Mark button - when selected, tapping on a cell marks a cell with the mark selected. These marks mean that a cell can be colored or crossed. Marks are only meant for easier solving (e.g. counting cells). When tapped, opens a menu with different mark options.
 	Clear cell button - when selected, tapping on a cell clears the cell of colors, crosses or marks (sets the cell to the original state).
 	Tools button - opens tools. If selected, the player can color the nonogram by dragging, but not move around it (see move button below).
 	Move button - when selected, allows the player to drag the nonogram to move around it (more useful on big nonograms). If move button is selected, the player can tap a cell to color it (box, cross or mark) or tap, hold and then drag to color multiple cells.
 	Back button - tapping on it, undoes player's last action. This button is faded until player's first action, player's first action or after the player locks the state.
 	Forward button - tapping on it, goes one action forward. This button is faded until the player taps the back button.
 	Zen button - opens the Zen menu.
 	Options button - opens the options menu.
Color button has 2 options:
*Option 1: All-in-one button - cycle between color-cross-empty every time the player taps on a cell.
*Option 2: Color button (default) - color or clear the cell on tap.
==Marks==
Marks are used for marking cells. Marked cells are not counted as boxes or crosses, but more like empty cells. They are usually used for easier counting of cells or marking, which cells could be boxes. Below are listed all the possible marks:
* mark A
* mark B
* mark C
* exclamation mark
* question mark
* zen mark
* dot mark (default)
* slash mark
* arrow marks - if you drag them across cells, they change the arrow mark to the arrow mark dragged in that direction
There is also a little menu that shows when a certain mark is selected. When marks are drawn the player can then select one of these options in the menu to change the marks drawn into the selected option (box, cross or empty cell). These menus are faded, when no marks are on the nonogram grid.
Dot mark menu.png|Dot mark menu (also appears on mark A, B, C, !, ? and zen.
Slash mark menu.png|Slash mark menu.
Arrow marks menu.png|Arrow marks menu.
==Tools==
Tools are meant to help the player solve nonograms faster, easier and improve your solving experience as a whole.
 Straight line: drag to color cells in a straight line. The direction of the line can be changed, while drawing it by moving your finger closer to the wanted direction. This tool can't draw diagonal lines.
 Arbitrary line: drag to color any cell your finger touches. Can draw diagonal lines 2 cells wide and even 1 cell wide, if you are careful enough. Can't draw arrow marks diagonally (only in one direction).
 Rectangle: drag from one corner of the desired area to the opposite corner to color cells in a shape of a rectangle. 
 Paint bucket: tap on a box, square, cross or mark to color the entire section. It colors every cell that is touching (not diagonal touching) the box, square, cross or mark you have tapped. Behaves very oddly when paired with arrow marks.
 Color picker: tap on a box, square, cross or mark to select a color, empty square, cross or a mark; then it switches to the line tool or free hand tool - depends on what you have used the latest. Can be also tapped and dragged; then it switches to the line tool and after releasing switches back to the color picker. Can also be tapped on number bars.
 Ruler: hold on a box, cross, mark, cell or clue to measure the length of the selected line. Drag to measure the length of the selected line. Detailed explanation:
* When tapping and holding on a box, cross, cell or mark - measures the height and the width of the selected box, cross, cell or mark (must be a continues line and longer than 3 cells).
* When tapping and holding on a clue (in number bars) - measures and calculates the length of the entire line with crosses.
* When dragging a box, cross, cell or mark - measures the length of the selected line (it doesn't matter if it's a box, square, cross or mark).
*When dragging on clues - measures and calculates the length of the selected clues with crosses.
There is also an option to lock or unlock already drawn boxes/crosses. If it's unlocked (left image), the player can freely draw over/overwrite boxes and cross. If it's locked (right image), some special rules apply:
 
*If boxes are selected, you can't draw over/overwrite crosses, unless you start from a cross.
*If cross are selected, you can't draw over/overwrite boxes, unless you start from a box.
*If marks are selected, you can't draw over/overwrite either boxes or crosses.
*If empty cell is selected, you can still draw over/overwrite boxes or crosses.
Line tool example.png|Line tool - red line.
Free hand example.png|Free hand tool - light blue.
Rectangle tool example.png|Rectangle tool - dark blue rectangle.
Paint bucket tool - before.png|Paint bucket (before) - tapped on a cell inside the red lines.
Paint bucket tool - after.png|Paint bucket (after) - fills in green.
Paint bucket - before (cross).png|Paint bucket (before) - tapped on a cross.
Paint bucket - after (cross).png|Paint bucket (after) - tapped on a cross.
Paint bucket - before (box).png|Paint bucket (before) - tapped on a box.
Paint bucket - after (box).png|Paint bucket (after) - tapped on a box.
Color picker active.png|Color picker - tool selected.
Color picker empty.png|Color picker - tapped on an empty cell.
Color picker red.png|Color picker - tapped on a red box.
Color picker - tapped and dragged.png|Color picker - dragged on a green box.
Ruler - tap.png|Ruler - tapped on a cell.
Ruler - tap and drag.png|Ruler - dragged on clues.
==Zen menu==
In Zen menu there are even more options for solving nonograms. The table below has the explanation for every button in this menu.
Button 	
Explanation	Locks every box and cross (not mark). You can't change these boxes or crosses once they're locked - you have to unlock the state first. Usually paired with Boomerang or "Check Correctness".
Button 	
Explanation	Unlocks every box and cross. Now you can edit all boxes and crosses again.
Button 	
Explanation	Clears every box and cross, which isn't locked. Usually used in Contradiction method.
Button 	
Explanation	Fills all trivial lines. This can be used when ever a nonogram has trivial lines - even in the middle of solving. When there are no trivial lines this button is faded and can't be tapped.
Button 	
Explanation	Checks if every box and cross is placed correctly. If there are mistakes, one hint will be consumed and one cell will be fixed. Functions the same as Boomerang, but instead consumes hints.
Button 	
Explanation	Shows the answer/solution as an image. This feature is only available with VIP.
Button 	
Explanation	Rotates the nonogram 90 degrees clockwise and moves the number bars accordingly. When tapped again the nonogram is rotated back to the original position. After tapped the icon also changes.
Button 	
Explanation	Prints the puzzle to paper. Goes to "Select printer" screen, where you have different printing options.
Button 	
Explanation	Allows you to fully customize the toolbar (see images below). Drag icons you want to have to where you want to have them and save it by tapping the green check mark. You can also tap the three vertical dots beside the green check mark to enable/disable compact toolbar or to set the toolbar to default (before you have edited it). Icons in the bin section removes them from the toolbar.
Button 	
Explanation	Clears the nonogram grid.
View Answer.png|View Answer.
View Answer close up.png|View Answer - up close (tap the square in the bottom right corner when in View Answer).
Rotate puzzle - original.png|Rotate puzzle - original (marks are for orientation).
Rotate puzzle - rotated.png|Rotate puzzle - rotated 90 degrees (marks are for orientation).
Zen menu - Print menu.png|Print options for the nonogram.
Customize Toolbar.png|Customize Toolbar. Icons are explained in the sections above.
Customize toolbar - options.png|Customize Toolbar - options (3 vertical squares).
==Options==
Here you can find other settings, that you might want.
Icon	Explanation
 	Displays a cursor, which you can move (by dragging the triangle part) and draw with (by tapping or dragging the circle part). Double tap on the cursor's triangle part to flip it. Highlights the cell it's under. This can be useful for large nonograms.
 	Displays a mini toolbar with box, cross and empty cell icon. This mini toolbar can also be moved.
 	Opens a brief explanation of how to solve nonograms and how to use UI.
 	Gives you a hint - functions similar to Fan. By default you have 15 hints, but you can increase them by building Pagoda, by buying VIP. You can also increase/decrease the amount of hints with classes.
 	Opens a menu, which allows you to use various items (image below). The sack menu won't hide after an item has been selected, if you tap the pin icon.
 	Opens a menu, which allows you to customize the look nonograms (see Palette).
 	Opens Settings.
Options - Cursor.png|Cursor with explanations.
Options - Mini toolbar.png|Mini toolbar (between the nonogram grid and UI).
Options - sack.png|Sack menu (doesn't show all items, because the player doesn't have them).
===Palette===
Here you can customize the colors of nonograms.
Buttons/options	Explanation
 	Here you can find 6 color palettes for nonograms. You can even make your own palette and save it to the space above the floppy disk icon by tapping the floppy disk icon.
 	Changes the nonogram to light/dark mode (light/dark color palette). Dark mode is always the same color palette.
 	Here you can choose a color for anything on the nonogram (empty cell, nonogram grid, background of number bars, box, items showing solutions/hints, highlighted lines). You can then save the color palette by tapping "OK" or by tapping outside the menu.
 	Here you can choose between 9 different backgrounds.
 	Here you can choose between 10 different designs for boxes, 15 different designs for numbers and 3 different designs for crossed numbers (see images below).
Palette - boxes.png|Different designs for boxes (default selected).
Palette - different numbers.png|Different designs for numbers (default selected).
Palette - crossed0.png|Design for crossed numbers (#1 - default).
Palette - crossed2.png|Design for crossed numbers (#2).
Palette - crossed1.png|Design for crossed numbers (#3).
Category:Nonograms