raynoxis/sharehouseplan repository overview

⁠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.

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.

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

• Creation in SweetHome3D (with .svg export)
• The configuration of the application.

Subscribe⁠ if you want to help me ! Bye ;)

⁠Demo PC

demoPc.webm⁠

⁠Demo Mobile (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.)

*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.

⁠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": {
        "type": "Point",
        "coordinates": [37, -69]
      },
      "properties": {
        "name": "Room 2",
        "floor": "floor2",
        "type": "html",
        "data": "Checking door opening"
      }
    }
  ]