Visual Window Snapping


#22

A great way to handle multiple displays would be to somehow detect the second display and its position (left or right of the current display), and show an entire second window snapper box next to the original window snapper box in the correct position. Then, to move a window to the external display, you'd simply use the second window snapper box. I would personally use the ever-loving crap out of it.


#23

That sounds like a great idea! I was thinking about how to handle switching desktops and snapping in one click.

I already have the ability to detect the amount of displays present, but I havent found a way to detect or keep track of which one is currently being used and directions.

i think instead of having two squares, which would get so confusing to users, you’d have a little square to the left and right with an icon on them. As soon as you mouseover, the main square would pop over and swallow up the icon, while a similar icon appears where the nain square was to allow you to snap in the same display.

I’ll get a mockup up soon. I’m good at figuring things out, but I’m still very weak and learning code so I’d appreciate some help! (Probably once I get my iteration refined enough i’ll upload it here for some help)


#24

I think the animations involved in the variant you've described sound like overkill; perhaps just having a slightly smaller window snapper grid to represent an external display will provide enough visual distinction to make it clear that it isn't for snapping to the primary display.


#25

I’ll experiment, and refine. I have a high standard of quality.

Hey, iOS animations are pretty overkill too, and anyway, i’m not skilled with CSS and HTML so that’ll limit me quite a bit!


#26

Ahhhaha sorry, I didn't mean it to sound so critical! I think it'll be less work to make a non-animated snapper anyway :stuck_out_tongue: but if you still wanna do it animated then go for it!


#27

Its okay, feedback is valuable and i really take it seriously. It’s quite hard for me to get too β€˜judged’ by feedback as I usually take it as tips to improve.

Also maybe that explanation is a bit much making it sound complicated, but I imagine it’s motion to be smooth and all-at-once (much like iPhone X gestures)

Thanks for your feedback!


#28

Just worked on it again. it's so close to what I wanted it to be:

winsnap2%402x 36%20am

More Shots

06%20am
33%20am


19%20am

Excuse my uncropped and unproportionate screenshots :slight_smile:


Here's what I did:

COMPLETLEY cleaned up how the widget was rendered. (my it was a mess)

Changes in the code:
Before:

  • the grid-container did the blur and shaders
  • each cell overlayed a darken onto the grid-container
  • each cell had a grid-gap that let the lighter grid-container shine through for the grid borders
  • when mouseover, the cells become semi-transparent to allow the lighter grid-container to shine through

After:

  • grid-container does the blur, shaders, darken, all the colouring.
  • each cell is fully transparent, letting the grid-container through untouched.
  • grid gaps removed and replaced with normal css borders now. This allows more control over them.
  • when mouseover, the cells become opaque/overlay the grid-container with whatever effect you want.
  • the moseover style of the BUTTON is now seperate from the REPRESENTATION style. You can style the button seperate to the representation now.

I made the button mouseover style red for my debug purposes, Here's what I saw while I was debugging:

11%20pm 06%20pm


After I redid how it all works, I (painstakingly) refined and adjusted the widget a bit more.

  • Reduce over-saturation / over-exposure
  • Refined the mouseover styles
  • Thicken the grid borders (now 2px, easier to see for not so good eyes)
  • Dimmed the grid borders
  • moved all repeating attributes to a single .cell class for easier editing and a minimised script (e.g. 'border-width: 1px' is not in every single cell class anymore, instead it is in one β€˜.cell’ class that’s added to all cells)

BUT,
I'm having trouble with the grid borders. I want them to have the hard-light blend mode but I can't seem to assign it to them, they just don't respond to it.

It may be small but I guess this is where I'm stuck. Oh well, if this can't be fixed i'll just settle for the awfully flat looking, grey grid borders


"I Want to Try It" you say?

I'll just release the updated code for now. It's still missing the dynamic dark-mode sensing, desktop switching snapping and other stuff, but if you're itching to look into the new refinements then here's the code:

Show HTML Code
<!--
VISUAL WINDOW SNAPPING by panda modified by Jerosh.
Forum link: https://community.folivora.ai/t/visual-window-snapping/2863

This one was refined by GoldenChaos, then refined further by me, yyuuiko!
-->

<html>
<head>
    <style>

       .grid-container { /* The MAIN BACKGROUND of the pallete */
            display: grid;
            height: 150px;
            width: 150px;
            margin: 40px;
/**/            padding: 0px;
            background-color: rgba(30,30,30,0.7);
            -webkit-backdrop-filter: saturate(180%) blur(20px) brightness(100%);
            border-radius: 38px;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            grid-gap: 0px 0px;
            grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
            box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
            overflow: hidden;
/**/            border: 1.5px solid rgba(255,255,255,0.7);
        }

        .highlighted { /* -------------------------------FADE (Representation)------------------------------------ */
          -webkit-backdrop-filter: brightness(150%) saturate(180%);
          -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
          transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        }

        .highlightCell {
          -webkit-backdrop-filter: brightness(120%);
          background-color: rgba(255,255,255,.4);
          -webkit-transition: -webkit-backdrop-filter 600ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: -webkit-backdrop-filter 600ms cubic-bezier(0.19, 1, 0.72, 1);

          -webkit-transition: background-color 300ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: background-color 300ms cubic-bezier(0.19, 1, 0.72, 1);
        }

        .cell {
/**/            border: solid rgba(255,255,255,.5);
/**/            mix-blend-mode: hard-light;
        }

        .TopLeft {
            display: grid;
            grid-area: TopLeft;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 0px 0px;
            grid-template-areas: "TopLeftTopLeft TopLeftTopRight""TopLeftBottomLeft TopLeftBottomRight";
            border-top-left-radius: 36px;
          }

        .TopLeftTopLeft {
            grid-area: TopLeftTopLeft;
            border-top-left-radius: 36px;
/**/            border-width: 0px 1px 1px 0px;
        }

        .TopLeftBottomLeft {
            grid-area: TopLeftBottomLeft;
/**/            border-width: 1px 1px 0px 0px;
        }

        .TopLeftTopRight {
            grid-area: TopLeftTopRight;
/**/            border-width: 0px 0px 1px 1px;
        }

        .TopLeftBottomRight {
            grid-area: TopLeftBottomRight;
/**/            border-width: 1px 0px 0px 1px;
        }

        .TopRight {
            display: grid;
            grid-area: TopRight;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 0px 0px;
            grid-template-areas: "TopRightTopLeft TopRightTopRight""TopRightBottomLeft TopRightBottomRight";
            border-top-right-radius: 36px;
        }

        .TopRightTopLeft {
            grid-area: TopRightTopLeft;
/**/            border-width: 0px 1px 1px 0px;
        }

        .TopRightTopRight {
            grid-area: TopRightTopRight;
            border-top-right-radius: 36px;
/**/            border-width: 0px 0px 1px 1px;
 -webkit-background-clip: padding-box;
background-clip: padding-box;
        }

        .TopRightBottomLeft {
            grid-area: TopRightBottomLeft;
/**/            border-width: 1px 1px 0px 0px;

        }

        .TopRightBottomRight {
            grid-area: TopRightBottomRight;
/**/            border-width: 1px 0px 0px 1px;
        }



        .BottomLeft {
            display: grid;
            grid-area: BottomLeft;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 0px 0px;
            grid-template-areas: "BottomLeftTopLeft BottomLeftTopRight""BottomLeftBottomLeft BottomLeftBottomRight";
            border-bottom-left-radius: 36px;
        }

        .BottomLeftTopLeft {
            grid-area: BottomLeftTopLeft;
/**/            border-width: 0px 1px 1px 0px;

        }

        .BottomLeftTopRight {
            grid-area: BottomLeftTopRight;
/**/            border-width: 0px 0px 1px 1px;

        }

        .BottomLeftBottomLeft {
            grid-area: BottomLeftBottomLeft;
            border-bottom-left-radius: 36px;
/**/            border-width: 1px 1px 0px 0px;
        }

        .BottomLeftBottomRight {
            grid-area: BottomLeftBottomRight;
/**/            border-width: 1px 0px 0px 1px;
        }



        .BottomRight {
            display: grid;
            grid-area: BottomRight;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            border-bottom-right-radius: 36px;
/**/            grid-gap: 0px 0px;
            grid-template-areas: "BottomRightTopLeft BottomRightTopRight""BottomRightBottomLeft BottomRightBottomRight";
        }

        .BottomRightTopLeft {
            grid-area: BottomRightTopLeft;
/**/            border-width: 0px 1px 1px 0px;

        }

        .BottomRightTopRight {
            grid-area: BottomRightTopRight;
/**/            border-width: 0px 0px 1px 1px;
        }

        .BottomRightBottomLeft {
            grid-area: BottomRightBottomLeft;
/**/            border-width: 1px 1px 0px 0px;
        }

        .BottomRightBottomRight {
            grid-area: BottomRightBottomRight;
            border-bottom-right-radius: 36px;
/**/            border-width: 1px 0px 0px 1px;
        }
    </style>

    <script>
        window.currentlyHighlighted = [];

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Add Highlight FX for Representation-β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function addHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted.push(classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.add('highlighted');
            }
        }

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Remove Highlight FX for Representation -β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function removeHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlighted');
                //document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightOff');
            }
        }


        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Add Highlight FX for Button -β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function addCellHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted.push(classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightCell');
            }
        }

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Remove Highlight FX for Button-β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function removeCellHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlightCell');
                //document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightOff');
            }
        }

        function uniq(a) {
            var prims = {
                    "boolean": {},
                    "number": {},
                    "string": {}
                },
                objs = [];

            return a.filter(function(item) {
                var type = typeof item;
                if (type in prims)
                    return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
                else
                    return objs.indexOf(item) >= 0 ? false : objs.push(item);
            });
        }

        function performAction() {
            console.log(uniq(window.currentlyHighlighted));
            var trigger = '';
            if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'maximize';
            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('TopRight') !== -1) {
                trigger = 'tophalf';
            } else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'bottomhalf';
            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
                trigger = 'lefthalf';
            } else if (window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'righthalf';
            } else if (window.currentlyHighlighted.indexOf('TopRight') !== -1) {
                trigger = 'topright';

            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1) {
                trigger = 'topleft';

            } else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
                trigger = 'bottomleft';

            } else if (window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'bottomright';
            }

            console.log('trigger', trigger);
            window.BTT.callHandler('trigger_named', {
                trigger_name: trigger,
                closeFloatingHTMLMenu: 1
            })
        }
    </script>
