You are on page 1of 45

ΕΛΛΗΝΙΚΟ ΑΝΟΙΚΤΟ ΠΑΝΕΠΙΣΤΗΜΙΟ, ΣΧΟΛΗ

ΘΕΤΙΚΩΝ ΕΠΙΣΤΗΜΩΝ ΚΑΙ ΤΕΧΝΟΛΟΓΙΑΣ
Πρόγραμμα Σπουδών Συστήματα Κινητού και
Διάχυτου Υπολογισμού ΣΔΥ60
Υπεύθυνη Δήλωση Φοιτητή: Βεβαιώνω ότι είμαι συγγραφέας αυτής
της εργασίας και ότι κάθε βοήθεια την οποία είχα για την
προετοιμασία αυτής της εργασίας, είναι πλήρως αναγνωρισμένη και
αναφέρεται μέσα στην εργασία. Επίσης έχω αναφέρει τις όποιες πηγές
από τις οποίες έκανα χρήση δεδομένων, ιδεών ή λέξεων, είτε αυτές
αναφέρονται ακριβώς είτε παραφρασμένες. Επίσης βεβαιώνω ότι αυτή
η εργασία προετοιμάστηκε από εμένα προσωπικά ειδικά για τη
συγκεκριμένη Θεματική Ενότητα.

Σκοπός ΓΕ
Ο βασικός στόχος της πρώτης ΓΕ είναι να γίνει μια εισαγωγή στο
Processing, στο Android SDK και στο Arduino, που αποτελούν τα
βασικά εργαλεία προγραμματισμού για αυτήν την ΘΕ. Θα
αξιοποιήσουμε το Processing για τη δημιουργία προγραμμάτων που
αφορούν την υπολογιστική όραση ως είσοδο για την αλληλεπίδραση με
τον υπολογιστή, το Android SDK για τη δημιουργία εφαρμογών
κινητών και το Arduino για τη γρήγορη δημιουργία πρωτοτύπων
διάχυτου υπολογισμού.

Προσδοκώμενα αποτελέσματα
Με την επιτυχή ολοκλήρωση αυτής της εργασίας, θα έχετε:
Α) μια πρώτη πρακτική εμπειρία προγραμματισμού της διάδρασης
ανθρώπου-υπολογιστή πέρα από το πληκτρολόγιο και το ποντίκι, και
με την χρήση μιας απλής κάμερας. Β) μια πρώτη πρακτική εμπειρία
δημιουργίας μια διαδραστικής εφαρμογής Γ) μια πρώτη θεωρητική
επαφή με υλικό δημιουργίας πρωτοτύπων.

Μέθοδος και παραδοτέα
Ο τρόπος εργασίας είναι ίδιος για όλα τα θέματα προγραμματισμού.
Αρχικά γίνεται εγκατάσταση του εργαλείου ανάπτυξης ή/και κάποιας

βιβλιοθήκης. Στην συνέχεια γίνεται εκτέλεση κάποιου απλού
παραδείγματος από αυτά που είναι διαθέσιμα είτε στο περιβάλλον
ανάπτυξης, ή/και στην αντίστοιχη βιβλιοθήκη, ή σε κάποια υπηρεσία
διαμοιρασμού κώδικα (π.χ., github, stackoverflow) ώστε να είναι
σίγουρο ότι όλα δουλεύουν. Στις περισσότερες περιπτώσεις το
ζητούμενο είναι μια μικρή μετατροπή του κώδικα του παραδείγματος
ώστε να εξυπηρετεί άλλο σκοπό.
Κάθε εργασία συνοδεύεται από ερωτήματα που αφορούν στην
αναζήτηση βιβλιογραφίας (άρθρα, λινκ, βίντεο). Στόχος είναι να
αναπτύξετε τις απαντήσεις σας ως μια κριτική σύνθεση, να επιλέξετε
τα καταλληλότερα άρθρα, να συνθέσετε συλλογισμούς από αυτά και
να παραθέσετε τη δική σας προοπτική. Σημαντικό είναι να τονίσουμε
ότι αναζητούμε κριτική σύνθεση και όχι απλά παράθεση εναλλακτικών
λύσεων-προτάσεων από διαφορετικές πηγές, οπότε η βαθμολόγηση
δίνει έμφαση στην ποιότητα και όχι στην ποσότητα των
βιβλιογραφικών αναφορών.
Παραδοτέα: Για κάθε ερώτημα που απαιτεί εκτέλεση κώδικα η
απάντηση θα πρέπει να περιλαμβάνει μία ή περισσότερες ενδεικτικές
οθόνες (screenshot) όπου θα φαίνεται τόσο το περιβάλλον ανάπτυξης
με τον κώδικα καθώς και το αποτέλεσμα της εκτέλεσης. Η αναφορά
περιέχει μόνο τις ενδεικτικές οθόνες, τις οποίες καλό είναι να έχετε
αποθηκεύσει σε χωριστό φάκελο (π.χ., images), ώστε να βεβαιωθείτε
ότι δεν είναι πολύ μεγάλες (π.χ., 100Kb για κάθε εικόνα είναι συνήθως
αρκετά). Ο πηγαίος κώδικας θα πρέπει να βρίσκεται σε ξεχωριστούς
φακέλους για κάθε ερώτημα. Βίντεο ή/και εκτελέσιμος κώδικας είναι
προαιρετικά και στέλνονται μόνο με κάποιο λινκ σε υπηρεσία
διαμοιρασμού αρχείων και όχι μέσω του study.eap.gr το οποίο έχει
πολύ μικρά περιθώρια για μεγάλα αρχεία, όπως μεγάλες εικόνες,
βίντεο, και εκτελέσιμα.

ΥΠΟΔΕΙΞΕΙΣ ΓΙΑ ΤΗ ΣΥΓΓΡΑΦΗ ΤΗΣ ΕΡΓΑΣΙΑΣ
Για την απάντηση της εργασίας θα πρέπει να χρησιμοποιηθεί το
υπόδειγμα της εργασίας. Οι περισσότερες απαντήσεις βασίζονται σε
ενδεικτικές οθόνες από την εκτέλεση λογισμικού, λεζάντες, σύντομες
περιγραφές, και αναφορές σε βιβλιογραφία. Οι πολλές εικόνες ειδικά
αν δεν έχουν επεξεργαστεί σωστά θα δημιουργήσουν μεγάλα αρχεία.
Επειδή οι ενδεικτικές οθόνες μπορεί να μεγαλώσουν πολύ το μέγεθος

του τελικού αρχείου ή να μην έχουν συνέπεια εμφάνισης σε
διαφορετικούς υπολογιστές (ειδικά σε προγράμματα όπως το Microsoft
Office), η τελικά αναφορά μπορεί να είναι σε PDF ή κατά προτίμηση σε
πηγαίο κείμενο markdown. Για την μετατροπή από markdown σε PDF ή
DOCX μπορείτε να χρησιμοποιήσετε το ελεύθερο λογισμικό pandoc.
Για την επεξεργασία των πηγαίων αρχείων markdown μπορείτε να
χρησιμοποιήσετε τον atom.io ή κάποιον παρόμοιο απλό επεξεργαστή
κειμένου που επιτρέπει την προεπισκόπιση (preview) του
φορμαρισμένου κειμένου με τις εικόνες.
Μην ξεχάσετε να δηλώσετε εάν η εργασία αποτελεί προϊόν
αποκλειστικά δικής σας εργασίας και να δώσετε αναφορά σε άρθρα
και κώδικα τα οποία χρησιμοποιήσατε.
Αν δεν έχετε απαντήσει σε ένα ερώτημα γράψτε ΔΕΝ ΑΠΑΝΤΗΘΗΚΕ.
Αν απαντήσατε με ελλείψεις σε ένα ερώτημα γράψτε ΑΠΑΝΤΗΘΗΚΕ
ΕΛΛΙΠΩΣ
Η συνεργασία στην ανάλυση της εργασίας επιτρέπεται, αλλά καλό
είναι να αναφερθεί στον ειδικό χώρο στην πρώτη σελίδα της
εργασίας. Η συνεργασία δεν πρέπει να οδηγεί σε από κοινού επίλυση
και συγγραφή της εργασίας. Η υποβολή κοινών απαντήσεων από
διαφορετικούς φοιτητές που συνεργάστηκαν δεν επιτρέπεται και
θεωρείται ως ΑΝΤΙΓΡΑΦΗ. Οι απαντήσεις ελέγχονται, τόσο μεταξύ
των φοιτητών του ιδίου τμήματος, όσο και μεταξύ φοιτητών
διαφορετικών τμημάτων. Η αντιγραφή έχει ως αποτέλεσμα το
ΜΗΔΕΝΙΣΜΟ ΤΗΣ ΕΡΓΑΣΙΑΣ ΣΥΝΟΛΙΚΑ και την παραπομπή των
παραβατών στην Κοσμητεία της Σχολής Θετικών Επιστημών &
Τεχνολογίας, σύμφωνα με τον εσωτερικό κανονισμό του ΕΑΠ.
Ο φοιτητής θα πρέπει να στείλει την εργασία με μορφή συμπιεσμένου
αρχείου zip ή rar. Το όνομα του αρχείου θα είναι:
SDYxx_xERG_EPITHETO_ONOMA.zip (συμπληρώστε ανάλογα με τον
κωδικό της ΘΕ xx και τον αριθμό x της εργασίας). Να γίνει χρήση
λατινικών χαρακτήρων για την αποφυγή προβλημάτων.
Το συμπιεσμένο αρχείο θα πρέπει να αποτελείται από: Ένα πηγαίο
αρχείο κειμένου με όνομα SDYxx_xERG_EPITHETO_ONOMA.md που θα
περιέχει την απάντηση της εργασίας (συμπληρώστε ανάλογα με τον
κωδικό της ΘΕ xx και τον αριθμό x της εργασίας). Ενα φάκελο που θα
περιέχει εικόνες της εργασίας σας. Ενα φάκελο με τον πηγαίο κώδικα.

