Top Banner
Planting Awareness Eva Andritsopoulou Carl-Erik Kopseng Torbein Rein
29

Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Nov 07, 2018

Download

Documents

dinhlien
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Planting AwarenessEva AndritsopoulouCarl-Erik KopsengTorbein Rein

Page 2: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Introduction

Web-based teaching tool for monitoring plant growth under different environmental conditions

Integrates technology in the learning process

Page 3: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

What

● Builds on previous work; Plantagotchi● Web application to monitor plant growth● Made specifically for classroom use● Monitor how plants react under different

environmental circumstances over time

Page 4: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

For Whom

● Students from the lower secondary sector (age 13-14)

● Part of a teacher’s educational method

● Elective course - science specialization

Page 5: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Why● Interest in applications for learning process● Wanted to build a working application of a

reasonable size● Discover how the physical world can connect

with the virtual one (through Arduino/sensor technology)

● Make students more engaged in the learning procedure

Page 6: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

RequirementsConducted informal meeting with Mr Ole Andreas, a teacher at St. Sunniva.

After our discussion the following list of requirements was derived:

Page 7: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Requirements (1)

● Involve children in the process○ visit our university (UiO) ○ be present when we set up the plant○ able to pick the variables to change

Page 8: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Requirements (2)● Graphs should have a limited amount of

data points○ user group is unfamiliar with graphs○ fewer data points in the graphs ○ smoothed and simplified curves○ one graph for each monitored parameter

Page 9: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Requirements (3)● The sensor data should be downloadable

in a format suitable for Excel○ students use Excel when writing reports○ eases creation of graphs

Page 10: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Requirements (4)● More than one set of plants and sensors

required○ Needed for comparative study

Page 11: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Application-Architectures

Page 12: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Application-Technologies

● CanJS (MVC framework)

● jQuery (browser abstraction layer)

● Twitter Bootstrap (layout components)

Page 13: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

How it works● Three main views

○ Plantevalg○ Dag for dag○ Dag

● Functionalities

Page 14: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Plantevalg (Home page)

Page 15: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Dag for dag

Page 16: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Dag

Page 17: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

● Invited the class to IFI● Purpose: impress the kids● Tour ended in SONEN

○ displaying robots○ 3D printers○ self-made arcade machine

● Mission accomplished!

Project startup@IFI

Page 18: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

3D printers = wow factor

Page 19: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Presentation cont.: Sensors

Page 20: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Presentation cont.: Sensors

Page 21: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Presentation cont.: Sensors

Page 22: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Evaluation● Data gathering was problematic

○ School issues pushed project startup○ Project ended 4 days before delivery

● Some remote testing by teacher ● Performed a semi-structured interview with

the teacher at end of project● Teacher regarded the project a success!

Page 23: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Evaluation cont. ● The system did see use

in the classroom for learning

● Would be nice to have at school

● Too unstable at this point: commercial alternatives?

Page 24: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Video was a BIG hit, but ...

Page 25: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

The UX could be improved● It turned out that video would not play on

otherwise identical computers● There was a bug in the navigation, but was

easy to work around● The graph navigation should be sticky● Disabled caching caused performance

issues

Page 26: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Retrospect

Divergence from the initial plan● User involvement did not see manifestation

○ Too limited time○ Limited access to users

(students/teacher)● From many to just one variable

○ Cost issue

Page 27: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Future work

● Does the application actually increase the effects of learning?

● Finding ways of reducing the cost - are there ways of using commercially available alternatives? Using Mindstorms sets?

Page 28: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Reuse of Mindstorms sets?

Page 29: Torbein Rein Carl-Erik Kopseng Eva Andritsopoulou · CanJS (MVC framework) jQuery (browser abstraction layer) Twitter Bootstrap (layout components) How it works Three main views Plantevalg

Thank you!