Δραστηριότητα 2 – PaintPot (Μέρος 2)
Τρίτη, 11 Δεκεμβρίου 2012, 12:32 μμ
Από: ΝΧΤ ΡΟΜΠΟΤ | Κάτω από: App_inventor

Αρχικά

Σιγουρευτείτε ότι έχετε ολοκληρώσει την διαδικασία Set Up και έχετε φορτώσει ολοκληρωμένο το project σας από το PaintPot Μέρος 1.

Συνεχίστε από το τέλος του Μέρους 1, με ανοιχτό το project σας στο App Inventor. Χρησιμοποιήστε το κουμπί Save As για να κάνεις ένα αντίγραφο του PaintPot ώστε να δουλεύεις σε μία νέα έκδοση χωρίς να επηρεάζει την κανονική. Ονόμασε το αντίγραφο “PaintPotV2” (χωρίς κενά). Μετά την αποθήκευση, θα πρέπει να δείτε το PaintPotV2 στο Designer.

Δημιουργία μεταβλητών

Το μέγεθος των κουκίδων που ζωγραφίζονται πάνω στον καμβά εντοπίζεται στον χειριστή συμβάντων when DrawingCanvas.Touched όπου call Drawing.DrawCircle καλείται με r, την ακτίνα του κύκλου, ίσο με 5. Για να αλλάξετε το πάχος, το μόνο που χρειάζεται να κάνετε είναι να χρησιμοποιήσετε διαφορετικές τιμές για το r. Χρησιμοποιήστε r = 2 για μικρές κουκίδες και r = 8 για μεγαλύτερες.

Ξεκινήστε με την δημιουργία μεταβλητών για αυτές τις τιμές:

  1. Ανοίξτε το Blocks Editor αν δεν είναι ήδη ανοιχτό και συνδέστε την συσκευή. Το τηλέφωνό σας πρέπει να δείχνει τα κουμπιά και τον καμβά που φτιάξατε προηγουμένα.
  2. Στο Blocks Editor, στην καρτέλα Built-In, ανοίξτε την κατηγορία Definitions. Τραβήξτε ένα block def variable. Αλλάξτε το κείμενο “variable” σε “small”. Ένα κίτρινο παράθυρο προειδοποίησης θα εμφανιστεί στο block. Αν πάτε το δείκτη του ποντικιού πάνω θα δείτε ένα προειδοποιητικό μήνυμα που θα σας εξηγεί ότι το block έχει μία ασύνδετη υποδοχή.
  3. Πρέπει να συνδέσετε την υποδοχή του block με έναν αριθμό που υποδεικνύει την τιμή για το “small” — θέστε το 2 σαν τιμή. Για να παράξετε το αριθμητικό block, πληκτρολογείστε τον αριθμό 2. Ένα μενού θα εμφανιστεί, που θα σας εμφανίζει όλα τα πιθανά blocks που εσωκλείουν το “2” στο όνομά τους. Πατήστε στο πρώτο, που είναι το number 2 μόνο του, και ένα αριθμητικό block με την τιμή 2 θα εμφανιστεί. Συνδέστε το με το def variable block. Το κίτρινο παράθυρο θα εξαφανιστεί, επειδή η ασύνδετη υποδοχή συμπληρώθηκε.

Εδώ είναι τα βήματα της ακολουθίας:

Τώρα έχετε ορίσει μία μεταβλητή με όνομα small της οποίας η τιμή είναι 2.
Παρομοίως με το small, δηλώστε μία μεταβλητή big, με τιμή 8.
Τέλος, δηλώστε μία μεταβλητή dotsize και δώστε την αρχική τιμή 2.

Ίσως αναρωτηθείτε αν είσαι σωστότερο προγραμματιστικά style να αρχικοποιήσουμε την τιμή της dotsize με αυτή της small, δηλαδή 2. Θα ήτας ευσταθής, εκτός από ένα λεπτό προγραμματιστικό σημείο: Κάνοντας αυτό θα προσκρούσουμε στην υπόθεση ότι η small έχει ήδη μία τιμή την στιγμή που η dotsize θα έδινε την τιμή της. Στο App Inventor, δεν μπορείτε να κάνετε υποθέσεις για την σειρά του ποιό def block θα εκτελεστεί. Σε γενικές γραμμές, φυσικά, θα έπρεπε να προσδιορίσετε την σειρά με την οποία παίρνουν τιμές οι μεταβλητές. Μπορείτε να το κάνετε αυτό τοποθετώντας όλες τις τιμές όταν η εφαρμογή αρχικοποιείται, με την χρήση του συμβάντος αρχικοποίησης του Screen. Το εγχειρίδιο Quiz Me δίνει ένα παράδειγμα αρχικοποίησης.

