Readme ambiguity: zone order

[KyryloKaralyus]

There is a great improvement potential in clarifying the readme section on custom layouts.
How I got here: I'm using a huge tv as a monitor and working with 9 layout zones; I use kzones for moving windows between them using a numpad; my numpad layout is

7 8 9
4 5 6
1 2 3

and to simplify my layout, you could imagine the screen being divided by 9 different parts;
So 7 is top left, 8 is top middle, 9 is top right, 4 is left middle 5 is center, 6 is right middle, 1 is bottom left, 2 is bottom middle, 3 is bottom right.
Yet It gets rather confusing when the user needs, without suggestions or a guide, to simultaneously guess in which order the zones are parsed from the json, keep in mind where the zone pozitioning starts, and to remember that "1" on the numpad is not top left but bottom left, etc.
Thank you so much for the attention on this matter, and thanks for an absolutely TOP NOTCH GOATED HELLA WELL MADE SUPER SCRIPT I LOVE IT

[KyryloKaralyus]

Here are the layouts I love and use according to the numpad heuristic of assigning true numpad values (1 is 1, 2 is 2, and so on):

• 3x3 max utilizes the maximum amount of space with 9 zones;

  {
    "name": "3x3 max",
    "padding": 0,
    "zones": [
      { "x": 0, "y": 70, "width": 20, "height": 30 },
      { "x": 20, "y": 70, "width": 60, "height": 30 },
      { "x": 80, "y": 70, "width": 20, "height": 30 },

      { "x": 0, "y": 30, "width": 20, "height": 40 },
      { "x": 20, "y": 30, "width": 60, "height": 40 },
      { "x": 80, "y": 30, "width": 20, "height": 40 },

      { "x": 0, "y": 0, "width": 20, "height": 30 },
      { "x": 20, "y": 0, "width": 60, "height": 30 },
      { "x": 80, "y": 0, "width": 20, "height": 30 }
    ]
  },

• 5 zones is very similar but simpler (thin left, thick center and thin right are split 50% vertically and I can use either the top, the bottom parts of each segment or use the whole height to achieve the same as your default "priority grid")

  {
    "name": "5 zone priority grid",
    "padding": 0,
    "zones": [
      { "x": 0, "y": 50, "width": 20, "height": 50 },
      { "x": 20, "y": 75, "wi0dth": 60, "height": 50 },
      { "x": 80, "y": 50, "width": 20, "height": 50 },

      { "x": 0, "y": 0, "width": 20, "height": 100 },
      { "x": 20, "y": 25, "width": 60, "height": 100 },
      { "x": 80, "y": 0, "width": 20, "height": 100 },

      { "x": 0, "y": 0, "width": 20, "height": 50 },
      { "x": 20, "y": 0, "width": 60, "height": 50 },
      { "x": 80, "y": 0, "width": 20, "height": 50 }
    ]
  },

• 2x2 grid max is the same as your 2x2 grid except that the middle numpad button ("5") does full-screen and the top/btm do 100% horizontal and L/R do 100% vertical

  {
    "name": "2x2 grid max",
    "padding": 0,
    "zones": [
      { "x": 0, "y": 50, "width": 50, "height": 50 },
      { "x": 0, "y": 50, "width": 100, "height": 50 },
      { "x": 50, "y": 50, "width": 50, "height": 50 },

      { "x": 0, "y": 0, "width": 50, "height": 100 },
      { "x": 0, "y": 0, "width": 100, "height": 100 },
      { "x": 50, "y": 0, "width": 50, "height": 100 },

      { "x": 0, "y": 0, "width": 50, "height": 50 },
      { "x": 0, "y": 0, "width": 100, "height": 50 },
      { "x": 50, "y": 0, "width": 50, "height": 50 }
    ]
  },

• fake ultrawide works really well with western-movie-esque wide-lens-crop wallpapers (because the 3 columns that are equidistant from top/bottom cover up the image and the oled true blacks make it seem like the monitor is just ultrawide !

  {
    "name": "fake ultrawide 12 76 12",
    "padding": 0,
    "zones": [
      { "x": 0, "y": 88, "width": 30, "height": 12 },
      { "x": 30, "y": 88, "width": 40, "height": 12 },
      { "x": 70, "y": 88, "width": 30, "height": 12 },

      { "x": 0, "y": 12, "width": 20, "height": 76 },
      { "x": 20, "y": 12, "width": 60, "height": 76 },
      { "x": 80, "y": 12, "width": 20, "height": 76 },

      { "x": 0, "y": 0, "width": 30, "height": 12 },
      { "x": 30, "y": 0, "width": 40, "height": 12 },
      { "x": 70, "y": 0, "width": 30, "height": 12 }
    ]
  }
]