Print at Aug 13, 2020, 1:05:24 PM
Posted by Puybaret at Apr 13, 2016, 2:14:53 AM
Export to HTML5 plug-in
Hello,

I'm very happy to present you the very first public version of Export to HTML5 plug-in (see the end of this message for download links).
Similarly to Sweet Home 3D viewer that requires the dying Java plug-in, the goal of this plug-in is to generate an HTML page able to view the arrangements you designed with Sweet Home 3D in an HTML5 3D canvas running on any web browser compatible with WebGL.
Once downloaded and installed in Sweet Home 3D, the plug-in proposes the new Tools > Export to HTML5 menu item that lets you choose a ZIP file where the edited home should be exported. Once the export is finished (it might last a long time), simply unzip the exported file to test / modify / deploy the 3D presentation of your home on the web.
The unzipped folder will contain:
- an HTML file named viewHome.html that contains a 3D canvas you can add to your HTML page, along with required scripts and other tags
- an HTML file named viewHomeInOverlay.html that contains a button you can add to your HTML page, this button being able to display the given home in an overlay (like in the updated Sweet Home 3D Gallery)
- a .zip file similar to a .sh3d file that contains the data of your home
- a lib folder which contains the required 500 kB Javascript code to display the home file.

To avoid consuming too much memory on small configurations like smartphones and tablets, the texture images used in the exported home are automatically scaled to 256 pixel wide or high, if either size is greater (except for sky textures). As the Javascript code is able to handle only models at OBJ+MTL format at the moment, models at other formats are automatically converted to OBJ files, and finally, the .zip file with the data of your exported home is compressed for a faster download from a web server. These are the reasons why the export can last a long time.
And yes, I repeat, the result works on smartphones and tablets compatible with WebGL, including iOS and Android devices as well as zoom gestures available on touch screens. If you mainly target these platforms, don't be too greedy, because the compatibility with WebGL on those devices doesn't guaranty you can load and run a home file of any size on them (10 MB is probably a reasonable limit nowadays). Simply try the homes in the Sweet Home 3D Gallery to discover the limit in your case. The main drawback of HTML5 in relation with this issue is that, at this moment, there's no way to anticipate the lack of memory to finish an operation, and when the browser runs out of memory, the window where the 3D canvas is displayed simply... crashes with a warning for the end user! I made huge efforts to manage memory requirements at a level as low as possible, but I think it will be very complicate (if ever possible) to load bigger files in a future version, if your device doesn't accept it now.

Quite strangely, the main difficulty for you at the beginning might be to find how to test these HTML files on your computer, because years after years, almost all browsers except Firefox (until now) don't allow to read local files by default, for security reasons!!! Of course, deploying the html files on a web server or removing security on local files will work, so be patient, success is never too far...

See the comments in viewHome.html and viewHomeInOverlay.html files for more details on how to configure the 3D canvas. For example, it's possible to start an animation that rotates the home once loaded, or display radio buttons to switch between Aerial view mode and Virtual visit mode.
For your information, the .zip file that contains the data of the exported home contains a special entry named Home.xml which describes how to place the 3D models of the home furniture (similarly to the Home entry in a .sh3d file). In this version, the Home.xml file doesn't describe walls, rooms... and these other items are integrated together as an OBJ export found in HomeStructure folder. Even if the plug-in is already able to generate XML data for this kind of objects, this way of doing required less work but will probably change in a future version.

Note that I released the first version of this plug-in under version 0.9, before releasing the version 1.0 in the coming days. I guess you'll find some "must have" suggestions or some bugs that will deserve some last modifications. The source code of the plug-in is included in the .sh3p file, and the unminified Javascript code I programmed will be available for version 1.0 release. This new project is released under the GNU General Public License, and includes some sub parts available under less restrictive licenses (thanks to the authors of JSZip, glMatrix and big.js libraries).

Hope you'll enjoy this plug-in and create plenty of HTML pages with it smile

Download links for Export to HTML5 plug-in:
Export to HTML5 plug-in 1.6 was released on 07/22/2020 with improvements of Sweet Home 3D JS 6.4, including a better drawing order of transparent surfaces, support for colored lines and fix for pinch under iOS
Export to HTML5 plug-in 1.5 was released on 05/08/2020 with improvements of Sweet Home 3D 6.1 and 6.3 + basic fix for crash happening when the plug-in is used with Mac App Store sandboxed version
Export to HTML5 plug-in 1.4 was released on 10/12/2018 for new features of Sweet Home 3D 6.0
Export to HTML5 plug-in 1.3.1 was released on 10/20/2017
Export to HTML5 plug-in 1.3 was released on 10/10/2017
Export to HTML5 plug-in 1.2 was released on 12/13/2016
Export to HTML5 plug-in 1.0.1 was released on 04/19/2016
Export to HTML5 plug-in 1.1 was released on 05/05/2016
Export to HTML5 plug-in 1.0.3 was released on 04/23/2016
Export to HTML5 plug-in 1.0.2 was released on 04/21/2016
Export to HTML5 plug-in 1.0 was released on 04/18/2016
Export to HTML5 plug-in 0.9.1 was released on 04/13/2016
Export to HTML5 plug-in 0.9 was released on 04/12/2016
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by okh at Apr 13, 2016, 2:38:04 PM
Re: Export to HTML5 plug-in
..first public version of Export to HTML5 plug-in.
Simple, elegant, easy to use. Tried it with IE 11 and Opera 36.0 under Win 8.1 32 bit. Loads quickly, Opera slightly faster and smoother. Very, very nice.
..almost all browsers except Firefox (until now) don't allow to read local files by default, for security reasons!!!
Happy to hear I am not the only one mystified by this...
..find some "must have" suggestions or some bugs that will deserve some last modifications.smile
Not really, at least not after a quick test. I guess there may be a potential for additional features, but point is that the basic platform seems to work with no issues "out of the box".

Congratulations and thanks!

ok

Posted by okh at Apr 13, 2016, 8:14:31 PM
Re: Export to HTML5 plug-in
Tried it with IE 11 and Opera 36.0 under Win 8.1 32 bit...
Yes, and I forgot, tried Android (4.4.4 KitKat) too with Opera 34 and Chrome 47. Works beautifully (even if I have yet to figure out whether I can use all the controls). ok

Posted by Puybaret at Apr 13, 2016, 9:16:55 PM
Re: Export to HTML5 plug-in
Thanks for your nice feedback smile

Releasing a first version helped me to make room for new ideas, and in the version 0.9.1 released tonight, I found a way to make the generated program consume less memory and even run faster with some browsers.
For people interested by technical details, using Javascript workers to parse OBJ files wasn't such a good idea because of the amount of data to manage and transfer back and forth, and actually, calling setTimeout to slice this parsing was enough to give some air to manage interactions with the user interface, without slowing down the program.
Under iOS, I discovered also that textured grounds weren't rendered correctly and I reduced the surface of the exported ground to 1km² which should be enough.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by okh at Apr 14, 2016, 8:02:48 AM
Re: Export to HTML5 plug-in
Tried some more - and I see that complicated models can be a challenge. But it works very well for illustrations, even on small devices, as long as the model is not too big.

This is probably a silly question (showing a total lack of interest in the Android interface), but is there a way of zooming the aerial view and moving the virtual visitor without mouse/keyboard - i.e. on small handhelds?

ok

Posted by Puybaret at Apr 14, 2016, 9:21:30 AM
Re: Export to HTML5 plug-in
is there a way of zooming the aerial view and moving the virtual visitor without mouse/keyboard
Pinch!

There's nothing to change the elevation of the visitor, but adding buttons for that should be quite easy. Just need some documentation to explain how to do it!
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by okh at Apr 14, 2016, 9:45:35 AM
Re: Export to HTML5 plug-in
Pinch!
Yes, well, I did try pinching, but cannot get it to work with either Opera or Chrome - pinching inside the canvas just rotates (and otherwise zooms the entire page). Under Win 8.1 pinching seems to zoom the page, regardless how much I try to focus inside the canvas. Maybe just me or my setup. Will try further. Either way, I suspect it is possible that I am not the only one having trouble (I hope), so buttons may be a good idea for a future release, just in case :-)

ok

Posted by swave at Apr 14, 2016, 11:21:12 AM
Re: Export to HTML5 plug-in
I'm currently looking into home automation, what hardware systems there are and what GUIs they offer. If there was a possibility to add triggers to lamps, furniture etc in SH3D that can call external scripts in the HTML export and also get notified on changes (e.g. light switches) you'd have a kick-ass home automation GUI that no other can beat :)

Posted by Puybaret at Apr 19, 2016, 12:49:28 AM
Re: Export to HTML5 plug-in
Hi,

