ASCIIShop

December 2023

Welcome to ASCIIShop!

This is the tool I built to make my animated ASCIIBear Twitch avatar

Fair warning that the page isn't optimized. Don't be surprised if it takes a few seconds to load.


Click here to get started


Usage

  • Click a location on the grid then click a character from the selection sidebar and it'll place the character there
  • When you place a character, it also adds it to the top of the selection sidebar to make it easier to find next time
  • The "w", "d", "a", and "s" keys move the selected spot on the grid up, down, left, and right, respectively
  • Using Shift+click selects a box starting at the initial cursor position and extending to the new location
  • Command+Click on a mac selects multiple individual characters (I'm don't yet know what the key is on other operating systems)
  • Command+Clicking an already selected tile doesn't currently un-select it
  • The "f" key removes the character from currently selected locations
  • Multiple layers are supported
  • Characters on the currently selected layer are gold. Characters on layers above and below the selected layer are green.
  • The highest layer the contains a character for any give location shows that character (i.e. none of the ones below it are visible for that location)
  • Switching between layers is done with the "L#" buttons in the layers palette
  • The checkbox in the layers area determines which layers are visible
  • The currently active layer is highlighted with the red bar
  • The "S" button in the layers area will "solo" a layer showing just it. (It's not currently a toggle so soloing a layer means turning others back on manually)
  • To move a block of character, select them with Shift+Click the press Option+w, Option+a, Option+s, or Option+d to move them the corresponding direction. (The key is Option on mac. I'm not yet sure what it is on other operating systems)
  • Option click (on mac or whatever that is on your OS) + w,a,s,d to move the selected
  • Saving a file creates a JSON file that can be loaded back in.
  • To get the text, copy the content from the output area
  • Note: if you refresh the page, the content currently resets. Make sure you save off a copy of the JSON first

TODO

    ☐

    Fix bug where shifting content doesn't grab the first row or column

    ☐

    Add button to auto-copy current ASCII to clip/pasteboard

    ☐

    Figure out how to make the page more accessible

    ☐

    Save the current state as a cookie

    ☐

    Add new empty layer (instead of duplicating existing layer)

    ☐

    Import from raw ASCII

    ☐

    Adjust font and character width and height and leading, etc...

    ☐

    Set up "e" key to apply last character to currently selected locations

    ☐

    Show a warning if you try to edit a character that's hidden by a character on a visible layer above it

    ☐

    Make sure delete key doesn't instantly go back to prior page (e.g. in vivaldi)

    ☐

    Order the character set a little more

    ☐

    Select initial pixel

    ☐

    Set Up 1, 2, 3, z, x, and c as configurable character keys

    ☐

    Show/Hide layer palette

    ☐

    Move frequently used characters under the canvas, or mabye beside

    ☐

    Set up the "S" solo button to be a toggle the restores the previously visible layers when clicked again

    ☐

    Update so you can't change a character on a layer if it's not visible (i.e. if there's a character in the same location on a window above it)

    ☐

    Use the full size block character as a character to hide things below it, but without showing it? Or maybe a space since the block might be useful? Whatever the case, need something

    ☐

    Add colors

    ☐

    Define row and numbers specifically with a text field

    ☑

    Add an actual ASCII export for the current view

end of line