(Proof-of-concept) Interactive WebGL view with HABPanel & Sweet Home 3D!

Tutorials & Examples HABPanel Examples
, ,
1

Hi,

I came across Sweet Home 3D recently, a free interior design application in Java, which happens to have a great HTML5 export plug-in, and wondered if those WebGL views could be embedded into HABPanel dashboards… turns out they can, and it wasn’t even very difficult to do :slight_smile:

It’s not like it’s practical for everyday use or anything - but thought it was fun to write and cool to see, so here you go :wink:

I wrote a directive to load in your templates and an example, follow the instructions in the repository here to try it out: https://github.com/ghys/habpanel-3dview
I don’t plan on developing it much further, so fork it and/or submit PR if you wish!

You’ll get an aerial view:

ozVRcSF.gif917×585

And a first-person view aka. “Virtual visit”:

umDrLMZ.gif917×585

You can switch between both modes with the space bar or the radio buttons below the view.
Clicking on an object will bring up its modal dialog if you defined it.

More details on the WebGL views exported by Sweet Home 3D here: http://www.sweethome3d.com/support/forum/viewthread_thread,6708

Instructions for navigation in the 3D view here: http://sweethome3d.cvs.sf.net/viewvc/sweethome3d/SweetHome3D/src/com/eteks/sweethome3d/viewcontroller/resources/help/en/editing3DView.html

Documentation for the JS API here: http://www.sweethome3d.com/jsdoc/index.html

20 Likes
2

Amazing!!!
This will be a new toy for a lot of us. Thanks :rofl:

1 Like
3

Hi,
I’m the developer of Sweet Home 3D. Thanks for your tests :slight_smile:
For your information, from version 5.5, you even don’t need to export your Sweet Home 3D files to view them in a WebGL view: the new Sweet Home 3D JS Viewer is now able to display any sh3d file saved with Sweet Home 3D 5.3 or a more recent version.
Hope you’ll like it!

8 Likes
4

@Puybaret very cool, I’ll have a look and surely update the directive when I get the chance! :slight_smile:
Thanks for noticing this little weekend project and chiming in, and thanks for Sweet Home 3D - I made a pretty good visualization of my home with it and it was a breeze!

5

As far as I can see, the only required changes should be to update existing Javascript libs with the ones found in Sweet Home 3D JS viewer, add batik-svgpathparser.min.js and jsXmlSaxParser.min.js libs, and cite them after geom.min.js in your sweethome3d.directive.js file. zip-url attribute may now contain a file exported with the Export to HTML5 plug-in or simply saved with Sweet Home 3D 5.3 or a more recent version.
There are also some additional parameters detailed in the script of the viewer to manage cameras and levels, but they are optional.

6

Alright, I made the necessary changes to support Sweet Home 3D 5.5 JS Viewer and updated the readme (it was pretty straightforward).

If you already tried this and simply want to upgrade:

  1. download the new directive at https://github.com/ghys/habpanel-3dview
  2. download http://prdownloads.sourceforge.net/sweethome3d/SweetHome3DJSViewer-5.5.zip and extract it in conf/html
  3. upload your Sweet Home 3D project’s .sh3d file on your openHAB server and change your HABPanel template to invoke the directive like so:
<div oc-lazy-load="'/static/sweethome3d.directive.js'">
  <sweet-home-3d
      style="position: absolute; left: 0; right: 0; top: 0; bottom: 0"
      lib-url="/static/SweetHome3DJSViewer-5.5/lib"
      sh3d-url="/static/SweetHome3DJSViewer-5.5/default.sh3d">
  </sweet-home-3d>
</div>

Note, the example template from https://github.com/ghys/habpanel-3dview/blob/master/3d-view.tpl.html was changed to work with the default.sh3d example bundled with Sweet Home 3D JS Viewer. You can click on the TV, the microwave, the dishwasher, the lights etc.
Additionally, the mouse cursor and name display will now change only when hovering interactive objects.

FxBee51.gif1058×749

Thanks @Puybaret for the heads-up! :+1:

4 Likes
7

Wow, this is very nice! :slight_smile: Did you try to “popup” light,door,etc status without clicking the room item? So you could see status of different things when you enter the room.

8

wonderful @ysc
But how can I make the effect of turning on/off on the 3d object itself?
I mean for example after I turn on a light, the 3d light will change its color respectively?