I just released the version 1.0 of the Export to HTML5 plug-in, with a little add-on to the Free 3D models page as a surprise.
Along with the Java source code included in the plug-in file, I published the source Javascript files in the new SweetHome3DJS project and generated the JSDoc of the API if you're interested.
swave, you may access to the information of a home through this API, and even... modify a loaded home. Just retrieve the HomePreviewComponent instance returned by viewHome and have fun! For your information, the API of the Javascript classes is some kind of subset of the Java API of Sweet Home 3D, but using a script language here will help to program small additional features much faster. For the 3D view itself, the main missing feature might be an API to manage picking, but that should come soon.

Okh, I added in this release the navigationPanel parameter that lets you display the navigation arrows or completely customize them if needed. I also added the viewerControlsAdditionalHTML parameter to customize the zone below the 3D view, for example to add Forward and Backward buttons displayed in the gallery examples only under Android, where pinch isn't supported in Javascript yet!

Note that the Javascript "minified" core-min.js, geom-min.js, triangulator-min.js, viewhome-min.js and viewmodel-min.js files were renamed with a dot instead of an hyphen and navigationPanel.png was added. So be sure to clean your lib folder if you deploy this new version, and update the <script> tags that reference these files if needed.
See you soon for more information about this release smile
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by okh at Apr 19, 2016, 8:59:24 AM
Re: Export to HTML5 plug-in
..add-on to the Free 3D models page as a surprise...
Nice!
Okh, I added in this release the navigationPanel parameter that lets you display the navigation arrows or completely customize...
That should do the trick for unhelpful software.

The canvas approach really is a huge improvement to SH3D presentations in terms of simplicity and compatibility. Congratulations!

ok

Posted by Puybaret at Apr 19, 2016, 12:52:58 PM
Re: Export to HTML5 plug-in
Sorry, during my last tests of the viewer, it looks like I forgot IE 11 where it fails (under Windows, I mainly use Edge).
Therefore, I had to release the new version 1.0.1 to fix this issue. Only Javascript files were modified.
Thanks okh for reporting the issue.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by Puybaret at Apr 21, 2016, 6:01:43 PM
Re: Export to HTML5 plug-in
For your information, I just released a new version 1.0.2 that fixes various issues, mainly for developers interested to use SweetHome3DJS API.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by Puybaret at Apr 23, 2016, 8:59:47 PM
Re: Export to HTML5 plug-in
Tonight, the version 1.0.3 fixes a bug in the plug-in that could generate reduced images with a wrong color profile in the exported home. If you saw some issues on the textures of your home while viewing it in a browser (too dark images or mixed with a pink color), then you should export it again with this new version.
Otherwise, this update fixes also an issue on selection management in the Javascript code, but that sould interest you only if you started to use SweetHome3DJS API.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by Puybaret at May 5, 2016, 5:52:26 PM
Re: Export to HTML5 plug-in
The last version 1.1, announced also in this article of the blog, fixes bugs on the position of the navigation panel when the user scrolls in the window where a canvas is displayed, brings a better management of the canvas when the window is resized, and also brings the new method getClosestItemAt in HomeComponent3D class to handle picking. In the current version, all objects in a home are pickable except the transparent parts of doors or windows, allowing you to pick objects visible through window panes!

Once I found out how to run the plug-in on a headless web server (as explained here), I also decided to add a new service on sweethome3d.com that lets registered users upload their .sh3d files on the web server to view them in 3D, like in this example. This should help the ones among you who wants to show their designs without the need to have their own web server or even run the Export to HTML5 plug-in on their computer.
At the moment, this service allows .sh3d files with a maximum size of 15 MB which should be enough for small to medium designs. Don't forget to save and compress your .sh3d files with Sweet Home 3D before uploading them, to avoid useless upload traffic and to be able to upload larger designs.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by YGYL at May 7, 2016, 5:11:44 AM
Re: Export to HTML5 plug-in
1.1 very great!!!!!!!!!!!

Posted by Miker777 at May 11, 2016, 3:21:19 PM
Re: Export to HTML5 plug-in
Hi, just tried this, using mozilla firefox, and found it very easy to use, the detail in the image actually seemed slightly better. Spotted more flaws sad . Nice work Puybaret. smile

Posted by Pixelwizard at May 19, 2016, 4:59:24 AM
Re: Export to HTML5 plug-in
just for the ones with problems to load and test local files...at apachefriends.org you can find a complete webserver. in one package. you can also install as many cms you like. this will allow you also to develop some plugins for typo3, wordpress etc. and last but not least...great, great work. this plugin was the missing link to my specific project and guess it will make many, many things easier. basically i guess, if someone is able to manage it, it should be possible to create a fallback just for the reason of the device memory. raw idea is just to display four pngs with the view of model instead of the canvas. maybe the plugin can manage this in the future also.
----------------------------------------
WIN10 Pro 64bit * 16 GB RAM * AMD FX 6100 * Geforce GTX 660


Posted by Puybaret at May 19, 2016, 2:27:59 PM
Re: Export to HTML5 plug-in
Thanks for your feedback smile

it should be possible to create a fallback just for the reason of the device memory.
Pixelwizard, if you have some information about this fallback, please give it, because as far as I know, there's no way to prevent a crash when memory is missing in JavaScript at the moment.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by Pixelwizard at May 20, 2016, 5:00:27 AM
Re: Export to HTML5 plug-in
for sure i will, but actually i'm busy for the next weeks. was just a raw idea, just following a plugin for typo3 i just checking out for possible modification. but just following this idea, i thought about to identify the devices memory by a short script, then compare to the file size and memory usage. the pngs from four directions might be generated during export, basically same way when exporting plan to pdf with 3dview. once the pngs are there, th e js might be able to select automatically what to display, the model or the pictures. this will also reduce the load of files on mobile devices. i guess this might be better managed by common cms, because when i remember correctly, some of them support this by supporting responsive delivery of files more or less automatically. by the way, also for mobile devices (android) there is a webserver. is called ksweb. setup is easy, configuration might be a little bit tricky. so spent a little bit of time. but i was able to install wordpress as cms to it on my samsung galaxy tab4 with it. let me see what i can do, because this is exactly what i might need for my project. for may needs, i might be more orientated to a solution for typo3, but i will keep in mind to find a way which allows an independent solution, so that this will be hopefully one single package which could be used on any stage. to my needs, it must be finally responsive, which also means the canvas and the model needs this features. anyway, html5, javascript and css will do the job. ;)
----------------------------------------
WIN10 Pro 64bit * 16 GB RAM * AMD FX 6100 * Geforce GTX 660


Posted by lcgamboa at Jun 3, 2016, 3:28:08 AM
Re: Export to HTML5 plug-in
Hi Puybaret,

Great job with HTML export plugin!
In the future, the HTML viewer will support lighting?
The Home.xml format will be changed?
The Home.xml is a best point of start for import sweethome3d houses in others softwares. I have made a python script that read Home.xml and inport the house in blender. I use blender render and blender game engine to interact with the house because the light support. But the light definition in Home.xml don't have the light power value, it's possible to include this field in the next version of plugin?

Thank you for sweethome3d, it is the best house editor!

Posted by Puybaret at Jun 3, 2016, 10:39:56 AM
Re: Export to HTML5 plug-in
I'm glad you found some use for the Home.xml export. Do you plan to make your script available to the public? That would be a nice way to import a home in Blender with lights.

I don't know whether the HTML viewer will support some lighting, but you can already get in Home.xml file the light information you look for by changing some flags in the plug-in source code included in the sh3p file (or reusing plug-in classes in an other plug-in). The easiest way should be to remove HomeXMLFileRecorder.INCLUDE_VIEWER_DATA flag (and HomeXMLFileRecorder.REDUCE_IMAGES if you don't want images to be resized) in the getHomeRecorder method the end of the ExportHTML5PluginAction inner class of com.eteks.sweethome3d.plugin.exporthtml5.ExportHTML5Plugin. Then, rebuild the plug-in with the help of Plug-in developer's guide.

