project the4bees – transnational holistic ecosystem 4 ... · initially, the 3 input fields and an...

1

www.alpine-space.eu/THE4BEES

This project is co-financed by the European Regional Development Fund through the Interreg Alpine Space programme

Project"THE4BEES–TransnationalHolisticEcosystem4BetterEnergyEfficiencyThroughSocialInnovation"

WorkPackageNo.T3.5

DELIVERABLE

Developmentofadashboardforevaluatorsandhighlevelusers

CAROLINEATZL,BERNHARDVOCKNER,SABINEGADOCHA,MANFREDMITTLBÖCK,MARKUSBIBERACHER,DIEGOSANMARTINO,TATSIANAHUBINA,FLAVIOBIANCHIINCOOPEARTIONWITHALLPARTNERS

AUGUST2017

2



3



1 IntroductionWithinthescopeoftheTHE4BEESproject,adashboardtomonitorandcomparesensormeasurementsenables the project partners to visualize data they collected. Our project builds on the hypothesis:Energy isconsumedbypeopleratherthanbybuildings. Thus,THE4BEESfocusesonthebehaviouralchanges of users in public buildings, and there are numerous challenges we are facing: how toencouragebehaviouralchangesforenergyefficiency,howtomonitorenergyconsumptiontrendsandsavings,howtomakeICTaneffectivetoolforachievingsignificantenergysavings,andhowtodesigninnovativeICTtoolstoengageandmotivateenergy-consciousbehaviour.

2 DashboardvisualizationapproachesDifferentdatavisualisation(basedonqueriesandanalytics)aremadeavailableDatamustberepresentedinamoreparticularizedmode forspecificusers(buildingmanagers,administrators,policymakers)andpartnersforacompleteevaluation.

Dashboardsareanappropriateway tovisualizechanges. In thecontextof theTHE4BEESproject,wedefine dashboards as interfaces designed for users in order to visualize real-time data and comparechanges over a period of time.Within theTHE4BEESprojectwe are developing a set of ICT tools tosupport“energyrelated”behaviourchange,energyconsumptionmonitoring,anddecisionmaking.Ouraimistomonitorenergyconsumptionandairqualityinbuildingswithintheninedifferentpilotsitesfrom six countries (Italy, Switzerland, Germany, Austria, Slovenia and France) and to visualizemeasurementsinasimplewayusingsimplestraightforwardicons,graphs,andmessages.

2.1 DashboardvisualizationapproachesfortheTHE4BEESproject

The THE4BEES dashboard graphical user interface is user-friendly, it shows error messages andprovidesasflexibleaspossibledatavisualisationsolution.

TheloginscreenaskinguserscredentialstologintoTHE4BEESapplicationistheveryfirstimpressionusershaveaboutthedashboard.Wemadeitintuitive,simpleandcolourfulinordertogetitrightandtocatchtheuserattention.Onceeffectuated logintheuser isredirectedtotheHomepage.Thispage isreferred to thewholepilot site and represents its current situationon energy consumption andCO2emissions.Thetipsandhintsonefficientbehaviourbasedonthesystemfeedbackwillbevisualizedonthispageaswell.

ByclickingonComparisonbutton theuserwillberedirectedon thepagewith thesetofpredefinedreportsbuilt adhoc for a certainpilot site.These reportswill containdetailed informationonactualenergyconsumptionandpossiblesavingsprovidingvisualrepresentationofenergyconsumptiontrendwithinacertaintimeframe.Comparisonpagewillbedesignedfornon-expertusersandcanbeadaptedforin-housescreenstobepositionedinschoolsandoffices.Furthermore,theEnergyDetailspagewillbe available for expertusers suchas energymanagers anddecisionmakers.Theuserwill be able tochooseatimeperiod,thesensorstobevisualisedanddatagranularity.

4



2.2 DesignoftheTHE4BEESdashboard

