Features

Download

Online

Gallery

Blog

  Index  | Recent Threads  | List Attachments  | Help  | 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: 71
Posts: 71   Pages: 8   [ Previous Page | 1 2 3 4 5 6 7 8 ]
[ Jump to Last Post ]
Post new Thread
Author
Previous Thread This topic has been viewed 124690 times and has 70 replies Next Thread
AlexHattingh
Newbie



South Africa
Joined: Feb 20, 2019
Post Count: 1
Status: Offline
Reply to this Post  Reply with Quote 
Re: Export to HTML5 plug-in

Good day community, Emmanuel did try help me, and I fiddled a little, but I really don't understand what he's telling me to do.

I would like my render to appear at 100% of width no matter the device. And where would I specify max height of the render?

Here is the code as rendered by the HMTL5 Plugin.

Is there any way you can add the bits needed and make them bold/different colour so that I can see how this is supposed to be done?

Regards
Alex

<!--
viewHome.html version 1.2

Sweet Home 3D, Copyright (c) 2016 Emmanuel PUYBARET / eTeks <info@eteks.com>

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
-->
<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/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.2 - 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 = "One%20Person.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";
}
}

document.getElementById("viewerProgressLabel").innerHTML =
(percentage ? Math.floor(percentage * 100) + "% " : "") + part + " " + info;
};

// Display home in canvas 3D
// Mouse and keyboard navigation explained at
// http://sweethome3d.cvs.sf.net/viewvc/sweethom...elp/en/editing3DView.html
// You may also switch between aerial view and virtual visit with the space bar
// For browser compatibility, see http://caniuse.com/webgl
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 select component, hidden if missing
/*, selectableLevels: ["Level 0", "Level 1"] */ // List of displayed levels, all viewable levels if missing
});
</script>

</body>
</html>
[Feb 20, 2019 1:48:40 PM] Show Printable Version of Post    View Member Profile    Send Private Message    http://www.sinetech.co.za [Link] Report threatening or abusive post: please login first  Go to top 
Posts: 71   Pages: 8   [ Previous Page | 1 2 3 4 5 6 7 8 ]
[ 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-2019 eTeks - All rights reserved