search

HomeSmartMesh / smart_home_3d_webapp

interactive, 3d, video game like, overview and control of your home from a web app
MIT License
85 stars 11 forks source link

readme

Discussions

A Forum right here on github special for this repo :

https://github.com/HomeSmartMesh/smart_home_3d_webapp/discussions

Home Automation website

This project is part of Home Smart Mesh, a developer guide about sensors, microcontrollers, scripting and services for home automation

https://www.homesmartmesh.com/

First time usage

  1. host this project on your local raspberry pi or see 'Local host vs Remote host' section on how to use the live demo
  2. create your own glTF model from blender (optional)

activate hue bridge connection

  1. adjust the light names to match your hue lights names
  2. press the Hue Gateway authorisation button (on the real device)
  3. Click on the 3d model of the hue gateway
  4. An alert will apear on the screen to wait for confirmation
  5. The user creation will proceed and the username will be stored as local storage (ctrl+j in chrome to oben the debug window)

activate mqtt connection

  1. adjust the mqtt topic names to match your mqtt devices
  2. install a mosquitto version with websocket support
  3. Click on the 3d model of the mosquitto gateway

Live demo

Link to Github .io live demo

Demo light control with power log

We see in this demo a home 3d model augmented with interactive mesh items. Some meshes represent light bulbs and generate events when the user clicks on them. Those events are handled by a hue light client that interacts with the real hue gateway. The hue client publishes as events the actual state of the switched light, and that state is updated by the mesh bulb color and the associated 3d light.

As a demonstration for the reaction time of the real light switching on and off, we can see in the gif animation the power consumption log of the light switched. This log comes from a shelly 2.5 device with power monitoring capabilites. This measure device is itself powering up the hue light. Note that the slow power up and down ramp are due to the hue effect of slow variation when switching on and off.

Concept

Home automation connected to 3d events in javascript

send_custom_event("three_param",{name:"Kitchen", color:0.3});
send_custom_event("three_param",{name:"Kitchen", light:0.3});
send_custom_event("three_param",{name:"Kitchen", anim:0.3});
send_custom_event("three_param",{name:"Kitchen", pull:0.3});
send_custom_event("three_param",{name:"Kitchen", push:0.3});

See three_param running in a live demo

Hue lights usage

Note : This project is not related to the hue devices supplier and is a simple user of the provided API.

Hue features

Hue config in blender

configuration of hue light name in blender Light bulb object Custom properties.

Hue events application code

window.addEventListener( 'hue_lights_on_startup', onHueStartup, false );
window.addEventListener( 'hue_light_state', onHueLightState, false );

function onHueLightState(e){
    const name = hue_mesh_name[e.detail.name];
    send_custom_event("three_param",{name:name, light:e.detail.on});
}

lights broadcast their state on startup and as a feedback when updated from javascript

Hue light groups

Indiviual lights have to be attached to a parent mesh that have these custom properties

tested hue light types

ct unit is Mired M = 1000000/T; Mired

demo light groups

demo light and group dimming

Mqtt config in blender

The mqtt topic has to be assigned to an mqtt custom property

Mqtt events application code

window.addEventListener( 'mqtt_message', onMqttMessage, false);

function onMqttMessage(e){
    ...
    if(obj.userData.type == "heating"){
        const heating_demand = e.detail.payload.pi_heating_demand;
        send_custom_event('three_param',{name:obj_name,color:heating_demand});
    }
}

Mqtt temperature sensors on room floor color

blender home model

blender file download from google drive

The blender model export in .glTF is already part of this repo. So you would only need the blender file in case you'd like a template to start with and customise.

Files within the project's google drive folder will have commit ids to match them with this repo.

The created home model should have custom properties. It is also possible to use the repo's home model file and edit it as it is a json format : ./3d_models/home.gltf. It is possible to rename the hue: field with your own hue lights names as known by the hue gateway.

    "extras" : {
        "mouseEvent" : "true",
        "type" : "light",
        "hue" : "Bathroom main"

Requirements

Dependencies

web_three_interface

The web_three_interface is not a direct dependency but is used as a boiler plate for 3d interactive meshes. It is still a useful repo that helps understand the workflow step by step with increasingly complex demo, and also debug in case one step is failing.

Features

Planned Features

issues and limitations

Local host vs remote host

Limitation when using from github .io :

So proceed with this only if you know what you're doing. This might expose you at risk if done through an untrusted website :



then reload the page

Performance

webgl report website

test model : 8000 triangls