Download Refined Version (Book Chapter PDF)

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

Ιστορικό σημείωμα: Το PaintPot είναι ένα από τα πρώτα προγράμματα που υλοποιήθηκαν για να εδραιώσουν την χρήση των προσωπικών υπολογιστών, την δεκαετία 1970.

Τι πρέπει να κάνετε

Με την εφαρμογή PaintPot, μπορείται να:

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

Στο παρόν εγχειρίδιο υποθέτουμε ότι έχετε ολοκληρώσει το εγχειρίδιο του HelloPurr. Εισάγει τις ακόλουθες έννοιες του App Inventor:

• Το στοιχείο Canvas για σχεδίαση.
• Τον έλεγχο της οθόνης με τα στοιχεία Arrangement.
• Χειριστές συμβάντων που δέχονται ορίσματα.
• Μεταβλητές.

Πρίν αρχίσετε

Σιγουρευτείτε ότι ο υπολογιστής σας και το τηλέφωνο έχουν ρυθμιστεί ώστε να χρησιμοποιούν το App Inventor, και ότι έχετε πρόσβαση στην ιστοσελίδα του App Inventor στο link http://appinventor.mit.edu. Δημιουργήστε ένα νέο project στο παράθυρο του Designer, και ονομάστε το “PaintPot”. Ανοίξτε το Blocks Editor, κάντε κλικ στο Connect to Phone, και σιγουρευτείτε ότι το τηλέφωνο έχει αρχίσει να τρέχει την εφαρμογή App Inventor.

Τίτλος οθόνης

Για να ξεκινήσετε, πηγαίνετε στο Properties panel στην δεξιά πλευρά του Designer και αλλάξτε το Title της οθόνης σε “PaintPot”. Πρέπει να βλέπετε την αλλαγή στο τηλέφωνο, δείχνοντας τον νέο τίτλο στο πεδίο του τίτλου.

Έχουμε τρία ονόματα στο App Inventor, και είναι εύκολο να τα μπερδέψουμε μεταξύ τους:

1. Το όνομα που θα επιλέξετε για το project που θα δουλέψετε (σε αυτή την περίπτωση, PaintPot). Αυτό θα είναι επίσης το όνομα της εφαρμογής αν το στείλετε στην συσκευή.
2. Το όνομα “Screen1”, που είναι το όνομα του στοιχείου Screen. Θα το δείτε στην λίστα των Components στον Designer. Δεν μπορείτε να τροποποιήσετε το όνομα του στοιχείου Screen σε αυτή την έκδοση του AppInventor.
3. H ιδιότητα Title της οθόνης, που είναι αυτό που βλέπετε στο χώρο του τίτλου στην οθόνη του κινητού σας τηλεφώνου. Ο τίτλος είναι μία ιδιότητα του στοιχείου Screen. Αρχικά έχει την τιμή “Screen1”, που είναι αυτό που χρησιμοποιήσατε στην εφαρμογή HelloPurr. Ωστόσο, μπορείτε να το αλλάξετε στην εφαρμογή PaintPot.

Ρυθμίστε τα Components

Θα χρησιμοποιήσετε αυτά τα στοιχεία για να κάνετε την εφαρμογή PaintPot:

• Τρία Buttons (Κουμπιά) για την επιλογή του κόκκινου, μπλε ή πράσινου χρώματος, και ένα άλλο κουμπί για τον καθαρισμό του σχεδίου.
• Ένα Canvas, η επιφάνεια σχεδίασης. Αυτός ο καμβάς έχει την ιδιότητα BackgroundImage, που είναι η γατούλα από το εγχειρίδιο του HelloPurr. Μπορείτε επίσης να σχεδιάσετε σε ένα κενό καμβά. Αυτός είναι απλά ένας καμβάς χωρίς κάποια εικόνα φόντου.
• Υπάρχει επίσης ένα στοιχείο που δεν μπορείτε να δείτε: χρησιμοποιείτε ένα HorizontalArrangement που στοιχίζει τα 3 κουμπιά του χρώματος στην κορυφή.

Αυτά ήταν τα 5 συστατικά που θα χρησιμοποιήσετε. Ας ξεκινήσουμε να δημιουργήσουμε την εφαρμογή.

