## Basic Usage - Switch to the brush tool, and draw with the mouse by holding LMB over the canvas. If you have a tablet connected, just draw on the tablet - To erase, switch to the eraser tool, and draw over the parts you want to erase. For tablets, you can switch to the eraser tool, or you can just use your pen's eraser while the brush tool is selected - You can move around the canvas by holding the MMB/mouse wheel button. For tablets, pen button 1 is assigned to the middle mouse button. You can change this by going to Menu->Settings->Tablet->Middle click pen button - To zoom in/out, use the scroll wheel, or hold the control key and MMB (pen button 1 on a tablet) and drag the mouse up/down - Save your file by going to Menu->Save, or pressing Ctrl + S. The shortcut for Save As is Ctrl + Shift + S - Open files by going to Menu->Open, or dragging a file into the window. If the file isn't a .infpnt file, the app will assume that you meant to add a file/image to the canvas, and the file will just be included in the canvas instead ## Online Collaboration - Before hosting/connecting, you should go to Menu->Settings->General->Display Name, and change your name that will appear to others online - To host the file you're currently on, go to Menu->Host. Copy the lobby address that pops up, and send it to anyone you want to join the lobby. Once you press "Host" in this popup menu, the lobby will be open - To connect to a lobby, go to Menu->Connect, paste the lobby address into the given textbox, and press "Connect" - If either the host or the client need to get the lobby address again, it will be available in Menu->Lobby Info after your enter the lobby - IMPORTANT NOTE: There is a chance that, even with both people online, you are not able to connect to each other. This could be due to router/firewall settings. I am hosting one relay (TURN) server for this app, but I rely mostly on whether a direct connection can be established between the host and client (STUN). - Once connected, a chat bubble will pop up on the bottom left. Click that to open the chatbox, type your message, then press the "Send" button. You can also press F2 to open the chatbox, and Enter to send the message. If you want to cancel the message, press Esc, or press the chat bubble button again - Once connected, a list icon will appear at the top right of the screen. Click that to view a list of players on the server. You can jump to any other player's location through this list ## Shortcuts - To view all available shortcuts/keybinds, go to Menu->Settings->Keybinds - Note that, for macOS users, the "META" key is the command key - Shortcuts can be remapped by pressing the button containing the shortcut text, then pressing the new key combination for the shortcut while the button is highlighted ## Tools - Brush tool - Pressure sensitive if a tablet is being used - You can disable pen pressure sensitivity by unticking the checkbox at Menu->Tablet->Pen pressure affects brush size - Change the pen smoothing by going to Menu->Tablet->Smoothing sampling time - The size slider on the right changes the size of the brush. All size properties for all tools are relative to the current zoom level - Eraser tool - Erases complete objects when they are touched by the eraser. Can't erase portions of an object - Line tool - Hold LMB and drag the mouse to place a straight line - Hold Shift while creating the line to snap it to a set of common angles - Textbox tool - Hold LMB and drag the mouse to place a textbox - Hold Shift while creating the textbox to make the textbox a square - Once a textbox is placed, the program will switch to the Edit tool automatically, and you will be able to type text into the box - Ellipse tool - Hold LMB and drag the mouse to place an ellipse - Hold Shift while creating the ellipse to create a circle - You can change the properties of the ellipse between "Fill Only", "Outline Only", and "Fill and Outline". Outlines will use the main/top color on the left toolbar, which is the same as the one used for the brush tool. Fills will use the secondary/bottom color on the left toolbar - Rectangle tool - Hold LMB and drag the mouse to place a rectangle - Hold Shift while creating the rectangle to create a square - You can change the properties of the rectangle between "Fill Only", "Outline Only", and "Fill and Outline". Outlines will use the main/top color on the left toolbar, which is the same as the one used for the brush tool. Fills will use the secondary/bottom color on the left toolbar - Rectangle Select Tool - Hold LMB and drag the mouse to select objects within a rectangle. - Once LMB is released, the objects will be selected - Move selected objects by holding LMB above the blue selection rectangle and moving the mouse to the desired position - Change the objects' size by dragging the cyan circle at the corner of the selection rectangle - Rotate the object by dragging the smaller of the two orange circles at the center of the rectangle - To change the center of rotation, drag the larger of the two orange circles at the center of the rectangle to the new center of rotation - You can copy (Ctrl + C), cut (Ctrl + X), and paste (Ctrl + V) objects that are selected with this tool. The paste will not change the objects' size, but it will move the objects to the position of the cursor when you paste - Press Esc or click anywhere out of the selection to unselect the objects - While selecting objects, hold Alt to unselect objects in the current selection - While selecting objects, hold Shift to add more objects to the current selection - Lasso Select Tool - Hold LMB and drag the mouse to select objects within an area - Once LMB is released, the objects will be selected - The tool is otherwise identical to the Rectangle Select Tool - Edit/Cursor Tool - You can click on any object except a brush stroke to select it when this tool is selected - Double click on any object to start editing it. The object's relavant properties will be displayed on the right - If an image/file on the canvas is clicked with this tool, you can download the file to your computer - Color Select Tool (Eyedropper) - Click anywhere on the canvas with this tool to copy the color of the cursor's position - You can choose to select either the stroke color, or fill color - Pan tool - Hold LMB to move around the canvas - There is a "Hold to Pan" keybind (set to Space by default) to temporarily switch to this tool - Zoom tool - Hold LMB and move the mouse up to zoom in, or move it down to zoom out - There is a "Hold to Zoom" keybind (set to Z by default) to temporarily switch to this tool ## Screenshots - Start taking a screenshot by going to Menu->Take Screenshot - Hold LMB and drag the mouse to select an area to take a screenshot of - You can modify the screenshot area after placing it by dragging the cyan circles on the boundaries of the rectangle - Click anywhere outside of the circles to cancel the screenshot - You can change the dimensions of the screenshot, the file format of the screenshot, and later take the screenshot with the menu on the right. The dimensions can be anything, as long as they fit the aspect ratio of the screenshot area (the program will do this automatically), and as long as they aren't bigger than what the file format or your computer's memory allows - You can export to SVG, JPG, PNG, or WEBP. In the case of SVG, grids can't be displayed, and resolution can't be changed. - Note: Even though creating extremely large images is possible with this tool, I cannot guarantee that the program you use to display the image later won't crash if the image is too large! ## Bookmarks - You can open the bookmark window by clicking the bookmark icon on the very top right of the screen - Move your camera to the place you want to bookmark, give the bookmark a name in the given textbox, and press the + button next to the textbox - You can add a bookmark folder by pressing the folder button instead of the + button. Open/close the folder by pressing the arrow icon to the left of the folder, and drag bookmarks into the folder while it's open to place them in the folder. - To jump to the bookmark later, open the bookmark window, and double click on the name of the bookmark you want to jump to in the list (or press the arrow icon to the right of the bookmark) - To remove a bookmark, click the name of the bookmark in the list, and press the trash can icon to the right of the bookmark - Hold shift and click to select multiple bookmarks at once, or hold control and click to toggle the selection state of the bookmark. You can then hold LMB and move the mouse to move/sort the bookmarks ## Layers - You can open the layer window by clicking the layer icon on the top right of the screen (left of the bookmark icon) - To create a layer, give it a name in the given textbox, and press the + button next to the textbox - You can add a layer folder by pressing the folder button instead of the + button. Open/close the folder by pressing the arrow icon to the left of the folder, and drag layers into the folder while it's open to place them in the folder. - To set the layer to edit, double click it (or click the pencil icon to the right of the layer). The layer that is currently being edited has a pencil icon to the left of it, and anything you draw will be placed in that layer. - Select a layer by clicking it once. When it is selected, you can change its properties such as name, alpha, and blend mode (this is different from the "set to edit" mode) - Hold shift and click to select multiple layers at once, or hold control and click to toggle the selection state of the layer. You can then hold LMB and move the mouse to move/sort the layers - Blend modes are the default ones available with the rendering library this program is using ([Skia](https://skia.org/)). The following explanation of the blend modes is mostly just copy-pasted from the library's documentation at [SkBlendMode](https://api.skia.org/SkBlendMode_8h.html): - The documentation is expressed as if the component values are always 0..1 (floats). - For brevity, the documentation uses the following abbreviations s : source d : destination sa : source alpha da : destination alpha - Results are abbreviated r : if all 4 components are computed in the same manner ra : result alpha component rc : result "color": red, green, blue components ------------------------------------------------------------------------------------------- | Blend mode name | Equation | |-----------------------|-----------------------------------------------------------------| |Source Over |r = s + (1-sa) * d | |Destination Over |r = d + (1-da) * s | |Source In |r = s * da | |Destination In |r = d * sa | |Source Out |r = s * (1-da) | |Destination Out |r = d * (1-sa) | |Source Alpha Top |r = s * da + d * (1-sa) | |Destination Alpha Top |r = d * sa + s * (1-da) | |XOR |r = s * (1-da) + d * (1-sa) | |Plus |r = min(s + d, 1) | |Modulate |r = s * d | |Screen |r = s + d - s * d | |Overlay |multiply or screen, depending on destination | |Darken |rc = s + d - max(s * da, d * sa), ra = same as Source Over | |Lighten |rc = s + d - min(s * da, d * sa), ra = same as Source Over | |Color Dodge |brighten destination to reflect source | |Color Burn |darken destination to reflect source | |Hard Light |multiply or screen, depending on source | |Soft Light |lighten or darken, depending on source | |Difference |rc = s + d - 2 * (min(s * da, d * sa)), ra = same as Source Over | |Exclusion |rc = s + d - two(s * d), ra = same as Source Over | |Multiply |r = s * (1-da) + d * (1-sa) + s * d | |Hue |hue of source with saturation and luminosity of destination | |Saturation |saturation of source with hue and luminosity of destination | |Color |hue and saturation of source with luminosity of destination | |Luminosity |luminosity of source with hue and saturation of destination | ------------------------------------------------------------------------------------------- ## Color Palettes - Click the color button on the left toolbar to open the color picker. The top color button, initially white, is for the brush color and outlines. The bottom color button, initially black, is for fill color (if applicable) - In the color picker window, you can use, create, and edit color palettes - To create a palette, press the small + button next to the dropdown, give the palette a name, and press the "Create" button. To remove a color palette, press the small X button next to the dropdown. You cannot remove the default color palette - To add a color to the palette, press the large + button with the color you want to add picked. To remove a color from the palette, select the color from the palette, and press the large X button ## Quick Menu - Right click anywhere on the canvas to open the quick menu. Right click again to close the quick menu - To change the colors shown in the inner circle of the quick menu, select a different palette in the color picker menu - Drag the small circle in the outer circle of the quick menu to rotate the canvas. If you hover over the outer circle while dragging, the rotation will snap to a set of common angles (0 degrees, 45 degrees, 90 degrees...)