The XML format of Home.xml shouldn't change in the future, it will even become part of the updated format of Sweet Home 3D files. In the coming versions 5.x, the idea is to include the Home.xml file along with the existing Home Java serialized entry in .sh3d files + the ability to parse both entries even if they describe the same com.eteks.sweethome3d.model.Home instance. Then probably in versions 6+, the default Sweet Home 3D files will have a .sh3x extension and use a file format that will contain a Home.xml entry but no Home entry, to avoid slowing down Save operation. This transition will help users to read .sh3x files even with Sweet Home 3D version 5.3 and superior. Of course, the ability to read Home Java serialized entry included in .sh3d files will be kept to be able to read all files made with previous versions of Sweet Home 3D.
The XML writer added to Sweet Home 3D 5.3 will be very close to the one in Export to HTML5 plug-in, using the same elements and attributes syntax when its INCLUDE_VIEWER_DATA flag is not set. Why only "very close" and not "the same as"? Because the plug-in needs to simplify the exported data to match SweetHome3DJS features, i.e. its inability to read 3D models at 3DS and DAE format as well as to compute walls and rooms in 3D. Quickly said, at the moment, the plug-in is "only" able to read 3D models at OBJ+MTL format listed in Home.xml and place them at the good location. Walls, floors, ceilings, holes in the ground and 3D labels are all precomputed by the plug-in in the HomeStructure/Home.obj entry which is displayed as one 3D object by SweetHome3DJS. This structure file and exporting only in OBJ format is not needed in Sweet Home 3D itself, that's why its XML writer will not perform these operations but will keep the same XML syntax, except for the structure attribute of the home.
From the various tests I run with Blender, it seems that Blender supports better OBJ+MTL format than 3DS and DAE formats (but maybe it was improved recently). Blender is of course unable to compute in 3D the walls and rooms of a Sweet Home 3D file. So I guess that the format I chose for SweetHome3DJS is the best choice for Blender too, and you would prefer that the way 3D models and home structure are exported won't change! I'll keep that in mind and if needed I'll create an other Export to XML + OBJ plug-in. That could even become a Save option in Sweet Home 3D if this format becomes really useful for many people. Keep also in mind that DAE/Collada format is also able to store lights, so if you need only OBJ files + lights, it could be more logical to add Export to DAE format option (even if this will require more work from me).
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by okh at Jun 3, 2016, 11:33:55 AM
Re: Export to HTML5 plug-in
..In the coming versions 5.x, the idea is to include the Home.xml file along with the existing Home Java serialized entry in .sh3d files...
Does this mean the .sh3d file will contain all files needed by the export to html javascripts for the canvas? ok

Posted by lcgamboa at Jun 3, 2016, 4:02:41 PM
Re: Export to HTML5 plug-in
Of course, I will distribute the script in GLP, when a finish it. (there are some bugs to fix yet)

I asked about lighting support in HTML viewer because the webgl has support to it. There are some nice examples of webgl lighting on the web.

Looking the plugin code, I think that remove HomeXMLFileRecorder.INCLUDE_VIEWER_DATA flag, only for HomeLight in my case, will solve the problem.

About the SweetHome3DJS and SweetHome3D XML format is exactly what had thought.

I agree that SweetHome3DJS XML format (added with the lamp color and power ) plus the obj+mtl files is the best choice for blender export.

About export in DAE/Collada format for now I think you should focus on sweethome 3d. After you import the file XML+obj+mtl in blender(or other software) they can be converted to other formats.

Thank you for the help.

Posted by Puybaret at Jun 3, 2016, 7:09:29 PM
Re: Export to HTML5 plug-in
Does this mean the .sh3d file will contain all files needed by the export to html javascripts for the canvas?
It's one of my goals at the end, but that requires to port to JavaScript the classes DAELoader, Max3DSLoader for DAE/3DS support, and Wall3D, Room3D,Ground3D and other model classes to manage the structure of a home. Porting these 5000 lines of code will require probably two weeks of work and will avoid to use the Export to HTML5 plug-in, but without adding any new feature to the end user.
I wonder if it wouldn't be better to be able to add and arrange furniture in the plan first. This second task requires more work but would bring some nice features in SweetHome3DJS...
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by okh at Jun 3, 2016, 7:51:20 PM
Re: Export to HTML5 plug-in
Absolutely. But as an end goal for some time in a distant future, it would be nice if the (super great) HTML export could use standard .sh3d files. But urgent, not at all. The HTML export works very nicely as is.

Posted by Puybaret at Jun 7, 2016, 2:00:34 PM
Re: Export to HTML5 plug-in
As I received an other request similar to lcgamboa's one, I finally programmed the additional Export to XML/OBJ plug-in (see links at end of message) that proposes the Tools > Export to XML/OBJ format menu item able to generate a ZIP file that contains:
- Home.xml entry with all the data of the edited home at XML format (including furniture visible or not, walls, rooms, texts, dimensions lines, polylines...)
- HomeStructure/Home.obj that contains the home structure computed by Sweet Home 3D classes (wall, rooms, ground and 3D labels)
- 3D models only at OBJ+MTL format (models at other format will be converted)
- furniture icons, texture images and other images.

This generated ZIP file is compatible with Sweet Home 3D JS viewer (it just contains more data that the home file generated by Export to HTML5 plug-in, and will be readable with Sweet Home 3D 5.3 too, once the upcoming changes in .sh3d file format will be programmed.
The XML schema used in the Home.xml entry should be quite straightforward. Its elements and attributes match com.eteks.sweethome3d.model API (except for the classes starting by Home which is omitted, like HomeLight class which becomes light element). An exported Home instance will have an XML structure looking like this:

<home>
<furnitureVisibleProperty/>
<property/>
<environment/>
<compass/>
<observerCamera/>
<camera/>
<level/><level/>
<pieceOfFurniture/><doorOrWindow/><light/>
<wall/><wall/><wall/>
<room/><room/>
<polyline/><polyline/>
<dimensionLine/><dimensionLine/>
<label/>
</home>

At the moment, the only elements which have an id are level and wall elements because they can be referenced in other elements. Lengths are in centimeters and angles in radians. If needed, look at com.eteks.sweethome3d.plugin.exportxml.HomeXMLExporter class source code included in the plug-in or ask for more information in this forum. A more complete description of the schema will be available with next Sweet Home 3D release.

This plug-in reuses the same classes as Export to HTML5 plug-in, that's why it uses the same version number 1.1.

Hope you'll find all kind of use for your Sweet Home 3D data smile

Download links for Export to XML/OBJ plug-in:
Export to XML/OBJ plug-in 1.1 was released on 06/07/2016
Export to XML/OBJ plug-in 1.2 was released on 12/13/2016
Export to XML/OBJ plug-in 1.3 was released on 10/10/2017
----------------------------------------
Attachment Home.xml (14808 bytes) (Download count: 333) (Example of exported home at XML format)

----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by lcgamboa at Jun 7, 2016, 10:37:01 PM
Re: Export to HTML5 plug-in
Puybaret thank's for the Export to XML/OBJ plug-in!

Now I have to change my blender import script to work with the new XML schema. With the new XML the light will can be edited in Sweet Home and blender will be used only as viewer.

I published the python script to import SweetHome 3D HTML5 to blender in GitHub: SweetHome3D HTML5 to Blender importer. The script creates one object for each obj file (leaving easier editing of objects in blender), this is the the main difference to use the obj file generated by SweetHome 3D.

Posted by avamonster at Sep 15, 2016, 5:20:19 PM
Re: Export to HTML5 plug-in
Hi all,

This thing does not work in Chrome out of the box.

to run the exported ViewHome*.html in Chrome browser, you have to start chrome.exe with "--allow-file-access-from-files" commandLine option (no quotes).

Else it will just stuck on "loading model" message.

Probably it's good to add info on that to blog/manual e.t.c., or m.b. even add a message on local file access to ViewHome.html.

M.b. it's possible to somehow detect that accessing files from files is disabled right from the page script, and display corresponding message.

WBR,
AVAmonster

Posted by ersteinmal at Oct 14, 2016, 5:41:33 PM
Re: Export to HTML5 plug-in
I am sorry.

But in Opera 40.0.2308.81
The Html file start to load *.zip and stops there.

Regards Carsten

Posted by Puybaret at Oct 14, 2016, 6:15:16 PM
Re: Export to HTML5 plug-in
Just tried this version of Opera under Windows 10 and Mac OS X, and I didn't notice any issue...
Did you try with another browser? Maybe your file is very big.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by okh at Oct 14, 2016, 7:16:54 PM
Re: Export to HTML5 plug-in
Opera is also one of my test browsers, never experienced problems.

Posted by Puybaret at Dec 13, 2016, 6:17:57 PM
Re: Export to HTML5 plug-in
Hello everybody,

Here's the new versions 1.2 of Export to HTML5 and Export to XML/OBJ plug-ins.
Both plug-ins are now based on the management of the new XML entry that was added to .sh3d files in Sweet Home 3D 5.3. The JavaScript part of the Export to HTML5 plug-in now supports pinch for zoom under Android and Windows, and was optimized to draw 3D lines faster.

To let the XML entry generated by Export to XML/OBJ plug-in share the same DTD as the Home.xml entry in .sh3d files, its XML format had to evolve a little to fix some typos and other small problems:
- logitude attribute of <compass> element was corrected as longitude
- nameVisible attribute of <room> element was renamed as areaVisible
- size attribute of <textStyle> element was renamed as fontSize
- <Text> element was renamed as <text> with lowercase letters
- the default value of wallsAlpha attribute of <environment> element is now 0 instead of 1
- the default value of thickness attribute of <polyline> element is now 1 instead of 0.
I sincerely hope these changes won't bother you too much. A few attributes were missing too but that won't change the way you could have already use the XML files generated by the plug-in. The properties stored in HomeObject instances were also saved in <property> elements, and read in JavaScript if needed. Finally, the attributes named structure and exportFlags are the only additional attributes in the <home> element written by Export to XML/OBJ plug-in.

Hope you'll enjoy these improvements smile
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by rhawke at Jan 3, 2017, 12:36:49 AM
Re: Export to HTML5 plug-in
Hi Emmanuel,

Do you think at some point in the future this plugin could be enhanced to add WebVR functionality? I have tried the obj2vr app and while it looked promising, there are bugs and issues (mainly the flipped objects, minimum viewing distance and lighting). It appears like it is not being developed anymore. I also tried uploading to Sketchfab since they use WebVR but it is difficult to get the same great sky textures and lighting options as in Sweet Home 3D. The rooms just don't look as good.

This is the link to the WebVR project:
https://webvr.info/

I have recently used a few apps that have WebVR enabled and it is already at a very usable level despite the beta status.

Or are there any other recommendations on how to view homes with VR?

Thanks

Robert

Posted by DemiChron at Jan 14, 2017, 12:20:59 AM
Re: Export to HTML5 plug-in
Where can i find unminified JS code ?
thanks)

