HexaGongs

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.

1. Customizing UI elements so that they are all hexagon-based.
2. Using the Web Audio API to play audio clips coming from user-supplied sources.
3. Designing a custom color picker.
4. Designing a custom image picker.
5. An array of CSS animations.
6. Using XData in a TMS WEB Core project (see related HexaGongsX repository).
7. 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

Key Dependencies

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

Additional Notes

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.

Repository Information

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
-------------------------------------------------------------------------------

Sponsor / Donate / Support

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.

More TMS WEB Core and TMS XData Content

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.