Κλίμακα (JavaScript)

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

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

Βιβλιοθήκες για εισαγωγή


#!/usr/bin/gjs

const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;

Αυτές είναι οι βιβλιοθήκες που χρειαζόμαστε να εισάγουμε αυτήν την εφαρμογή για να εκτελεστεί. Να θυμόσαστε ότι η γραμμή που λέει στο GNOME ότι χρησιμοποιούμε Gjs χρειάζεται πάντοτε να πάει στην αρχή.

Δημιουργία του παραθύρου εφαρμογής


const ScaleExample = new Lang.Class({
    Name: 'Scale Example',

    // Δημιουργία της εφαρμογής αυτής καθεαυτής
    _init: function() {
        this.application = new Gtk.Application({
            application_id: 'org.example.jsscale'
        });

    // Σύνδεση των σημάτων 'activate' και 'startup' με τις συναρτήσεις επανάκλησης
    this.application.connect('activate', Lang.bind(this, this._onActivate));
    this.application.connect('startup', Lang.bind(this, this._onStartup));
    },

    // Η συνάρτηση επανάκλησης για το σήμα 'activate' παρουσιάζει ένα παράθυρο όταν είναι ενεργή
    _onActivate: function() {
        this._window.present();
    },

    // Η συνάρτηση επανάκλησης για το σήμα 'startup' δομεί τη διεπαφή χρήστη
    _onStartup: function() {
        this._buildUI ();
    },

Όλος ο κώδικας για αυτό το παράδειγμα πηγαίνει στην κλάση ScaleExample. Ο παραπάνω κώδικας δημιουργεί μια Gtk.Application για να μπουν μέσα τα γραφικά στοιχεία μας και τα παράθυρα.


    // Δόμηση της διεπαφής χρήστη της εφαρμογής
    _buildUI: function() {

        // Δημιουργία του παραθύρου της εφαρμογής
        this._window = new Gtk.ApplicationWindow({
            application: this.application,
            window_position: Gtk.WindowPosition.CENTER,
            border_width: 20,
            title: "Birds on a Floe"});

Η συνάρτηση _buildUI είναι εκεί που βάζουμε όλον τον κώδικα για να δημιουργήσουμε τη διεπαφή χρήστη της εφαρμογής. Το πρώτο βήμα δημιουργεί ένα νέο Gtk.ApplicationWindow για να βάλουμε μέσα τα γραφικά στοιχεία μας.

Δημιουργία των κλιμάκων


        // Δημιουργία της οριζόντιας κλίμακας
        this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);
        this._hScale.set_valign (Gtk.Align.START);
        this._hScale.set_value (50);
        this._hScale.set_digits (0);
        // this._hScale.set_draw_value (false);

Η μέθοδος new_with_range είναι ένας τρόπος δημιουργίας ενός νέου γραφικού στοιχείου κλίμακας. Οι παράμετροι που παίρνει είναι μια Gtk.Orientation, η ελάχιστη τιμή, η μέγιστη τιμή και η αύξηση για ένα μόνο βήμα. Κατόπιν χρησιμοποιούμε τις μεθόδους κλίμακας για να ορίσουμε την αρχική της τιμή και πόσες δεκαδικές θέσεις διατρέχει. Επίσης ορίζουμε την κάθετη της στοίχιση σε αυτήν την περίπτωση, για τον έλεγχο πού εμφανίζεται στο παράθυρο.

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


        // Δημιουργία μιας κύριας προσαρμογής για χρήση με την κάθετη (ή οποιαδήποτε άλλη)κλίμακα
        this._adjustment = new Gtk.Adjustment ({
            value: 95,
            lower: 0,
            upper: 100,
            step_increment: 5,
            page_increment: 10 });

Μια ρύθμιση είναι ένα αντικείμενο που μπορούμε να χρησιμοποιήσουμε για απλοποίηση των πραγμάτων όταν δημιουργείτε μια νέα κλίμακα. Η ιδιότητα της ρύθμισης "value" είναι η προεπιλεγμένη τιμή της κλίμακας, ενώ "upper" και "lower" κάνουν το πάνω και κάτω άκρο της αριθμητικής περιοχής. Στο μεταξύ, οι τιμές αύξησης εμφανίζουν πόσο μετακινείται ο ολισθητής όταν κάνετε πράγματα όπως το πάτημα πάνω του.


        // Δημιουργία μιας κάθετης κλίμακας χρησιμοποιώντας την προσαρμογή που μόλις φτιάξαμε
        this._vScale = new Gtk.Scale ({
            orientation: Gtk.Orientation.VERTICAL,
            adjustment: this._adjustment,
            digits: 0,
            // draw_value: false,
            margin_left: 10 });

Εδώ δημιουργούμε ένα νέο αντικείμενο κλίμακας χρησιμοποιώντας _adjustment ως ιδιότητα "adjustment". Αυτό είναι μια μεγάλη συντόμευση. Πρέπει ακόμα να του πούμε να στρογγυλέψει τις δεκαδικές θέσεις, όμως. Σημειώστε ότι η ιδιότητα draw_value είναι σχολιασμένη· έτσι του λέτε να μην εμφανίσει τον αριθμό δίπλα στην κλίμακα όταν δημιουργείτε μία κλίμακα με αυτόν τον τρόπο.


        // Δημιουργία της ετικέτας που εμφανίζει το γινόμενο των δύο τιμών
        this._product = (this._hScale.get_value() * this._vScale.get_value());
        this._label = new Gtk.Label ({
            label: (String(this._product) + " penguins on the iceberg."),
            height_request: 200,
            width_request: 200,
            wrap: true});

        // Σύνδεση των δύο κλιμάκων με συναρτήσεις που επανυπολογίζουν την ετικέτα
        this._hScale.connect ("value-changed", Lang.bind (this, this._recalc));
        this._vScale.connect ("value-changed", Lang.bind (this, this._recalc));

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

Αφού δημιουργήσουμε την ετικέτα, συνδέουμε τα σήματα "value-changed" των δύο κλιμάκων στο _recalc, μια συνάρτηση που θα ξαναϋπολογίσει τον αριθμό των πιγκουίνων στο παγόβουνο και δίνει ένα νέο μήνυμα.


        // Δημιουργία ενός πλέγματος για τακτοποίηση των πραγμάτων μέσα του
        this._UIGrid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER,
            margin_top: 20,
            margin_left: 20});

        // Προσάρτηση όλων στο πλέγμα
        this._UIGrid.attach (this._label, 0, 0, 1, 1);
        this._UIGrid.attach (this._hScale, 0, 1, 1, 1);
        this._UIGrid.attach (this._vScale, 1, 0, 1, 1);

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


        // Προσθήκη του πλέγματος στο παράθυρο
        this._window.add (this._UIGrid);

        // Εμφάνιση του παραθύρου και όλων των θυγατρικών γραφικών στοιχείων
        this._window.show_all();
    },