Κουμπιά χρώματος

• Τραβήξτε ένα στοιχείο Button στο Viewer και αλλάξτε την επιλογή Text του κουμπιού σε “Red” και κάντε το BackgroundColor κόκκινο.
• Πατήστε πάνω στο Button1 στην λίστα των στοιχείων του Viewer για να το επισημάνετε (μπορεί να είναι ήδη) και χρησιμοποιήστε το κουμπί Rename… να αλλάξετε το όνομά του από “Button1” σε “ButtonRed”.
• Επίσης, κάντε δύο κουμπιά για το μπλε και το πράσινο, με τα ονόματα “ButtonBlue” και “ButtonGreen”, τοποθετώντας τα κάθετα κάτω από το κόκκινο κουμπί.

Παρακάτω θα δείτε πώς πρέπει να εμφανίζεται στον designer, με τα ονόματα των κουμπιών να εμφανίζονται στην λίστα των στοιχείων του project. Σε αυτό το project, αλλάζετε τα ονόματα των στοιχείων αντί να τα αφήσετε στα προεπιλεγμένα ονόματα, όπως κάνατε στο HelloPurr. Η χρήση ονομάτων με νόημα κάνει τα project σας πιο εύκολα στην ανάγνωση από εσάς και από τρίτους.

Θα πρέπει να δείτε και τα τρία κουμπιά στην οθόνη του τηλεφώνου.

Διάταξη με Screen Arrangement

Πρέπει τώρα να έχετε τρία κουμπιά, το ένα πάνω από το άλλο. Το επόμενο βήμα είναι να τα παρατάξουμε οριζόντια. Αυτό θα το κάνετε με την χρήση ενός στοιχείου HorizontalArrangement.

1. Από την κατηγορία της Παλέτας Screen Arrangement, τραβήξτε ένα στοιχείο HorizontalArrangement και τοποθετήστε το κάτω από τα κουμπιά. Αλλάξτε το όνομα του στοιχείου από “HorizontalArrangement1” σε “ThreeButtons”.
2. Στον πίνακα Properties, αλλάξτε το Width του ThreeButtons σε “Fill Parent…” έτσι ώστε να γεμίζει ολόκληρο το πλάτος της οθόνης.
3. Μετακινήστε τα τρία κουμπιά πλάι-πλάι μέσα στο στοιχείο HorizontalArrangement. Βοήθεια:: Θα δείτε μια μπλε κάθετη γραμμή που δείχνει που θα πάει το κομμάτι που σέρνετε.

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

Θα πρέπει να δείτε επίσης τα τρία κουμπιά σας σε μια σειρά στην οθόνη του τηλεφώνου σας, αν και τα πράγματα μπορεί να μην μοιάζουν ακριβώς όπως στο Designer. Για παράδειγμα, το περίγραμμα του Arrangement εμφανίζεται στο Designer αλλά όχι στο τηλέφωνο.

Γενικά, χρησιμοποιείτε Screen Arrangement για να δημιουργήσετε απλά κάθετα ή οριζόντια σχεδιαγράμματα. Μπορείτε να δημιουργήσετε πιο πολύπλοκες διατάξεις με εμφωλευμένα στοιχεία Screen Arrangement. Υπάρχει επίσης ένα στοιχείο TableArrangement (δεν το καλύπτουμε σε αυτό το εγχειρίδιο).

Καμβάς και κουμπί καθαρισμού

Τα τελευταία δύο στοιχεία είναι ο καμβάς και το κουμπί καθαρισμού.

1. Από την βασική κατηγορία της παλέτας τραβήξτε ένα στοιχείο Canvas στο Viewer. Αλλάξτε το όνομά του σε “DrawingCanvas”. Θέστε το Width σε “Fill Parent” και το Height σε 300 pixels.
2. Προσθέστε μία εικόνα φόντου στο Canvas. Πάτηστε πάνω στο πεδίο με το κείμενο “None…” δίπλα στο BackgroundImage στον πίνακα ιδιοτήτων του καμβά. Μπορείτε να χρησιμοποιήσετε το ίδιο αρχείο kitty.png, αν το έχετε ακόμη στον υπολογιστή σας από το σχετικό εγχειρίδιο. Αλλιώς μπορείτε να εισάγεται μία άλλη εικόνα.

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

