element14 Community
element14 Community
    Register Log In
  • Site
  • Search
  • Log In Register
  • Community Hub
    Community Hub
    • What's New on element14
    • Feedback and Support
    • Benefits of Membership
    • Personal Blogs
    • Members Area
    • Achievement Levels
  • Learn
    Learn
    • Ask an Expert
    • eBooks
    • element14 presents
    • Learning Center
    • Tech Spotlight
    • STEM Academy
    • Webinars, Training and Events
    • Learning Groups
  • Technologies
    Technologies
    • 3D Printing
    • FPGA
    • Industrial Automation
    • Internet of Things
    • Power & Energy
    • Sensors
    • Technology Groups
  • Challenges & Projects
    Challenges & Projects
    • Design Challenges
    • element14 presents Projects
    • Project14
    • Arduino Projects
    • Raspberry Pi Projects
    • Project Groups
  • Products
    Products
    • Arduino
    • Avnet Boards Community
    • Dev Tools
    • Manufacturers
    • Multicomp Pro
    • Product Groups
    • Raspberry Pi
    • RoadTests & Reviews
  • Store
    Store
    • Visit Your Store
    • Choose another store...
      • Europe
      •  Austria (German)
      •  Belgium (Dutch, French)
      •  Bulgaria (Bulgarian)
      •  Czech Republic (Czech)
      •  Denmark (Danish)
      •  Estonia (Estonian)
      •  Finland (Finnish)
      •  France (French)
      •  Germany (German)
      •  Hungary (Hungarian)
      •  Ireland
      •  Israel
      •  Italy (Italian)
      •  Latvia (Latvian)
      •  
      •  Lithuania (Lithuanian)
      •  Netherlands (Dutch)
      •  Norway (Norwegian)
      •  Poland (Polish)
      •  Portugal (Portuguese)
      •  Romania (Romanian)
      •  Russia (Russian)
      •  Slovakia (Slovak)
      •  Slovenia (Slovenian)
      •  Spain (Spanish)
      •  Sweden (Swedish)
      •  Switzerland(German, French)
      •  Turkey (Turkish)
      •  United Kingdom
      • Asia Pacific
      •  Australia
      •  China
      •  Hong Kong
      •  India
      •  Korea (Korean)
      •  Malaysia
      •  New Zealand
      •  Philippines
      •  Singapore
      •  Taiwan
      •  Thailand (Thai)
      • Americas
      •  Brazil (Portuguese)
      •  Canada
      •  Mexico (Spanish)
      •  United States
      Can't find the country/region you're looking for? Visit our export site or find a local distributor.
  • Translate
  • Profile
  • Settings
RoadTests & Reviews
  • Products
  • More
RoadTests & Reviews
Blog Multipurpose Modular Light Bar Project: [07] A little web development for a GUI
  • Blog
  • RoadTest Forum
  • Documents
  • RoadTests
  • Reviews
  • Polls
  • Files
  • Members
  • Mentions
  • Sub-Groups
  • Tags
  • More
  • Cancel
  • New
Join RoadTests & Reviews to participate - click to join for free!
  • Share
  • More
  • Cancel
  • Author Author: ipv1
  • Date Created: 13 Jan 2016 7:49 PM Date Created
  • Views 723 views
  • Likes 4 likes
  • Comments 4 comments
Related
Recommended
  • ip_modular_light
  • ledroadtestplus
  • ip_iot

Multipurpose Modular Light Bar Project: [07] A little web development for a GUI

ipv1
ipv1
13 Jan 2016

The background bits

 

The proposal for this roadtest plus was written around the TI TPS92512 which is an LED Driver Buck converter. The idea was to design a 4Channel Lighting solution along with a variety of LED panels. In addition to RGB Lighting Panels, it was proposed that custom ones can be made using special LEDs for agricultural lighting more commonly known as ‘Grow Lights’. Additionally, the control over the colour as well as intensity of the lights should be controllable over say Wi-Fi which can be accomplished by using a CC3200. The system is to be designed in an enclosure that can replace the conventional home or industrial lighting hence the title “Multipurpose Modular Light Bar Project”.

 

In the previous posts, I have gone through the unboxing of the kit, explaining the idea in detail and setting up the CC3200. In this post, I just want to provide a quick update to the UI side of my project.

 

The face that sailed a thousand ships

The user interface is one of the most important parts of any project. If its beautiful, everyone will want one and hence I set to work on the GUI part of my project. The original intent was to create a web based app so that the light can be controlled via PC, phone or tablet. I usually use OpenHAB but since this is a modular system and unlike Phillips HUEs which needs a gateway, I wanted to make something independent. Hence the user interface had to work from somewhere else and BTLE has been done and provided by Texas Instruments in the kit itself. My modular light has a lot more power and capability and hence it deserves something more.

 