H εφαρμογή των παραπάνω κανόνων είναι ΥΠΟΧΡΕΩΤΙΚΗ και
βαθμολογείται σύμφωνα με το αντίστοιχο κριτήριο αξιολόγησης. Η μη
εφαρμογή του πρώτου κανόνα μπορεί να οδηγήσει σε συνολική
απόρριψη της εργασίας.
# Μέρος Α Προγραμματισμός της διάδρασης, 20 μονάδες
Για αυτό το θέμα, το οποίο θα συναντήσουμε ξανά και στις επόμενες
ΓΕ, είναι βολικό να έχουμε μια εξωτερική κάμερα και τους σωστούς
οδηγούς για το λειτουργικό μας σύστημα, αλλά μπορεί να δουλέψει και
με την ενσωματωμένη κάμερα του φορητού. Ειδικά τα Ερωτήματα 1
και 2 είναι απαραίτητα και για τις επόμενες ΓΕ.

Ερώτημα 1 Processing installation & basic
skills
Ο σκοπός αυτού του ερωτήματος είναι να βεβαιωθούμε ότι έχουμε μια
σωστή εγκατάσταση του Processing και ότι κατέχουμε τις ελάχιστες
απαιτούμενες γνώσεις για να ξεκινήσουμε τον προγραμματισμό. Το
περιβάλλον Processing είναι διαθέσιμο δωρεάν για συστήματα
Windows, Mac, Linux: α) Να γίνει εγκατάσταση σύμφωνα με τις
οδηγίες που θα βρείτε εδώ: http://processing.org/download/ β) Να γίνει
εκτέλεση των παρακάτω παραδειγμάτων και ανάπτυξη των μικρών
παραλλαγών που περιγράφονται. Παράδειγμα 1ο:
http://processing.org/tutorials/drawing/ - Προσθέστε στο ανθρωπάκι
χέρια και αφτιά Παράδειγμα 2ο:
http://processing.org/examples/redraw.html - Προσπαθήστε η γραμμή
να μετακινείται προς τα πάνω ή προς τα κάτω ανάλογα με τη θέση
στην οποία προκλήθηκε το mouseclick - Ποιους άλλους event handlers
έχουμε στη διάθεσή μας; Παράδειγμα 3ο:
http://processing.org/examples/loaddisplayimage.html - Φορτώστε
τέσσερις εικόνες από διαφορετικές συσκευές διάχυτου υπολογισμού
στα τέσσερα άκρα της οθόνης Παράδειγμα 4ο:
http://processing.org/examples/objects.html - Προσθέστε ακόμη ένα
μοτίβο (πέρα από τα 4 υπάρχοντα) και περιγράψτε σε μια πολύ
σύντομη παράγραφο τη λειτουργία του παραδείγματος [5 μονάδες]

Απάντηση
Παράδειγμα 1ο: Για την προσθήκη των χαρακτηριστικών που
ζητούνται στο ανθρωπάκι, χρησιμοποιήθηκαν επιπλέον συναρτήσεις
ellipse() και line().

αποτέλεσμα της εκτέλεσης του
Παράδειγμα 2ο: Ακολουθεί παράδειγμα με screenshots με την γραμμή
που ανεβοκατεβαίνει ανάλογα με την μεριά που είναι το ποντίκι. Όταν
φτάσει τέρμα επάνω ή τέρμα κάτω γυρνάει κάτω ή πάνω αντίστοιχα.
Η υλοποίηση έγινε ελέγχοντας την μεταβλητή mouseY με μια if
συνθήκη. Εκτός από τον event handler mousePressed(), υπάρχουν και
τα mouseDragged(), mouseReleased(), mouseMoved() και
mouseWheel(). (SourceCode)

Εκτός από την συνάρτηση mousePressed() υπάρχουν και οι παρακάτω
event listeners, ανάλογα με την πηγή εισόδου που χρησιμοποιείται:
α) Ποντίκι: - mouseClicked() - mouseDragged() - mouseMoved() mouseReleased() - mouseWheel()

β) Πληκτρολόγιο: - keyPressed() - keyReleased() - keyTyped()
Παράδειγμα 3ο: Προκειμένου να εμφανιστούν οι φωτογραφίες στο 1/4
του αρχικού τους μεγέθους στις τέσσερις γωνίες του παράθυρου
εκτέλεσης, φορτώνουμε τέσσερις εικόνες και στην συνέχεια τις
τοποθετούμε με την βοήθεια της συνάρτησης image().

αποτέλεσμα της εκτέλεσης του
Παράδειγμα 4ο: Για να κατασκευαστούν τα μοτίβα, αρχικά
δημιουργείται η κλάση mRect, στην οποία δίνονται σαν ορίσματα τα
χαρακτηριστικά των μοτίβων, όπως αριθμός/μέγεθος γραμμών κτλ,
ενώ περιέχει και δύο συναρτήσεις: την move, η οποία κινεί το μοτίβο
με βάση την θέση του ποντικιού στο παράθυρο εκτέλεσης και την
display, η οποία οπτικοποιεί το μοτίβο με βάση τις τιμές των
χαρακτηριστικών που δόθηκαν. Για να εμφανιστούν τα μοτίβα
δημιουργούνται πέντε αντικείμενα mRect, τα οποία δέχονται
διαφορετικές τιμές το καθένα στην αρχικοποίηση τους για να
διαφέρουν οπτικά και διαφορετικές τιμές στην συνάρτηση τους move,
για να κινούνται με διαφορετικό τρόπο. Κατά την εκτέλεση, κάθε φορά
που κινούμε το ποντίκι μέσα στο παράθυρο εκτέλεσης, τα μοτίβα
κινούνται με βάση τις τιμές της συνάρτησης move.

αποτέλεσμα της εκτέλεσης του

Ερώτημα 2 – Video capture
Ο σκοπός αυτού του ερωτήματος είναι να συνδέσουμε το Processing
με την κάμερα του ΗΥ. Για να συμβεί αυτό θα πρέπει να
εγκαταστήσετε τη βιβλιοθήκη Video επιλέγοντας Sketch -> Import
Libraries ->Add Libraries -> Video Στη σελίδα
https://processing.org/reference/libraries/ θα βρείτε περισσότερες
πληροφορίες. Η σύνδεση του ΗΥ με κάμερα και η σωστή σύνδεση στο
Processing εξαρτάται από την κάμερα, το είδος του λειτουργικού
συστήματος που έχετε καθώς και από την έκδοση του Processing. Σε
ορισμένες περιπτώσεις, παλιότερες εκδόσεις του Processing μπορεί να
λειτουργούν καλύτερα. Αν όλα γίνουν σωστά τότε θα μπορείτε να
τρέξετε το απλό παράδειγμα
https://www.processing.org/reference/libraries/video/Capture.html
Περισσότερη βοήθεια θα βρείτε εδώ:
http://itp.nyu.edu/varwiki/ClassWork/Processing-Video-ICM-Advice-F10
[5 μονάδες]

Απάντηση

Aποτέλεσμα της εκτέλεσης του παραδείγματος

Ερώτημα 3 – Εγκατάσταση βιβλιοθήκης QR
Να γίνει εγκατάσταση της βιβλιοθήκη QRCode, με βάση τις οδηγίες
του προηγούμενου παραδείγματος Να γίνει εκτέλεση του
παραδείγματος http://shiffman.net/p5/qrcode-processing/ (βρίσκεται
μέσα στο συμπιεσμένο φάκελο που μπορείτε να κατεβάσετε από την
ιστοσελίδα) Φτιάξτε ένα δικό σας QR code που να αντιστοιχεί σε μια
ιστοσελίδα: http://www.qr-code-generator.com/ Σε συνδυασμό με το
παράδειγμα που βρίσκεται στη θέση File -> Examples -> Libraries ->
Network -> HTTPClient, αλλάξτε την αρχική εφαρμογή ώστε να
τυπώνεται ο κώδικας της ιστοσελίδας που αντιστοιχεί στο QR code,
όταν αυτό αναγνωρίζεται.
[5 μονάδες]

