An HTML Development Widget
I have been building a few HTML templates lately and found that using Dev Tools Snippets to execute play out commands got a bit slow over time. So, to make running repetitive commands quicker I built a widget for CasparCG HTML Templates.
The main feature is the Play, Next, and Stop Commands as well as the ability to run custom commands (functions) and change the body background color to a HEX, RGB, or RGBA value. The widget saves the data to the browser’s local storage for persistence between reloads and templates.
Here is the GitHub Repo and some screenshots.
Setup instructions are in the README (Only 2 steps). Please feel free to reach out with any suggestions or thoughts!
The Full Widget
Shrunken Controls
Hidden Controls
Editing the Template Data
Version 0.1.0
I finally got the template data feature (and a few others) added! Check out a live demo here.
Here is the Github Repo.
Please feel free to reach out with any questions!
1 Like
TypeScript Rework
I am rewriting the widget in TypeScript to make maintaining it more manageable. Has anyone got any additional feature requests I can add during this process? Any bugs to report? Thank you!
Version 1.0.0 Release
The typescript rework is complete. I added the ability to create data sets. These data sets allow the widget to hold multiple JSON objects for each template. Use the drop down below the Update button to change what data will be passed to the update function.
Please feel free to reach out with any questions, bugs or comments!
Github Repo
Live Demo
If you visited the demo in the passed, the app may be broken. You will need to clear your browsers local storage to fix this issue. Open Dev Tools -> Go to Application -> Select Local Storage -> Right click on casparcg-widget -> select clear and finally, refresh the page.
