Demos/wami
Patrick Brosset 5ea1357a99 Offline support for wami 2022-09-29 15:18:47 +02:00
..
icons Final design 2022-09-23 17:29:19 +02:00
styles Dialog style fixes 2022-09-29 14:40:01 +02:00
README.md Offline support for wami 2022-09-29 15:18:47 +02:00
app.js Avoid losing focus on flow change 2022-09-29 14:20:15 +02:00
favicon-96.png Web app manifest 2022-09-21 16:59:36 +02:00
favicon-128.png Web app manifest 2022-09-21 16:59:36 +02:00
favicon-256.png Web app manifest 2022-09-21 16:59:36 +02:00
favicon-512.png Web app manifest 2022-09-21 16:59:36 +02:00
flow-runner.js Final design 2022-09-23 17:29:19 +02:00
image-viewer.js Dialog style fixes 2022-09-29 14:40:01 +02:00
index.html Better dialog design 2022-09-29 14:09:59 +02:00
logo.svg Design touch-ups and prep for input/output images 2022-09-21 08:36:21 +02:00
manifest.json Web app manifest 2022-09-21 16:59:36 +02:00
screenshot-app.png wami readme 2022-09-23 18:13:23 +02:00
step-icons.psd Final design 2022-09-23 17:29:19 +02:00
steps.js Many new steps 2022-09-23 11:49:12 +02:00
store.js Final design 2022-09-23 17:29:19 +02:00
sw.js Offline support for wami 2022-09-29 15:18:47 +02:00
ui.js Fixed dragging steps when a scrollbar is present 2022-09-29 14:27:10 +02:00
utils.js Add the download and save feature 2022-09-21 14:03:18 +02:00
wami-logo.psd Web app manifest 2022-09-21 16:59:36 +02:00

README.md

wami, the Web App to Manipulate Images

➡️ Open the demo ⬅️

wami is an image manipulation demo application. It is an installable web app (PWA) specifically made to demonstrate that web technologies can be used to create desktop apps that feel like platform-specific apps.

Screenshot of the wami app

Note: wami is under development, expect bugs and cross-browser compatibility issues.

User guide

  • Open the app.
  • Click on one of the pre-defined flows in the left sidebar, or create a new one from scratch by clicking Create a flow.
  • When a flow is opened, you can:
    • Rename the flow by typing in the flow name textfield.
    • Delete the flow by clicking the delete icon next to the flow name.
    • Add new flow steps by clicking Add a step.
    • Re-order steps by dragging them in the list of steps.
    • Change the parameters of steps.
    • Delete a step by clicking on the delete icon while hovering on a step.
  • To run a flow:
    • Drag images from your computer and drop them in the drop area (or click browse to select them with the operating system file picker).
    • Click Run flow. The images are processed based on the defined steps and the resulting images appear in the bottom area.
  • To download processed images:
    • Click Download to save the images to your Downloads folder.
    • Click Save to save the images back to their original locations (this will override the files on disk).
  • To use other input images:
    • Either drag new images on the drop area at the top.
    • Or click Remove input.
    • Finally, you can also click Use as input to use the processed images as input images.

Credits

The app uses the WASM-ImageMagick library to process images in a worker thread.

TODO

  • Categorize steps and add a way to search through them.
  • Share images.
  • Export/import flows as JSON files.