Beforestarting theDashboard implementation,weperformedpreliminarystudies todefine the “lookandfeel”ofthefutureTHE4BEESdashboard.TheIREESexpertsincooperationwithalltheTHE4BEESpartnersprovidedrecommendationsforICTdevelopments1.Duringthe“requirementgatheringphase”,the CSI partnerswere communicatingwith the CCLabs participants and had a number of interviewswith theprojectpartners todiscover theactualneedsof futureusersandstakeholders. Theopinionand suggestions of the CClabs participants and partners are summarised in the list of features to beimplemented for the dashboard2.We also have analysed the complete trial plans to comprehend themeasurementsandotherinformationtobevisualizedusingtheDashboard.

Thedashboardwillbedevelopedasaflexibletool,adaptabletoeachPilot’sneeds.UpontheprojectendtheTHE4BEESDashboardwillbeeasilyadaptabletootherschools,offices,socialhousingbuildings,andmountainhutsreality.

As for thedesign and styleof theDashboard, all the informationon theHomepage andComparisonpagewill be adapted to the reference frameof the target group tomake the contentof theproject athought -provoking andmotivating for users. The dashboard is designed using common colours andstylessoitiseasilyrecognisedasTHE4BEESproject’soutcomes.

2.2.1 Loginpage

Theapplicationstartswiththelog-inpage(Figure1).Beforestartingusingtheapp,userswillbegivenlogin and password. These data are stored in the THE4BEES back office database table t4b_t_user(des_user,pwd_user).Alloperationswillbedonebyuserwithintheonespecificpilot.Allthepagesareassociated to the certain user id and functions listed within the THE4BEES database. Based on thisdefinition, theDashboardallowsordoesn’t allowcertain functions. Inparticular,basic andadvancedusersandassociatedfunctionshavebeencreated.

1SeeDeliverable2.2.1ofTHE4BEESproject:IREES(2017).Knowledgebaseonefficientbehaviours

2Seethedeliverable3.1.2ofTHE4BEESproject:CSI(2017).ReportonSuggestionsandRecommendationsforITSystemArchitectures

5



Figure1:THE4BEESDashboardlog-inpage

2.2.2 DashboardHomepage

ThecontentoftheHomepageisdividedintofourmainblocks(Figure2).Thefigureswithinthefirstthree objects will represent an easily understandable information about energy consumption andsavings. This informationwill be adapted depends on the pilot context and target group. The fourthobjectoftheHomepageisdedicatedtohintsandtips.Thesystemfeedbackwillbepossiblycombinedwithadviceonhowtochangebehaviourandachieveenergysavings.

6



Figure2:THE4BEESdashboardhomepagedesign

2.2.3 DashboardComparisonpage

Comparisonpage addressnon-expertuser. Basedonpartners andCCLabsparticipants requests, theenergytrendandotherimportantdatawillbeshownonthepredefinedreports(Figure3).Thesearethefourconfigurationsof themaindashboardgraph(seetheChapter2.2.4DashboardEnergydetailspageformoredetailedexplanation).Themaingraphiscustomizedandmadesignificantforeachsinglepilot.

7



Figure3:THE4BEESDashboardComparisonPagedesign

2.2.4 DashboardEnergyDetailspage

The Energy Details page is designed for a wide range of potential users from energy manager todecisionmakers. This is themostcomplexpartof thedashboardandall theotherpagesprovidingcustomisedreportsarebasedontheEnergyDetailspagecoresolution.Thispartofthedashboardgivesuserapossibility tomonitorandanalysehistorical andnear real-timedata related toenergyandairquality.Thedatacomesfromsensors/energymetersinstalledwithinthepilotsandlinkedtotheSmart

8



Data Platform3. The customer has a possibility to visualize all the sensors related to the pilot. Oncereport diagram appears on the screen, there is a possibility to visualize and compare a number ofparameters such as energy consumption, energy usage, air quality, open/closedwindows (Figure 4).Only the sensors installed within the pilot and registered on the Smart Data Platform are availablewithintheDashboard.

Figure4:THE4BEESdashboarddetailspagedesign

Initially,the3inputfieldsandanemptygraphappearsonthescreen.Thekeyinformationinrealtime,suchasDate,Time,energyconsumptionsofar,andCO2emissionswillbevisualisedontheupperpartoftheEnergyDetailspage.

