Percentage-Based Positioning

Image Chat uporablja koordinate, izražene v odstotkih, namesto pikselskih koordinat za pozicioniranje oznak klepeta na slikah. Ko uporabnik klikne na sliko, pripomoček pretvori pikselske koordinate klika v odstotke širine in višine slike. Ta pristop zagotavlja, da oznake ostanejo na pravem mestu ne glede na to, kako je slika prikazana.

Na primer, če uporabnik klikne 250 slikovnih pik od levega roba slike širine 1000 px, pripomoček to shrani kot 25% od leve strani. Ko drug uporabnik pogleda isto sliko na mobilni napravi, kjer je široka 500 px, se oznaka prikaže 125 slikovnih pik od leve, kar je še vedno 25% širine.

Benefits for Responsive Layouts

Ta sistem z odstotki omogoča, da Image Chat nemoteno deluje na vseh velikostih in orientacijah naprav. Vaše slike so lahko prikazane v različnih velikostih glede na širino zaslona, CSS pravila ali omejitve vsebnika, vendar se oznake vedno pravilno poravnajo s predvidenimi lokacijami.

Uporabniki na namiznih računalnikih z velikimi monitorji vidijo oznake na enakih sorazmernih položajih kot uporabniki na pametnih telefonih z majhnimi zasloni. Oznake se skalirajo sorazmerno s samo sliko.

Image Scaling and Aspect Ratio

Dokler vaša slika pri spreminjanju velikosti ohranja svoj razmerje stranic (kar je privzeto vedenje brskalnika), bodo oznake, izražene v odstotkih, ostale popolnoma poravnane. Pripomoček predvideva, da se slike skalirajo sorazmerno in izračunava položaje na podlagi tega predpostavka.

Če uporabite CSS, ki izkrivlja razmerje stranic slike (na primer z uporabo object-fit: cover s specifičnimi dimenzijami), se položaji oznak morda ne bodo pravilno poravnali. Za najboljše rezultate dovolite slikam, da se naravno skalirajo, ali uporabite object-fit: contain, da ohranite razmerje stranic.

Chat Square Sizing

Vidna velikost oznak klepeta je prav tako izražena v odstotkih. Konfiguracijska možnost chatSquarePercentage privzeto znaša 5%, kar pomeni, da je vsako polje veliko 5% širine slike. To zagotavlja enako vizualno težo na različnih velikostih slik.

Na sliki širine 1000 px z privzeto nastavitvijo 5% so oznake kvadratne s 50 px. Na sliki širine 500 px so iste oznake kvadratne s 25 px. Ostanejo sorazmerne velikosti slike.

Mobile Behavior

Na zaslonih, ožjih od 768 px, se Image Chat preklopi na postavitev, optimizirano za mobilne naprave. Okna klepeta se odprejo celozaslonsko namesto plavajoče ob oznaki. To izboljša uporabnost na majhnih zaslonih, kjer bi plavajoča okna preveč zakrivala sliko.

Sami oznake ostanejo vidne in klikabilne na svojih položajih, izraženih v odstotkih. Uporabniki lahko še vedno vidijo, kje so vse razprave, in tapnejo oznake, da odprejo celozaslonsni vmesnik klepeta.

Dynamic Image Loading

Sistem, ki temelji na odstotkih, deluje pravilno tudi, ko se slike nalagajo asinhrono ali spremenijo velikost po nalaganju strani. Pripomoček spremlja element slike in ponovno izračuna položaje oznak vsakič, ko se spremenijo dimenzije slike.

Če uporabljate odloženo nalaganje slik ali uvajate odzivne slike z različnimi velikostmi na različnih prelomih, se oznake samodejno prilagodijo, ko se velikost slike spremeni.

Cross-Device Consistency

Ker so koordinate shranjene v bazi kot odstotki, se razprava, ustvarjena na namiznem računalniku, prikaže na enakem sorazmernem mestu tudi na tablici ali telefonu. Uporabniki lahko sodelujejo med napravami brez neskladij v pozicioniranju.

To deluje v obe smeri. Razprava, ustvarjena z dotikom določene točke na mobilni napravi, se prikaže na enakem sorazmernem položaju, ko jo pogledate na velikem namiznem monitorju.

Viewport Considerations

Pripomoček izračunava odstotke glede na sam element slike, ne na pogledno okno (viewport). To pomeni, da pomikanje po strani ali spreminjanje velikosti okna brskalnika ne vpliva na položaje oznak. Oznake ostanejo pritrjene na svojih lokacijah na sliki ne glede na spremembe viewporta.

Future-Proofing Content

Pristop, ki temelji na odstotkih, naredi vaše razprave o slikah odporne na spremembe postavitve, dizajna ali ekosistema naprav. Ko se pojavijo nove velikosti zaslonov in naprave, se obstoječe razprave še naprej pravilno prikazujejo 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.