Απάντηση
Προκειμένου να τυπώνεται στην κονσόλα του Processing η διεύθυνση
της σελίδας που ανακτήσαμε από το QR Code, αρκεί να

δημιουργήσουμε μια μεταβλητή String, την data, στην οποία στη
συνέχεια αναθέτουμε τη διεύθυνση που ανακτήσαμε μέσω του
decoder, ενώ την τυπώνουμε χρησιμοποιώντας την εντολή:
println(data).

αποτέλεσμα της εκτέλεσης του

Ερώτημα 4 - Εφαρμογή
Βρείτε και περιγράψτε συνοπτικά 5 διαφορετικά βίντεο αξιοποίησης
του Processing σε συνδυασμό με Arduino για τη δημιουργία μιας
διαφορετικής «εισόδου» προς τον υπολογιστή. Π.χ.
https://www.youtube.com/watch?v=KLOB-T1mgdY Αναλύστε ποια είναι
τα χαρακτηριστικά «εισόδου» στο υπολογιστικό σύστημα στο
εκάστοτε παράδειγμα; [5 μονάδες]

Απάντηση
1

https://www.youtube.com/watch?v=0fBA_kkc-qE

Σε αυτό το βίντεο παρουσιάζεται ένα σύστημα ανίχνευσης προσώπου.
Σαν είσοδος χρησιμοποιείται μια webcamera, η οποία μεταφέρει το
σήμα της στο περιβάλλον του Processing, ενώ με την χρήση
μηχανισμού Arduino η κάμερα κινείται συνεχώς προκειμένου να
ακολουθεί και να καταγράφει το πρόσωπο του χρήστη.

2

https://www.youtube.com/watch?v=kQRYIH2HwfY

Εμφανίζει ένα σύστημα εντοπισμού αντικειμένων. Σαν είσοδος
χρησιμοποιείται ένας αισθητήρας υπερήχων, ο οποίος εντοπίζει τα
αντικείμενα που βρίσκονται στο βεληνεκές του. Ο αισθητήρας είναι
συνδεδεμένος με το Arduino, στο οποίο είναι συνδεδεμένο και ένα
μικρό μοτέρ, το οποίο κινεί τον αισθητήρας για να καλύπτει
περισσότερη επιφάνεια ανίχνευσης. Το σήμα που λαμβάνεται από τον
αισθητήρα μεταφέρεται στο περιβάλλον του Processing, όπου
οπτικοποιείται δίνοντας μια ρεαλιστική μικρογραφία ενός ραντάρ.
3

https://www.youtube.com/watch?v=H2Qs0ff6jjg

Είναι ένα παιχνίδι στο οποίο ο παίκτης ελέγχει μια μπάλα φυσώντας
και προσπαθεί να αποφεύγει τα εμπόδια. Η είσοδος αποτελείται από
έναν αισθητήρα πίεσης που έχει προσαρμοστεί σε ένα Arduino, ενώ το
σήμα μεταφέρεται στο περιβάλλον του Processing. Ο παίκτης
φυσώντας με διαφορετική δύναμη, μεταβάλλει την πίεση που προκαλεί
στον αισθητήρα και με τον τρόπο αυτό η μπάλα μετακινείται πάνωκάτω.
4

https://www.youtube.com/watch?v=2_c0yE9QHNI

Με το σύστημα γίνεται καταγραφή των χτύπων της καρδιάς. Η
είσοδος του συστήματος είναι ένας αισθητήρας υπερύθρων, ο οποίος
είναι συνδεδεμένος μαζί με μια πηγή υπερύθρων σε ένα board Arduino.
Ο χρήστης ακουμπά το χέρι του πάνω σε μια επιφάνεια και δέχεται την
υπέρυθρη ακτινοβολία, η οποία αντανακλάται ανάλογα με την ροή του
αίματος και επιστρέφει στον αισθητήρα. Το σήμα μεταφέρεται στο
περιβάλλον του Processing, όπου οπτικοποιείται εμφανίζοντας τους
χτύπους της καρδιάς στην οθόνη του υπολογιστή
5

https://www.youtube.com/watch?v=ofhwCnES-r0

Στο βίντεο περιγράφεται ένα σύστημα καταγραφής και απεικόνισης
της θερμοκρασίας. Σαν είσοδο χρησιμοποιείται ένας αισθητήρας
θερμότητας, ο οποίος είναι συνδεδεμένος σε ένα Arduino. Οι τιμές που
λαμβάνουμε από τον αισθητήρα μεταφέρονται στο περιβάλλον του
Processing, όπου δημιουργείται η γραφική απεικόνιση της
θερμοκρασίας.

Μέρος B – Αναλυση και Σχεδίαση, 40 μονάδες
Για την επιστημονική βιβλιογραφία θα βρείτε πολλά σχετικά άρθρα
στο Research Gate. Τα άρθρα που θα διαλέξετε θα πρέπει να έχουν
τουλάχιστον δύο ετεροαναφορές/έτος (σύμφωνα με το Google Scholar)
και να έχουν δημοσιευτεί μετά το 2010. Η αναφορά των άρθρων στο
κείμενο σας θα πρέπει να γίνει με το στυλ APA και θα πρέπει να
βρίσκεται κάτω από την ανάλυση για κάθε άρθρο.

Ερώτημα 1 – Θεωρία για Ανθρωποκεντρική
Σχεδίαση
Υποθέστε ότι είστε σύμβουλος σε ένα έργο δημιουργίας μιας διεπαφής
για την διαδραστική τηλεόραση για εφαρμογές ενημέρωσης (π.χ.,
καιρός, αθλητικά, κτλ). Ο υπεύθυνος του έργου, είναι καλός γνώστης
στο πεδίο του προγραμματισμού διεπαφής ανθρώπου υπολογιστή αλλά
δε γνωρίζει αρκετά για τα ιδιαίτερα χαρακτηριστικά της
διαδραστικής τηλεόρασης. Σας ζητά να του παραδώσετε Α) ποιες
είναι βασικές κατευθυντήριες γραμμές σχεδίασης της διαδραστικής
τηλεόρασης, ποιες είναι οι βασικές παράμετροι ευχρηστίας της
διαδραστικής τηλεόρασης Β) μια λίστα με τις μεθοδολογίες που
χρησιμοποιούν οι περισσότεροι για να καταγράψουν τις ανάγκες των
χρηστών για την διαδραστική τηλεόραση. Η αναφορά σας (2 λίστες
στοιχείων) δε θα πρέπει να ξεπερνά τις 2 σελίδες (500-1000 λέξεις)
μαζί με τη βιβλιογραφία. Υπάρχουν πολλές αντίστοιχες πραγματικές
απαιτήσεις καθημερινά σε επιχειρήσεις και ερευνητικά σχεδιαστικά
έργα που απαιτούν τη δημιουργία μιας γρήγορη μελέτης σε
υποστηρικτικά πεδία της κεντρικής δράσης. Απαιτούν καλά
επιλεγμένη πολλαπλή βιβλιογραφία ώστε να δημιουργηθεί μια επικαιρη
προκαταρκτική χαρτογράφηση των τελευταίων εξελίξεων σε ένα νέο
πεδίο σε πολύ σύντομο χρονικό διάστημα και με ένα πολύ απλό και
σαφή τρόπο. Η συγκεκριμένη εργασία προσπαθεί να προσομοιώσει μια
τέτοια περίσταση. Η απάντησή σας πρέπει να περιλαμβάνει μια λίστα
από σημεία που αναλύονται πολύ σύντομα και προέρχονται από
τουλάχιστον 6-7 ποιοτικά άρθρα. Θα αξιολογηθεί το πόσο
ολοκληρωμένη είναι η λίστα των προτεινόμενων σημείων, η σαφήνεια,
η ακρίβεια και η συντομία των νοημάτων σε σχέση το συγκεκριμένο
πρόβλημα και ο αριθμός των άρθρων για να νιώσει περισσότερο
ασφαλής αυτός που θα μελετήσει την αναφορά σας. Σε κάθε

