eHouse Smart Home Building Automation. Visualization from a web browser using SVG (scalable vector graphics) + JavaScript + XML / Open Source


eHouse Building Automation system has few variant of web browser control and visualization methods:
  • eHouse WWW Search Engine
    This solution requires only JavaScript support for web browsers and all modern graphical WWW Browser should work properly
  • SVG+JS Scalable Vector Graphic (Graphical Visualization). Native SVG support + JavaScript is required/enabled for WEB Browser. This solution don't work in former Internet Explorers versions (currently working on Edge)
  • XML+SVG+JS - Native SVG support + JavaScript is required/enabled for WEB Browser. This solution don't work in former Internet Explorers variants (working on Edge)
  • HTML+MAPS+JS - This solution is graphical control only (no visualization), JavaScript is required/enabled for WEB Browser. This solution should work on any modern web browser
  • html text choice forms selection + JavaScript


Archive Visualizations and graphical control WWW - from web browsers Rev 01.07.2013
Controlling and visualization from a web browser has the advantage of being independent of the type of equipment, operating system, type of web browser.
There are many versions that allow you to customize your browser.
Maximum requirements for eHouse visualization from an Internet browser are JavaScript and SVG (Scaled Vector Graphics) support.
Working examples of the included eHouse 1 test system under the supervision of RaspberryPI, various methods of visualization and graphic control online can be found at: Intelligent building visualization .
We provide JavaScript source codes for visualization and graphic control enabling:
  • script work on the side of the browser / client that does not additionally load the server for status processing for each client
  • sending events
  • Script work is optimized for the minimum data processing, which is especially important for battery devices, tablets, smartphones
  • change of dynamic fields - text on values ​​measured and calculated dynamically by the script
  • open source JavaScript code allows you to modify it for your own and individual needs for each project
  • drawing graphical objects in a similar way to other visualization methods in eHouse software
  • status processing from a binary form
  • status data update
  • drawing / hiding objects on and off
  • supports the status of eHouse1 controllers, eHouse1 under the supervision of CommManager, Ethernet eHouse
  • data is exported from one CorelDraw view file for all eHouse visualization methods with maximum functionality for each method


The script has been tested in major browsers in the latest versions available on 01.07.2013:
  • Opera
  • FireFox
  • Internet Explorer/Edge
  • Chrome
  • A standard Android web browser
  • Safari


Basic ways of graphic control and visualization:

JavaScript Scripts:
An intelligent building - JavaScript graphic control - Source code and
Smart Home - graphic control and JavaScript visualization - Source code

Visualization was created in the CorelDraw X4 application, its sources can be found in the following files:
eHouse Home Automation - Visualization of CorelDraw and
eHouse Home Automation - Visualization of CorelDraw - Attic .

All types of the above visualizations have been created from a single image.
The macros for creating visualizations allow generating output files for a specific panel size (given in centimeters for the X and Y axes), thanks to which you can generate different visualizations for smartphones from one image, tablets, PCs (touch screens), panels.
Because the visualization and graphic control is made using SVG (scaled vector graphics) images can be reduced and enlarged without losing quality.

More information about creating visualizations in CorelDraw:
eHouse Smart House - Creating CorelDraw visualizations