jewbird/asciibird
3
3
Fork 0
Code Issues Pull Requests Releases Activity
790664a053
asciibird/README.md
Hugh Bord 790664a053 toolbar menu updates
2021-12-04 13:47:31 +10:00

6.9 KiB
Raw Blame History

ASCIIBIRD

                           ┏   ┰╛    ╔═━┉┈┉╼━━╌┈╍┅┉╌┄┉┉━═╾─┈═──┄┈╼╍═┈┄╍═╍╼━┈─┈╼┉╍┅╌╮
                         ╘███╏████╒█ ┕█   http://jewbird.live/                     ╏
                            █┻█  █┦█  █╕  http://yt.jewbird.live/                  ┇
                          ╔╼█ ████ ████╚━ http://patreon.jewbird.live/             ┃
                         ╕  █ █ █┉╍█ ┌█═  http://streamlabs.jewbird.live/          ╽
                       ━█████ █ ██ █ ╯█   ASCIIBIRD TAKING FLIGHT                  ╎
                          ┸╮    ╛     ╘╼┈┅┅──━┈┉┅┈╍┄┈┄┈╍┉╾╾╼╍═━╾╾┄╼╾═─┈═┉═╼┅─┈━╌╾╾┅╯

                              [BTC] 1L2u8mQs5pe7k11ozn2BgX388e3fGMD7qo
[XMR] 832owKc3ZuGCnmjHXHeZeeJzGAxyKx5uWU9WxoaXg6BhQ7aWSnZ6EhxFK8Mzw137nSgGAfMM8FgHjM6rpq5s1EofD7UT2yp
           [STREAMLABS] http://streamlabs.jewbird.live [PATREON] http://patreon.jewbird.live
     [YT] http://yt.jewbird.live [TWITCH] http://twitch.jewbird.live [GITHUB] http://git.jewbird.live

ASCIIBIRD is an IRC ascii art editor to create or edit mIRC art, it is most times worked on during live stream. It's 100% client side and created in vue2 and may be migrated to vue3 in the future.

You can view and load ASCII art from https://irc.watch/ascii into asciibird.

A most latest production build to use is available at https://asciibird.jewbird.live/

Current Features

  • Tabbed ASCII editing
  • Layers support
    • Show and hide layers
    • Change layer order
    • Double click to rename layer
  • Copy and paste between tabs
  • Remembers state on refresh and when the browser loads, can also export the state to a file and load elsewhere.
    • So you never lose your ascii art!
    • Saves layers, brushes data also to same file
  • Can import from clipboard, load from irc.watch/ascii, load from file
  • Can export mirc ascii to clipboard, file or HTTP POST
  • 99 Colour support, swap colours with button click
  • Mirror X and Y
  • Grid mode with alt + g
  • Undo and redo with ctrl + z and ctrl + y, undos are set to a limit of 50 at the moment.
  • Fg, Bg and Char boxes to filter when using certain tools
    • For example filling with Char unchecked will ignore characters when filling
  • Image overlay to trace images
  • Toolbar containing
    • Select
    • Text mode
    • Fill background blocks
    • Brush mode
    • Block picker (grab fg, bg and char of a block)
    • Eraser - remove blocks
    • Fill Eraser - Fill remove blocks by bg, fg or char
  • Brush Library and History
    • Make circle, square and cross brushes by sizes
    • Brush history, can save or re-use old brushes
    • Library - Save most used brushes to library
    • Brush history is set to a limit of 50
  • Brush Preview
    • Editable brush preview
    • Clicking updates block
    • Right clicking removes block
    • Hovering outside brush area will save brush to history

Noted Bugs to Fix

ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. Refreshing the page seems to fix most strange things.

  • Importer could be re-written with regex

  • That inverted black / white bug when exporting, happens if fg or bg is null

  • Having more than a few layers depending on ascii size will slow things down, until the fillNullBlocks is refactored.

  • CHUNKED DIFF ENGINE

  • Redo ctrl Y is COOKED (not working) - redo the undo and redo with this new system

  • If we add in a toolbar menu this bug maybe fixed,

  • Keyboard shortcuts can be pressed at the same time which makes bugs for undo and redo if you aren't careful!

  • https://github.com/motla/vue-file-toolbar-menu

  • Drag ascii canvas then right click and it gets stuck - related to vue draggable

Focusing on Now / Roadmap

  • Arrow keys and space to use brush, eraser,

  • More Context Menus (right click menu)

    • Brushes Canvas right click
    • ASCII right click

  • Review encodings check on file import - UTF8 vs Latin something

AFTER the above stuff is done

  • Warning to the user for width and clipping
  • Optimise the export code to use less chars

Keyboard Shortcuts

ASCII Editing

  • Ctrl + Z - Undo

  • Ctrl + Y - Redo `

  • Ctrl + Shift + C - Save to clipboard

  • Ctrl + Shift + F - Save to txt file

  • Escape - Return to default mode / stop using any tool

  • When the colour picker is open, the first 0 to 9 colours can be chosen with the keyboards number.

  • When the character picker is open, you can also press any key on your keyboard to set the character.

Toolbar Keyboard Shortcuts

The toolbar keyboard shorts are used with the ALT key.

  • Alt 1 to 8 - Will toggle the corresponding toolbar icon

  • Alt + c - Opens character Panel (You can then press on the keyboard your desired character or select from the list)

  • Alt + f - Opens foreground panel (can then press 0 to 9 for the colour)

  • Alt + b - Opens background panel (can then press 0 to 9 for the colour)

  • Alt + g - Toggle grid mode

  • Ctrl + ] - Increase both brush sizes by 1

  • Ctrl + [ - Decrease both brush sizes by 1

Default Mode Only

  • l - Show / hide brushes library
  • d - Show and Hide debug bar
  • e - Edit ASCII
  • p - Paste ASCII from Clipboard
  • n - New ASCII

Select Mode Only

  • Ctrl + c - Copy blocks to clipboard
  • Ctrl + x - Cut blocks to clipboard
  • Ctrl + v - Paste blocks as brush
  • Delete - Delete selected blocks

Brush Mode Only

  • e - rotate brush
  • q - flip brush

Text mode

  • Four arrow keys control text cursor
  • Delete - Remove text from highlighted block
  • Backspace - Remove current character and move to previous block
  • Enter - Go to next line and reset X position to 0

References

Project setup

yarn

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.