INTERACT FORUM

Please login or register.

Login with username, password and session length
Advanced search  
Pages: [1]   Go Down

Author Topic: Engen Local Web Interface  (Read 6130 times)

keenan

  • Regular Member
  • Recent member
  • *
  • Posts: 11
Engen Local Web Interface
« on: June 14, 2016, 10:46:31 am »

I'm improving the website interface that Engen hosts by giving it some color and design while also being more user friendly.

It goes without saying, but this is in its infancy - I'm open to suggestions and ideas you might have for the interface and design. Everything is subject to change!

The images below show the design so far. Most of the content is just filler information and data (such as the recent activity feed, the scenes and the devices list) while I try to get my head around how such a complex system can be made easy, but still be powerful and configurable. For testing purposes, I set up the slider to send live data to the light, and it is functioning!



"Den Lamp" would set the color of that lamp to whatever you select, while "Keenan Light" has a slider which dims the light.

The website theme is based on a responsive library (adapting to mobile/small screens accordingly) and I've been working with Javascript to communicate with Engen (the back end server) which in turn sends information to and from the devices in your network.

It has yet to dynamically list devices that are on your network, but that is next on my agenda. It should in the future know the names of all devices and what settings they have to offer (dimmer/RGB value, on or off, etc.). Adding or removing devices, setting up scenes and groups and more is planned to be implemented in the website as well.
Logged

keenan

  • Regular Member
  • Recent member
  • *
  • Posts: 11
Re: Engen Local Web Interface
« Reply #1 on: June 15, 2016, 03:20:19 pm »



It now grabs the devices from the z-wave stick and displays relevant inputs to control them. These inputs are all functioning and retrieve the current data they are set to on page load.
Logged

JimH

  • Administrator
  • Citizen of the Universe
  • *****
  • Posts: 72538
  • Where did I put my teeth?
Re: Engen Local Web Interface
« Reply #2 on: July 06, 2016, 02:03:45 pm »

New screenshot, two pages from a phone.

Items can be named now.

This is generated from a web browser built into the Engen Server, so you can connect from any HTML5 capable browser (most).  Enter this in your browser:

[Your IP Address:52125]

Example:

192.168.0.3:52125

Or from the machine where Engen is running, you can enter this in a browser:

localhost:52125



Logged

JimH

  • Administrator
  • Citizen of the Universe
  • *****
  • Posts: 72538
  • Where did I put my teeth?
Re: Engen Local Web Interface
« Reply #3 on: August 08, 2016, 12:57:13 pm »

Coming in a few days.   Better use of space.  All on and off at the top.

Click for a larger image.



Tablet




Phone
Logged

jachin99

  • Citizen of the Universe
  • *****
  • Posts: 559
Re: Engen Local Web Interface
« Reply #4 on: August 14, 2016, 08:29:55 pm »

What if the names of the light turned the color, or dim level of the light itself, this way one could glance at the panel, and quickly be able to tell what lights are on, what color they are, and how much they have or have not been dimmed. Also would be nice if the user could set their own background, and have an option for a light theme instead of just dark. 

Maybe you could attach images to each of the commands as well so, for instance a macro running in the morning could have a sun, or morning inspired logo, while the goodnight macro cold show the moon, or something that makes you want to fall asleep, if that makes sense.
Logged
Pages: [1]   Go Up