Interactive CSS dashboard

Energy Management Dashboard

• fully configurable for generation, storage and consumption parts
• json file interface for measurement data retrieval
• color coding for generation, storage and grid supply parts
• online retrieval of local weather data via API (openweathermap.com)
• original idea as realized for SMA Sunny Home Manager (my former product management responsibility at SMA (2010 - 2017)

View page in action

Realized in February 2020

Data display in accordions

Power measurement for Smart Home

• retrieve measurement data from json file via XMLHttpRequest()
• assign measurement data to sections in accordion structure
• show substructured data in drop down accordion fields
• info via tooltip images (hover over)
• positioning via CSS relative/absolute coordinates

View page in action

Realized in October 2020

Interactive buttons for remote switcher

Power measurement for Smart Home

• retrieve previous state from json file via XMLHttpRequest()
• show state by visible button image
• toggle image and switch state
• write selected state to hidden form
• auto submit new state to local php script for server action call via IP address

View page in action

Realized in November 2020

Power Line display with date selector

Power measurement for Smart Home

• retrieve power measurement data from json file via XMLHttpRequest()
• assign to line graph data structure for display in javascript graph tool
• date selector for retrieval of previous power line data sets

View page in action

Realized in December 2018

Slideshow with WowSlider

Mucha Arts Jugendstil

• responsive slideshow with title
• support swipe on smart phone
• WowSlider as tool for html generation and slider engine

View page in action

Realized in December 2020