能不能请大佬帮忙 完善了下这个AHK 脚本 按键映射图

之前在网上看到这个

快捷键映射图
但是编辑起来太麻烦了
熬夜 和GPT 较量

总算是弄出来了一个
点击界面就可以快速输入 按键映射内容的界面
但是 不美观
能不能请大佬帮忙完善下

#SingleInstance, Force

; 初始化存储备注的关联数组
notes := Object()

; 配置文件路径
ConfigFilePath := A_ScriptDir . "\notes.ini"

; 从配置文件中读取备注
Loop, Read, %ConfigFilePath%
{
    Line := A_LoopReadLine
    If (Line != "") {
        KeyName := SubStr(Line, 1, InStr(Line, "=") - 1)
        Note := SubStr(Line, InStr(Line, "=") + 1)
        notes[KeyName] := Note
    }
}

; 创建GUI
Gui, New, +HwndMyGui +Resize

; 创建键盘布局的按钮
; 功能键
funcKeys := ["Esc", "F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"]
xPos := 90
yPos := 10
for each, key in funcKeys
{
    Gui, Add, Button, x%xPos% y%yPos% w100 h50 gEditNote vKey%key%, % key . "`n" . notes[key]
    xPos += 105
}

; 数字键
numberKeys := ["Tilde", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "Minus", "Plus", "Backspace"]
numberKeysDisplay := ["~", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "+", "Backspace"]
xPos := 10
yPos += 60
Loop, % numberKeys.MaxIndex()
{
    key := numberKeys[A_Index]
    display := numberKeysDisplay[A_Index]
    buttonWidth := (key = "Backspace") ? 130 : 100
    Gui, Add, Button, x%xPos% y%yPos% w%buttonWidth% h50 gEditNote vKey%key%, % display . "`n" . notes[key]
    xPos += buttonWidth + 5
}

; 字母键第一行
letterKeysRow1 := ["Tab", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "BracketOpen", "BracketClose", "Backslash"]
letterKeysRow1Display := ["Tab", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "[", "]", "\\"]
xPos := 10
yPos += 60
Loop, % letterKeysRow1.MaxIndex()
{
    key := letterKeysRow1[A_Index]
    display := letterKeysRow1Display[A_Index]
    buttonWidth := (key = "Tab" or key = "Backslash") ? 120 : 100
    Gui, Add, Button, x%xPos% y%yPos% w%buttonWidth% h50 gEditNote vKey%key%, % display . "`n" . notes[key]
    xPos += buttonWidth + 5
}

; 字母键第二行
letterKeysRow2 := ["CapsLock", "A", "S", "D", "F", "G", "H", "J", "K", "L", "Semicolon", "Quote", "Enter"]
letterKeysRow2Display := ["CapsLock", "A", "S", "D", "F", "G", "H", "J", "K", "L", ";", "'", "Enter"]
xPos := 60
yPos += 60
Loop, % letterKeysRow2.MaxIndex()
{
    key := letterKeysRow2[A_Index]
    display := letterKeysRow2Display[A_Index]
    buttonWidth := (key = "CapsLock" or key = "Enter") ? 140 : 100
    Gui, Add, Button, x%xPos% y%yPos% w%buttonWidth% h50 gEditNote vKey%key%, % display . "`n" . notes[key]
    xPos += buttonWidth + 5
}

; 字母键第三行和Shift键
letterKeysRow3 := ["sl", "Z", "X", "C", "V", "B", "N", "M", "Comma", "Period", "Slash", "sr"]
letterKeysRow3Display := ["SL", "Z", "X", "C", "V", "B", "N", "M", ",", ".", "/", "SR"]
xPos := 120
yPos += 60
Loop, % letterKeysRow3.MaxIndex()
{
    key := letterKeysRow3[A_Index]
    display := letterKeysRow3Display[A_Index]
    buttonWidth := (key = "sl" or key = "sr") ? 150 : 100
    Gui, Add, Button, x%xPos% y%yPos% w%buttonWidth% h50 gEditNote vKey%key%, % display . "`n" . notes[key]
    xPos += buttonWidth + 5
}

; 控制键(包括 Ctrl、Win、Alt、Space)
controlKeys := ["cl", "wl", "al", "Space", "ar", "wr", "Menu", "cr"]
controlKeysDisplay := ["CL", "WL", "AL", "Space", "AR", "WR", "Menu", "CR"]
xPos := 190
yPos += 60
Loop, % controlKeys.MaxIndex()
{
    key := controlKeys[A_Index]
    display := controlKeysDisplay[A_Index]
    buttonWidth := (key = "Space") ? 450 : 100  ; 空格键更宽
    Gui, Add, Button, x%xPos% y%yPos% w%buttonWidth% h50 gEditNote vKey%key%, % display . "`n" . notes[key]
    xPos += buttonWidth + 5
}