</head>
<body>
    <div class="grid-container" onclick="performAction()">
        <div class="TopLeft"                         onmouseover="addHighlight(['TopLeft']);" onmouseout="removeHighlight(['TopLeft']);">
            <div class="area-overlap TopLeftTopLeft cell" onmouseover="addHighlight(['TopLeftTopLeft']); addCellHighlight(['TopLeftTopLeft'])" onmouseout="removeHighlight(['TopLeftTopLeft']); removeCellHighlight(['TopLeftTopLeft'])"></div>
            <div class="TopLeftBottomLeft cell"           onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
            <div class="TopLeftTopRight cell"             onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight(['TopLeftTopRight', 'TopRightTopLeft']);" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])"></div>
            <div class="TopLeftBottomRight cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
        </div>

        <div class="TopRight"                        onmouseover="addHighlight(['TopRight'])" onmouseout="removeHighlight(['TopRight'])">
            <div class="area-overlap TopRightTopLeft cell"onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight(['TopLeftTopRight', 'TopRightTopLeft'])"></div>
            <div class="TopRightTopRight cell"            onmouseover="addHighlight(['TopRightTopRight']); addCellHighlight(['TopRightTopRight'])" onmouseout="removeHighlight(['TopRightTopRight']); removeCellHighlight(['TopRightTopRight'])"></div>
            <div class="TopRightBottomLeft cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
            <div class="TopRightBottomRight cell"         onmouseover="addHighlight(['TopRight', 'BottomRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['TopRight', 'BottomRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
        </div>

        <div class="BottomLeft"                      onmouseover="addHighlight(['BottomLeft'])" onmouseout="removeHighlight(['BottomLeft'])">
            <div class="area-overlap BottomLeftTopLeft cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
            <div class="BottomLeftTopRight cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
            <div class="BottomLeftBottomLeft cell"        onmouseover="addHighlight(['BottomLeftBottomLeft']); addCellHighlight(['BottomLeftBottomLeft'])" onmouseout="removeHighlight(['BottomLeftBottomLeft']); removeCellHighlight(['BottomLeftBottomLeft'])"></div>
            <div class="BottomLeftBottomRight cell"       onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
        </div>

        <div class="BottomRight"                      onmouseover="addHighlight(['BottomRight'])" onmouseout="removeHighlight(['BottomRight'])">
            <div class="area-overlap BottomRightTopLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
            <div class="BottomRightTopRight cell"          onmouseover="addHighlight(['BottomRight', 'TopRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['BottomRight', 'TopRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
            <div class="BottomRightBottomLeft cell"        onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
            <div class="BottomRightBottomRight cell"       onmouseover="addHighlight(['BottomRightBottomRight']); addCellHighlight(['BottomRightBottomRight'])" onmouseout="removeHighlight(['BottomRightBottomRight']); removeCellHighlight(['BottomRightBottomRight'])"></div>
        </div>
    </div>
</body>
</html>

#29

Refactoring to use borders was probably not the best idea :stuck_out_tongue: as you have learned, they don't support any fancy blend modes, and they can't blur the stuff behind it. That's why I had specifically refactored it to not use borders, haha.

You can actually stack blend modes, so you can have the cells on top apply additional blending and filters. I didn't do that in my version, but I've since spent a lot more time on recreating macOS's vibrancy effect for my settings menu, so I think I've got it down now. I'll take a swing at this using your updated version and see what I can achieve!


#30

Yeah i thought a bit about that last night and I did realise that was the case.

That method is a pain to shade correctly but with the new changes (.cell class, seperate highlighting styles) it should be easier to control and update the look.

Funny though, the corner cells were responding to the blend mode perfectly for some reason. It got me excited but now it seems weird

(still a beginner anywayy ahahh, I’ll take that advice and see what I can do)


#31

Just refined it yet again!

57%20am

  • Back to using gridgaps as borders, they now pop with some background color
  • Highlights are less of a 'Punch through' and more of a 'white overlay'
  • Back to 1px grid borders

I think this one is pretty perfect, except for one thing:
When viewing on a white or near-white surface, you can't see the representation for some reason. I need help with this as I tried for so long to fix it, but couldn't get it done.

Images of the white issue

37%20pm
21%20pm
07%20pm

Monitor Snapping

I've also got the very very crude basics of the monitor snapping up!

If the video doesn't work, try safari.

Examples of Bad Quality:

  • Nothing works properly.
  • The left grid doesn't shrink the main grid,
  • All grids don't highlight the correct grid,
  • The use of transform scale may result in pixelation??
  • I'm a beginner so the way I implemented it this far is probably way off from best practice
    --
  • The borders for the side grids are wrecked

Unimplemented:

  • I imagine that when a side grid is not expanded, it would just be a small rounded square with an icon (like a button) in the middle, but when hovered, the grid expands from behind the icon while the icon still shows. The main grid shrinks into the same 'button' look while that happens.

Code

Main Grid Only (for it's visual improvements)
<!--
VISUAL WINDOW SNAPPING by panda modified by Jerosh.
Forum link: https://community.folivora.ai/t/visual-window-snapping/2863

This one was refined by GoldenChaos, then refined further by me, yyuuiko!
-->

<html>
<head>
    <style>

       .grid-container { /* The MAIN BACKGROUND of the pallete */
            display: grid;
            height: 150px;
            width: 150px;
            margin: 40px;
/**/            padding: 0px;
            background-color: rgba(255,255,255,0.5);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 38px;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            grid-gap: 0px 0px;
            grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
            box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
            overflow: hidden;
/**/            border: 1.5px solid rgba(255,255,255,0.7);
        }

        .highlighted { /* -------------------------------FADE (Representation)------------------------------------ */
          -webkit-backdrop-filter: brightness(100%) saturate(200%);
          background-color: rgba(255,255,255,.4);
          -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
          transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        }

        .highlightCell {
          /* -webkit-backdrop-filter: brightness(120%); */
          background-color: rgba(255,255,255,.4);
          -webkit-backdrop-filter: brightness(100%) saturate(200%);
          -webkit-transition: -webkit-backdrop-filter 600ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: -webkit-backdrop-filter 600ms cubic-bezier(0.19, 1, 0.72, 1);

          -webkit-transition: background-color 300ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: background-color 300ms cubic-bezier(0.19, 1, 0.72, 1);
        }

        .cell {
/**/            /* border: solid rgba(255,255,255,0); */
                /* background-color: rgba(0,0,0,.4); */
                -webkit-backdrop-filter: saturate(180%) brightness(50%);
                -webkit-background-clip: padding-box;
                background-clip: padding-box;
                mix-blend-mode: multiply
        }

        .TopLeft {
            display: grid;
            grid-area: TopLeft;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 1px 1px;
            grid-template-areas: "TopLeftTopLeft TopLeftTopRight""TopLeftBottomLeft TopLeftBottomRight";
            border-top-left-radius: 36px;
          }

        .TopLeftTopLeft {
            grid-area: TopLeftTopLeft;
            border-top-left-radius: 36px;
/*            border-width: 0px 1px 1px 0px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .TopLeftBottomLeft {
            grid-area: TopLeftBottomLeft;
/*            border-width: 1px 1px 0px 0px; */
        }

        .TopLeftTopRight {
            grid-area: TopLeftTopRight;
/*            border-width: 0px 0px 1px 1px; */
        }

        .TopLeftBottomRight {
            grid-area: TopLeftBottomRight;
/*            border-width: 1px 0px 0px 1px; */
        }

        .TopRight {
            display: grid;
            grid-area: TopRight;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 1px 1px;;
            grid-template-areas: "TopRightTopLeft TopRightTopRight""TopRightBottomLeft TopRightBottomRight";
            border-top-right-radius: 36px;
        }

        .TopRightTopLeft {
            grid-area: TopRightTopLeft;
/*            border-width: 0px 1px 1px 0px; */
        }

        .TopRightTopRight {
            grid-area: TopRightTopRight;
            border-top-right-radius: 36px;
/*            border-width: 0px 0px 1px 1px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .TopRightBottomLeft {
            grid-area: TopRightBottomLeft;
/*            border-width: 1px 1px 0px 0px; */
 */
        }

        .TopRightBottomRight {
            grid-area: TopRightBottomRight;
/*            border-width: 1px 0px 0px 1px; */
        }



        .BottomLeft {
            display: grid;
            grid-area: BottomLeft;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 1px 1px;;
            grid-template-areas: "BottomLeftTopLeft BottomLeftTopRight""BottomLeftBottomLeft BottomLeftBottomRight";
            border-bottom-left-radius: 36px;
        }

        .BottomLeftTopLeft {
            grid-area: BottomLeftTopLeft;
/*            border-width: 0px 1px 1px 0px; */

        }

        .BottomLeftTopRight {
            grid-area: BottomLeftTopRight;
/*            border-width: 0px 0px 1px 1px; */

        }

        .BottomLeftBottomLeft {
            grid-area: BottomLeftBottomLeft;
            border-bottom-left-radius: 36px;
/*            border-width: 1px 1px 0px 0px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .BottomLeftBottomRight {
            grid-area: BottomLeftBottomRight;
/*            border-width: 1px 0px 0px 1px; */
        }



        .BottomRight {
            display: grid;
            grid-area: BottomRight;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            border-bottom-right-radius: 36px;
/**/            grid-gap: 1px 1px;;
            grid-template-areas: "BottomRightTopLeft BottomRightTopRight""BottomRightBottomLeft BottomRightBottomRight";
        }

        .BottomRightTopLeft {
            grid-area: BottomRightTopLeft;
/*            border-width: 0px 1px 1px 0px; */

        }

        .BottomRightTopRight {
            grid-area: BottomRightTopRight;
/*            border-width: 0px 0px 1px 1px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .BottomRightBottomLeft {
            grid-area: BottomRightBottomLeft;
/*            border-width: 1px 1px 0px 0px; */
        }

        .BottomRightBottomRight {
            grid-area: BottomRightBottomRight;
            border-bottom-right-radius: 36px;
/*            border-width: 1px 0px 0px 1px; */
        }
    </style>

    <script>
        window.currentlyHighlighted = [];

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Add Highlight FX for Representation-β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function addHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted.push(classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.add('highlighted');
            }
        }

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Remove Highlight FX for Representation -β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function removeHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlighted');
                //document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightOff');
            }
        }


        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Add Highlight FX for Button -β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function addCellHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted.push(classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightCell');
            }
        }

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Remove Highlight FX for Button-β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function removeCellHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlightCell');
                //document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightOff');
            }
        }


        function uniq(a) {
            var prims = {
                    "boolean": {},
                    "number": {},
                    "string": {}
                },
                objs = [];

            return a.filter(function(item) {
                var type = typeof item;
                if (type in prims)
                    return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
                else
                    return objs.indexOf(item) >= 0 ? false : objs.push(item);
            });
        }

        function performAction() {
            console.log(uniq(window.currentlyHighlighted));
            var trigger = '';
            if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'maximize';
            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('TopRight') !== -1) {
                trigger = 'tophalf';
            } else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'bottomhalf';
            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
                trigger = 'lefthalf';
            } else if (window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'righthalf';
            } else if (window.currentlyHighlighted.indexOf('TopRight') !== -1) {
                trigger = 'topright';

            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1) {
                trigger = 'topleft';

            } else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
                trigger = 'bottomleft';

            } else if (window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'bottomright';

            }

            console.log('trigger', trigger);
            window.BTT.callHandler('trigger_named', {
                trigger_name: trigger,
                closeFloatingHTMLMenu: 1
            })
        }
    </script>
