Kinopio is a spatial thinking canvas for your new ideas and hard problems.
The kinopio-client is the client web app that users use to read and update spaces, cards, connections, etc. – which is saved to localStorage and to the kinopio-server via API requests, queued API operations, and websocket broadcasts.
git clone https://github.com/pketh/kinopio-client.git
cd kinopio-client
npm install
npm install -g @vue/cli
npm install -g hostile
hostile set localhost kinopio.local
npm run serve
https://kinopio.local:8080
You can force the local app to use the prod API by editing .env.local so that VITE_PROD_SERVER=true. Create env.local by duplicating and renaming .env.local.sample.
When the app starts up, the 🐸 kinopio-server URL will be displayed in the browser logs.
npm run lint
Use the Vue devtools for Firefox and Chrome. For Safari, uncomment code in main.js then,
./node_modules/.bin/vue-devtools
| File | Description |
|---|---|
router |
Client-side routes |
App.vue |
Root component, used by all routes |
store.js |
Vuex store, contains global observables and methods needed by multiple components |
currentSpace.js |
Vuex store module that handles loading spaces |
utils.js |
Functional methods that just do dom manipulations or common tasks. These can't access components or store directly |
views/Space.vue |
Contains the core interaction layer which sends user inputs to painting, connecting, dragging etc. components. Also where new connections are created and checked to see if they connect |
views/Add.vue |
kinopio.club/add page for browser extensions and iOS share sheet |
components/Card.vue |
Displays cards from store.state.currentCards, and shows CardDetails |
components/Connection.vue |
Displays connections from store.state.currentConnections, and shows ConnectionDetails |
components/Box.vue |
Displays boxes from store.state.currentBoxes, and shows ConnectionDetails |
components/Header.vue |
Used for moving between spaces, searching/filter, shows user presence, changing user prefs, and Kinopio meta options. Shown on all routes |
components/layers/MagicPaint.vue |
The layers used for animating painting, scroll locking on touch, and more with <canvas>. As well as for multiple card and connection selection which reveals MultipleSelectedActions |
components/NewBlankTemplate.vue |
Template file for new components |
components/NewBlankDialogTemplate.vue |
Template file for new dialog components |
| State | Description |
|---|---|
offline |
localstorage and API queue operations only |
not signed in |
localstorage only |
space is read only |
cannot add cards or edit |
space is open |
can add cards, can only edit cards they created |
mobile |
touch handlers, no hover, small screen |
desktop zoom out |
using the zoom bar or cmd+/- |
pinch zoom out/in |
using native touch gesture on mobile |
team member or admin |
can see and edit all spaces in the team |
Post messages are used to communicate with a parent secureAppContext environment, such as the iOS app that wraps the website in a child webview.
The hello space serves as the entry point and marketing page for new users. It's generated within the app from hello.json.
To update it, create the space and export its json. Replace the contents ofhello.json with the new json file.
You shouldn't need to run this or update the cert until 2025, but just in case
To work with code that only works on https (e.g. clipboard copy and paste), mkcert was used to create a local ssl certificate
$ brew install mkcert
$ mkcert -install
$ mkdir -p .cert && mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem 'kinopio.local'
Use Ngrok to pipe your localhost through an external https server. Helpful for debugging on mobile.
(Note that dev kinopio-server connections won't work through Ngrok)
login, install ngrok, then connect ngrok to the kinopio ngrok account
brew install ngrok/ngrok/ngrok
ngrok authtoken NGROK_TOKEN
ngrok http https://localhost:8080