{"id":14009,"date":"2026-05-18T07:01:41","date_gmt":"2026-05-18T05:01:41","guid":{"rendered":"https:\/\/store.algosyntax.com\/?post_type=download&#038;p=14009"},"modified":"2026-06-08T14:22:09","modified_gmt":"2026-06-08T12:22:09","slug":"umg-musical-grids","status":"publish","type":"download","link":"https:\/\/store.algosyntax.com\/marketplace\/unreal-engine\/umg-musical-grids\/","title":{"rendered":"UMG Musical Grids"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"14009\" class=\"elementor elementor-14009\" data-elementor-post-type=\"download\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a922b29 e-flex e-con-boxed e-con e-parent\" data-id=\"a922b29\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c1eccdf elementor-widget elementor-widget-heading\" data-id=\"c1eccdf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">UMG Musical Grids<\/h1>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f1616e2 e-flex e-con-boxed e-con e-parent\" data-id=\"f1616e2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c23f701 elementor-widget elementor-widget-text-editor\" data-id=\"c23f701\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"547\" data-end=\"668\">Build timeline, piano-roll, sequencer, and music-editor grids in UMG without rebuilding musical time layout from scratch.<\/p><p data-start=\"670\" data-end=\"992\">UMGMusicalGrids is a focused Unreal Engine plugin for creating music-aware grid widgets in UMG. It gives you a higher-level musical canvas built on top of LineGridCanvasPanel, with built-in support for bars, beats, subdivisions, quantization, playhead rendering, pointer-to-music conversion, and designer-friendly styling.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71bf63d elementor-widget__width-initial elementor-widget elementor-widget-video\" data-id=\"71bf63d\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/EzlCXjA_rkY&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0373f8d e-con-full e-flex e-con e-child\" data-id=\"0373f8d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-af9836d elementor-widget elementor-widget-heading\" data-id=\"af9836d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Buy UMG Musical Grids<\/h2>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2bfd650 e-con-full e-flex e-con e-child\" data-id=\"2bfd650\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-32e8e75 elementor-widget__width-initial elementor-widget elementor-widget-asx-edd-buy-dropdown\" data-id=\"32e8e75\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"asx-edd-buy-dropdown.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <style>\n            #asx-edd-buy-32e8e75.asx-edd-buy {\n                display: block;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-form {\n                display: inline-flex;\n                flex-direction: column;\n                align-items: flex-start;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-form .asx-edd-buy-button {\n                align-self: flex-start;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-button {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                vertical-align: middle;\n                line-height: 1.2;\n                border-width: 1px;\n                border-style: solid;\n                text-decoration: none;\n                box-sizing: border-box;\n                cursor: pointer;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-button:hover,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-button:focus {\n                text-decoration: none;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-icon,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-owned-icon,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-pre-price-text,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-price,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-discount-text,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-original-price,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-post-price-text,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-owned-text {\n                display: inline-flex;\n                align-items: center;\n                line-height: inherit;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-icon,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-owned-icon {\n                justify-content: center;\n                flex: 0 0 auto;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-icon i,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-icon svg,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-owned-icon i,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-owned-icon svg {\n                display: block;\n                line-height: 1;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-original-price {\n                text-decoration: line-through;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-label {\n                display: block;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-select {\n                max-width: 100%;\n                border-width: 1px;\n                border-style: solid;\n                box-sizing: border-box;\n            }\n        <\/style>\n        <div id=\"asx-edd-buy-32e8e75\" class=\"asx-edd-buy\">        <style>\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-dropdown {\n                position: relative;\n                display: inline-flex;\n                flex-direction: column;\n                max-width: 100%;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-trigger {\n                display: inline-flex;\n                align-items: center;\n                justify-content: space-between;\n                gap: 12px;\n                max-width: 100%;\n                border-width: 1px;\n                border-style: solid;\n                box-sizing: border-box;\n                cursor: pointer;\n                text-align: left;\n                line-height: 1.2;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-trigger-content,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-option-content,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-option-price-line {\n                display: inline-flex;\n                flex-wrap: wrap;\n                line-height: inherit;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-trigger-content,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-option-content {\n                align-items: var(--asx-edd-buy-option-align-items, flex-start);\n                justify-content: var(--asx-edd-buy-option-justify-content, flex-start);\n                text-align: var(--asx-edd-buy-option-text-align, left);\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-option-price-line {\n                align-items: center;\n                justify-content: var(--asx-edd-buy-price-line-justify-content, flex-start);\n                column-gap: var(--asx-edd-buy-price-line-column-gap, 8px);\n                row-gap: 0;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-trigger-content {\n                min-width: 0;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-trigger-arrow {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                flex: 0 0 auto;\n                line-height: 1;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-panel {\n                position: absolute;\n                top: calc(100% + var(--asx-edd-buy-panel-top-gap, 6px));\n                left: 0;\n                z-index: 1000;\n                display: flex;\n                flex-direction: column;\n                min-width: 100%;\n                max-height: var(--asx-edd-buy-panel-max-height, 280px);\n                overflow-y: auto;\n                border-width: 1px;\n                border-style: solid;\n                box-sizing: border-box;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-panel[hidden] {\n                display: none !important;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-option {\n                display: flex;\n                width: 100%;\n                border: 0;\n                cursor: pointer;\n                text-align: left;\n                box-sizing: border-box;\n                line-height: 1.2;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-option-content {\n                width: 100%;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-option-name,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-option-price,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-option-discount,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-option-original-price,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-option-owned-badge,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-discount-text,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-original-price {\n                display: inline-flex;\n                align-items: center;\n                line-height: inherit;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-option-original-price,\n            #asx-edd-buy-32e8e75 .asx-edd-buy-original-price {\n                text-decoration: line-through;\n            }\n\n            #asx-edd-buy-32e8e75 .asx-edd-buy-custom-option-owned-badge {\n                font-size: 0.85em;\n            }\n        <\/style>\n        <form class=\"asx-edd-buy-form\" method=\"get\" action=\"https:\/\/store.algosyntax.com\/checkout\/\"><input type=\"hidden\" name=\"edd_action\" value=\"add_to_cart\"><input type=\"hidden\" name=\"download_id\" value=\"14009\"><input id=\"asx-edd-buy-selected-price-32e8e75\" class=\"asx-edd-buy-selected-price-id\" type=\"hidden\" name=\"edd_options[price_id]\" value=\"1\"><label class=\"asx-edd-buy-label\" for=\"asx-edd-buy-custom-trigger-32e8e75\">License<\/label><div id=\"asx-edd-buy-custom-dropdown-32e8e75\" class=\"asx-edd-buy-custom-dropdown\" data-active-price-id=\"1\"><button id=\"asx-edd-buy-custom-trigger-32e8e75\" class=\"asx-edd-buy-custom-trigger\" type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"false\" aria-controls=\"asx-edd-buy-custom-panel-32e8e75\"><span class=\"asx-edd-buy-custom-trigger-content\"><span class=\"asx-edd-buy-custom-option-content\"><span class=\"asx-edd-buy-custom-option-name\">Individual<\/span><span class=\"asx-edd-buy-custom-option-price-line\"><span class=\"asx-edd-buy-custom-option-price\">&#036;100.00<\/span><\/span><\/span><\/span><span class=\"asx-edd-buy-custom-trigger-arrow\" aria-hidden=\"true\">\u25be<\/span><\/button><div id=\"asx-edd-buy-custom-panel-32e8e75\" class=\"asx-edd-buy-custom-panel\" role=\"listbox\" aria-labelledby=\"asx-edd-buy-custom-trigger-32e8e75\" hidden><button id=\"asx-edd-buy-custom-dropdown-32e8e75-option-0\" class=\"asx-edd-buy-custom-option is-selected\" type=\"button\" role=\"option\" aria-selected=\"true\" data-price-id=\"1\" data-is-owned=\"no\" data-price-text=\"&#036;100.00\" data-discount-text=\"\" data-original-price-text=\"\"><span class=\"asx-edd-buy-custom-option-content\"><span class=\"asx-edd-buy-custom-option-name\">Individual<\/span><span class=\"asx-edd-buy-custom-option-price-line\"><span class=\"asx-edd-buy-custom-option-price\">&#036;100.00<\/span><\/span><\/span><\/button><button id=\"asx-edd-buy-custom-dropdown-32e8e75-option-1\" class=\"asx-edd-buy-custom-option\" type=\"button\" role=\"option\" aria-selected=\"false\" data-price-id=\"2\" data-is-owned=\"no\" data-price-text=\"&#036;150.00\" data-discount-text=\"\" data-original-price-text=\"\"><span class=\"asx-edd-buy-custom-option-content\"><span class=\"asx-edd-buy-custom-option-name\">Studio<\/span><span class=\"asx-edd-buy-custom-option-price-line\"><span class=\"asx-edd-buy-custom-option-price\">&#036;150.00<\/span><\/span><\/span><\/button><button id=\"asx-edd-buy-custom-dropdown-32e8e75-option-2\" class=\"asx-edd-buy-custom-option\" type=\"button\" role=\"option\" aria-selected=\"false\" data-price-id=\"3\" data-is-owned=\"no\" data-price-text=\"&#036;200.00\" data-discount-text=\"\" data-original-price-text=\"\"><span class=\"asx-edd-buy-custom-option-content\"><span class=\"asx-edd-buy-custom-option-name\">Enterprise<\/span><span class=\"asx-edd-buy-custom-option-price-line\"><span class=\"asx-edd-buy-custom-option-price\">&#036;200.00<\/span><\/span><\/span><\/button><\/div><\/div><button class=\"asx-edd-buy-button\" type=\"submit\" data-owned-url=\"https:\/\/store.algosyntax.com\/account\/\" data-buy-button-template=\"&lt;span class=&quot;asx-edd-buy-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;e-font-icon-svg e-fab-paypal&quot; viewBox=&quot;0 0 384 512&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path d=&quot;M111.4 295.9c-3.5 19.2-17.4 108.7-21.5 134-.3 1.8-1 2.5-3 2.5H12.3c-7.6 0-13.1-6.6-12.1-13.9L58.8 46.6c1.5-9.6 10.1-16.9 20-16.9 152.3 0 165.1-3.7 204 11.4 60.1 23.3 65.6 79.5 44 140.3-21.5 62.6-72.5 89.5-140.1 90.3-43.4.7-69.5-7-75.3 24.2zM357.1 152c-1.8-1.3-2.5-1.8-3 1.3-2 11.4-5.1 22.5-8.8 33.6-39.9 113.8-150.5 103.9-204.5 103.9-6.1 0-10.1 3.3-10.9 9.4-22.6 140.4-27.1 169.7-27.1 169.7-1 7.1 3.5 12.9 10.6 12.9h63.5c8.6 0 15.7-6.3 17.4-14.9.7-5.4-1.1 6.1 14.4-91.3 4.6-22 14.3-19.7 29.3-19.7 71 0 126.4-28.8 142.9-112.3 6.5-34.8 4.6-71.4-23.8-92.6z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;&lt;\/span&gt;&lt;span class=&quot;asx-edd-buy-pre-price-text&quot;&gt;Paypal&lt;\/span&gt;\" data-owned-button-template=\"&lt;span class=&quot;asx-edd-buy-icon asx-edd-buy-owned-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;svg aria-hidden=&quot;true&quot; class=&quot;e-font-icon-svg e-fas-download&quot; viewBox=&quot;0 0 512 512&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path d=&quot;M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;&lt;\/span&gt;&lt;span class=&quot;asx-edd-buy-owned-text&quot;&gt;View in Library&lt;\/span&gt;\"><span class=\"asx-edd-buy-icon\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fab-paypal\" viewBox=\"0 0 384 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M111.4 295.9c-3.5 19.2-17.4 108.7-21.5 134-.3 1.8-1 2.5-3 2.5H12.3c-7.6 0-13.1-6.6-12.1-13.9L58.8 46.6c1.5-9.6 10.1-16.9 20-16.9 152.3 0 165.1-3.7 204 11.4 60.1 23.3 65.6 79.5 44 140.3-21.5 62.6-72.5 89.5-140.1 90.3-43.4.7-69.5-7-75.3 24.2zM357.1 152c-1.8-1.3-2.5-1.8-3 1.3-2 11.4-5.1 22.5-8.8 33.6-39.9 113.8-150.5 103.9-204.5 103.9-6.1 0-10.1 3.3-10.9 9.4-22.6 140.4-27.1 169.7-27.1 169.7-1 7.1 3.5 12.9 10.6 12.9h63.5c8.6 0 15.7-6.3 17.4-14.9.7-5.4-1.1 6.1 14.4-91.3 4.6-22 14.3-19.7 29.3-19.7 71 0 126.4-28.8 142.9-112.3 6.5-34.8 4.6-71.4-23.8-92.6z\"><\/path><\/svg><\/span><span class=\"asx-edd-buy-pre-price-text\">Paypal<\/span><\/button><\/form>        <script>\n            (function() {\n                function updateOptionalTextElement(wrapper, selector, text) {\n                    var element = wrapper.querySelector(selector);\n\n                    if (!element) {\n                        return;\n                    }\n\n                    element.textContent = text || '';\n\n                    if (text) {\n                        element.style.display = 'inline-flex';\n                    } else {\n                        element.style.display = 'none';\n                    }\n                }\n\n                function setPanelOpen(trigger, panel, isOpen) {\n                    if (isOpen) {\n                        panel.hidden = false;\n                        trigger.setAttribute('aria-expanded', 'true');\n                        return;\n                    }\n\n                    panel.hidden = true;\n                    trigger.setAttribute('aria-expanded', 'false');\n                }\n\n                function focusOption(options, index) {\n                    if (!options.length) {\n                        return;\n                    }\n\n                    if (index < 0) {\n                        index = options.length - 1;\n                    }\n\n                    if (index >= options.length) {\n                        index = 0;\n                    }\n\n                    options[index].focus();\n                }\n\n                function getOptionIndex(options, option) {\n                    for (var i = 0; i < options.length; i++) {\n                        if (options[i] === option) {\n                            return i;\n                        }\n                    }\n\n                    return -1;\n                }\n\n                function bindCustomEddBuyDropdown() {\n                    var wrapper = document.getElementById('asx-edd-buy-32e8e75');\n                    var dropdown = document.getElementById('asx-edd-buy-custom-dropdown-32e8e75');\n                    var trigger = document.getElementById('asx-edd-buy-custom-trigger-32e8e75');\n                    var panel = document.getElementById('asx-edd-buy-custom-panel-32e8e75');\n                    var hiddenInput = document.getElementById('asx-edd-buy-selected-price-32e8e75');\n\n                    if (!wrapper || !dropdown || !trigger || !panel || !hiddenInput) {\n                        return;\n                    }\n\n                    var form = wrapper.querySelector('.asx-edd-buy-form');\n                    var buyButton = wrapper.querySelector('.asx-edd-buy-button');\n                    var triggerContent = trigger.querySelector('.asx-edd-buy-custom-trigger-content');\n                    var options = Array.prototype.slice.call(panel.querySelectorAll('.asx-edd-buy-custom-option'));\n\n                    if (!form || !buyButton || !triggerContent || !options.length) {\n                        return;\n                    }\n\n                    function closeDropdown() {\n                        setPanelOpen(trigger, panel, false);\n                    }\n\n                    function openDropdown() {\n                        setPanelOpen(trigger, panel, true);\n                    }\n\n                    function getSelectedOption() {\n                        return panel.querySelector('.asx-edd-buy-custom-option.is-selected') || options[0];\n                    }\n\n                    function optionIsOwned(option) {\n                        return !!option && 'yes' === option.getAttribute('data-is-owned');\n                    }\n\n                    function redirectToOwnedUrl() {\n                        var ownedUrl = buyButton.getAttribute('data-owned-url') || '';\n\n                        if (ownedUrl) {\n                            window.location.href = ownedUrl;\n                        }\n                    }\n\n                    function setButtonOwnedMode(isOwned) {\n                        if (isOwned) {\n                            buyButton.setAttribute('type', 'button');\n                            buyButton.classList.add('asx-edd-buy-owned-button');\n                            buyButton.innerHTML = buyButton.getAttribute('data-owned-button-template') || '';\n                            return;\n                        }\n\n                        buyButton.setAttribute('type', 'submit');\n                        buyButton.classList.remove('asx-edd-buy-owned-button');\n                        buyButton.innerHTML = buyButton.getAttribute('data-buy-button-template') || buyButton.innerHTML;\n                    }\n\n                    function updateBuyButtonPriceParts(option) {\n                        var priceElement = wrapper.querySelector('.asx-edd-buy-price');\n\n                        if (priceElement) {\n                            priceElement.textContent = option.getAttribute('data-price-text') || '';\n                        }\n\n                        updateOptionalTextElement(wrapper, '.asx-edd-buy-discount-text', option.getAttribute('data-discount-text') || '');\n                        updateOptionalTextElement(wrapper, '.asx-edd-buy-original-price', option.getAttribute('data-original-price-text') || '');\n                    }\n\n                    function selectOption(option, shouldFocusTrigger) {\n                        if (!option) {\n                            return;\n                        }\n\n                        var optionContent = option.querySelector('.asx-edd-buy-custom-option-content');\n\n                        if (!optionContent) {\n                            return;\n                        }\n\n                        hiddenInput.value = option.getAttribute('data-price-id') || '';\n                        dropdown.setAttribute('data-active-price-id', hiddenInput.value);\n                        triggerContent.innerHTML = optionContent.innerHTML;\n\n                        options.forEach(function(otherOption) {\n                            var isSelected = otherOption === option;\n\n                            if (isSelected) {\n                                otherOption.classList.add('is-selected');\n                                otherOption.setAttribute('aria-selected', 'true');\n                            } else {\n                                otherOption.classList.remove('is-selected');\n                                otherOption.setAttribute('aria-selected', 'false');\n                            }\n                        });\n\n                        if (optionIsOwned(option)) {\n                            setButtonOwnedMode(true);\n                        } else {\n                            setButtonOwnedMode(false);\n                            updateBuyButtonPriceParts(option);\n                        }\n\n                        closeDropdown();\n\n                        if (shouldFocusTrigger) {\n                            trigger.focus();\n                        }\n                    }\n\n                    trigger.addEventListener('click', function() {\n                        setPanelOpen(trigger, panel, panel.hidden);\n                    });\n\n                    trigger.addEventListener('keydown', function(event) {\n                        if ('ArrowDown' === event.key || 'ArrowUp' === event.key) {\n                            event.preventDefault();\n                            openDropdown();\n\n                            var selectedOption = getSelectedOption();\n                            var selectedIndex = getOptionIndex(options, selectedOption);\n\n                            if ('ArrowDown' === event.key) {\n                                focusOption(options, selectedIndex + 1);\n                            } else {\n                                focusOption(options, selectedIndex - 1);\n                            }\n                        }\n\n                        if ('Enter' === event.key || ' ' === event.key) {\n                            event.preventDefault();\n                            setPanelOpen(trigger, panel, panel.hidden);\n                        }\n\n                        if ('Escape' === event.key) {\n                            closeDropdown();\n                        }\n                    });\n\n                    options.forEach(function(option) {\n                        option.addEventListener('click', function() {\n                            selectOption(option, true);\n                        });\n\n                        option.addEventListener('keydown', function(event) {\n                            var currentIndex = getOptionIndex(options, option);\n\n                            if ('ArrowDown' === event.key) {\n                                event.preventDefault();\n                                focusOption(options, currentIndex + 1);\n                            }\n\n                            if ('ArrowUp' === event.key) {\n                                event.preventDefault();\n                                focusOption(options, currentIndex - 1);\n                            }\n\n                            if ('Enter' === event.key || ' ' === event.key) {\n                                event.preventDefault();\n                                selectOption(option, true);\n                            }\n\n                            if ('Escape' === event.key) {\n                                event.preventDefault();\n                                closeDropdown();\n                                trigger.focus();\n                            }\n                        });\n                    });\n\n                    buyButton.addEventListener('click', function(event) {\n                        if (!optionIsOwned(getSelectedOption())) {\n                            return;\n                        }\n\n                        event.preventDefault();\n                        redirectToOwnedUrl();\n                    });\n\n                    form.addEventListener('submit', function(event) {\n                        if (!optionIsOwned(getSelectedOption())) {\n                            return;\n                        }\n\n                        event.preventDefault();\n                        redirectToOwnedUrl();\n                    });\n\n                    document.addEventListener('click', function(event) {\n                        if (dropdown.contains(event.target)) {\n                            return;\n                        }\n\n                        closeDropdown();\n                    });\n\n                    selectOption(getSelectedOption(), false);\n                }\n\n                if (document.readyState === 'loading') {\n                    document.addEventListener('DOMContentLoaded', bindCustomEddBuyDropdown);\n                } else {\n                    bindCustomEddBuyDropdown();\n                }\n            })();\n        <\/script>\n        <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f606c7 elementor-widget elementor-widget-button\" data-id=\"3f606c7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/store.algosyntax.com\/digital-assets-licenses\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">About License Types<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-11607df elementor-align-left elementor-widget elementor-widget-button\" data-id=\"11607df\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/www.fab.com\/listings\/86766bf3-3be2-4760-9e3b-2f78f7548cb1\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Available On Fab.com<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-69ae44d e-flex e-con-boxed e-con e-parent\" data-id=\"69ae44d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-43d9e08 e-con-full e-flex e-con e-child\" data-id=\"43d9e08\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef2ef6e elementor-widget elementor-widget-heading\" data-id=\"ef2ef6e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Build music grid UI faster<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-892cf86 elementor-widget elementor-widget-text-editor\" data-id=\"892cf86\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"1025\" data-end=\"1076\">A musical grid needs more than evenly spaced lines.<\/p><p data-start=\"1078\" data-end=\"1291\">You usually need bars, beats, beat subdivisions, step divisions, time signatures, quantized pointer positions, snapping, scrolling, zooming, playhead rendering, and visual styling that still stays editable in UMG.<\/p><p data-start=\"1293\" data-end=\"1387\">UMGMusicalGrids handles that foundation for you, so you can focus on the music tool around it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1d5dc68 e-con-full e-flex e-con e-child\" data-id=\"1d5dc68\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d33ec99 elementor-widget elementor-widget-heading\" data-id=\"d33ec99\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Is UMGMusicalGrids a full piano roll?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8bb9267 elementor-widget elementor-widget-text-editor\" data-id=\"8bb9267\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"1432\" data-end=\"1465\">No. It is the musical grid layer.<\/p><p data-start=\"1467\" data-end=\"1667\">It is designed to solve the time-grid part cleanly so it can fit into larger music UI systems such as piano rolls, clip editors, MIDI editors, sequencers, timeline tools, and runtime music interfaces.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-724f658 e-con-full e-flex e-con e-child\" data-id=\"724f658\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0494529 elementor-widget elementor-widget-heading\" data-id=\"0494529\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Core features<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f32781c elementor-widget elementor-widget-text-editor\" data-id=\"f32781c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<ul data-start=\"1687\" data-end=\"2436\"><li data-section-id=\"npsqfy\" data-start=\"1687\" data-end=\"1717\">Bar and beat grid generation<\/li><li data-section-id=\"1g4deb8\" data-start=\"1718\" data-end=\"1749\">Optional musical subdivisions<\/li><li data-section-id=\"1tmnrrz\" data-start=\"1750\" data-end=\"1813\">Half-beat, third-beat, quarter-beat, and sixth-beat divisions<\/li><li data-section-id=\"1a0usld\" data-start=\"1814\" data-end=\"1883\">Step, half-step, third-step, quarter-step, and sixth-step divisions<\/li><li data-section-id=\"2x4gfq\" data-start=\"1884\" data-end=\"1908\">Time signature support<\/li><li data-section-id=\"102wmy7\" data-start=\"1909\" data-end=\"1941\">Ticks-per-quarter-note support<\/li><li data-section-id=\"172oeba\" data-start=\"1942\" data-end=\"1991\">Horizontal or vertical musical time orientation<\/li><li data-section-id=\"b5beu7\" data-start=\"1992\" data-end=\"2018\">Configurable bar spacing<\/li><li data-section-id=\"1b8wyw4\" data-start=\"2019\" data-end=\"2047\">Musical axis size in beats<\/li><li data-section-id=\"uydrvc\" data-start=\"2048\" data-end=\"2068\">Grid density modes<\/li><li data-section-id=\"1l7pcsx\" data-start=\"2069\" data-end=\"2094\">Grid quantization modes<\/li><li data-section-id=\"kaa285\" data-start=\"2095\" data-end=\"2151\">Movement and resize snapping from musical quantization<\/li><li data-section-id=\"iygurw\" data-start=\"2152\" data-end=\"2195\">Pointer events reported in beats and bars<\/li><li data-section-id=\"16v6s09\" data-start=\"2196\" data-end=\"2241\">Quantized and unquantized pointer positions<\/li><li data-section-id=\"1vzse2w\" data-start=\"2242\" data-end=\"2282\">Primary-button and touch input support<\/li><li data-section-id=\"zj7b7o\" data-start=\"2283\" data-end=\"2310\">Playhead cursor rendering<\/li><li data-section-id=\"zj7b7o\" data-start=\"2283\" data-end=\"2310\">Optional Pitch Grid support<\/li><li data-section-id=\"1sbxe8l\" data-start=\"2311\" data-end=\"2374\">Designer-editable line styles, labels, ticks, and backgrounds<\/li><li data-section-id=\"1mkcg40\" data-start=\"2375\" data-end=\"2407\">Blueprint and C++ friendly API<\/li><li data-section-id=\"1lgh7dt\" data-start=\"2408\" data-end=\"2436\">Based on Enhanced UI Grids<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-47167d2 e-flex e-con-boxed e-con e-parent\" data-id=\"47167d2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6a5e2f8 elementor-widget elementor-widget-text-editor\" data-id=\"6a5e2f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>The source currently exposes the main musical settings through <code data-start=\"2501\" data-end=\"2522\">MusicalTimeSettings<\/code>, <code data-start=\"2524\" data-end=\"2544\">MusicalLineGridIDs<\/code>, <code data-start=\"2546\" data-end=\"2559\">GridDensity<\/code>, <code data-start=\"2561\" data-end=\"2579\">GridQuantization<\/code>, playhead settings, pointer settings, and Blueprint events for pointer and geometry updates.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4adfd74 e-flex e-con-boxed e-con e-parent\" data-id=\"4adfd74\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-c37197d e-con-full e-flex e-con e-child\" data-id=\"c37197d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c1c3b3b elementor-widget elementor-widget-heading\" data-id=\"c1c3b3b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Typical workflow<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f5da288 e-con-full e-flex e-con e-child\" data-id=\"f5da288\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c7a22b8 elementor-widget elementor-widget-heading\" data-id=\"c7a22b8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Add the widget<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-42e78f1 elementor-widget elementor-widget-text-editor\" data-id=\"42e78f1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-section-id=\"8hztkc\" data-start=\"2712\" data-end=\"2731\">Place the musical grid canvas in your UMG layout.<\/p><p data-start=\"2807\" data-end=\"2947\">Use it as the time-grid layer for a piano roll, sequencer, MIDI editor, clip editor, step sequencer, automation lane, or runtime music tool.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3307fd3 e-con-full e-flex e-con e-child\" data-id=\"3307fd3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5061024 elementor-widget elementor-widget-heading\" data-id=\"5061024\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Configure musical time<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-756e789 elementor-widget elementor-widget-text-editor\" data-id=\"756e789\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-section-id=\"8hztkc\" data-start=\"2712\" data-end=\"2731\">Set the time signature, ticks per quarter note, time orientation, bar spacing, and total size in beats. The widget uses these values to keep the musical grid aligned with your project\u2019s time model.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-85ff368 e-con-full e-flex e-con e-child\" data-id=\"85ff368\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-00442e7 elementor-widget elementor-widget-heading\" data-id=\"00442e7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Choose grid density<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d637954 elementor-widget elementor-widget-text-editor\" data-id=\"d637954\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"3208\" data-end=\"3321\">Use a minimal grid with bars and beats, or let the widget maintain the full built-in set of musical subdivisions.<\/p><p data-start=\"3323\" data-end=\"3487\">Bars and beats are treated as required musical grid entries. Optional lower divisions are controlled by the grid density mode.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c665db7 e-con-full e-flex e-con e-child\" data-id=\"c665db7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eada72f elementor-widget elementor-widget-heading\" data-id=\"eada72f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Pick quantization<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5278fb5 elementor-widget elementor-widget-text-editor\" data-id=\"5278fb5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"3515\" data-end=\"3563\">Choose the active musical quantization division.<\/p><p data-start=\"3565\" data-end=\"3731\">The grid can use that quantization for pointer output, visual subdivision display, and movement or resize snapping when enabled.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f2676be e-con-full e-flex e-con e-child\" data-id=\"f2676be\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a8f758 elementor-widget elementor-widget-heading\" data-id=\"4a8f758\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Style the grid<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c99e62 elementor-widget elementor-widget-text-editor\" data-id=\"8c99e62\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"3756\" data-end=\"3820\">Customize the underlying LineGrid entries to match your product.<\/p><p data-start=\"3822\" data-end=\"3982\">You can style bars, beats, subdivisions, labels, tick marks, backgrounds, line thickness, colors, and draw priority through the existing LineGrid styling model.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4e2d3a6 e-con-full e-flex e-con e-child\" data-id=\"4e2d3a6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c6ab32b elementor-widget elementor-widget-heading\" data-id=\"c6ab32b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">6. Hook up your tool logic<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c301204 elementor-widget elementor-widget-text-editor\" data-id=\"c301204\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"4016\" data-end=\"4087\">Bind to musical pointer events and receive positions in beats and bars.<\/p><p data-start=\"4089\" data-end=\"4307\">Pointer events include physical position, exact beat position, quantized beat position, exact bar position, quantized bar position, active quantization, button, and validity state.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6fa1fe8 e-flex e-con-boxed e-con e-parent\" data-id=\"6fa1fe8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a04d046 elementor-widget elementor-widget-heading\" data-id=\"a04d046\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">High-level API, music-focused controls<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a7759d elementor-widget elementor-widget-text-editor\" data-id=\"7a7759d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-section-id=\"14b3mgh\" data-start=\"4580\" data-end=\"4621\">\u00a0UMGMusicalGrids hides the low-level grid setup behind music-domain settings.<\/p><p data-start=\"4701\" data-end=\"4729\">You work with concepts like:<\/p><ul data-start=\"4731\" data-end=\"4916\"><li data-section-id=\"vi7wjd\" data-start=\"4731\" data-end=\"4747\">time signature<\/li><li data-section-id=\"hvpnx\" data-start=\"4748\" data-end=\"4772\">ticks per quarter note<\/li><li data-section-id=\"1j3ew8a\" data-start=\"4773\" data-end=\"4779\">bars<\/li><li data-section-id=\"16cwvjd\" data-start=\"4780\" data-end=\"4787\">beats<\/li><li data-section-id=\"16n84zt\" data-start=\"4788\" data-end=\"4795\">steps<\/li><li data-section-id=\"1ltmk9w\" data-start=\"4796\" data-end=\"4815\">beat subdivisions<\/li><li data-section-id=\"c8uktk\" data-start=\"4816\" data-end=\"4830\">grid density<\/li><li data-section-id=\"qv3c9t\" data-start=\"4831\" data-end=\"4850\">grid quantization<\/li><li data-section-id=\"1b69v4b\" data-start=\"4851\" data-end=\"4866\">size in beats<\/li><li data-section-id=\"1a344un\" data-start=\"4867\" data-end=\"4891\">playhead beat position<\/li><li data-section-id=\"1a344un\" data-start=\"4867\" data-end=\"4891\">musical pointer events<\/li><\/ul><p data-start=\"4918\" data-end=\"4942\">Not generic layout math.<\/p><p data-start=\"4944\" data-end=\"5186\">The widget maps musical time divisions to LineGrid IDs internally, so callers can request musical concepts like bars, beats, or steps rather than manually resolving the correct LineGrid object every time.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4b5d6e3 e-flex e-con-boxed e-con e-parent\" data-id=\"4b5d6e3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8c48e58 elementor-widget elementor-widget-heading\" data-id=\"8c48e58\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What the system takes over<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c55b2ac elementor-widget elementor-widget-text-editor\" data-id=\"c55b2ac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-section-id=\"1switn9\" data-start=\"5188\" data-end=\"5217\">UMGMusicalGrids is designed to help without taking full styling control away from the designer.<\/p><p data-start=\"5316\" data-end=\"5419\">At design time and synchronization time, the system manages the parts that must stay musically correct:<\/p><ul data-start=\"5421\" data-end=\"5829\"><li data-section-id=\"twbk6a\" data-start=\"5421\" data-end=\"5452\">required Bars and Beats grids<\/li><li data-section-id=\"5joagg\" data-start=\"5453\" data-end=\"5503\">optional subdivision grids based on grid density<\/li><li data-section-id=\"1j7u5pg\" data-start=\"5504\" data-end=\"5531\">musical LineGrid identity<\/li><li data-section-id=\"g6jl3e\" data-start=\"5532\" data-end=\"5558\">musical grid orientation<\/li><li data-section-id=\"ncycdy\" data-start=\"5559\" data-end=\"5617\">line spacing derived from bar spacing and time signature<\/li><li data-section-id=\"kw6sqn\" data-start=\"5618\" data-end=\"5678\">parent relationships between bars, beats, and subdivisions<\/li><li data-section-id=\"czclsl\" data-start=\"5679\" data-end=\"5696\">logical offsets<\/li><li data-section-id=\"16zfq9r\" data-start=\"5697\" data-end=\"5740\">navigation size for the musical time axis<\/li><li data-section-id=\"t4ny2b\" data-start=\"5741\" data-end=\"5773\">active quantization visibility<\/li><li data-section-id=\"kjv3qc\" data-start=\"5774\" data-end=\"5829\">movement and resize snap grid assignment when enabled<\/li><\/ul><p>The class documentation states that the sync path only edits known musical LineGrids, never removes or modifies non-musical LineGrids, and preserves existing musical LineGrid styling while updating musical identity, orientation, line spacing, parent relationship, logical offset, navigation logical size, and quantization visibility.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-28f7685 e-flex e-con-boxed e-con e-parent\" data-id=\"28f7685\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8474464 elementor-widget elementor-widget-heading\" data-id=\"8474464\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What designers can still control<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3849d92 elementor-widget elementor-widget-text-editor\" data-id=\"3849d92\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-section-id=\"1a6mh8c\" data-start=\"6204\" data-end=\"6239\">Designers still have access to the visual and product-specific parts of the grid.<\/p><p data-start=\"6324\" data-end=\"6341\">They can control:<\/p><ul data-start=\"6343\" data-end=\"6670\"><li data-section-id=\"72l3e0\" data-start=\"6343\" data-end=\"6356\">line colors<\/li><li data-section-id=\"1ulllkg\" data-start=\"6357\" data-end=\"6373\">line thickness<\/li><li data-section-id=\"1czwfve\" data-start=\"6374\" data-end=\"6389\">draw priority<\/li><li data-section-id=\"12a7x57\" data-start=\"6390\" data-end=\"6406\">label settings<\/li><li data-section-id=\"188exx4\" data-start=\"6407\" data-end=\"6422\">tick settings<\/li><li data-section-id=\"1vogyhg\" data-start=\"6423\" data-end=\"6443\">background styling<\/li><li data-section-id=\"1w2tp20\" data-start=\"6444\" data-end=\"6457\">bar spacing<\/li><li data-section-id=\"150o1um\" data-start=\"6458\" data-end=\"6471\">orientation<\/li><li data-section-id=\"c8uktk\" data-start=\"6472\" data-end=\"6486\">grid density<\/li><li data-section-id=\"vzg5i1\" data-start=\"6487\" data-end=\"6501\">quantization<\/li><li data-section-id=\"168fndm\" data-start=\"6502\" data-end=\"6518\">playhead brush<\/li><li data-section-id=\"16g2f0i\" data-start=\"6519\" data-end=\"6535\">playhead width<\/li><\/ul><p>etc&#8230;<\/p><p>Normal lines, labels, ticks, backgrounds, and borders remain controlled by LineGridCanvasPanel and the configured LineGrid properties; the musical renderer only owns the extra musical overlay rendering such as the playhead cursor.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-eb6c280 e-flex e-con-boxed e-con e-parent\" data-id=\"eb6c280\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26fcd75 elementor-widget elementor-widget-heading\" data-id=\"26fcd75\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Musical pointer events<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-69a875f elementor-widget elementor-widget-text-editor\" data-id=\"69a875f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-section-id=\"1iwg9u5\" data-start=\"6942\" data-end=\"6967\">\u00a0UMGMusicalGrids converts pointer input into musical time.<\/p><p data-start=\"7028\" data-end=\"7063\">A click, drag, or touch can report:<\/p><ul data-start=\"7065\" data-end=\"7230\"><li data-section-id=\"12idyh0\" data-start=\"7065\" data-end=\"7084\">physical position<\/li><li data-section-id=\"1t27jnm\" data-start=\"7085\" data-end=\"7098\">exact beats<\/li><li data-section-id=\"16shy4k\" data-start=\"7099\" data-end=\"7116\">quantized beats<\/li><li data-section-id=\"16v9141\" data-start=\"7117\" data-end=\"7129\">exact bars<\/li><li data-section-id=\"7r5drb\" data-start=\"7130\" data-end=\"7146\">quantized bars<\/li><li data-section-id=\"xek32t\" data-start=\"7147\" data-end=\"7168\">active quantization<\/li><li data-section-id=\"3vpbpk\" data-start=\"7169\" data-end=\"7203\">whether quantization was applied<\/li><li data-section-id=\"o101gj\" data-start=\"7204\" data-end=\"7219\">source button<\/li><li data-section-id=\"1uzy2re\" data-start=\"7220\" data-end=\"7230\">validity<\/li><\/ul><p data-start=\"7232\" data-end=\"7373\">This makes it suitable for note creation, clip placement, playhead seeking, range selection, step editing, and other music-tool interactions.<\/p><p>The input module converts pointer positions through the Beats grid, applies the configured grid quantization when available, and falls back to exact beat positions when quantization is disabled or unavailable<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-83e47e1 elementor-widget elementor-widget-heading\" data-id=\"83e47e1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Playhead-ready<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-248ece2 e-flex e-con-boxed e-con e-parent\" data-id=\"248ece2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d25d3f3 elementor-widget elementor-widget-text-editor\" data-id=\"d25d3f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-section-id=\"e1f2j3\" data-start=\"7624\" data-end=\"7641\">UMGMusicalGrids includes a simple playhead overlay.<\/p><p data-start=\"7696\" data-end=\"7864\">Set the playhead beat time, brush, and width, and the grid renders the cursor in the correct orientation using the Beats LineGrid.<\/p><p data-start=\"7866\" data-end=\"7957\">Use it for playback indicators, edit cursors, preview positions, or timeline seek feedback.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a5b99d2 e-flex e-con-boxed e-con e-parent\" data-id=\"a5b99d2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-16f8b4c elementor-widget elementor-widget-heading\" data-id=\"16f8b4c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Built for integration<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-820305b elementor-widget elementor-widget-text-editor\" data-id=\"820305b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-section-id=\"mmcv7q\" data-start=\"7959\" data-end=\"7983\">UMGMusicalGrids is designed to fit into larger music UI systems.<\/p><p data-start=\"8051\" data-end=\"8205\">Use it as the grid foundation inside your own piano roll, MIDI editor, sequencer, clip editor, rhythm editor, automation tool, or runtime music interface.<\/p><p data-start=\"8207\" data-end=\"8348\">It provides the musical grid, timing, quantization, pointer conversion, and playhead layer while your product owns the higher-level workflow.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>UMG Musical Grids Build timeline, piano-roll, sequencer, and music-editor grids in UMG without rebuilding musical time layout from scratch. UMGMusicalGrids is a focused Unreal Engine plugin for creating music-aware grid widgets in UMG. It gives you a higher-level musical canvas built on top of LineGridCanvasPanel, with built-in support for bars, beats, subdivisions, quantization, playhead rendering, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":14197,"template":"elementor_header_footer","edd-categories":[11,4],"edd-tags":[108,139],"class_list":["post-14009","download","type-download","status-publish","has-post-thumbnail","hentry","download_category-code-plugins","download_category-unreal-engine","download_tag-unreal-engine","download_tag-userinterface","entry","has-media","edd-download","edd-download-cat-code-plugins","edd-download-cat-unreal-engine","edd-download-tag-unreal-engine","edd-download-tag-userinterface"],"acf":[],"_links":{"self":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/edd-downloads\/14009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/edd-downloads"}],"about":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/types\/download"}],"author":[{"embeddable":true,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/users\/1"}],"version-history":[{"count":2,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/edd-downloads\/14009\/revisions"}],"predecessor-version":[{"id":14355,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/edd-downloads\/14009\/revisions\/14355"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/media\/14197"}],"wp:attachment":[{"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/media?parent=14009"}],"wp:term":[{"taxonomy":"download_category","embeddable":true,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/edd-categories?post=14009"},{"taxonomy":"download_tag","embeddable":true,"href":"https:\/\/store.algosyntax.com\/asx-rest\/wp\/v2\/edd-tags?post=14009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}