Klepet s slikami

Odstotkovno pozicioniranje

Image Chat uporablja odstotkovne koordinate namesto koordinat v piksilih za pozicioniranje označevalcev klepeta na slikah. Ko uporabnik klikne na sliko, pripomoček pretvori koordinate klika v piksilih v odstotke širine in višine slike. Ta pristop zagotavlja, da označevalci ostanejo na pravilnem mestu ne glede na to, kako je slika prikazana.

Na primer, če uporabnik klikne 250 pikslov od levega roba slike široke 1000px, pripomoček to shrani kot 25 % od leve. Ko drug uporabnik ista slika prikže široko 500px na mobilni napravi, se označevalec prikaže 125 pikslov od leve, kar je še vedno 25 % širine.

Prednosti za odzivne postavitve

Ta odstotkovni sistem omogoča, da Image Chat brez težav deluje na vseh velikostih in usmerjenostih naprav. Vaše slike so morda prikazane v različnih velikostih, odvisno od širine zaslona, pravil CSS ali omejitev vsebnika, vendar se označevalci vedno pravilno poravnajo z želenimi lokacijami.

Uporabniki na namiznih računalnikih z velikimi zasloni vidijo označevalce na istih relativnih položajih kot uporabniki pametnih telefonov z majhnimi zasloni. Označevalci se razmeroma povečujejo s samo sliko.

Povečevanje slik in razmerje stranic

Dokler vaša slika ob povečevanju ohranja razmerje stranic (kar je privzeto vedenje brskalnika), bodo odstotkovni označevalci ostali popolnoma poravnani. Pripomoček predpostavlja, da se slike povečujejo sorazmerno, in izračunuje položaje na podlagi te predpostavke.

Če uporabite CSS, ki popači razmerje stranic slike (na primer object-fit: cover z določenimi dimenzijami), se položaji označevalcev morda ne bodo pravilno poravnali. Za najboljše rezultate pustite, da se slike naravno povečujejo, ali uporabite object-fit: contain za ohranjanje razmerja stranic.

Velikost klepetalnih kvadratkov

Vidna velikost označevalcev klepeta je prav tako odstotkovna. Možnost konfiguracije chatSquarePercentage ima privzeto vrednost 5 %, kar pomeni, da je vsak kvadratek 5 % širine slike. To zagotavlja dosledno vizualno težo pri različnih velikostih slik.

Na sliki široki 1000px s privzeto nastavitvijo 5 % so označevalci kvadratki 50px. Na sliki široki 500px so isti označevalci kvadratki 25px. Ostanejo sorazmerni z velikostjo slike.

Vedenje na mobilnih napravah

Na zaslonih, ožjih od 768px, Image Chat preklopi na mobilno optimizirano postavitev. Klepetalna okna se odprejo v celozaslonskem načinu namesto da bi lebdeli ob označevalcu. To zagotavlja boljšo uporabnost na majhnih zaslonih, kjer bi ležeča okna zakrivala preveč slike.

Označevalci sami ostanejo vidni in klikljivi na svojih odstotkovnih položajih. Uporabniki lahko še vedno vidijo, kje se nahajajo vse razprave, in tapnejo označevalce, da odprejo celozaslonski klepetalni vmesnik.

Dinamično nalaganje slik

Odstotkovni sistem deluje pravilno tudi, ko se slike nalagajo asinhrono ali spremenijo velikost po nalaganju strani. Pripomoček spremlja element slike in znova izračuna položaje označevalcev, kadar koli se dimenzije slike spremenijo.

Če lenobno nalagate slike ali izvajate odzivne slike z različnimi velikostmi pri različnih prelomnih točkah, se označevalci samodejno prilagodijo, ko se velikost slike spremeni.

Doslednost med napravami

Ker so koordinate v podatkovni bazi shranjene kot odstotki, se razprava, ustvarjena na namiznem računalniku, prikaže na popolnoma istem relativnem mestu, ko si jo ogledujete na tablici ali telefonu. Uporabniki lahko sodelujejo med napravami brez kakršnih koli nedoslednosti pri pozicioniranju.

