Skip to content

Home

Jump to bottom
Kurt Pachinger edited this page Oct 2, 2022 · 16 revisions

Welcome to the stock-meme wiki!

Overview

Create a simple design with common options such as fonts, drawing, stencils, user media, and animation presets. Clean UI is easy to customize for special events, features layout toggles, and is mobile-friendly. Uses Interact.js for UX.

Create

  • Text - upload, font-family
  • Image - upload, raster, vector, links
  • Icon - Font Awesome

Modify

  • UI - density, dark scheme
  • Keyboard shortcuts
  • Trash
  • Layer order
  • Draw - erase / color
  • Meta - link, onionskin animations, alt text
  • Motion - Animate.css presets
  • Render - gif output via DomToImage and GifShot
  • HTTPRelay - Group draw via mcast

Stock Meme

sm

init

Initiate a Dropzone for .ico and Draggable interact.drag, as well as event listeners for tool labels via sm.tools.label.

interact

  • drag -- drag, snap, .mcast.add
  • dropzone -- drop, encode .mcast.LZW, .mcast.add
  • resize -- resize, snap, .mcast.add

mcast

  • LZW -- compress image data for mcast using encode/decode
  • add (idx, type, opts) -- log events (excluding blacklist) to transmit via mcast, and reproduce via .tools.set
  • log -- event log for unique user
  • post -- POST event log to mcast, and reset events/timestamp
  • receive (fromOldest) -- decode .mcast.LZW log, and reproduce events using .tools.set or appropriate
  • url -- base URI for .mcast.xhr
  • xhr -- used by .mcast.post and .mcast.receive

stage

  • canvas (el, x, y, col) -- append fillRect or clearRect, per eraser state
  • click -- propagates .stage.draw and sets active element .edit
  • draw -- propagates .stage.canvas or .stage.svg, and sets .mcast.add
  • svg (el, x, y, col, edit) -- append path point
  • type -- textarea update or keyboard shortcut, and sets .mcast.add

tools

  • color -- colorize .edit.sel by type
  • file -- input text or image files to tools. Images may use tools.fileMax to be optimized for mcast.
  • fileMax (img) -- reduce image size to meet threshold: bytesize, dimensions.
  • label -- control ux/ui, add sm.mcast effects
  • render (output) -- composite stage animation via domtoimg > gifshot. Settings are for 1 second at 1/2 screen resolution.
  • set (el, event, val) -- set element attribute by event type and value

vars

  • stage -- DOM element
  • tools -- DOM element
  • unit -- grid and snap
Clone this wiki locally