This started life as a TMS WEB Core project created for the TMS Software Blog, starting with this post. Some of the topics covered include the following.
- Customizing UI elements so that they are all hexagon-based.
- Using the Web Audio API to play audio clips coming from user-supplied sources.
- Designing a custom color picker.
- Designing a custom image picker.
- An array of CSS animations.
- Using XData in a TMS WEB Core project (see related HexaGongsX repository).
- Deployment considerations.
The result is a fun little app where you can create a custom sound board of sorts - add new "hexagong" tiles for each sound clip, and then you can just tap on them to play the sound. Useful for a variety of applications, but intended mostly as a demonstration project.
Website: www.hexagongs.com
As with any modern web application, other JavaScript libraries/dependencies have been used in this project. Most of the time, this is handled via a CDN link (usually JSDelivr) in the Project.html file. In some cases, for performance or other reasons, they may be included directly.
- TMS WEB Core - This is a TMS WEB Core project, after all
- Bootstrap - No introduction needed
- Tabulator - Fantastic pure JavaScript web data tables
- Font Awesome - The very best icons
- AudioBuffer-ArrayBuffer-Serializer - Useful for moving audio data around
- Shoelace - Web components, particularly the color picker for lights
- InteractJS - Dragging and resizing UI elements of all kinds
- Simplebar - Used to create the custom hexagonal scrollbars
- PanZoom - Used for resizing images
- D3 - Used here to draw audio waveforms
- Luxon - Excellent date/time-handling library
- FileSaver - For downloading HexaGong projects
- HackTimer - Addresses timers not firing on inactive browser tabs
While this project is currently under active development, feel free to give it a try and post any issues you encounter. Or start a discussion if you would like to help steer the project in a particular direction. Early days yet, so a good time to have your voice heard. As the project unfolds, additional resources will be made available, including platform binaries, more documentation, demos, and so on.
Last Updated at 2023-12-24 05:16:19 UTC
-------------------------------------------------------------------------------
Language files blank comment code
-------------------------------------------------------------------------------
Delphi Form 1 54 0 2976
Pascal 2 642 1204 2886
CSS 1 77 27 601
HTML 2 21 21 70
Markdown 1 8 2 52
YAML 2 8 12 33
JSON 1 0 0 30
JavaScript 1 3 0 25
-------------------------------------------------------------------------------
SUM: 11 813 1266 6673
-------------------------------------------------------------------------------
If you find this work interesting, helpful, or valuable, or that it has saved you time, money, or both, please consider directly supporting these efforts financially via GitHub Sponsors or donating via Buy Me a Pizza. Also, check out these other GitHub Repositories that may interest you.
If you're interested in other TMS WEB Core and TMS XData content, follow along on ๐ at @WebCoreAndMore, join our ๐ Web Core and More Community, or check out the TMS Software Blog.