3. Από την Palette, τραβηξτε το τελευταίο κουμπί στην οθόνη, και τοποθετήστε κάτω από τον καμβά. Αλλάξτε το id του σε “ButtonWipe” και την επιλογή Text σε “Wipe”.

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

Προσθέστε συμπεριφορές στα στοιχεία

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

Προσθέστε το κουμπί χειρισμού συμβάντων

Στο Blocks Editor:

1. Πηγαίνετε στην καρτέλα My Blocks.
2. Ανοίξτε την κατηγορία ButtonRed και τραβήξτε το block when ButtonRed.Click .
3. Ανοίξτε την κατηγορία DrawingCanvas. Τραβήξτε το block set DrawingCanvas.PaintColor to (μπορεί να χρειαστεί να διατρέξετε παρακάτω την λίστα μέχρι να το βρείτε) και τοποθετήστε το στην εσοχή do του when ButtonRed.Click .
4. Γυρίστε στην καρτέλα Built-in. Ανοίξτε την κατηγορία Colors και τραβήξτε το block για το κόκκινο χρώμα και τοποθετήστε το στο set DrawingCanvas.PaintColor to .
5. Επαναλάβετε τα βήματα 2-4 για το μπλε και πράσινο χρώμα.
6. Το τελευταίο κουμπί που θα ρυθμίσουμε είναι το κουμπί καθαρισμού. Γυρίστε ξανά πίσω στην καρτέλα My Blocks. Κάντε ένα χειριστή συμβάντων για κλίκ για το ButtonWipe σέρνοντας το when ButtonWipe.Click από την κατηγορία ButtonWipe. Από την κατηγορία DrawingCanvas, τραβήξτε το call DrawingCanvas.Clear και τοποθετήστε το στην εσοχή do του when ButtonWipe.Click.

Τα στοιχεία για τα κουμπιά θα πρέπει να μοιάζουν κάπως έτσι:

Προσθήκη χειριστών συμβάντων επαφής

Τώρα για το επόμενο βήμα: ζωγραφίζοντας στο Canvas. Θα ορίσετε τα πράγματα έτσι ώστε όταν αγγίζετε τον καμβά, θα δημιουργείται μια τελεία στο σημείο όπου αγγίξατε. Αν σύρετε το δάχτυλό σας σιγά-σιγά κατά μήκος του καμβά, σχεδιάζει μία γραμμή.

• Στο Blocks Editor, ανοίξτε την κατηγορία για τον καμβά και τραβήξτε το when DrawingCanvas.Touched στον χώρο που εργαζόμαστε. Μόλις σύρετε το μπλοκ έξω, οι τρεις εσοχές στα δεξιά συμπληρώνονται αυτόματα με μπλοκ που ονομάζονται όνομα x, y, και touchedSprite.

Έχετε ήδη δει κουμπιά συμβάντων για κλικ. Τα Clicks είναι απλά, επειδή δεν υπάρχει τίποτα περισσότερο να ξέρετε για το click από το ό,τι συμβαίνει. Άλλοι χειριστές συμβάντων όπως το when … Touched χρείαζονται πληροφορίες για το συμβάν. Στο App Inventor, αυτή η πληροφορία εκφράζεται ως η τιμή των ορισμάτων που σχετίζονται με τον χειριστή συμβάντων. Για το συμβάν when … Touched, τα πρώτα 2 ορίσματα αντιπροσωπεύουν τις συντεταγμένες x και y για το που συμβαίνει η επαφή. Θα κρατήσουμε το touchedSprite για ένα επόμενο εγχειρίδιο.

• Για αυτό το συμβάν επαφής, κάντε το καμβά να σχεδιάσει έναν μικρό κύκλο στο σημείο με συντεταγμένες (x, y). Τραβήξτε μία εντολή call DrawingCanvas.DrawCircle από την κατηγορία του καμβά και τοποθετήστε το στην εσοχή do του when DrawingCanvas.Touched.

