<img align="center" scale="1" src="https://upload.wikimedia.org/wikipedia/commons/9/93/Fibonacci_spiral_34.svg" align="center">

# Dokumentation
Detta dokument bör innehålla designbeslut, begränsningar, beskrivning av moduler osv.
## Kort om app
### Specifikation (bör fyllas på)
Bör har en kompass som visar vilken riktning gubben är i.
När man närmar sig gubben med några meter bör den synas och någon annan visuell feedback bör ges. Gubben ska gå att klicka på.
Bör finnas en meter mätare som indikerar hur många meter ifrån gubben man är(Fågelvägen).
<img src="https://i.imgur.com/Vs9Q09O.png" align="center">
Kartan över utrymmet(Curiosums planlösning) används av admin för att specificera koordinater eller sätta ut en gubbe(upp till dom som arbetar med det). Då får vi koordinater som vi ska beräkna avstånd till. Vi behöver alltså inte hålla koll på väggar eller något annat som kräver en nav mesh. Vi uppdaterar enbart kompassen och avståndet till karaktären.
# Sätt upp projektet
## Installation av test systemet (testbed)
1. Ladda ner senaste uppdatering från git.
2. Installera följande paket.
- Om mac.

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    brew install node
    brew install watchman

- Om Linux

    apt-get install node
    apt-get install watchman

3. Kör följande kommando i phone-ar katalogen.

    npm install -g typescript
    npm install -g react-native-cli
    npm install react-viro-cli
    npm install ngrok
    npm install

4. För att starta server kör `npm start`
5. Ladda ner viro media från google play eller app store för att kunna köra appen i testbed.
6. när du blir sagd att skriva in ngrok koden kan du antigen hitta den på `localhost:4040/status` eller syns det på terminalen enligt följande bild.
<img src="https://i.imgur.com/yq1FMJy.png" align="center">
# Filstruktur
Baserat på http://www.digitstory.com/react-native-project-structure-a-handsome-way/
https://cheesecakelabs.com/blog/efficient-way-structure-react-native-projects/

phone-ar
│    __tests__
└─    android
│    bin
│    ios
│    node_modules
├───test
│     └best-test.ts
├───src
│   └───lib
│       └───ar-component
│           ├───assets
│           ├───components
│               └ArComponent.tsx(den här kommer app1 importera)
│           ├───scenes
│           ├───styles
│           └───utils
│   App.tsx
│   desc.d.ts /types for react-viro.

## src

src
├───assets
├───components
├───scenes
├───styles
└───utils

### src/assets
Innehåller alla assets som används, så som bilder, 3d modeller osv.

src
├───assets
│     └───fonts
│          └bestfont.ttf
│     └───images
│          └smile.jpg
│     └───models
│          └3dsmile.vrx

### src/components
Innehåller komponenter i projektet(knappar, input osv)

src
├───assets
└───components
        └bestBtn.ts

### src/scenes
Innehåller de olika vyerna som används.

src
├───assets
├───components
└───scenes
        └───login
                └index.ts

### src/styles
Innehåller olika stilar som används i projektet

src
├───assets
├───components
├───scenes
├───styles
        └colors.ts       

### src/utils
Hjälpklasser

## System

### Model/Avatar bygg system (Exempel)
Exempel på hur ett system som bygger upp avataren kan se ut.

    let builder = new AvatarModelBuilder();
    
    //anger vilken hatt avataren ska ha
    builder.setHat({
        model:"http://res.com/hat.fbx",
        albedo:"http://res.com/hat_tex.png"
    });
    
    //anger vilken tröja avataren ska ha...
    builder.setShirt({
        model:"http://res.com/shirt.fbx",
        albedo:"http://res.com/shirt_tex.png"
    });
    //...
    
    //detta skapar en avatar modell som kan användas av Viro.
    Model avatar = builder.buildAvatar();
    
    //för att den ska vara kompitabel med Viro kan en
    // class wrapper skapas. Detta gör den mer generisk och 
    // inte bunden till ViroReact model system.
    ViroModel m = new ViroModel(avatar);
    