Χρήση των μεταβλητών

Τώρα γυρίστε στον χειριστή συμβάντων αφής που φτιάξατε στο Μέρος 1 και αλλάξτε το block call to DrawCircle με τέτοιο τρόπο ώστε να χρησιμοποιεί την τιμή της dotsize και όχι πάντα με την τιμή 5.

Στο Blocks Editor, μετβείτε στην καρτέλα My Blocks, και ανοίξτε την καρτέλα My Definitions. Θα πρέπει να δείτε έξι νεά blocks, δύο για καθένα από τις τρείς μεταβλητές:

  • ένα block global … που παράγει την τιμή της μεταβλητής
  • ένα block set global … που δίνει στην μεταβλητή μία νεά τιμή.

Αυτά τα blocks δημιουργούνται αυτόματα, παρομοίως με τον τρόπο που τα blocks για τα x και y δημιουργήθηκαν όταν δηλώσατε τον χειριστή when DrawingCanvas.Touched στο μέρος 1 του εγχειριδίου.
Το “Global” σημαίνει “global variable”, σε αντίθεση με τα ορίσματα του event-handler,
του οποίου τα blocks φέρουν την σήμανση “value”. Η διαφορά είναι ότι οι τιμές ορισμάτων είναι προσβάσιμες μόνο από τον κορμό του event handler, ενώ οι global μεταβλητές από όλο το πρόγραμμα.

  • Πηγαίνετε στον χειριστή when MyCanvas.Touched και αντικαταστήστε τον αριθμό 5 στο call DrawCircle με την global dotsize από την κατηγορία MyDefinitions.

Αλλάζοντας τις τιμές των μεταβλητών

Τώρα κατασκευάστε έναν τρόπο να αλλάζει το μέγεθος της κουκίδας σε μικρό (2) ή μεγάλο (8). Κάντε το με την χρήση των κουμπιών.

  1. Στο Designer, τραβήξτε ένα στοιχείο HorizontalArrangement στο Viewer κάτω από το στοιχείο DrawingCanvas. Ονομάστε το στοιχείο “BottomButtons”.
  2. Τραβήξτε το υπάρχον ButtonWipe στο BottomButtons.
  3. Drag two more button components from the Palette into BottomButtons, placing them next to ButtonWipe.
  4. Ονομάστε τα κουμπιά “ButtonBig” και “ButtonSmall”, και ορίστε το Text τους σε “Big dots” και “Small dots”, αντίστοιχα.
  5. Στο Blocks Editor κάτω από το My Blocks, δημιουργείστε έναν χειριστή συμβάντων when … Clicked για το ButtonSmall που αλλάζει την μεταβλητή dotsize που διατηρεί την τιμή του small. Για να αλλάξετε την dotsize κάντε χρήση του block set global dotsize to από την κατηγορία MyDefinitions και συνδέστε στην υποδοχή του block global small
  6. Κάντε έναν παρόμοιο χειριστή συμβάντων για το ButtonBig.

Οι δύο click event handlers πρέπει να μοιάζουν με αυτό:

Τελειώσαμε! Μπορείται να σχεδιάσετε στο PaintPot και να χρησιμοποιήσετε τα νέα κουμπιά για να σχεδιάσετε μεγάλες ή μικρές κουκίδες. Σημειώστε ότι τραβόντας το δάχτυλό σας παράγεται ακόμα μία λεπτή γραμμή. Αυτό γίνεται επειδή οι αλλάγές που μόλις κάναμε δεν επηρρεάζουν το πως καλείται το DrawLine

Ορίστε το τελικό πρόγραμμα στο Designer:

και στο Blocks Editor:

Μία δυσλειτουργία που θα μπορούσατε να λύσετε: Το πρόγραμμα που μόλις φτιάξατε έχει μία μικρή δυσλειτουργία. Αν αρχίσετε να σχεδιάζετε πριν πατήσετε κάποιο από τα κουμπιά, το χρώμα θα είναι μαύρο. Ωστόσο, μετά που επιλέγετε ένα χρώμα, δεν υπάρχει τρόπος να ξαναγυρίσετε στο μαύρο. Σκεφτείτε πώς μπορείτε να το διορθώσετε αυτό.

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





     
Δεν υπάρχουν σχόλια μέχρι τώρα



Αφήστε μια απάντηση

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *

Αλλαγή μεγέθους γραμματοσειράς
Αντίθεση