Since I am an expecting father, my wife came to me with a practical problem- We need dimmable lighting so that we may use the same light as a night light as well. I wanted to monitor the temperature of the baby room as well and log it. So now I have a very practical scenario where my design will be implemented. The GUI needs to accomodate a lot of things and I need some future expandability. I searched the internet and downloaded some bootstrap based dashboard themes. I am an electronics engineers who has a degree in ASIC design/FPGAs and designs embedded systems while doing a PhD on microwave Ceramics and teaches Artificial Neural Networks... i.e. I have no formal education in web design so templates are a really a great place to start.

 

I read, googled, tested and drank a lot of coffee and came up with this...

image

OK i admit the whole thing is still in the initial phases but hey it works! The responsive GUI works for all display sizes and you can resize the browser to see it re-organize itself. I will be pushing data into the tables and graphs after I am done with setting up some basic user access control.

 

Click on the Baby Room and ...

image

 

The system connects via MQTT to our CC3200 Launchpad and queries for the current value of brightness. If it is running, it will respond with an value. You may press any button to turn ON, OFF or DIM and BRIGHTEN the lamp. It works pretty well actually.

 

The demo

 

So yes you can access my dashboard at http://inderpreet.github.io/HomeAutomationUI/ Use http and not https because of the issues with certificates.

I shared the link via twitter to followers via twitter.com/ip_v1 and very soon I had to shut it down because someone started playing with the buttons. I am going to implement the Access Control next along with the temperature sensor and graphs.

 

For the final demo I am hoping to setup a live stream so that anyone can connect and control the system remotely and see the implementation live.

 

Thank everyone.

Cheers,

IP    

  • Sign in to reply

Top Comments

  • shabaz
    shabaz over 9 years ago in reply to Jan Cumps +2
    Hehe I couldn't restrain myself either.. but figured better now than later when baby won't want to be woken up with the lights! I left the lights in the state I found them Inderpreet! : )
  • ipv1
    ipv1 over 9 years ago +1
    The webpage is live at http://inderpreet.github.io/HomeAutomationUI/babyroom.html
  • Jan Cumps
    Jan Cumps over 9 years ago +1
    ... someone started playing with the buttons... I plead guilty
  • ipv1
    ipv1 over 9 years ago

    Thanks for paying us a visit friends. I was planing a live feed of the light but thats gonna be difficult. I dont have the time but I can open a discuss.

     

    In order to be efficient, I though of using an RPi to take images on demand. The demand or command would come via MQTT and then the response would also be conveyed via MQTT. Simple OpenCV, compress and send in packets via MQTT. At the webpage, an MQTT client reassembles the image and puts it in a predefined placeholder to display the 'demanded' image.

     

    Simple yet I won't be able to put that together. Im just finishing my presentation so will be happy if I can upload the result.

    Thanks again for your kind support.

    • Cancel
    • Vote Up 0 Vote Down
    • Sign in to reply
    • More
    • Cancel
  • shabaz
    shabaz over 9 years ago in reply to Jan Cumps

    Hehe I couldn't restrain myself either.. but figured better now than later when baby won't want to be woken up with the lights!

    I left the lights in the state I found them Inderpreet! : )

    • Cancel
    • Vote Up +2 Vote Down
    • Sign in to reply
    • More
    • Cancel
  • Jan Cumps
    Jan Cumps over 9 years ago

    ... someone started playing with the buttons...

    I plead guilty

    • Cancel
    • Vote Up +1 Vote Down
    • Sign in to reply
    • More
    • Cancel
  • ipv1
    ipv1 over 9 years ago

    The webpage is live at http://inderpreet.github.io/HomeAutomationUI/babyroom.html

    • Cancel
    • Vote Up +1 Vote Down
    • Sign in to reply
    • More
    • Cancel
element14 Community

element14 is the first online community specifically for engineers. Connect with your peers and get expert answers to your questions.

  • Members
  • Learn
  • Technologies
  • Challenges & Projects
  • Products
  • Store
  • About Us
  • Feedback & Support
  • FAQs
  • Terms of Use
  • Privacy Policy
  • Legal and Copyright Notices
  • Sitemap
  • Cookies

An Avnet Company © 2025 Premier Farnell Limited. All Rights Reserved.

Premier Farnell Ltd, registered in England and Wales (no 00876412), registered office: Farnell House, Forge Lane, Leeds LS12 2NE.

ICP 备案号 10220084.

Follow element14

  • X
  • Facebook
  • linkedin
  • YouTube