UI Design
Adjusting the bar-graph values.

Inspired by the final look of the bar-graphs, I decided to further the project to develop an input UI. Once selected, the input UI will adjust the bar-graphs without having to edit the HTML.

A: Either using the mouse or a touch screen device, select the bar-graph value by adjusting the height of the tool tip proivded.

B: Once all four input values have been entered, then select "Assess Output Total".

C: To view the data as a responsive bar-graph click "View the results as a bar graph", and your web page will be updated.

View the UI design.

Included in the specification of the Energy Efficiency development for Warwick SU were a number of specific requirements. Mainly to reduce development time, as this was previously completed as a static image.

Independent of the number of entries whether rows or columns. The layout is both centred, responsive and can be updated quickly in simple HTML.

• 3/11/2017 Data Input: 31.5%
• 3/11/2017 Data Input: 66%
• 3/11/2017 Data Input: 42%
• 3/11/2017 Data Input: 79.5%
• Average: 55%Total: 219