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   [ Previous Page | 1 2 3 4 | Next Page ]
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 10357 times and has 30 replies Next Thread
dorin
Advanced Member
Member's Avatar

Romania
Joined: Apr 24, 2014
Post Count: 266
Status: Offline
Reply to this Post  Reply with Quote 
Re: Export HTML5 plug-in

I'am not sure but could be a problem of browser rather than coding.
Look at this answer
----------------------------------------
A computer program does what you tell it to do, not what you want it to do. Murphy's Law (Greer's Third Law)
When all else fails, read the instructions.Murphy's Law
[Dec 5, 2018, 6:46:31 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Puybaret
Expert
Member's Avatar

France
Joined: Nov 7, 2005
Post Count: 7484
Status: Offline
Reply to this Post  Reply with Quote 
Re: Export HTML5 plug-in

Thanks for trying to help Dorin, but your link points to problems in the Online version, not with the HTML5 viewer version.
Anyway, you're not wrong when your speak about browsers, because the viewer could also not work correctly on some browsers (even if I don't hope so).

boe666, the most helpful code is the one tested on a real web server with a real SH3D file. So please, upload your failing HTML5 code on a public web server with a SH3D file.
You could also use the very good JavaScript debuggers available in all modern browsers, and find what's wrong by yourself.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer
[Dec 5, 2018, 8:51:56 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [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

ok. So I clean the code, and put all on this link:
http://smarted.pl/sh3d/viewHome.html#
As You can see - all object are selectable by code.
But not by the mouse.
Please check console.

Code below:

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


[Dec 6, 2018, 9:28:20 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [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 somebody help ?
[Dec 10, 2018, 10:03:48 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [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

Ok, so if nobody can help in this situation, maybe sombody can help - how to calculate z dimention and z,y depend of actual camera's position ? Where can I find proper values?
[Dec 11, 2018, 8:02:47 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Puybaret
Expert
Member's Avatar

France
Joined: Nov 7, 2005
Post Count: 7484
Status: Offline
Reply to this Post  Reply with Quote 
Re: Export HTML5 plug-in

I tried your program in Safari debugger and the object returned at the line
var obj = HPC.getComponent3D().getClosestItemAt(x, y);
was "almost" found. By "almost", I mean that your x,y coordinates are wrong, and you should translate them in canvas space, removing rect.x and rect.y (but rect can't be correct because you forgot brackets at the end of canvas.getBoundingClientRect).

You should really learn how to use a JavaScript debugger.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer
[Dec 11, 2018, 10:16:41 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [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

I understand my mistake, but can You show me how i can translate them in canvas space ? Maybe some links ?
[Dec 11, 2018, 11:31:56 AM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [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

I'm trying to understand this, i think it's depend on camera position (before i think the getClosestItemAt calculate this automaticaly) but without any examples i don't know how to start.
[Dec 11, 2018, 12:45:08 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Puybaret
Expert
Member's Avatar

France
Joined: Nov 7, 2005
Post Count: 7484
Status: Offline
Reply to this Post  Reply with Quote 
Re: Export HTML5 plug-in

I wrote you how to fix your issue.
Sorry, I can't help you more, it's really basic JavaScript.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer
[Dec 11, 2018, 1:04:07 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [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

so, if I understand this proper. I have to translate x,y coordinates (given from flat rectangle) to coordinates in the actual perspective of my model's floor. After this, method getClosestItemAt fill return objects.
Am I Correct ?
[Dec 11, 2018, 1:24:46 PM] Show Printable Version of Post    View Member Profile    Send Private Message    Hidden to Guest [Link] Report threatening or abusive post: please login first  Go to top 
Posts: 31   Pages: 4   [ Previous Page | 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-2021 eTeks - All rights reserved