Συνομιλία με Εικόνες

Τοποθέτηση με Βάση τα Ποσοστά

Image Chat χρησιμοποιεί συντεταγμένες με βάση τα ποσοστά αντί για εικονοστοιχεία για να τοποθετεί τους δείκτες συνομιλίας πάνω στις εικόνες. Όταν ένας χρήστης κάνει κλικ σε μια εικόνα, το widget μετατρέπει τις συντεταγμένες σε pixels του κλικ σε ποσοστά του πλάτους και του ύψους της εικόνας. Αυτή η προσέγγιση εξασφαλίζει ότι οι δείκτες παραμένουν στη σωστή θέση ανεξάρτητα από τον τρόπο εμφάνισης της εικόνας.

Για παράδειγμα, αν ένας χρήστης κάνει κλικ 250 pixels από την αριστερή άκρη μιας εικόνας πλάτους 1000px, το widget αποθηκεύει αυτό ως 25% από αριστερά. Όταν άλλος χρήστης δει την ίδια εικόνα σε πλάτος 500px σε κινητή συσκευή, ο δείκτης εμφανίζεται 125 pixels από αριστερά, που είναι και πάλι 25% του πλάτους.

Οφέλη για ανταποκρινόμενες διατάξεις

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

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

Κλίμακα εικόνας και αναλογία διαστάσεων

Εφόσον η εικόνα σας διατηρεί την αναλογία διαστάσεων κατά την κλιμάκωση (που είναι η προεπιλεγμένη συμπεριφορά του browser), οι δείκτες με βάση τα ποσοστά θα παραμείνουν τέλεια ευθυγραμμισμένοι. Το widget υποθέτει ότι οι εικόνες κλιμακώνονται αναλογικά και υπολογίζει τις θέσεις βασιζόμενο σε αυτή την υπόθεση.

Αν εφαρμόσετε CSS που παραμορφώνει την αναλογία διαστάσεων της εικόνας (όπως η χρήση του object-fit: cover με συγκεκριμένες διαστάσεις), οι θέσεις των δεικτών ενδέχεται να μην ευθυγραμμίζονται σωστά. Για καλύτερα αποτελέσματα, επιτρέψτε στις εικόνες να κλιμακώνονται φυσικά ή χρησιμοποιήστε object-fit: contain για να διατηρήσετε την αναλογία διαστάσεων.

Μέγεθος τετραγώνων συνομιλίας

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

Σε μια εικόνα πλάτους 1000px με την προεπιλεγμένη ρύθμιση 5%, οι δείκτες είναι τετράγωνα 50px. Σε εικόνα πλάτους 500px, οι ίδιοι δείκτες είναι τετράγωνα 25px. Παρέχουν αναλογικότητα σε σχέση με το μέγεθος της εικόνας.

Συμπεριφορά σε κινητά

Σε οθόνες κάτω από 768px πλάτος, το Image Chat μεταβαίνει σε διάταξη βελτιστοποιημένη για κινητά. Τα παράθυρα συνομιλίας ανοίγουν σε πλήρη οθόνη αντί να αιωρούνται δίπλα από τον δείκτη. Αυτό προσφέρει καλύτερη χρηστικότητα σε μικρές οθόνες όπου τα αιωρούμενα παράθυρα θα κάλυπταν υπερβολικό μέρος της εικόνας.

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

Δυναμική φόρτωση εικόνας

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

Αν χρησιμοποιείτε lazy-loading εικόνων ή εφαρμόζετε responsive εικόνες με διαφορετικά μεγέθη σε διαφορετικά breakpoints, οι δείκτες προσαρμόζονται αυτόματα όταν αλλάζει το μέγεθος της εικόνας.

Συνέπεια ανά συσκευές

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

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

Σκέψεις σχετικά με το viewport

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

Εξασφάλιση μελλοντικής συμβατότητας του περιεχομένου

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

Υποστήριξη Σκούρου Θέματος

Το Image Chat περιλαμβάνει ενσωματωμένη υποστήριξη για σκούρο θέμα. Όταν ορίσετε hasDarkBackground: true στη ρύθμισή σας, τα παράθυρα συνομιλίας και τα στοιχεία του UI προσαρμόζονται αυτόματα ώστε να λειτουργούν καλά σε σκούρα φόντα.

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    hasDarkBackground: true
});

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

