Try out open canvas 6 how to#
Try out open canvas 6 code#
Try out open canvas 6 Offline#

Storage is currently implemented as part of the redux store, using redux-pouchdb for synchronising its state in Redux with a PouchDB database in the browser's offline storage.Not to be confused with the Redux store ( src/store.js), which manages the application state, and thus also contains the (non-persistent) canvas state.Keeps a persistent collection of documents (currently just simple webmarks and text notes, e.g.It simply passes this docId to the configured component ( StemItem in this app), so the top level app decides what to draw inside an item. Knows nothing of an item's content, except its docId given by the top level app.Handles the placement and positioning of items ( s), and enables (multitouch) interactions like dragging and resizing items.Implements the user interface, a 2d 'canvas' ( not related to the html element) with any amount of items and possibly with edges between them.

Try out open canvas 6 how to#

Its React components ( src/components/*) specify how to display the 'documents' from the storage in the items on the canvas: the notes ( Note.jsx), webpages ( Webpage.jsx) and also the special empty item for navigating ( EmptyItem.jsx).Specifies the more high level behaviour (see actions.js), practically meaning all the logic that involves both the UI and the storage and can thus not be put in either module.Sets up the app (see main.html, main.jsx): renders the canvas into the page, creates a Redux store (see store.js), connects the modules to the store ( reducer.js).

Try out open canvas 6 code#

The code is designed somewhat modular, and could be seen as three repos in one: top level (the 'app itself'), the canvas module for the UI, and the storage module for handling persisted data. Some familiarity with Redux and its concepts (reducers, actions, store) may be required to understand the code. React is used for managing the DOM, Redux for managing the application state, PouchDB for persisting data in one's local storage. The whole thing is just an HTML page/app itself, using s to show the browsed web pages. Then visit localhost:8086 in your browser.

Clone and run webmemex ( make build run).

Clone and run this pywb-webrecorder fork ( make rebuild start, or something).

The setup consists of two containers: this app itself, and a pywb-webrecorder instance, which is used to proxy viewed webpages while inserting some extra code into them to detect and report link clicks (because the application should open clicked links in a new iframe).

Open in a modern browser.Д«uilding and running this demo is currently a bit of a hassle.

New forms are being worked on, see for the current status. This project is kept alive as a demo but is not developed further in this form. Log Out In Global Navigation, click the Account link 1, then click the Logout button 2. This experiment was designed to run as a web app, so effectively you run a browser inside your browser (so you can browse while you browse!). When you are finished accessing Canvas, you can log out of your account. To create your personal web of pages and notes, connected by your assocations. A web browser that lets you save and organise the pages you visit.