Documentation

# Web configs Web configs are currently the most powerful way to design RainbowTaskbar configs. ## Basic info Web configs render on a WebView2 control - which uses Microsoft Edge. Currently 1 single HTML file is supported per config. It is recommended to avoid using network resources. To embed files such as images, audio, you may use base64 encoded data. ## RainbowTaskbar API - `window.rainbowTaskbar` You can now use the standard RainbowTaskbar Web API available as `window.rainbowTaskbar`. #### Builder syntax functions - setTaskbarOpacity(v) - setUnderlayOpacity(v) - setStyleDefault() - setStyleBlur() - setStyleTransparent() - setTaskbarOffset() #### Properties - uiInfo - graphicsRepeat - maxFps - rtUserConfig - taskbarIndex This property allows matching the correct taskbar provided with `uiInfo`. For `graphicsRepeat`==false, this is always -1. #### Helper functions - helpers: - normalizeTaskbarCoords(_ui, copy = true) For multi-monitor setups where taskbar coords can go negative, this function adjusts coordinates such as the X position of the left-most taskbar is equal to 0. - normalizeAndScaleUICoords(_ui, copy = true) This function also adjusts real screen coordinates to scaled CSS pixels. - generateCSSMaskForUI(_ui, fadeTop = true) This function will generate a CSS mask that only shows content under taskbar elements. You can apply it with .apply() #### Events - onUIChanged(uiInfo) This event will call everytime there is a positioning update regarding the SystemTrayFrame or TaskbarFrameRepeater taskbar controls. ### Examples 1. Set taskbar style

rainbowTaskbar
    .setTaskbarOpacity(1)
    .setStyleTransparent();

2. Only show content under taskbar elements

rainbowTaskbar.onUIChanged = (info) => {
    rainbowTaskbar.helpers.generateCSSMaskForUI(info)
        .apply();
}

## Canvas with scaling Windows scaling breaks canvas rendering by default, as such one must manually tune it to fix the low pixel density issues that cause blurriness.

document.addEventListener("DOMContentLoaded", () => {
    cvs = document.getElementById("cvs");
    ctx = cvs.getContext("2d");

    // Get OS scaling factor
    const scale = window.devicePixelRatio;

    // All coordinates are available as "CSS pixels". To convert them to
    // physical pixels and correct pixel density on canvas, we must multiply
    // the values by the scaling factor we got above.

    // Set canvas to real physical width and height
    cvs.width = Math.floor(window.innerWidth * scale);
    cvs.height = Math.floor(window.innerHeight * scale);

    // Scale context back to scaled width and height
    ctx.scale(scale,scale);
    // If we didn't do this, the canvas would appear just as it would
    // at 100% OS scaling, which completely defeats the purpose of scaling
})
// ...
function loop() {
    // All coordinates are now scaled to "CSS pixels"

                    /* note that we're not using cvs.width/cvs.height */
    ctx.clearRect(0,0,      window.innerWidth,window.innerHeight        );

    // You can now keep using the canvas as usual!
    // ...
}