M src/vier.nim => src/vier.nim +6 -0
@@ 737,6 737,12 @@ proc addApi(spry: var spryvm.Interpreter, app: App) =
""
app.pictures.add(newPicture(fileName))
app.selectedPictureIndex = app.pictures.high
+ nimFunc("flip-x"):
+ app.selectedPicture.image.imageFlipHorizontal()
+ app.selectedPicture.loadTexture()
+ nimFunc("flip-y"):
+ app.selectedPicture.image.imageFlipVertical()
+ app.selectedPicture.loadTexture()
nimFunc("new"):
app.pictures.add(newPicture())
app.selectedPictureIndex = app.pictures.high
M website/index.html => website/index.html +10 -4
@@ 6,8 6,9 @@
</style></head><body>
<h1>Vier</h1>
<p><dfn>Vier</dfn> is a keyboard-focused pixel art editor heavily inspired by Vim.</p>
+<section><h2 class="xd-section-heading">Source code</h2><p>The source code is available <a href="https://git.sr.ht/~xigoi/vier/">on SourceHut</a> or <a href="https://gitlab.fjfi.cvut.cz/blazead5/vier/">on my faculty’s GitLab instance</a>.</p></section>
<section><h2 class="xd-section-heading">Installation</h2><p>Vier is written in <a href="https://nim-lang.org/">Nim</a>, so the language and its tooling must be installed.</p>
-<p>For Unix-like systems, just use the command</p>
+<p>For GNU/Linux, just use the command</p>
<pre class="language-sh"><code class="language-sh">nimble <span class="token function">install</span> https://git.sr.ht/~xigoi/vier
</code></pre>
<p>Alternatively, you can install directly from the repository:</p>
@@ 26,7 27,9 @@ nimble <span class="token function">install</span>
<dl><dt><img src="assets/icons/modes/inject.png" alt="Inject mode icon" /> Inject mode</dt><dd>In this mode, the user can move around the selected picture using <kbd>H</kbd><kbd>J</kbd><kbd>K</kbd><kbd>L</kbd> keys and draw with the currently selected tool. The color of the pixels being drawn is replaced by the selected color, so this can also work as an “eraser” if the selected color is transparent. If multiple pictures are opened, they can be switched between using <kbd>Ctrl</kbd>-<kbd>H</kbd> and <kbd>Ctrl</kbd>-<kbd>L</kbd>.</dd><dt><img src="assets/icons/modes/add.png" alt="Add mode icon" /> Add mode</dt><dd><strong>[NOT IMPLEMENTED]</strong> In this mode, the user can move around the selected picture using <kbd>H</kbd><kbd>J</kbd><kbd>K</kbd><kbd>L</kbd> keys and draw with the currently selected tool. The selected color is added on the color of the pixels being drawn, which allows shading an area with a transparent color. If multiple pictures are opened, they can be switched between using <kbd>Ctrl</kbd>-<kbd>H</kbd> and <kbd>Ctrl</kbd>-<kbd>L</kbd>.</dd><dt><img src="assets/icons/modes/select.png" alt="Select mode icon" /> Select mode</dt><dd>In this mode, the user can move around the selected picture using <kbd>H</kbd><kbd>J</kbd><kbd>K</kbd><kbd>L</kbd> keys and select a part of the picture using the currently selected tool. If multiple pictures are opened, they can be switched between using <kbd>Ctrl</kbd>-<kbd>H</kbd> and <kbd>Ctrl</kbd>-<kbd>L</kbd>.</dd><dt><img src="assets/icons/modes/color.png" alt="Color mode icon" /> Color mode</dt><dd>In this mode, the user can move around a color palette (displayed at the top of the screen) to change the selected color (displayed in the upper left corner). If multiple palettes are available, they can be switched between using <kbd>Ctrl</kbd>-<kbd>H</kbd> and <kbd>Ctrl</kbd>-<kbd>L</kbd>.</dd><dt><img src="assets/icons/modes/command.png" alt="Command mode icon" /> Command mode</dt><dd>In this mode, the user can enter a command, displayed at the bottom of the screen, to perform complex actions such as opening a file. The commands are in the <a href="https://sprylang.se/">Spry</a> programming language, though this is not important for basic usage. The command is executed by pressing <kbd>⏎</kbd> or cancelled by pressing <kbd>Esc</kbd>.</dd></dl>
<p>The following tools are available:</p>
<dl><dt><img src="assets/icons/tools/brush.png" alt="Brush icon" /> Brush</dt><dd>The brush tool selects pixels that it moves over.</dd><dt><img src="assets/icons/tools/segment.png" alt="Segment icon" /> Segment</dt><dd>The segment tool selects a line segment.</dd><dt><img src="assets/icons/tools/rectangle.png" alt="Rectangle icon" /> Rectangle</dt><dd>The rectangle tool selects an axis-aligned rectangle.</dd><dt><img src="assets/icons/tools/flood.png" alt="Flood icon" /> Flood</dt><dd>The flood tool selects a contiguous area of pixels with the same color.</dd></dl></section>
-<section><h2 class="xd-section-heading">Keyboard Shortcuts</h2><table><tr><th>Key</th><th>Alone</th><th>Shift</th><th>Control</th></tr>
+<section><h2 class="xd-section-heading">Keyboard mappings</h2><p>The key mappings are inspired by Vim. They are currently not customizable.</p>
+<table><tr><th>Key</th><th>Alone</th><th>Shift</th><th>Control</th></tr>
+<tr><td><kbd>⎵</kbd></td><td>hold to draw</td></tr>
<tr><td><kbd>B</kbd></td><td>Tool ← Brush</td></tr>
<tr><td><kbd>C</kbd></td><td>Mode ← Color</td></tr>
<tr><td><kbd>F</kbd></td><td>Tool ← Flood</td></tr>
@@ 43,7 46,10 @@ nimble <span class="token function">install</span>
<tr><td><kbd>W</kbd></td><td>write picture</td><td>write all pictures</td></tr>
<tr><td><kbd>-</kbd></td><td>zoom out</td><td>zoom out all pictures</td></tr>
<tr><td><kbd>=</kbd></td><td>zoom in</td><td>zoom in all pictures</td></tr>
-<tr><td><kbd>;</kbd></td><td>Mode ← Command</td></tr>
-<tr><td><kbd>⎵</kbd></td><td>draw</td></tr></table></section>
+<tr><td><kbd>;</kbd></td><td>Mode ← Command</td></tr></table></section>
+<section><h2 class="xd-section-heading">Commands</h2><dl><dt><code>e image.png</code></dt><dd>open a file for editing (the filename is a symbol)</dd><dt><code>edit "image.png"</code></dt><dd>open a file for editing (the filename is a string)</dd><dt><code>flip-x</code></dt><dd>flip the current picture horizontally</dd><dt><code>flip-y</code></dt><dd>flip the current picture vertically</dd><dt><code>new</code></dt><dd>create a new picture with a transparent background and the default size</dd><dt><code>resize-nn 16 8</code></dt><dd>resize the current picture using the nearest-neighbor algorithm</dd><dt><code>w image.png</code></dt><dd>save the current picture under the specified filename (the filename is a symbol)</dd><dt><code>write "image.png"</code></dt><dd>save the current picture under the specified filename (the filename is a string)</dd></dl>
+<p>Note that currently, edits done via commands are not added to undo history and break it.</p></section>
+<section><h2 class="xd-section-heading">Planned features</h2><p>Roughly in order of priority.</p>
+<ul><li>upscaling (various algorithms)</li><li>ellipse tool</li><li>eyedropper tool</li><li>mirrored drawing</li><li>color picker, palette editing</li><li>programmable configuration</li><li>gradients</li><li>animated sprite editing</li></ul></section>
<section><h2 class="xd-section-heading">Name</h2><p>I partially created Vier as a semestral project for a Computer Graphics course at my university. The name of the lecturer can be loosely translated as “fear”, so I decided to name the project after a German word which is pronounced the same way. The word means “four”, which hints at the editor treating images as a square grid (with squares having four sides, obviously). I also came up with the backronym “Vim-Inspired Editor of Rasters”.</p></section>
</body></html>=
\ No newline at end of file
M website/index.xd => website/index.xd +33 -3
@@ 10,9 10,12 @@
[title Vier]
[link-stylesheet xi.css]
[p [term Vier] is a keyboard-focused pixel art editor heavily inspired by Vim.]
+[section Source code;
+ [p The source code is available [link on SourceHut; https://git.sr.ht/~xigoi/vier/] or [link on my faculty’s GitLab instance; https://gitlab.fjfi.cvut.cz/blazead5/vier/].]
+]
[section Installation;
[p Vier is written in [link Nim; https://nim-lang.org/], so the language and its tooling must be installed.]
- [p For Unix-like systems, just use the command]
+ [p For GNU/Linux, just use the command]
[code-block sh; [raw<
nimble install https://git.sr.ht/~xigoi/vier
]]
@@ 51,9 54,11 @@
; [link-image Flood icon; assets/icons/tools/flood.png] Flood; The flood tool selects a contiguous area of pixels with the same color.
]
]
-[section Keyboard Shortcuts;
+[section Keyboard mappings;
+ [p The key mappings are inspired by Vim. They are currently not customizable.]
[table
[header-row Key; Alone; Shift; Control]
+ [row [<kbd> ⎵]; hold to draw]
[# row [<kbd> A]; Mode ← Add]
[row [<kbd> B]; Tool ← Brush]
[row [<kbd> C]; Mode ← Color]
@@ 74,7 79,32 @@
[row [<kbd> -]; zoom out; zoom out all pictures]
[row [<kbd> =]; zoom in; zoom in all pictures]
[row [<kbd> [;]]; Mode ← Command]
- [row [<kbd> ⎵]; draw]
+ ]
+]
+[section Commands;
+ [description-list
+ ; [code e image.png]; open a file for editing (the filename is a symbol)
+ ; [code edit "image.png"]; open a file for editing (the filename is a string)
+ ; [code flip-x]; flip the current picture horizontally
+ ; [code flip-y]; flip the current picture vertically
+ ; [code new]; create a new picture with a transparent background and the default size
+ ; [code resize-nn 16 8]; resize the current picture using the nearest-neighbor algorithm
+ ; [code w image.png]; save the current picture under the specified filename (the filename is a symbol)
+ ; [code write "image.png"]; save the current picture under the specified filename (the filename is a string)
+ ]
+ [p Note that currently, edits done via commands are not added to undo history and break it.]
+]
+[section Planned features;
+ [p Roughly in order of priority.]
+ [list
+ ; upscaling (various algorithms)
+ ; ellipse tool
+ ; eyedropper tool
+ ; mirrored drawing
+ ; color picker, palette editing
+ ; programmable configuration
+ ; gradients
+ ; animated sprite editing
]
]
[section Name;