{"id":24558121,"url":"https://github.com/rse/huds-hud-training","last_synced_at":"2025-09-01T01:33:28.304Z","repository":{"id":44095350,"uuid":"250926611","full_name":"rse/huds-hud-training","owner":"rse","description":"Training HUD for HUDS","archived":false,"fork":false,"pushed_at":"2025-07-28T11:41:08.000Z","size":2429,"stargazers_count":12,"open_issues_count":0,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-08-29T16:30:31.885Z","etag":null,"topics":["head-up-display","hud","huds","obs-studio","stream-deck","training"],"latest_commit_sha":null,"homepage":"http://npmjs.com/huds-hud-training","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-29T01:02:37.000Z","updated_at":"2025-07-28T11:41:10.000Z","dependencies_parsed_at":"2023-01-22T04:04:15.856Z","dependency_job_id":"59bcd98b-d82c-4d56-9aa3-84271e87f78e","html_url":"https://github.com/rse/huds-hud-training","commit_stats":null,"previous_names":[],"tags_count":150,"template":false,"template_full_name":null,"purl":"pkg:github/rse/huds-hud-training","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rse%2Fhuds-hud-training","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rse%2Fhuds-hud-training/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rse%2Fhuds-hud-training/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rse%2Fhuds-hud-training/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rse","download_url":"https://codeload.github.com/rse/huds-hud-training/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rse%2Fhuds-hud-training/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273064374,"owners_count":25039259,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["head-up-display","hud","huds","obs-studio","stream-deck","training"],"created_at":"2025-01-23T05:47:26.211Z","updated_at":"2025-09-01T01:33:28.285Z","avatar_url":"https://github.com/rse.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\nTraining HUD for HUDS\n======================\n\n**Training HUD for Head-Up-Display Server (HUDS)**\n\n\u003cp/\u003e\n\u003cimg src=\"https://nodei.co/npm/huds-hud-training.png?downloads=true\u0026stars=true\" alt=\"\"/\u003e\n\n\u003cp/\u003e\n\u003cimg src=\"https://david-dm.org/rse/huds-hud-training.png\" alt=\"\"/\u003e\n\nAbstract\n--------\n\nThis is a Head-Up-Display (HUD) running under the [Head-Up-Display Server\n(HUDS)](https://github.com/rse/huds) for performing online trainings as broadcasted live-video streams.\nIt acts as a HUD or \"overlay\" in your video\nproduction scenario. It is specially intended to be used with [OBS Studio](https://obsproject.com/)'s\n[CEF](https://en.wikipedia.org/wiki/Chromium_Embedded_Framework)-based\n[Browser Source](https://obsproject.com/wiki/Sources-Guide#browsersource)\nand optionally the [Elgato Stream Deck](https://www.elgato.com/en/gaming/stream-deck)\nremote control device and its [System:Website](https://help.elgato.com/hc/en-us/articles/360028234471-Elgato-Stream-Deck-System-Actions) function.\n\nExample\n-------\n\n![screenshot-1](screenshot-1.jpg)\n\n![screenshot-2](screenshot-2.png)\n\nUsage\n-----\n\n1.  **Install [Node.js](https://nodejs.org/):**\u003cbr/\u003e\n    First, install the [Node.js](https://nodejs.org/) run-time execution environment\n    by following the instructions on the [Node.js](https://nodejs.org/) website.\n\n2.  **Install and Start Training HUD:**\u003cbr/\u003e\n    Now install and start this training HUD with the help of the\n    [Head-Up-Display Server (HUDS)](https://github.com/rse/huds)\n    and optionally a customized [training configuration](./training.yaml).\n    Here you have three different options:\n\n    -   **Option 1**: Without any installation (directly from source tree):\n\n        ```sh\n        $ git clone https://github.com/rse/huds-hud-training\n        $ cd huds-hud-training\n        $ npm install\n        $ vi training.yaml  # optionally edit the training configuration\n        $ npm run huds -- \\\n            -a 127.0.0.1 -p 9999 \\\n            -d training:.,training.yaml\n        ```\n\n    -   **Option 2**: Without any installation (from distribution)\n\n        ```sh\n        $ curl -LO https://github.com/rse/huds-hud-training/raw/master/training.yaml\n        $ vi training.yaml  # optionally edit the training configuration\n        $ npx -p huds -p huds-hud-training huds \\\n            -a 127.0.0.1 -p 9999 \\\n            -d training:@huds-hud-training,training.yaml\n        ```\n\n    -   **Option 3**: With global system installation:\n\n        ```sh\n        $ npm install -g huds huds-hud-training\n        $ curl -LO https://github.com/rse/huds-hud-training/raw/master/training.yaml\n        $ vi training.yaml  # optionally edit the training configuration\n        $ huds \\\n            -a 127.0.0.1 -p 9999 \\\n            -d training:@huds-hud-training,training.yaml\n        ```\n\n    Hint: when customizing the [training configuration](./training.yaml)\n    feel free to both replace (for adjustment) or even completey\n    kick-out (for disabling) the `title`, `progress`, `banner` and\n    `logo` sections.\n\n3.  **Start [OBS Studio](https://obsproject.com/)**:\u003c/br\u003e\n    Start [OBS Studio](https://obsproject.com/) and add a [Browser\n    Source](https://obsproject.com/wiki/Sources-Guide#browsersource) to\n    any scene. As the URL for the browser source use:\n\n    ```\n    http://127.0.0.1:9999/training/\n    ```\n\n4.  **Locally Control HUD** (Keystrokes):\u003cbr/\u003e\n    If you want to interact with the HUD directly from within [OBS\n    Studio](https://obsproject.com/), right-click onto the browser\n    source and choose \"Interact\". In the interaction window, you then\n    can press the particular control keys mentioned for each Widget\n    below.\n\n5.  **Remote Control HUD (Programmatically)**:\u003cbr/\u003e\n    Now you can also programmatically control the HUD by remotely triggering the events\n    from any shell with the help of the [cURL](https://curl.haxx.se/) utility:\n\n    ```sh\n\tcurl -D- http://127.0.0.1:9999/training/event/logo.animate\n\tcurl -D- http://127.0.0.1:9999/training/event/title.animate\n\tcurl -D- http://127.0.0.1:9999/training/event/progress.prev\n\tcurl -D- http://127.0.0.1:9999/training/event/progress.next\n\tcurl -D- http://127.0.0.1:9999/training/event/agenda.toggle\n\tcurl -D- http://127.0.0.1:9999/training/event/attendance.animate\n\tcurl -D- http://127.0.0.1:9999/training/event/attendance?data={\"client\":\"...\",\"event\":\"...\"}\n\tcurl -D- http://127.0.0.1:9999/training/event/attendees.toggle\n\tcurl -D- http://127.0.0.1:9999/training/event/latency.toggle\n\tcurl -D- http://127.0.0.1:9999/training/event/timer.start?data=\u003cminutes\u003e\n\tcurl -D- http://127.0.0.1:9999/training/event/timer.stop\n\tcurl -D- http://127.0.0.1:9999/training/event/votes.toggle\n\tcurl -D- http://127.0.0.1:9999/training/event/votes.type.judge\n\tcurl -D- http://127.0.0.1:9999/training/event/votes.type.evaluate\n\tcurl -D- http://127.0.0.1:9999/training/event/votes.type.quiz\n\tcurl -D- http://127.0.0.1:9999/training/event/votes.type.choose\n\tcurl -D- http://127.0.0.1:9999/training/event/votes.type.propose\n\tcurl -D- http://127.0.0.1:9999/training/event/votes.receive?data={\"client\":\"...\",\"choice\":\"...\"}\n\tcurl -D- http://127.0.0.1:9999/training/event/votes.reveal\n\tcurl -D- http://127.0.0.1:9999/training/event/votes.disclose\n\tcurl -D- http://127.0.0.1:9999/training/event/votes.quiz.prev\n\tcurl -D- http://127.0.0.1:9999/training/event/votes.quiz.next\n\tcurl -D- http://127.0.0.1:9999/training/event/popup.add?data={\"client\":\"...\",\"type\":\u003ctype\u003e[,\"title\":\"...\"],\"text\":\"...\"[,\"image\":\"...\"][,\"audio\":\"...\"]}\n\tcurl -D- http://127.0.0.1:9999/training/event/popup.remove\n\tcurl -D- http://127.0.0.1:9999/training/event/feeling.toggle\n\tcurl -D- http://127.0.0.1:9999/training/event/feeling?data={\"client\":\"...\",\"challenge\":N,\"mood\":M}\n\tcurl -D- http://127.0.0.1:9999/training/event/feedback?data={\"client\":\"...\",\"type\":\"...\"}\n\tcurl -D- http://127.0.0.1:9999/training/event/banner.pause.toggle\n\tcurl -D- http://127.0.0.1:9999/training/event/banner.rant.toggle\n\tcurl -D- http://127.0.0.1:9999/training/event/banner.praise.toggle\n\tcurl -D- http://127.0.0.1:9999/training/event/banner.qna.toggle\n\tcurl -D- http://127.0.0.1:9999/training/event/banner.notice.toggle\n\tcurl -D- http://127.0.0.1:9999/training/event/raisehand.teardown\n\tcurl -D- http://127.0.0.1:9999/training/event/closure.begin.toggle\n\tcurl -D- http://127.0.0.1:9999/training/event/closure.pause.toggle\n\tcurl -D- http://127.0.0.1:9999/training/event/closure.end.toggle\n\tcurl -D- http://127.0.0.1:9999/training/event/message?data={\"client\":\"...\",\"text\":\"...\"[,\"image\":\"...\"][,\"audio\":\"...\"]}\n\tcurl -D- http://127.0.0.1:9999/training/event/confetti.raise\n\tcurl -D- http://127.0.0.1:9999/training/event/snowfall.toggle\n\tcurl -D- http://127.0.0.1:9999/training/event/peer.reconnect\n\tcurl -D- http://127.0.0.1:9999/training/event/peer.disconnect\n    ```\n\n6.  **Remote Control HUD (Device)**:\u003cbr/\u003e\n    Optionally, trigger the events from an\n    [Elgato Stream Deck](https://www.elgato.com/en/gaming/stream-deck)\n    remote control device and its [System:Website](https://help.elgato.com/hc/en-us/articles/360028234471-Elgato-Stream-Deck-System-Actions) functions.\n    For this, generate key images with the help of the companion tool\n    [Stream-Deck Key-Image Generator (SDKIG)](https://github.com/rse/sdkig)\n\tand the provided script [training-key.sh](./training-key.sh).\n\tJust use the [System:Website](https://help.elgato.com/hc/en-us/articles/360028234471-Elgato-Stream-Deck-System-Actions) function\n\twith the generated key images, the URLs above and just let them be executed in the background.\n\nWidgets\n-------\n\nThis HUD provides the following on-screen widgets:\n\n-   **LOGO**:\u003cbr/\u003e\n    This widget displays a logo at the top-right of the screen\n    and rotationally animates it every 5 minutes automatically.\n    The intention of this widget is to just provide some\n    vendor/employer-related branding. The widget has to be configured\n    with...\n\n    ```yaml\n    logo:\n        opacity:               0.60\n        svg: |\n            \u003csvg\u003e[...]\u003c/svg\u003e\n    ```\n\n    ...and can be manually animated interactively with the keystroke\n    \u003ckbd\u003el\u003c/kbd\u003e or programmatically with the remote HUDS event\n    `logo.animate`.\n\n-   **TITLE**:\u003cbr/\u003e\n    This widget displays a title bar at the bottom-right of the\n    screen. The intention of this widget is to just provide some\n    training-specific branding. The widget has to be configured with...\n\n    ```yaml\n    title:\n        opacity:               0.80\n        background:            \"#336699\"\n        iconname:              graduation-cap\n        iconcolor:             \"#77aadd\"\n        nametext:              Dr. Ralf S. Engelschall\n        namecolor:             \"#e0f0ff\"\n        titletext:             Grundlagen der IT-Architektur\n        titlecolor:            \"#ffffff\"\n    ```\n\n    ...and can be manually animated interactively with the keystroke\n    \u003ckbd\u003et\u003c/kbd\u003e or programmatically with the remote HUDS event\n    `title.animate`.\n\n-   **ATTENDANCE**:\u003cbr/\u003e\n    This widget displays a short box at the bottom-right of the screen\n    with the number of attendees. The intention of this widget is to\n    just provide some audience size information. The widget has to be\n    configured with...\n\n    ```yaml\n    attendance:\n        opacity:               0.80\n        background:            \"#6699cc\"\n        iconcolor:             \"#99ccff\"\n        textcolor:             \"#e0f0ff\"\n    ```\n\n    ...and can be manually animated interactively with the keystroke\n    \u003ckbd\u003eA\u003c/kbd\u003e or programmatically with the remote HUDS event\n    `attendance.animate`. The number of attendees is tracked by the\n    remote HUDS event `attendance` (usually injected into HUDS via MQTT\n    through the integration of a companion message queue system).\n\n-   **ATTENDEES**:\u003cbr/\u003e\n    This widget displays a large box at the left edge of the screen with\n    the portraits and names of all attendees. The intention of this\n    widget is to provide a visual overview of the audience. The widget\n    has to be configured with...\n\n    ```yaml\n    attendance:\n        opacity:               0.80\n        background:            \"#336699\"\n        namecolorbg:           \"#003366\"\n        namecolorfg:           \"#e0f0ff\"\n        noattendeestext:       \"This training has still no attendees.\"\n    ```\n\n    ...and can be manually toggled on/off interactively with the keystroke\n    \u003ckbd\u003ee\u003c/kbd\u003e or programmatically with the remote HUDS event\n    `attendees.toggle`. The number of attendees is tracked by the\n    remote HUDS event `attendance` (usually injected into HUDS via MQTT\n    through the integration of a companion message queue system).\n\n-   **FEEDBACK**:\u003cbr/\u003e\n    This widget displays bouncing smilies at the right edge of the\n    screen. The intention of this widget is to allow visual feedback for\n    the audience. The widget has to be configured with...\n\n    ```yaml\n    feedback:\n        opacity:               0.80\n        surprisecolor1:        \"#222222\"\n        surprisecolor2:        \"#f0f0f0\"\n        surprisecolor3:        \"#c0c0c0\"\n        surprisecolor4:        \"#000000\"\n        smilecolor1:           \"#221100\"\n        smilecolor2:           \"#d08840\"\n        smilecolor3:           \"#a05810\"\n        smilecolor4:           \"#ffffff\"\n        frowncolor1:           \"#99ccff\"\n        frowncolor2:           \"#336699\"\n        frowncolor3:           \"#003366\"\n        frowncolor4:           \"#ffffff\"\n        sadnesscolor1:         \"#cccccc\"\n        sadnesscolor2:         \"#333333\"\n        sadnesscolor3:         \"#000000\"\n        sadnesscolor4:         \"#ffffff\"\n    ```\n\n    ...and can be controlled programmatically with the remote HUDS\n    event `feedback?data={\"client\":\"...\",\"type\":\"...\"}`. The client is\n    a unique id of the client and type can select one of the following\n    four smilies: `surprise`, `smile`, `frown` or `sadness`.\n\n-   **FEELING**:\u003cbr/\u003e\n    This widget displays a statistics box at the right corner and above\n    the title widget. The intention of this widget is to allow attendees\n    to continuously express their feeling and let the tainer regularly\n    show an aggregated view on the feelings. The widget has to be\n    configured with...\n\n    ```yaml\n    feeling:\n        opacity:               0.80\n        background:            \"#336699\"\n        textcolor:             \"#e0f0ff\"\n        stdbarcolor:           \"#d0e0f0\"\n        maxbarcolor:           \"#ffffff\"\n        bordercolor:           \"#99ccff\"\n        legendcolor:           \"#ffffff\"\n        c1color:               \"#b06820\"\n        c2color:               \"#909090\"\n        c3color:               \"#336699\"\n        c4color:               \"#909090\"\n        c5color:               \"#b06820\"\n        m1color:               \"#905810\"\n        m2color:               \"#b06820\"\n        m3color:               \"#909090\"\n        m4color:               \"#336699\"\n        m5color:               \"#225588\"\n    ```\n\n    ...and can be manually toggled on/off interactively with the\n    keystroke \u003ckbd\u003ef\u003c/kbd\u003e or programmatically with the remote HUDS\n    event `feeling.toggle`. The feelings are tracked by the remote\n    HUDS event `feeling?data={\"client\":\"...\",\"challenge\":N,\"mood\":M}`\n    (usually injected into HUDS via MQTT through the integration of a\n    companion message queue system).\n\n-   **PROGRESS**:\u003cbr/\u003e\n    This widget displays a permanently visible progress bar at the\n    bottom-left of the screen. The intention of this widget is to allow\n    the attendees to see the current training progress at any time. The\n    widget has to be configured with...\n\n    ```yaml\n    progress:\n        opacity:               0.80\n        slots:                 16\n        donecolorbg:           \"#6699cc\"\n        donecolorfg:           \"#f0f0ff\"\n        currcolorbg:           \"#336699\"\n        currcolorfg:           \"#ffffff\"\n        todocolorbg:           \"#f0f0f0\"\n        todocolorfg:           \"#999999\"\n    ```\n\n    ...and is controlled interactively with the keystrokes\n    \u003ckbd\u003eLEFT\u003c/kbd\u003e (previous slot) and \u003ckbd\u003eRIGHT\u003c/kbd\u003e\n    (next slot) or programmatically with the remote HUDS events\n    `progress.prev` (previous slot) and\n    `progress.next` (next slot).\n\n-   **AGENDA**:\u003cbr/\u003e\n    This widget displays a training agenda list at the left border of\n    the screen. The intention of this widget is to allow the attendees\n    to regularly see the agenda slots and current training progress\n    during the training. The widget has to be configured with...\n\n    ```yaml\n    agenda:\n        opacity:               0.90\n        donecolorbg:           \"#6699cc\"\n        donecolorfg:           \"#f0f0ff\"\n        currcolorbg:           \"#336699\"\n        currcolorfg:           \"#ffffff\"\n        todocolorbg:           \"#f0f0f0\"\n        todocolorfg:           \"#999999\"\n        slots:\n            -   Agenda point 1\n            -   Agenda point 2\n            [...]\n    ```\n\n    ...and is toggled interactively with the keystroke\n    \u003ckbd\u003ea\u003c/kbd\u003e or programmatically with the remote HUDS event\n    `agenda.toggle`.\n\n-   **LATENCY**:\u003cbr/\u003e\n    This widget displays a latency timer at the bottom-right\n    corner of the screen. The intention of this widget is to allow\n    one to determine the network latency, i.e., the lag between\n    uploading/upstreaming the video stream (a the trainer side) and\n    the downloading/downstreaming of the video stream (usually at the\n    attendee side). For this it displays the current (upstreaming)\n    time and keeps space for the downstreaming time, which has to be\n    overlayed separately to the HUD in OBS Studio through an RTMP\n    downstream Media Source. It has to be configured with...\n\n    ```yaml\n    latency:\n        opacity:               0.80\n        background:            \"#336699\"\n        foreground:            \"#ffffff\"\n        iconcolor:             \"#77aadd\"\n    ```\n\n    ...and is toggled interactively with the keystroke\n    \u003ckbd\u003e!\u003c/kbd\u003e or programmatically with the remote HUDS event\n    `latency.toggle`.\n\n-   **TIMER**:\u003cbr/\u003e\n    This widget displays a combined wall clock and stopwatch at the\n    bottom-left corner of the screen. The intention of this widget is\n    to allow the trainer to raise a pause for a certain amount of time\n    and clearly indicate the remaining time to the attendees. It has to\n    be configured with...\n\n    ```yaml\n    timer:\n        opacity:               0.80\n        background1:           \"#555555\"\n        background2:           \"#f0f0f0\"\n        ticks:                 \"#333333\"\n        digits:                \"#666666\"\n        pointer1:              \"#000000\"\n        pointer2:              \"#222222\"\n        pointer3:              \"#cc3333\"\n        segment1:              \"#b06820\"\n        segment2:              \"#f4dbc2\"\n        segment3:              \"#2068b0\"\n        segment4:              \"#c2dbf4\"\n    ```\n\n    ...and is controlled interactively with the keystrokes\n    \u003ckbd\u003e0\u003c/kbd\u003e (stop timer manually),\n    \u003ckbd\u003e1\u003c/kbd\u003e (start 5-minute timer),\n    \u003ckbd\u003e2\u003c/kbd\u003e (start 10-minute timer),\n    \u003ckbd\u003e3\u003c/kbd\u003e (start 15-minute timer),\n    \u003ckbd\u003e4\u003c/kbd\u003e (start 20-minute timer),\n    \u003ckbd\u003e5\u003c/kbd\u003e (start 25-minute timer),\n    \u003ckbd\u003e6\u003c/kbd\u003e (start 30-minute timer),\n    \u003ckbd\u003e7\u003c/kbd\u003e (start 35-minute timer),\n    \u003ckbd\u003e8\u003c/kbd\u003e (start 40-minute timer) and\n    \u003ckbd\u003e9\u003c/kbd\u003e (start 45-minute timer),\n    or programmatically with the remote HUDS events\n    `timer.stop` and `timer.start?data=\u003cminutes\u003e`.\n\n-   **VOTES**:\u003cbr/\u003e\n    This widget displays voting results at the bottom-left corner of the\n    screen. The intention of this widget is to allow the attendees to\n    give votes during the training which are anonymously shown by the\n    trainer. It has to be configured with...\n\n    ```yaml\n    votes:\n        opacity:               0.90\n        winnamecolorbg:        \"#b06820\"\n        winnamecolorfg:        \"#ffffff\"\n        maxnamecolorbg:        \"#336699\"\n        maxnamecolorfg:        \"#ffffff\"\n        stdnamecolorbg:        \"#6699cc\"\n        stdnamecolorfg:        \"#ffffff\"\n        xtrnamecolorbg:        \"#999999\"\n        xtrnamecolorfg:        \"#ffffff\"\n        winvotecolorbg:        \"#ffffff\"\n        winvotecolorfg:        \"#666666\"\n        maxvotecolorbg:        \"#ffffff\"\n        maxvotecolorfg:        \"#666666\"\n        stdvotecolorbg:        \"#f0f0f0\"\n        stdvotecolorfg:        \"#999999\"\n        xtrvotecolorbg:        \"#f0f0f0\"\n        xtrvotecolorfg:        \"#999999\"\n        allvotecolorbg:        \"#60606080\"\n        allvotecolorbd:        \"#999999\"\n        quizidcolorbg:         \"#225588\"\n        quizidcolorfg:         \"#e0e0ff\"\n        quiztxtcolorbg:        \"#336699\"\n        quiztxtcolorfg:        \"#ffffff\"\n        hintcolorbg:           \"#f0f0f0\"\n        hintcolorfg:           \"#666666\"\n    ```\n\n    ...and is toggled interactively with the keystroke \u003ckbd\u003ev\u003c/kbd\u003e or\n    programmatically with the remote HUDS event `votes.toggle`. The\n    votes of the attendees are extracted from the `text`\n    field in data received with the remote HUDS event `message` (usually\n    injected into HUDS via MQTT through the integration of a companion\n    chat system).\n\n-   **POPUP**:\u003cbr/\u003e\n    This widget displays popups at the bottom-left corner of the\n    screen. The intention of this widget is to let attendees raise\n    questions, objections and comments during the training.\n    It has to be configured with...\n\n    ```yaml\n    popup:\n        opacity:               0.80\n        questionbackground:    \"#336699\"\n        questiontitlecolor:    \"#e0f0ff\"\n        questionmessagecolor:  \"#ffffff\"\n        objectionbackground:   \"#333333\"\n        objectiontitlecolor:   \"#e0e0e0\"\n        objectionmessagecolor: \"#ffffff\"\n        commentbackground:     \"#f0f0f0\"\n        commenttitlecolor:     \"#333333\"\n        commentmessagecolor:   \"#000000\"\n    ```\n\n    ...and is controlled interactively with the keystroke\n    \u003ckbd\u003eBACKSPACE\u003c/kbd\u003e (for removing the lowest/oldest popup) or\n    programmatically with the remote HUDS event `popup.remove`. The\n    popups of the attendees are extracted from `text` field in data\n    received with the remote HUDS event `message` (usually injected into\n    HUDS via MQTT through the integration of a companion chat system). A\n    message ending in \"?\" is considered a question. a message ending in\n    \"!\" is considered an objection and everything else is considered a\n    comment. In addition to the HUDS event `message` one can also use the\n    `popup.add` event with the data `{ client, text, title?, image?, type }`\n    to add a popup.\n\n-   **RAISEHAND**:\u003cbr/\u003e\n    This widget displays popups at the bottom-center of the\n    screen. The intention of this widget is to let attendees raise\n    their hand virtually during the training. Their name and\n    optionally their message is displayed.\n    It has to be configured with...\n\n    ```yaml\n    raisehand:\n        opacity:               0.80\n        background:            \"#cc9900\"\n        iconforeground:        \"#663300\"\n        nameforeground:        \"#000000\"\n        textforeground:        \"#663300\"\n        badgebackground:       \"#bb8800\"\n        badgeforeground:       \"#ffffff\"\n    ```\n\n    ...and is controlled interactively with the keystroke\n    \u003ckbd\u003et\u003c/kbd\u003e (for tearing down a raised hand) or\n    programmatically with the remote HUDS event `raisehand.teardown`. The\n    popups of the attendees are extracted from `name` and `text` fields in data\n    received with the remote HUDS event `raisehand` (usually injected into\n    HUDS via MQTT through the integration of a companion chat system).\n\n-   **BANNER**:\u003cbr/\u003e\n    This widget displays arbitrary banners at the top-left corner of the\n    screen. The intention of this widget is to flag special parts of the\n    training, ensure that the right expectations for the attendees and\n    allow one to also easily recognize the flagged parts in a potential\n    video recording of the training. It has to be configured with...\n\n    ```yaml\n    banner:\n        opacity:               0.80\n        background:            \"#f0f0f0\"\n        banner:\n            -   name:          pause\n                key:           p\n                iconname:      pause-circle\n                iconcolor:     \"#336699\"\n                titletext:     PAUSE\n                titlecolor:    \"#000000\"\n            -   name:          rant\n                key:           r\n                iconname:      radiation-alt\n                iconcolor:     \"#bb0000\"\n                titletext:     RANT\n                titlecolor:    \"#000000\"\n            -   name:          praise\n                key:           x\n                iconname:      award\n                iconcolor:     \"#336699\"\n                titletext:     PRAISE\n                titlecolor:    \"#000000\"\n            -   name:          qna\n                key:           q\n                iconname:      comments\n                iconcolor:     \"#b06820\"\n                titletext:     \"Q\u0026A\"\n                titlecolor:    \"#000000\"\n            -   name:          notice\n                key:           n\n                iconname:      circle-exclamation\n                iconcolor:     \"#b06820\"\n                titletext:     \"NOTICE\"\n                titlecolor:    \"#000000\"\n    ```\n\n    ...and is controlled interactively with the configured\n    keystrokes (in the example \u003ckbd\u003ep\u003c/kbd\u003e, \u003ckbd\u003er\u003c/kbd\u003e and\n    \u003ckbd\u003eq\u003c/kbd\u003e) or programmatically with the remote HUDS events\n    `banner.\u003ci\u003ename\u003c/i\u003e.toggle` (in the example with the\n    names `pause`, `rant`, `praise`, `qna` and `notice`).\n\n-   **CLOSURE**:\u003cbr/\u003e\n    This widget displays three partly-transparent full-screen closures.\n    The intention of this widget is clearly indicate the begin phase\n    (the time before the training starts but where the video streaming\n    has to be ensured to work), the pause phases (the time the trainer\n    is away from the video stream) and the end phase (the time after\n    the training ended but where the video streaming is still sent).\n    It has to be configured with...\n\n    ```yaml\n    closure:\n        opacity:               0.75\n        background:            \"#000000\"\n        beginiconname:         \"play-circle\"\n        beginiconcolor:        \"#b06820\"\n        beginhinttext:         \"The training will start soon.\u003cbr/\u003ePlease be patient!\"\n        beginhintcolor:        \"#ffffff\"\n        pauseiconname:         \"pause-circle\"\n        pauseiconcolor:        \"#336699\"\n        pausehinttext:         \"The training is paused.\u003cbr/\u003ePlease be patient!\"\n        pausehintcolor:        \"#ffffff\"\n        endiconname:           \"stop-circle\"\n        endiconcolor:          \"#b06820\"\n        endhinttext:           \"The training already has ended.\u003cbr/\u003eThanks for your attention!\"\n        endhintcolor:          \"#ffffff\"\n    ```\n\n    ...and is controlled interactively with the keystrokes\n    \u003ckbd\u003eUP\u003c/kbd\u003e (for begin closure), \u003ckbd\u003eRETURN\u003c/kbd\u003e\n    (for pause closure) and \u003ckbd\u003eDOWN\u003c/kbd\u003e (for end\n    closure) or programmatically with the remote HUDS events\n    `closure.begin.toggle`, `closure.pause.toggle`\n    and `closure.end.toggle`.\n\n-   **CONFETTI**:\u003cbr/\u003e\n    This widget displays a confetti bomb.\n    The intention of this widget is to celebrate a special situation.\n    It has to be configured with...\n\n    ```yaml\n    confetti:\n        opacity:               1.00\n    ```\n\n    ...and is controlled interactively with the keystroke \u003ckbd\u003ec\u003c/kbd\u003e\n    or programmatically with the remote HUDS event `confetti.raise`.\n\n-   **SNOWFALL**:\u003cbr/\u003e\n    This widget displays a snowfall.\n    The intention of this widget is to celebrate a special situation.\n    It has to be configured with...\n\n    ```yaml\n    snowfall:\n        opacity:               1.00\n    ```\n\n    ...and is controlled interactively with the keystroke \u003ckbd\u003es\u003c/kbd\u003e\n    or programmatically with the remote HUDS event `snowfall.toggle`.\n\nLicense\n-------\n\nCopyright \u0026copy; 2020-2024 Dr. Ralf S. Engelschall (http://engelschall.com/)\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n\"Software\"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be included\nin all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\nIN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY\nCLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,\nTORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE\nSOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frse%2Fhuds-hud-training","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frse%2Fhuds-hud-training","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frse%2Fhuds-hud-training/lists"}