ShareHousePlan

Share the plans of your house under construction with everyone involved in the construction process, as well as with your family and friends. This application allows you to display an interactive map of the various construction floors, with filters and points of interest. These display text, images and PDFs at specific points on the floor plan and you can customize everything to suit your needs. I've also added support for a 3D viewer (SweetHome3D compatible only), so you can see a live 3D plan of your property and even visit it.

<p align="center"> <img src="https://github.com/Raynoxis/ShareHousePlan/assets/34026291/a37da713-5395-461a-aa70-d70543cdcc44" width="600"> </p>

---

ShareHousePlan's interface works equally well on cell phones and PCs, and can be installed locally (PWA) to operate without the Internet.

---

I created this application to display a SweetHome3D plan. You can use another application, but you must be able to generate .svg files. Moreover, the 3D visualization function is only available from a Sweet Home 3D export (See below).

Sweet Home 3D is a free interior design application which helps you draw the plan of your house, arrange furniture on it and visit the results in 3D.

---

<img src="https://www.gstatic.com/youtube/img/branding/youtubelogo/svg/youtubelogo.svg" width="150">

I'll show you how it works soon on my Youtube channel : https://www.youtube.com/@Raynoxis (French)

• Creation in SweetHome3D (with .svg export and 3D HTML5 export)
• The configuration of the application.

Subscribe if you want to help me ! Bye ;)

---

Demo PC 2D

Test1_VP8.webm

Demo PC 3D

Test2_VP8.webm

Demo Mobile 2D (PWA)

demoMobile.webm

If you have more than two floors on your plans, don't worry, the buttons will become a drop-down list on mobile.

---

Deployment

Available on Docker Hub : https://hub.docker.com/r/raynoxis/sharehouseplan

docker-compose.yml

services:
  sharehouseplan:
    container_name: ShareHousePlan
    image: raynoxis/sharehouseplan:latest
    restart: always
    volumes:
      - ./datas:/app/datas
    ports:
      - 8080:8080

• Create the file docker-compose.yml with a folder datas next to him. See below how to create your datas.

• Run docker compose up -d to start the container.

---

SweetHome3D

2D plan

• Before all, you have to install a Plug-in on SweetHome3D to enhances the export to .svg (better compression for Web..) https://sourceforge.net/p/sweethome3d/plug-ins/43/

---

• First you haves to create some classic floor on SweetHome3D (Floor1, Floor2, etc..) and design your house floor by floor. (You can add a scan of your scaled plan in the background.)

