yosoyubik / canvas Goto Github PK

View Code? Open in Web Editor NEW

142.0 4.0 9.0 13.98 MB

Peer-to-peer paint app for Urbit

License: MIT License

JavaScript 0.30% HTML 0.04% Shell 0.16% Svelte 11.51% TypeScript 7.96% hoon 80.02%

urbit d3js p2p hoon svelte sveltekit

canvas's Introduction

Canvas for ~Urbit

Video Demo

Features

Each stroke is stored automatically on your Urbit.
Export Canvas Images as SVG.
- Image files are stored on S3 Storage, if configured.
Allows creation of Public/Private Canvas.
- Others can join a Public Canvas and work collaboratively in a cool art project.

Access

Search for ~dister-norsyr-torryn in Grid to find the Canvas app, and install it from there

A public canvas is hosted at

~picsel-norsyr-torryn/public

Come and join the group to share your creations and see what others are doing:

~norsyr-torryn/canvas

Development Setup

Clone the repo, of course
Create a new desk in Urbit to install canvas in
- $ ./urbit -F zod - Spin up a fake zod, if you haven't already (should be running on port 8080. If not, you'll need to edit ui/svelte.config.js)
- dojo> +code - Get an access code and use it to sign in to your ship at http://localhost:8080
- dojo> |mount %base - Mount %base, if you haven't already
- dojo> |merge %canvas our %base - Create a %canvas desk
- dojo> |mount %canvas - Mount the desk so it appears in your pier
- $ rm -r zod/canvas/* - Clear out your new desk to make room for the actual desk
- Follow the instructions here to merge the base-dev and garden-dev desks into your desk
Copy canvas desk to Urbit From the repo folder, run ./install.sh <PATH_TO_THE_MOUNTED_DESK> where <PATH_TO_THE_MOUNTED_DESK> might be something like ~/urbit/zod/canvas You can alse run ./install.sh -w <PATH_TO_THE_MOUNTED_DESK> if you want to watch for changes.
Install %canvas in Dojo with
- dojo> |commit %canvas (do this after every change to see it reflected in Urbit)
- dojo> |install our %canvas(only necessary the first time, I think)
Serve the UI for development In the repo folder:
- cd ui
- npm i (short for npm install)
- npm run dev (runs on port 3000. To run on a different port: npm run dev -- --port 3001)
- Visit http://localhost:3000/apps/canvas
Eventually, build the UI to test in Urbit for real test
- npm run build (in /ui)
- ./install.sh <PATH_TO_THE_MOUNTED_DESK> (in project root)
- |commit %canvas (in dojo)

Templates

TODO

canvas's People

Contributors

Stargazers

Watchers

Forkers

vdt jithinraj lionsole nnhansg mulh8377 afknapping liam-fitzgerald johnhyde bacwyls

canvas's Issues

Implement S3 file storage/upload

Fix saving files %arvo crash on mainnet

This shouldn't be unique to mainnet, but I haven't seen this happen while developing locally/ Probably this should be turned off until %clay/ford gets an update.

tile doesn't show up on home screen

Fix exporting the canvas image with the grid turned on

Refactor to support Ford Fusion

[feature] continuous lines when drawing

currently if you drag the mouse across the screen fairly fast, you get dots of pixels instead of a line of pixels. you can just track the position of the last pixel and fill in the line between the two points, and then reset the position of the last pixel to null as soon as a mouseup event occurs to prevent drawing a line between two mousedown events instead of two mousemove (while event.buttons indicates click is held down) events or a mousedown event then mousemove event (again, button held down).

i have an example function here, but idk svelte so i can't submit a pull request.

bail:meme when clicking "Save Image"

Not sure if this is similar to #5, but my Urbit instance is crashing back to the command line when clicking on the "Save Image" button. It could also be something I've done, so apologies in advance if that turns out to be the case.

Steps:

Go to ~canvas in landscape and select my "testing canvas"
Draw a bit
Click "Save Image"
I'll see the "Saving.." indicator in landscape spin and I'll see http working in the dojo.
After a few minutes, Urbit crashes with the following output:

siblex-pocnet:dojo> allocate: reclaim: half of 1750 entries
allocate: reclaim: half of 875 entries
allocate: reclaim: half of 437 entries
allocate: reclaim: half of 218 entries
allocate: reclaim: half of 109 entries
allocate: reclaim: half of 54 entries
allocate: reclaim: half of 27 entries
allocate: reclaim: half of 13 entries
allocate: reclaim: half of 6 entries
allocate: reclaim: half of 3 entries
allocate: reclaim: half of 1 entries
allocate: reclaim: memo cache: empty

bail: meme
bailing out
pier: work error: end of file
pier: work exit: status 0, signal 6

When I restart my Urbit instance, the canvas actually saves correctly with the changes made before the crash. I haven't noticed any other side effects.

Any thoughts? Thanks for your help!

Tarball Checksum Fails; can't run `npm install` in `/ui` folder

I get this error:

npm WARN tarball tarball data for @yosoyubik/draw-me@https://api.observablehq.com/@yosoyubik/draw-me.tgz?v=3 (sha512-GpAGPijhYUzMrDFCiFM89u4ksvhEymief4ko9yT3oYzNJ7q3kw2dusrWjxiY8VhB0u/Z/hrZLQ7Lv994JxBQDA==) seems to be corrupted. Trying again.
npm WARN tarball tarball data for @yosoyubik/draw-me@https://api.observablehq.com/@yosoyubik/draw-me.tgz?v=3 (sha512-GpAGPijhYUzMrDFCiFM89u4ksvhEymief4ko9yT3oYzNJ7q3kw2dusrWjxiY8VhB0u/Z/hrZLQ7Lv994JxBQDA==) seems to be corrupted. Trying again.
npm ERR! code EINTEGRITY
npm ERR! sha512-GpAGPijhYUzMrDFCiFM89u4ksvhEymief4ko9yT3oYzNJ7q3kw2dusrWjxiY8VhB0u/Z/hrZLQ7Lv994JxBQDA== integrity checksum failed when using sha512: wanted sha512-GpAGPijhYUzMrDFCiFM89u4ksvhEymief4ko9yT3oYzNJ7q3kw2dusrWjxiY8VhB0u/Z/hrZLQ7Lv994JxBQDA== but got sha512-8WAvaGFGXi9GuGATTe3vq4FaIQsLEAuGRiNc78p8g/OGmWtMLW8MfcGYY0TUbUXQQ8dg0uXI0tuF57Lz2/uHVQ==. (17673 bytes)

I was able to get around this by manually downloading the .tgz and modifying package.json to point at my local file.

Error on |start %canvas

I put the full path to my ship's pier dir in .urbitrc, ran npm run build, and then boot up a moon. %home is mounted, I run |commit %home, and then |start %canvas. I get the following:

> |start %canvas
>=
activated app home/canvas
%cx /~ranbel-tacser-timluc-miptev/home/~2020.5.20..17.26.57..ffa7/app/canvas/hoon
scry failed for
ford: %hood failed for /~ranbel-tacser-timluc-miptev/home/0/app/canvas/hoon:
ford: %core on /~ranbel-tacser-timluc-miptev/home/0/app/canvas/hoon failed:

Use IP address when DNS is not set

Currently localhost is used instead.

Can't `|start %canvas`

I did the following:

dojo> |merge %base %canvas
dojo> |mount %canvas
(in pier)
$ rm -r canvas/*
(in /ui)
$ npm i
$ npm run build
$ ../install.sh ~/urbit/zod/canvas
created a sys.kelvin file with [%zuse 419]
dojo> |commit %canvas
and that all worked fine.
But when I try: dojo> |start %canvas, I get

clay: %a no file at path [%base 1 /app/canvas/hoon]
crud: %belt event failed
[%poke %belt]
wire=/sys/cor/canvas/~zod/base/~2021.12.4..00.05.38..d79a
  bar-stack
~[
  ~[/gall/use/hood/0w3.X40CG/~zod/kiln/vats/base/jolt/canvas /dill //term/1]
  ~[
    /gall/sys/cor/canvas/~zod/base/~2021.12.4..00.05.38..d79a
    /gall/use/hood/0w3.X40CG/~zod/kiln/vats/base/jolt/canvas
    /dill
    //term/1
  ]
  ~[/gall/use/hood/0w3.X40CG/~zod/kiln/vats/base/jolt/canvas /dill //term/1]
  ~[/gall/use/dojo/0w3.X40CG/out/~zod/hood/drum_~zod/poke /dill //term/1]
  ~[/dill //term/1]
  ~[/gall/use/dojo/0w3.X40CG/~zod/drum_~zod/hand/gen/hood/start /dill //term/1]
  ~[/gall/use/hood/0w3.X40CG/out/~zod/dojo/drum/phat/~zod/dojo /dill //term/1]
  ~[/dill //term/1]
  ~[//term/1]
]
take: failed
/sys/vane/gall/hoon:<[1.833 3].[1.849 5]>
/sys/vane/gall/hoon:<[1.834 3].[1.849 5]>
/sys/vane/gall/hoon:<[1.836 3].[1.849 5]>
/sys/vane/gall/hoon:<[1.838 3].[1.849 5]>
/sys/vane/gall/hoon:<[1.842 3].[1.849 5]>
[%gall-take-failed /sys/cor/canvas/~zod/base/~2021.12.4..00.05.38..d79a]
/sys/vane/gall/hoon:<[1.843 3].[1.849 5]>
/sys/vane/gall/hoon:<[1.844 3].[1.849 5]>
/sys/vane/gall/hoon:<[1.845 3].[1.849 5]>
/sys/vane/gall/hoon:<[531 5].[540 7]>
/sys/vane/gall/hoon:<[533 5].[540 7]>
/sys/vane/gall/hoon:<[536 13].[536 47]>
/sys/vane/gall/hoon:<[555 5].[570 39]>
/sys/vane/gall/hoon:<[557 5].[570 39]>
/sys/vane/gall/hoon:<[558 5].[570 39]>
/sys/vane/gall/hoon:<[559 5].[570 39]>
/sys/vane/gall/hoon:<[560 5].[570 39]>
/sys/vane/gall/hoon:<[561 5].[570 39]>
/sys/vane/gall/hoon:<[562 7].[562 58]>
gall: failed to build agent %canvas

Possible Features:

View the author and timestamp of any given pixel
- (?) Info is printed off-canvas somewhere (notification? regular text box?) when you hover over a pixel
- (?) There's a snoop tool which shows info in a tooltip on hover
Allow canvas hosts to decide whether snooping is enabled (default to false)
- Include an option in the create canvas form
- Allow hosts to change this value (through new settings menu? through context menu?)

Implied Future Features which are probably out of scope for now:

Strokes are grouped together by author and time period, and whole drawings can be identified at once
A history of the canvas is constructed with reasonable groupings of strokes, so you can see how it changed over time (timeline UI included)
Rolling back certain contributions, or removing contributions by a certain user