ThemainpartoftheEnergydetailspageconsistsofthefollowingfeatures(Figure5):

1. select time frame.The inputbox select timeframe for selecting theperiod tobevisualised ismandatory(defaultforallthepilots).Therearenolimitationsonstartingdate

3Seethedeliverable3.1.2ofTHE4BEESproject:CSI(2017).AdaptedSmartDataPlatform

9



2. selectdatagranularity(defaultforallthepilots).Theuserisinvitedtoselectdatagranularityfrom thededicated combo.Possible choiceondata granularity ismonthly,weekly, hourly.Toaggregate the data, we use the Smart Data Platform Statistical aggregation. It allows foraggregate extraction based on a time basis (as an example: timeGroupBy= month_year,timeGroupBy=hour_dayofmonth_month_year).Thischoiceisnotmandatory.Iftheuserdoesn’tselectanydatagranularityjustarawdatawillbevisualized.

3. selectsensor fromthe list.Theuserselectssensors tobevisualised fromthe list.Eachusercanseejustthelistofsensorsheisenabledandwithinthepilotonly. Thereisapossibilitytoselect one sensor a time. The system creates the sensor names to be visualized on the graphstartingfromtheinformationcomingfromSmartDataPlatfom.Thelogicappliedisasfollowing:ObjectnameasfromtheTHE4BEESdatabaseplusComponentnamefromtheSDPExample

des_object(tablet4b_t_object)+component_name(tablet4b_t_sensor)

4. viewdata.Theuserselectsviewdatabutton.Iftheuserhaschosentimeframeandasensorbutnot data granularity, the system effectuates the call to Smart Data Platform. The requestedsensorrawdatavaluesappearonthegraph(Figure5).TheunitsofmeasurementareretrievedfromtheSDPfieldUNITOFMEASUREMENT

Figure5:EnergyDetailspagedesign,theuserchoiceexample:Temperaturesensor

5. modify settings. The user can any time modify data granularity and time frame for chosensensor.The systemwill effectuatea call to SDP sendingnewparameters.Newmeasurementsappearonthescreen.Thereisalsoapossibilitytoresetallthepreferencesandclearthegraph

10



(byselectingtheresetbutton).Usercanselectanddeselectsensors,anddeletesensorfromthegraphusingthedeleteicon.

If theuserdoesnotmakeanychoice fortherequiredfieldsawarningdetailedmessageappears,e.g.:Pleaseselectthedatagranularity,Pleaseselectsensortobevisualized(Figure6).

Figure6:THE4BEESDashboardDetailspagedesign,warningmessageexample

6. SelectonemoresensorfromthelistThe user selects another sensor from the list. If the sensor has the same unit of measurement (theapplication verifies the field Unit ofMeasurementwithin the related SDP component) as the sensoralready visualized on the graph, the second sensor on the graph. If the unit of measurement of thesecond sensor is different than the first one, a warning message appears: “The sensors are notcomparable, would you like to cancel your previous search and visualize new sensor type?”. If userclicks“yes”,allthesensorsfromthefirstgraphwillbedeletedandthenewsensorwillbevisualizedonthegraph.Ifuserclicks“no”,nochangeswillbemade(Figure7).

11



Figure7:Warningmessage,THE4BEESdashboardDetailspagedesign

7. Viewcomparisonbutton

Tocomparevalueswithdifferentunitofmeasurements,asanexampleelectricalenergyconsumptionforlightingversusluminosity,theviewcomparisonoptionisavailablewithintheuserinterface. Onceuserselectsthisbutton,onemoregraphwillbevisualised.Allthefunctionalitiesalreadydescribedforthefirstgraphwillbeactive.Thesetwographscanbeusedforcomparisonofdatawithdifferentunitsofmeasurementsorforcomparisonwithindifferenttimeranges(Figure8).

12



Figure8:THE4BEESDashboardDetailsusecasedesign,comparisonpart

13



2.3 Targetusergroup