To deluje v obeh smereh. Razprava, ustvarjena s tapkanjem določene točke na mobilni napravi, se prikaže na istem relativnem položaju, ko si jo ogledujete na velikem namiznem zaslonu.

Vidno območje

Pripomoček izračunava odstotke glede na sam element slike, ne glede na vidno območje. To pomeni, da drsenje strani ali spreminjanje velikosti okna brskalnika ne vpliva na položaje označevalcev. Označevalci ostanejo sidrani na svojih lokacijah na sliki ne glede na spremembe vidnega območja.

Prihodnja odpornost vsebine

Odstotkovni pristop naredi vaše slikovne razprave odporne na spremembe postavitve, oblikovanja ali ekosistema naprav. Ko se pojavijo nove velikosti zaslonov in naprave, bodo obstoječe razprave še naprej pravilno prikazane brez potrebe po posodobitvah ali migracijah.

Podpora temnega načina

Image Chat vključuje vgrajeno podporo temnega načina. Ko v svoji konfiguraciji nastavite hasDarkBackground: true, se klepetalna okna in elementi uporabniškega vmesnika samodejno prilagodijo, da dobro delujejo na temnih ozadjih.

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

Stiliranje za temni način se uporablja za klepetalna okna, označevalne kvadrate in vse interaktivne elemente. Če ima vaše spletno mesto stikalo za temni način, lahko pripomoček znova inicializirate, ko se način spremeni, ali uporabite pristop z razredom body, opisan spodaj.

Dinamični temni način

Če je temni način na vašem spletnem mestu nadzorovan z dodajanjem razreda .dark elementu body, bo Image Chat UI to samodejno upošteval brez potrebe po ponovni inicializaciji. Slogi pripomočka so zasnovani tako, da se odzovejo na prisotnost tega razreda.

/* Vaš CSS za temni način */
body.dark {
    background: #1a1a1a;
    color: #ffffff;
}

Prilagajanje slogov s CSS

S CSS lahko prilagodite videz označevalcev, klepetalnih oken in drugih elementov. Pripomoček doda specifične razrede, na katere lahko ciljate v svoji datoteki s slogom.

Označevalni kvadrati in okna klepeta uporabljajo sistem za oblikovanje komentarnih oblačkov FastComments, zato bodo vse prilagoditve, ki ste jih uporabili za standardni pripomoček za komentiranje, vplivale tudi na Image Chat.

Velikost označevalnih kvadratov

Možnost chatSquarePercentage nadzoruje velikost klikljivih označevalcev. Privzeto je 5% širine slike:

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    chatSquarePercentage: 7  // Večji, bolj vidni kvadrati
});

Manjše vrednosti ustvarijo bolj diskretne označevalce, ki se zlijejo s sliko. Večje vrednosti naredijo označevalce bolj izrazite in lažje za klik, še posebej na mobilnih napravah ali zaradi dostopnosti.

Obnašanje na mobilnih napravah

Na zaslonih, ožjih od 768px, se Image Chat samodejno preklopi na postavitev, optimizirano za mobilne naprave. Klepetalna okna se prikažejo v celozaslonskem načinu namesto lebdenja ob označevalcih, kar zagotavlja boljšo uporabnost na majhnih zaslonih.

Označevalci ostanejo vidni na svojih odzivnih položajih na sliki. Uporabniki lahko tapnejo kateri koli označevalec za odpiranje celozaslonskega vmesnika klepeta. To vedenje je vgrajeno in ne zahteva dodatne konfiguracije.

Videz klepetalnih oken

Klepetalna okna so na namizju široka 300px z 16px puščico, ki kaže na označevalec. Okna se samodejno pozicionirajo glede na razpoložljivi prostor v pogledu, z uporabo razredov za pozicioniranje, kot so to-right, to-left, to-top in to-bottom.

Lahko dodate lastni CSS za prilagoditev barv, pisav, razmikov ali drugih vizualnih lastnosti teh oken. Klepetalna okna uporabljajo isto strukturo komponent kot standardni pripomoček FastComments, zato dedujejo vse globalne prilagoditve, ki ste jih uporabili.

Odložena inicializacija