Δυναμικό Σκούρο Θέμα

Εάν το σκούρο θέμα του ιστότοπού σας ελέγχεται με την προσθήκη της κλάσης .dark στο στοιχείο body, το UI του Image Chat θα το τηρήσει αυτόματα χωρίς να απαιτείται επανεκκίνηση. Τα στυλ του widget έχουν σχεδιαστεί ώστε να ανταποκρίνονται στην παρουσία αυτής της κλάσης.

/* Το CSS για το σκούρο θέμα σας */
body.dark {
    background: #1a1a1a;
    color: #ffffff;
}

Προσαρμοσμένο Στυλ με CSS

Μπορείτε να προσαρμόσετε την εμφάνιση των δεικτών, των παραθύρων συνομιλίας και άλλων στοιχείων χρησιμοποιώντας CSS. Το widget προσθέτει συγκεκριμένες κλάσεις στις οποίες μπορείτε να στοχεύσετε στο stylesheet σας.

Τα τετράγωνα και τα παράθυρα συνομιλίας χρησιμοποιούν το σύστημα στυλ φυσαλίδων σχολίων του FastComments, οπότε οποιεσδήποτε προσαρμογές έχετε εφαρμόσει στο τυπικό widget σχολιασμού θα επηρεάσουν επίσης το Image Chat.

Μέγεθος Τετραγώνου Συνομιλίας

Η επιλογή chatSquarePercentage ελέγχει το μέγεθος των σημείων δεικτών που μπορούν να κλικαριστούν. Η προεπιλογή είναι 5% του πλάτους της εικόνας:

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    chatSquarePercentage: 7  // Μεγαλύτερα, πιο ορατά τετράγωνα
});

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

Συμπεριφορά σε Κινητά

Σε οθόνες μικρότερες από 768px, το Image Chat αλλάζει αυτόματα σε διάταξη βελτιστοποιημένη για κινητά. Τα παράθυρα συνομιλίας εμφανίζονται σε πλήρες οθόνη αντί να αιωρούνται δίπλα στους δείκτες, παρέχοντας καλύτερη χρηστικότητα σε μικρές οθόνες.

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

Εμφάνιση Παραθύρου Συνομιλίας

Τα παράθυρα συνομιλίας έχουν πλάτος 300px σε επιτραπέζιους υπολογιστές με ένα βέλος 16px που δείχνει προς τον δείκτη. Τα παράθυρα τοποθετούνται αυτόματα με βάση τον διαθέσιμο χώρο του viewport, χρησιμοποιώντας κλάσεις τοποθέτησης όπως to-right, to-left, to-top, και to-bottom.

Μπορείτε να προσθέσετε προσαρμοσμένο CSS για να ρυθμίσετε χρώματα, γραμματοσειρές, αποστάσεις ή άλλες οπτικές ιδιότητες αυτών των παραθύρων. Τα παράθυρα συνομιλίας χρησιμοποιούν την ίδια δομή συστατικού με το τυπικό widget του FastComments, οπότε κληρονομούν οποιεσδήποτε παγκόσμιες προσαρμογές έχετε εφαρμόσει.

Αργή Αρχικοποίηση

Τα παράθυρα συνομιλίας αρχικοποιούνται κατά το hover για χρήστες desktop ή αμέσως όταν δημιουργούνται. Αυτό μειώνει το αρχικό φόρτο φόρτωσης, αποδίδοντας την διεπαφή συνομιλίας μόνο όταν οι χρήστες αλληλεπιδρούν πραγματικά με έναν δείκτη.

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

Τοπικοποίηση

Το Image Chat υποστηρίζει όλες τις ίδιες επιλογές τοπικοποίησης με το τυπικό widget του FastComments. Ορίστε την επιλογή locale για να εμφανίσετε το κείμενο του UI σε διαφορετικές γλώσσες:

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    locale: 'fr'  // Γαλλικά
});

Το FastComments υποστηρίζει δεκάδες γλώσσες. Η ρύθμιση locale επηρεάζει όλο το κείμενο του UI συμπεριλαμβανομένων των προτροπών, των κουμπιών και του κειμένου placeholder.