; 显示GUI
Gui, Show, w1520 h400, Custom Keyboard GUI
return

; 编辑备注的函数
EditNote:
    GuiControlGet, KeyName, , %A_GuiControl%
    KeyName := RegExReplace(KeyName, "`n.*")  ; 移除现有备注

    ; 如果已经有备注,则显示,否则为空
    CurrentNote := notes.HasKey(KeyName) ? notes[KeyName] : ""

    ; 弹出输入框获取新备注
    InputBox, NewNote, %KeyName% 备注, 请输入%KeyName%键的备注:, , 200, , , , %CurrentNote%
    
    ; 如果用户输入了新的备注或者清空了备注,则更新数组和按钮显示
    if (ErrorLevel != "Cancel")
    {
        notes[KeyName] := NewNote  ; 更新备注
        ButtonText := KeyName . (NewNote != "" ? "`n" . NewNote : "")  ; 更新按钮文本
        GuiControl,, %A_GuiControl%, %ButtonText%  ; 设置按钮文本

        ; 保存备注到配置文件
        IniWrite, % NewNote, %ConfigFilePath%, Notes, %KeyName%
    }
return

; GUI关闭事件处理函数
GuiClose:
    ; 保存所有备注到配置文件并退出
    for Key, Note in notes
    {
        IniWrite, % Note, %ConfigFilePath%, Notes, %Key%
    }
    ExitApp
return

; 窗口大小调整处理函数
GuiSize:
    ; 窗口大小调整时的代码(如果需要)
return

这个代码
如果能帮忙加上小键盘区 就 太感谢了

没有任何的高级 功能 就是 直观 方便 的 记录程序的使用快捷键
主要是 按键映射所以 一个按钮 = 一个 或者一组动作
就是简单 的记录下不然 记不住啊


这样每次上手都得看一下 不够直观 所以才想要个 方便查看 快捷键 映射的
界面 虽然弄出来了 但是不是很美观
所以 如果有大佬能帮忙美化下 就太感谢了

我用这种方法 键盘虚拟层定义记录

不过有些情况下用更手动(draw.io)的方法 Vim 键盘映射Vimium 键盘映射

我只是需要记录 因为改了太多记不住

映射方案不会改

你这是先把快捷键搜出来,然后自己再琢磨怎么映射?

不是 我是映射完 之后
映射工具查看键位不方便
弄一个图形化界面 查看 映射的功能方便一些

可能和楼主的需求偏离,
我这里找到了一个服务 https://keycombiner.com,

它的主旨是帮助大家学习使用软件的默认快捷键.
能用快捷键弹出当前窗口的快捷键列表, 搜索学习快捷键.
软件的键位和命令的呈现很直观. 这部分可以让楼主借鉴一下.

但缺点有2个:


另外, 我还找到了几个类似的开源库, 尽管不是autohotkey的, 但也许可以让楼主借鉴一下:

下面是一个展示某个软件的快捷键的网页版, 挺有特色. 但是只有archive了.可能代码不全.

https://web.archive.org/web/20190908061717/http://keyboardshortcuts.lewishunter.co.uk/

另外, 有人用google sheets (类似excel) 编辑了键盘布局, 只是不知道要如何搜索定位.

我发的链接里的工具就是你发的链接里的第一个中文化 哈哈 就是因为编辑起来不方便 我才自己弄一个 就是不美观不够 胜在好编辑直观 勉强能用

用网页好像挺合适的?直接按键就弹出框录入说明。

PS:漏了小键盘0 :stuck_out_tongue_closed_eyes:

困,睡觉去了 :zzz:

<html>
    <head>
        <title>按键映射图</title>
