Dapp Embedding

The entry point from the normal web into the KaraSpace augmented reality is provided by a powerful plugin that can be embedded into any web page with the following HTML code snippets.

The portal will ultimately be the AR-Spectacles. Until then, there are infinite use cases to use the virtual assets on the classical web.

Entering the KaraSpace will always give access to the underlying code for trusted computing and development. For plugin development, the code below can be executed in a Sandbox.

Javascript & HTML

Users who have access to javascript on their webspace can use the following plugin code:


Dapp Example:
Enter KaraSpace

<!-- Karaspace AR Dapp Plugin with Scripting-->
<strong id="ar-title">Dapp Example:</strong><br>
<img id="ar-enter" src="https://smalltalk.karaspace.net/img/plugin/DappEntrance330.png" alt="Enter KaraSpace" width="200" title="open the Karaspace application" />
<iframe id="ar-iframe" src="" width="100%" height="50px" style="resize:both;overflow:auto" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<script type='text/javascript'>
// function to run the Dapp with remote frame size adjustment

arRun();
function arRun() {
   var enterButton = document.getElementById('ar-enter');
   var enterTitle = document.getElementById('ar-title');
   var frame = document.getElementById('ar-iframe');
   var prefix = 'ar';              // id for this plugin instance
   // Chang in all the above lines the 'ar' prefix for multiple versions of this plugin on a single page

   var runClass = 'FormExample';    // the Class to run, default Karaspace
   var method = 'tryExample';       // the Class method to run, default start
   var appType = 'Dapp';      // VR or Dapp Icons used
   var language = 'EN';      // EN DE CN for multy-lingual sites
   var mode = 'xfallback';    // fallback for error substitute  
   var runMode = 'run';             // run norun hibernate
   var layout = 'header';           // plane header
   var exitReset = false;          // reset app on hybernation
   var appTitle = null;              // like "Test Application"
   var canvasHeight = 400;   // height of the 3d graphics canvas
   var url = 'https://smalltalk.karaspace.net/user/amber?';
   // Chang the above variables for desired behovior 
  
   url = url + 'runClass=' + runClass + '&method=' + method + '&appType=' + appType + '&language=' + language + '&mode=' + mode + '&layout=' + layout  + '&exitReset=' + exitReset + '&appTitle=' + appTitle + '&canvasHeight=' + canvasHeight + '&parentFrameID=' + prefix;
   
   enterButton.onclick = function(event) {
           enterButton.style.display = 'none';
           enterTitle.style.display = 'none';
           frame.style.display = 'block';
           frame.src = url };

   frame.style.display = 'none';

window.addEventListener('message', function(msg) { 
    var eventName = msg.data[0];
    var para = msg.data[1];
    var idCode = msg.data[2];
    if ((idCode === prefix)&&((msg.origin === 'https://smalltalk.karaspace.net')||(msg.origin === 'http://smalltalk.karaspace.net')) ) {
        switch(eventName) {
          case 'setIframeHeight':
            frame.height = para;
            break;
          case 'enterEvent':
            frame.height = para;
            break;
          case 'exitEvent':
            frame.style.display = 'none';
            enterButton.style.display = 'block';
            enterTitle.style.display = 'block';
            if (exitReset) {frame.src = ''};
            break;
        };
    };
  }, false);
};
</script>

The Plugin can be used multiple times on a single page, by altering the prefix on the top part of the plugin: Here from “ar” to “view”:

<!-- Karaspace AR Dapp Plugin with Scripting-->
<strong id="view-title">Dapp Example:</strong><br>
<img id="view-enter" src="https://smalltalk.karaspace.net/img/plugin/DappEntrance330.png" alt="Enter KaraSpace" width="200" title="open the Karaspace application" />
<iframe id="view-iframe" src="" width="100%" height="50px" style="resize:both;overflow:auto" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<script type='text/javascript'>
// function to run the Dapp with remote frame size adjustment

viewRun();
function viewRun() {
   var enterButton = document.getElementById('view-enter');
   var enterTitle = document.getElementById('view-title');
   var frame = document.getElementById('view-iframe');
   var prefix = 'view';              // id for this plugin instance
   // Chang in all the above lines the 'ar' prefix for multiple versions of this plugin on a single page
  ...

The variables can be changed: Here the exitReset, appTitle and canvasHeight as well as the button and frame size has been altered.
MyDapp Example:
Enter KaraSpace

<strong id="view-title">My Dapp:</strong><br>
<img id="view-enter" src="https://smalltalk.karaspace.net/img/plugin/DappEntrance330.png" alt="Enter KaraSpace" width="100" title="open the Karaspace application" />
<iframe id="view-iframe" src="" width="600px" height="50px" style="resize:both;overflow:auto" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

// ...

var runClass = 'FormExample';    // the Class to run, default Karaspace
   var method = 'tryExample';       // the Class method to run, default start
   var appType = 'Dapp';      // VR or Dapp Icons used
   var language = 'EN';      // EN DE CN for multy-lingual sites
   var mode = 'xfallback';    // fallback for error substitute  
   var runMode = 'run';             // run norun hibernate
   var layout = 'header';           // plane header
   var exitReset = true;          // reset app on hybernation
   var appTitle = 'My Dapp';   // like "Test Application"
   var canvasHeight = 200;   // height of the 3d graphics canvas
   var url = 'https://smalltalk.karaspace.net/user/amber?';
// Chang the above variables for desired behovior 
...

HTML only

Users who have no access to javascript on their webspace can use the following plugin. The iframe size must be set from the beginning and the parameters must be inserted into the url.  The Url can also be used in a link. With runMode=run and splitMode=true the result is better suited for a window.

Dapp Example without scripting:                                  Open in Window

<strong id="my-title">Dapp Example without scripting:</strong>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://smalltalk.karaspace.net/user/amber?runClass=Karaspace&method=start&appType=Dapp&runMode=run&mode=xfallback&canvasHeight=600&layout=header&splitMode=true" target="_blank">Open in Window<img src="https://smalltalk.karaspace.net/img/plugin/DappSplitDot100.png" alt="" width="30" height="30" /></a>
<br>
<iframe id="my-iframe" src="https://smalltalk.karaspace.net/user/amber?runClass=Karaspace&method=start&appType=Dapp&runMode=hibernate&mode=xfallback&canvasHeight=200&layout=header" height="300px" width="600px" style="resize:both;overflow:auto;border:3px ridge AliceBlue" allowfullscreen="allowfullscreen"></iframe>