Pita template

Simpliest way to develop secure and powerful webapps for redpitaya.

Simpliest way to develop secure and powerful app for redpitaya.

Pita 🫓 template to scaffold and manage webapp for redpitaya. Pita allows you to code, build and implement your webapp with a robust and secure environement. It handle all your workflow, from tooling installation to testing, benching and publishing.

Pita project resides in:

pita cli	pita api	pita template

Project are customizable, by default:

• frontend is in typescript/tsx
• backend is in rust
• fpga is in verilog

All app is builded in www/ and sended to repitaya board.

Getting started

Use pita cli or tasks described in deno.jsonc

With Pita cli:

1. Only once, ensure tools and workflow configuration.

   pita requirements --check

2. Init a new project.

   pita init

3. Build sources and implement it on the board.

   pita run

Without Pita cli

1. Check tools.
   1. Required: deno, rustup, vivado, ssh, scp.
   2. Recommanded: vscode, git.
2. Clone this repositor.
3. Edit .pita/project.json with your host configuration and a new valid uuid.
4. Build sources.

   deno task build

5. Connect to your board and enable write access.

   root@rp-XXXX: rw

6. Optionnaly copy your ssh credentials to avoid password.
7. Implement build on board.

   deno task implement

8. Open redpitaya app menu on your browser and test your webapp.

Structure

.
├── 🔵 backend (interface between client and redpitaya fpga/cpu)
├── 🟡 deno.jsonc (tasks)
├── 🔵 fpga (???? bitstream - fpga project structure)
├── 🔵 frontend (client-size application)
│   ├── 🔴 app.tsx (app entry-point)
│   ├── 🔵 components (component lib for building your own panels)
│   └── 🔵 panels (control panels to monitor and pilot board IOs and state)
├── 🟡 import_map.json (js path resolution)
└── 🔵 www (dist app folder)
    ├── 🔵 bin (temp c++ backend interface)
    ├── 🟡 fpga.* (fpga bitstream loading)
    ├── 🔴 index.html (server-side app entry point)
    ├── 🔵 info
    │   ├── 🟢 favicon.png (browser icon)
    │   ├── 🟢 icon.png (redpitaya menu icon)
    │   └── 🟡 info.json (app info, do not manually edit version and revision)
    └── 🔵 src (build assets, do not edit)

🔵 directory
🔴 entrypoint
🟢 assets
🟡 config

Operating diagrams

---
title: Client side web app structure links
---
flowchart TB
    subgraph client [Client browser]
        direction TB
        api[Pita API]
        subgraph panels [Panels/Workers]
            direction LR
            panel1[Panel example 1]
            panel2[Panel example 2]
            webwk1[Worker example - specific code]
        end

        api -- Readable stream --> panels
        panels -- Writable stream --> api
    end
    subgraph rp [Redpitaya board]
        direction TB
        server[NGNIX Server]
    end

    api -- HTTP controller init request --> server
    api <-- Websocket --> server

Loading

---
title: Server side web app structure links
---
flowchart TB
    subgraph client [Client browser]
        direction TB
        api[Pita API]
    end
    subgraph rp [Redpitaya board]
        direction TB
        subgraph cpu [CPU]
            server[NGNIX Server]
            controller[Controller]
            sdk[Redpitaya SDK]
            subgraph workers [Workers]
                wk1[Specific code - ex. Kalman]
                wk2[Specific code - ex. langevin]
            end

            server -- Events --> controller
            controller -- Messages --> server
            controller <--> sdk
            workers <-- Datas --> controller
        end
        subgraph fpga [FPGA]
            fft[FFT IP CORE]
            firmware[Redpitaya FPGA Firmware]
            custom[Custom HDL]
        end
        subgraph IOs [IOs]
            leds[Led 0:7]
            digital[Digital 0:16]
            analog[Analog 0:7]
            dac[DAC 0:1]
            adc[ADC 0:1]
        end
        ram[RAM]

        sdk <--> ram
        IOs <--> ram
        fpga <--> ram
    end

    api -- HTTP controller init request --> server
    api <-- Websocket --> server

Loading

---
title: Example of led switch panel communication
---
sequenceDiagram
    participant Panel as Led 7 Switch Panel
    participant Pita as Pita API
    participant Server as NGNIX Server
    participant Controller as Controller
    participant Led as Led 7

    Pita->>Server: HTTP request to register controller
    note right of Pita: Websocket only below
    loop
        Server-)Pita: Signals and Parameters
    end
    Panel->>Panel: Switch On
    Panel-)Pita: Write state on led 7
    Pita-)Server: Parameters for led state
    Server->>Controller: Trigger parameters event
    Controller->>Led: Write hight state on led 7

Loading

Contributing

Read CONTRIBUTING and start a codespace or clone this repository.

Folow conventionnal commit, document your code and, use deno or rust style coventions on the corresponding directories.

Link your PR with the corresponding issue if it exists.