Mind Mapping in VR
Mind Mapping in VR
Noda provides an integration api for displaying and interacting with content outside of VR.
You can create a web-technology (HTML/CSS/JS) based mod for Noda to display your own UI and graph data for yourself or others.
The mod will run inside of Noda's Chromium-based web browser as a normal web page. You can include our noda.js javascript file that provides methods for create, update, delete and select operations on nodes and links.
The mod is viewable and interactable using the same input methods available in the Noda UI that includes dual Virtual Pointers via Hand Controllers, Virtual Keyboard, Physical Keyboard, and Voice Support for Speech-to-Text.
You can also subscribe to events from the VR environment including changes to the graph when the user adds, selects, updates or deletes a node or link.
This is optional but the starter kit will show a working example of calling the Noda javascript methods and event handlers and populating the necessary parameters.
The starter kit can be found here on GitHub including a simple form exercising all of the apis.
You'll need to place your web app on a server that you can reach from inside the VR headset. Unless you can access a localhost using an internal network this usually means having a publicly available domain/host name. There are many ways and places to host static web pages but it would be best to use something that allow you to quickly make changes to the file so can iterate your app during development.
Currently this happens by default, as all URLs are permitted to run Noda js commands. You can choose to disallow all locations and enable only the ones that you choose using the Noda Console available in the VR app from the Settings tab on the Application Menu.
Using the Browser from the Application Menu to load your web page and execute the js methods to visualize 3d data.
You can bring up the Noda Console from the Settings tab of the Application Menu to view log messages of the running web application.
Below is a list of available methods along with a description and example code.
const node = await window.noda.createNode(properties);The createNode method is used to create a new node in the VR space. Properties (listed below) can be supplied for visual characteristics like color, shape and size as well as additional data fields for Notes and Page url link. A unique identifier can be supplied or one will be generated and returned in an asynchronous response.
const node = await window.noda.updateNode(properties);Update an existing node in the VR space identified by uuid property. Properties can be supplied for visual characteristics like color, shape and size as well as additional data fields for Notes and Page url link. Fields that are supplied will be updated.
const node = await window.noda.deleteNode(properties);Delete an existing node in the VR space identified by uuid property.
const node = await window.noda.listNodes(properties);Return a list of nodes in the VR space that match the given properties. Sending a null properties object will return all available nodes.
const link = await window.noda.createLink(properties);The createLink method is used to create a new link between two nodes in the VR space. Properties (listed below) can be supplied for visual characteristics like color, pattern and thickness. A unique identifier can be supplied or one will be generated and returned in an asynchronous response.
const link = await window.noda.updateLink(properties);Update an existing link in the VR space identified by uuid property. Properties can be supplied for visual characteristics like color, pattern and thickness. Fields that are supplied will be updated.
const link = await window.noda.deleteLink(properties);Delete an existing link in the VR space identified by uuid property.
const links = await window.noda.listLinks(properties);Return a list of links in the VR space that match the given properties. Sending a null properties object will return all available links.
const user = await window.noda.getUser();Returns an object that can be used to associate a returning visitor. Currently the property userId represents a single installation, meaning the same headset over successive starts of the app will return the same id. If the app is reinstalled or the headset is factory reset or the same person is using a different headset a different id will be returned.
window.noda.onNodeCreated = function (node) { console.log("Node created: " + node.uuid); }This event will fire when a node has been created in the VR scene. This will happen both from a node created by this API (createNode method call above) or by the user interactive directly with the VR scene.
window.noda.onNodeUpdated = function (node) { console.log("Node updated: " + node.uuid); }This event will fire when a node has been updated in the VR scene. This will happen both from this API (updateNode method call above) or by the user interactive directly with the VR scene.
window.noda.onNodeDeleted = function (node) { console.log("Node deleted: " + node.uuid); }This event will fire when a node has been deleted in the VR scene. This will happen both from a node created by this API (deleteNode method call above) or by the user interactive directly with the VR scene.
window.noda.onLinkCreated = function (link) { console.log("Link created: " + link.uuid); }This event will fire when a link has been created in the VR scene. This will happen both from a link created by this API (createLink method call above) or by the user interactive directly with the VR scene.
window.noda.onLinkUpdated = function (link) { console.log("Link updated: " + link.uuid); }This event will fire when a link has been updated in the VR scene. This will happen both from this API (updateLink method call above) or by the user interactive directly with the VR scene.
window.noda.onLinkDeleted = function (link) { console.log("Link deleted: " + link.uuid); }This event will fire when a link has been deleted in the VR scene. This will happen both from a link created by this API (deleteLink method call above) or by the user interactive directly with the VR scene.
uuid - A universal unique identifier for the node. This could be a numeric or string value such as "1234" or "PRODUCT-SKU-452"
title - The main text appears above the node. It should be a short name or phrase.
color - A hex value that represents the color of the shape. Ex. #000000 (black) #111111 (white) #110000 (red)
opacity - A numerical value that represents how opaque or transparent the shape will appear. 0 is completely transparent and 1 is completely opaque.
shape - The name of the shape model. Values can be any of the following: Ball, Box, Tetra, Cylinder, Diamond, Hourglass, Plus, Star
imageUrl - A public URL that points to an image for display. Should include the protocol i.e. "https://images.cdn.com/test.png". Can be .png or jpg format.
notes - A free form text field for additional information related to a node.
pageUrl - A public URL that is accessible when examining the node.
size - The relative size of the node. Default value is 5, can range from 1 to 45.
location - A sub object that defines how the node should be positioned. It has the following properties:
selected - Indicates if the node is selected, shown by a flashing color.
collapsed - Indicates if the node is in expanded or collapsed state. Collapsed nodes will hide all of the outgoing connected nodes..
uuid - A universal unique identifier for the link. This could be a numeric or string value such as "1234" or "PRODUCT-SKU-452"
fromUuid - Corresponds to the uuid of the starting node for this link.
toUuid - Corresponds to the uuid of the ending node for this link.
title - The main text appears above the node. It should be a short name or phrase.
color - A hex value that represents the color of the link. Ex. #000000 (black) #111111 (white) #110000 (red)
shape - The pattern used to paint the link. Can be one of: Solid, Dash, Arrows. Solid is the default.
size - The thickness of the line from 1 - 10. The default is 1.
selected - Indicates if the link is selected, shown by a flashing color
userId - represents a single installation, meaning the same headset over successive starts of the app will return the same id. If the app is reinstalled or the headset is factory reset or the same person is using a different headset a different id will be returned.
Noda is available for instant download on the following platforms
