Skip to content

Kinopio is a creative thinking tool

License

Notifications You must be signed in to change notification settings

kinopio-club/kinopio-client

Repository files navigation

Netlify Status

kinopio-client

logo

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.

Install

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

Run

npm run serve
https://kinopio.local:8080

Run with Production API Server

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.

Debugging

npm run lint

Use the Vue devtools for Firefox and Chrome. For Safari, uncomment code in main.js then,

./node_modules/.bin/vue-devtools

Primary Files

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

User States to Design For

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
group member or admin can see and edit all spaces in the group

Post Messages

Post messages are used to communicate with a parent secureAppContext environment, such as the iOS app that wraps the website in a child webview.

How to update the 'Hello Kinopio' Space

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.

How to update the Changelog and "What's New"

Instructions here

HTTPS Signing

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'

Ngrok tunnelling

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)

Setup Ngrok

login, install ngrok, then connect ngrok to the kinopio ngrok account

brew install ngrok/ngrok/ngrok
ngrok authtoken NGROK_TOKEN

Run Ngrok

ngrok http https://localhost:8080

See Also