Download

Online

Gallery

Blog

  Index  | Recent Threads  | List Attachments  | Search
 Welcome Guest  |  Register  |  Login
Login Name  Password
 

Sweet Home 3D Forum



No member browsing this thread
Thread Status: Active
Total posts in this thread: 31
Posts: 31   Pages: 4   [ 1 2 3 4 | Next Page ]
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 18116 times and has 30 replies Next Thread
industria
Newbie



Brasil
Joined: Sep 22, 2016
Post Count: 1
Status: Offline
Reply to this Post  Reply with Quote 
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?
[Sep 22, 2016, 3:01:38 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Puybaret
Expert
Member's Avatar

France
Joined: Nov 7, 2005
Post Count: 9141
Status: Offline
Reply to this Post  Reply with Quote 
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
[Sep 22, 2016, 4:04:27 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
boe666
Member



POLAND
Joined: Nov 21, 2018
Post Count: 21
Status: Offline
Reply to this Post  Reply with Quote 
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 ?
[Nov 21, 2018, 6:04:34 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
boe666
Member



POLAND
Joined: Nov 21, 2018
Post Count: 21
Status: Offline
Reply to this Post  Reply with Quote 
Re: Export HTML5 plug-in

Can anyone help ?
[Nov 28, 2018, 8:32:53 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
boe666
Member



POLAND
Joined: Nov 21, 2018
Post Count: 21
Status: Offline
Reply to this Post  Reply with Quote 
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 ?
[Nov 28, 2018, 1:28:57 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Puybaret
Expert
Member's Avatar

France
Joined: Nov 7, 2005
Post Count: 9141
Status: Offline
Reply to this Post  Reply with Quote 
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
[Nov 28, 2018, 6:42:55 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
boe666
Member



POLAND
Joined: Nov 21, 2018
Post Count: 21
Status: Offline
Reply to this Post  Reply with Quote 
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>

[Nov 29, 2018, 9:35:24 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
boe666
Member



POLAND
Joined: Nov 21, 2018
Post Count: 21
Status: Offline
Reply to this Post  Reply with Quote 
Re: Export HTML5 plug-in

my real example is ok or somebody see there errors. What do I wrong ?
[Dec 3, 2018, 8:32:24 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
boe666
Member



POLAND
Joined: Nov 21, 2018
Post Count: 21
Status: Offline
Reply to this Post  Reply with Quote 
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.
[Dec 3, 2018, 1:44:47 PM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
boe666
Member



POLAND
Joined: Nov 21, 2018
Post Count: 21
Status: Offline
Reply to this Post  Reply with Quote 
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.
[Dec 5, 2018, 10:43:28 AM] Show Printable Version of Post    View Member Profile    Send Private Message [Link] Report threatening or abusive post: please login first  Go to top 
Posts: 31   Pages: 4   [ 1 2 3 4 | Next Page ]
[ Jump to Last Post ]
Show Printable Version of Thread  Post new Thread

    Get Sweet Home 3D at SourceForge.net. Fast, secure and Free Open Source software downloads
   
© Copyright 2006-2024 eTeks - All rights reserved