Στην δεξιά πλευρά του block when DrawingCanvas.DrawCircle υπάρχουν τρεις εσοχές που πρέπει να ορίσετε τις τιμές για τις συντεταγμένες για τα x και y όπου ο κύκλος πρέπει να σχεδιαστεί, και r, που είναι η ακτίνα του κύκλου. Για τα x και y, θα χρησιμοποιήσετε τις τιμές για τα ορίσματα που παρέχονται στον Touched handler:

1. Ανοίξτε την κατηγορία My Definitions drawer στην κορφή της καρτέλας. Βρείτε τα block για τις τιμές value x και value y. Τα μπλοκ δημιουργούνται αυτόματα όταν σέρνετε το block του χειριστή συμβάντων αφής.
2. Τραβήξτε το value x και το value y και τοποθετείστε τα στις σχετικές εσοχές του block when DrawingCanvas.Touched. Σιγουρεθτείτε ότι τραβήξατε τα block value, και όχι τα name.
3. Πρέπει επίσης να ορίσετε την ακτίνα του κύκλου που θα ζωγραφιστεί. Πέντε (pixels) είναι καλή τιμή για αυτη την εφαρμογή. Πατήστε στην κενή περιοχή της οθόνης για να εμφανιστεί το μενού κύλισης και επιλέξτε math (πράσινο). Επιλέξτε το “123” από την αναπτυσσόμενη λίστα, για να δημιουργήσετε ένα block αριθμού. Αλλάξτε το “123” σε “5” και συνδέστε το στην σχετική εσοχή για την ακτίνα.

Μπορείτε επίσης να πατήσετε το 5 από το πληκτρολόγιο και μετά enter, για την ίδια ενέργεια. 

Ορίστε πώς θα πρέπει να μοιάζει:

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

Προσθέστε Drag Events

Στο τέλος, προσθέστε ένα drag event handler. Αυτή είναι η διαφορά μεταξύ αφής και έλξης:

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

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

Ένα συμβάν έλξης συνοδεύεται από 6 ορίσματα. Αυτά είναι 3 ζευγάρια από συντεταγμένες x και y που δείχνουν:

• Την θέση του δαχτύλου σας από το σημείο που ξεκίνησε.
• Την τρέχουσα θέση του δαχτύλου σας.
• Την αμέσως προηγούμενη θέση του δαχτύλου σας.

Υπάρχει επίσης ένα sprite, που θα αγνοήσουμε σε αυτό το εγχειρίδιο.

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

1. Από την κατηγορία DrawingCanvas, τραβήξτε το block when DrawingCanvas.Dragged στον χώρο που εργαζόμαστε.
2. Επίσης από την καρτέλα DrawingCanvas, τραβήξτε το block DrawingCanvas.DrawLine στην υποδοχή do του when DrawingCanvas.Dragged.
3. Πατήστε στην κατηγορία My Definitions.Θα πρέπει να δείτε τα στοιχεία για τα ορίσματα που χρειάζεστε. Σύρετε τα αντίστοιχα μπλοκ τιμών στις κατάλληλες υποδοχές του when DrawingCanvas.Dragged: x1 και y1 πρέπει να είναι prevX και prevY; Τα x2 και y2 πρέπει να είναι currentX και currentY.

Ορίστε το αποτέλεσμα:

Δοκιμάστε την δουλειά σας στο τηλέφωνό σας: τραβήξτε το δακτυλό σας στην οθόνη για να σχεδιάσετε γραμμές και καμπύλες. Αγγίξτε την οθόνη για να κάνετε κουκίδες. Χρησιμοποιείστε το κουμπί Wipe για να καθαρίσετε την οθόνη.

© Μετάφραση: Νινιδάκης Στυλιανός, Τμήμα Επιστήμης Υπολογιστών Π.Κ., στo πλαίσιo της πρακτικής άσκησης στο Πρότυπο Πειραματικό Γυμνάσιο Ηρακλείου 2012.  Επιμέλεια: Ψαρουδάκης Νικόλαος, Συντονιστής Πρακτικής Άσκησης, Πρότυπο Πειραματικό Γυμνάσιο Ηρακλείου. Πηγή: http://appinventor.mit.edu