<style>
keyboard {
    display: grid;
    grid-auto-flow: column;
    grid-auto-rows: max-content;
    border: 1px solid black;
    border-radius: 10px;
    background-color: whitesmoke;
    padding: 10px;
    gap: 10px;
}
kb_main {
    display: grid;
    grid-template-rows: var(--kh) 10px repeat(5, var(--kh));
    gap: 3px;
}
kb_dir {
    display: grid;
    grid-template: var(--kh) 10px repeat(5, var(--kh)) / repeat(3, var(--kw));
    gap: 3px;
}
kb_num {
    display: grid;
    grid-template: repeat(5, var(--kh)) / repeat(4, var(--kw));
    margin-top: calc(var(--kh) + 10px + 3px * 2);
    gap: 3px;
}
kr {
    display: grid;
    grid-auto-flow: column;
    height: var(--kh);
    gap: 3px;
}
:root {
    font-size: 0.8rem;
    --kw: 5rem;
    --kh: 4rem;
}
k {
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid darkgray;
    border-radius: 5px;
    background-color: lightgray;
    width: var(--kw);
    height: var(--kh);
    padding: 3px;
}
.k15 {
    width: calc(var(--kw) * 1.5 + 3px);
}
.k2, .k2h {
    width: calc(var(--kw) * 2 + 3px);
}
.k25 {
    width: calc(var(--kw) * 2.5 + 4px);
}
.kspace {
    width: calc(var(--kw) * 6 + 3px * 5);
}
.k2v {
    grid-row: span 2;
    height: calc(var(--kh) * 2 + 3px)
}
.k2h {
    grid-column: span 2;
}
d, d3 {
    display: inline-block;
    border: 1px solid transparent;
    height: var(--kh);
}
d3 {
    width: calc(var(--kw) * 3 + 3px * 2);
    grid-column: span 3;
}
</style>
    </head>
    <body>
        <keyboard>
            <kb_main>
                <kr style="grid-template-columns: var(--kw) 1fr repeat(4, var(-kw)) 1fr repeat(4, var(-kw)) 1fr repeat(4, var(-kw));">
                    <k>Esc</k><d> </d><k>F1</k><k>F2</k><k>F3</k><k>F4</k><d> </d><k>F5</k><k>F6</k><k>F7</k><k>F8</k><d> </d><k>F9</k><k>F10</k><k>F11</k><k>F12</k>
                </kr>
                <kr></kr>
                <kr>
                    <k>`</k><k>1</k><k>2</k><k>3</k><k>4</k><k>5</k><k>6</k><k>7</k><k>8</k><k>9</k><k>0</k><k>-</k><k>=</k><k class="k2">BackSpace</k>
                </kr>
                <kr>
                    <k class="k15">Tab</k><k>Q</k><k>W</k><k>E</k><k>R</k><k>T</k><k>Y</k><k>U</k><k>I</k><k>O</k><k>P</k><k>[</k><k>]</k><k class="k15">\</k>
                </kr>
                <kr>
                    <k class="k2">Caps</k><k>A</k><k>S</k><k>D</k><k>F</k><k>G</k><k>H</k><k>J</k><k>K</k><k>L</k><k>;</k><k>'</k><k class="k2">Enter</k>
                </kr>
                <kr>
                    <k class="k25">Shift</k><k>Z</k><k>X</k><k>C</k><k>V</k><k>B</k><k>N</k><k>M</k><k>,</k><k>.</k><k>/</k><k class="k25">Shift</k>
                </kr>
                <kr>
                    <k class="k15">Ctrl</k><k class="k15">Win</k><k class="k15">Alt</k><k class="kspace">&nbsp;</k><k class="k15">Alt</k><k class="k15">Menu</k><k class="k15">Ctrl</k>
                </kr>
            </kb_main>
            <kb_dir>
                <k>Prt Scr</k><k>Scr Lck</k><k>Pause</k>
                <d3> </d3>
                <k>Ins</k><k>Home</k><k>PgUp</k>
                <k>Del</k><k>End</k><k>PgDn</k>
                <d3> </d3>
                <d> </d><k>⇧</k><d> </d>
                <k>⇦</k><k>⇩</k><k>⇨</k>
            </kb_dir>
            <kb_num>
                <k>NmLk</k><k>/</k><k>*</k><k>-</k>
                <k>7</k><k>8</k><k>9</k><k class="k2v">+</k>
                <k>4</k><k>5</k><k>6</k>
                <k>1</k><k>2</k><k>3</k><k class="k2v">Enter</k>
                <k class="k2h">Ins</k><k>Del</k>
            </kb_num>
        </keyboard>
        <hr />
        <button onclick="exp()">Export</button><br />
        <textarea id="map"></textarea>
<script>
let keymap = {};
function mapkey(k) {
    let dft = "";
    if (k in keymap) {
        dft = keymap[k];
    }
    let s = prompt(`Map <${k}> to?`, dft);
    if (s != null) {
        keymap[k] = s;
        let ks = document.getElementsByTagName("k");
        console.log(ks.length);
        for (const e of ks) {
            if (e.innerHTML.toLowerCase() == k.toLowerCase()) {
                e.innerHTML = e.innerHTML + ": " + s;
                break;
            }
        }
    }
}
function exp() {
    document.getElementById("map").innerHTML = JSON.stringify(keymap);
}
window.onkeydown = (evt) => {
    if (evt.repeat) return;
    mapkey(evt.key);
}
</script>
    </body>
</html>

ctrl+f 这种如何录入? :slight_smile:


没看明白 修改好像也不显示在键盘上?

哦明白了 在网页上点击按钮 然后 输入


不是 点击 图片上的图标 然后输入 。。。
字写的不能太太多就超出了

鼠标放到填充的图层上在开始 填充 取消选区 粘贴图层样式 切换到魔术棒 分步AHK调用
哈哈 不过感谢大佬的热心回复

  • 限制了聚焦键盘图(高亮)才抓按键,否则下面的输入框没办法输入了。

  • 鼠标放到键上看设置

  • PrtScr好像抓不到,ctrl alt shift左右区分不了

  • 可能还有些键没反应,switch可能没写对,我的键盘没有小键盘区

  • 然后主键区和小键盘区的按键没有区分,其实应该用event.keycode而不是event.key来区分按键的

  • 困了,睡觉

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>按键映射图</title>
<style>
keyboard {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    border: 1px solid black;
    border-radius: 10px;
    background-color: whitesmoke;
    padding: 10px;
    gap: 10px;
    width: max-content;
}
keyboard:focus {
    outline: 3px solid gold;
    background-color: cornsilk;
}
kb_main {
    display: grid;
    grid-template-rows: var(--kh) 10px repeat(5, var(--kh));
    gap: 3px;
}
kb_dir {
    display: grid;
    grid-template: var(--kh) 10px repeat(5, var(--kh)) / repeat(3, var(--kw));
    gap: 3px;
}
kb_num {
    display: grid;
    grid-template: repeat(5, var(--kh)) / repeat(4, var(--kw));
    margin-top: calc(var(--kh) + 10px + 3px * 2);
    gap: 3px;
}
kr {
    display: grid;
    grid-auto-flow: column;
    height: var(--kh);
    gap: 3px;
}
:root {
    --kw: 3rem;
    --kh: 3rem;
}
k {
    font-size: 0.8rem;
    box-sizing: border-box;
    display: inline-block;
    border: 1px solid darkgray;
    border-radius: 5px;
    background-color: lightgray;
    width: var(--kw);
    height: var(--kh);
    padding: 5px 0 0 3px;
}
.k15 {
    width: calc(var(--kw) * 1.5 + 3px);
}
.k2, .k2h {
    width: calc(var(--kw) * 2 + 3px);
}
.k25 {
    width: calc(var(--kw) * 2.5 + 4px);
}
.kspace {
    width: calc(var(--kw) * 6 + 3px * 5);
}
.k2v {
    grid-row: span 2;
    height: calc(var(--kh) * 2 + 3px)
}
.k2h {
    grid-column: span 2;
}
d {
    display: inline-block;
    border: 1px solid transparent;
    height: var(--kh);
}
.d3 {
    width: calc(var(--kw) * 3 + 3px * 2);
    grid-column: span 3;
}
.set {
    outline: 2px solid green;
}
</style>
    </head>
    <body>
        <keyboard tabindex="1">
            <kb_main>
                <kr style="grid-template-columns: min-content 1fr repeat(4, min-content) 1fr repeat(4, min-content) 1fr repeat(4, min-content);">
                    <k>Esc</k><d> </d><k>F1</k><k>F2</k><k>F3</k><k>F4</k><d> </d><k>F5</k><k>F6</k><k>F7</k><k>F8</k><d> </d><k>F9</k><k>F10</k><k>F11</k><k>F12</k>
                </kr>
                <kr></kr>
                <kr>
                    <k>`</k><k>1</k><k>2</k><k>3</k><k>4</k><k>5</k><k>6</k><k>7</k><k>8</k><k>9</k><k>0</k><k>-</k><k>=</k><k class="k2">BackSpace</k>
                </kr>
                <kr>
                    <k class="k15">Tab</k><k>Q</k><k>W</k><k>E</k><k>R</k><k>T</k><k>Y</k><k>U</k><k>I</k><k>O</k><k>P</k><k>[</k><k>]</k><k class="k15">\</k>
                </kr>
                <kr>
                    <k class="k2">Caps</k><k>A</k><k>S</k><k>D</k><k>F</k><k>G</k><k>H</k><k>J</k><k>K</k><k>L</k><k>;</k><k>'</k><k class="k2">Enter</k>
                </kr>
                <kr>
                    <k class="k25">Shift</k><k>Z</k><k>X</k><k>C</k><k>V</k><k>B</k><k>N</k><k>M</k><k>,</k><k>.</k><k>/</k><k class="k25">Shift</k>
                </kr>
                <kr>
                    <k class="k15">Ctrl</k><k class="k15">Win</k><k class="k15">Alt</k><k class="kspace">Space</k><k class="k15">Alt</k><k class="k15">Menu</k><k class="k15">Ctrl</k>
                </kr>
            </kb_main>
            <kb_dir>
                <k>Prt Scr</k><k>ScrLck</k><k>Pause</k>
                <d class="d3"> </d>
                <k>Ins</k><k>Home</k><k>PgUp</k>
                <k>Del</k><k>End</k><k>PgDn</k>
                <d class="d3"> </d>
                <d> </d><k>⇧</k><d> </d>
                <k>⇦</k><k>⇩</k><k>⇨</k>
            </kb_dir>
            <kb_num>
                <k>NmLk</k><k>/</k><k>*</k><k>-</k>
                <k>7</k><k>8</k><k>9</k><k class="k2v">+</k>
                <k>4</k><k>5</k><k>6</k>
                <k>1</k><k>2</k><k>3</k><k class="k2v">Enter</k>
                <k class="k2h">0</k><k>.</k>
            </kb_num>
        </keyboard>
        <br />
        <button onclick="clr()">Clear</button>
        <button onclick="imp()">Import</button>
        <label><input type="checkbox" id="autosave" checked />Auto save</label>
        <br /><br />
        <textarea id="result" rows="10" cols="100" style="grid-row: span 2"></textarea>
