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:
AR Example:
Test.html
x
<!-- Karaspace AR Dapp Plugin with Scripting--><strong id="ar-title">AR Example:</strong><br><img id="ar-enter" src="https://smalltalk.karaspace.net/img/plugin/VREntrance300.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 adjustmentarRun();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 = 'VR'; // VR or Dapp Icons used var language = 'EN'; // EN DE CN for multy-lingual sites var mode = 'fallback'; // 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”:
secondInstance.html
xxxxxxxxxx<!-- Karaspace AR Dapp Plugin with Scripting--><strong id="view-title">AR Example:</strong><br><img id="view-enter" src="https://smalltalk.karaspace.net/img/plugin/VREntrance300.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 adjustmentviewRun();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.
MyView Example:
variableOptions.js
xxxxxxxxxx<strong id="view-title">My View:</strong><br><img id="view-enter" src="https://smalltalk.karaspace.net/img/plugin/VREntrance300.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 = 'VR'; // VR or Dapp Icons used var language = 'EN'; // EN DE CN for multy-lingual sites var mode = 'fallback'; // 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 View'; // 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.
AR Example without scripting: Open in Window
VR-TestPlugin.html
xxxxxxxxxx<strong id="my-title">AR Example without scripting:</strong> <a href="https://smalltalk.karaspace.net/user/amber?runClass=Karaspace&method=start&appType=VR&runMode=run&mode=fallback&canvasHeight=600&layout=header&splitMode=true" target="_blank">Open in Window<img src="https://smalltalk.karaspace.net/img/plugin/VRSplitDot100.png" alt="" width="30" height="30" /></a><br><iframe id="my-iframe" src="https://smalltalk.karaspace.net/user/amber?runClass=Karaspace&method=start&appType=VR&runMode=hibernate&mode=fallback&canvasHeight=200&layout=header" height="300px" width="600px" style="resize:both;overflow:auto;border:3px ridge AliceBlue" allowfullscreen="allowfullscreen"></iframe>