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 creator