<script>
let keydesc = {};
let elm_kb = document.getElementsByTagName("keyboard")[0];
let elm_result = document.getElementById("result");
let elms_k = document.getElementsByTagName("k");
let elm_autosave = document.getElementById("autosave");
function desckey(k) {
    k = k.toLowerCase();
    let s = prompt(`Description of <${k}> :`, keydesc[k] || "");
    if (s != null) {
        for (const elm of elms_k) {
            if (elm.innerHTML.toLowerCase() == k.toLowerCase()) {
                if (s) {
                    keydesc[k] = s;
                    elm.title = s;
                    elm.classList.add("set");
                } else {
                    delete keydesc[k];
                    elm.title = "";
                    elm.classList.remove("set");
                }
                break;
            }
        }
    }
    exp();
}
function exp() {
    elm_result.value = JSON.stringify(keydesc, null, 2);
    if (elm_autosave.checked)
        localStorage.setItem("keydesc", elm_result.value);
}
function imp() {
    keydesc = JSON.parse(elm_result.value || "{}");
    for (const elm of elms_k) {
        k = elm.innerHTML.toLowerCase();
        if (k in keydesc) {
            elm.title = keydesc[k];
            elm.classList.add("set");
        } else {
            elm.title = "";
            elm.classList.remove("set");
        }
    }
}
function clr() {
    elm_result.value = "";
    if (elm_autosave.checked)
        localStorage.removeItem("keydesc");
    imp();
}
window.onkeydown = (evt) => {
    if (document.activeElement != elm_kb) return;
    if (evt.repeat) return;
    let key = evt.key;
    switch (evt.key) {
        case "Meta":
            key = "win";
            break;
        case "ContextMenu":
            key = "menu";
            break;
        case "ScrollLock":
            key = "ScrLck";
            break;
        case "ArrowUp":
            key = "⇧";
            break;
        case "ArrowLeft":
            key = "⇦";
            break;
        case "ArrowDown":
            key = "⇩";
            break;
        case "ArrowRight":
            key = "⇨";
            break;
        case " ":
            key = "Space";
            break;
        case "Insert":
            key = "Ins";
            break;
        case "Delete":
            key = "Del";
            break;
        case "PageUp":
            key = "PgUp";
            break;
        case "PageDown":
            key = "PgDn";
            break;
    }
    desckey(key);
    evt.preventDefault();
    evt.stopPropagation();
}
if (elm_autosave.checked) {
    elm_result.value = localStorage.getItem("keydesc") || "";
    imp();
}
</script>
    </body>
</html>

我这两天也挺无聊的,所以现在这网页长这样了:

还可以这样隐藏边上的小键盘区

再隐藏……

2 个赞

我了个去 好厉害 那么这个 网页在哪里可以得到呢

大佬这个 网页太厉害 界面也好看功能也 方便查看 可以发出来嘛 给孩子馋哭了

稍等,还在改,年前发

期待 大佬的作品

发了

【开发者自荐】键谱:一个录入、展示按键映射信息的本机网页应用 - 发现频道 :mag_right: - 小众软件官方论坛 (appinn.net)

2 个赞