</head>
<body>
    <div class="grid-container" onclick="performAction()">
        <div class="TopLeft"                         onmouseover="addHighlight(['TopLeft']);" onmouseout="removeHighlight(['TopLeft']);">
            <div class="area-overlap TopLeftTopLeft cell" onmouseover="addHighlight(['TopLeftTopLeft']); addCellHighlight(['TopLeftTopLeft'])" onmouseout="removeHighlight(['TopLeftTopLeft']); removeCellHighlight(['TopLeftTopLeft'])"></div>
            <div class="TopLeftBottomLeft cell"           onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
            <div class="TopLeftTopRight cell"             onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight(['TopLeftTopRight', 'TopRightTopLeft']);" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])"></div>
            <div class="TopLeftBottomRight cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
        </div>

        <div class="TopRight"                        onmouseover="addHighlight(['TopRight'])" onmouseout="removeHighlight(['TopRight'])">
            <div class="area-overlap TopRightTopLeft cell"onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight(['TopLeftTopRight', 'TopRightTopLeft'])"></div>
            <div class="TopRightTopRight cell"            onmouseover="addHighlight(['TopRightTopRight']); addCellHighlight(['TopRightTopRight'])" onmouseout="removeHighlight(['TopRightTopRight']); removeCellHighlight(['TopRightTopRight'])"></div>
            <div class="TopRightBottomLeft cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
            <div class="TopRightBottomRight cell"         onmouseover="addHighlight(['TopRight', 'BottomRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['TopRight', 'BottomRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
        </div>

        <div class="BottomLeft"                      onmouseover="addHighlight(['BottomLeft'])" onmouseout="removeHighlight(['BottomLeft'])">
            <div class="area-overlap BottomLeftTopLeft cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
            <div class="BottomLeftTopRight cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
            <div class="BottomLeftBottomLeft cell"        onmouseover="addHighlight(['BottomLeftBottomLeft']); addCellHighlight(['BottomLeftBottomLeft'])" onmouseout="removeHighlight(['BottomLeftBottomLeft']); removeCellHighlight(['BottomLeftBottomLeft'])"></div>
            <div class="BottomLeftBottomRight cell"       onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
        </div>

        <div class="BottomRight"                      onmouseover="addHighlight(['BottomRight'])" onmouseout="removeHighlight(['BottomRight'])">
            <div class="area-overlap BottomRightTopLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
            <div class="BottomRightTopRight cell"          onmouseover="addHighlight(['BottomRight', 'TopRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['BottomRight', 'TopRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
            <div class="BottomRightBottomLeft cell"        onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
            <div class="BottomRightBottomRight cell"       onmouseover="addHighlight(['BottomRightBottomRight']); addCellHighlight(['BottomRightBottomRight'])" onmouseout="removeHighlight(['BottomRightBottomRight']); removeCellHighlight(['BottomRightBottomRight'])"></div>
        </div>
    </div>
</body>
</html>

With Crude Monitor Switching (help please)
<!--
VISUAL WINDOW SNAPPING by panda modified by Jerosh.
Forum link: https://community.folivora.ai/t/visual-window-snapping/2863

This one was refined by GoldenChaos, then refined further by me, yyuuiko!
-->

<html>
<head>
    <style>
      .main-container { /* MAIN WRAPPER */
        margin: 40px;
        left: calc(50% - 17.3em);
        position: fixed;
        overflow: visible;
        /* margin-left:; */
      }

      .grid-container { /* MAIN GRID */
        display: grid;
        height: 150px;
        width: 150px;
        /* margin: 40px; */
/**/        padding: 0px;
        background-color: rgba(255,255,255,0.5);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 38px;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 0px 0px;
        grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
        box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
        overflow: hidden;
/**/        border: 1.5px solid rgba(255,255,255,0.7);

        -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
      }

/* β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’ Desktop Switchers β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’ */
        .monitor {
          /* height: 50px;
          width: 50px;
          margin-top: 50px;
          z-index: 1;
          position: relative;
          overflow: hidden;

          border-radius: 38px;
          box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.2) 0 5px 10px;
          border: 1.5px solid rgba(255,255,255,0.7);
          background-color: rgba(255,255,255,0.1);
          -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(50%);
          -webkit-background-clip: border-box;
          background-clip: border-box; */

          display: grid;
          height: 150px;
          width: 150px;
          transform: scale(.4,.4);
          /* margin: 40px; */
  /**/        padding: 0px;
          background-color: rgba(255,255,255,0.5);
          -webkit-backdrop-filter: blur(20px);
          border-radius: 38px;
          -webkit-background-clip: padding-box;
          background-clip: padding-box;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          grid-gap: 0px 0px;
          grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
          box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
          overflow: hidden;
  /**/        border: 1.5px solid rgba(255,255,255,0.7);

          -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
          transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        }

        .monitor-left {
          float: left;
          margin-right: -30px;
        }

        .monitor-right{
          float: right;
          margin-left: -30px;
        }

        /* -- animations -- */

        .monitor-left:hover, .monitor-right:hover { /* Show the Left Grid */
          transform: scale(1,1);
          border-radius: 30%;

          -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
          transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        }

        .monitor-left:hover + .grid-container, .monitor-right:hover + .grid-container  { /* LEFT and RIGHT's effect on the main grid */
          transform: scale(.4,.4);
          /* opacity: 0; */

          -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
          transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        }

/* β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’ CELL HIGHLIGHTS β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’ */
        .highlighted { /* REPRESENTATION Style */
          -webkit-backdrop-filter: brightness(100%) saturate(180%);
          background-color: rgba(255,255,255,.45);
          -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
          transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        }

        .highlightCell { /* BUTTON Style */
          /* -webkit-backdrop-filter: brightness(120%); */
          background-color: rgba(255,255,255,.4);
          -webkit-backdrop-filter: brightness(100%) saturate(200%);
          -webkit-transition: -webkit-backdrop-filter 600ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: -webkit-backdrop-filter 600ms cubic-bezier(0.19, 1, 0.72, 1);

          -webkit-transition: background-color 300ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: background-color 300ms cubic-bezier(0.19, 1, 0.72, 1);
        }

/* β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’ FADE (Representation) β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’ */

        .cell {
/**/            /* border: solid rgba(255,255,255,0); */
                /* background-color: rgba(0,0,0,.4); */
                -webkit-backdrop-filter: saturate(180%) brightness(50%);
                -webkit-background-clip: padding-box;
                background-clip: padding-box;
                mix-blend-mode: multiply;
        }

        .TopLeft {
            display: grid;
            grid-area: TopLeft;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 1px 1px;
            grid-template-areas: "TopLeftTopLeft TopLeftTopRight""TopLeftBottomLeft TopLeftBottomRight";
            border-top-left-radius: 36px;
          }

        .TopLeftTopLeft {
            grid-area: TopLeftTopLeft;
            border-top-left-radius: 36px;
/*            border-width: 0px 1px 1px 0px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .TopLeftBottomLeft {
            grid-area: TopLeftBottomLeft;
/*            border-width: 1px 1px 0px 0px; */
        }

        .TopLeftTopRight {
            grid-area: TopLeftTopRight;
/*            border-width: 0px 0px 1px 1px; */
        }

        .TopLeftBottomRight {
            grid-area: TopLeftBottomRight;
/*            border-width: 1px 0px 0px 1px; */
        }



        .TopRight {
            display: grid;
            grid-area: TopRight;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 1px 1px;;
            grid-template-areas: "TopRightTopLeft TopRightTopRight""TopRightBottomLeft TopRightBottomRight";
            border-top-right-radius: 36px;
        }

        .TopRightTopLeft {
            grid-area: TopRightTopLeft;
/*            border-width: 0px 1px 1px 0px; */
        }

        .TopRightTopRight {
            grid-area: TopRightTopRight;
            border-top-right-radius: 36px;
/*            border-width: 0px 0px 1px 1px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .TopRightBottomLeft {
            grid-area: TopRightBottomLeft;
/*            border-width: 1px 1px 0px 0px; */
 */
        }

        .TopRightBottomRight {
            grid-area: TopRightBottomRight;
/*            border-width: 1px 0px 0px 1px; */
        }



        .BottomLeft {
            display: grid;
            grid-area: BottomLeft;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 1px 1px;;
            grid-template-areas: "BottomLeftTopLeft BottomLeftTopRight""BottomLeftBottomLeft BottomLeftBottomRight";
            border-bottom-left-radius: 36px;
        }

        .BottomLeftTopLeft {
            grid-area: BottomLeftTopLeft;
/*            border-width: 0px 1px 1px 0px; */

        }

        .BottomLeftTopRight {
            grid-area: BottomLeftTopRight;
/*            border-width: 0px 0px 1px 1px; */

        }

        .BottomLeftBottomLeft {
            grid-area: BottomLeftBottomLeft;
            border-bottom-left-radius: 36px;
/*            border-width: 1px 1px 0px 0px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .BottomLeftBottomRight {
            grid-area: BottomLeftBottomRight;
/*            border-width: 1px 0px 0px 1px; */
        }



        .BottomRight {
            display: grid;
            grid-area: BottomRight;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            border-bottom-right-radius: 36px;
/**/            grid-gap: 1px 1px;;
            grid-template-areas: "BottomRightTopLeft BottomRightTopRight""BottomRightBottomLeft BottomRightBottomRight";
        }

        .BottomRightTopLeft {
            grid-area: BottomRightTopLeft;
/*            border-width: 0px 1px 1px 0px; */

        }

        .BottomRightTopRight {
            grid-area: BottomRightTopRight;
/*            border-width: 0px 0px 1px 1px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .BottomRightBottomLeft {
            grid-area: BottomRightBottomLeft;
/*            border-width: 1px 1px 0px 0px; */
        }

        .BottomRightBottomRight {
            grid-area: BottomRightBottomRight;
            border-bottom-right-radius: 36px;
/*            border-width: 1px 0px 0px 1px; */
        }
    </style>

    <script>
        window.currentlyHighlighted = [];

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Add Highlight FX for Representation-β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function addHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted.push(classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.add('highlighted');
            }
        }

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Remove Highlight FX for Representation -β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function removeHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlighted');
                //document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightOff');
            }
        }


        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Add Highlight FX for Button -β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function addCellHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted.push(classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightCell');
            }
        }

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Remove Highlight FX for Button-β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function removeCellHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlightCell');
                //document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightOff');
            }
        }


        function uniq(a) {
            var prims = {
                    "boolean": {},
                    "number": {},
                    "string": {}
                },
                objs = [];

            return a.filter(function(item) {
                var type = typeof item;
                if (type in prims)
                    return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
                else
                    return objs.indexOf(item) >= 0 ? false : objs.push(item);
            });
        }

        function performAction() {
            console.log(uniq(window.currentlyHighlighted));
            var trigger = '';
            if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'maximize';
            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('TopRight') !== -1) {
                trigger = 'tophalf';
            } else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'bottomhalf';
            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
                trigger = 'lefthalf';
            } else if (window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'righthalf';
            } else if (window.currentlyHighlighted.indexOf('TopRight') !== -1) {
                trigger = 'topright';

            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1) {
                trigger = 'topleft';

            } else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
                trigger = 'bottomleft';

            } else if (window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'bottomright';

            }

            console.log('trigger', trigger);
            window.BTT.callHandler('trigger_named', {
                trigger_name: trigger,
                closeFloatingHTMLMenu: 1
            })
        }
    </script>
