Κεφάλαιο 3 - Ανάπτυξη και Υλοποίηση της Εφαρμογής
68
1. $
(
"#WavesCanvas"
).
mousedown
(
function
(
event
){
2.
[...]
3. isDown
=
true
;
4. delay_pos
=
0
;
5. delay_neg
=
0
;
6. mouse_down_x
=
event
.
pageX
;
7.
});
8.
9. $
(
"#WavesCanvas"
).
mousemove
(
function
(
event
)
{
10.
if
(
isDown
){
11.
var
mouse_x
=
event
.
pageX
;
12.
var
dif
=
mouse_down_x
-
mouse_x
;
13.
if
(
dif
>
0
){
14. delay_pos
=
dif
/
10
+
delay_pos
;
15.
if
(
delay_pos
>=
1
){
16. delay_pos
=
0
;
17. dif
=
1
;
18.
}
else
{
19. dif
=
0
;
20.
}
21.
}
22.
if
(
dif
<
0
){
23. delay_neg
=
dif
/
10
+
delay_neg
;
24.
if
(
delay_neg
<=-
1
){
25. delay_neg
=
0
;
26. dif
=-
1
;
27.
}
else
{
28. dif
=
0
;
29.
}
30.
}
Κώδικας 36: waveforms_viewer.js - Αρχικοποίηση μεταβλητών στο πάτημα ποντικιού και η λειτουργία ομαλοποίησης της
χρονικής μετατόπισης
Η χρονική μετατόπιση είναι μία λειτουργία που επιτρέπει μετά την αλλαγή της χρονικής
κλίμακας σε ποσοστό μικρότερο του 100% την ολίσθηση των κυματομορφών κατά τον χρονικό
άξονα. Η λειτουργία αυτή ενεργοποιείται όταν ο χρήστης πατήσει και σύρει είτε το δεξιό ή το
αριστερό κουμπί του ποντικιού πάνω στο στοιχείο ‘canvas’. Με το πάτημα το ποντικιού
αρχικοποιούμε κάποιες μεταβλητές (Κώδικας 36, γραμμές 1-7) τις οποίες χρησιμοποιούμε
κατά την μετακίνηση του. Έτσι κατά την μετακίνηση του ποντικιού πάνω στο στοιχείο ‘canvas’
επιβεβαιώνουμε ότι το κουμπί είναι πατημένο και υπολογίζουμε την μετατόπιση του δείκτη
(Κώδικας 36, γραμμές 9-12). Εάν η μετατόπιση είναι θετική, ο δείκτης κινείται προς τα
αριστερά της οθόνης ενώ εάν είναι αρνητική ο δείκτης κινείται προς τα δεξιά. Σε κάθε
περίπτωση χρησιμοποιούμε μία μεταβλητή καθυστέρησης ώστε η ολίσθηση να είναι αρκετά
ομαλή. Συγκεκριμένα παρατηρήσαμε ότι η μετατόπιση του χρόνου κατά ένα ελάχιστο χρονικό
διάστημα πιθανής αλλαγής τιμής σημάτων στα δέκα pixel μετατόπισης του δείκτη ποντικιού
(Κώδικας 36, γραμμές 14-20 και 23-29) επιτρέπει μία αρκετά ομαλή ολίσθηση που παρέχει
επαρκώς την αίσθηση ανατροφοδότησης από την κίνηση του χρήστη.