There are two target groups regardingdashboardwithin theTHE4BEESproject: thehigh level usersresponsible for energy efficiency and energy savings, and the target group that are users who willhopefullyactivelyparticipateintheprojectactivitiesandusethedashboardtoviewandmonitortheirenergyconsumptionsandeventualsavings.

Thehighleveluserssuchasenergymanagers,decisionmakersandotherpublicauthoritieswillbeprovidedwiththetoolformonitoringinnearreal-timetheenergyconsumptionandotherparametersrelated to energy efficiency/energy savings. The userswill be offered a possibility for benchmarkingwithinthepilot,statisticsandcomparisonstosetoutdifferentenergymanagement’sstrategies.

Another targetgroupwill includepupils fromschools, teachers,possiblyparents,mountainhutsvisitors,employees,andtenants.Membersofthistargetgroupwillbeofferedaneasyandastraight-forward tool for energy consumption monitoring. They will be given a clear idea on “what we aremeasuring”.Thedashboardwillbeavailableonpcandtabletandonthetotemsintheschools,offices,and mountain huts. By comparison between various energy related datasets and measurements“before” and “after” interventions, the users from this target group will see the difference theirbehaviourmakesintheenergysavings.

2.4 Prototypicalimplementation

THE4BEESdashboard is an easy-to-use browser-based application. Thedashboard technical solutionconsistsof3levels:datatier,middleware,andfrontend(Figure9).Therealbackofficefordatainputand management is beyond this project scope. We have created the ad hoc open source database(Figure 10) to simulate a back office and manage logical connection between Smart Data PlatformexternalserviceandtheTHE4BEESdashboard.

14



Figure9:THE4BEESDashboardtechnicalsolutionarchitecture

Data tier is implemented based on the database PostgreSQL. All the application configurations arestoredwithin the database. All themeasurements coming from sensors are storedwithin the SmartData Platform. For more detailed information on Smart Data Platform (SDP), please refer to theDeliverable3.1.Chapter2.2AdaptedSmartDataplatform4.

Middleware provides remote web services using the HTTP protocol. These web services allow forgatheringinformationfromthedatabaseandSDP.ThiswaywegetallthenecessarydataforTHE4BEESfrontend. The middleware is built using Java2PlatformEnterpriseEdition (j2ee), aplatform-independent,Java-centric environment from Sun for developing, building and deploying Web-basedenterpriseapplicationsonline,deployedonTomcat. TheApacheTomcatsoftware isdeveloped inanopenandparticipatoryenvironmentandreleasedundertheApacheLicenseversion2.

Frontend isawebbasedGraphicalUser Interfacedeveloped in JavaScriptwith the layoutbootstrapand a server component designed using Java technology. We are using the framework React-ReduxwhichcontrolsstatesinaJavaScript.Accordingtotheofficialsite,Reduxisapredictablestatecontainerfor JavaScript apps5.Redux Is a toolwhich allows for creating an applicationdefiningbasic interfacecomponents and integrating these components into more complex ones. The idea is to separatepresentationalcomponentsandacontainer.Thiswaythecomponentsaremucheasiertoreuse.

4Seethedeliverable3.1.2ofTHE4BEESproject:CSI(2017).ReportonSuggestionsandRecommendationsforITSystemArchitectures

5http://redux.js.org/

15



Figure10:THE4BEESdatabaseschema

The technical solution applied for THE4BEES dashboard implementation usesOpen Source libraries.The dashboard requires user logins, thus we paid a special attention to creating, maintaining andmanagingofuserprofilessothatuserscaneffectivelyinteractwiththedashboard.Oursolutionallowsa user to access multiple applications providing the user id and the password just once. If login issuccessful, the userwill be automatically redirected to the THE4BEES dashboardmain page.We aretakingcareofthesecurityissuesusingHTTPSprotocol.ThefirstreleaseoftheLoginandEnergyDetailspages(Figure11)willbeimplementedbytheendofSeptember 2017. Further developments will be made upon partners’ and CCLabs participantscomments.

16



Figure11:THE4BEESdashboardEnergydetailspageprototype,workinprogress

project the4bees – transnational holistic ecosystem 4 ... · initially, the 3 input fields and an...

Documents