Just as @jussi_railakari asked, how can I make the the pop-up to show up to inform me the item’s status when I drag a mouse over a 3D object?

9

This is awesome! I already have half of my house built in Sweet Home 3D now and will definitely try this!
What actually would be cool is to have the values popped up and showed directly and the lights actually to be on. But I guess the last one is not easy…

10

Hey there,

I tried this and it’s really awesome! Thanks for this!

The only thing I’m struggeling with is to include more than one value to an item. I have thermostats with different OH-items:
TempOffice - Set temperature
TempOffice_actual - actual temperature
TempOffice_humidity - humidity

Can somebody help me out how to write the code for the modal popup?

Thanks in advance

11

Wow, this is really awesome!

As I modelled our new family home completely in SweetHome3d prior to its construction, I had to try your compilation and it was working great!
However, I was running into two issues and hope you or someone around here can help.

First issue:
The sh3d-Model also includes the garden / outdoor facilities. Since in aerial view the min and max scale / zoom level (or rather the orbital distance to the focus point) is restricted to an interval determined by the scene bounds, I unfortunately cannot zoom as much into the scene as I like to. Thus, it is hard to pick a specific smaller object like a lamp/light or wall plug, unless it is large enough.
Is there any way to alter the min/max zoom lavel or oribital distance? Or is it possible to let lib consider only specific levels for computing some scene bounds? I’ve already been browsing the sh3d-JS-API, but couldn’t find the right solution…

Second issue:
For some items I would like to use more complex modal dialogs in terms of custom widgets I previously imported into HABPanel, e.g. the rollershutter / blinds widget (Rollershutter / blinds widget) or the hue color light controller (Custom Widget: Hue Color Light Controller) or the multi-state widget (Custom Widget: Multi-state Widget). Is there any way easilly integrate / reuse such custom widgets in the template withought having to copy their whole html template but rather have simple few-liners like for native / builtin widgets (e.g. slider):

<div style="min-height: 50px" ng-init="Light_Kitchen={name: 'Light Kitchen', item: 'Light_Kitchen', 'iconset': 'freepik-gadgets', icon: 'ceiling-lamp', vertical: false, step: 1, showticks: false, unit: '%'}">
  <widget-slider ng-model="Light_Kitchen"></widget-slider>
</div>

Is there a similar solution for custom wigets to e.g. write something like:

<div style="min-height: 50px" ng-init="Object_XYZ={name: 'object xyz name', item: 'Object_XYZ', 'iconset': 'freepik-gadgets', icon: 'ceiling-lamp', vertical: false, step: 1, showticks: false, unit: '%'}">
  <my_custom_widget ng-model="Object_XYZ"></widget-slider>
</div>

?!?

12

You should call setAerialViewCenteredOnSelectionEnabled in UserPreferences class and select in your Home object an item that will be used as the pivot point. See this thread in Sweet Home 3D forum for more information.

13

Hi,
I am Véronique, Sweet Home 3Dcommunity manager, and I regularly publish in its blog some tips and articles about different ways to use it.
Thanks again for this test. We are still very interested by this kind of development and wonder if Yannick or someone else would agree to answer to some questions about OpenHAB and this program, for an article in the blog. I am sure it will interest some people of Sweet Home 3D community and will bring more users to OpenHAB.
For your information, Sweet Home 3D 6.0 is under development with many new interesting features that will be available in Sweet Home 3D JS Viewer too.
Looking forward to reading you.
Véronique

14

… You can also join me at this address: veronique@eteks.com
Véronique

15

Sure Véronique! Please be aware though, I haven’t really revisited this weekend project since I made it a year ago, nor use Sweet Home 3D regularly, so I’m not sure I’d have much to say - your choice :slight_smile:

16

Hi

I just tired this link http://www.sweethome3d.com but unfortunately it appears to be off-line. (504 error)

17

Works for me!

18

Now that’s strange.

I keep trying, but it’s really not responding :frowning:

Screenshot_20180906-101337_Chrome
Screenshot_20180906-101337_Chrome.jpg1440×2560 177 KB

19

Hi Stuart, thanks for your interest. There is no reason that www.sweethome3d.com doesn’t work. Hope you will succeed.

20

Thank you very much, Yannick, for your reply. I will prepare some questions and will be back to you shortly.