</head>
<body>
  <div class="main-container">

    <!-- <div class="monitor monitor-right">
      <p style="text-align:center; color: rgba(255,255,255,0.8);"> -> </p>
    </div> -->

    <!-- <div class="monitor monitor-left">
      <p style="text-align:center; color: rgba(255,255,255,0.8);"> <- </p>
    </div> -->

    <div class="monitor monitor-left" onclick="performAction()">
      <div class="TopLeft"                         onmouseover="addHighlight(['TopLeft']);" onmouseout="removeHighlight(['TopLeft']);">
        <div class="area-overlap TopLeftTopLeft cell" onmouseover="addHighlight(['TopLeftTopLeft']); addCellHighlight(['TopLeftTopLeft'])" onmouseout="removeHighlight(['TopLeftTopLeft']); removeCellHighlight(['TopLeftTopLeft'])"></div>
        <div class="TopLeftBottomLeft cell"           onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
        <div class="TopLeftTopRight cell"             onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight(['TopLeftTopRight', 'TopRightTopLeft']);" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])"></div>
        <div class="TopLeftBottomRight cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
      </div>

      <div class="TopRight"                        onmouseover="addHighlight(['TopRight'])" onmouseout="removeHighlight(['TopRight'])">
        <div class="area-overlap TopRightTopLeft cell"onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight(['TopLeftTopRight', 'TopRightTopLeft'])"></div>
        <div class="TopRightTopRight cell"            onmouseover="addHighlight(['TopRightTopRight']); addCellHighlight(['TopRightTopRight'])" onmouseout="removeHighlight(['TopRightTopRight']); removeCellHighlight(['TopRightTopRight'])"></div>
        <div class="TopRightBottomLeft cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
        <div class="TopRightBottomRight cell"         onmouseover="addHighlight(['TopRight', 'BottomRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['TopRight', 'BottomRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
      </div>

      <div class="BottomLeft"                      onmouseover="addHighlight(['BottomLeft'])" onmouseout="removeHighlight(['BottomLeft'])">
        <div class="area-overlap BottomLeftTopLeft cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
        <div class="BottomLeftTopRight cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
        <div class="BottomLeftBottomLeft cell"        onmouseover="addHighlight(['BottomLeftBottomLeft']); addCellHighlight(['BottomLeftBottomLeft'])" onmouseout="removeHighlight(['BottomLeftBottomLeft']); removeCellHighlight(['BottomLeftBottomLeft'])"></div>
        <div class="BottomLeftBottomRight cell"       onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
      </div>

      <div class="BottomRight"                      onmouseover="addHighlight(['BottomRight'])" onmouseout="removeHighlight(['BottomRight'])">
        <div class="area-overlap BottomRightTopLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
        <div class="BottomRightTopRight cell"          onmouseover="addHighlight(['BottomRight', 'TopRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['BottomRight', 'TopRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
        <div class="BottomRightBottomLeft cell"        onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
        <div class="BottomRightBottomRight cell"       onmouseover="addHighlight(['BottomRightBottomRight']); addCellHighlight(['BottomRightBottomRight'])" onmouseout="removeHighlight(['BottomRightBottomRight']); removeCellHighlight(['BottomRightBottomRight'])"></div>
      </div>
    </div>

    <div class="monitor monitor-right" onclick="performAction()">
      <div class="TopLeft"                         onmouseover="addHighlight(['TopLeft']);" onmouseout="removeHighlight(['TopLeft']);">
        <div class="area-overlap TopLeftTopLeft cell" onmouseover="addHighlight(['TopLeftTopLeft']); addCellHighlight(['TopLeftTopLeft'])" onmouseout="removeHighlight(['TopLeftTopLeft']); removeCellHighlight(['TopLeftTopLeft'])"></div>
        <div class="TopLeftBottomLeft cell"           onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
        <div class="TopLeftTopRight cell"             onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight(['TopLeftTopRight', 'TopRightTopLeft']);" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])"></div>
        <div class="TopLeftBottomRight cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
      </div>

      <div class="TopRight"                        onmouseover="addHighlight(['TopRight'])" onmouseout="removeHighlight(['TopRight'])">
        <div class="area-overlap TopRightTopLeft cell"onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight(['TopLeftTopRight', 'TopRightTopLeft'])"></div>
        <div class="TopRightTopRight cell"            onmouseover="addHighlight(['TopRightTopRight']); addCellHighlight(['TopRightTopRight'])" onmouseout="removeHighlight(['TopRightTopRight']); removeCellHighlight(['TopRightTopRight'])"></div>
        <div class="TopRightBottomLeft cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
        <div class="TopRightBottomRight cell"         onmouseover="addHighlight(['TopRight', 'BottomRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['TopRight', 'BottomRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
      </div>

      <div class="BottomLeft"                      onmouseover="addHighlight(['BottomLeft'])" onmouseout="removeHighlight(['BottomLeft'])">
        <div class="area-overlap BottomLeftTopLeft cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
        <div class="BottomLeftTopRight cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
        <div class="BottomLeftBottomLeft cell"        onmouseover="addHighlight(['BottomLeftBottomLeft']); addCellHighlight(['BottomLeftBottomLeft'])" onmouseout="removeHighlight(['BottomLeftBottomLeft']); removeCellHighlight(['BottomLeftBottomLeft'])"></div>
        <div class="BottomLeftBottomRight cell"       onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
      </div>

      <div class="BottomRight"                      onmouseover="addHighlight(['BottomRight'])" onmouseout="removeHighlight(['BottomRight'])">
        <div class="area-overlap BottomRightTopLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
        <div class="BottomRightTopRight cell"          onmouseover="addHighlight(['BottomRight', 'TopRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['BottomRight', 'TopRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
        <div class="BottomRightBottomLeft cell"        onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
        <div class="BottomRightBottomRight cell"       onmouseover="addHighlight(['BottomRightBottomRight']); addCellHighlight(['BottomRightBottomRight'])" onmouseout="removeHighlight(['BottomRightBottomRight']); removeCellHighlight(['BottomRightBottomRight'])"></div>
      </div>
    </div>

    <div class="grid-container" onclick="performAction()">
      <div class="TopLeft"                         onmouseover="addHighlight(['TopLeft']);" onmouseout="removeHighlight(['TopLeft']);">
        <div class="area-overlap TopLeftTopLeft cell" onmouseover="addHighlight(['TopLeftTopLeft']); addCellHighlight(['TopLeftTopLeft'])" onmouseout="removeHighlight(['TopLeftTopLeft']); removeCellHighlight(['TopLeftTopLeft'])"></div>
        <div class="TopLeftBottomLeft cell"           onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
        <div class="TopLeftTopRight cell"             onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight(['TopLeftTopRight', 'TopRightTopLeft']);" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])"></div>
        <div class="TopLeftBottomRight cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
      </div>

      <div class="TopRight"                        onmouseover="addHighlight(['TopRight'])" onmouseout="removeHighlight(['TopRight'])">
        <div class="area-overlap TopRightTopLeft cell"onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight(['TopLeftTopRight', 'TopRightTopLeft'])"></div>
        <div class="TopRightTopRight cell"            onmouseover="addHighlight(['TopRightTopRight']); addCellHighlight(['TopRightTopRight'])" onmouseout="removeHighlight(['TopRightTopRight']); removeCellHighlight(['TopRightTopRight'])"></div>
        <div class="TopRightBottomLeft cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
        <div class="TopRightBottomRight cell"         onmouseover="addHighlight(['TopRight', 'BottomRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['TopRight', 'BottomRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
      </div>

      <div class="BottomLeft"                      onmouseover="addHighlight(['BottomLeft'])" onmouseout="removeHighlight(['BottomLeft'])">
        <div class="area-overlap BottomLeftTopLeft cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
        <div class="BottomLeftTopRight cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
        <div class="BottomLeftBottomLeft cell"        onmouseover="addHighlight(['BottomLeftBottomLeft']); addCellHighlight(['BottomLeftBottomLeft'])" onmouseout="removeHighlight(['BottomLeftBottomLeft']); removeCellHighlight(['BottomLeftBottomLeft'])"></div>
        <div class="BottomLeftBottomRight cell"       onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
      </div>

      <div class="BottomRight"                      onmouseover="addHighlight(['BottomRight'])" onmouseout="removeHighlight(['BottomRight'])">
        <div class="area-overlap BottomRightTopLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
        <div class="BottomRightTopRight cell"          onmouseover="addHighlight(['BottomRight', 'TopRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['BottomRight', 'TopRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
        <div class="BottomRightBottomLeft cell"        onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
        <div class="BottomRightBottomRight cell"       onmouseover="addHighlight(['BottomRightBottomRight']); addCellHighlight(['BottomRightBottomRight'])" onmouseout="removeHighlight(['BottomRightBottomRight']); removeCellHighlight(['BottomRightBottomRight'])"></div>
      </div>
    </div>

  </div>
</body>
</html>

#32

Okay, I’m into what you’ve got there. I’m gonna take a crack at polishing this up, getting the border right, vibrancy, etc.


#33

Heyyyy I did it! This is much more representative of the system vibrancy, and works on all colors of backgrounds including solid black and solid white.

This does NOT include any animations. I stripped them out for now to get all the colors right. I'm pooped though, so I'll add the animations back tomorrow :slight_smile:

Great work getting all the cells working this way @yuuiko!

23%20PM 34%20PM 00%20PM

<!--
VISUAL WINDOW SNAPPING by the BetterTouchTool community.
Forum link: https://community.folivora.ai/t/visual-window-snapping/2863

Authors of this script:
- panda
- Jerosh
- GoldenChaos
- yyuuiko

Thanks for using it!
-->