μεταβλητή/σημείο/στοιχείο που παραθέτετε θα πρέπει να αναφέρετε
τις βιβλιογραφικές πηγές σας. Στόχος δεν είναι να διαβάσετε σε
βάθος τα διαφορετικά άρθρα αλλά να αντλήσετε γρήγορα και
προσεκτικά τις πληροφορίες που σας ενδιαφέρουν από πολλά άρθρα.
[15 μονάδες] ### Απάντηση Παρακάτω παρουσιάζονται τα κυριότερα
συμπεράσματα που προέκυψαν μετά από μελέτη της σχετικής
βιβλιογραφίας. Μετά από κάθε σημείο υπάρχουν παραπομπές προς τις
αντίστοιχες επιστημονικές εργασίες. Πλήρης κατάλογος των
βιβλιογραφικών αναφορών υπάρχει στο τέλος της απάντησης του
ερωτήματος.
Α) Σε ό,τι αφορά τις βασικές κατευθυντήριες γραμμές σχεδίασης της
διαδραστικής τηλεόρασης τα σημεία στα οποία συγκλίνουν οι
περισσότερες εργασίες είναι:

Σχεδιασμός κατά το πρώτυπο MVC (Model - View - Controller) ώστε
να είναι δυνατή η θέαση του περιεχομένου, η πρόσβαση στο
συμπληρωματικό υλικό ή ο έλεγχος της εφαρμογής από
εναλλακτικές συσκευές με χρήση διαφορετικών viewers [4].

Προσανατολισμός στην διασκέδαση. Δεν πρέπει να μας διαφεύγει
ότι η τηλεόραση είναι κατά κύριο λόγο μέσο διασκέδασης και ώς
τέτοιο θα πρέπει να το αντιμετωπίζουν οι εφαρμογές μας [4].

Υποστήριξη συμπεριφορών κοινωνικής θέασης. Σε κάθε περίπτωση
θα πρέπει να δημιουργούνται ευκαιρίες κοινωνικής
συναναστρωφής τόσο τοπικά όσο και απομακρυσμένα [3], [4], [6].

Χαλαρή πλοήγηση. Η πληροφορία θα πρέπει να προσφέρεται στο
χρήση διαθέσιμη για εξερεύνηση και όχι να πρέπει να είναι
αντικείμενο αναζήτησης από την πλευρά του [4], [6] [8].

Πολλαπλά επίπεδα προσοχής τόσο στην κύρια οθόνη απεικόνισης
του περιεχομένου όσο και ενδεχόμενες συμπληρωματικές οθόνες
απεικόνισης [4], [3], [8].

Απλότητα στον χειρισμό. Η τηλεόραση είναι ένα μέσο στο οποίο ο
βασικός έλεγχος γίνεται από το χειριστήριο. Θα πρέπει η
περισσότερες και ουσιαστικότερες λειτουργίες να είναι εύκολα
προσβάσιμες [4], [6], [8].

Δεν θα πρέπει το διαδραστικό περιεχόμενο να προκαλεί όχληση
στη θέαση του κύριο περιεχομένου. Τόσο οι ειδοποιήσεις όσο και οι
επιπλέον πληροφορίες θα πρέπει να συνυπάρχουν αρμονικά με το

περιεχόμενο του προγράμματος. Για παράδειγμα όταν
εμφανίζονται επεξηγηματικές πληροφορίες θα μπορεί η κύρια
οθόνει να κλιμακώνεται και να εμφανίζεται σε μικρότερο μέγεθος
[4], [6], [8].

Δυνατότητα για παραμετροποίηση και προσωποποίηση τόσο του
περιεχομένου όσο και του χειρισμου ανάλογα με την πληροφορία
πλαισίου του χρήστη [4], [6].

Ο χρήστης πρέπει να αποτελεί ουσιαστικό συστατικό της
διαδραστικής εμπειρίας και να έχει τη δυνατότητα να τροποποιεί
ή να δημιουργεί νέο περιεχόμενο [2], [6], [8].

Δυνατότητα υπηρεσιών προστιθέμενης αξίας τόσο από τον
παραγωγό του περιεχομένου (συμπληρωματικό υλικό, trivia κλπ)
όσο και από τον θεατή (παραθέσεις, δημοσκοπήσεις κλπ) [3].

Εύκολη ανακαλυψιμότητα του διαδραστικού περιεχομένου αλλά
και το διαθέσιμων συσκευών χειρισμού του [3], [6].

Προσβασιμότητα η οποία θα λαμβάνει υπόψει τόσο της
ιδιαιτερότητες του περιβάλλοντος (φωτισμός, διαθέσιμες
συσκευές) αλλά και το γεγονός ότι κάποιοι χρήστες μπορεί να
παρουσιάζουν ιδιαίτερα χαρακτηριστικά (π.χ. αχρωματοψία,
κινητικά προβλήματα) στον σχεδιασμό της διεπαφής και των
περεχόμενων δυνατοτήτων χειρισμού της [1], [6].

Θα πρέπει να περέχεται η χρήση συμπληρωματικών συσκευών (π.χ.
smartphone ή tablet) είτε για τη θέαση διαδραστικού
περιεχομένου είτε για τον έλεγχο της εφαρμογής [2], [3], [6], [8].

Σε ό,τι αφορά τις βασικές παραμέτρους ευχριστίας της διαδραστικής
τηλεόρασης τα σημεία στα οποία καταλήγουν οι περισσότερες
εργασίες είναι:

Επισήμανση του διαδραστικού περιεχομένου αλλά χωρίς να
προκαλείται όχληση στο κύριο περιεχόμενο [4], [7].

Η πληροφορία πλαισίου του χρήστη πρέπει να λαμβάνεται υπόψη
και η παρεχόμενες λειτουργίες και πληροφορίες να
προσαρμόζονται σε αυτή [4], [6], [7].

Απαιτείται προσεκτικός συγχρονισμός ανάμεσα σε ζωντανό
πρόγραμμα και διαδραστικό περιεχόμενο. Εδώ πρέπει να ληφθεί

υπόψη ότι διαφορετικοί χρήστες έχουν διαφορετικούς χρόνους
αντίδρασης και ολοκλήρωσης εργασιών [4], [7].

Απλότητα και ευκολία χρήσης λαμβάνοντας υπόψη της
ιδιαιτερότητες χειρισμού μιας εφαρμογής τηλεόρασης. Ο
χειρισμός θα πρέπει να γίνεται με φυσικό και διαισθητικό τρόπο
[3], [4], [7], [8].

Καθοδήγηση του χρήση και ανάκαμψη από λάθη. Παρά την
απλότητα και ευκολία χρήσης σε κάθε βήμα θα πρέπει να υπάρχει
καθοδήγηση του χρήστη και δυνατότητα να αναιρέσει
λανθασμένες κινήσεις [4], [7].

Ψηφιακή σύγκλιση με υπάρχουσες διαδεδομένες συσκευές και
τεχνολογίες [2], [4].

Χρήση δευτερεουσών συσκευών απεικόνισης για πρόσβαση στο
διαδραστικό περιεχόμενο ή ευκολότερο έλεγχο [2], [3], [8].

Καθυστερημένη προβολή ώστε να μην προσαρμόζεται ο χρήστης
στην εφαρμογή [3], [7].

Δυνατότητα επαναπαρακολούθησης του περιεχομένου όταν αυτό
είναι αναγκαίο [3].

Το διαδραστικό περιεχόμενο θα είναι παράγοντας ενεργοποίησης
του χρήστη και όχι λόγος περίσπασής του από το ζωντανό
πρόγραμμα [3].

Παρουσίαση πληροφορίας με δομημένο τρόπο [6].

Προσβασιμότητα από ανθρώπους με ιδιαιτερότητες [1].

Β) Οι μέθοδοι που χρησιμοποιήθηκαν στις περισσότερες εργασίες για
την καταγραφή των αναγκών των χρηστών συνοψίζονται ως εξής:

Σε όλες τις εργασίες χρησιμοποιήθηκε σχεδίαση επικεντρωμένη
στον χρήστη (User Centered Design - UCD) [2], [3], [4], [5], [6],
[7].

Αποσύνδεση των στόχων σε επιμέρους εργασίες/βήματα [4].

Μερικώς δομημένες συνεντεύξεις με δυνητικούς χρήστες στις
οποίες μέρος των απαντήσεων ήταν ανοικτές [2], [3], [4].

Ερωτηματολόγια για προσδιορισμό απαιτήσεων ή ποσοτού
κάλυψης προσδοκιών από τους χρήστες [1], [4].

Ευρετική αξιολόγηση κατά την οποία ειδικοί στον χώρο εξετάζουν
την εφαρμογή ως προς γνωστές αρχές και κατευθυντήριες
γραμμές [4], [5], [6], [7].

Δοικιμές σε εργαστήριο από ομάδες χρηστών όπου γίνονταν είτε
ελεύθερη χρήση, είτε καθοδηγούμενη είτε εκτελούνταν
συγκεκριμένα σενάρια χρήσης [2], [3], [4].

Χρήση πρωτοτύπων (πρώτων, λειτουργικών και τελικών) σε όλες
τις φάσεις των δοκιμών με χρήστες [2], [4].

