Dapp Einbettung – KaraSpace

Der Einstiegspunkt aus dem normalen Web in die KaraSpace-Augmented Reality wird durch ein leistungsstarkes Plugin bereitgestellt, das mit den folgenden HTML-Codefragmenten in jede Webseite eingebettet werden kann.

Das eigentliche Portal wird letztendlich die AR-Brille sein. Bis dahin gibt es unendlich viele Anwendungsfälle für die Verwendung der virtuellen Werte im klassischen Web.

Beim Eintreten in die KaraSpace Welt erhalten Sie immer Zugriff auf den zugrunde liegenden Code für vertrauenswürdiges Computing und die App-Entwicklung. Für die Plugin-Entwicklung kann der folgende Code in einer Sandbox ausgeführt werden.

Javascript & HTML

Benutzer, die auf ihrem Webspace auch Zugriff auf Javascript haben, können den folgenden Plugin-Code verwenden:

Dapp Beispiel:
Enter KaraSpace

<!-- Karaspace AR Dapp Plugin mit Scripting-->
<strong id="ar-title">Dapp Beispiel:</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
   // Verendere in allen obigen Zeilen den 'ar' prefix um mehrere Versionen des Plugins auf einer seite zu plazieren

   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 = 'DE';      // 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>

Das Plugin kann mehrmals auf einer einzelnen Seite verwendet werden, indem das Präfix im oberen Teil des Plugins geändert wird: Hier von „ar“ zu „view“:

<!-- Karaspace AR Dapp Plugin mit 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
   // Verendere in allen obigen Zeilen den 'ar' prefix um mehrere Versionen des Plugins auf einer seite zu plazieren
  ...

Die Variablen können geändert werden: Hier wurden exitReset, appTitle und canvasHeight sowie die Schaltflächen- und Rahmengröße geändert.
MeineDapp Beispiel:
Enter KaraSpace

<strong id="view-title">Meine 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 = 'DE';      // 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 = 'Meine 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 
...

Nur HTML

Benutzer, die auf ihrem Webspace keinen Zugriff auf Javascript haben, können das folgende Plugin verwenden. Die Iframe-Größe muss von Anfang an festgelegt und die Parameter in die URL eingefügt werden. Die URL kann auch in einem Link verwendet werden. Mit runMode=run und splitMode=true ist das Ergebnis besser für ein Fenster geeignet.

Dapp Beisplie ohne scripting: Öffne im Fenster

<strong id="my-title">Dapp Beisplie ohne 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&language=DE" target="_blank">Öffne im Fenster<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&language=DE" height="300px" width="600px" style="resize:both;overflow:auto;border:3px ridge AliceBlue" allowfullscreen="allowfullscreen"></iframe>