ℹ️ Diagrams for insight in relations between components of the toolbox

---
config:
  layout: fixed
  theme: neutral
  look: neo
---
flowchart LR
    A(["Config files"]) --> n3(["EDIA Engine"])
    n3 --> n1(["Logfiles"])
    n4(["VR User"]) <--> n3
    n5(["Experimenter"]) <--> n3
     A:::EDIA
     n3:::EDIA
     n1:::EDIA
     n4:::EDIA
     n5:::EDIA
    classDef EDIA stroke:#F2F2F2, fill:#347FA9, color:#F2F2F2, stroke-width:2px, stroke-dasharray: 0
    style A fill:#757575,color:#FFFFFF
    style n1 fill:#757575,color:#FFFFFF
    style n4 fill:#424242,color:#FFFFFF
    style n5 fill:#424242,color:#FFFFFF

EDIA Engine overview

Two main engines in EDIA

  1. Controller: Controlling the experiment
  2. Executor: Executing the experiment
---
config:
  theme: neutral
  themeVariables:
    fontSize: 15px
    fontFamily: Bahnschrift
  layout: fixed
---
flowchart TD
 subgraph s2["Executor"]
    direction TB
        n4["VR"]
        n3["Experiment logic"]
        n7["Task logic"]
        n8["Logging"]
  end
 subgraph s3["Controller"]
        n5["Experimenter UI"]
        n6["Configs"]
  end
    s3 <==> s2
    n4@{ shape: rounded}
    n3@{ shape: rounded}
    n7@{ shape: rounded}
    n8@{ shape: rounded}
    n5@{ shape: rounded}
    n6@{ shape: rounded}
     n4:::EdiaBlue
     n3:::EdiaBlue
     n7:::EdiaBlue
     n8:::EdiaBlue
     n5:::EdiaBlue
     n6:::EdiaBlue
    classDef EdiaCyan stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#34AAAA, color:#FEFEFE
    classDef EdiaGrey stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#797873, color:#FEFEFE
    classDef EdiaOrange stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#D9740D, color:#FEFEFE
    classDef EdiaPurple stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#C36897, color:#FEFEFE
    classDef EdiaYellow stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#FFdC4A, color:#FEFEFE
    classDef EdiaGreen stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#428360, color:#FEFEFE
    classDef EdiaBlue stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#347FAA, color:#FEFEFE
    style s3 fill:transparent,stroke:#BBDEFB
    style s2 fill:transparent,stroke:#BBDEFB
    click n6 "<https://mind-body-emotion.notion.site/Config-Files-1cb03dd4773f8121b74ccd4b6a95ab7c>"

These can be running in the same build, or on different builds on different devices.

---
config:
  theme: neutral
  themeVariables:
    fontSize: 15px
    fontFamily: Bahnschrift
  layout: dagre
---
flowchart TD
 subgraph s3["Executor"]
        n6["Executor Components"]
  end
 subgraph s5["Controller"]
        n12["Controller Components"]
  end
    s5 <==> n9["Interface"]
    n10["Interface"] <==> s3
    n9 <-.-> n10
    n6@{ shape: rect}
    n12@{ shape: rect}
    n9@{ shape: lean-r}
    n10@{ shape: lean-l}
     n6:::EdiaBlue
     n12:::EdiaBlue
     n9:::EdiaCyan
     n10:::EdiaCyan
    classDef EdiaGrey stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#797873, color:#FEFEFE
    classDef EdiaPurple stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#C36897, color:#FEFEFE
    classDef EdiaYellow stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#FFdC4A, color:#FEFEFE
    classDef EdiaGreen stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#428360, color:#FEFEFE
    classDef EdiaBlue stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#347FAA, color:#FEFEFE
    classDef EdiaOrange stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#D9740D, color:#FEFEFE
    classDef EdiaCyan stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#34AAAA, color:#FEFEFE
    style s5 fill:transparent,stroke:#BBDEFB
    style s3 fill:transparent,stroke:#BBDEFB

🪜 Xblock execution

<aside> 1️⃣

OnBlockStart

Start of Xblock Check for intro flag

</aside>

<aside> <img src="/icons/chat_green.svg" alt="/icons/chat_green.svg" width="40px" />

MessagePanelVR

Show text if any found in config file

</aside>

<aside> 2️⃣

OnTrialStart

UXF trial start call

</aside>

<aside> 3️⃣

OnStepStart

Start of xblock defined step

</aside>

<aside> <img src="/icons/playback-play-button_orange.svg" alt="/icons/playback-play-button_orange.svg" width="40px" />

OnProceed

Continue to next step

</aside>

<aside> 4️⃣

InBetweenSteps

Moment between steps

</aside>

<aside> 5️⃣

OnTrialEnd

UXF trial end call

</aside>

<aside> 6️⃣

OnBlockEnd

End of Xblock

</aside>

<aside> 7️⃣

OnBlockOutro

Check for Outro flag

</aside>

<aside> <img src="/icons/chat_green.svg" alt="/icons/chat_green.svg" width="40px" />

MessagePanelVR

Show text if any found in config file

</aside>

---
config:
  theme: neutral
  themeVariables:
    fontSize: 15px
    fontFamily: Bahnschrift
  layout: elk
---
flowchart TD
    n1["OnBlockStart"] --> n2["OnTrialStart"] & n7["Intro"]
    n2 --> n3["OnStepStart"]
    n3 --> n4["OnProceed"]
    n5["InBetweenSteps<br>"] --> n6["OnTrialEnd"] & n3
    n7 --> n2
    n4 --> n5 & n6
    n6 --> n9["OnBlockEnd"]
    n9 --> n10["OnBLockOutro"]
    n10 --> n8["Outro"]
    n10 -.-> n13(["Executor statemachine"])
    n12(["Executor statemachine"]) -.-> n1
    n8 -.-> n13
    n1@{ shape: rounded}
    n2@{ shape: rounded}
    n7@{ shape: display}
    n3@{ shape: rounded}
    n4@{ shape: rounded}
    n5@{ shape: rounded}
    n6@{ shape: rounded}
    n9@{ shape: rounded}
    n10@{ shape: rounded}
    n8@{ shape: display}
     n1:::EdiaBlue
     n2:::EdiaBlue
     n7:::EdiaGreen
     n3:::EdiaBlue
     n4:::EdiaCyan
     n4:::EdiaOrange
     n5:::EdiaBlue
     n6:::EdiaBlue
     n9:::EdiaBlue
     n10:::EdiaBlue
     n8:::EdiaGreen
    classDef EdiaGrey stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#797873, color:#FEFEFE
    classDef EdiaPurple stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#C36897, color:#FEFEFE
    classDef EdiaYellow stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#FFdC4A, color:#FEFEFE
    classDef EdiaCyan stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#34AAAA, color:#FEFEFE
    classDef EdiaOrange stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#D9740D, color:#FEFEFE
    classDef EdiaBlue stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#347FAA, color:#FEFEFE
    classDef EdiaGreen stroke:transparent, stroke-width:4px, stroke-transparent: 0, fill:#428360, color:#FEFEFE
    style n13 stroke-width:2px,stroke-dasharray: 2
    style n12 stroke-width:2px,stroke-dasharray: 2