Posted by Puybaret at Jan 14, 2017, 11:41:21 PM
Re: Export to HTML5 plug-in
Rhawke, sorry, I don't have knowledge about WebVR yet, so it's difficult for me to answer.

DemiChron, source code of Sweet Home 3D JS project is available here.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by okh at Feb 18, 2017, 3:10:47 PM
Re: Export to HTML5 plug-in
Before I start updating the lib directory: Are Export to HTML5 plug-in 1.2 lib/*.js files compatible with older files (.zip and viewHome.html). Just about to export a couple of new homes, but would wish for the earlier to work as well. Or the other way around - that the existing 1.0/1.1 js files can deal with the new export.

Not a big problem, and fully understandable if not, just curious if I need to set aside some extra time to redo the old files. Will at some point anyway.

ok

Posted by Puybaret at Feb 18, 2017, 3:44:50 PM
Re: Export to HTML5 plug-in
Just replacing the old lib directory by the new one should work smile
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by okh at Feb 18, 2017, 4:25:57 PM
Re: Export to HTML5 plug-in
Thanks. We will see whether I take the chance... smile - or do the entire presentation differently. Btw. I experienced some trouble. Updating files and viewing with Opera, some of the settings (the .zip file maybe) must have been cached somewhere, because the virtual visitor location refused to change even if the files were updated on the server. Spent a frustrating 30 minutes trying to figure out why my virtual visitor was always far underground even if the files were updated. But then I tried another browser. Probably nothing you can do about that - but good to know if someone is struggeling with updating their exports. Just try another browser (or clear all cached files).

Anyway. The HTML export really is a nice tool. Just to let you know your efforts are appreciated. ok

Posted by dezik at Apr 26, 2017, 7:40:05 PM
Re: Export to HTML5 plug-in
Heya. Is it possible to add Full Screen mode for better mobile experience? Tweaking resolution in html file doesn't really help to view it perfectly.

Posted by easymodulaire at May 17, 2017, 4:01:14 PM
Re: Export to HTML5 plug-in
Hello Emmanuel, Thanks for you very nice work !
Sorry to ask this question but I find this plugin very useful so I downloded it
After adding the plugin "exporter en hmtl", I" got a a zip file and tried to open with Firefox the file "ViewHome.

Here's the error message I got :

Error: ReferenceError: viewHome is not defined

I put myself as a customer receiving his plan to see how is was, and it was not.

My laptop is pretty new, with Windows 10 pro and I use mainly Firefox. Perhaps I need another plugin or software to see it work

Thanks a lot for your help and have a very nice day.

BR

Posted by Puybaret at May 21, 2017, 2:44:20 PM
Re: Export to HTML5 plug-in
Maybe you moved or didn't include the lib folder that contains the JavaScript program required by the HTML page?
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by Marat78 at Jun 14, 2017, 11:34:13 AM
Re: Export to HTML5 plug-in
Hello!
I created HTML5 code with your plugin, uploaded to my hosting (http://free-pc.ru/3D/septic/monolit/viewHome-2.html). Now how to call this code on your Wordpress blog in the record?

Posted by Puybaret at Jun 15, 2017, 7:21:35 AM
Re: Export to HTML5 plug-in
If you look at the source code of your html file, you'll see that it consists of a few HTML5 and JavaScript tags. Searching how to integrate JavaScript and how to integrate a canvas in Wordpress should give you a solution.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by Marat78 at Jun 15, 2017, 12:35:34 PM
Re: Export to HTML5 plug-in
It will be too cumbersome to implement. Can then show this code in a frame?
And how to make the 3D object rotate with fingers on mobile devices? I do not spin.

Posted by Marat78 at Jun 22, 2017, 4:33:50 PM
Re: Export to HTML5 plug-in
On desktop PCs, the rotation is performed by the mouse. How to implement 3D object rotation on mobile devices? Http://free-pc.ru/3D/septic/kolca/viewHome-2.html

Posted by Gildaniel at Oct 9, 2017, 9:53:42 AM
Re: Export to HTML5 plug-in
Hello!
This is a great tool, thank you very much!

I have some problem in HTML-view, could you please help me
1. Choose levels box in aerial view is inactive, so I always can see only whole house, no way to see only fist floor. I've even copied all the script settings from your example at http://www.sweethome3d.com/blog/2017/09/06/sweet_home_3d_5_5.html, but no way

Inactive box: http://regard-house.ru/3dplan/test/Tutorial.html

The second problem (may be it all the one case): I cannot use for html-view .sh3d file like you do ("viewerCanvas2", "SweetHome3DExample7.sh3d"), I can use only exported zip-file (("viewerCanvas2", "SweetHome3DExample7.sh3d",)), otherwise I get "Error: ReferenceError Ground3D is not defined"

ReferenceError: http://regard-house.ru/3dplan/test/Tutorial-sh3d.html

Thank you!
Yours, Daniel

Posted by Puybaret at Oct 10, 2017, 10:19:54 PM
Re: Export to HTML5 plug-in
Until version 1.2 of the Export to HTML5 plug-in, the levels drop down list was active only in virtual visit mode on purpose.
It's not the case in the version 1.3 that was released tonight. This new version supports also rotation of objects around an horizontal axis, and other new features proposed in Sweet Home 3D 5.5.

Note that this plug-in is less useful now since it's possible to view a sh3d file directly with Sweet Home 3D JS Viewer. Both viewers use the same JavaScript code available in SweetHome3DJS project. The additional processing performed by the Export to HTML5 plug-in reduces the home data handled by the viewer by removing plan icons and reducing the textures larger than 256x256 pixels.

For those interested, I also updated Export to XML/OBJ plug-in to version 1.3.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by fsaintl at Oct 12, 2017, 4:24:51 PM
Re: Export to HTML5 plug-in
I tried to install this Plug-in and then restarted SweetHome, but the option never appeared under the TOOL menu. I tried to re-install, and got the message that it was already installed. If I go to "About Sweet Home 3D" and click on "Libraries", it is not listed in the Plug-Ins. I downloaded version 1.3 of the tool, with Sweet home 5.3.1 with OSX 10.11.6 . It's strange, there are no error messages, and it completes the install successfully with the message about it being available after the next launch. I'm using the Viewer for now, but thought you might want to know.

Posted by Puybaret at Oct 14, 2017, 6:24:48 PM
Re: Export to HTML5 plug-in
The version 1.3 of the plug-in requires Sweet Home 3D 5.5.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by Puybaret at Oct 20, 2017, 5:36:18 PM
Re: Export to HTML5 plug-in
I just released the version 1.3.1 of Export to HTML5 plug-in and the version 5.5.2 of Sweet Home 3D JS Viewer to fix an issue that could prevent viewing SH3D files containing 3DS or DAE files.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by okh at Nov 23, 2017, 8:13:03 AM
Re: Export to HTML5 plug-in
..almost all browsers except Firefox (until now) don't allow to read local files by default, for security reasons!!!
In case anyone wondered, off-line view still works with the apparently re-written Firefox Quantum. Alas, I have yet to find any other browser (except Seamonkey) that will display a test website with the html5 plugin. ok

Posted by dubbyconqueror at Nov 23, 2017, 11:20:47 AM
Re: Export to HTML5 plug-in
Thank you so much for providing the HTML5 plugin! Would you mind uploading the unminified sources to Github/Gitlab/Bitbucket etc.? That way other people might contribute to the development more easily.

Posted by Puybaret at Nov 23, 2017, 1:05:04 PM
Re: Export to HTML5 plug-in
I'm happy you like it smile
You can generate the unminified files with the generatedLibraries Ant target of the build.xml file available in the source code of SweetHome3DJS. I won't copy these files in another repository myself, because this would require to update it too and managing the release of each version in one place is already a quite heavy task.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by qythyx at Nov 27, 2017, 12:29:16 PM
Re: Export to HTML5 plug-in
Hi,

I tried to use your Blender import script, but it failed. The error was that it couldn't find a file. I'm guessing it was because the file has a space in the name. The error message said it couldn't find "Grand%20Piano.dae.obj". That file does exist, but %20 is a space instead.

Any ideas?

Posted by Puybaret at Nov 28, 2017, 12:47:39 PM
Re: Export to HTML5 plug-in
I'm not the author of the Blender import script, but when you know that the 3D model of a piece of furniture is stored in its model attribute, it shouldn't be difficult to find the place in the script where the path of a model is used and adapt its urlencoded notation to the one required by Blender. Then don't forge to contribute your fix in the https://github.com/lcgamboa/sh3dtoblender project smile
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by omrico at Dec 26, 2017, 9:04:10 PM
Re: Export to HTML5 plug-in
Thank you very much for this remarkable feature!

I was wondering: After integrating the component in my website I am able to see the house in "Aerial View" but the view is centered to the viewer.
Is there any way to programmatically change the position of the "camera" so it won't be located above the center of the house? confused

For example when using the SH3D software, I can click on an object and it gets the focus. This helps me to better look at the surroundings of this object.

Thank you in advance!

Posted by Puybaret at Dec 27, 2017, 11:52:19 AM
Re: Export to HTML5 plug-in
Selecting an object of the displayed home should have the same effect as in Sweet Home 3D. From the HomePreviewComponent returned by viewHome, you'll be able to access to the displayed Home instance, which lets you access to all its objects and select the ones you want with its setSelectedItems method.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by LBCED at Jan 3, 2018, 11:19:58 AM
Re: Export to HTML5 plug-in
Hello,
I try to use it. With Firefox works fine, otherwise with Chrome I have the following error:
"Failed to load <nome file> cross origin requests view model.min.is:20
are only supported for protocol schemes: http, data, chrome, chrome-extension, https"


What I can do ?

Posted by Puybaret at Jan 3, 2018, 2:16:28 PM
Re: Export to HTML5 plug-in
You probably tried on a local file, not on a http web server, and Chrome doesn't accept to load local files which depends on the viewed html file. If you host your files on a web server it will work, and if you absolutely want to try your file locally with Chrome, see the solutions proposed here.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by omrico at Jan 4, 2018, 7:06:36 PM
Re: Export to HTML5 plug-in
Selecting an object of the displayed home should have the same effect as in Sweet Home 3D. From the HomePreviewComponent returned by viewHome, you'll be able to access to the displayed Home instance, which lets you access to all its objects and select the ones you want with its setSelectedItems method.

I tried what you said but didn't succeed with changing the camera. I fetched all the selected items via
getSelectableViewableItems()
function and randomly chose an object from the array.
Then used
setSelectedItems(selectedItems)
function but the camera didn't change the angle and position. What am I missing here?
Thank you.

Posted by Puybaret at Jan 4, 2018, 7:30:58 PM
Re: Export to HTML5 plug-in
Sorry, I forgot to mention that you should call setAerialViewCenteredOnSelectionEnabled(true) on user preferences available in HomePreviewComponent. Hope it will work this time...
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by omrico at Jan 4, 2018, 8:57:47 PM
Re: Export to HTML5 plug-in
It worked, thank you!

Posted by Gildaniel at May 8, 2018, 3:43:17 PM
Re: Export to HTML5 plug-in
Hello!

Could you please help me: is it possible to insert some code into html in order iframe with 3d-model opens in new browser tab in full screen mode?

My code:
<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>

<div class="logo"style="text-align: center">
<a href="/"><img src="/bitrix/templates/regard/img/regard.svg"></a>
</div>
<br>
<br>



<H1 style="text-align: center; text-decoration:underline; cursor: pointer"
onclick='viewHomeInOverlay("House 23.sh3d",
{roundsPerMinute: 1,
widthByHeightRatio: 4/3,
navigationPanel: "none",
aerialViewButtonText: "Aerial view",
virtualVisitButtonText: "Virtual visit",
level: "2 floor",
selectableLevels: ["1 floor", "2 floor", "Roof"],
activateCameraSwitchKey: true,
viewerControlsAdditionalHTML: "",
readingHomeText: "Loading",
readingModelText: "House",
noWebGLSupportError: "No WebGL support"
})'
>TAP HERE TO OPEN 3D-MODEL IN NEW TAB</H1>



Thank you!

Posted by Puybaret at Oct 12, 2018, 12:23:18 PM
Re: Export to HTML5 plug-in
I just released the version 1.4 of Export to HTML5 plug-in to support the new features of Sweet Home 3D 6.0, even if Sweet Home 3D JS Viewer 6.0 should make this plug-in less useful (actually, it's still useful if you want to reduce the SH3D file to render).

New features in the 3D view are shown in the following scene, mainly:
- polylines and blueprint at ground can be displayed in 3D,
- texts can be written on more than one line with alignment,
- transformations can be applied on 3D models like doors, windows and a new mannequin
- textures can be shifted along their width and height, and X offset on sky texture is used to rotate it around the azimuth.

Of course, all these features are still accessible in JavaScript through the updated API to let you read or change the data you want.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by ReaperSoon at Jan 7, 2019, 4:34:07 AM
Re: Export to HTML5 plug-in
Hi everyone,

For whose want to use the exported house using this plugin in wordpress I developed a plugin for wordpress that is really easy to use : https://fr.wordpress.org/plugins/embed-sweethome3d

I will update it to add for flexibility in future.

Regarde,
Steve

Posted by ReaperSoon at Jan 25, 2019, 9:57:15 AM
Re: Export to HTML5 plug-in
Hi, I need to disable the automatic scroll to the canvas, but your JS sources are minified and I cannot find the scroll function.
How to disable it ?

Thanks

Posted by Puybaret at Jan 25, 2019, 10:06:42 AM
Re: Export to HTML5 plug-in
Source code of SweetHome3DJS project can be found in the archive SweetHome3DJS-6.1-src.zip and in SVN repository.
I hoped that stopPropagation calls on key events in HomeComponent3D.js would be enough, but in some browsers, this trick is not enough.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by ReaperSoon at Jan 25, 2019, 10:45:18 AM
Re: Export to HTML5 plug-in
Thanks for the src!
But it nos scrolls with an event. It just scollTo the canvas when I open my page. My sh3d is embed in the middle of my page and when I open it, the scroll is directly in the middle of the page centered to the canvas.
Is it a wanted feature ?

Thanks

Posted by ReaperSoon at Jan 25, 2019, 11:01:16 AM
Re: Export to HTML5 plug-in
Ok I found. I removed this line : https://sourceforge.net/p/sweethome3d/code/HE...3DJS/src/viewHome.js#l642

The focus was auto scrolling to the element.

Thanks

Posted by Puybaret at Jan 25, 2019, 11:51:36 AM
Re: Export to HTML5 plug-in
Thanks, it explains why I had the same issue in that page.
I thought you were speaking about unwanted scrolling that may happen when the 3D view is displayed in an overlay on long pages and you press page up or down keys.

Completely removing focus might not be the best idea. Maybe it should request focus only if the 3D view is at screen.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by AlexHattingh at Feb 20, 2019, 1:48:40 PM
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>

Posted by thelongpants at May 13, 2019, 8:16:50 PM
Re: Export to HTML5 plug-in
Hi Emmanuel, community,

First: A big thanks to Emmanual for this splendid piece of software! I'm really happy about this opportunity to (easily and free) visualize my thoughts on a home makover.. :-)

My question is: Can anyone help me, or is there any manual to access the js? I'm trying to use/access the 'viewHome' within Chrome console, to play around with camera's and layers (and use this to have some preset buttons, in future).
I'm a little capable of understanding javascript, when I use:
console.log(homeUrl); --> I see the name of my home (as set earlier in the HTML generated)

But how can I access 'viewHome' to have the 'getHome()' returned (by HomePreviewComponent, of course...)

Any example available?

Thanks!

Posted by Puybaret at May 14, 2019, 9:30:32 AM
Re: Export to HTML5 plug-in
The JavaScript code of the viewer releases available in the https://sourceforge.net/projects/sweethome3d/files/SweetHome3D-viewer/ folder is minified, so hardly readable and modifiable.
The readable source code is available in the sibling folder https://sourceforge.net/projects/sweethome3d/files/SweetHome3DJS-source/
If you want to modify it, be sure to read the README.TXT file included in the source code to install the required tools. The default Ant target of the project will generate a new version with updated minified code.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by survivalshelters at Sep 9, 2019, 4:28:34 AM
Re: Export to HTML5 plug-in
Would you mind making a video tutorial on this? I have the HTML5 plug-in and I am able to get the zipped folder onto my desktop. But I really don't know what to do with it from there. Thank you!

- Andrew

Posted by Puybaret at Sep 9, 2019, 11:50:12 PM
Re: Export to HTML5 plug-in
Thanks for the suggestion, but I’m not sure what the video should speak about or if it wouldn’t be too long and boring, because it should explain how to view the export locally with options for various browsers (which regularly change security options), and it depends where you want to host it online.
If you don’t know what to do with the result of this plugin, maybe you should rather test the Exported homes manager which provides the same thing with you file available on sweethome3d.com at the end.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by Gildaniel at Oct 17, 2019, 1:56:09 PM
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>


<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</H1>
</body>

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

Posted by Puybaret at Oct 18, 2019, 5:35:17 PM
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");
if (windowWidth < windowHeight * widthByHeightRatio) {
canvas.width = 0.9 * windowWidth;
canvas.height = 0.9 * windowWidth / widthByHeightRatio;
} else {
canvas.height = 0.9 * windowHeight;
canvas.width = 0.9 * windowHeight * widthByHeightRatio;
}
to:
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 developer

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>

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

Posted by Puybaret at Oct 31, 2019, 11:05:19 AM
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 developer

Posted by Gildaniel at Nov 1, 2019, 8:03:00 AM
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.

Yours, Daniel

Posted by medconsulting at Nov 21, 2019, 4:37:33 PM
Re: Export to HTML5 plug-in
Clicking on the Menu item in Tools in SH3D v6.2.1 (bought in Apple App Store) on MacOS 10.14.6 crashes SH3D:

Process: SweetHome3D [35633]
Path: /Applications/Sweet Home 3D.app/Contents/MacOS/SweetHome3D
Identifier: com.eteks.sweethome3d.SweetHome3D
Version: 6.2.1 (6210)
App Item ID: 669289700
App External ID: 831966744
Code Type: X86-64 (Native)
Parent Process: ??? [1]
Responsible: SweetHome3D [35633]
User ID: 501

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


Time Awake Since Boot: 22000 seconds

System Integrity Protection: enabled

Crashed Thread: 24 Dispatch queue: com.apple.root.default-qos

Exception Type: EXC_BAD_ACCESS (SIGABRT)
Exception Codes: KERN_INVALID_ADDRESS at 0x0000000000000140
Exception Note: EXC_CORPSE_NOTIFY

VM Regions Near 0x140:
-->
__TEXT 000000010e603000-000000010e604000 [ 4K] r-x/rwx SM=COW /Applications/Sweet Home 3D.app/Contents/MacOS/SweetHome3D

Application Specific Information:
abort() called

Thread 0:: AppKit Thread Dispatch queue: com.apple.main-thread
0 libsystem_kernel.dylib 0x00007fff5cc6c22a mach_msg_trap + 10
1 libsystem_kernel.dylib 0x00007fff5cc6c76c mach_msg + 60
2 com.apple.CoreFoundation 0x00007fff30bb099e __CFRunLoopServiceMachPort + 328
3 com.apple.CoreFoundation 0x00007fff30baff0c __CFRunLoopRun + 1612
4 com.apple.CoreFoundation 0x00007fff30baf66e CFRunLoopRunSpecific + 455
5 com.apple.ViewBridge 0x00007fff586936c1 __invokeRunLoopInModeForDuration_block_invoke_2 + 25
6 com.apple.ViewBridge 0x00007fff5869361b invokeRunLoopInModeForDuration + 504
7 com.apple.ViewBridge 0x00007fff586933f1 __29-[NSCFRunLoopSemaphore wait:]_block_invoke_2 + 127
8 com.apple.ViewBridge 0x00007fff58693318 __29-[NSCFRunLoopSemaphore wait:]_block_invoke + 308
9 com.apple.ViewBridge 0x00007fff58692ee2 +[NSCFRunLoopSemaphore _observe:whilePerforming:] + 606
10 com.apple.ViewBridge 0x00007fff586929fd -[NSCFRunLoopSemaphore wait:] + 437
11 com.apple.ViewBridge 0x00007fff586920d1 -[NSCFRunLoopSemaphore wait] + 38
12 com.apple.AppKit 0x00007fff2ebddd91 -[NSVBSavePanel advanceToRunPhaseIfNeededLayerCentric] + 334
13 com.apple.AppKit 0x00007fff2e4f77ea -[NSVBSavePanel runModal] + 70
14 com.apple.AppKit 0x00007fff2e4f766f -[NSVBSavePanel runModalForDirectory:file:types:] + 168
15 libawt_lwawt.dylib 0x0000000113d46044 -[CFileDialog safeSaveOrLoad] + 391
16 com.apple.Foundation 0x00007fff32ea9302 __NSThreadPerformPerform + 328
17 com.apple.CoreFoundation 0x00007fff30bcce33 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 17
18 com.apple.CoreFoundation 0x00007fff30bccdd9 __CFRunLoopDoSource0 + 108
19 com.apple.CoreFoundation 0x00007fff30bb079b __CFRunLoopDoSources0 + 195
20 com.apple.CoreFoundation 0x00007fff30bafd65 __CFRunLoopRun + 1189
21 com.apple.CoreFoundation 0x00007fff30baf66e CFRunLoopRunSpecific + 455
22 com.apple.HIToolbox 0x00007fff2fe0e1ab RunCurrentEventLoopInMode + 292
23 com.apple.HIToolbox 0x00007fff2fe0dee5 ReceiveNextEventCommon + 603
24 com.apple.HIToolbox 0x00007fff2fe0dc76 _BlockUntilNextEventMatchingListInModeWithFilter + 64
25 com.apple.AppKit 0x00007fff2e1a677d _DPSNextEvent + 1135
26 com.apple.AppKit 0x00007fff2e1a546b -[NSApplication(NSEvent) _nextEventMatchingEventMask:untilDate:inMode:dequeue:] + 1361
27 libosxapp.dylib 0x0000000113df1328 -[NSApplicationAWT nextEventMatchingMask:untilDate:inMode:dequeue:] + 124
28 com.apple.AppKit 0x00007fff2e19f588 -[NSApplication run] + 699
29 libosxapp.dylib 0x0000000113df0f72 +[NSApplicationAWT runAWTLoopWithApp:] + 156
30 libawt_lwawt.dylib 0x0000000113d750bf -[AWTStarter starter:] + 905
31 com.apple.Foundation 0x00007fff32ea9302 __NSThreadPerformPerform + 328
32 com.apple.CoreFoundation 0x00007fff30bcce33 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ + 17
33 com.apple.CoreFoundation 0x00007fff30bccdd9 __CFRunLoopDoSource0 + 108
34 com.apple.CoreFoundation 0x00007fff30bb079b __CFRunLoopDoSources0 + 195
35 com.apple.CoreFoundation 0x00007fff30bafd65 __CFRunLoopRun + 1189
36 com.apple.CoreFoundation 0x00007fff30baf66e CFRunLoopRunSpecific + 455
37 libjli.dylib 0x000000010e6ce8fe CreateExecutionEnvironment + 871
38 libjli.dylib 0x000000010e6ca4cc JLI_Launch + 1952
39 libpackager.dylib 0x000000010e68e4c7 JavaLibrary::JavaVMCreate(unsigned long, char**) + 183
40 libpackager.dylib 0x000000010e68bdb1 JavaVirtualMachine::StartJVM() + 3457
41 libpackager.dylib 0x000000010e68af60 RunVM() + 16
42 libpackager.dylib 0x000000010e69881f start_launcher + 1791
43 com.eteks.sweethome3d.SweetHome3D 0x000000010e603cd9 main + 217
44 com.eteks.sweethome3d.SweetHome3D 0x000000010e603bf4 start + 52
[…]

Posted by Puybaret at Nov 25, 2019, 11:21:21 AM
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 developer

Posted by Jorge86 at Apr 15, 2020, 4:52:36 PM
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?

Posted by enkonyito at Apr 16, 2020, 10:45:31 PM
Re: Export to HTML5 plug-in
Can the HTML5 viewer be compatible with equirectangular images ?

Posted by Puybaret at Apr 17, 2020, 12:08:41 AM
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 developer

Posted by enkonyito at Apr 17, 2020, 5:57:23 PM
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)?

Yes I wonder if the online 3D viewer would be able to show the panorama from the images created in Sweet Home 3D (spherical lens).
If there is a solution to see these panoramas directly in the 3D view of Sweet Home 3D with a fully spherical sky, why not?

Posted by kelleychambers at Apr 29, 2020, 6:30:25 AM
Re: Export to HTML5 plug-in
Is anyone having crashing issues? I'm using the Mac App Store version with the highly out of date plugin which I think is causing the crash. Every single time that I export to HTML, the freaking app crashes. Rebooting doesn't help. Renaming the file and opening doesn't do anything. I've GOT to get this exported for my shed builder for a custom quote. Any one know what I could do to keep this bloody thing from crashing? Crash report here: https://pastebin.com/bvYpLvWw

Posted by Puybaret at Apr 29, 2020, 9:50:21 AM
Re: Export to HTML5 plug-in
6 posts above in this thread, medconsulting had the same problem and I gave a solution.

This must be due to sandbox restrictions in Mac App Store applications. I recently saw the same issue in the YafaRay plug-in where I programmed a different way to save a file. It should also work for the Export to HTML5 plug-in. I'll post an update soon.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by rrraf at May 5, 2020, 1:11:51 AM
confused   Re: Export to HTML5 plug-in
Hi,

Is there a way to force the "virtual Visit" as the default view (as opposed to the aerial view) ? Sorry if the information is already somewhere, i couldn't find anything.

Thanks for your help and big thanks to the creator of this plugin.

rrraf

Posted by kelleychambers at May 5, 2020, 8:24:26 AM
shock   Re: Export to HTML5 plug-in
Thank you for the reply and while that may be A SOLUTION it's not THE SOLUTION. I'm having the exact same issue for both versions; the MAS and the Open Source version. Now, I'm getting THIS bloody error and I'm about to pull my hair out. I need to get this plan to the construction crew!!!!

PS - And before y'all go blasting me about this being open source software and freely downloadable and I shouldn't get irritated, well, I donate regularly and have purchased the MAS version in an effort to help the project and I really need this software to work as expected.

Screenshot: https://www.dropbox.com/s/wb5djj784ipe1wz/Scr...05-05%2003.19.54.png?dl=0

Posted by UbuntuBirdy at May 5, 2020, 8:29:53 AM
Re: Export to HTML5 plug-in
PS - And before y'all go blasting me about this being open source software and freely downloadable and I shouldn't get irritated, well, I donate regularly and have purchased the MAS version in an effort to help the project and I really need this software to work as expected.

And if you donate today to the WHO, tomorrow we all have the vaccine against corona...

I can understand you, such problems are annoying. But if it were that easy, you wouldn't have the problem at all.
----------------------------------------
Pascal

SH3D 6.3 / Ubuntu 20.04 (Mainline-Kernel) / Radeon RX580 / Ryzen 7 1800x

Posted by kelleychambers at May 8, 2020, 12:10:40 AM
Re: Export to HTML5 plug-in
And if you donate today to the WHO, tomorrow we all have the vaccine against corona...

I can understand you, such problems are annoying. But if it were that easy, you wouldn't have the problem at all.



And if you donate today to the WHO, tomorrow we all have the vaccine against corona...

I can understand you, such problems are annoying. But if it were that easy, you wouldn't have the problem at all.


That's hardly the same analogy; one is a worldwide pandemic that no one outside the Chinese saw coming and the other is a bloody app that CAN BE and SHOULD HAVE been fixed years ago. That many people have PAID FOR via the Mac App Store and have lived with the "known issues" way longer than they should have. An update to this plugin hasn't happened in three freaking years! It should have baked it into the software years ago but for some unbeknownst reason the dev refuses to do so.

I don't use this software to just play with like a lot of the people here. I'm using it professionally and like any other professional app I use, I pay for it. When something is paid for, it's a reasonable expectation that bugs will be fixed in a fair amount of time. Three years without an update to a plug-in that's had many reported issues is not reasonable. To blame it on Apple's App Store for their restrictions isn't reasonable either because the dev(s) submitted SH3D KNOWING the limitation(s) FULL WELL going in. To say, "Hey, use this library/plugin/et al instead..." is just out-and-out laziness. FIX the bloody thing! It's not an unreasonable expectation and it's LONG past overdue.

Posted by hansmex at May 8, 2020, 1:00:47 PM
Re: Export to HTML5 plug-in
You paid €15 euros, remember.
You shout as if you paid €1500!

There's a free version as well, same functionality. Nobody forced you to spend that money.

H
----------------------------------------
Dual boot - AMD FX6300 6-core, 16GB ram
Windows 10 Pro, SH3D 6.2 with 8 GB memory allowance
Ubuntu 18.04, SH3D 6.2 with 2 GB memory allowance

Posted by Puybaret at May 8, 2020, 1:49:49 PM
Re: Export to HTML5 plug-in
Please, let’s calm down.

Kelleychambers, the version 1.4 of the plug-in was released 17 months ago and certainly not 3 years ago.
If you could explain why in a professional use, you prefer to use the plug-in rather than your SH3D files with Sweet Home 3D JS viewer, maybe I could learn something interesting.
By the way, the bug you encountered happens only with the sandboxed version of the Mac App Store from macOS 10.14. Using the free version is an other way to circumvent this issue. Once again, don’t blame me if Apple decides to make it more and more difficult for developers at each release of their system.

@rrraf
If you want by default the virtual visit, simply export your file while you’re in virtual visit mode.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by Puybaret at May 8, 2020, 5:05:12 PM
Re: Export to HTML5 plug-in
I released the version 1.5 of Export to HTML5 plug-in to include features and fixes which appeared in Sweet Home 3D JS version 6.1 and 6.3.
It includes also a bug fix that prevents crashes under macOS 10.14+ when the plug-in is used with the sandboxed version distributed in the Mac App Store. In that environment, the only places where you'll be able to save the generated file are the /Users/user/Library/Containers/com.eteks.sweethome3d.SweetHome3D/Data and /Users/user/Library/Containers/com.eteks.sweethome3d.SweetHome3D/Data/Documents folders (where user is your login). You may create and use the subfolders of your choice in the folder Documents too, but it won't work anywhere else.
It's probably a limitation that Apple decided to add to protect users from plug-ins distributed outside of the Mac App Store and uncontrolled by its services.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by kelleychambers at May 9, 2020, 1:48:36 AM
Re: Export to HTML5 plug-in
I
It includes also a bug fix that prevents crashes under macOS 10.14+ when the plug-in is used with the sandboxed version distributed in the Mac App Store.


Thank you for providing an update although, under 10.14.6 (MacOS), it's still beach balling, lagging and crashing. Can't even start a new file without the app stalling/beachballing then crashing. Happens under the SourceForge and the Mac App Store versions. Want my logs?

Posted by JoeSherer4 at May 11, 2020, 10:10:57 PM
Re: Export to HTML5 plug-in
Quite strangely, the main difficulty for you at the beginning might be to find how to test these HTML files on your computer, because years after years, almost all browsers except Firefox (until now) don't allow to read local files by default, for security reasons!!! Of course, deploying the html files on a web server or removing security on local files will work, so be patient, success is never too far...



Yes, I cannot figure out how to use this to create an .html file with my SH3D model. I created the .zip file and have the lib/ folder, viewHome.html and viewHomeInOverlay.html.

I can't find anything to read or any way to turn these into a file that is useable by my WordPress website.

Please help!

Thanks

Posted by Gildaniel at May 12, 2020, 8:54:56 AM
Re: Export to HTML5 plug-in
Joe, answered to you mail.
Using 3DJSViewer instead, you do not need any convertions of your sh3d

https://sourceforge.net/projects/sweethome3d/...JSViewer-6.3.zip/download

Posted by UbuntuBirdy at May 12, 2020, 1:36:32 PM
Re: Export to HTML5 plug-in
Hey Joe!

Perhaps this one can solve your problem: https://wordpress.org/plugins/embed-sweethome3d/
----------------------------------------
Pascal

SH3D 6.3 / Ubuntu 20.04 (Mainline-Kernel) / Radeon RX580 / Ryzen 7 1800x

Posted by JoeSherer4 at May 12, 2020, 7:30:29 PM
Re: Export to HTML5 plug-in
Pascal,

Thanks for the suggestion. I had already tried that, and had two issues.

First, I was hoping for a url to link to instead of short code. For example, Daniel's model (https://woodmouse.ru/takedom/us/2i.html) shows up perfectly with the nice choice of aerial and virtual visitor views, and I thought that should be easy. (NOTHING's easy!!!)

Second, when I tried the embed-sweethome3d plugin and inserted the short code, I got the message: "Error: ReferenceError Ground3D is not defined" at run time.

I now have also tried the SweetHome3DJSViewer-6.3 but can't get that to do anything for me either. I admit I'm lost at Step 4 of the ReadMe instructions. And not optimistic that I can do Steps 5 and 6 either.

I'm now using the Exported Homes Manager (http://www.sweethome3d.com/exportHomes.jsp) but my users get lost in SweetHome rather than staying focused on the models I want them to see in just a plain frame.

Posted by UbuntuBirdy at May 12, 2020, 7:43:02 PM
Re: Export to HTML5 plug-in
I'm so sorry to tell you, but you need some basic HTML knowledge (or someone who's willing to do it for you) to do this. It's absolutely not complicated, but you have to read some basic tutorials or look for some how-to clips on youtube.
----------------------------------------
Pascal

SH3D 6.3 / Ubuntu 20.04 (Mainline-Kernel) / Radeon RX580 / Ryzen 7 1800x

Posted by JoeSherer4 at May 12, 2020, 8:13:02 PM
Re: Export to HTML5 plug-in
Daniel,

Thank you very much for your reply. However, I tried using the SweetHome3DJSViewer-6.3 but can't get that to do anything for me. I admit I'm lost at Step 4 of the ReadMe instructions. And not optimistic that I can do Steps 5 and 6 either.

4. Edit the "SweetHome3DJSViewer.html" or "SweetHome3DJSViewerInOverlay.html" file
and replace the "default.sh3d" viewed document by the file name of your SH3D file.
for example, if the URL of your SH3D file is "myhome.sh3d",
you should obtain the following line in "SweetHome3DJSViewer.html":
var homeUrl = "myhome.sh3d";
and the following line in "SweetHome3DJSViewerInOverlay.html":
<button onclick='viewHomeInOverlay("myhome.sh3d",

I know Puybaret speaks French and you speak Russian, so I REALLY appreciate staying with my limited English (and limited coding skills). I don't know where/what "you should obtain the following line" means. My model name is Origin1900.sh3d so I tried replacing SweetHome3DJSViewer.html with Origin1900.html. But that's not right, and I have no more ideas what to do. Sorry I am so bad at this, but I really want it to work, and feel I am pretty close.

And when I used your model (https://woodmouse.ru/takedom/us/2i.html) it shows up perfectly with the nice choice of aerial and virtual visitor views, and in a nice clean plain frame, with no SweetHome3D menus or distractions.

Thanks for any ideas, to either get the 3DJSViewer to work or how to convert my .sh3d files/models to web pages like you did.

Thanks!

Joe



Thanks for the suggestion. I had already tried that, and had two issues.

First, I was hoping for a url to link to instead of short code. For example, Daniel's model (https://woodmouse.ru/takedom/us/2i.html) shows up perfectly with the nice choice of aerial and virtual visitor views, and I thought that should be easy. (NOTHING's easy!!!)

Second, when I tried the embed-sweethome3d plugin and inserted the short code, I got the message: "Error: ReferenceError Ground3D is not defined" at run time.

I now have also tried
I'm now using the Exported Homes Manager (http://www.sweethome3d.com/exportHomes.jsp) but my users get lost in SweetHome rather than staying focused on the models I want them to see in just a plain frame.

Posted by JoeSherer4 at May 12, 2020, 8:15:09 PM
Re: Export to HTML5 plug-in
Daniel,

Thank you very much for your reply. However, I tried using the SweetHome3DJSViewer-6.3 but can't get that to do anything for me. I admit I'm lost at Step 4 of the ReadMe instructions. And not optimistic that I can do Steps 5 and 6 either.

4. Edit the "SweetHome3DJSViewer.html" or "SweetHome3DJSViewerInOverlay.html" file
and replace the "default.sh3d" viewed document by the file name of your SH3D file.
for example, if the URL of your SH3D file is "myhome.sh3d",
you should obtain the following line in "SweetHome3DJSViewer.html":
var homeUrl = "myhome.sh3d";
and the following line in "SweetHome3DJSViewerInOverlay.html":
<button onclick='viewHomeInOverlay("myhome.sh3d",

I know Puybaret speaks French and you speak Russian, so I REALLY appreciate staying with my limited English (and limited coding skills). I don't know where/what "you should obtain the following line" means. My model name is Origin1900.sh3d so I tried replacing SweetHome3DJSViewer.html with Origin1900.html. But that's not right, and I have no more ideas what to do. Sorry I am so bad at this, but I really want it to work, and feel I am pretty close.

And when I used your model (https://woodmouse.ru/takedom/us/2i.html) it shows up perfectly with the nice choice of aerial and virtual visitor views, and in a nice clean plain frame, with no SweetHome3D menus or distractions.

Thanks for any ideas, to either get the 3DJSViewer to work or how to convert my .sh3d files/models to web pages like you did.

Thanks!

Joe

Posted by UbuntuBirdy at May 12, 2020, 8:33:41 PM
Re: Export to HTML5 plug-in
First let's test if the script works for you: rename your Origin1900.sh3d to default.sh3d and then open SweetHome3DJSViewer.html in your browser.
If this works, we can guide you through step 4,5 and 6.
----------------------------------------
Pascal

SH3D 6.3 / Ubuntu 20.04 (Mainline-Kernel) / Radeon RX580 / Ryzen 7 1800x

Posted by JoeSherer4 at May 12, 2020, 9:46:50 PM
Re: Export to HTML5 plug-in
Pascal,

Thank you so much for trying to help me! I'm a pilot and just watched a video of a passenger in an airplane get instructions how to land the plane from Air Traffic Control after the pilot died shortly after take-off. He made, and so can we!

There is already a file named default.sh3d that opens up a small model when double clicking, but did not open up when double clicking on SweetHome3DJSViewer.html .

I renamed the default.sh3d to olddefault.sh3d, then renamed Origin1900.sh3d to default.sh3d (all files are in the SweetHome3DJSViewer-6.3 folder).

When I double click the "new" default.sh3d my model opens up fine. When I double click on SweetHome3DJSViewer I get the message: "Error: Error 0 while requesting default.sh3d"

Thanks, I've got plenty of fuel and the skies are clear.

Joe

Posted by UbuntuBirdy at May 12, 2020, 9:54:49 PM
Re: Export to HTML5 plug-in
Which browser are you using?
----------------------------------------
Pascal

SH3D 6.3 / Ubuntu 20.04 (Mainline-Kernel) / Radeon RX580 / Ryzen 7 1800x

Posted by JoeSherer4 at May 12, 2020, 10:32:57 PM
Re: Export to HTML5 plug-in
Chrome Version 81.0.4044.138

Posted by UbuntuBirdy at May 12, 2020, 10:42:49 PM
Re: Export to HTML5 plug-in
If your OS is Windows try:

  • Close down your Chrome browser (make sure you close all instances if you have multiple windows open)
  • Go to Run and type the following command: chrome.exe --allow-file-access-from-file
  • Hit enter

For Mac users:

  • Run Terminal.app Type "open /Applications/Google\ Chrome.app --args --allow-file-access-from-file", no quotes.

This allows access to local files. But I'm not sure if the error is caused because this is disabled...
----------------------------------------
Pascal

SH3D 6.3 / Ubuntu 20.04 (Mainline-Kernel) / Radeon RX580 / Ryzen 7 1800x

Posted by JoeSherer4 at May 12, 2020, 11:12:07 PM
Re: Export to HTML5 plug-in
I'm on a Mac and ran Terminal with the phrase: open /Applications/Google\ Chrome.app --args --allow-file-access-from-file

I did it both before and after closing Chrome.

When then double clicking on SweetHome3DJSViewer.html I get the same message: Error: Error 0 while requesting default.sh3d

Posted by Gildaniel at May 13, 2020, 5:19:27 AM
Re: Export to HTML5 plug-in
Joe, just download and use file https://woodmouse.ru/test/honomobo.html instead of SweetHome3DJSViewer.html, it scales your sh3d to browser window.

Before make sure you have appropriate js files unpacked from SweetHome3DJSViewer archive to your ftp folder



That's all you need to make it work

Posted by Gildaniel at May 13, 2020, 5:26:22 AM
Re: Export to HTML5 plug-in
Here are your files placed on ftp

Posted by Gildaniel at May 13, 2020, 6:25:31 AM
Re: Export to HTML5 plug-in
To show another file with this this html, you need to change not only html name, but also name inside the html, using any text editor



Posted by alexsmol32 at May 23, 2020, 11:56:21 PM
Re: Export to HTML5 plug-in
Hi, everybody!
1. I'm trying to use SweetHome3DJSViewer with default all and find error. So i truing to use suggestion about chrome reading from file and it is still error 0 while requesting default.sh3d
2. Also i trying to use honomobo.html with presented recommendation and the result is same error.
3. At last i trying to use export tools from sweet home and after unzipping file i use viewhome and find Error: Error End of data reached (data length = 0, asked index = 4). Corrupted zip ?
for all of this i had try to use in local machine not on web? because some times it is useful to send files for local using

Posted by Gildaniel at Jun 3, 2020, 6:20:27 PM
Re: Export to HTML5 plug-in
Dear Emmanuel!

Cannot understand what the problem with velocity of this project.
It's very light weight, only 1,5Mb, but react on level change very slow, and it's only project my smartphone is impossible to play through web-page (just closes browser)

https://woodmouse.ru/takedom/nb/2i.html

The file is https://woodmouse.ru/takedom/nb/nb.sh3d

Posted by Puybaret at Jul 22, 2020, 5:02:10 PM
Re: Export to HTML5 plug-in
Gildaniel, Sweet Home 3D JS is slow when changing levels because it recomputes all door and window holes in the walls, and the computing of these holes is much slower with JavaScript than with Java.
But there's surely some place to optimize this process, even if it's not simple.

I released version 1.6 of the plug-in today to include the improvements available in the new Sweet Home 3D JS 6.4 Viewer, like a better management of superimposed transparent objects and a fix for a bug which prevented to pinch under iOS.
I also included some comments in the viewHome.html exported file to explain how to simply display the viewer in full screen.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer

Posted by Gildaniel at Jul 24, 2020, 9:46:52 AM
Re: Export to HTML5 plug-in
Dear Emmanuel, thank you!
With new viewer layers seems to change faster on desktop, but https://woodmouse.ru/takedom/nb/2i.html still crashes mobile Chrome

Did't find viewHome.html in the archive