Κληρονομημένες Επιλογές Προσαρμογής

Εφόσον το Image Chat επεκτείνει το τυπικό widget σχολιασμού, κληρονομεί όλες τις επιλογές προσαρμογής από το βασικό widget. Αυτό περιλαμβάνει προσαρμοσμένες κλάσεις CSS, προσαρμοσμένες μεταφράσεις, προσαρμογή avatar, μορφοποίηση ημερομηνιών και πολλά άλλα.

Δείτε την κύρια τεκμηρίωση προσαρμογής του FastComments για την πλήρη λίστα των διαθέσιμων επιλογών προσαρμογής.

Εργασία με Προσαρμοσμένες Γραμματοσειρές

Εάν ο ιστότοπός σας χρησιμοποιεί προσαρμοσμένες γραμματοσειρές, το UI του Image Chat θα κληρονομήσει αυτές τις γραμματοσειρές από το CSS της σελίδας σας. Τα παράθυρα συνομιλίας αποδίδονται μέσα στο DOM της σελίδας σας και σέβονται τις υπάρχουσες ρυθμίσεις τυπογραφίας.

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

Οπτικός Σχεδιασμός Δεικτών

Τα τετραγωνικά δείκτες έχουν έναν διακριτικό οπτικό σχεδιασμό που τα κάνει ευδιάκριτα χωρίς να καταπνίγουν την εικόνα. Μπορείτε να προσαρμόσετε την εμφάνισή τους με CSS αν θέλετε διαφορετική οπτική επεξεργασία.

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

Ενημερώσεις σε Πραγματικό Χρόνο

Το Image Chat χρησιμοποιεί συνδέσεις WebSocket για να συγχρονίζει όλες τις συνομιλίες σε πραγματικό χρόνο μεταξύ όλων των συνδεδεμένων χρηστών. Όταν κάποιος δημιουργεί ένα νέο marker, προσθέτει ένα σχόλιο ή διαγράφει μια συζήτηση, όλοι οι άλλοι χρήστες που βλέπουν την ίδια εικόνα βλέπουν την ενημέρωση αμέσως, χωρίς ανανέωση.

Πώς Λειτουργεί ο Συγχρονισμός WebSocket

Όταν αρχικοποιείτε το Image Chat, το widget δημιουργεί μια σύνδεση WebSocket με τους διακομιστές FastComments. Αυτή η σύνδεση παραμένει ανοιχτή για όλη τη διάρκεια της συνεδρίας του χρήστη και ακούει για ενημερώσεις που σχετίζονται με την τρέχουσα εικόνα.

Το σύστημα WebSocket χρησιμοποιεί τρεις τύπους μηνυμάτων μετάδοσης για το Image Chat. Το γεγονός new-image-chat ενεργοποιείται όταν κάποιος δημιουργεί ένα νέο marker στην εικόνα. Το γεγονός image-chat-updated ενεργοποιείται όταν κάποιος ενημερώνει μια υπάρχουσα συνομιλία. Το γεγονός deleted-image-chat ενεργοποιείται όταν κάποιος διαγράφει ένα marker.

Σύστημα Broadcast ID

Για να αποφευχθούν εφέ ηχούς, όπου οι χρήστες βλέπουν τις δικές τους ενέργειες να μεταδίδονται πίσω σε αυτούς, κάθε ενημέρωση περιλαμβάνει ένα μοναδικό broadcastId. Όταν ένας χρήστης δημιουργεί ή ενημερώνει ένα marker, ο client του δημιουργεί ένα UUID για αυτή τη λειτουργία. Όταν το WebSocket μεταδίδει την ενημέρωση πίσω σε όλους τους clients, ο client που προέρχεται η ενημέρωση την αγνοεί επειδή ταιριάζει με το δικό του broadcastId.

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

Ανθεκτικότητα Σύνδεσης

Εάν η σύνδεση WebSocket πέσει λόγω προβλημάτων δικτύου ή συντήρησης διακομιστή, το widget προσπαθεί αυτόματα να επανασυνδεθεί. Κατά τη διάρκεια της περιόδου επανασύνδεσης, οι χρήστες μπορούν ακόμα να αλληλεπιδρούν με υπάρχοντα markers, αλλά δεν θα βλέπουν ενημερώσεις σε πραγματικό χρόνο από άλλους χρήστες μέχρι να επανιδρυθεί η σύνδεση.

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

