Κεφάλαιο 3 - Ανάπτυξη και Υλοποίηση της Εφαρμογής
71
1. ctx
.
fillText
(
"Value : "
+
wave_val
,
x_canvas
,
y_canvas
);
2. y_canvas
=
y_canvas
+
40
;
3.
if
(
wave_data
[
index
][
"expand"
]==
1
){
4.
for
(
j
=
1
;
j
<=
wave_data
[
index
][
"length"
];
j
++){
5. sub_wave_val
=
wave_val_bin
.
charAt
(
j
);
6. ctx
.
fillText
(
"Value : "
+
sub_wave_val
,
x_canvas
+
15
,
y_canvas
);
7. y_canvas
=
y_canvas
+
40
;
8.
}
9.
}
Κώδικας 40: waveforms_viewer.js - Εμφάνιση τιμής σήματος στον μόνιμο σηματοδότη επιπλέον πληροφοριών
Στην συνέχεια εμφανίζουμε την τιμή κάθε σήματος κάτω από την ονομασία του καλύπτοντας
την περίπτωση σημάτων με μήκος μεγαλύτερο από ένα που έχουν επεκταθεί όπου
προσάπτουμε την τιμή κάθε υποσήματος κάτω από το όνομά του. Τέλος σχεδιάζουμε μία
κάθετη γραμμή κατά ύψος του στοιχείου ‘canvas’ στο σημείο όπου βρίσκεται ο δείκτης
ποντικιού και σημειώνουμε από κάτω τον χρόνο που αντιστοιχεί σε αυτόν τον σηματοδότη.
Έτσι υλοποιούμε μία από τις σημαντικότερες λειτουργίες του εργαλείου που δίνει στον χρήστη
την δυνατότητα να πάρει άμεσα και εύκολα πληροφορίες για την τιμή κάθε σήματος σε κάθε
χρονική στιγμή που εμφανίζεται.
Υπάρχουν μερικές ακόμη λειτουργίες που έχουμε ήδη εξετάσει μέσα από άλλες. Για
παράδειγμα η επιλογή τύπου εμφάνισης των τιμών όπου υποστηρίζονται ο δυαδικός, δεκαδικός
και δεκαεξαδικός τύπος. Η υλοποίηση αυτής της λειτουργίας έγινε εμφανής κατά την εμφάνιση
των τιμών στα σήματα με μήκος μεγαλύτερο του ένα. Μία άλλη λειτουργία που εξετάστηκε
επιφανειακά είναι η επέκταση σημάτων με μεγάλο μήκος. Η υλοποίηση αυτής της λειτουργίας
γίνεται με την εισαγωγή στοιχείων που έχουν ξεχωριστά γεγονότα. Όταν ένα από αυτά τα
γεγονότα ενεργοποιηθεί το αντίστοιχο σήμα σημειώνεται ως επεκταμένο ή συμπυκνωμένο και
επανασχεδιάζουμε τις κυματομορφές. Στην σχεδίαση των κυματομορφών, τα σήματα που
έχουν επεκταθεί εισάγουν ένα νέο σήμα μήκους ενός ψηφίου για κάθε ξεχωριστό δυαδικό
ψηφίο τους και ομαδοποιούνται κάτω από το σήμα μεγάλου μήκους που τα περιέχει.
1. $
(
"#btn-download-image"
).
click
(
function
(
event
){
2.
var
canvas
=
document
.
getElementById
(
"WavesCanvas"
);
3.
var
dataURL
=
canvas
.
toDataURL
(
'image/png'
);
4.
var
img
=
canvas
.
toDataURL
(
"image/jpg"
);
5. $
(
"#btn-download-image"
).
attr
(
'href'
,
dataURL
);
6.
});
Κώδικας 41: waveforms_viewer.js - Δημιουργία και μεταφόρτωση εικόνας από το στοιχείο 'canvas'
Τέλος έχουμε την λειτουργία λήψης στιγμιότυπου ως εικόνα. Η λειτουργία αυτή ενεργοποιείται
από το γεγονός κατά το οποίο ο χρήστης πατάει το αντίστοιχο κουμπί και δημιουργεί μία εικόνα
τύπου jpg από το στοιχείο ‘canvas’ που μεταφορτώνεται στον υπολογιστή του χρήστη
(Κώδικας 41).
Ολοκληρώνουμε έτσι την ανάλυση της υλοποίησης του εργαλείου σχεδίασης
κυματομορφών. Γίνεται πλέον κατανοητό ότι το εργαλείο αυτό δεν αποσκοπεί μόνο στην
προβολή των αποτελεσμάτων μίας προσομοίωσης. Παρέχει επί πλέον πολλαπλά στοιχεία και
εισάγει λειτουργείες που προσθέτουν την δυνατότητα διερεύνησης και προσαρμογής των
κυματομορφών για πιο άμεση και εύκολη ανάλυση τους από τον χρήστη.