<html>
<head>
    <style>
       .grid-container { /* The MAIN BACKGROUND of the pallete */
            display: grid;
            height: 150px;
            width: 150px;
            margin: 40px;
			padding: 1px;
			background: rgba(179, 178, 177, .5);
			-webkit-backdrop-filter: blur(48px) saturate(200%);
            border-radius: 12.5%;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            grid-gap: 0px 0px;
            grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
            box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
            overflow: hidden;
        }

        .highlighted { /* -------------------------------FADE (Representation)------------------------------------ */
			opacity: 0.7;
            -webkit-backdrop-filter: saturate(100%);
        }

        .highlightCell {
			opacity: 0.6;
            -webkit-backdrop-filter: saturate(100%);
        }

        .cell {
            background: rgba(49, 48, 44, .5);
            -webkit-backdrop-filter: saturate(100%);
            mix-blend-mode: multiply;
        }

        .TopLeft {
            display: grid;
            grid-area: TopLeft;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            grid-gap: 1px 1px;
            grid-template-areas: "TopLeftTopLeft TopLeftTopRight""TopLeftBottomLeft TopLeftBottomRight";
            border-top-left-radius: 25%;
          }

        .TopLeftTopLeft {
            grid-area: TopLeftTopLeft;
            border-top-left-radius: 50%;
        }

        .TopLeftBottomLeft {
            grid-area: TopLeftBottomLeft;
        }

        .TopLeftTopRight {
            grid-area: TopLeftTopRight;
        }

        .TopLeftBottomRight {
            grid-area: TopLeftBottomRight;
        }

        .TopRight {
            display: grid;
            grid-area: TopRight;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            grid-gap: 1px 1px;;
            grid-template-areas: "TopRightTopLeft TopRightTopRight""TopRightBottomLeft TopRightBottomRight";
            border-top-right-radius: 25%;
        }

        .TopRightTopLeft {
            grid-area: TopRightTopLeft;
        }

        .TopRightTopRight {
            grid-area: TopRightTopRight;
            border-top-right-radius: 50%;
        }

        .TopRightBottomLeft {
            grid-area: TopRightBottomLeft;
 */
        }

        .TopRightBottomRight {
            grid-area: TopRightBottomRight;
        }

        .BottomLeft {
            display: grid;
            grid-area: BottomLeft;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            grid-gap: 1px 1px;;
            grid-template-areas: "BottomLeftTopLeft BottomLeftTopRight""BottomLeftBottomLeft BottomLeftBottomRight";
            border-bottom-left-radius: 25%;
        }

        .BottomLeftTopLeft {
            grid-area: BottomLeftTopLeft;
        }

        .BottomLeftTopRight {
            grid-area: BottomLeftTopRight;

        }

        .BottomLeftBottomLeft {
            grid-area: BottomLeftBottomLeft;
            border-bottom-left-radius: 50%;
        }

        .BottomLeftBottomRight {
            grid-area: BottomLeftBottomRight;
        }

        .BottomRight {
            display: grid;
            grid-area: BottomRight;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            border-bottom-right-radius: 25%;
            grid-gap: 1px 1px;
            grid-template-areas: "BottomRightTopLeft BottomRightTopRight""BottomRightBottomLeft BottomRightBottomRight";
        }

        .BottomRightTopLeft {
            grid-area: BottomRightTopLeft;

        }

        .BottomRightTopRight {
            grid-area: BottomRightTopRight;
        }

        .BottomRightBottomLeft {
            grid-area: BottomRightBottomLeft;
        }

        .BottomRightBottomRight {
            grid-area: BottomRightBottomRight;
            border-bottom-right-radius: 50%;
        }
    </style>

    <script>
        window.currentlyHighlighted = [];

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Add Highlight FX for Representation-β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function addHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted.push(classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.add('highlighted');
            }
        }

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Remove Highlight FX for Representation -β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function removeHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlighted');
                //document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightOff');
            }
        }


        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Add Highlight FX for Button -β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function addCellHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted.push(classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightCell');
            }
        }

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Remove Highlight FX for Button-β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function removeCellHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlightCell');
                //document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightOff');
            }
        }

        function uniq(a) {
            var prims = {
                    "boolean": {},
                    "number": {},
                    "string": {}
                },
                objs = [];

            return a.filter(function(item) {
                var type = typeof item;
                if (type in prims)
                    return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
                else
                    return objs.indexOf(item) >= 0 ? false : objs.push(item);
            });
        }

        function performAction() {
            console.log(uniq(window.currentlyHighlighted));
            var trigger = '';
            if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'maximize';
            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('TopRight') !== -1) {
                trigger = 'tophalf';
            } else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'bottomhalf';
            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
                trigger = 'lefthalf';
            } else if (window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'righthalf';
            } else if (window.currentlyHighlighted.indexOf('TopRight') !== -1) {
                trigger = 'topright';

            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1) {
                trigger = 'topleft';

            } else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
                trigger = 'bottomleft';

            } else if (window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'bottomright';

            }

            console.log('trigger', trigger);
            window.BTT.callHandler('trigger_named', {
                trigger_name: trigger,
                closeFloatingHTMLMenu: 1
            })
        }
    </script>
</head>
<body>
    <div class="grid-container" onclick="performAction()">
        <div class="TopLeft"                         onmouseover="addHighlight(['TopLeft']);" onmouseout="removeHighlight(['TopLeft']);">
            <div class="area-overlap TopLeftTopLeft cell" onmouseover="addHighlight(['TopLeftTopLeft']); addCellHighlight(['TopLeftTopLeft'])" onmouseout="removeHighlight(['TopLeftTopLeft']); removeCellHighlight(['TopLeftTopLeft'])"></div>
            <div class="TopLeftBottomLeft cell"           onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
            <div class="TopLeftTopRight cell"             onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight(['TopLeftTopRight', 'TopRightTopLeft']);" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])"></div>
            <div class="TopLeftBottomRight cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
        </div>

        <div class="TopRight"                        onmouseover="addHighlight(['TopRight'])" onmouseout="removeHighlight(['TopRight'])">
            <div class="area-overlap TopRightTopLeft cell"onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight(['TopLeftTopRight', 'TopRightTopLeft'])"></div>
            <div class="TopRightTopRight cell"            onmouseover="addHighlight(['TopRightTopRight']); addCellHighlight(['TopRightTopRight'])" onmouseout="removeHighlight(['TopRightTopRight']); removeCellHighlight(['TopRightTopRight'])"></div>
            <div class="TopRightBottomLeft cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
            <div class="TopRightBottomRight cell"         onmouseover="addHighlight(['TopRight', 'BottomRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['TopRight', 'BottomRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
        </div>

        <div class="BottomLeft"                      onmouseover="addHighlight(['BottomLeft'])" onmouseout="removeHighlight(['BottomLeft'])">
            <div class="area-overlap BottomLeftTopLeft cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
            <div class="BottomLeftTopRight cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
            <div class="BottomLeftBottomLeft cell"        onmouseover="addHighlight(['BottomLeftBottomLeft']); addCellHighlight(['BottomLeftBottomLeft'])" onmouseout="removeHighlight(['BottomLeftBottomLeft']); removeCellHighlight(['BottomLeftBottomLeft'])"></div>
            <div class="BottomLeftBottomRight cell"       onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
        </div>

        <div class="BottomRight"                      onmouseover="addHighlight(['BottomRight'])" onmouseout="removeHighlight(['BottomRight'])">
            <div class="area-overlap BottomRightTopLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
            <div class="BottomRightTopRight cell"          onmouseover="addHighlight(['BottomRight', 'TopRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['BottomRight', 'TopRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
            <div class="BottomRightBottomLeft cell"        onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
            <div class="BottomRightBottomRight cell"       onmouseover="addHighlight(['BottomRightBottomRight']); addCellHighlight(['BottomRightBottomRight'])" onmouseout="removeHighlight(['BottomRightBottomRight']); removeCellHighlight(['BottomRightBottomRight'])"></div>
        </div>
    </div>
</body>
</html>

#34

@GoldenChaos, @panda, @peripatew, @jerosh,

Visual Window Snapping + Monitors

UI Now Working!!

I've just done the chore of duplicating and differentiating each of the three palettes, making styles for each, copying the seperate styles into each palette and re-writing the Javascript two times over for each palette. There's basically three window snapping presets in here now, but the UI (which can be seen here, i wasn't bothered to film it again) is now working!

The functionality on BTT's side still isn't configured, but the HTML and JS should correctly call the right trigger, as i'm seeing the correct names in safari's console.

I've added an 'L' or an 'R' to the class names / BTT triggers to be created to indicate monitor snapping.

RLeftHalf: Snap to the left half of the monitor to the right
LeftHalf: Snap to the left half of this monitor
LLeftHalf: Snap to the left half of the monitor to the left

Most of the code is the same except with added 'L's and 'R's. (it still took ages to get all of them)


So, the messy UI has been fixed and it's returning the right trigger names, now:

  • Need to make the actual named triggers in BTT, right now only the original 'this window' ones are there.
  • Need to touchup the aesthetics a bit. The main functionality is there but the borders and such need to be refined. Stretch Goal: transform the side palletes into circles with icons when shrunk.
  • Need to make an applescript that senses if any external displays are active, then shows the correct snapping HTML. (either the one with the desktop snapping or just the normal small one.) This will be called by the user, it then displays the right one based on the current situation.

I'm not sure how to make those window snapping triggers so it would be great if someone made a bunch for both L/R monitor switching!


Here is the code so far if anyone wants to have a look:

Window Snapping + Monitor Snapping
<!--
VISUAL WINDOW SNAPPING by the BetterTouchTool community.
Forum link: https://community.folivora.ai/t/visual-window-snapping/2863

Authors of this script:
- panda: The Core Original Workings
- Jerosh: Highlighting Improvements
- GoldenChaos: Colouring and Aesthetic Improvements
- yyuuiko: Multi-Desktop Snapping and Code Optimisation

Thanks for using it!
-->

<html>
<head>
    <style>



      html { /* background image for aesthetic testing */
        /* background-image: url('red.png');
        background-color: #def;
        background-repeat: no-repeat;
        background-size: cover; */

      /* Image Centering */
        background-position: 50% 50%;   /* Background Position */
        width: 100vw;                   /* Body Width (fill viewport width) */
        height: 100vh;                  /* Body Height (fill viewport height) */
      }

      .main-container { /* MAIN WRAPPER */
        margin: 40px;
        left: calc(50% - 17.3em);
        position: fixed;
        overflow: visible;
        /* margin-left:; */
      }

      .grid-container { /* MAIN GRID */
        /* display: grid;
        height: 150px;
        width: 150px;
        padding: 0px;
        background-color: rgba(255,255,255,0.5);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 38px;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 0px 0px;
        grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
        box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
        overflow: hidden;
        border: 1.5px solid rgba(255,255,255,0.7); */

        display: grid;
        height: 150px;
        width: 150px;
        margin-left: 40px;
        margin-right: 40px;
        padding: 1px;
        background: rgba(179, 178, 177, .5);
        -webkit-backdrop-filter: blur(48px) saturate(200%);
        border-radius: 38px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 0px 0px;
        grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
        box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
        overflow: hidden;


        -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
      }

/* β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’ Monitor Switchers β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’ */
        .monitor {
          /* display: grid;
          height: 150px;
          width: 150px;
          transform: scale(.4,.4);
          padding: 0px;
          background-color: rgba(255,255,255,0.5);
          -webkit-backdrop-filter: blur(20px);
          border-radius: 38px;
          -webkit-background-clip: padding-box;
          background-clip: padding-box;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          grid-gap: 0px 0px;
          grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
          box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
          overflow: hidden;
          border: 1.5px solid rgba(255,255,255,0.7); */

          transform: scale(.4,.4);

          display: grid;
          height: 150px;
          width: 150px;
          margin-left: 40px;
          margin-right: 40px;
          padding: 1px;
          background: rgba(179, 178, 177, .5);
          -webkit-backdrop-filter: blur(48px) saturate(200%);
          border-radius: 38px;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          grid-gap: 0px 0px;
          grid-template-areas: "TopLeft TopRight""BottomLeft BottomRight";
          box-shadow: rgba(0,0,0,.5) 0 0 0 1px, rgba(0,0,0,.5) 0 12px 50px;
          overflow: hidden;

          -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
          transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        }

        .monitor-left {
          float: left;
          margin-right: -30px;
        }

        .monitor-right{
          float: right;
          margin-left: -30px;
        }

/* β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’ EXPAND MONITOR PALLETES β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’ */

        .expandPallete {
          transform: scale(1,1);
          border-radius: 30%;

          -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
          transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        }

        .shrinkPallete {
          transform: scale(.4,.4);

          -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
          transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        }

/* β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’ CELL HIGHLIGHTS β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’ */
        .highlighted { /* REPRESENTATION Style */
          -webkit-backdrop-filter: brightness(100%) saturate(180%);
          background-color: rgba(255,255,255,.45);

          /* opacity: 0.7;
          -webkit-backdrop-filter: saturate(100%) */

          -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
          transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1); /* easeOutExpo */
        }

        .highlightCell { /* BUTTON Style */
          /* background-color: rgba(255,0,0,1); */
          /* -webkit-backdrop-filter: brightness(100%) saturate(100%); */

          opacity: 0.7;
          -webkit-backdrop-filter: saturate(100%);

          -webkit-transition: -webkit-backdrop-filter 600ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: -webkit-backdrop-filter 600ms cubic-bezier(0.19, 1, 0.72, 1);
        }