<p align="center"> <img src="https://github.com/Raynoxis/ShareHousePlan/assets/34026291/fde5825c-d90f-4d07-a172-6b2e6067bd20" width="500"> </p> *You have to put a square of walls around your plan, same on each floor. This is the size of mine. The ```.svg``` file depends on these walls. *** - After, for all your filters, you have to create somes "Floor of same Elevation" depending Floor1, and depending Floor2 (It was at this stage that I cut all the plan's measurements and pasted them into a dedicated 'Legend' level.). *** - Finally you can show/hide each to have the result : Floor + Filter

Example to generate floor1_electricity.svg : I add layers : 'Floor1' + 'Floor1 Elec'

Visible levels are added from left to right. With the active selection on 'Floor1 Elec' i can generate floor1_electricity.svg (Before i hide 'Floor1 Legend' and 'Floor1 Lights')

---

• (OPTIONAL) : Install the Plug-in : '2DSymbols' on SweetHome3D, to have the same symbols as me.

3D visualization

For the 3D visualization of the house plan, exported from SweetHome3D, I used a fantastic community Plug-in.

• A DEMO is available here: https://www.sweethome3d.com/blog/2016/05/05/export_to_html5_plug_in.html
• The Plug-in is available here under the name : 'ExportToHTML5' : https://www.sweethome3d.com/plugins.jsp

I've included the Plug-in's HTML code and libraries alongside my code, and added a link that allows my code to launch the Plug-in's page by sending it some datas.

So if you select a level in 2D, and then display 3D, the corresponding floor will be loaded !

---

After installing the Plug-in, you can export your 3D plan by selecting 'Tools' then 'Export to HTML5'. Be sure to name the floors first, as this naming will have to be reported in floors.json for each level.

---

Configuration

Datas

Example datas : https://github.com/Raynoxis/ShareHousePlan/tree/main/docker/DATAS/datas

In /app/datas folder, you need to put all the configuration files and the datas. | Name | Description| | --- | --- | | svg | (NEEDED) This is the folder to put all .svg files for all your floors and filters + floors.json | | points | (NEEDED) This is the folder to put all files needed for all yours points (jpg, webp, png, pdf, etc..) + points.json | | 3D | (OPTIONAL) This is the folder to put the .zip file of your exported 3D plan from HTML5 Plugin of SweetHome3D. Unzip the first exported .zip file from SH3D in a directory then put here the .zip from the directory | | svg/floors.json | (NEEDED) This file allows you to create the floors and their associated filters. Floors and Filters are associated to specific .svg file. It also associates 2D level names with level names in SweetHome3D (for 3D display) | | points/points.json | (NEEDED) This file allows you to create points at specific coordinates on the plan. Each point is associated with a floor, and opens the viewing of a file (text, pdf, img) when clicked. | | config.json | (NEEDED) This file allows to configurate all options of 2D plan (Size, center, etc). It also permits to locate the .zip file for 3D. |

Example : In /app/datas/

Example : In /app/datas/svg/

Example : In /app/datas/points/

Example : In /app/datas/3D/

---

config.json

Example

{
  "image": {
    "extent": [-180, -337, 284, 180]
  },
  "map": {
    "center": [51, -71],
    "extent": [-180, -337, 284, 180],
    "projection": "EPSG:4326",
    "zoom": 2
  },
  "icon": {
    "anchor": [0, 0],
    "src": "magnifier.png",
    "width": 30,
    "height": 30
  },
  "html5": {
    "file": "/datas/3D/3D.zip"
  }
}

---

floors.json

Example

{
  "floor1": {
    "filters": {
      "nofilter": "datas/svg/floor1.svg",
      "lights": "datas/svg/floor1_lights.svg",
      "electricity": "datas/svg/floor1_electricity.svg"
    },
    "parameters": {
      "level3D": "Floor 1"
    }
  },

  "floor2": {
    "filters": {
      "nofilter": "datas/svg/floor2.svg",
      "lights": "datas/svg/floor2_lights.svg",
      "electricity": "datas/svg/floor2_electricity.svg"
    },
    "parameters": {
      "level3D": "Floor 2"
    }
    
  },
  "floorTest": {
    "filters": {
      "nofilter": "datas/svg/floor1.svg",
      "lights": "datas/svg/floor1_lights.svg",
      "test": "datas/svg/floor1_electricity.svg"
    },
    "parameters": {
      "level3D": ""
    }
  }
}

---

points.json

When you open the application, you can click on an area of interest, and retrieve the coordinates in the top right-hand corner to then add a new point to the file.

Example

[
    {
      "geometry": {
        "type": "Point",
        "coordinates": [80, -85]
      },
      "properties": {
        "name": "Kitchen 1",
        "floor": "floor1",
        "type": "image",
        "data": "/datas/points/kitchen1.jpg"
      }
    },
    {
      "geometry": {
        "type": "Point",
        "coordinates": [92, -97]
      },
      "properties": {
        "name": "Kitchen 2",
        "floor": "floor1",
        "type": "image",
        "data": "/datas/points/kitchen2.jpg"
      }
    },
    {
      "geometry": {
        "type": "Point",
        "coordinates": [86, -105]
      },
      "properties": {
        "name": "Kitchen 3",
        "floor": "floor1",
        "type": "html",
        "data": "Be careful with the number of lights (suspension type) <br> so as not to obstruct the opening of the wall cabinet door"
      }
    },
    {
      "geometry": {
        "type": "Point",
        "coordinates": [12, -42]
      },
      "properties": {
        "name": "Room 1",
        "floor": "floor2",
        "type": "image",
        "data": "/datas/points/idea.webp"
      }
    },
    {
      "geometry"