Sweet Home 3D Forum - Print Thread - Export HTML5 plug-in


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>View home with Sweet Home 3D HTML5 Viewer</title>

<!--  Copy the following scripts in your page header -->
<script type="text/javascript" src="lib/big.min.js"></script>
<script type="text/javascript" src="lib/gl-matrix-min.js"></script>
<script type="text/javascript" src="lib/jszip.min.js"></script>
<script type="text/javascript" src="lib/core.min.js"></script>
<script type="text/javascript" src="lib/geom.min.js"></script>
<script type="text/javascript" src="lib/stroke.min.js"></script>
<script type="text/javascript" src="lib/batik-svgpathparser.min.js"></script>
<script type="text/javascript" src="lib/jsXmlSaxParser.min.js"></script>
<script type="text/javascript" src="lib/triangulator.min.js"></script>
<script type="text/javascript" src="lib/viewmodel.min.js"></script>
<script type="text/javascript" src="lib/viewhome.min.js"></script>

<style type="text/css">
/* The class of components handled by the viewer */
.viewerComponent  {
}
</style>
</head>

<body>
<div>
  <!-- Copy the following canvas and components in your page, changing their size / texts and other values if needed  -->
  <table><tr><td style="margin-top:0px;">
  <canvas id="viewerCanvas" class="viewerComponent" width="800" height="600"
          style="background-color: #CCCCCC; border: 1px solid gray; outline:none" tabIndex="1"></canvas>
  <div id="viewerProgressDiv" style="width: 400px; position: relative; top: -350px; left: 200px; background-color: rgba(128, 128, 128, 0.7); padding: 20px; border-radius: 25px">
    <progress id="viewerProgress"  class="viewerComponent" value="0" max="200" style="width: 400px"></progress>
    <label id="viewerProgressLabel" class="viewerComponent" style="margin-top: 2px; display: block; margin-left: 10px"></label>
  </div>
  <div style="margin-top: -60px">
    <input  id="aerialView"   class="viewerComponent" name="cameraType" type="radio" style="visibility: hidden;"/>
      <label class="viewerComponent" for="aerialView" style="visibility: hidden;">Aerial view</label>
    <input  id="virtualVisit" class="viewerComponent" name="cameraType" type="radio" style="visibility: hidden;"/>
      <label class="viewerComponent" for="virtualVisit" style="visibility: hidden;">Virtual visit</label>
    <select id="levelsAndCameras" class="viewerComponent" style="visibility: hidden;"></select>
  </div>
</div>
</td><td style="vertical-align:top;"><div id="PRitemlist" style="width:400px; margin-top:0px;></div>

</td></tr></table>
<div style="position: absolute; bottom: 5px; text-align: center; width: 95%; z-index: -1">
  <a href="http://www.sweethome3d.com">Sweet Home 3D</a> HTML5 Viewer / Version 1.4 - Distributed under GNU General Public License
</div>

<!-- Copy the following script to view your home in the previous canvas -->
<script type="text/javascript">
  var homeUrl = "test.zip";
  var onerror = function(err) {
      if (err == "No WebGL") {
        alert("Sorry, your browser doesn't support WebGL.");
      } else {
        console.log(err.stack);
        alert("Error: " + (err.message  ? err.constructor.name + " " +  err.message  : err));
      }
    };
  var onprogression = function(part, info, percentage) {
      var progress = document.getElementById("viewerProgress"); 
      if (part === HomeRecorder.READING_HOME) {
        // Home loading is finished 
        progress.value = percentage * 100;
        info = info.substring(info.lastIndexOf('/') + 1);
      } else if (part === Node3D.READING_MODEL) {
        // Models loading is finished 
        progress.value = 100 + percentage * 100;
        if (percentage === 1) {
          document.getElementById("viewerProgressDiv").style.visibility = "hidden";
            setTimeout(myfunction,1000);
            }
      }
          document.getElementById("viewerProgressLabel").innerHTML =
          (percentage ? Math.floor(percentage * 100) + "% " : "") + part + " " + info;
    };

  var canvas = document.getElementsByTagName('canvas')[0];
  

    var HPC = viewHome(canvas.id,
           homeUrl,
           onerror,
           onprogression,
          {roundsPerMinute: 0,
           navigationPanel: "none",
              aerialViewButtonId: "aerialView",
              virtualVisitButtonId: "virtualVisit",
              levelsAndCamerasListId: "levelsAndCameras",
              activateCameraSwitchKey: true
          });



	function selectI(a)
		{
		var HOME = HPC.getHome();
		var FURNITURES = HOME.getFurniture();
		
		var itemSel = [FURNITURES[a]];
		HOME.setSelectedItems(itemSel);
		console.log(itemSel);
		console.log("Selected by Link: ID:" + a +", name:"+itemSel[0].name);
		}
  function myfunction() {
      var UP = HPC.getUserPreferences();
	  UP.setAerialViewCenteredOnSelectionEnabled(true);
      var HOME = HPC.getHome();
      var FURNITURES = HOME.getFurniture();
      var ITEMS = HOME.getSelectableViewableItems();
      console.log("All items: ");
	  console.log(ITEMS);
	  console.log("All furnitures: ");
	  console.log(FURNITURES);
	  
      	  
	  var tt = 'All FURNITURES:<br/>';
	  var i;
		for (i = 0; i < FURNITURES.length; i++) {
		tt += '<a href=\"#\" style=\"float:left;border:1px #000000 solid; padding:2px; margin:2px;\" onclick=\"selectI('+i+');\" >'+FURNITURES.name+'</a>';
		} 
		document.getElementById("PRitemlist").innerHTML=tt;
		


      canvas.addEventListener("mouseup", function (e) {
          var rect = canvas.getBoundingClientRect;
          var x = e.clientX ;//- e.layerX;
          var y = e.clientY ;//- e.layerY;
          console.log('mouse pointer:' + x + ', ' + y );
          console.log("Finded objekt:");
		var obj = HPC.getComponent3D().getClosestItemAt(x, y);
		console.log("Finded objekt:"+obj);
         
      });
  }
</script>

</body>
</html>