/* β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’ FADE (Representation) β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’β–’ */

        .cell {
/**/        /* border: solid rgba(255,255,255,0); */
            /* background-color: rgba(0,0,0,.4); */
            /* -webkit-backdrop-filter: saturate(180%) brightness(50%);
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            mix-blend-mode: multiply; */

            background: rgba(49, 48, 44, .5);
            -webkit-backdrop-filter: saturate(100%);
            mix-blend-mode: multiply;
        }

/*------------------------------------------------------------------------------------------------------------------------*/
        .TopLeft {
            display: grid;
            grid-area: TopLeft;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 1px 1px;
            grid-template-areas: "TopLeftTopLeft TopLeftTopRight""TopLeftBottomLeft TopLeftBottomRight";
            border-top-left-radius: 36px;
          }

        .TopLeftTopLeft {
            grid-area: TopLeftTopLeft;
            border-top-left-radius: 36px;
/*            border-width: 0px 1px 1px 0px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .TopLeftBottomLeft {
            grid-area: TopLeftBottomLeft;
/*            border-width: 1px 1px 0px 0px; */
        }

        .TopLeftTopRight {
            grid-area: TopLeftTopRight;
/*            border-width: 0px 0px 1px 1px; */
        }

        .TopLeftBottomRight {
            grid-area: TopLeftBottomRight;
/*            border-width: 1px 0px 0px 1px; */
        }


/*------------------------------------------------------------------------------------------------------------------------*/
        .LTopLeft {
            display: grid;
            grid-area: TopLeft;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 1px 1px;
            grid-template-areas: "TopLeftTopLeft TopLeftTopRight""TopLeftBottomLeft TopLeftBottomRight";
            border-top-left-radius: 36px;
          }

        .LTopLeftTopLeft {
            grid-area: TopLeftTopLeft;
            border-top-left-radius: 36px;
/*            border-width: 0px 1px 1px 0px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .LTopLeftBottomLeft {
            grid-area: TopLeftBottomLeft;
/*            border-width: 1px 1px 0px 0px; */
        }

        .LTopLeftTopRight {
            grid-area: TopLeftTopRight;
/*            border-width: 0px 0px 1px 1px; */
        }

        .LTopLeftBottomRight {
            grid-area: TopLeftBottomRight;
/*            border-width: 1px 0px 0px 1px; */
        }

/*------------------------------------------------------------------------------------------------------------------------*/
        .RTopLeft {
            display: grid;
            grid-area: TopLeft;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 1px 1px;
            grid-template-areas: "TopLeftTopLeft TopLeftTopRight""TopLeftBottomLeft TopLeftBottomRight";
            border-top-left-radius: 36px;
          }

        .RTopLeftTopLeft {
            grid-area: TopLeftTopLeft;
            border-top-left-radius: 36px;
/*            border-width: 0px 1px 1px 0px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .RTopLeftBottomLeft {
            grid-area: TopLeftBottomLeft;
/*            border-width: 1px 1px 0px 0px; */
        }

        .RTopLeftTopRight {
            grid-area: TopLeftTopRight;
/*            border-width: 0px 0px 1px 1px; */
        }

        .RTopLeftBottomRight {
            grid-area: TopLeftBottomRight;
/*            border-width: 1px 0px 0px 1px; */
        }


/*------------------------------------------------------------------------------------------------------------------------*/
        .TopRight {
            display: grid;
            grid-area: TopRight;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 1px 1px;;
            grid-template-areas: "TopRightTopLeft TopRightTopRight""TopRightBottomLeft TopRightBottomRight";
            border-top-right-radius: 36px;
        }

        .TopRightTopLeft {
            grid-area: TopRightTopLeft;
/*            border-width: 0px 1px 1px 0px; */
        }

        .TopRightTopRight {
            grid-area: TopRightTopRight;
            border-top-right-radius: 36px;
/*            border-width: 0px 0px 1px 1px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .TopRightBottomLeft {
            grid-area: TopRightBottomLeft;
/*            border-width: 1px 1px 0px 0px; */
        }

        .TopRightBottomRight {
            grid-area: TopRightBottomRight;
/*            border-width: 1px 0px 0px 1px; */
        }


/*------------------------------------------------------------------------------------------------------------------------*/
        .LTopRight {
            display: grid;
            grid-area: TopRight;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 1px 1px;;
            grid-template-areas: "TopRightTopLeft TopRightTopRight""TopRightBottomLeft TopRightBottomRight";
            border-top-right-radius: 36px;
        }

        .LTopRightTopLeft {
            grid-area: TopRightTopLeft;
/*            border-width: 0px 1px 1px 0px; */
        }

        .LTopRightTopRight {
            grid-area: TopRightTopRight;
            border-top-right-radius: 36px;
/*            border-width: 0px 0px 1px 1px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .LTopRightBottomLeft {
            grid-area: TopRightBottomLeft;
/*            border-width: 1px 1px 0px 0px; */
        }

        .LTopRightBottomRight {
            grid-area: TopRightBottomRight;
/*            border-width: 1px 0px 0px 1px; */
        }


/*------------------------------------------------------------------------------------------------------------------------*/
        .RTopRight {
            display: grid;
            grid-area: TopRight;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 1px 1px;;
            grid-template-areas: "TopRightTopLeft TopRightTopRight""TopRightBottomLeft TopRightBottomRight";
            border-top-right-radius: 36px;
        }

        .RTopRightTopLeft {
            grid-area: TopRightTopLeft;
/*            border-width: 0px 1px 1px 0px; */
        }

        .RTopRightTopRight {
            grid-area: TopRightTopRight;
            border-top-right-radius: 36px;
/*            border-width: 0px 0px 1px 1px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .RTopRightBottomLeft {
            grid-area: TopRightBottomLeft;
/*            border-width: 1px 1px 0px 0px; */
        }

        .RTopRightBottomRight {
            grid-area: TopRightBottomRight;
/*            border-width: 1px 0px 0px 1px; */
        }


        /*------------------------------------------------------------------------------------------------------------------------*/
        .BottomLeft {
            display: grid;
            grid-area: BottomLeft;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 1px 1px;;
            grid-template-areas: "BottomLeftTopLeft BottomLeftTopRight""BottomLeftBottomLeft BottomLeftBottomRight";
            border-bottom-left-radius: 36px;
        }

        .BottomLeftTopLeft {
            grid-area: BottomLeftTopLeft;
/*            border-width: 0px 1px 1px 0px; */

        }

        .BottomLeftTopRight {
            grid-area: BottomLeftTopRight;
/*            border-width: 0px 0px 1px 1px; */

        }

        .BottomLeftBottomLeft {
            grid-area: BottomLeftBottomLeft;
            border-bottom-left-radius: 36px;
/*            border-width: 1px 1px 0px 0px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .BottomLeftBottomRight {
            grid-area: BottomLeftBottomRight;
/*            border-width: 1px 0px 0px 1px; */
        }


        /*------------------------------------------------------------------------------------------------------------------------*/
        .LBottomLeft {
          display: grid;
          grid-area: BottomLeft;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          /**/            grid-gap: 1px 1px;;
          grid-template-areas: "BottomLeftTopLeft BottomLeftTopRight""BottomLeftBottomLeft BottomLeftBottomRight";
          border-bottom-left-radius: 36px;
        }

        .LBottomLeftTopLeft {
          grid-area: BottomLeftTopLeft;
          /*            border-width: 0px 1px 1px 0px; */

        }

        .LBottomLeftTopRight {
          grid-area: BottomLeftTopRight;
          /*            border-width: 0px 0px 1px 1px; */

        }

        .LBottomLeftBottomLeft {
          grid-area: BottomLeftBottomLeft;
          border-bottom-left-radius: 36px;
          /*            border-width: 1px 1px 0px 0px; */
          -webkit-background-clip: padding-box;
          background-clip: padding-box;
        }

        .LBottomLeftBottomRight {
          grid-area: BottomLeftBottomRight;
          /*            border-width: 1px 0px 0px 1px; */
        }


