Tiivistelmä
Even Realities G2 -näyttö on suunniteltu lyhyelle tiedolle, jonka ymmärtää nopeasti. Even Hub tarjoaa kehittäjille 576 x 288 pikselin yksivärisen vihreän piirtoalueen kumpaakin silmää kohden, ja julkinen SDK rakentaa näkymän teksti-, lista- ja kuvasäilöistä eikä vapaamuotoisena, puhelimen kaltaisena käyttöliittymänä. Tehokkaimmissa asetteluissa käytetään siksi lyhyttä tekstiä, selkeää välistystä ja vain muutamaa elementtiä kerrallaan.
Kehitystyön kulku on helpointa ymmärtää yhtenä jatkumona: pariuta G2 Even Realities -puhelinsovelluksessa, kirjaudu tietokoneella Even Hubiin samalla tilillä, asenna kehitystyökalut, luo projekti, avaa src/main.ts, rakenna yksi tekstisäilö, esikatsele sitä Simulatorissa ja skannaa sitten QR-koodi puhelinsovelluksessa testataksesi saman asettelun oikeilla laseilla. Tavoitteena ei ole mahduttaa näytölle mahdollisimman paljon tietoa, vaan antaa käyttäjälle yksi hyödyllinen tieto viemättä hänen huomiotaan pois todellisesta maailmasta.
Mikä Even Realities G2 -näyttö on?
Even Realities G2 on kevyet älylasit, joissa on binokulaarinen micro-LED-aaltojohdenäyttö. Even Hub -laajennuksissa lasit toimivat pääasiassa näyttö- ja syöttöpintana: laajennus toimii yhdistetyn puhelimen kautta, kun taas G2 näyttää sisällön ja lähettää kosketuslevyn tai valinnaisen R1-sormuksen syötteet takaisin sovellukselle.
Kehittäjän piirtoalue on 576 x 288 pikseliä silmää kohden, ja se näytetään vihreänä 16 kirkkaustasolla. Valaisemattomat alueet pysyvät läpinäkyvinä, joten käyttäjä näkee edelleen todellisen maailman tiedon takana. Siksi G2 sopii paremmin kehotteisiin, käännöksiin, tilapäivityksiin ja lyhyisiin ohjeisiin kuin tiiviisiin sivuihin tai monipuolisiin puhelimen kaltaisiin käyttöliittymiin.
Näin suunnittelet ensimmäisen Even G2 -näkymäsi alusta alkaen
Vaihe 1: Ota G2 käyttöön Even Realities -puhelinsovelluksessa
Aloita puhelimesta. Näin luot tilin, jota käytät myös tietokoneella, ja varmistat, että lasit ovat valmiina.
1. Avaa Even Realities App. Luo tili tai kirjaudu sisään puhelinsovelluksessa.
2. Pariuta G2. Avaa Devices > Add device > Even G2 ja noudata pariutuskehotetta.
3. Päivitä laiteohjelmisto. Hyväksy pariutuksen jälkeen mahdollisesti tarjottava laiteohjelmistopäivitys tai tarkista se kohdasta Devices > Firmware.
Vaihe 2: Ota kehittäjäkäyttö käyttöön tietokoneella
Siirry nyt tietokoneelle, mutta pidä puhelin lähellä. Käytä samaa tiliä molemmilla laitteilla.
1. Avaa Even Hub. Siirry tietokoneen selaimella osoitteeseen hub.evenrealities.com/login.
2. Kirjaudu sisään samalla tilillä. Käytä puhelinsovelluksen sähköpostiosoitetta ja salasanaa.
3. Palaa puhelimeen. Pakota Even Realities App sulkeutumaan ja avaa se uudelleen.
4. Etsi kehittäjäosio. Avaa puhelinsovelluksen Even Hub -välilehti. Kehittäjäosion pitäisi nyt näkyä oikeassa yläkulmassa, ja siinä on myös Scan QR.
Vaihe 3: Asenna Node.js ja Even Hub -työkalut
Pysy tietokoneella. Node.js on ohjelmisto, jonka avulla Even Hub toimii tietokoneellasi. Se on asennettava ennen kuin Even Hubin komentorivityökaluja voi käyttää.
1. Asenna Node.js. Even Hub vaatii tällä hetkellä Node 20 LTS:n tai Node 22:n tai uudemman version.
2. Avaa Terminal- tai PowerShell-sovellus. Käytä macOS:ssä Terminalia tai Windowsissa PowerShelliä/Terminalia.
3. Tarkista Node.js. Kirjoita alla oleva komento ja paina Enter. Jos näet version, kuten v20.x tai v22.x, se on valmis käyttöön.
node -v
4. Asenna Even Hub -työkalut. Kirjoita samaan ikkunaan:
npm install -g @evenrealities/evenhub-cli @evenrealities/evenhub-simulator
Vaihe 4: Luo G2-projekti
Tietokone on nyt valmisteltu. Luo yksi uusi projektikansio ja lisää Even Hub SDK sen sisään.
1. Luo projekti Terminalissa. Kirjoita nämä komennot rivi kerrallaan:
npm create vite@latest g2-display-demo -- --template vanilla-ts cd g2-display-demo npm install npm install @evenrealities/even_hub_sdk@latest evenhub init
Even tarjoaa myös valmiita pohjia: npx degit even-realities/evenhub-templates/minimal g2-display-demo antaa projektin, jossa SDK ja app.json ovat jo valmiina
2. Viimeistele app.json. Vite loi projektin, SDK asennettiin sen sisään ja evenhub init loi app.json-tiedoston. Avaa app.json ja aseta package_id (käänteisen verkkotunnuksen muodossa, esimerkiksi com.yourcompany.g2demo), name (enintään 20 merkkiä, eikä se saa sisältää sanaa Even) ja min_sdk_version asentamasi SDK:n versioksi (komento npm list @evenrealities/even_hub_sdk näyttää sen). Lisää harmaasävyinen 24 x 24 -kuvake tiedostoksi public/icon.png.
Vaihe 5: Avaa projekti ja etsi näyttötiedosto
Projekti on olemassa, mutta näkymää ei ole vielä suunniteltu. Avaa kansio koodieditorissa.
1. Avaa Visual Studio Code tai jokin muu koodieditori. Visual Studio Code on yleinen vaihtoehto.
2. Avaa projektikansio. Valitse File > Open Folder ja valitse g2-display-demo.
3. Avaa päätiedosto. Avaa vasemmalla olevasta Explorer-paneelista src > main.ts.
Tämä on keskeinen sijainti: src/main.ts on tiedosto, johon seuraavan vaiheen ensimmäinen G2-näyttökoodi kirjoitetaan.
Vaihe 6: Rakenna yksi yksinkertainen tekstisäilö
Aloita yhdellä säilöllä. Näin varmistat, että projekti ja näyttö toimivat, ennen kuin lisäät asetteluun muita elementtejä.
1. Korvaa src/main.ts-tiedoston aloituskoodi. Poista Viten oletusdemokoodi ja liitä alla oleva koodi. Lisää sitten loppuun nämä rivit, jotta käyttäjä voi poistua sovelluksesta kaksoispainalluksella. Evenin julkaisusäännöt edellyttävät tätä ensimmäisessä näkymässä, ja heidän tarkastajansa tarkistavat sen:
import { waitForEvenAppBridge, TextContainerProperty, CreateStartUpPageContainer, OsEventTypeList, } from '@evenrealities/even_hub_sdk'
const bridge = await waitForEvenAppBridge()
const statusBox = new TextContainerProperty({ xPosition: 24, yPosition: 24, width: 528, height: 240, paddingLength: 8, borderWidth: 0, containerID: 1, containerName: 'status', content: 'MACHINE 04\nReady\n> Continue', isEventCapture: 1, })
await bridge.createStartUpPageContainer( new CreateStartUpPageContainer({ containerTotalNum: 1, textObject: [statusBox], }), )
bridge.onEvenHubEvent((event) => {
if (event.textEvent?.eventType === OsEventTypeList.DOUBLE_CLICK_EVENT) {
bridge.shutDownPageContainer(1)
}
})
2. Tallenna main.ts. Valitse File > Save tai paina Ctrl+S / Cmd+S.
- xPosition / yPosition: Kohta, josta säilö alkaa 576 x 288 -piirtoalueella.
- width / height: Kuinka paljon näyttötilaa säilö saa.
- paddingLength: Säilön reunan ja tekstin välinen tila.
- content: Sanat, jotka käyttäjä näkee.
- containerID / containerName: Tunniste, jolla tätä samaa säilöä päivitetään myöhemmin.
- isEventCapture: 1: Merkitsee tämän ainoaksi säilöksi, joka vastaanottaa tärkeimmät kosketus- ja pyyhkäisytapahtumat.
Vaihe 7: Esikatsele näkymää Even Hub Simulatorissa
Koodi on tallennettu. Esikatsele sitä tietokoneella ennen kuin lähetät sen oikeisiin laseihin.
1. Palaa Terminaliin. Varmista, että olet yhä g2-display-demo-kansiossa.
2. Käynnistä projekti. Kirjoita:
npm run dev
3. Jätä tämä Terminal käyntiin. Vite näyttää yleensä osoitteen, kuten http://localhost:5173.
4. Avaa toinen Terminal-ikkuna. Käynnistä Simulator samalla paikallisella osoitteella:
evenhub-simulator http://localhost:5173
5. Tarkista Simulator. Sinun pitäisi nähdä MACHINE 04, Ready ja > Continue 576 x 288 -esikatselussa.
Vaihe 8: Säädä asettelua samassa src/main.ts-tiedostossa
Älä avaa uutta ohjelmaa tai osiota. Palaa tiedostoon, jota käytit jo vaiheessa 6.
1. Palaa kohtaan Visual Studio Code > src > main.ts. Pidä Simulator ja kehityspalvelin käynnissä.
2. Muuta ensin sisältöä. Korvaa content-kohdan esimerkkisanat käyttötapauksesi todellisilla tiedoilla.
3. Säädä välistystä vain tarvittaessa. Muuta arvoja xPosition, yPosition, width, height tai paddingLength, tallenna ja katso Simulatoria uudelleen.
4. Lisää uusi säilö vain, jos se parantaa selkeyttä. Jos erotat otsikon, pääviestin tai tilan omaksi säilökseen, anna jokaiselle säilölle yksilöllinen containerID ja containerName (enintään 16 merkkiä), lisää se textObject-kohtaan ja kasvata containerTotalNum-arvoa vastaavasti. Sivulla voi olla enintään 8 teksti- tai listasäilöä sekä 4 kuvasäilöä.
Älä lisää puhelimen kaltaisia suunnitteluominaisuuksia: G2 ei tarjoa tavallista fonttikoon säätöä, lihavointia, värillisiä kortteja tai vapaavalintaisia taustatäyttöjä. Käytä niiden sijaan sijaintia, välistystä, reunuksia ja tuettuja kirkkaustasoja.
Vaihe 9: Päivitä muuttuvaa tekstiä rakentamatta sivua uudelleen
Jos säilö pysyy samassa paikassa ja vain sanat muuttuvat, päivitä olemassa olevaa säilöä.
1. Pysy tiedostossa src/main.ts. Lisää TextContainerUpgrade tiedoston alkuun, jossa Even Hub SDK:n työkalut tuodaan.
2. Käytä samaa säilön tunnistetta ja nimeä. Esimerkiksi:
await bridge.textContainerUpgrade( new TextContainerUpgrade({ containerID: 1, containerName: 'status', content: 'MACHINE 04\nComplete\n> Next', }), )
3. Käytä tätä vain sisällön muutoksiin. Jos säilöjen määrä, sijainti tai koko muuttuu, rakenna sivu sen sijaan uudelleen. Even Realitiesin dokumentaation mukaan textContainerUpgrade on nopeampi ja välkkymätön vaihtoehto pelkkiin tekstipäivityksiin.
Vaihe 10: Testaa sama asettelu oikeilla G2-laseilla
Simulator tarkistaa rakenteen, mutta lopullinen suunnitelma tulisi arvioida oikean optiikan läpi.
1. Tee kehityspalvelin puhelimen tavoitettavaksi. Vite kuuntelee oletuksena vain localhostia, joten puhelin ei saa siihen yhteyttä ennen kuin määrität sen hyväksymään ulkopuoliset yhteydet. Luo projektikansioon vite.config.ts (tai lisää server-lohko nykyiseen tiedostoosi) Evenin dokumentoimilla asetuksilla, käynnistä sitten npm run dev uudelleen ja pidä se käynnissä:
import { defineConfig } from 'vite'
export default defineConfig({
server: {
host: true,
hmr: {
host: '192.168.1.100', // Korvaa omalla paikallisella IP-osoitteellasi
},
},
})
2. Selvitä tietokoneen paikallisverkon IP-osoite. Käytä Windows PowerShellissä komentoa ipconfig ja etsi IPv4-osoite. Käytä macOS:ssä Wi-Fi-yhteydelle komentoa ipconfig getifaddr en0.
3. Luo QR-koodi. Korvaa <YOUR-IP> paikallisella osoitteella:
evenhub qr --url "http://<YOUR-IP>:5173"
4. Siirry puhelimeen. Avaa Even Realities App > Even Hub -välilehti > kehittäjäosio > Scan QR.
5. Skannaa tietokoneella näkyvä QR-koodi. Puhelin lataa paikallisen projektin ja välittää sen pariutetuille G2-laseille.
6. Katso lasien läpi. Tarkista, että pääviesti on helppo löytää ja ymmärtää samalla kun katsot todellista ympäristöä.
Verkkohuomautus: Puhelimen ja tietokoneen on saatava yhteys toisiinsa. Yrityksen Wi-Fi, AP-/asiakaseristys tai palomuuri voi estää paikallisen QR-testauksen.
Käytännön asettelusäännöt pienelle vihreälle näytölle
Yksi tarkoitus näkymää kohden:
- Tee: Näytä yksi tila, ohje, kehote tai pieni valinta.
- Vältä: Kojelaudan, ohjeiden ja navigoinnin yhdistämistä samalle sivulle.
Pidä teksti lyhyenä:
- Tee: Käytä muutamaa tiivistä riviä.
- Vältä: Teknisen tekstirajan käyttämistä suunnittelutavoitteena.
Luo hierarkiaa välistyksellä:
- Tee: Erota otsikko, päätieto ja toiminto tyhjällä tilalla.
- Vältä: Hierarkian luomista fonttikoon muutoksilla, joita ei tueta.
Käytä säilöjä harkiten:
- Tee: Lisää säilö vain, kun se antaa tiedolle selkeän roolin.
- Vältä: Säilöjen lisäämistä vain siksi, että sivulle mahtuu niitä enintään 12.
Suunnittele läpinäkyvyys huomioiden:
- Tee: Muista, että valaisemattomista alueista näkyy todellinen maailma HUD-näytön takana.
- Vältä: Piirtoalueen kohtelemista kuin läpinäkymätöntä puhelimen näyttöä.
Käytä kuvia harkiten:
- Tee: Käytä yksinkertaisia, suurikontrastisia kuvakkeita tai tiiviitä vihjeitä.
- Vältä: Yksityiskohtaisia valokuvia tai grafiikkaa, jotka vaativat tarkkaa tarkastelua.
Testaa laitteistolla:
- Tee: Käytä Simulatoria nopeuden vuoksi ja varmista sitten toimivuus oikeilla G2-laseilla.
- Vältä: Lopullisen suunnitelman hyväksymistä pelkän tietokone-esikatselun perusteella.
Millaista liiketoimintatietoa tälle näytölle sopii?
G2 on vahvimmillaan, kun käyttäjä tarvitsee pienen määrän tietoa keskeyttämättä meneillään olevaa tehtävää tai keskustelua.
· Kokouskehotteet: puhujan nimi, yksi keskeinen luku, puheenaihe tai lyhyt muistutus.
· Reaaliaikainen käännös: yksi tai kaksi riviä käännettyä puhetta koko litterointisivun sijaan.
· Ohjatut työnkulut: yksi ohje- tai vahvistusvaihe kerrallaan.
· Tilapäivitykset: koneen tila, toimituksen tila, tehtävän eteneminen tai lyhyt hälytys.
· Navigointivihjeet: suunta, etäisyys tai yksinkertainen nuoli yksityiskohtaisen kartan sijaan.
· Tietokehotteet: lyhyt vastaus, viitenumero tai tilanteeseen liittyvä huomautus.
Miksi hyvä G2-näyttösuunnittelu on tärkeää yrityksille
G2:n arvo ei ole siinä, kuinka paljon tietoa näytölle mahtuu, vaan siinä, kuinka vähän huomiota näyttö vie. Lyhyt, hyvin jäsennelty HUD voi tuoda esiin hyödyllistä tietoa ilman, että työntekijöiden tarvitsee keskeyttää tekemisensä ja avata puhelinta tai kannettavaa tietokonetta. Yrityksille tämä voi tukea keskittyneempiä kokouksia, nopeampaa pääsyä tilatietoihin ja johdonmukaisempia vaiheittaisia työnkulkuja.
Suunnittelurajoitukset voivat myös auttaa tiimejä pitämään räätälöidyt sovellukset kurinalaisina. Kun käytetään uudelleen pientä määrää säilöjä, lyhyttä sisältöä ja ennustettavia vuorovaikutuksia, käyttöliittymät on helpompi oppia ja riski siitä, että laseista tulee jälleen yksi ahdettu sovellus, pienenee.
Yhteenveto
Suunnittelu Even Realities G2 -näytölle alkaa puhelimesta lasien pariuttamisella ja päivittämisellä. Sen jälkeen siirrytään tietokoneelle ottamaan Even Hub -käyttö käyttöön, asentamaan Node.js ja Even Hub -työkalut, luomaan Vite-projekti ja avaamaan src/main.ts, jossa ensimmäinen 576 x 288 -kokoinen vihreä HUD rakennetaan yksinkertaisesta tekstisäilöstä. Esikatsele asettelua Even Hub Simulatorissa, säädä sisältöä ja välistystä samassa tiedostossa, käytä textContainerUpgradea, kun vain sanat muuttuvat, ja skannaa lopuksi kehitys-QR-koodi Even Realities Appissa testataksesi asettelun oikeilla G2-laseilla. Vahvimmissa yrityskäyttöliittymissä jokainen näkymä pidetään lyhyenä, keskittyneenä ja yhdellä silmäyksellä ymmärrettävänä, jolloin yritykset voivat tuoda esiin käännöksiä, kehotteita, tilatietoja tai työnkulun ohjeita ilman, että työntekijöitä vedetään toistuvasti pois fyysisestä tehtävästä tai keskustelusta tarkistamaan toista näyttöä.
Rakennatko omaa Even G2 -työnkulkua? Aloita yhdestä hyödyllisestä näkymästä, testaa se Simulatorissa ja oikeilla laseilla ja laajenna vasta, kun seuraava tieto selvästi parantaa käyttäjän tehtävän sujumista.