Sweet Home 3D Forum
»  List all forums
» »  Forum: New versions
» » »  Thread: Export to HTML5 plug-in
» » » »  Post: Re: Export to HTML5 plug-in

Print at Dec 15, 2025, 6:58:43 PM

Posted by Gildaniel at Oct 31, 2019, 9:35:33 AM
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

Text of html:
***************************************************
<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>


<script type="text/javascript">
function viewHomeInOverlay1(homeUrl, params) {
var widthByHeightRatio = 4 / 3;
if (params && params.widthByHeightRatio) {
widthByHeightRatio = params.widthByHeightRatio;
}

// Ensure no two overlays are displayed
hideHomeOverlay();

var overlayDiv = document.createElement("div");
overlayDiv.setAttribute("id", "viewerOverlay");
overlayDiv.style.position = "absolute";
overlayDiv.style.left = "0";
overlayDiv.style.top = "0";
overlayDiv.style.zIndex = "100";
overlayDiv.style.background = "rgba(127, 127, 127, .5)";

var bodyElement = document.getElementsByTagName("body").item(0);
bodyElement.insertBefore(overlayDiv, bodyElement.firstChild);

var homeViewDiv = document.createElement("div");
var divHTML =
'<canvas id="viewerCanvas" class="viewerComponent" style="background-color: #CCCCCC; border: 1px solid gray; position: absolute; outline: none; touch-action: none" tabIndex="1"></canvas>'
+ '<div id="viewerProgressDiv" style="position:absolute; width: 300px; background-color: rgba(128, 128, 128, 0.7); padding: 20px; border-radius: 25px">'
+ ' <progress id="viewerProgress" class="viewerComponent" value="0" max="200" style="width: 300px;"></progress>'
+ ' <label id="viewerProgressLabel" class="viewerComponent" style="margin-top: 2px; margin-left: 10px; margin-right: 0px; display: block;"></label>'
+ '</div>';
if (params
&& (params.aerialViewButtonText && params.virtualVisitButtonText
|| params.viewerControlsAdditionalHTML)) {
divHTML += '<div id="viewerControls" style="position: absolute; padding: 10px; padding-top: 5px">';
if (params.aerialViewButtonText && params.virtualVisitButtonText) {
divHTML +=
' <input id="aerialView" class="viewerComponent" name="cameraType" type="radio" style="visibility: hidden;"/>'
+ ' <label class="viewerComponent" for="aerialView" style="visibility: hidden;">' + params.aerialViewButtonText + '</label>'
+ ' <input id="virtualVisit" class="viewerComponent" name="cameraType" type="radio" style="visibility: hidden;">'
+ ' <label class="viewerComponent" for="virtualVisit" style="visibility: hidden;">' + params.virtualVisitButtonText + '</label>'
+ ' <select id="levelsAndCameras" class="viewerComponent" style="visibility: hidden;"></select>';
}
if (params.viewerControlsAdditionalHTML) {
divHTML += params.viewerControlsAdditionalHTML;
}
divHTML += '</div>';
}
homeViewDiv.innerHTML = divHTML;
overlayDiv.appendChild(homeViewDiv);

// Create close button image
var closeButtonImage = new Image();
closeButtonImage.src = ZIPTools.getScriptFolder("jszip.min.js") + "/close.png";
closeButtonImage.style.position = "absolute";
overlayDiv.appendChild(closeButtonImage);

overlayDiv.escKeyListener = function(ev) {
if (ev.keyCode === 27) {
hideHomeOverlay();
}
};
window.addEventListener("keydown", overlayDiv.escKeyListener);
closeButtonImage.addEventListener("click", hideHomeOverlay);
var mouseActionsListener = {
mousePressed : function(ev) {
mouseActionsListener.mousePressedInOverlay = true;
},
mouseClicked : function(ev) {
if (mouseActionsListener.mousePressedInOverlay) {
delete mouseActionsListener.mousePressedInOverlay;
hideHomeOverlay();
}
}
};
overlayDiv.addEventListener("mousedown", mouseActionsListener.mousePressed);
overlayDiv.addEventListener("click", mouseActionsListener.mouseClicked);
overlayDiv.addEventListener("touchmove",
function(ev) {
ev.preventDefault();
});

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

overlayDiv.style.height = Math.max(pageHeight, windowHeight) + "px";
overlayDiv.style.width = pageWidth <= windowWidth
? "100%"
: pageWidth + "px";
overlayDiv.style.display = "block";

var canvas = document.getElementById("viewerCanvas");
canvas.width = pageWidth;
canvas.height = pageHeight;

canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";
var canvasLeft = pageXOffset + (windowWidth - canvas.width - 10) / 2;
canvas.style.left = canvasLeft + "px";
var canvasTop = pageYOffset + (windowHeight - canvas.height - 10) / 2;
canvas.style.top = canvasTop + "px";

// 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;
}

if (text !== null) {
document.getElementById("viewerProgressLabel").innerHTML =
(percentage ? Math.floor(percentage * 100) + "% " : "") + text + " " + info;
}
}
};

</script>


<style type="text/css">
/* The class of components handled by the viewer */
.viewerComponent {
}
</style>


<H1 style="text-align: center; text-decoration:underline; cursor: pointer"
onclick='viewHomeInOverlay1("house.sh3d",
{roundsPerMinute: 1,
widthByHeightRatio: 4/3,
navigationPanel: "none",
aerialViewButtonText: "Aerial view",
virtualVisitButtonText: "Virtual tour",
level: "1 floor",
selectableLevels: ["1 floor", "2 floor", "Roof"],
activateCameraSwitchKey: true,
viewerControlsAdditionalHTML: "",
readingHomeText: "Loading",
readingModelText: "Building",
noWebGLSupportError: "No WebGL support"
})'
>PRESS HERE TO OPEN 3D-MODEL FULL SCREEN (viewHomeInOverlay1)</H1>
<br>
<br>
<H1 style="text-align: center; text-decoration:underline; cursor: pointer"
onclick='viewHomeInOverlay("house.sh3d",
{roundsPerMinute: 1,
widthByHeightRatio: 4/3,
navigationPanel: "none",
aerialViewButtonText: "Aerial view",
virtualVisitButtonText: "Virtual tour",
level: "1 floor",
selectableLevels: ["1 floor", "2 floor", "Roof"],
activateCameraSwitchKey: true,
viewerControlsAdditionalHTML: "",
readingHomeText: "Loading",
readingModelText: "Building",
noWebGLSupportError: "No WebGL support"
})'
>PRESS HERE TO OPEN 3D-MODEL NORMAL MODE (viewHomeInOverlay)</H1>
</body>

***************************************************

RSS feeds
Powered by mvnForum 1.2.2 GA
© Copyrights 2002-2010 by MyVietnam.net
Current timezone is GMT
Dec 15, 2025, 6:58:43 PM