/*------------------------------------------------------------------------------------------------------------------------*/
        .RBottomLeft {
            display: grid;
            grid-area: BottomLeft;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
/**/            grid-gap: 1px 1px;;
            grid-template-areas: "BottomLeftTopLeft BottomLeftTopRight""BottomLeftBottomLeft BottomLeftBottomRight";
            border-bottom-left-radius: 36px;
        }

        .RBottomLeftTopLeft {
            grid-area: BottomLeftTopLeft;
/*            border-width: 0px 1px 1px 0px; */

        }

        .RBottomLeftTopRight {
            grid-area: BottomLeftTopRight;
/*            border-width: 0px 0px 1px 1px; */

        }

        .RBottomLeftBottomLeft {
            grid-area: BottomLeftBottomLeft;
            border-bottom-left-radius: 36px;
/*            border-width: 1px 1px 0px 0px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .RBottomLeftBottomRight {
            grid-area: BottomLeftBottomRight;
/*            border-width: 1px 0px 0px 1px; */
        }


        /*------------------------------------------------------------------------------------------------------------------------*/
        .BottomRight {
            display: grid;
            grid-area: BottomRight;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            border-bottom-right-radius: 36px;
/**/            grid-gap: 1px 1px;;
            grid-template-areas: "BottomRightTopLeft BottomRightTopRight""BottomRightBottomLeft BottomRightBottomRight";
        }

        .BottomRightTopLeft {
            grid-area: BottomRightTopLeft;
/*            border-width: 0px 1px 1px 0px; */

        }

        .BottomRightTopRight {
            grid-area: BottomRightTopRight;
/*            border-width: 0px 0px 1px 1px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .BottomRightBottomLeft {
            grid-area: BottomRightBottomLeft;
/*            border-width: 1px 1px 0px 0px; */
        }

        .BottomRightBottomRight {
            grid-area: BottomRightBottomRight;
            border-bottom-right-radius: 36px;
/*            border-width: 1px 0px 0px 1px; */
        }

        /*------------------------------------------------------------------------------------------------------------------------*/
        .LBottomRight {
            display: grid;
            grid-area: BottomRight;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            border-bottom-right-radius: 36px;
/**/            grid-gap: 1px 1px;;
            grid-template-areas: "BottomRightTopLeft BottomRightTopRight""BottomRightBottomLeft BottomRightBottomRight";
        }

        .LBottomRightTopLeft {
            grid-area: BottomRightTopLeft;
/*            border-width: 0px 1px 1px 0px; */

        }

        .LBottomRightTopRight {
            grid-area: BottomRightTopRight;
/*            border-width: 0px 0px 1px 1px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .LBottomRightBottomLeft {
            grid-area: BottomRightBottomLeft;
/*            border-width: 1px 1px 0px 0px; */
        }

        .LBottomRightBottomRight {
            grid-area: BottomRightBottomRight;
            border-bottom-right-radius: 36px;
/*            border-width: 1px 0px 0px 1px; */
        }

        /*------------------------------------------------------------------------------------------------------------------------*/
        .RBottomRight {
            display: grid;
            grid-area: BottomRight;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            border-bottom-right-radius: 36px;
/**/            grid-gap: 1px 1px;;
            grid-template-areas: "BottomRightTopLeft BottomRightTopRight""BottomRightBottomLeft BottomRightBottomRight";
        }

        .RBottomRightTopLeft {
            grid-area: BottomRightTopLeft;
/*            border-width: 0px 1px 1px 0px; */

        }

        .RBottomRightTopRight {
            grid-area: BottomRightTopRight;
/*            border-width: 0px 0px 1px 1px; */
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
        }

        .RBottomRightBottomLeft {
            grid-area: BottomRightBottomLeft;
/*            border-width: 1px 1px 0px 0px; */
        }

        .RBottomRightBottomRight {
            grid-area: BottomRightBottomRight;
            border-bottom-right-radius: 36px;
/*            border-width: 1px 0px 0px 1px; */
        }
    </style>

    <script>
        window.currentlyHighlighted = [];

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Add Highlight FX for Representation-β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function addHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted.push(classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.add('highlighted');
            }
        }

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Remove Highlight FX for Representation -β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function removeHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlighted');
            }
        }

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Add Highlight FX for Button -β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function addCellHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted.push(classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.add('highlightCell');
            }
        }

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Remove Highlight FX for Button-β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function removeCellHighlight(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.remove('highlightCell');
            }
        }


        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Add Expand for Monitor Palletes -β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function addExpand(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted.push(classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.add('expandPallete');
                document.getElementsByClassName('grid-container').item(0).classList.add('shrinkPallete');
            }
        }

        //β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ- Remove Expand for Monitor Palletes-β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ
        function removeExpand(classNames) {
            for (var i = 0; i < classNames.length; i++) {
                window.currentlyHighlighted = window.currentlyHighlighted.filter(e => e !== classNames[i]);
                document.getElementsByClassName(classNames[i]).item(0).classList.remove('expandPallete');
                document.getElementsByClassName('grid-container').item(0).classList.remove('shrinkPallete');
            }
        }

        function uniq(a) {
            var prims = {
                    "boolean": {},
                    "number": {},
                    "string": {}
                },
                objs = [];

            return a.filter(function(item) {
                var type = typeof item;
                if (type in prims)
                    return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true);
                else
                    return objs.indexOf(item) >= 0 ? false : objs.push(item);
            });
        }

        function performAction() {
            console.log(uniq(window.currentlyHighlighted));
            var trigger = '';
            if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'maximize';
            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('TopRight') !== -1) {
                trigger = 'tophalf';
            } else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'bottomhalf';
            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
                trigger = 'lefthalf';
            } else if (window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'righthalf';
            } else if (window.currentlyHighlighted.indexOf('TopRight') !== -1) {
                trigger = 'topright';

            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1) {
                trigger = 'topleft';

            } else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
                trigger = 'bottomleft';

            } else if (window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'bottomright';

            }

            console.log('trigger', trigger);
            window.BTT.callHandler('trigger_named', {
                trigger_name: trigger,
                closeFloatingHTMLMenu: 1
            })
        }

        function performLeftAction() {
            console.log(uniq(window.currentlyHighlighted));
            var trigger = '';
            if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'maximize';
            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('TopRight') !== -1) {
                trigger = 'tophalf';
            } else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'bottomhalf';
            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
                trigger = 'lefthalf';
            } else if (window.currentlyHighlighted.indexOf('TopRight') !== -1 &&
                window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'righthalf';
            } else if (window.currentlyHighlighted.indexOf('TopRight') !== -1) {
                trigger = 'topright';

            } else if (window.currentlyHighlighted.indexOf('TopLeft') !== -1) {
                trigger = 'topleft';

            } else if (window.currentlyHighlighted.indexOf('BottomLeft') !== -1) {
                trigger = 'bottomleft';

            } else if (window.currentlyHighlighted.indexOf('BottomRight') !== -1) {
                trigger = 'bottomright';

            }

            console.log('trigger', trigger);
            window.BTT.callHandler('trigger_named', {
                trigger_name: trigger,
                closeFloatingHTMLMenu: 1
            })
        }

        function performRightAction() {
            console.log(uniq(window.currentlyHighlighted));
            var trigger = '';
            if (window.currentlyHighlighted.indexOf('RTopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('RTopRight') !== -1 &&
                window.currentlyHighlighted.indexOf('RBottomLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('RBottomRight') !== -1) {
                trigger = 'Rmaximize';
            } else if (window.currentlyHighlighted.indexOf('RTopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('RTopRight') !== -1) {
                trigger = 'Rtophalf';
            } else if (window.currentlyHighlighted.indexOf('RBottomLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('RBottomRight') !== -1) {
                trigger = 'Rbottomhalf';
            } else if (window.currentlyHighlighted.indexOf('RTopLeft') !== -1 &&
                window.currentlyHighlighted.indexOf('RBottomLeft') !== -1) {
                trigger = 'Rlefthalf';
            } else if (window.currentlyHighlighted.indexOf('RTopRight') !== -1 &&
                window.currentlyHighlighted.indexOf('RBottomRight') !== -1) {
                trigger = 'Rrighthalf';
            } else if (window.currentlyHighlighted.indexOf('RTopRight') !== -1) {
                trigger = 'Rtopright';

            } else if (window.currentlyHighlighted.indexOf('RTopLeft') !== -1) {
                trigger = 'Rtopleft';

            } else if (window.currentlyHighlighted.indexOf('RBottomLeft') !== -1) {
                trigger = 'Rbottomleft';

            } else if (window.currentlyHighlighted.indexOf('RBottomRight') !== -1) {
                trigger = 'Rbottomright';

            }

            console.log('trigger', trigger);
            window.BTT.callHandler('trigger_named', {
                trigger_name: trigger,
                closeFloatingHTMLMenu: 1
            })
        }
    </script>
</head>
<body>
  <div class="main-container">

<!-- Left Monitor Pallete -->
    <div class="monitor monitor-left" onclick="performLeftAction()" onmouseover="addExpand(['monitor-left']);" onmouseout="removeExpand(['monitor-left']);">
      <div class="LTopLeft"                         onmouseover="addHighlight(['LTopLeft']);" onmouseout="removeHighlight(['LTopLeft']);">
        <div class="LTopLeftTopLeft area-overlap cell" onmouseover="addHighlight(['LTopLeftTopLeft']); addCellHighlight(['LTopLeftTopLeft'])" onmouseout="removeHighlight(['LTopLeftTopLeft']); removeCellHighlight(['LTopLeftTopLeft'])"></div>
        <div class="LTopLeftBottomLeft cell"           onmouseover="addHighlight(['LBottomLeft', 'LTopLeft']); addCellHighlight(['LTopLeftBottomLeft', 'LBottomLeftTopLeft'])" onmouseout="removeHighlight(['LBottomLeft', 'LTopLeft']); removeCellHighlight([ 'LTopLeftBottomLeft', 'LBottomLeftTopLeft'])"></div>
        <div class="LTopLeftTopRight cell"             onmouseover="addHighlight(['LTopRight', 'LTopLeft']); addCellHighlight(['LTopLeftTopRight', 'LTopRightTopLeft']);" onmouseout="removeHighlight(['LTopRight', 'LTopLeft']); removeCellHighlight([ 'LTopLeftTopRight', 'LTopRightTopLeft'])"></div>
        <div class="LTopLeftBottomRight cell"          onmouseover="addHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); addCellHighlight(['LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])" onmouseout="removeHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); removeCellHighlight(['LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])"></div>
      </div>

      <div class="LTopRight"                        onmouseover="addHighlight(['LTopRight'])" onmouseout="removeHighlight(['LTopRight'])">
        <div class="LTopRightTopLeft area-overlap cell"onmouseover="addHighlight(['LTopRight', 'LTopLeft']); addCellHighlight([ 'LTopLeftTopRight', 'LTopRightTopLeft'])" onmouseout="removeHighlight(['LTopRight', 'LTopLeft']); removeCellHighlight(['LTopLeftTopRight', 'LTopRightTopLeft'])"></div>
        <div class="LTopRightTopRight cell"            onmouseover="addHighlight(['LTopRightTopRight']); addCellHighlight(['LTopRightTopRight'])" onmouseout="removeHighlight(['LTopRightTopRight']); removeCellHighlight(['LTopRightTopRight'])"></div>
        <div class="LTopRightBottomLeft cell"          onmouseover="addHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); addCellHighlight(['LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])" onmouseout="removeHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); removeCellHighlight(['LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])"></div>
        <div class="LTopRightBottomRight cell"         onmouseover="addHighlight(['LTopRight', 'LBottomRight']); addCellHighlight(['LTopRightBottomRight', 'LBottomRightTopRight'])" onmouseout="removeHighlight(['LTopRight', 'LBottomRight']); removeCellHighlight(['LTopRightBottomRight', 'LBottomRightTopRight'])"></div>
      </div>

      <div class="LBottomLeft"                      onmouseover="addHighlight(['LBottomLeft'])" onmouseout="removeHighlight(['LBottomLeft'])">
        <div class="LBottomLeftTopLeft area-overlap cell" onmouseover="addHighlight(['LBottomLeft', 'LTopLeft']); addCellHighlight([ 'LTopLeftBottomLeft', 'LBottomLeftTopLeft'])" onmouseout="removeHighlight(['LBottomLeft', 'LTopLeft']); removeCellHighlight(['LTopLeftBottomLeft', 'LBottomLeftTopLeft'])"></div>
        <div class="LBottomLeftTopRight cell"          onmouseover="addHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); addCellHighlight([ 'LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])" onmouseout="removeHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); removeCellHighlight(['LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])"></div>
        <div class="LBottomLeftBottomLeft cell"        onmouseover="addHighlight(['LBottomLeftBottomLeft']); addCellHighlight(['LBottomLeftBottomLeft'])" onmouseout="removeHighlight(['LBottomLeftBottomLeft']); removeCellHighlight(['LBottomLeftBottomLeft'])"></div>
        <div class="LBottomLeftBottomRight cell"       onmouseover="addHighlight(['LBottomLeft', 'LBottomRight']); addCellHighlight(['LBottomRightBottomLeft', 'LBottomLeftBottomRight'])" onmouseout="removeHighlight(['LBottomLeft', 'LBottomRight']); removeCellHighlight([ 'LBottomRightBottomLeft', 'LBottomLeftBottomRight'])"></div>
      </div>

      <div class="LBottomRight"                      onmouseover="addHighlight(['LBottomRight'])" onmouseout="removeHighlight(['LBottomRight'])">
        <div class="LBottomRightTopLeft area-overlap cell" onmouseover="addHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); addCellHighlight([ 'LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])" onmouseout="removeHighlight(['LTopRight', 'LBottomRight', 'LBottomLeft', 'LTopLeft']); removeCellHighlight(['LTopLeftBottomRight', 'LTopRightBottomLeft', 'LBottomLeftTopRight', 'LBottomRightTopLeft'])"></div>
        <div class="LBottomRightTopRight cell"          onmouseover="addHighlight(['LBottomRight', 'LTopRight']); addCellHighlight(['LTopRightBottomRight', 'LBottomRightTopRight'])" onmouseout="removeHighlight(['LBottomRight', 'LTopRight']); removeCellHighlight(['LTopRightBottomRight', 'LBottomRightTopRight'])"></div>
        <div class="LBottomRightBottomLeft cell"        onmouseover="addHighlight(['LBottomLeft', 'LBottomRight']); addCellHighlight(['LBottomRightBottomLeft', 'LBottomLeftBottomRight'])" onmouseout="removeHighlight(['LBottomLeft', 'LBottomRight']); removeCellHighlight([ 'LBottomRightBottomLeft', 'LBottomLeftBottomRight'])"></div>
        <div class="LBottomRightBottomRight cell"       onmouseover="addHighlight(['LBottomRightBottomRight']); addCellHighlight(['LBottomRightBottomRight'])" onmouseout="removeHighlight(['LBottomRightBottomRight']); removeCellHighlight(['LBottomRightBottomRight'])"></div>
      </div>
    </div>

<!-- Right Monitor Pallete -->
    <div class="monitor monitor-right" onclick="performAction()" onmouseover="addExpand(['monitor-right']);" onmouseout="removeExpand(['monitor-right']);">
      <div class="RTopLeft"                         onmouseover="addHighlight(['RTopLeft']);" onmouseout="removeHighlight(['RTopLeft']);">
        <div class="RTopLeftTopLeft area-overlap cell" onmouseover="addHighlight(['RTopLeftTopLeft']); addCellHighlight(['RTopLeftTopLeft'])" onmouseout="removeHighlight(['RTopLeftTopLeft']); removeCellHighlight(['RTopLeftTopLeft'])"></div>
        <div class="RTopLeftBottomLeft cell"           onmouseover="addHighlight(['RBottomLeft', 'RTopLeft']); addCellHighlight(['RTopLeftBottomLeft', 'RBottomLeftTopLeft'])" onmouseout="removeHighlight(['RBottomLeft', 'RTopLeft']); removeCellHighlight([ 'RTopLeftBottomLeft', 'RBottomLeftTopLeft'])"></div>
        <div class="RTopLeftTopRight cell"             onmouseover="addHighlight(['RTopRight', 'RTopLeft']); addCellHighlight(['RTopLeftTopRight', 'RTopRightTopLeft']);" onmouseout="removeHighlight(['RTopRight', 'RTopLeft']); removeCellHighlight([ 'RTopLeftTopRight', 'RTopRightTopLeft'])"></div>
        <div class="RTopLeftBottomRight cell"          onmouseover="addHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); addCellHighlight(['RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])" onmouseout="removeHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); removeCellHighlight(['RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])"></div>
      </div>

      <div class="RTopRight"                        onmouseover="addHighlight(['RTopRight'])" onmouseout="removeHighlight(['RTopRight'])">
        <div class="RTopRightTopLeft area-overlap cell" onmouseover="addHighlight(['RTopRight', 'RTopLeft']); addCellHighlight(['RTopLeftTopRight', 'RTopRightTopLeft'])" onmouseout="removeHighlight(['RTopRight', 'RTopLeft']); removeCellHighlight(['RTopLeftTopRight', 'RTopRightTopLeft'])"></div>
        <div class="RTopRightTopRight cell"            onmouseover="addHighlight(['RTopRightTopRight']); addCellHighlight(['RTopRightTopRight'])" onmouseout="removeHighlight(['RTopRightTopRight']); removeCellHighlight(['RTopRightTopRight'])"></div>
        <div class="RTopRightBottomLeft cell"          onmouseover="addHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); addCellHighlight(['RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])" onmouseout="removeHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); removeCellHighlight(['RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])"></div>
        <div class="RTopRightBottomRight cell"         onmouseover="addHighlight(['RTopRight', 'RBottomRight']); addCellHighlight(['RTopRightBottomRight', 'RBottomRightTopRight'])" onmouseout="removeHighlight(['RTopRight', 'RBottomRight']); removeCellHighlight(['RTopRightBottomRight', 'RBottomRightTopRight'])"></div>
      </div>

      <div class="RBottomLeft"                      onmouseover="addHighlight(['RBottomLeft'])" onmouseout="removeHighlight(['RBottomLeft'])">
        <div class="RBottomLeftTopLeft area-overlap cell" onmouseover="addHighlight(['RBottomLeft', 'RTopLeft']); addCellHighlight([ 'RTopLeftBottomLeft', 'RBottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'RTopLeft']); removeCellHighlight(['RTopLeftBottomLeft', 'RBottomLeftTopLeft'])"></div>
        <div class="RBottomLeftTopRight cell"          onmouseover="addHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); addCellHighlight([ 'RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])" onmouseout="removeHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); removeCellHighlight(['RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])"></div>
        <div class="RBottomLeftBottomLeft cell"        onmouseover="addHighlight(['RBottomLeftBottomLeft']); addCellHighlight(['RBottomLeftBottomLeft'])" onmouseout="removeHighlight(['RBottomLeftBottomLeft']); removeCellHighlight(['RBottomLeftBottomLeft'])"></div>
        <div class="RBottomLeftBottomRight cell"       onmouseover="addHighlight(['RBottomLeft', 'RBottomRight']); addCellHighlight(['RBottomRightBottomLeft', 'RBottomLeftBottomRight'])" onmouseout="removeHighlight(['RBottomLeft', 'RBottomRight']); removeCellHighlight([ 'RBottomRightBottomLeft', 'RBottomLeftBottomRight'])"></div>
      </div>

      <div class="RBottomRight"                      onmouseover="addHighlight(['RBottomRight'])" onmouseout="removeHighlight(['RBottomRight'])">
        <div class="RBottomRightTopLeft area-overlap cell" onmouseover="addHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); addCellHighlight([ 'RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])" onmouseout="removeHighlight(['RTopRight', 'RBottomRight', 'RBottomLeft', 'RTopLeft']); removeCellHighlight(['RTopLeftBottomRight', 'RTopRightBottomLeft', 'RBottomLeftTopRight', 'RBottomRightTopLeft'])"></div>
        <div class="RBottomRightTopRight cell"          onmouseover="addHighlight(['RBottomRight', 'RTopRight']); addCellHighlight(['RTopRightBottomRight', 'RBottomRightTopRight'])" onmouseout="removeHighlight(['RBottomRight', 'RTopRight']); removeCellHighlight(['RTopRightBottomRight', 'RBottomRightTopRight'])"></div>
        <div class="RBottomRightBottomLeft cell"        onmouseover="addHighlight(['RBottomLeft', 'RBottomRight']); addCellHighlight(['RBottomRightBottomLeft', 'RBottomLeftBottomRight'])" onmouseout="removeHighlight(['RBottomLeft', 'RBottomRight']); removeCellHighlight([ 'RBottomRightBottomLeft', 'RBottomLeftBottomRight'])"></div>
        <div class="RBottomRightBottomRight cell"       onmouseover="addHighlight(['RBottomRightBottomRight']); addCellHighlight(['RBottomRightBottomRight'])" onmouseout="removeHighlight(['RBottomRightBottomRight']); removeCellHighlight(['RBottomRightBottomRight'])"></div>
      </div>
    </div>

<!-- Current Monitor Pallete -->
    <div class="grid-container" onclick="performAction()">
      <div class="TopLeft"                         onmouseover="addHighlight(['TopLeft']);" onmouseout="removeHighlight(['TopLeft']);">
        <div class="TopLeftTopLeft area-overlap cell" onmouseover="addHighlight(['TopLeftTopLeft']); addCellHighlight(['TopLeftTopLeft'])" onmouseout="removeHighlight(['TopLeftTopLeft']); removeCellHighlight(['TopLeftTopLeft'])"></div>
        <div class="TopLeftBottomLeft cell"           onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
        <div class="TopLeftTopRight cell"             onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight(['TopLeftTopRight', 'TopRightTopLeft']);" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight(['TopLeftTopRight', 'TopRightTopLeft'])"></div>
        <div class="TopLeftBottomRight cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
      </div>

      <div class="TopRight"                        onmouseover="addHighlight(['TopRight'])" onmouseout="removeHighlight(['TopRight'])">
        <div class="TopRightTopLeft area-overlap cell"onmouseover="addHighlight(['TopRight', 'TopLeft']); addCellHighlight([ 'TopLeftTopRight', 'TopRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'TopLeft']); removeCellHighlight(['TopLeftTopRight', 'TopRightTopLeft'])"></div>
        <div class="TopRightTopRight cell"            onmouseover="addHighlight(['TopRightTopRight']); addCellHighlight(['TopRightTopRight'])" onmouseout="removeHighlight(['TopRightTopRight']); removeCellHighlight(['TopRightTopRight'])"></div>
        <div class="TopRightBottomLeft cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
        <div class="TopRightBottomRight cell"         onmouseover="addHighlight(['TopRight', 'BottomRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['TopRight', 'BottomRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
      </div>

      <div class="BottomLeft"                      onmouseover="addHighlight(['BottomLeft'])" onmouseout="removeHighlight(['BottomLeft'])">
        <div class="BottomLeftTopLeft area-overlap cell" onmouseover="addHighlight(['BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomLeft', 'BottomLeftTopLeft'])" onmouseout="removeHighlight(['BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomLeft', 'BottomLeftTopLeft'])"></div>
        <div class="BottomLeftTopRight cell"          onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
        <div class="BottomLeftBottomLeft cell"        onmouseover="addHighlight(['BottomLeftBottomLeft']); addCellHighlight(['BottomLeftBottomLeft'])" onmouseout="removeHighlight(['BottomLeftBottomLeft']); removeCellHighlight(['BottomLeftBottomLeft'])"></div>
        <div class="BottomLeftBottomRight cell"       onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
      </div>

      <div class="BottomRight"                      onmouseover="addHighlight(['BottomRight'])" onmouseout="removeHighlight(['BottomRight'])">
        <div class="BottomRightTopLeft cell" onmouseover="addHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); addCellHighlight([ 'TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])" onmouseout="removeHighlight(['TopRight', 'BottomRight', 'BottomLeft', 'TopLeft']); removeCellHighlight(['TopLeftBottomRight', 'TopRightBottomLeft', 'BottomLeftTopRight', 'BottomRightTopLeft'])"></div>
        <div class="BottomRightTopRight cell"          onmouseover="addHighlight(['BottomRight', 'TopRight']); addCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])" onmouseout="removeHighlight(['BottomRight', 'TopRight']); removeCellHighlight(['TopRightBottomRight', 'BottomRightTopRight'])"></div>
        <div class="BottomRightBottomLeft cell"        onmouseover="addHighlight(['BottomLeft', 'BottomRight']); addCellHighlight(['BottomRightBottomLeft', 'BottomLeftBottomRight'])" onmouseout="removeHighlight(['BottomLeft', 'BottomRight']); removeCellHighlight([ 'BottomRightBottomLeft', 'BottomLeftBottomRight'])"></div>
        <div class="BottomRightBottomRight cell"       onmouseover="addHighlight(['BottomRightBottomRight']); addCellHighlight(['BottomRightBottomRight'])" onmouseout="removeHighlight(['BottomRightBottomRight']); removeCellHighlight(['BottomRightBottomRight'])"></div>
      </div>
    </div>

  </div>
</body>
</html>