Focus group όπου οι χρήστες εκλήθησαν να σκεφτούν μεγαλόφωνα
και να συζητήσουν τις εντυπώσεις και τις εμπειρίες τους από τη
χρήση των εφαρμογών [2].

ΒΙΒΛΙΟΓΡΑΦΙΚΕΣ ΑΝΑΦΟΡΕΣ 1. Coelho, J., Duarte, C., Biswas, P., &
Langdon, P. (2011, October). Developing accessible TV applications. In
The proceedings of the 13th international ACM SIGACCESS conference
on Computers and accessibility (pp. 131-138). ACM. 2. Fleury, A.,
Pedersen, J. S., Baunstrup, M., & Larsen, L. B. (2012). Interactive TV:
Interaction and control in second-screen TV consumption. In 10th
European Interactive TV Conference (pp. 104-107). 3. Geerts, D.,
Leenheer, R., De Grooff, D., Negenman, J., & Heijstraten, S. (2014,
June). In front of and behind the second screen: viewer and producer
perspectives on a companion app. In Proceedings of the 2014 ACM
international conference on Interactive experiences for TV and online
video (pp. 95-102). ACM. 4. Martins, D. S., Oliveira, L. S., & Pimentel, M.
D. G. C. (2010, September). Designing the user experience in iTVbased interactive learning objects. In Proceedings of the 28th ACM
International Conference on Design of Communication (pp. 243-250).
ACM. 5. Rusu, C., Roncagliolo, S., Rusu, V., & Collazos, C. (2011,
February). A methodology to establish usability heuristics. In Proc. 4th
International Conferences on Advances in Computer-Human
Interactions (ACHI 2011), IARIA (pp. 59-62). 6. Solano, A., Rusu, C.,
Collazos, C. A., & Arciniegas, J. (2013). Evaluating interactive digital
television applications through usability heuristics/Evaluando
aplicaciones de televisión digital interactiva a través de heurísticas de
usabilidad. Ingeniare: Revista Chilena de Ingenieria, 21(1), 16. 7.
Solano, A., Rusu, C., Collazos, C., Roncagliolo, S., Arciniegas, J. L., &
Rusu, V. (2011). Usability Heuristics for Interactive Digital Television. In
The Third International Conference on Advances in Future Internet (pp.

60-63). 8. Vatavu, R. D. (2013, June). There's a world outside your TV:
exploring interactions beyond the physical TV screen. In Proceedings of
the 11th european conference on Interactive TV and video (pp. 143152). ACM.

Ερώτημα 2 – Ανάλυση
Μελετήστε ενημερωτικές εφαρμογές (π.χ., καιρός, αθλητικά, κτλ)
διαδραστικής τηλεόρασης για τις ακόλουθες συσκευές χρήστη
(τουλάχιστον πέντε εφαρμογές συνολικά). * Apple TV * Android TV *
Samsung Smart TV Μπορείτε να δείτε print-screen από τις εφαρμογές
είτε από το iTunes/Play Store, είτε απλά αναζητώντας με το όνομά
τους στο http://images.google.com Επιλέξτε δύο οθόνες από κάθε
εφαρμογή και προσπαθήστε να εξάγετε τις αρχές ευχρηστίας που
προσπαθούν να ικανοποιήσουν. Ο προσανατολισμός της εργασίας είναι
στην αναγνώριση των δομικών στοιχείων των διεπαφών που
ικανοποιούν τους στόχους του χρήστη και όχι στα τυχόν προβλήματα
ευχρηστίας τους. [10 μονάδες]

Απάντηση
Μελετήθηκαν οι εφαρμογές ενημερωτικού χαρακτήρα The Economist,
Bloomberg TV και RAI TV για πλατφόρμα Android TV και BBC News και
CNBC Real Time για πλατφόρμα Samsung TV. Σε ό,τι αφορά τις αρχές
ευχρηστίας παρατηρήθηκαν τα εξής:
Bloomberg TV (Android TV)

Image 17

Image 18

O σκοπός της εφαρμογής είναι προφανής και εύκολα κατανοητός
από το χρήστη.

Η διεπαφή του χρήστη είναι απλή και δεν είναι παραφορτωμένη με
πληροφορία.

Υπάρχει συνέπεια του χειρισμού και των εικονιδίων ελέγχου σε
διαφορετικές οθόνες της εφαρμογής.

Χρησιμοποιούνται επαρκή μεγέθη γραμματοσειρών και
αποφεύγεται η χρήση προβληματικών χρωμάτων (κόκκινο,
πράσινο).

Η πλοήγηση γίνεται με φυσικό και διαισθητικό τρόπο.

Ο χρήστης καλείται να επιλέξει πληροφορία από αυτή που
παρουσιάζεται μπροστά του χωρίς να χρειάζεται να την
αναζητήσει.

Η πληροφορία παρουσιάζεται οργανωμένη με δομημένο τρόπο
(εκπομπές, θεματικά, κλπ).

Δίνεται η δυνατότητα για δημιουργία εξατομικευμένου
περιεχομένου από τον χρήστη μέσω λιστών αναπαραγωγής.

Χρήση πληροφορίας πλαισίου χρήστη (π.χ. Χώρα) για προσαρμογή
του περιεχομένου.

Δίνεται η δυνατότητα για καθυστεριμένη αναπαραγωγή ή
επανάληψη του περιεχομένου ανάλογα με τις επιθυμίες του
χρήστη.

The Econmomist (Android TV)

Image 19

Image 20

O σκοπός της εφαρμογής είναι προφανής και εύκολα κατανοητός
από το χρήστη.

Η διεπαφή του χρήστη είναι απλή και δεν είναι παραφορτωμένη με
πληροφορία.

Υπάρχει συνέπεια του χειρισμού και των εικονιδίων ελέγχου σε
διαφορετικές οθόνες της εφαρμογής.

Χρησιμοποιούνται επαρκή μεγέθη γραμματοσειρών και
αποφεύγεται η χρήση ουδέτερων χρωμάτων.

Η πλοήγηση γίνεται με φυσικό και διαισθητικό τρόπο.

Ο χρήστης καλείται να επιλέξει πληροφορία από αυτή που
παρουσιάζεται μπροστά του χωρίς να χρειάζεται να την
αναζητήσει.

Παρουσιάζεται αυτόματα περιεχόμενο σχετικό με αυτό που παίζει
ζωντανά.

Η πληροφορία παρουσιάζεται οργανωμένη με δομημένο τρόπο
(εκπομπές, θεματικά, κλπ).

Δίνεται η δυνατότητα για δημιουργία εξατομικευμένου
περιεχομένου από τον χρήστη μέσω λιστών αναπαραγωγής.

Χρήση πληροφορίας πλαισίου χρήστη (π.χ. Χώρα) για προσαρμογή
του περιεχομένου.

Δίνεται η δυνατότητα για καθυστερημένη αναπαραγωγή ή
επανάληψη του περιεχομένου ανάλογα με τις επιθυμίες του
χρήστη.

RAI TV (Android TV)

Image 21

Image 22

O σκοπός της εφαρμογής είναι προφανής και εύκολα κατανοητός
από το χρήστη.

Η διεπαφή του χρήστη είναι απλή και δεν είναι παραφορτωμένη με
πληροφορία.

Υπάρχει συνέπεια του χειρισμού και των εικονιδίων ελέγχου σε
διαφορετικές οθόνες της εφαρμογής.

Χρησιμοποιούνται επαρκή μεγέθη γραμματοσειρών και
αποφεύγεται η χρήση ουδέτερων χρωμάτων.

Η πλοήγηση γίνεται με φυσικό και διαισθητικό τρόπο.

Ο χρήστης καλείται να επιλέξει πληροφορία από αυτή που
παρουσιάζεται μπροστά του χωρίς να χρειάζεται να την
αναζητήσει.

Η πληροφορία παρουσιάζεται οργανωμένη με δομημένο τρόπο
(εκπομπές, είδος).

Δίνεται η δυνατότητα για καθυστερημένη αναπαραγωγή ή
επανάληψη του περιεχομένου ανάλογα με τις επιθυμίες του
χρήστη.

BBC News (Samsung TV)

Image 23

Image 24

O σκοπός της εφαρμογής είναι προφανής και εύκολα κατανοητός
από το χρήστη.

Η διεπαφή του χρήστη είναι απλή και δεν είναι παραφορτωμένη με
πληροφορία.

Υπάρχει συνέπεια του χειρισμού και των εικονιδίων ελέγχου σε
διαφορετικές οθόνες της εφαρμογής.

Δίνονται οδηγίες στον χρήστη για το τρόπο χειρισμού της
εφαρμογής στο δεδομένο σημείο που βρίσκεται.

