https://github.com/yosoyubik/canvas

Peer-to-peer paint app for Urbit
https://github.com/yosoyubik/canvas

d3js hoon p2p svelte sveltekit urbit

Last synced: 3 months ago
JSON representation

Peer-to-peer paint app for Urbit

• Host: GitHub
• URL: https://github.com/yosoyubik/canvas
• Owner: yosoyubik
• License: mit
• Created: 2020-04-26T06:45:19.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-19T03:20:48.000Z (over 1 year ago)
• Last Synced: 2024-06-15T13:31:52.180Z (5 months ago)
• Topics: d3js, hoon, p2p, svelte, sveltekit, urbit
• Language: hoon
• Homepage:
• Size: 13.7 MB
• Stars: 143
• Watchers: 4
• Forks: 9
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

• awesome-urbit - Canvas

README

        
# *Canvas* for \~Urbit

[![awesome urbit badge](https://img.shields.io/badge/~-awesome%20urbit-lightgrey)](https://github.com/urbit/awesome-urbit)

[![Header](/images/canvas.png)](https://www.youtube.com/watch?v=S6DySv730Hw)

[Video Demo](https://yosoyubik.fra1.digitaloceanspaces.com/norsyr-torryn/2021.7.06..15.37.33-Jul-06-2021%2017-36-28.mp4)

## 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

```hoon

~picsel-norsyr-torryn/public

```

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

```hoon

~norsyr-torryn/canvas

```

## Development Setup

1. Clone the repo, of course

2. 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`](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](https://urbit.org/docs/userspace/dist/guide#create-desk) to merge the `base-dev` and `garden-dev` desks into your desk

3. Copy canvas desk to Urbit

    From the repo folder, run `./install.sh ` where `` might be something like `~/urbit/zod/canvas`

    You can alse run `./install.sh -w ` if you want to watch for changes.

4. 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)

5. 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

6. Eventually, build the UI to test in Urbit for real test

    - `npm run build` (in `/ui`)

    - `./install.sh ` (in project root)

    - `|commit %canvas` (in dojo)

## Templates

TODO