libanp.github.io/SweetHome3DJSViewer.html at master · libanp/libanp.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!--
   SweetHome3DJSViewer.html  version 6.2

   Sweet Home 3D, Copyright (c) 2019 Emmanuel PUYBARET / eTeks <info@eteks.com>

   This program is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation; either version 2 of the License, or
   (at your option) any later version.

   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.

   You should have received a copy of the GNU General Public License
   along with this program; if not, write to the Free Software
   Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>View home with Sweet Home 3D JS 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  -->
  <canvas id="viewerCanvas" class="viewerComponent" width="800" height="600"
          style="background-color: #CCCCCC; border: 1px solid gray; outline:none; touch-action: 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>
<div style="position: absolute; bottom: 5px; text-align: center; width: 95%; z-index: -1">
  <a href="http://www.sweethome3d.com">Sweet Home 3D</a> JS Viewer / Version 6.2 - Distributed under GNU General Public License
</div>

<!-- Copy the following script to view your home in the previous canvas, updating the default.sh3d URL and parameters if necessary -->
<script type="text/javascript">
  var homeUrl = "default.sh3d";
  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";
        }
      }

      document.getElementById("viewerProgressLabel").innerHTML =
          (percentage ? Math.floor(percentage * 100) + "% " : "") + part + " " + info;
    };

  // Display home in canvas 3D
  // Mouse and keyboard navigation explained at
  // http://sweethome3d.cvs.sf.net/viewvc/sweethome3d/SweetHome3D/src/com/eteks/sweethome3d/viewcontroller/resources/help/en/editing3DView.html
  // You may also switch between aerial view and virtual visit with the space bar
  // For browser compatibility, see http://caniuse.com/webgl
  viewHome("viewerCanvas",    // Id of the canvas
           homeUrl,           // URL or relative URL of the home to display
           onerror,           // Callback called in case of error
           onprogression,     // Callback called while loading
          {roundsPerMinute: 0,                    // Rotation speed of the animation launched once home is loaded in rounds per minute, no animation if missing or equal to 0
           navigationPanel: "default",               // Displayed navigation arrows, "none" or "default" for default one or an HTML string containing elements with data-simulated-key
                                                  // attribute set "UP", "DOWN", "LEFT", "RIGHT"... to replace the default navigation panel, "none" if missing
           aerialViewButtonId: "aerialView",      // Id of the aerial view radio button, radio buttons hidden if missing
           virtualVisitButtonId: "virtualVisit",  // Id of the aerial view radio button, radio buttons hidden if missing
           levelsAndCamerasListId: "levelsAndCameras",          // Id of the levels and cameras select component, hidden if missing
        /* level: "Roof", */                                    // Uncomment to select the displayed level, default level if missing */
        /* selectableLevels: ["Ground floor", "Roof"], */       // Uncomment to choose the list of displayed levels, no select component if empty array */
        /* camera: "Exterior view", */                          // Uncomment to select a camera, default camera if missing */
        /* selectableCameras: ["Exterior view", "Kitchen"], */  // Uncomment to choose the list of displayed cameras, no camera if missing */
           activateCameraSwitchKey: true                        // Switch between top view / virtual visit with space bar if not false or missing */
          });
</script>

</body>
</html>