Χρησιμοποιούνται επαρκή μεγέθη γραμματοσειρών και
αποφεύγεται η χρήση ουδέτερων χρωμάτων.

Η πλοήγηση γίνεται με φυσικό και διαισθητικό τρόπο.

Κυριαρχεί το ζωντανό περιεχόμενο και το διαδραστικό δρα
συμπληρωματικά.

Ο χρήστης καλείται να επιλέξει πληροφορία από αυτή που
παρουσιάζεται μπροστά του χωρίς να χρειάζεται να την
αναζητήσει.

Παρουσιάζεται αυτόματα περιεχόμενο σχετικό με αυτό που παίζει
ζωντανά.

Η πληροφορία παρουσιάζεται οργανωμένη με δομημένο τρόπο
(εκπομπές, θεματικά, κλπ).

Δίνεται η δυνατότητα για καθυστερημένη αναπαραγωγή ή
επανάληψη του περιεχομένου ανάλογα με τις επιθυμίες του
χρήστη.

CNBC Real Time (Samsung TV)

Image 25

Image 26

O σκοπός της εφαρμογής είναι προφανής και εύκολα κατανοητός
από το χρήστη.

Η διεπαφή του χρήστη είναι απλή.

Δίνονται οδηγίες στον χρήστη για το τρόπο χειρισμού της
εφαρμογής στο δεδομένο σημείο που βρίσκεται.

Υπάρχει συνέπεια του χειρισμού και των εικονιδίων ελέγχου σε
διαφορετικές οθόνες της εφαρμογής.

Χρησιμοποιούνται επαρκή μεγέθη γραμματοσειρών και
αποφεύγεται η χρήση ουδέτερων χρωμάτων.

Ζωντανό περιεχόμενο και διαδραστικό συνυπάρχουν. Όποτε
απαιτείται το διαδραστικό περνάει σε πρώτο πλάνο.

Ο χρήστης καλείται να επιλέξει πληροφορία από αυτή που
παρουσιάζεται μπροστά του χωρίς να χρειάζεται να την
αναζητήσει.

Παρουσιάζεται αυτόματα περιεχόμενο σχετικό με αυτό που παίζει
ζωντανά.

Δίδεται η δυνατότητα στο χρήστη να πάρει εξατομικευμένη
πληροφορία (π.χ. για το χαρτοφυλάκιό του) μέσω προσωπικών
ρυθμίσεων.

Αρμονική ψηφιακή σύγκλιση ζωντανού προγράμματος και
ζωντανών πληροφοριών από το διαδίκτυο.

Δίνεται η δυνατότητα για καθυστερημένη αναπαραγωγή ή
επανάληψη του περιεχομένου ανάλογα με τις επιθυμίες του
χρήστη.

Ερώτημα 3 – Σχεδίαση εφαρμογής
Να σχεδιάσετε με τουλάχιστον δύο τεχνικές (σενάριο: Dix 5.5,
ενδεικτικές οθόνες Dix 5.7, βίντεο, storyboard) ένα σύστημα
διάδρασης που να αναφέρεται (παραλλαγή, επέκταση, κτλ) στο
προηγούμενο ερώτημα. Για τον σχεδιασμό θα πρέπει ακόμη να
αναφέρετε: 1) προφιλ χρήστη, 2) στόχος χρήστη, 3) πλαίσιο χρήσης,
καθώς και 4) τις βασικές οδηγίες σχεδίασης που εφαρμόσατε (Dix
4,5). Μερικά εργαλεία και έμπνευση για τον σχεδιασμό της διεπαφής
με τον χρήστη θα βρείτε εδώ: http://protomoto.com/ [15 μονάδες]

Απάντηση
Σενάριο Weather2Work

Ο Γιώργος, 29 χρονών, μένει στην Αθήνα και εργάζεται σε μια εταιρία
πληροφορικής. Προτιμάει να κινείται με τα μέσα μαζικής μεταφοράς,
καθώς είναι δύσκολο να βρει να παρκάρει στους δρόμους που
βρίσκεται η εταιρία που δουλεύει, αλλά δυστυχώς στην Αθήνα, συχνάπυκνά γίνονται απεργίες στα μέσα μαζικής μεταφοράς.
Οι τρόποι που μπορεί να πάει στη δουλειά του με τα μέσα μαζικής
μεταφοράς είναι οι εξής: - Μπορεί να πάρει το ποδήλατο και να πάει
μέχρι το σταθμό του μετρό. Το μετρό θα τον αφήσει σχετικά κοντά
στη δουλειά του, που φτάνει μετά από λίγα ακόμη λεπτά ποδηλασίας. Μπορεί να χρησιμοποιήσει το λεωφορείο που έχει στάση ακριβώς έξω
από το σπίτι του και τον αφήνει κοντά στη δουλειά του στην οποία
φτάνει περπατώντας μετά από ελάχιστο περπάτημα. Το μειονέκτημα
εδώ είναι ότι συχνά το λεωφορείο "κολλάει" στην κίνηση και πρέπει να
ξυπνάει πιο νωρίς για να φτάσει εγκαίρως στη δουλειά του.
Όταν τα μέσα μαζικής μεταφοράς έχουν απεργία ή όταν βρέχει, ο
Γιώργος μπορεί να πάρει το αυτοκίνητό του, αλλά και πάλι πρέπει να
ξεκινήσει πιο νωρίς ώστε να έχει χρόνο να βρει να παρκάρει. Μια
εναλλακτική, είναι να πάει με το ποδήλατό του. Λόγω της κίνησης
στους δρόμους ο χρόνος που κάνει με το ποδήλατο δεν είναι πολύ
μεγαλύτερος από αυτόν που κάνει με το αυτοκίνητο. Δεν μπορεί όμως
να το κάνει αυτό όταν βρέχει, αλλά ούτε και όταν έχει υπερβολική
ζέστη, καθώς δεν θέλει να πηγαίνει ιδρωμένος στη δουλειά.
Ο Γιώργος λοιπόν κάθε βράδυ συμβουλεύεται την εφαρμογή
Διαδραστικής Τηλεόρασης "Weather2Work". Έχει ορίσει στις
ρυθμίσεις της εφαρμογής τη διεύθυνση του σπιτιού του και της
δουλειάς του. Η εφαρμογή συνδέεται μέσω ιντερνετ σε ένα site το
οποίο δημοσιεύει όλες τις προγραμματισμένες απεργίες των μέσων
μαζικής μεταφοράς. Ανάλογα λοιπόν με τον καιρό της επόμενης
ημέρας και αν υπάρχουν απεργίες, η εφαρμογή προτείνει στον Γιώργο
τις εναλλακτικές διαδρομές που έχει, και τον χρόνο που θα κάνει για
κάθε εναλλακτική. Για να υπολογίσει το χρόνο η εφαρμογή συνδέεται
σε μια υπηρεσία με χάρτες που μπορεί να παρέχει τέτοιες
πληροφορίες.
Αφού ο Γιώργος επιλέξει τον τρόπο που θα πάει στη δουλειά του το
πρωι, πέφτει για ύπνο. Αν κάποιο βράδυ ξεχάσει να επιλέξει τρόπο για
να πάει στη δουλειά του, η εφαρμογή διαλέγει την πιο κατάλληλη

επιλογή, ξέροντας ότι ο Γιώργος προτιμά να μετακινείται με τα μέσα
μαζικής μεταφοράς.
Έτσι λοιπόν το πρωί, η εφαρμογή "ξυπνάει" την τηλεόραση του
Γιώργου που παίζει ένα μήνυμα για να ξυπνήσει. Αν υπήρξε κάποια
αλλαγή στον καιρό σε σχέση με το προηγούμενο βράδυ ή αν
ανακοινώθηκε εκτάκτως κάποια απεργία, η εφαρμογή το έχει
επεξεργαστεί και φροντίζει να ξυπνάει τον Γιώργο την κατάλληλη ώρα
για να μην αργήσει στη δουλειά του.
Storyboard της εφαρμογής Weather2Work

Σε αυτή την εικόνα βλέπουμε τις προτάσεις που θα κάνει η εφαρμογή
στον χρήστη. Στην προκειμένη περίπτωση έχει 4 επιλογές, και μπορεί
με τα βελάκια του τηλεκοντρόλ να επιλέξει όποια από τις 4 επιλογές
θέλει ο χρήστης. Οι πληροφορίες που δίνονται στο χρήστη είναι η
χρονική διάρκεια της κάθε διαδρομής, και ένα ενημερωτικό μήνυμα
στο κάτω μέρος της οθόνης, που λέει αν υπάρχει κάποια
προγραμματισμένη απεργία την επόμενη ημέρα. Μελλοντική βελτίωση:
να φαίνεται και αν θα είναι βροχερός ο καιρός την επόμενη ημέρα (η
σκέψη αυτή ήταν της τελευταίας στιγμής και δεν μπορούσε να
συμπεριληφθεί στις εικόνες και την εφαρμογή...)

