达普 嵌入

正常网络进入KaraSpace增强现实的入口点是由功能强大的插件提供的，该插件可以通过以下HTML代码段嵌入到任何网页中。

该门户网站最终将是AR眼镜。在此之前，有无数使用案例可以使用经典网络上的虚拟资产。

进入KaraSpace将始终允许访问底层代码以进行可信的计算和开发。对于插件开发，可以在受保护的地方执行以下代码。

Javascript和HTML

有权访问其网站空间上的javascript的用户可以使用以下插件代码：


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
   // 更改以上所有行中的" ar"前缀，以将插件的多个版本放置在一页上

   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 = 'CN';      // 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?';
   // 更改上述变量以实现所需的行为 
  
   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>

通过更改插件顶部的前缀，可以在单个页面上多次使用该插件：从“ ar”更改为“ 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
   // 更改以上所有行中的" ar"前缀，以将插件的多个版本放置在一页上
  ...

可以更改变量：此处的exitReset，appTitle和canvasHeight以及按钮和框架的大小已更改。
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 = 'CN';      // 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 = '我的世界';   // like "Test Application"
   var canvasHeight = 200;   // height of the 3d graphics canvas
   var url = 'https://smalltalk.karaspace.net/user/amber?';
// 更改上述变量以实现所需的行为 
...

只有HTML

无法访问其网站空间上的javascript的用户可以使用以下插件。必须从头开始设置iframe大小，并且必须将参数插入网址。网址也可以在链接中使用。使用runMode=run 和 splitMode=true 时，结果更适合于窗口。

Dapp Example without scripting:                                  在窗口中打开 

<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&language=CN" target="_blank">在窗口中打开<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=CN" height="300px" width="600px" style="resize:both;overflow:auto;border:3px ridge AliceBlue" allowfullscreen="allowfullscreen"></iframe>