Τελικά, προσθέτουμε το πλέγμα στο παράθυρο, έπειτα λέμε στο παράθυρο να εμφανίσει τον εαυτόν του και όλα τα γραφικά στοιχεία μέσα του.

Η συνάρτηση που χειρίζεται την αλλαγή των τιμών των κλιμάκων


    _recalc: function() {

        // Υπολογισμός του γινομένου των δύο τιμών των κλιμάκων
        var product = (this._hScale.get_value() * this._vScale.get_value());

        // Δημιουργία μιας κενής γραμμής σχολίου σε περίπτωση που δεν υπάρχει ένα χαζό σχόλιο να γίνει
        var comment = "";

        // Δημιουργία ενός χαζού σχολίου με βάση τον αριθμό των πιγκουίνων
        if (product > 9000) {
            comment = "It's over 9000!";
        }
        else if (product < 1000 && product > 0) {
            comment = "They're getting lonely.";
        }
        else if (product == 0) {
            comment = "They're all gone ...";
        }
        else comment = "";

        // Νέο κείμενο του Set ._label
        this._label.set_label (String (product) + " penguins on the iceberg. " + comment);

    }

});

Να θυμάστε, μπορούμε να πάρουμε μια τιμή κλίμακας χρησιμοποιώντας τη μέθοδο του get_value. Εδώ απλά ξαναϋπολογίζουμε ποιο είναι το γινόμενο των δύο τιμών μετά τη μετακίνηση μιας από τις κλίμακες, προσθέτουμε ένα χαζό μήνυμα ανάλογα με το πόσοι πιγκουίνοι απέμειναν και αλλάζουμε τη διατύπωση στην _label για να δείξουμε το νέο αριθμό και το μήνυμα.


