Custom streaming overlay

[PandaTheReal1]

We would like add a new streaming board, based on the attempt board. Could you guide us, to where in the code we should look, and how to add a new streaming board?
We imagine, that we basically just need to copy the code for the attempt board, and make some adjustments to it.
Thanks in advance.

[jflamy]

Basically yes. The Attempt board is actually 4 components. The attempt board itself, the break countdown timer, the athlete countdown timer, and a component that shows the down signal and decision lights.

The code for these parts is written in JavaScript as standard web components using the LitElement library, and is found in owlcms/frontend/components (AttemptBoard.js, DecisionElement.js, TimerElement.js)
In each of these files you will see the CSS style sheets that control the look.

These components are fed information by Java back-end classes.

• /owlcms/src/main/java/app/owlcms/components/elements/AthleteTimerElement.java feeds the timer element web component with athlete info
• /owlcms/src/main/java/app/owlcms/components/elements/BreakTimerElement.java feeds another instance of the timer with break info.
• /owlcms/src/main/java/app/owlcms/components/elements/DecisionElement.java listens to the decisions and relays information to the decision component.
• /owlcms/src/main/java/app/owlcms/displays/attemptboard/AttemptBoard.java feeds the attempt board with information about the athlete etc. it also hides or shows the decision or timer components as appropriate.

The minimum changes would be for you to copy AttemptBoard.js to another name, change all the naming so that is called something else inside (change the class name, change the is() function, change the define function at the bottom of the file).
Then reate a new style sheet so that you can change the layout. Create a new copy of the Java class.
And add a button in the video navigation page, /owlcms/src/main/java/app/owlcms/nui/displays/VideoNavigationContent.java

[jflamy]

In order to test your code and get hot-code deploy for the JavaScript, you will need to add -Dvaadin.frontend.hotdeploy=true to your IDE launch.

Instructions for building and packaging are at https://github.com/jflamy/owlcms4/blob/v24/BUILDING.md