2023-04-10 23:51:39 +03:00
textual-paint
=============
What if MS Paint isn't retro enough?
You need Paint in your terminal.
This is a TUI (Text User Interface) image editor, inspired by MS Paint, and built with [Textual ](https://textual.textualize.io/ ).
Add textual screenshot to readme
This took a lot of trial and error to get this working.
- First I had to figure out how to copy the terminal output as HTML.
I had to configure keybindings for Select All and Copy As HTML in
the Ubuntu terminal.
- GitHub doesn't support line-height in markdown, so I came up with
using an SVG with <foreignObject> to contain the screenshot HTML.
- GitHub doesn't support inline SVG, so I had to use <img>, that's fine.
An external file is cleaner anyways.
- I spent a long time trying to fix the seams between rows of text.
`line-height: <font-size>` is not `line-height: 1`!
I think I tried `line-height: 1` first, but it wasn't working for some
reason so I tried a bajillion things, having mentally discounted it,
before circling back to it and trying it again and it actually worked.
- I spent a long time futzing about with SVG viewports and units.
- The text was staggered due to some of the Unicode characters, so I
developed a script to fix that up. I managed to achieve a nice
development cycle for this, but only near the end of developing it.
Most of the time while working on it I was copying and pasting
the updated code into the console after hitting up up enter to
re-run grapheme-splitter's JS.
The next commit will apply this script.
- All in all, getting this screenshot working took basically all day!
Compare that to my first day of progress on this project, having
never used the Textual framework before, and also having not used
Python for a while. In summary, coding is a land of contrasts.
- VS Code's markdown rendering isn't working with the ch/lh units.
2023-04-14 09:21:27 +03:00
<!-- GitHub doesn't support figure/figcaption in markdown. -->
< table >
< tr > < td align = "center" >
< img src = "screenshot.svg" alt = "MS Paint like interface" / >
< / td > < / tr >
< tr > < td align = "center" > Textual Paint terminal screen buffer in HTML in SVG in HTML.< br > This might not render correctly in your browser.< / tr > < / td >
< / table >
2023-04-13 17:06:39 +03:00
## Features
- Open and save images
- [ ] PNG (.png)
- [ ] Bitmap (.bmp)
- [x] ANSI (.ans)
- only supports loading files saved by this program; ANSI files can vary a lot and even encode animations
- no save dialog yet, you can only save a file opened via the command line
- Tools
- [ ] Free-Form Select
- [ ] Rectangular Select
2023-04-14 01:48:24 +03:00
- [x] Eraser
- [ ] Color Eraser
2023-04-13 17:06:39 +03:00
- [x] Fill With Color
2023-04-14 01:54:51 +03:00
- [x] Pick Color
2023-04-13 17:06:39 +03:00
- [ ] Magnifier
- [x] Pencil
- [x] Brush
2023-04-14 01:48:24 +03:00
- [x] Airbrush
2023-04-13 17:06:39 +03:00
- [ ] Text
- [x] Line
- [ ] Curve
- [x] Rectangle
- [ ] Polygon
- [x] Ellipse
- [x] Rounded Rectangle
- [x] Color palette
- [x] Undo/Redo
- [x] Efficient screen updates and undo/redo history, by tracking regions affected by each action
- You could totally use this program over SSH! Haha, this "what if" project could actually be useful. Of course, it should be mentioned that you can also run graphical programs over SSH, but this might be more responsive, or just fit your vibe better.
2023-04-14 03:28:58 +03:00
- [x] Brush previews
2023-04-13 17:06:39 +03:00
- [x] Menu bar
2023-04-10 23:51:39 +03:00
## Development
2023-04-11 23:22:00 +03:00
Install Textual and Stransi:
2023-04-10 23:51:39 +03:00
```bash
2023-04-11 23:22:00 +03:00
pip install "textual[dev]" "stransi"
2023-04-10 23:51:39 +03:00
```
Run supporting live-reloading CSS:
```bash
textual run --dev paint.py
```
Or run normally:
```bash
python paint.py
```
## License
[MIT ](LICENSE.txt )
## Unicode Symbols and Emojis for Paint Tools
2023-04-13 16:15:22 +03:00
The first thing I did in this project was to collect possible characters to represent all the tool icons in MS Paint, to test feasibility.
In other words, I wanted to gauge how good of a recreation it would be possible to achieve, starting from looks.
Unfortunately, I haven't run into any significant roadblocks, so I'm apparently recreating MS Paint. [Again. ](https://jspaint.app )
These are the symbols I've found so far:
2023-04-14 04:31:36 +03:00
- Free-Form Select: ✂️📐🆓🕸✨⚝🫥🇫/🇸◌⁛⁘ ⢼⠮
- Rectangular Select: ⬚▧🔲 ⣏⣹
2023-04-13 07:30:47 +03:00
- Eraser/Color Eraser: 🧼🧽🧹🚫👋🗑️
- Fill With Color: 🌊💦💧🌈🎉🎊🪣🫗
2023-04-13 07:27:27 +03:00
- Pick Color: 🎨💉💅💧📌📍⤤𝀃🝯🍶
2023-04-10 23:51:39 +03:00
- Magnifier: 🔍🔎👀🔬🔭🧐🕵️♂️🕵️♀️
2023-04-13 07:27:27 +03:00
- Pencil: ✏️✎✍️🖎🖊️🖋️✒️🖆📝🖍️
2023-04-10 23:51:39 +03:00
- Brush: 🖌️🖌👨🎨🧑🎨💅
- Airbrush: 💨ᖜ╔🧴🥤🫠
2023-04-13 07:27:27 +03:00
- Text: 🆎📝📄📃🔤📜AA
2023-04-13 16:15:22 +03:00
- Line: 📏📉📈⟍𝈏╲⧹\⧵ ∖
- Curve: ↪️🪝🌙〰️◡◠~∼≈∽∿〜〰﹋﹏≈≋~⁓
- Rectangle: ▭▬▮▯🟥🟧🟨🟩🟦🟪🟫⬛⬜◼️◻️◾◽▪️▫️
- Polygon: ▙𝗟𝙇﹄』⬣⬟🔶🔷🔸🔹🔺🔻△▲
- Ellipse: ⬭⭕🔴🟠🟡🟢🔵🟣🟤⚫⚪🫧
2023-04-10 23:51:39 +03:00
- Rounded Rectangle: ▢⬜⬛
2023-04-13 16:15:22 +03:00
The default symbols used may not be the best on your particular system, so I may add some kind of configuration for this in the future.
### Cursor
A crosshair cursor could use one of `+✜✛✚╋╬` , but whilst that imitates the look, it might be better to show the pixel under the cursor, i.e. character cell, surrounded by dashes, like this:
```
╻
╺█╸
╹
```
2023-04-10 23:51:39 +03:00
## See Also
2023-04-11 01:31:41 +03:00
- [JavE ](http://jave.de/ ), an advanced Java-based ASCII art editor
2023-04-11 01:44:24 +03:00
- [Playscii ](http://vectorpoem.com/playscii/ ), a beautiful ASCII/ANSI art editor
- [cmdpxl ](https://github.com/knosmos/cmdpxl ), a pixel art editor for the terminal using the keyboard
- [pypixelart ](https://github.com/douglascdev/pypixelart ), a pixel art editor using vim-like keybindings, inspired by cmdpxl but not terminal-based