Print at Mar 7, 2021, 5:21:04 AM
Posts: 31   Pages: 4   [ 1 2 3 4 | Next Page ]
View all posts in this thread on one page
Posted by industria at Sep 22, 2016, 3:01:38 PM
Export HTML5 plug-in
How to click in a furniture (door, window etc) and open a Javascript alert contaign the CatalogID of the furniture clicked?

Posted by Puybaret at Sep 22, 2016, 4:04:27 PM
Re: Export HTML5 plug-in
You should call the method getClosestItemAt 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 getCatalogId method to get its catalog ID and do whatever you want.
The HomeComponent3D instance is returned by the getComponent3D method available on the object returned by viewHome function.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by boe666 at Nov 21, 2018, 6:04:34 PM
Re: Export HTML5 plug-in
Please check my code. Why It not working well ?

Initialisation:

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 ?

Posted by boe666 at Nov 28, 2018, 8:32:53 AM
Re: Export HTML5 plug-in
Can anyone help ?

Posted by boe666 at Nov 28, 2018, 1:28:57 PM
Re: Export HTML5 plug-in
You should call the method getClosestItemAt 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 getCatalogId method to get its catalog ID and do whatever you want.
The HomeComponent3D 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 ?

Posted by Puybaret at Nov 28, 2018, 6:42:55 PM
Re: Export HTML5 plug-in
It's difficult to say without a real example. Can't you share a sample page?
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by boe666 at Nov 29, 2018, 9:35:24 AM
Re: 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 -->
<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>


Posted by boe666 at Dec 3, 2018, 8:32:24 AM
Re: Export HTML5 plug-in
my real example is ok or somebody see there errors. What do I wrong ?

Posted by boe666 at Dec 3, 2018, 1:44:47 PM
Re: Export HTML5 plug-in
My changed code:
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.

Posted by boe666 at Dec 5, 2018, 10:43:28 AM
Re: Export HTML5 plug-in
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.

Posts: 31   Pages: 4   [ 1 2 3 4 | Next Page ]