Σε αυτή την εικόνα ο χρήστης ενημερώνεται για τον καιρό τώρα και
σε βάθος τριών και έξι ωρών, στις περιοχές που έχει ορίσει ως "Σπίτι"
και "Γραφείο".

Σε αυτή την εικόνα ο χρήστης ενημερώνεται για τον καιρό την
τρέχουσα ημέρα, καθώς και τις επόμενες δύο ημέρες, στις περιοχές
που έχει ορίσει ως "Σπίτι" και "Γραφείο".

Σε αυτή την εικόνα βλέπουμε τις ρυθμίσεις της εφαρμογής που μπορεί
να αλλάξει ο χρήστης. Σε αυτές βλέπουμε ότι μπορεί ο χρήστης να
ορίσει την διεύθυνση/περιοχή που μένει και που εργάζεται, την
προτίμησή του ως πως τον τρόπου που θέλει να μετακινείται, και
τέλος αν θέλει η υπηρεσία να ξεκινάει το πρωί για να τον ξυπνήσει.

Σε αυτή την οθόνη βρισκόμαστε όταν ο χρήστης επιλέξει να αλλάξει
την διεύθυνση του σπιτιού του ή του γραφείου του. Πλοηγείται με τα
βελάκια του τηλεκοντρόλ στο το μενού με τις περιοχές που του
εμφανίζεται μέχρι να βρει την περιοχή που θέλει.

Σε αυτή την οθόνη βρισκόμαστε όταν ο χρήστης επιλέξει να αλλάξει
την προτίμησή του ως πως τον τρόπου που θέλει να μετακινείται.
Διαθέσιμες επιλογές είναι "ΜΜΜ" ή "Αυτοκίνητο/Ποδήλατο".

Σε αυτή την οθόνη βρισκόμαστε όταν ο χρήστης επιλέξει να αλλάξει
αν θέλει η υπηρεσία να ξεκινάει το πρωί για να τον ξυπνήσει ή όχι.
Εδώ οι επιλογές είναι "Ναι" ή "Όχι".
Σε κάθε ο οθόνη ο χρήστης μπορεί να "πατήσει" στο κάτω δεξιά μέρος
της οθόνης το σύμβολο "?" για να του εμφανιστεί ένα κείμενο με
βοήθεια για την τρέχουσα οθόνη που βρίσκεται.
Δυό λόγια παραπάνω... Από το σενάριο που παρουσιάστηκε
βλέπουμε ότι ο χρήστης είναι ένας νέος που μένει στην Αθήνα και
προτιμά να μετακινείται με τα μέσα μαζικής μεταφοράς. Δεν θέλει να
αργεί στη δουλειά του και στόχος του είναι να μην ξυπνάει πιο νωρίς ή
πιο αργά από ότι πρέπει για να φτάσει στην δουλειά του εγκαίρως. Ο
χρήστης έχει ρυθμίσει την εφαρμογή έτσι ώστε ανάλογα με τον καιρό
και τις απεργίες που υπάρχουν, να παίρνει την καλύτερη απόφαση για
την επόμενη ημέρα.
Οι βασικές οδηγίες σχεδίασης που εφαρμόστηκαν είναι: - Ο χρήστης
ξέρει πάντα σε ποιά οθόνη βρίσκεται. - Η πληροφορία παρουσιάζεται
απλά και περιεκτικά, χωρίς να κουράζει. - Όλες οι ενέργειες του
χρήστη μπορούν να αναιρεθούν, ώστε να μην ανησυχεί αν κάνει κάπου
λάθος. - Προστασία του χρήστη από λάθη. Δεν υπάρχει κάποιος
τρόπος ο χρήστης να προκαλέσει κάποιο σφάλμα. - Η διάδραση είναι

πολύ απλή και καθόλου κουραστική. Για κάθε πεδίο που απαιτείται
είσοδος από τον χρήστη, γίνεται μόνο με τα βελάκια του τηλεκοντρόλ.

Μέρος Γ – Κατασκευή πρωτοτύπου υψηλής
πιστότητας, 40 μονάδες
Ερώτημα 1 – Λογισμικό Android SDK
Ο σκοπός αυτού του ερωτήματος είναι να βεβαιωθούμε ότι έχουμε μια
σωστή εγκατάσταση του Android Studio. Το Android Studio είναι
διαθέσιμο δωρεάν για συστήματα Windows, Mac, Linux. Μπορείτε να
αποκτήσετε γνώσεις για το προγραμματισμό με Android σε πολλά
δωρεάν διαθέσιμα μαθήματα στο διαδίκτυο π.χ.
https://developer.android.com/training/index.html
https://www.udacity.com/course/android-development-for-beginners-ud837 Στα πλαίσια αυτού του υποερωτήματος:
1

να γίνει εγκατάσταση σύμφωνα με τις οδηγίες που θα βρείτε εδώ:
https://developer.android.com/studio/index.html Να γίνει εκτέλεση
ενός έτοιμου διαθέσιμου παραδείγματος σύμφωνα με τις οδηγίες:
https://developer.android.com/samples/index.html
https://www.udacity.com/course/android-tv-and-google-castdevelopment--ud875B

2

Να υλοποιήσετε την εφαρμογή που σχεδιάσετε στο προηγούμενο
ερώτημα. Στόχος δεν είναι η υλοποίηση όλων των
χαρακτηριστικών της εφαρμογής αλλά μια ενδεικτική λειτουργία
της διεπαφής. Επιπλέον σημαντικό είναι να τονίσουμε ότι αυτό το
ερώτημα δεν πρέπει να επηρεάσει το προϊόν σχεδίασης του
προηγούμενου ερωτήματος (ώστε να διευκολυνθεί η ανάπτυξή
του). Είναι διακριτά ερωτήματα, στο προηγούμενο ερώτημα
θέλουμε μια ιδανική σχεδίαση που βασίζεται σε σχετικά προιόντα,
ενώ σε αυτό το ερώτημα θέλουμε μια εφικτή υλοποίηση που
βασίζεται σε διαθέσιμα παραδείγματα με ελεύθερο πηγαίο κώδικα.
Αρκεί να τεκμηριώσετε την απάντηση σας με αναφορά στις
αλλαγές που κάνατε στον έτοιμο κώδικα καθώς και με ενδεικτικές
οθόνες της εφαρμογής σας όπου φαίνεται και το περιβάλλον
ανάπτυξης. https://developer.android.com/training/tv/index.html
https://classroom.udacity.com/courses/ud875B/lessons/460853907
5/concepts/46283485500923#
https://classroom.udacity.com/courses/ud875B/lessons/460853907
5/concepts/45948388160923#
https://classroom.udacity.com/courses/ud875B/lessons/460853907

5/concepts/45948388170923
https://developer.android.com/training/tv/publishing/checklist.html
https://github.com/googlesamples/androidtv-Leanback Οι
ενδεικτικές οθόνες μπορούν να είναι από τον emulator [25
μονάδες]

Aπάντηση
1)
To AndroidStudio εγκαταστάθηκε επιτυχώς, και εκτελέστηκε το
παράδειγμα "BorderlessButtons"
(https://github.com/googlesamples/android-BorderlessButtons/).
Example Project

2)
Παρακάτω βλέπουμε οθόνες από την εφαρμογή που δημιουργήθηκε
βάσει του προηγούμενου ερωτήματος. Λόγω έλλειψης χρόνου, η
λειτουργικότητα της εφαρμογής δεν έχει υλοποιηθεί (δεν γίνεται λήψη
των δεδομένων καιρού από κάποια υπηρεσία, ούτε λαμβάνονται
πληροφορίες για απεργίες).
Για την εφαρμογή δεν χρησιμοποιήθηκε το Leanback layout, καθώς
θεώρησα πως ο χρόνος που θα χρειαζόταν για να το προσαρμόσω
(αφού το κατανοήσω) θα ήταν πάρα πολύς. Αντί αυτού, η διεπαφή της
εφαρμογής δημιουργήθηκε με τη χρήση RelativeLayouts και
LinearLayouts.

Σε αυτή την οθόνη βλέπουμε τις προτάσεις που κάνει η εφαρμογή στον
χρήστη. Δίνεται η δυνατότητα στο χρήστη να επιλέξει όποια από τις
επιλογές θέλει και η εφαρμογή αναλαμβάνει έπειτα (αν η λέιτουργία
"Wake-up" είναι ενεργοποιημένη) να ξεκινήσει την τηλεόραση ώστε να
ξυπνήσει ο χρήστης την κατάλληλη ώρα για να φτάσει εγκαίρως στη
δουλειά του.

Σε αυτή την οθόνη βλέπουμε τις τρέχουσες καιρικές συνθήκες, και με

