Russia
Joined: Aug 11, 2017
Post Count: 135
Status:
Offline
Re: Export to HTML5 plug-in
Hello!
When I use exportHomes feature 3d model opens on whole browser window.
But in examples I've seen canvas always has fixed size.
I'm not so good in Java and html programming, could you please explain me how to change my code to have full screen view, or just give an example of full window canvas?
*************************************************** <body> <script type="text/javascript" src="/3dplan/newlib/big.min.js"></script> <script type="text/javascript" src="/3dplan/newlib/gl-matrix-min.js"></script> <script type="text/javascript" src="/3dplan/newlib/jszip.min.js"></script> <script type="text/javascript" src="/3dplan/newlib/core.min.js"></script> <script type="text/javascript" src="/3dplan/newlib/geom.min.js"></script> <script type="text/javascript" src="/3dplan/newlib/batik-svgpathparser.min.js"></script> <script type="text/javascript" src="/3dplan/newlib/jsXmlSaxParser.min.js"></script> <script type="text/javascript" src="/3dplan/newlib/triangulator.min.js"></script> <script type="text/javascript" src="/3dplan/newlib/viewmodel.min.js"></script> <script type="text/javascript" src="/3dplan/newlib/viewhome.min.js"></script> <style type="text/css"> /* The class of components handled by the viewer */ .viewerComponent { } </style>
France
Joined: Nov 7, 2005
Post Count: 9430
Status:
Offline
Re: Export to HTML5 plug-in
There's no parameter to tell the size of the opened canvas in the viewHomeInOverlay version. Its size is 90% of the available space. You could change the source code of viewHomeInOverlay but generate updated .js code might be complicate for you. Another solution could be to copy paste viewHomeInOverlay in your page, rename it and change the following part of the code:
var canvas = document.getElementById("viewerCanvas"); canvas.width = pageWidth; canvas.height = pageHeight;
There are probably other parameters to adjust to take into account scroll bars.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D creator
Russia
Joined: Aug 11, 2017
Post Count: 135
Status:
Offline
Re: Export to HTML5 plug-in
Hello, Emmanuel!
I tried to copy-paste viewHomeInOverlay function and rename it, but it doesn't work, no window open at all. May be there is some error in tags I made? The test page is here - http://regard-house.ru/3dplan/test/test1.html
// Place canvas in the middle of the window var windowWidth = self.innerWidth; var windowHeight = self.innerHeight; var pageWidth = document.documentElement.clientWidth; var pageHeight = document.documentElement.clientHeight; if (bodyElement && bodyElement.scrollWidth) { if (bodyElement.scrollWidth > pageWidth) { pageWidth = bodyElement.scrollWidth; } if (bodyElement.scrollHeight > pageHeight) { pageHeight = bodyElement.scrollHeight; } } var pageXOffset = self.pageXOffset ? self.pageXOffset : 0; var pageYOffset = self.pageYOffset ? self.pageYOffset : 0;
// Place close button at top right of the canvas closeButtonImage.style.left = (canvasLeft + canvas.width - 5) + "px"; closeButtonImage.style.top = (canvasTop - 10) + "px";
// Place controls below the canvas var controlsDiv = document.getElementById("viewerControls"); if (controlsDiv) { controlsDiv.style.left = (canvasLeft - 10) + "px"; controlsDiv.style.top = (canvasTop + canvas.height) + "px"; controlsDiv.addEventListener("mousedown", function(ev) { // Ignore in overlay mouse clicks on controls ev.stopPropagation(); }); }
// Place progress in the middle of the canvas var progressDiv = document.getElementById("viewerProgressDiv"); progressDiv.style.left = (canvasLeft + (canvas.width - 300) / 2) + "px"; progressDiv.style.top = (canvasTop + (canvas.height - 50) / 2) + "px"; progressDiv.style.visibility = "visible";
var onerror = function(err) { hideHomeOverlay(); if (err == "No WebGL") { var errorMessage = "Sorry, your browser doesn't support WebGL."; if (params.noWebGLSupportError) { errorMessage = params.noWebGLSupportError; } alert(errorMessage); } else if (typeof err === "string" && err.indexOf("No Home.xml entry") == 0) { var errorMessage = "Ensure your home file was saved with Sweet Home 3D 5.3 or a newer version."; if (params.missingHomeXmlEntryError) { errorMessage = params.missingHomeXmlEntryError; } alert(errorMessage); } 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 (progress) { var text = null; if (part === HomeRecorder.READING_HOME) { progress.value = percentage * 100; info = info.substring(info.lastIndexOf('/') + 1); text = params && params.readingHomeText ? params.readingHomeText : part; } else if (part === ModelLoader.READING_MODEL) { progress.value = 100 + percentage * 100; if (percentage === 1) { document.getElementById("viewerProgressDiv").style.visibility = "hidden"; } text = params && params.readingModelText ? params.readingModelText : part; }
France
Joined: Nov 7, 2005
Post Count: 9430
Status:
Offline
Re: Export to HTML5 plug-in
I quickly tried your script and the JavaScript console reported various errors like an unexpected end of script and a "Can't find variable: viewHomeInOverlay1" error. I think you should learn how to debug JavaScript code, it's really worth it and it's not so difficult if you're able to program.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D creator
Russia
Joined: Aug 11, 2017
Post Count: 135
Status:
Offline
Re: Export to HTML5 plug-in
I quickly tried your script and the JavaScript console reported various errors like an unexpected end of script and a "Can't find variable: viewHomeInOverlay1" error. I think you should learn how to debug JavaScript code, it's really worth it and it's not so difficult if you're able to program.
Emmanuel, good morning!
Script viewHomeInOverlay1 works after I copypaste in my html full text from viewhome.js. Now it is very comfortable to handle 3d, but all navigation (aerial/virtual, levels) is missing on the page. I'm afraid it would be too complicated for me to learn javascript to correct it.
Can I ask you to add in some new version of html viewer the new mode, opening 3d in a new tab to whole browser window? It would be very usefull both for smartphones and desktop viewing.
Problems with smartphones now: - too small window of 3d viewer, especially in vertical mode; - if you ocasionally tap somewhere outside overlay window boundaries - it closes viewer.
Problems with desktops: - using mouse wheel without Shift button in some browsers scrolls the html page instead of zooming 3d (in aerial mode) or moving through (in virtual visit mode) - also occasion tapping outside closes overlay.
Date/Time: 2019-11-21 17:18:25.155 +0100 OS Version: Mac OS X 10.14.6 (18G1012) Report Version: 12 Bridge OS Version: 4.1 (17P1081) Anonymous UUID: 146C2222-06A5-F9DA-9F2D-0408363A6D61
France
Joined: Nov 7, 2005
Post Count: 9430
Status:
Offline
Re: Export to HTML5 plug-in
Sorry for this issue that seems to happen only with the Mac App Store version. In case you didn't know, you could also use Sweet Home 3D JS Viewer directly with your SH3D file (save and compress it to get a smaller file if needed).
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D creator
España
Joined: Mar 31, 2020
Post Count: 1
Status:
Offline
Re: Export to HTML5 plug-in
I try to put in a wordpress page but I don't know how to do it. In my computer works, I upload to the server and appear page not found, I try to put like html code in a wordpress page and don´t work look like uploading all the time. Do you know what I can do?
France
Joined: Nov 7, 2005
Post Count: 9430
Status:
Offline
Re: Export to HTML5 plug-in
Do you mean that you wonder if the 3D viewer would be able to generate such images or view existing images (like the sky texture but also with the other half on ground side)?
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D creator
