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

Tutorials & Examples HABPanel Examples
, ,
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.

21

Hi

When I get some head time, I’ll look into Sweet Home more.

I can confirm that the link is working for me now :smile:

Many thanks,

Stuart

1 Like
22

Hi

I have only just got around to downloading the software to see how I get on with it.

One tiny thing I noticed…

If I try to buy the version with extra textures etc (because I believe in supporting people, rather than using for free), Amazon is reporting " Note: Currently, this item is available only to customers located in the United States."

https://www.amazon.com/gp/product/B00NLVKPDM

Is there any other way of “buying” your software?

(FYI, I’d be happy to simply donate the money if required, assuming that I can get my head around how to link to OpenHab2)

23

Hi,

Thanks for this beautiful tutorial, I am making a similar project with a static 3D image and XML editor in Inkscape. Would anyone happen to know if it is possible to make a modal with a custom Widget? I would like to add the Rollershutter simple but I can’t get it to work

24

Did you checked out OH3 already? There are lots of possibilities with a very customizable interface (including popups).

25

Is there any chance we get a ha-floorplan port to OH?