βάθος τριών και έξι ωρών, στην τοποθεσία που έχει δηλώσει ο
χρήστης ως Σπίτι και ως Γραφείο.

Σε αυτή την οθόνη βλέπουμε την πρόγνωση του καιρού για σήμερα και
τις επόμενες 2 ημέρες, στην τοποθεσία που έχει δηλώσει ο χρήστης
ως Σπίτι και ως Γραφείο.

Σε αυτή την οθόνη βλέπουμε τις ρυθμίσεις τις εφαρμογής, τις οποίες
μπορεί ο χρήστης να αλλάξει.

Σε αυτή την οθόνη ο χρήστης έχει επιλέξει να αλλάξει την τοποθεσία
για το σπίτι του. Οι επιλογές που έχει είναι περιορισμένες, καθώς δεν
έχει ολοκληρωθεί αυτό το κομμάτι.

Σε αυτή την οθόνη ο χρήστης έχει επιλέξει να αλλάξει την τοποθεσία
για το γραφείο του. Είναι η ίδια ακριβώς περίπτωση με παραπάνω.

Σε αυτή την οθόνη ο χρήστης επιλέγει αν ο προτιμώμενος τρόπος
μετακίνισής του είναι τα ΜΜΜ ή το αυτοκίνητο ή ποδήλατο.

Σε αυτή την οθόνη ο χρήστης επιλέγει αν θέλει να ενεργοποιήσει την
λειτουργία "Wake-up" ώστε να ξεκινάει η τηλεόραση αυτόματα την
ώρα που πρέπει.

Σε κάθε οθόνη που βρίσκεται ο χρήστης μπορεί να πατήσει στο κάτω
δεξι μέρος της οθόνης που βρίσκεται το κουμπί της βοήθειας. Ένα
παράθυρο εμφανίζεται ένα μήνυμα σχετικό με την οθόνη που
βρίσκεται ο χρήστης. (Τα μηνύματα δεν έχουν φτιαχτεί, εμφανίζεται
ένα κάτι ενδεικτικό)

Ερώτημα 2 – Υλικό Arduino
Δημιουργείστε μια απλή συσκευή με τη χρήση arduino, αισθητήρων
θερμοκρασίας και οθόνης υγρών κρυστάλων, η οποία ενημερώνει
οπτικά τον χρήστη για την περίπτωση που η θερμοκρασία σε ένα
δωμάτιο βρίσκεται μέσα σε 3 διαφορετικές ζώνες: χαμηλή, κανονική,
υψηλή. Για τον σκοπό αυτό μπορείτε να δημιουργήσετε δικό σας
κύκλωμα ή να χρησιμοποιήσετε ένα που υπάρχει σε πραγματικό ή
εικονικό περιβάλλον ανάπτυξης: https://circuits.io/circuits/1429587temperature-sensor-circuit
https://www.arduino.cc/en/Reference/LiquidCrystal
http://www.circuitbasics.com/how-to-set-up-an-lcd-display-on-anarduino/ http://omerk.github.io/lcdchargen/ Εξηγήστε σύντομα τις
αλλαγές στο πρόγραμμα και δώστε αναφορά σε κώδικα που πήρατε
έτοιμο. [15 μονάδες]

Απάντηση
Για το συγκεκριμένο ερώτημα χρησιμοποίησα το έτοιμο κύκλωμα που
υπάρχει εδώ με μερικές αλλαγές: https://circuits.io/circuits/1429587temperature-sensor-circuit
Σας παραθέτω screenshot από την προσομοίωση:

Γ2
Οι αλλαγές στον κώδικα που έγιναν είναι οι εξής:
1

Δημιούργησα από http://omerk.github.io/lcdchargen/ τρεις νέους
χαρακτήρες:

α) έναν γεμάτο χαρακτήρα ώστε να φτιάξω μια ενδεικτική μπάρα

Γ21
ανάλογα με την θερμοκρασία γεμίζω λίγα ή πιο πολλά. Αν είναι low
γεμίζω ενδεικτικά 4 κουτάκια από γεμάτους χαρακτήρες, αν είναι
normal γεμίζω 8 κουτάκια και αν είναι high γεμίζω 13 κουτάκια.
β) ο δεύτερος χαρακτήρας είναι για να αναπαραστήσω τους βαθμούς:

Γ22
και γ) ο τρίτος

Γ23
Φτιάχνω τους χαρακτήρες με τις εξής εντολές:
lcd.createChar(0, customChar);
lcd.createChar(1, customChar1);
lcd.createChar(2, customChar2);

Τυπώνω το temp στην οθόνη πάνω αριστερά:
lcd.begin(16, 2);
lcd.print("Temp:");

δίπλα από το temp τυπώνω την θερμοκρασία:
lcd.setCursor(6,0);
lcd.print(celsius);
lcd.write((uint8_t)1);
lcd.write((uint8_t)2);

και στην συνέχεια στην κάτω γραμμή εκτυπώνω την μπάρα και την
λέξη LOW, NORMAL, HIGH ανάλογα την θερμοκρασία. Για παράδειγμα,
if(celsius >= 20. && celsius < 30.){
lcd.setCursor(0,1);
lcd.write((uint8_t)0);
lcd.write((uint8_t)0);

lcd.write((uint8_t)0);
lcd.write((uint8_t)0);
lcd.write((uint8_t)0);
lcd.write((uint8_t)0);
lcd.write((uint8_t)0);
lcd.write((uint8_t)0);
lcd.setCursor(10,1);
lcd.print("NORMAL");
}

Ο συνολικός κώδικας είναι εδώ:
code/arduinoCode/SensorCircuit.ino

Μέρος Δ – Σύστημα διαμοιρασμού πηγαίων
αρχείων github, 10 μονάδες μπόνους
Για την καλύτερη εξοικείωση με το σύστημα github καθώς και για την
έμεση μελέτη σχετικού θεωρητικού περιεχομένου:
A

Δημιουργήστε ένα αντίγραφο (fork) της ιστοσελίδας του βιβλίου:
https://github.com/pibook/pibookgr και

B

προσθέστε (commit+pull request) ένα ή περισσότερα από τα
παρακάτω, A: 1) δέκα νέες εικόνες, 2) δέκα νέες παραθέσεις

Η βαθμολόγηση θα γίνει με βάση την ποιότητα και συμβατότητα με το
περιεχόμενο που υπάρχει ήδη (=απαιτείται προσεκτική μελέτη του
περιεχομένου) και όχι με βάση την ποσότητα της συνεισφοράς. Η
απάντηση μπορεί να είναι ένα λινκ στο αντίστοιχο αποθετήριο στο
github.

Απάντηση 1
A

Δημιουργήθηκε αντίγραφο (fork) της ιστοσελίδας του βιβλίου στο
σύνδεσμο: https://github.com/std106292/pibookgr

Β) Εγίνε προσθήκη (commit + pull) του παρακάτω περιεχομένου:
1

Έγινε προσθήκη 10 νέων εικόνων με τις αντίστοιχες λεζάντες
(caption) και συνδέσμους (image_url) σε διάφορα κεφάλαια του
κειμένου. Εγινε προσπάθεια η τοποθέτηση των εικόνων στις
συλλογές κάθε κεφαλαίου να γίνει με τέτοιον τρόπο (σε
κατάλληλη θέση) ώστε να ακολουθείται η νοηματική ροή του
κειμένου του έντυπου βιβλίου. Με τον τρόπο αυτόν, οι

φωτογραφίες της ιστοσελίδας "συνοδεύουν" τον αναγνώστη και σε
μεγάλο βαθμό οπτικοποιούν το υλικό που διαβάζει. Κατά την
αναζήτηση των εικόνων προτιμήθηκαν φωτογραφίες που
διατίθεντο με ελεύθερη άδεια (π.χ. creative commons, public
domain κλπ).
https://github.com/std106292/pibookgr/tree/gh-pages/images
https://github.com/std106292/pibookgr/tree/gh-pages/gallery
2

Έγινε προσθήκη 10 νέων παραθεμάτων. Τα παραθέμεατα
επιλέχθηκαν με τέτοιο τρόπο ώστε να ταιριάζουν με το
περιεχόμενο συγκεκριμένων ιδεών που περιγράφονται στις
παραγράφους των αντιστοίχων κεφαλαίων του έντυπου βιβλίου.

https://github.com/std106292/pibookgr/tree/gh-pages/_quotes
Commit:
https://github.com/std106292/pibookgr/commit/3e5fc5b5281eee7ab31
d5c6742f5af15cd12299b
Pull request: https://github.com/pibook/pibookgr/pull/34

Απάντηση 2
Έγινε fork το repository και προστέθηκαν τα αρχεία (10 νέες εικόνες
και 10 νέες παραθέσεις): https://github.com/lalousis/pibookgr.