Skip to content

Custom fe docs fix #800

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FSAFTik wants to merge 16 commits into
base: main
Choose a base branch
from
Open

Custom fe docs fix #800

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
328c7f3
chagned raw streams readme
Jan 5, 2026
03aae96
updated FE dependencies for raw streams
Jan 5, 2026
705476a
Fixed Docs for custom FE
Jan 5, 2026
7d1ccd3
fixed Pre Commit
Jan 6, 2026
d216ef6
fixed base passes and renamed Services
Jan 6, 2026
e44199d
Added running dics
Jan 6, 2026
a275e04
Fixed pre-commit
Jan 6, 2026
24163f6
Edited panda config in getting started
Jan 6, 2026
661ca81
fixed typing
Jan 6, 2026
d01591c
Panda setup chagned
Jan 8, 2026
5844d57
Finished panda setups and FE docs
Jan 9, 2026
9891b52
Refactored the structure of the doc
Jan 15, 2026
608d97c
Small fixes
Jan 15, 2026
13b9769
Typo fix
Jan 15, 2026
d2aa716
Minor chagnes
Jan 16, 2026
0fdea88
removed redundant package-lock.json file
Jan 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
553 changes: 515 additions & 38 deletions custom-frontend/GETTING_STARTED.md
View file
Open in desktop

Large diffs are not rendered by default.

23 changes: 22 additions & 1 deletion custom-frontend/raw-stream/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ Here is a list of all available parameters:

### Installation

#### BackEnd

You need to first prepare a **Python 3.10** environment with the following packages installed:

- [DepthAI](https://pypi.org/project/depthai/),
Expand All @@ -38,15 +40,34 @@ You can simply install them by running:
pip install -r requirements.txt
```

#### FrontEnd

You need to have [Node.js](https://nodejs.org/en/download/) installed (version 18 or higher is required).

Then, navigate to the `frontend` folder and install the dependencies by running:

```bash
npm install
```

and build the frontend with:

```bash
npm run build
```

Running in peripheral mode requires a host computer and there will be communication between device and host which could affect the overall speed of the app. Below are some examples of how to run the example.

### Examples

To run in peripheral mode, please set environment variable `OAKAPP_STATIC_FRONTEND_PATH` to point the path to build FE files.
From the root of the example folder, run:

```bash
python3 main.py
```

This will run the example, and you’ll be able to access the frontend in your browser at `http://localhost:8080`.
This will run the example, and you’ll be able to access the frontend in your browser at `http://localhost:8082`.

## Standalone Mode (RVC4 only)

Expand Down
32 changes: 1 addition & 31 deletions custom-frontend/raw-stream/frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="./vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Local Frontend Example</title>

<script>
// TODO: We have to get rid of this
global = globalThis;
const _Worker = window.Worker;
class WindowDynamicBaseWorker extends _Worker {
DEBUG_IS_DYNAMIC_POLYFILL = true;

constructor(scriptUrl, options) {
const url = new URL(scriptUrl);
url.pathname = `${window.__basePath}${url.pathname}`;
super(url, options);
}

postMessage(message, transfer) {
super.postMessage(message, transfer);
}
}
window.Worker = WindowDynamicBaseWorker;

// NOTE: Inject `__basePath` to window for dynamic base name support
const segments = window.location.pathname.split("/").filter(Boolean);
const page = segments.at(-1) === "pipeline"
? "pipeline"
: "streams";
window.__basePath = segments.slice(0, page === "pipeline" ? -1 : undefined).join("/");
if (window.__basePath) {
window.__basePath = `/${window.__basePath}`
}
</script>
</head>
<body>
<div id="root"></div>
Expand Down
Loading