From fa385d0e8bd657fac6f76ef50731bf5fb2e81000 Mon Sep 17 00:00:00 2001
From: JJGadgets <JJGadgets@users.noreply.github.com>
Date: Sun, 24 Mar 2024 07:20:53 +0000
Subject: [PATCH] keymap-drawer render

---
 images/cradio.svg  | 141 +++++++++++++++++++++++++++++----------------
 images/cradio.yaml |  25 ++++----
 2 files changed, 104 insertions(+), 62 deletions(-)

diff --git a/images/cradio.svg b/images/cradio.svg
index 3b6b3b4..2e38d4c 100644
--- a/images/cradio.svg
+++ b/images/cradio.svg
@@ -16,6 +16,9 @@ svg.keymap {
 /* default key styling */
 rect.key {
     fill: #f6f8fa;
+}
+
+rect.key, rect.combo {
     stroke: #c9cccf;
     stroke-width: 1;
 }
@@ -283,8 +286,10 @@ path.combo {
 <text x="56" y="175" class="combo tap">DEL</text>
 </g>
 <g class="combo combopos-4">
-<rect rx="6" ry="6" x="602" y="106" width="28" height="26" class="combo"/>
-<text x="616" y="119" class="combo tap">ENTER</text>
+<path d="M532,95 l-37,3" class="combo"/>
+<path d="M532,95 l37,4" class="combo"/>
+<rect rx="6" ry="6" x="518" y="82" width="28" height="26" class="combo"/>
+<text x="532" y="95" class="combo tap">ENTER</text>
 </g>
 <g class="combo combopos-5">
 <rect rx="6" ry="6" x="602" y="50" width="28" height="26" class="combo"/>
@@ -307,16 +312,16 @@ path.combo {
 <text x="490" y="161" class="combo tap">DOWN</text>
 </g>
 <g class="combo combopos-9">
+<path d="M490,133 l-35,88" class="combo"/>
+<path d="M490,133 l35,-88" class="combo"/>
+<rect rx="6" ry="6" x="476" y="120" width="28" height="26" class="combo"/>
+<text x="490" y="133" class="combo tap">UP</text>
+</g>
+<g class="combo combopos-10">
 <path d="M518,170 l-57,55" class="combo"/>
 <path d="M518,170 l57,-55" class="combo"/>
 <rect rx="6" ry="6" x="504" y="157" width="28" height="26" class="combo"/>
-<text x="518" y="170" class="combo tap">UP</text>
-</g>
-<g class="combo combopos-10">
-<path d="M546,187 l-81,42" class="combo"/>
-<path d="M546,187 l81,-42" class="combo"/>
-<rect rx="6" ry="6" x="532" y="174" width="28" height="26" class="combo"/>
-<text x="546" y="187" class="combo tap">RIGHT</text>
+<text x="518" y="170" class="combo tap">RIGHT</text>
 </g>
 <g class="combo combopos-11">
 <rect rx="6" ry="6" x="98" y="24" width="28" height="26" class="combo"/>
@@ -404,19 +409,19 @@ path.combo {
 </g>
 <g transform="translate(476, 44)" class="key keypos-6">
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
-<text x="0" y="0" class="key tap">]</text>
+<text x="0" y="0" class="key tap">HOME</text>
 </g>
 <g transform="translate(532, 28)" class="key keypos-7">
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
-<text x="0" y="0" class="key tap">-</text>
+<text x="0" y="0" class="key tap">UP</text>
 </g>
 <g transform="translate(588, 45)" class="key keypos-8">
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
-<text x="0" y="0" class="key tap">=</text>
+<text x="0" y="0" class="key tap">END</text>
 </g>
 <g transform="translate(644, 80)" class="key keypos-9">
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
-<text x="0" y="0" class="key tap">&#x27;</text>
+<text x="0" y="0" class="key tap">=</text>
 </g>
 <g transform="translate(28, 136)" class="key keypos-10">
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@@ -440,7 +445,7 @@ path.combo {
 </g>
 <g transform="translate(420, 108)" class="key keypos-15">
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
-<text x="0" y="0" class="key tap">TAB</text>
+<text x="0" y="0" class="key tap">]</text>
 </g>
 <g transform="translate(476, 100)" class="key keypos-16">
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@@ -452,11 +457,11 @@ path.combo {
 </g>
 <g transform="translate(588, 101)" class="key keypos-18">
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
-<text x="0" y="0" class="key tap">UP</text>
+<text x="0" y="0" class="key tap">RIGHT</text>
 </g>
 <g transform="translate(644, 136)" class="key keypos-19">
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
-<text x="0" y="0" class="key tap">RIGHT</text>
+<text x="0" y="0" class="key tap">&#x27;</text>
 </g>
 <g transform="translate(28, 192)" class="key keypos-20">
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@@ -480,18 +485,18 @@ path.combo {
 </g>
 <g transform="translate(420, 164)" class="key keypos-25">
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
-<text x="0" y="0" class="key tap">PSCRN</text>
+<text x="0" y="0" class="key tap">TAB</text>
 </g>
 <g transform="translate(476, 156)" class="key keypos-26">
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
-<text x="0" y="0" class="key tap">HOME</text>
-</g>
-<g transform="translate(532, 140)" class="key keypos-27">
-<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
 <text x="0" y="0" class="key tap">
 <tspan x="0" dy="-0.6em">PG</tspan><tspan x="0" dy="1.2em">UP</tspan>
 </text>
 </g>
+<g transform="translate(532, 140)" class="key keypos-27">
+<rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
+<text x="0" y="0" class="key tap">-</text>
+</g>
 <g transform="translate(588, 157)" class="key keypos-28">
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
 <text x="0" y="0" class="key tap">
@@ -500,7 +505,7 @@ path.combo {
 </g>
 <g transform="translate(644, 192)" class="key keypos-29">
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
-<text x="0" y="0" class="key tap">END</text>
+<text x="0" y="0" class="key tap">PSCRN</text>
 </g>
 <g transform="translate(224, 238)" class="key keypos-30">
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key"/>
@@ -530,8 +535,10 @@ path.combo {
 <text x="140" y="106" class="combo hold">toggle</text>
 </g>
 <g class="combo combopos-1">
-<rect rx="6" ry="6" x="602" y="106" width="28" height="26" class="combo"/>
-<text x="616" y="119" class="combo tap">ENTER</text>
+<path d="M532,95 l-37,3" class="combo"/>
+<path d="M532,95 l37,4" class="combo"/>
+<rect rx="6" ry="6" x="518" y="82" width="28" height="26" class="combo"/>
+<text x="532" y="95" class="combo tap">ENTER</text>
 </g>
 </g>
 </g>
@@ -674,8 +681,10 @@ path.combo {
 <rect rx="6" ry="6" x="-26" y="-26" width="52" height="52" class="key held"/>
 </g>
 <g class="combo combopos-0">
-<rect rx="6" ry="6" x="602" y="106" width="28" height="26" class="combo"/>
-<text x="616" y="119" class="combo tap">ENTER</text>
+<path d="M532,95 l-37,3" class="combo"/>
+<path d="M532,95 l37,4" class="combo"/>
+<rect rx="6" ry="6" x="518" y="82" width="28" height="26" class="combo"/>
+<text x="532" y="95" class="combo tap">ENTER</text>
 </g>
 </g>
 </g>
@@ -826,8 +835,10 @@ path.combo {
 <text x="140" y="106" class="combo hold">toggle</text>
 </g>
 <g class="combo combopos-1">
-<rect rx="6" ry="6" x="602" y="106" width="28" height="26" class="combo"/>
-<text x="616" y="119" class="combo tap">ENTER</text>
+<path d="M532,95 l-37,3" class="combo"/>
+<path d="M532,95 l37,4" class="combo"/>
+<rect rx="6" ry="6" x="518" y="82" width="28" height="26" class="combo"/>
+<text x="532" y="95" class="combo tap">ENTER</text>
 </g>
 </g>
 </g>
@@ -977,8 +988,10 @@ path.combo {
 <text x="0" y="24" class="key hold">toggle</text>
 </g>
 <g class="combo combopos-0">
-<rect rx="6" ry="6" x="602" y="106" width="28" height="26" class="combo"/>
-<text x="616" y="119" class="combo tap">ENTER</text>
+<path d="M532,95 l-37,3" class="combo"/>
+<path d="M532,95 l37,4" class="combo"/>
+<rect rx="6" ry="6" x="518" y="82" width="28" height="26" class="combo"/>
+<text x="532" y="95" class="combo tap">ENTER</text>
 </g>
 </g>
 </g>
@@ -1151,8 +1164,10 @@ path.combo {
 <text x="0" y="24" class="key hold">toggle</text>
 </g>
 <g class="combo combopos-0">
-<rect rx="6" ry="6" x="602" y="106" width="28" height="26" class="combo"/>
-<text x="616" y="119" class="combo tap">ENTER</text>
+<path d="M532,95 l-37,3" class="combo"/>
+<path d="M532,95 l37,4" class="combo"/>
+<rect rx="6" ry="6" x="518" y="82" width="28" height="26" class="combo"/>
+<text x="532" y="95" class="combo tap">ENTER</text>
 </g>
 </g>
 </g>
@@ -1298,8 +1313,10 @@ path.combo {
 <text x="0" y="0" class="key trans tap">▽</text>
 </g>
 <g class="combo combopos-0">
-<rect rx="6" ry="6" x="602" y="106" width="28" height="26" class="combo"/>
-<text x="616" y="119" class="combo tap">ENTER</text>
+<path d="M532,95 l-37,3" class="combo"/>
+<path d="M532,95 l37,4" class="combo"/>
+<rect rx="6" ry="6" x="518" y="82" width="28" height="26" class="combo"/>
+<text x="532" y="95" class="combo tap">ENTER</text>
 </g>
 </g>
 </g>
@@ -1453,14 +1470,22 @@ path.combo {
 <text x="154" y="194" class="combo tap">LCTRL</text>
 </g>
 <g class="combo combopos-1">
+<path d="M126,187 l81,42" class="combo"/>
+<path d="M126,187 l-81,-42" class="combo"/>
+<rect rx="6" ry="6" x="112" y="174" width="28" height="26" class="combo"/>
+<text x="126" y="187" class="combo tap">LCTRL</text>
+</g>
+<g class="combo combopos-2">
 <path d="M266,180 l10,54" class="combo"/>
 <path d="M266,180 l-10,-54" class="combo"/>
 <rect rx="6" ry="6" x="252" y="167" width="28" height="26" class="combo"/>
 <text x="266" y="180" class="combo tap">D</text>
 </g>
-<g class="combo combopos-2">
-<rect rx="6" ry="6" x="602" y="106" width="28" height="26" class="combo"/>
-<text x="616" y="119" class="combo tap">ENTER</text>
+<g class="combo combopos-3">
+<path d="M532,95 l-37,3" class="combo"/>
+<path d="M532,95 l37,4" class="combo"/>
+<rect rx="6" ry="6" x="518" y="82" width="28" height="26" class="combo"/>
+<text x="532" y="95" class="combo tap">ENTER</text>
 </g>
 </g>
 </g>
@@ -1609,8 +1634,10 @@ path.combo {
 <text x="0" y="24" class="key hold">toggle</text>
 </g>
 <g class="combo combopos-0">
-<rect rx="6" ry="6" x="602" y="106" width="28" height="26" class="combo"/>
-<text x="616" y="119" class="combo tap">ENTER</text>
+<path d="M532,95 l-37,3" class="combo"/>
+<path d="M532,95 l37,4" class="combo"/>
+<rect rx="6" ry="6" x="518" y="82" width="28" height="26" class="combo"/>
+<text x="532" y="95" class="combo tap">ENTER</text>
 </g>
 </g>
 </g>
@@ -1755,8 +1782,10 @@ path.combo {
 <text x="0" y="0" class="key trans tap">▽</text>
 </g>
 <g class="combo combopos-0">
-<rect rx="6" ry="6" x="602" y="106" width="28" height="26" class="combo"/>
-<text x="616" y="119" class="combo tap">ENTER</text>
+<path d="M532,95 l-37,3" class="combo"/>
+<path d="M532,95 l37,4" class="combo"/>
+<rect rx="6" ry="6" x="518" y="82" width="28" height="26" class="combo"/>
+<text x="532" y="95" class="combo tap">ENTER</text>
 </g>
 </g>
 </g>
@@ -1902,8 +1931,10 @@ path.combo {
 <text x="0" y="0" class="key trans tap">▽</text>
 </g>
 <g class="combo combopos-0">
-<rect rx="6" ry="6" x="602" y="106" width="28" height="26" class="combo"/>
-<text x="616" y="119" class="combo tap">ENTER</text>
+<path d="M532,95 l-37,3" class="combo"/>
+<path d="M532,95 l37,4" class="combo"/>
+<rect rx="6" ry="6" x="518" y="82" width="28" height="26" class="combo"/>
+<text x="532" y="95" class="combo tap">ENTER</text>
 </g>
 </g>
 </g>
@@ -2048,8 +2079,10 @@ path.combo {
 <text x="0" y="0" class="key trans tap">▽</text>
 </g>
 <g class="combo combopos-0">
-<rect rx="6" ry="6" x="602" y="106" width="28" height="26" class="combo"/>
-<text x="616" y="119" class="combo tap">ENTER</text>
+<path d="M532,95 l-37,3" class="combo"/>
+<path d="M532,95 l37,4" class="combo"/>
+<rect rx="6" ry="6" x="518" y="82" width="28" height="26" class="combo"/>
+<text x="532" y="95" class="combo tap">ENTER</text>
 </g>
 </g>
 </g>
@@ -2194,8 +2227,10 @@ path.combo {
 <text x="0" y="0" class="key trans tap">▽</text>
 </g>
 <g class="combo combopos-0">
-<rect rx="6" ry="6" x="602" y="106" width="28" height="26" class="combo"/>
-<text x="616" y="119" class="combo tap">ENTER</text>
+<path d="M532,95 l-37,3" class="combo"/>
+<path d="M532,95 l37,4" class="combo"/>
+<rect rx="6" ry="6" x="518" y="82" width="28" height="26" class="combo"/>
+<text x="532" y="95" class="combo tap">ENTER</text>
 </g>
 </g>
 </g>
@@ -2340,8 +2375,10 @@ path.combo {
 <text x="0" y="0" class="key trans tap">▽</text>
 </g>
 <g class="combo combopos-0">
-<rect rx="6" ry="6" x="602" y="106" width="28" height="26" class="combo"/>
-<text x="616" y="119" class="combo tap">ENTER</text>
+<path d="M532,95 l-37,3" class="combo"/>
+<path d="M532,95 l37,4" class="combo"/>
+<rect rx="6" ry="6" x="518" y="82" width="28" height="26" class="combo"/>
+<text x="532" y="95" class="combo tap">ENTER</text>
 </g>
 </g>
 </g>
@@ -2453,8 +2490,10 @@ path.combo {
 <text x="0" y="0" class="key tap">RSHFT</text>
 </g>
 <g class="combo combopos-0">
-<rect rx="6" ry="6" x="602" y="106" width="28" height="26" class="combo"/>
-<text x="616" y="119" class="combo tap">ENTER</text>
+<path d="M532,95 l-37,3" class="combo"/>
+<path d="M532,95 l37,4" class="combo"/>
+<rect rx="6" ry="6" x="518" y="82" width="28" height="26" class="combo"/>
+<text x="532" y="95" class="combo tap">ENTER</text>
 </g>
 </g>
 </g>
diff --git a/images/cradio.yaml b/images/cradio.yaml
index 152b08a..e4d343a 100644
--- a/images/cradio.yaml
+++ b/images/cradio.yaml
@@ -42,30 +42,30 @@ layers:
   - '3'
   - \
   - '['
-  - ']'
-  - '-'
+  - HOME
+  - UP
+  - END
   - '='
-  - ''''
   - TAB
   - '4'
   - '5'
   - '6'
   - '&numdot'
-  - TAB
+  - ']'
   - LEFT
   - DOWN
-  - UP
   - RIGHT
+  - ''''
   - DEL
   - '7'
   - '8'
   - '9'
   - '0'
-  - PSCRN
-  - HOME
+  - TAB
   - PG UP
+  - '-'
   - PG DN
-  - END
+  - PSCRN
   - {t: num_lock, h: LCTRL}
   - {t: SPACE, h: LSHFT}
   - {t: ENTER, h: RALT}
@@ -529,6 +529,9 @@ combos:
 - p: [31, 10]
   k: LCTRL
   l: [game]
+- p: [30, 10]
+  k: LCTRL
+  l: [game]
 - p: [31, 14]
   k: D
   l: [game]
@@ -544,7 +547,7 @@ combos:
 - p: [20, 21]
   k: DEL
   l: [default]
-- p: [18, 19]
+- p: [16, 17, 18]
   k: ENTER
 - p: [8, 9]
   k: '"'
@@ -558,10 +561,10 @@ combos:
 - p: [33, 17]
   k: DOWN
   l: [default]
-- p: [33, 18]
+- p: [33, 7]
   k: UP
   l: [default]
-- p: [33, 19]
+- p: [33, 18]
   k: RIGHT
   l: [default]
 - p: [1, 2]