Ζητήματα Εύρους Ζώνης

Τα μηνύματα WebSocket είναι ελαφριά και περιέχουν μόνο τις απαραίτητες πληροφορίες για τον συγχρονισμό της κατάστασης. Η δημιουργία ενός νέου marker χρησιμοποιεί συνήθως λιγότερο από 1KB εύρους ζώνης. Το σύστημα περιλαμβάνει επίσης έξυπνη ομαδοποίηση για τη μείωση της συχνότητας μηνυμάτων κατά τις περιόδους υψηλής δραστηριότητας.

Οι μετρήσεις χρήσης σας στον πίνακα ελέγχου FastComments παρακολουθούν το pubSubMessageCount και το pubSubBandwidth, ώστε να μπορείτε να παρακολουθείτε τη δραστηριότητα συγχρονισμού σε πραγματικό χρόνο στις ιστοσελίδες σας.

Συγχρονισμός μεταξύ Καρτελών

Εάν ένας χρήστης έχει ανοιχτή την ίδια σελίδα σε πολλές καρτέλες του browser, οι ενημερώσεις σε μία καρτέλα εμφανίζονται αμέσως στις άλλες καρτέλες. Αυτό λειτουργεί μέσω του ίδιου μηχανισμού συγχρονισμού WebSocket και δεν απαιτεί πρόσθετη διαμόρφωση.

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

Ασφάλεια

Τα μηνύματα WebSocket μεταδίδονται μέσω ασφαλών συνδέσεων (WSS) και περιλαμβάνουν επικύρωση tenant για να διασφαλιστεί ότι οι χρήστες λαμβάνουν ενημερώσεις μόνο για συνομιλίες που είναι εξουσιοδοτημένοι να βλέπουν. Ο διακομιστής επικυρώνει όλες τις λειτουργίες πριν τις μεταδώσει, για να αποτραπεί μη εξουσιοδοτημένη πρόσβαση ή χειραγώγηση.

Συμπεριφορά Εκτός Σύνδεσης

Όταν οι χρήστες είναι εντελώς εκτός σύνδεσης, μπορούν ακόμα να βλέπουν υπάρχοντα markers, αλλά δεν μπορούν να δημιουργήσουν νέα ή να δουν ενημερώσεις από άλλους. Το widget ανιχνεύει την κατάσταση εκτός σύνδεσης και εμφανίζει κατάλληλο μήνυμα.

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

Επίδραση στην Απόδοση

Η σύνδεση WebSocket έχει ελάχιστη επίδραση στην απόδοση. Η σύνδεση παραμένει αδρανής όταν δεν συμβαίνουν ενημερώσεις και επεξεργάζεται μηνύματα μόνο όταν υπάρχει δραστηριότητα. Σε μια τυπική εικόνα με μέτρια δραστηριότητα markers, το WebSocket χρησιμοποιεί λιγότερο CPU από την ίδια την απεικόνιση της εικόνας.

Για σελίδες με εκατοντάδες ταυτόχρονους χρήστες και υψηλή δραστηριότητα δημιουργίας markers, το σύστημα κλιμακώνεται οριζόντια για να διατηρήσει την απόδοση χωρίς να επηρεάζει τις μεμονωμένες συνδέσεις των clients.

Συνεργατικές Περιπτώσεις Χρήσης

Ο συγχρονισμός σε πραγματικό χρόνο καθιστά το Image Chat ιδιαίτερα ισχυρό για συνεργατικές ροές εργασίας. Οι ομάδες σχεδίασης μπορούν να εξετάσουν μαζί mockups, με όλους να βλέπουν την τοποθέτηση markers σε πραγματικό χρόνο. Οι ομάδες εξυπηρέτησης πελατών μπορούν να σχολιάσουν συνεργατικά screenshots για τον εντοπισμό προβλημάτων. Εκπαιδευτικές ομάδες μπορούν να συζητήσουν διαγράμματα, με όλους τους συμμετέχοντες να βλέπουν τα markers του ενός του άλλου καθώς δημιουργούνται.

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