// Εκτέλεση της εφαρμογής
let app = new ScaleExample ();
app.application.run (ARGV);

Τελικά, δημιουργούμε ένα νέο στιγμιότυπο της ολοκληρωμένης κλάσης ScaleExample και εκτελούμε την εφαρμογή.

Δείγμα πλήρους κώδικα

#!/usr/bin/gjs

imports.gi.versions.Gtk = '3.0';

const Gio = imports.gi.Gio;
const Gtk = imports.gi.Gtk;

class ScaleExample {

    // Create the application itself
    constructor() {
        this.application = new Gtk.Application({
            application_id: 'org.example.jsscale'
        });

        // Connect 'activate' and 'startup' signals to the callback functions
        this.application.connect('activate', this._onActivate.bind(this));
        this.application.connect('startup', this._onStartup.bind(this));
    }

    // Callback function for 'activate' signal presents window when active
    _onActivate() {
        this._window.present();
    }

    // Callback function for 'startup' signal builds the UI
    _onStartup() {
        this._buildUI();
    }

    // Build the application's UI
    _buildUI() {

        // Create the application window
        this._window = new Gtk.ApplicationWindow({
            application: this.application,
            window_position: Gtk.WindowPosition.CENTER,
            border_width: 20,
            title: "Birds on a Floe"});

        // Create the horizontal scale
        this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);
        this._hScale.set_valign (Gtk.Align.START);
        this._hScale.set_value (50);
        this._hScale.set_digits (0);
        // this._hScale.set_draw_value (false);

        // Create a master adjustment to use for the vertical (or any other) scale
        this._adjustment = new Gtk.Adjustment ({
            value: 95,
            lower: 0,
            upper: 100,
            step_increment: 5,
            page_increment: 10 });

        // Create a vertical scale using the adjustment we just made
        this._vScale = new Gtk.Scale ({
            orientation: Gtk.Orientation.VERTICAL,
            adjustment: this._adjustment,
            digits: 0,
            // draw_value: false,
            margin_left: 10 });

        // Create the label that shows the product of the two values
        this._product = (this._hScale.get_value() * this._vScale.get_value());
        this._label = new Gtk.Label ({
            label: (String(this._product) + " penguins on the iceberg."),
            height_request: 200,
            width_request: 200,
            wrap: true});

        // Connect the two scales to functions which recalculate the label
        this._hScale.connect ("value-changed", this._recalc.bind(this));
        this._vScale.connect ("value-changed", this._recalc.bind(this));

        // Create a grid to arrange things in
        this._UIGrid = new Gtk.Grid ({
            halign: Gtk.Align.CENTER,
            valign: Gtk.Align.CENTER,
            margin_top: 20,
            margin_left: 20});

        // Attach everything to the grid
        this._UIGrid.attach (this._label, 0, 0, 1, 1);
        this._UIGrid.attach (this._hScale, 0, 1, 1, 1);
        this._UIGrid.attach (this._vScale, 1, 0, 1, 1);

        // Add the grid to the window
        this._window.add (this._UIGrid);

        // Show the window and all child widgets
        this._window.show_all();
    }

    _recalc() {

        // Figure out what the product of the two scales' values is
        var product = (this._hScale.get_value() * this._vScale.get_value());

        // Create a blank comment line in case there isn't a silly comment to make
        var comment = "";

        // Make a silly comment based on the number of penguins
        if (product > 9000) {
            comment = "It's over 9000!";
        }
        else if (product < 1000 && product > 0) {
            comment = "They're getting lonely.";
        }
        else if (product == 0) {
            comment = "They're all gone ...";
        }
        else comment = "";

        // Set ._label's new text
        this._label.set_label (String (product) + " penguins on the iceberg. " + comment);
    }
};

// Run the application
let app = new ScaleExample ();
app.application.run (ARGV);

Τεκμηρίωση σε βάθος

Gtk.Adjustment

Gtk.Application

Gtk.ApplicationWindow

Gtk.Grid

Gtk.Label

Gtk.Scale