Klepetalna okna se inicializirajo ob premiku miške za uporabnike na namizju ali takoj ob ustvarjanju. To zmanjša začetno obremenitev z nalaganjem, saj se vmesnik klepeta upodobi le, ko uporabniki dejansko sodelujejo z označevalcem.

Odložena inicializacija se zgodi prosojno. Uporabniki ne opazijo zamude, vendar brskalnik ne potrebuje upodabljati ducatov skritih klepetalnih oken, če imate na sliki veliko označevalcev.

Lokalizacija

Image Chat podpira vse enake možnosti lokalizacije kot standardni pripomoček FastComments. Nastavite možnost locale, da prikažete besedilo vmesnika v različnih jezikih:

FastCommentsImageChat(imageElement, {
    tenantId: 'demo',
    locale: 'fr'  // Francoščina
});

FastComments podpira desetine jezikov. Nastavitev locale vpliva na vse besedilo vmesnika, vključno z navodili, gumbi in nadomestnim besedilom.

Podedovane možnosti prilagajanja

Ker Image Chat razširja standardni pripomoček za komentiranje, podeduje vse možnosti prilagajanja osnovnega pripomočka. To vključuje lastne CSS razrede, lastne prevode, prilagajanje avatarjev, oblikovanje datumov in še veliko več.

Oglejte si glavno dokumentacijo za prilagajanje FastComments za popoln seznam razpoložljivih možnosti prilagajanja.

Delo s prilagojenimi pisavami

Če vaše spletno mesto uporablja prilagojene pisave, jih bo Image Chat UI podedoval iz CSS vaše strani. Klepetalna okna se upodabljajo znotraj DOM vaše strani in spoštujejo obstoječe tipografske nastavitve.

Za najboljše rezultate poskrbite, da bodo vaše prilagojene pisave naložene pred inicializacijo Image Chat, ali pa sprejmite, da se lahko med nalaganjem pisav pojavi kratek utrip nestilirane pisave.

Vizualna zasnova označevalcev

Kvadratni označevalci imajo subtilno vizualno zasnovo, zaradi katere so opazni, ne da bi preplavili sliko. Njihov videz lahko prilagodite s CSS, če želite drugačno vizualno obdelavo.

Označevalci vključujejo stanja ob premiku miške, ki nudijo povratne informacije, ko uporabniki premaknejo miško nad njimi. Na napravah na dotik pa interakcija s tapom zagotovi takojšnje povratne informacije z odpiranjem klepetalnega okna.

Posodobitve v realnem času

Image Chat uporablja WebSocket povezave za sinhronizacijo vseh pogovorov v realnem času med vsemi povezanimi uporabniki. Ko nekdo ustvari nov marker, doda komentar ali izbriše razpravo, vsi drugi uporabniki, ki gledajo isto sliko, vidijo posodobitev takoj brez osvežitve.

Kako deluje WebSocket sinhronizacija

Ko inicializirate Image Chat, pripomoček vzpostavi WebSocket povezavo s strežniki FastComments. Ta povezava ostane odprta za trajanje uporabnikove seje in posluša posodobitve, povezane z trenutno sliko.

WebSocket sistem uporablja tri vrste oddajnih sporočil za Image Chat. Dogodek new-image-chat se sproži, ko nekdo ustvari nov marker na sliki. Dogodek image-chat-updated se sproži, ko nekdo posodobi obstoječ pogovor. Dogodek deleted-image-chat se sproži, ko nekdo izbriše marker.

Sistem Broadcast ID

Da bi preprečili učinek odmeva, kjer uporabniki vidijo svoje lastne akcije, poslane nazaj, vsaka posodobitev vključuje edinstven broadcastId. Ko uporabnik ustvari ali posodobi marker, njegov odjemalec ustvari UUID za to operacijo. Ko WebSocket odda posodobitev nazaj vsem odjemalcem, izvorni odjemalec to posodobitev ignorira, ker se ujema z njegovim broadcastId.

To zagotavlja gladko interakcijo, kjer uporabniki vidijo svoje spremembe takoj v uporabniškem vmesniku brez čakanja na povratno pot do strežnika, medtem ko še vedno zagotavlja, da vsi drugi uporabniki prejmejo posodobitev.

