Skip to main content

WASM Simulator

ElenixOS provides a WASM (WebAssembly) version of the simulator, which you can access directly through a browser without installing any dependencies to experience ElenixOS.

Try it out online: ElenixOS Simulator

WASM Build Method

Environment Requirements

  • Operating system: Linux, macOS, or Windows
  • Build tools:
    • CMake (3.13+)
    • Emscripten SDK (4.0.11 or higher)

Install Emscripten SDK

  1. Download and install Emscripten SDK

    # Clone the Emscripten repository
    git clone https://github.com/emscripten-core/emsdk.git

    # Enter the emsdk directory
    cd emsdk

    # Install the specified version of Emscripten
    ./emsdk install 4.0.11

    # Activate Emscripten
    ./emsdk activate 4.0.11

    # Configure environment variables
    source ./emsdk_env.sh

Build WASM Version

  1. Clone ElenixOS-Simulator repository

    git clone --recursive https://github.com/ElenixOS/ElenixOS-Simulator
    cd ElenixOS-Simulator
  2. Configure WASM build

    emcmake cmake -S . -B build-wasm -DEOS_PLATFORM=WASM -DCMAKE_BUILD_TYPE=Release
  3. Build WASM artifacts

    cmake --build build-wasm --parallel
  4. View build artifacts

    After building, the artifacts will be located in the build-wasm/bin directory, including:

    • main.html: HTML entry file for the WASM simulator
    • main.js: JavaScript glue code
    • main.wasm: WebAssembly binary file
    • main.data: Data file

Run in Browser

Local Run

  1. Start local server

    cd build-wasm/bin
    python3 -m http.server 8000
  2. Access in browser

    Open your browser and visit http://localhost:8000/build-wasm/bin/main.html to see the ElenixOS simulator.

Access via GitHub Pages

The ElenixOS-Simulator repository includes a workflow for automatically building and deploying the WASM version to GitHub Pages. After building, you can access it through the following links:

https://<owner>.github.io/<repo>/wasm/latest/main.html

Embed in Other Pages

If your page is hosted under the same GitHub Pages site as the WASM simulator, you can link directly:

<a href="/ElenixOS-Simulator/wasm/latest/main.html" target="_blank" rel="noopener">Open ElenixOS Simulator</a>

Embed using iframe

You can also embed the ElenixOS simulator in other pages using an iframe:

<iframe
src="/ElenixOS-Simulator/wasm/latest/main.html"
width="100%"
height="720"
style="border:0"
loading="lazy"
referrerpolicy="no-referrer"
></iframe>

If your page is hosted elsewhere, use the full absolute URL:

<iframe
src="https://<owner>.github.io/<repo>/wasm/latest/main.html"
width="100%"
height="720"
style="border:0"
loading="lazy"
referrerpolicy="no-referrer"
></iframe>

VSCode Usage

Configure VSCode

  1. Install recommended extensions

    • C/C++ extension
    • CMake Tools extension
    • GDB extension (for debugging)
  2. Open project

    Open the ElenixOS-Simulator project with VSCode, it is recommended to directly open the workspace file simulator.code-workspace.

  3. Configure build target

    • Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) to open the command palette
    • Type CMake: Select a Kit and select the Emscripten toolchain
    • Type CMake: Configure to configure the project
    • Type CMake: Set Build Target and select main

Build and Run

  1. Build project

    • Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux) to open the command palette
    • Type CMake: Build to build the project
  2. Run simulator

    • After building, start a local server in the build-wasm/bin directory
    • Visit http://localhost:8000/build-wasm/bin/main.html in your browser

Common Issues

Emscripten SDK Installation Failure

Build Failure

  • Ensure Emscripten SDK is correctly activated
  • Check if CMake version meets requirements (3.13+)
  • Ensure all submodules are correctly cloned

Browser Run Failure

  • Ensure using a modern browser (Chrome, Firefox, Safari, Edge, etc.)
  • Check if the browser supports WebAssembly
  • Ensure the local server is correctly started