nodaadmin · jlong23 · Oct 6, 2023
diff --git a/APIDocumentaion.md b/APIDocumentaion.md
@@ -0,0 +1,226 @@
+# Using the Noda Integration API
+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.
+
+# Table of Contents
+1. [Using the Node Integration](#using-the-noda-integration-api)
+    1. [Workflow Summary](#workflow-summary)
+    1. [Architecture](#Architecture)
+1. [API Specifications](#api-specifications)
+    1. [Node Management Methods](#node-management-methods)
+        1. [createNode](#createnode)
+        1. [updateNode](#updatenode)
+        1. [deleteNode](#deletenode)
+        1. [listNodes](#listnodes)
+    1. [Link Management Methods](#link-management-methods)
+        1. [createLink](#createlink)
+        1. [updateLink](#updatelink)
+        1. [deleteLink](#deletelink)
+        1. [listLinks](#listlinks)
+    1. [User Management Methods](#user-management-methods)
+        1. [getUser](#getuser)
+    1. [Object Properties](#object-properties)
+        1. [Node Properties](#node-properties)
+        1. [Link Properties](#link-properties)
+        1. [User Properties](#user-properties)
+## Workflow Summary
+Clone the web app starter from GitHub.
+Host on an accessible web location. (On a cloud hosting platform or GitHub Pages, etc.)
+Enable Noda WebAPI for your web location
+Access your web location from inside Noda
+Workflow Details
+
+1. Clone the web app starter from GitHub
+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.
+
+2. Host on an accessible web location
+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.
+
+3. Enable Noda WebAPI for your web location
+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.
+
+4. Access your web location from inside Noda
+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.
+
+## Architecture
+
+The Noda API interacts with exposed interfaces and objects inside the embeded Noda Browser.  Your integration web page & scripts need only to be reachable by your headset and the network it's connected to. If your headset and the integration page & sub-assets you have created are not reachable, then they may not load properly in the Noda Application.
+
+
+![NodaVR Logical Component Flow](docs/nodavr-architectual.png "NodaVR Logical Component Flow")
+
+
+
+# API Specifications
+
+Below is a list of available methods along with a description and example code.
+
+### Node Management Methods
+
+#### createNode
+```Javascript
+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.
+
+#### updateNode
+```Javascript
+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.
+
+##### deleteNode
+```Javascript
+const node = await window.noda.deleteNode(properties);
+```
+Delete an existing node in the VR space identified by uuid property.
+
+#### listNodes
+```Javascript
+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.
+
+### Link Management Methods
+
+#### createLink
+```Javascript
+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.
+
+#### updateLink
+```Javascript
+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.
+
+#### deleteLink
+```JavaScript
+const link = await window.noda.deleteLink(properties);
+```
+Delete an existing link in the VR space identified by uuid property.
+
+#### listLinks
+```Javascript
+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.
+
+### User Management Methods
+
+#### getUser
+```Javascript
+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.
+
+### Event Management Methods
+
+#### onNodeCreated
+```Javascript
+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.
+
+#### onNodeUpdated
+```Javascript
+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.
+
+#### onNodeDeleted
+```Javascript
+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.
+
+#### onLinkCreated
+```Javascript
+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.
+
+#### onLinkUpdated
+```Javascript
+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.
+
+#### onLinkDeleted
+```Javascript
+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.
+
+### Object Properties
+
+#### Node Properties
+``` 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 RGB 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, Flat ```
+
+``` 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:
+
+> ``` x ``` - Position in X axis measured in meters. (Left/Right)
+>
+> ``` y ``` - Position in Y axis measured in meters. (Up/Down)
+> 
+> ``` z ``` - Position in Z axis measured in meters. (Forward/Back)
+> 
+> ``` relativeTo ``` - Specifies the frame of reference for the location. Can be one of: ``` Origin, User or Window```.
+
+``` 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.
+
+#### Link Properties
+``` 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```.
+
+``` curve ``` - The Line Curve Style for the link. Can be one of: ```None, CDown, CUp, SDown, SUp```.  ```None``` is the default.
+
+``` trail ``` - The animated trail from/to for the link. Can be one of: ```None, Ball, Cone, Ring```.   ```None``` is the default.
+
+
+``` selected ``` - Indicates if the link is selected, shown by a flashing color
+
+## User Properties
+``` 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.
diff --git a/docs/Architechual.drawio b/docs/Architechual.drawio
@@ -0,0 +1,87 @@
+<mxfile host="Electron" modified="2023-10-06T14:09:13.122Z" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.2 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="PR5JQYlrWhQkAhjJfSG7" version="22.0.2" type="device">
+  <diagram name="Page-1" id="90a13364-a465-7bf4-72fc-28e22215d7a0">
+    <mxGraphModel dx="1336" dy="764" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1.5" pageWidth="1169" pageHeight="826" background="none" math="0" shadow="0">
+      <root>
+        <mxCell id="0" style=";html=1;" />
+        <mxCell id="1" style=";html=1;" parent="0" />
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-1" value="Private WebServer" style="whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
+          <mxGeometry x="520" y="970" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-2" value="Noda VR" style="whiteSpace=wrap;html=1;aspect=fixed;fontSize=32;" vertex="1" parent="1">
+          <mxGeometry x="870" y="770" width="400" height="400" as="geometry" />
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-3" value="Noda&lt;br&gt;Browser&lt;br&gt;&amp;amp; Integration Script(s)" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;" vertex="1" parent="1">
+          <mxGeometry x="900" y="1090" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-5" value="Noda Graph Management API" style="shape=process;whiteSpace=wrap;html=1;backgroundOutline=1;" vertex="1" parent="1">
+          <mxGeometry x="1140" y="1090" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-6" value="" style="shape=flexArrow;endArrow=classic;startArrow=classic;html=1;rounded=0;" edge="1" parent="1">
+          <mxGeometry width="100" height="100" relative="1" as="geometry">
+            <mxPoint x="1030" y="1119.8" as="sourcePoint" />
+            <mxPoint x="1130" y="1119.8" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-18" value="Manages Nodes &amp;amp;&lt;br&gt;&amp;nbsp;Link Translations" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="1hHF_TBkAN-ehXD5GL7K-6">
+          <mxGeometry x="0.016" y="-4" relative="1" as="geometry">
+            <mxPoint x="-1" y="-34" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-7" value="Private Integration API(s)" style="whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
+          <mxGeometry x="520" y="1080" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-11" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="1hHF_TBkAN-ehXD5GL7K-8" target="1hHF_TBkAN-ehXD5GL7K-9">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-12" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="1hHF_TBkAN-ehXD5GL7K-8" target="1hHF_TBkAN-ehXD5GL7K-10">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-8" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
+          <mxGeometry x="1065" y="820" width="30" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-9" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
+          <mxGeometry x="1020" y="870" width="30" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-10" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
+          <mxGeometry x="1110" y="870" width="30" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-13" value="" style="shape=flexArrow;endArrow=classic;startArrow=classic;html=1;rounded=0;exitX=0.8;exitY=0.775;exitDx=0;exitDy=0;exitPerimeter=0;" edge="1" parent="1">
+          <mxGeometry width="100" height="100" relative="1" as="geometry">
+            <mxPoint x="1200" y="1077" as="sourcePoint" />
+            <mxPoint x="1140" y="917" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-19" value="Manages and Monitors &lt;br&gt;in-App Graph Interaction&amp;nbsp;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="1hHF_TBkAN-ehXD5GL7K-13">
+          <mxGeometry x="-0.1156" y="-2" relative="1" as="geometry">
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-14" value="" style="shape=flexArrow;endArrow=classic;startArrow=classic;html=1;rounded=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" target="1hHF_TBkAN-ehXD5GL7K-3">
+          <mxGeometry width="100" height="100" relative="1" as="geometry">
+            <mxPoint x="610" y="1119.8" as="sourcePoint" />
+            <mxPoint x="710" y="1119.8" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-17" value="PROVIDES INTERATION DATA&lt;br&gt;BETWEEN YOUR INTEGRATION APIs" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="1hHF_TBkAN-ehXD5GL7K-14">
+          <mxGeometry x="-0.2386" y="3" relative="1" as="geometry">
+            <mxPoint x="30" y="23" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-15" value="" style="shape=flexArrow;endArrow=classic;html=1;rounded=0;" edge="1" parent="1" target="1hHF_TBkAN-ehXD5GL7K-3">
+          <mxGeometry width="50" height="50" relative="1" as="geometry">
+            <mxPoint x="610" y="1009.8" as="sourcePoint" />
+            <mxPoint x="660" y="1009.8" as="targetPoint" />
+            <Array as="points">
+              <mxPoint x="740" y="1010" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="1hHF_TBkAN-ehXD5GL7K-16" value="SERVES INTEGRATION HTML &amp;amp; JAVASCRIPT" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];rotation=0;" vertex="1" connectable="0" parent="1hHF_TBkAN-ehXD5GL7K-15">
+          <mxGeometry x="0.2696" y="1" relative="1" as="geometry">
+            <mxPoint x="-69" y="-49" as="offset" />
+          </mxGeometry>
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/docs/nodavr-architectual.png b/docs/nodavr-architectual.png