Odpornost povezave

Če WebSocket povezava pade zaradi težav z omrežjem ali vzdrževanja strežnika, pripomoček samodejno poskusi znova vzpostaviti povezavo. Med obdobjem ponovne povezave lahko uporabniki še vedno sodelujejo z obstoječimi markerji, vendar ne bodo videli posodobitev v realnem času od drugih uporabnikov, dokler povezava ni ponovno vzpostavljena.

Ko je povezava ponovno vzpostavljena, se pripomoček ponovno sinhronizira, da se zagotovi, da ni bilo zamujenih posodobitev. To se zgodi transparentno, brez potrebe po posegu uporabnika.

Premisleki glede pasovne širine

WebSocket sporočila so lahka in vsebujejo le bistvene informacije, potrebne za sinhronizacijo stanja. Ustvarjanje novega markerja običajno porabi manj kot 1KB pasovne širine. Sistem vključuje tudi inteligentno združevanje sporočil, da zmanjša pogostost pošiljanja v obdobjih velike aktivnosti.

Vaše meritve uporabe v nadzorni plošči FastComments spremljajo pubSubMessageCount in pubSubBandwidth, tako da lahko spremljate dejavnost sinhronizacije v realnem času na vaših spletnih mestih.

Sinhronizacija med zavihki

Če ima uporabnik isto stran odprto v več zavihkih brskalnika, se posodobitve v enem zavihku takoj pojavijo v drugih zavihkih. To deluje preko istega mehanizma WebSocket sinhronizacije in ne zahteva dodatne konfiguracije.

Uporabniki lahko imajo vašo stran odprto na več napravah hkrati in vse bodo ostale sinhronizirane. Marker, ustvarjen na namiznem računalniku, se takoj pojavi na uporabnikovi tablici, če obe napravi gledata isto sliko.

Varnost

WebSocket sporočila se prenašajo preko varnih povezav (WSS) in vključujejo preverjanje najemnika (tenant validation), da se zagotovi, da uporabniki prejemajo le posodobitve za pogovore, do katerih so pooblaščeni. Strežnik preveri vse operacije pred njihovim oddajanjem, da prepreči nepooblaščen dostop ali manipulacijo.

Obnašanje brez povezave

Ko so uporabniki popolnoma brez povezave, lahko še vedno ogledajo obstoječe markerje, vendar ne morejo ustvarjati novih ali videti posodobitev drugih. Pripomoček zazna stanje brez povezave in prikaže ustrezno sporočilo.

Če uporabnik poskusi ustvariti marker, medtem ko je brez povezave, in se nato znova poveže, bo operacija neuspešna namesto da bi se postavila v čakalno vrsto, s čimer se zagotovi konsistentnost podatkov. Uporabniki naj poskusijo znova, ko je njihova povezava obnovljena.

Vpliv na zmogljivost

Povezava WebSocket ima minimalen vpliv na zmogljivost. Povezava je neaktivna, kadar ne potekajo posodobitve, in obdeluje sporočila le, ko se pojavi aktivnost. Na tipični sliki z zmerno aktivnostjo markerjev WebSocket porabi manj CPU kot samo upodabljanje slike.

Za strani s stovkami sočasnih uporabnikov in visoko aktivnostjo ustvarjanja markerjev se sistem horizontalno razširi, da ohrani zmogljivost, ne da bi vplival na posamezne odjemalske povezave.

Sodelovalni primeri uporabe

Sinhronizacija v realnem času naredi Image Chat še posebej močan za sodelovalne delovne tokove. Oblikovalne ekipe lahko skupaj pregledujejo makete in vsi vidijo pozicioniranje markerjev v realnem času. Ekipe za podporo strankam lahko skupaj označujejo posnetke zaslona, da prepoznajo težave. Izobraževalne skupine lahko razpravljajo o diagramih, pri čemer vsi udeleženci vidijo markerje drugih, ko so ustvarjeni.

Takojšnja povratna informacija ustvarja bolj privlačno in produktivno sodelovalno izkušnjo v primerjavi s tradicionalnimi sistemi komentarjev, kjer morajo uporabniki osvežiti stran, da vidijo posodobitve.