France
Joined: Nov 7, 2005
Post Count: 9393
Status:
Offline
Sweet Home 3D JS Online
Hello,
Two days ago, was released the first version of a new Online Editor programmed in JavaScript / WebGL which enables you to create and modify Sweet Home 3D plans on all recent browsers including smartphones and tablets. This editor can be accessed from the new Sweet Home 3D Online Manager page which looks different whether you're logged in or not. Disconnected users will view the following page:
whereas logged in users will view a page that will let them create new homes, import an existing SH3D file, edit their homes, as well as delete them or export them to a SH3D file:
Then, clicking on the test link or creating a new home will show the new Sweet Home 3D JS Online Editor which looks a lot like Sweet Home 3D installer version as you may guess:
As many features are still missing, like contextual menus and modification dialog boxes, the tool bar is quite different to ensure that this first version can be useful. Therefore, it contains some buttons to switch between Aerial view and Virtual visit modes as well as buttons to toggle magnestism and base plan lock, flip selection and manage levels.
The separators between the furniture catalog, the plan and the 3D view can't be moved yet, so some CSS responsive styles were used to ensure that the space occupied by each panel as well as their layout on the screen make the Editor usable according to the current width and height of the Editor window, but also according to the device where it's used. Therefore, on a computer, a home file is displayed with the tool bar at its top with the plan and the 3D view below it, just like in the Sweet Home 3D user interface you are used to:
whereas on smartphones and tablets, the tool bar is scrollable and appears at the bottom of the screen with the furniture catalog and the plan just above it in portrait (vertical) orientation, to ensure that they are as close to your fingers as possible:
In landscape (horizontal) orientation, the furniture catalog will be larger and appear in the same row as the plan and the 3D view:
The furniture catalog is different on computers where it contains 375 free pieces, from the one on smartphones and tablets which contains 92 pieces of the default catalog (the light sources are not listed). As these devices have a smaller size and less RAM, the catalog was reduced on them to avoid you spending your time scrolling in it and prevent crashes. Once a search field will be added to the user interface, the catalogs will probably show more pieces.
But, instead of listing all missing features, let's see now what you can actually do with this new Editor: - First, be reassured, you can save the modifications you make in the home plan. There's no Save button in the tool bar, because saving is performed on sweethome3d.com server each time you modify something or change of point of view. If you are connected to Internet, this behavior ensures that your work is always saved even if the program crashes (one of the main drawbacks of JavaScript programs is that it's impossible to handle missing memory errors, leading to a direct page reload in case of error!). If you're disconnected from Internet, the program will be able to work and will save your modifications as soon as the connection is established. Just don't quit or reload the Editor page in that case.
- All the drawing tools are functional: you can draw and modify walls, rooms, polylines, dimension lines and texts. Under a computer, the keyboard shortcuts for multi selection, vertical / horizontal moves, duplication and magnetism are the same as in Sweet Home 3D. On touch screens where there's no keyboard, you can use the Magnetism switch in the tool bar if needed, whereas multi selection and vertical / horizontal moves can be done after waiting at least 1s when you touch the screen with your finger. During this second, an animation showing a circled shift symbol will appear above your finger and you should simply move your finger before the end of the animation to ignore the "Shift" effect.
This "Shift" effect can also be useful to toggle the selection with a selection rectangle that will be drawn when you touch the screen on a place where no item is selected and release your finger elsewhere. Still on touch screens, you must select an item in the plan by touching it and releasing your finger, before you can move it. You may also zoom with a pinch on the screen, and moving your finger on a place with no selected items will move (pan) the plan (except if you wait one second before moving your finger). Finally, escaping an action can be done by touching the screen with an other finger and a double touch can be replaced by a 1 second touch in which case an animation showing a circled 2 will appear at screen.
All these behaviors may look quite different from the ones you're used to with a mouse, but they should be quite intuitive compared to the gestures generally used on touch screens.
- Adding furniture from the catalog to the plan can be achieved with a drag and drop, or with the Add furniture button, except under IE 11 and legacy Edge on a touch screen where only the button works. On touch screens, you'll have to select the piece you want to add by pressing and releasing you finger, before you can drag it.
- Three buttons allow you add and delete levels, the second one being used to add a level at the same elevation as the current one. When there are some levels in your home, you can select a different level with the drop down list displayed at the top right of the plan:
- Modifying the selected item in the plan can be done with its indicators, to let you resize the furniture and adjust walls, rooms and other items. Again on touch screens, the tolerance used to find the indicator on which you pressed with your finger was greatly increased to ensure that using indicators is usable. The change of cursor used as feedback to indicate that the mouse is located upon an indicator, was replaced on touch screens by showing contextual information and the cursor above your finger when you touch the indicator.
You may also change the content of the selected text or the color of another selected item by double clicking on it, but the latter function is not supported on all devices (it doesn't work under iOS, IE 11 and legacy Edge).
Actually, this feature is temporary and will be replaced by more complete user interface components that will allow to modify all the settings of the selected items. Nevertheless, note that you may still change the color of each side of a wall at this moment, by double clicking (or double touching) on either side of a wall.
So now, it's up to you, and I hope you'll like this new way of drawing plans even if it's still missing some important features. In all cases, don't forget you can export your plan as a SH3D file, so if you need a missing feature, you can continue your work on Sweet Home 3D, and even reimport the modifications in Sweet Home 3D Online Manager afterwards. This web application was successfully tested on iPhone, iPad, Android, Surface devices and other computers, using Safari, Chrome, FireFox, IE 11, legacy Edge and new Chromium Edge, so you have the choice! If you're interested, you'll find the source code of the Sweet Home 3D JS project at SourceForge.net, which provides an Ant target able to build a .war web application archive with a simple implementation of the server functions.
All this wouldn't have been possible with the tremendous programming help and advice of Renaud Pawlak, so please give him some warm thanks if you like this new project.
As a final word, the new version 6.4 of Sweet Home 3D was released at the same moment to let you benefit of the small bug fixes I programmed while developing the JavaScript Editor. I also preferred to release it now to avoid some compatibility issues with the SH3D files exported from Sweet Home 3D Online Manager. If you're a developer, note that this new version introduced IDs on all home objects, as well as property change listeners to follow the changes of user properties.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer
Netherlands
Joined: Sep 26, 2009
Post Count: 3972
Status:
Offline
Re: Sweet Home 3D JS Online
I did a short test on an Android tablet and it works perfect.
You probably need a larger tablet (mine is only 8 inch) to be able to do useful work. Nevertheless I was able to draw walls, a room, add some furniture and change colours.
US
Joined: Feb 27, 2014
Post Count: 87
Status:
Offline
Re: Sweet Home 3D JS Online
I downloaded version 6.4 after using 6.0 for a while, and I like the fact that I can now move entries in the furniture list, but it only works when no sorting is being used.
I'd still like to be able to move around entries in the list when under a sorting algorithm. It would allow me to group together furniture or objects that belong to the same floor or room for easy editing end navigation.
France
Joined: Nov 7, 2005
Post Count: 9393
Status:
Offline
Re: Sweet Home 3D JS Online
harbinger, sorry but you shouldn’t hope to be able to reorder items in the furniture list when it’s sorted. I understand that when you use groups, reordering can’t be influenced by a sort made on levels in the furniture list, but this would work only if you move items within groups and not out of groups at the root of the list. By the way, it’s not that I don’t want to program exceptions, but those exceptions must be quite intuitive and easily understood by every user.
Xiste, this error may happen if you remove www. in front of sweethome3d.com. Could you check if it was your case? I’ll try to see how I can add the prefix automatically.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer
US
Joined: Feb 27, 2014
Post Count: 87
Status:
Offline
Re: Sweet Home 3D JS Online
Actually the only reason I was sorting by level was to get all those objects together (on the same floor) and then arrange them by type, purely for finding objects more easily, and using the Group function for those items I wanted to lock together.
It seems like what we need are a few shortcuts for moving entries in the list, such as "move to top", "move to bottom", "move to home", and "move to end".
Norway
Joined: Apr 18, 2014
Post Count: 258
Status:
Offline
Re: Sweet Home 3D JS Online
The www is not there and it seems the link cannot be edited, but that might be finger trouble on my side since I'm a bit pressed for time. I shall find the time make another try later.
France
Joined: Nov 7, 2005
Post Count: 9393
Status:
Offline
Re: Sweet Home 3D JS Online
I added the automatic redirection to www.sweethome3d.com for SweetHome3DJSOnline.jsp
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D developer
