Export HTML5 plug-in

industria · Post by **industria** » Thu Sep 22, 2016 3:01 pm

How to click in a furniture (door, window etc) and open a Javascript alert contaign the CatalogID of the furniture clicked?

Puybaret · Post by **Puybaret** » Thu Sep 22, 2016 4:04 pm

You should call the method [font=courier new]getClosestItemAt[/font] available in HomeComponent3D class in a listener added to the displayed canvas. If the returned object is an instance of HomePieceOfFurniture, then you may call its [font=courier new]getCatalogId[/font] method to get its catalog ID and do whatever you want.
The [font=courier new]HomeComponent3D[/font] instance is returned by the getComponent3D method available on the object returned by viewHome function.

boe666 · Post by **boe666** » Wed Nov 21, 2018 6:04 pm

Please check my code. Why It not working well ?

Initialisation:

Code: Select all

 
var HPC = viewHome("viewerCanvas", (... etc...));

//and the main function:
viewerCanvas.addEventListener("mouseup", function (e) {
							console.log(e);
                            var rect = viewerCanvas.getBoundingClientRect();
                            var x = e.clientX; // - rect.left;
                            var y = e.clientY; // - rect.top;
							console.log('mouse:' + x + ', ' + y);
							var obj = HPC.getComponent3D().getClosestItemAt(x, y);
							console.log(obj);
							
							});

And console has this after click on the furniture (i have only one):

mouseup { target: canvas#viewerCanvas.viewerComponent
, buttons: 0, clientX: 390, clientY: 233, layerX: 390, layerY: 233 }
viewHome.html:114:8
mouse:390, 233 viewHome.html:118:8
null

always is NULL! Can somebody explain why ? What do i wrong ?

boe666 · Post by **boe666** » Wed Nov 28, 2018 8:32 am

Can anyone help ?

boe666 · Post by **boe666** » Wed Nov 28, 2018 1:28 pm

You should call the method [font=courier new]getClosestItemAt[/font] available in HomeComponent3D class in a listener added to the displayed canvas. If the returned object is an instance of HomePieceOfFurniture, then you may call its [font=courier new]getCatalogId[/font] method to get its catalog ID and do whatever you want.
The [font=courier new]HomeComponent3D[/font] instance is returned by the getComponent3D method available on the object returned by viewHome function.

I tried to do it according this post but it is not working at all. I have access to Object'd list, to every variables and function, i studdy the JS API but i can't select any items my mouse, even set getHome().setSelectedItems(["number"]) do nothing (camera not move). I have set setAerialViewCenteredOnSelectionEnabled(true).

Can somebody help me to understand what do I wrong ?

Puybaret · Post by **Puybaret** » Wed Nov 28, 2018 6:42 pm

It's difficult to say without a real example. Can't you share a sample page?

boe666 · Post by **boe666** » Thu Nov 29, 2018 9:35 am

Code: Select all

<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  -->
  <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>
<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";

            //All is loaded at this point.
            //Overall Listener
            HPC.getHome().addFurnitureListener(function (e) {
                console.log(e);
            });
            //set the parameter.
            var UP = HPC.getUserPreferences();
            UP.setAerialViewCenteredOnSelectionEnabled(true);
            // check the value of parameter (to be sure)
            var UP = HPC.getUserPreferences();
            console.log(UP.isAerialViewCenteredOnSelectionEnabled() );
            //list all Items.
            var HOME = HPC.getHome();
            var items = HOME.getSelectableViewableItems();
            console.log(items);


            //listener for mouse
            viewerCanvas.addEventListener("mouseup", function (e) {
                console.log(e);
                var rect = HPC.getBoundingClientRect;
                var x = e.clientX ;//- e.layerX;
                var y = e.clientY ;//- e.layerY;
                //log the x and y
                console.log('mouse:' + x + ', ' + y );

                //log the camera position x,y,z
                var obj = HPC.getComponent3D();
                console.log(obj);
                var x1 = obj.camera.x;
                var y1 = obj.camera.y;
                var z1 = obj.camera.z;
                console.log('camera:');
                console.log('obj: x:'+x1+',y:'+y1+', z:'+z1);

                //chceck item closest
                var obj = HPC.getComponent3D().getClosestItemAt(x,y);
                console.log(obj);
                // ALWAYS NULL
                var obj = HPC.getHome().getSelectableViewableItems();
                //list of selectable items.
                console.log(obj);
                //select item nr 5 - nothing happend.
                HPC.getHome().setSelectedItems(["5"]);

                //check selected items
                var obj = HPC.getHome().getSelectedItems();
                console.log(obj)



            });

        }
      }
    
      document.getElementById("viewerProgressLabel").innerHTML = 
          (percentage ? Math.floor(percentage * 100) + "% " : "") + part + " " + info;
    };
   
  /
    var HPC = 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: "none",               // 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>

boe666 · Post by **boe666** » Mon Dec 03, 2018 8:32 am

my real example is ok or somebody see there errors. What do I wrong ?

boe666 · Post by **boe666** » Mon Dec 03, 2018 1:44 pm

My changed code:

Code: Select all

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




  function myfunction() {
      var UP = HPC.getUserPreferences();
      var HOME = HPC.getHome();
      var items = HOME.getSelectableViewableItems();
      console.log(items);
      UP.setAerialViewCenteredOnSelectionEnabled(true);
      var itemSel = [items[89]];
      HOME.setSelectedItems(itemSel);
      //ITS WORKING!


      viewerCanvas.addEventListener("mouseup", function (e) {
          //console.log(e);
          var rect = HPC.getBoundingClientRect;
          var x = e.clientX ;//- e.layerX;
          var y = e.clientY ;//- e.layerY;
          //log the x and y
          console.log('mouse:' + x + ', ' + y );
          //chceck item closest
          console.log("Zaznaczono objekt:")
          var obj = HPC.getComponent3D().getClosestItemAt(x,y);
          console.log(obj);
          // NOT WORKING, ALWAYS NULL

      });
  }
</script>

I can select item by "finger" (in code), but still i can;t do it by mouse. Please help.

boe666 · Post by **boe666** » Wed Dec 05, 2018 10:43 am

Can sombody Help ? I check the source. Method getClosestItemAt use the canvas3D.getClosestShapeAt. I don't know why it is't working - this object (HPC) has all furniture, selectable from code.

Export HTML5 plug-in

Export HTML5 plug-in

Re: Export HTML5 plug-in

Re: Export HTML5 plug-in

Re: Export HTML5 plug-in

Re: Export HTML5 plug-in

Re: Export HTML5 plug-in

Re: Export HTML5 plug-in

Re: Export HTML5 plug-in

Re: Export HTML5 plug-in

Re: Export HTML5 plug-in

Who is online

Download the app Sweet Home 3D

Related threads