### Kommunikation system (Exempel)
Denna AR app kommer använda ett event baserat system för kommunikation. Ex.

import ARComponent from '/lib/ar-component/components/ARComponent.tsx'
//...
render() {
    return (
        <ARComponent 
            onInitialized={this.onInitialized}
            onChange={this.onArChange}
        />
    );
}

onInitialized(ar: AvatarAR) {
    //...
}

onArChange(data : AvatarData) {
    //...
}

onInitialized Körs när AR kör och det skickas med ett AvatarAR object.
AvatarAR används av App 1 för att komminucera med oss (App 2) och onChange
komminucerar tillbaka till App 1.

ex. på onInitialized.

onInitialized(ar: AvatarAR) {
    
    //sets the avatar position. format:{x: number, y: number, z: number}
    ar.setAvatarPosition({x: 0,y: 0,z: 0});
    
    //hides the avatar.
    ar.hideAvatar();
    
    /*
     * Skapar ett nytt text event som avataren kommer att säga
     * i 1000ms (1 sekund) och sedan försvinna.
     */
    Event event = ar.createNewTextEvent("Hello user!!")
                    .hideAfter(1000)
                    .show();
                 
    //gömmer texten så den inte syns.
    event.hide();
    
    //ar kan sparas undan och användas i andra platser
    //utanför denna metod.
    this.arHandler = ar;
}

onArChange kommer att kallas då någon data har ändrats i AR scenen. t.ex. distancen till avataren,

onArChange(data : AvatarData) {
    data.hasChanged(AvatarData.DISTANCE) // true ifall distancen har
                                         // ändras sedan förra onArChange
                                         // kallelse.
                                      
    data.distanceToAvatar; // t.ex. 32, vilket är 32 meter till avataren.
    data.avatarVisible // true om avataren syns på skärmen
    data.position // position av användaren relativt till start punkten.
}

Vi behöver veta
- Var karaktären ska placeras
- Hur karaktären ska se ut

De behöver veta
- Om användaren är i närheten av avataren och om avataren ska visas

To communicate with the ArComponent two callbacks has to be registered on the component. One for sending data to the component and one for receiving. Example code.

import ARComponent from '/lib/ar-component/components/ARComponent.tsx'

class App extends Component {
  render() {
    return (
      <ARComponent onInitialized={this.onInitialized} onChange={this.onArChange} />
    );
  }

  onInitialized(ev: ArEventListener) {
    //...  
  }

  onChange(data: AvatarData) {
    //...
  }
}

onInitialized is called when the ArComponent has been mounted and the ArEventListener object in onInitialized is used to communicate with the component. Example of communication.

onInitialized(ev: ArEventListener) {
    // Tells the ArComponent to use SLAM technology instead of GPS.
    ev.useSLAM({ latitude: 0, longitude: 0 });
    //sets the avatar position at a gps coordinate. format:{latitude: number, longitude: number}
    ev.setAvatarPosition({ latidude: 1, longitude: 1.123 });
    
    //hides the avatar.
    ev.hideAvatar();
    
    /*
     * Creates a new text event which will display a text for 1000ms (1 second)
     * and then dissapear. If hideAfter is not given, the event will only be hidden
     * when called .hide()
     */
    Event event = ev.createNewTextEvent("Hello user!!")
                    .hideAfter(1000)
                    .show();
                 
    // Hides the text event.
    event.hide();
    
    // 
    this.evListener = ev;
}

onChange is called when data has changed in the ArComponent scene. Example

onArChange(data : AvatarData) {
    data.hasChanged(AvatarDataType.DISTANCE) // true is attribute distance has changed.
                                      
    data.distance; // f.ex 32, which is 32 meters from the user.
    data.avatarVisible; // true if avatar is visible.
    data.position; // position of the user.
}