This commit is contained in:
Ricardo (XenGi) Band 2023-06-25 01:55:02 +02:00
commit 27a2aaa9ee
No known key found for this signature in database
14 changed files with 73 additions and 98 deletions

View file

@ -1,18 +1,17 @@
.PHONY: build clean setup serve
build: clean setup
build: clean
mkdir -p ./public/{css,js,img,fonts}
cp ./node_modules/bulma/css/bulma.min.css ./public/css/
cp ./node_modules/fork-awesome/css/fork-awesome.min.css ./public/css/
cp ./node_modules/fork-awesome/css/fork-awesome.min.css.map ./public/css/
cp ./node_modules/fork-awesome/fonts/forkawesome-webfont.* ./public/fonts/
cp ./mkbd65-ansi.png ./mkbd65-ansi-fn.png ./mkbd65-iso.png ./mkbd65-iso-fn.png ./img/
cp ./mkbd65-{ansi,iso}.png ./mkbd65-{ansi,iso}-fn.png ./public/img/
cp ./img/mkbd65_{74x74,148x148,222x222}.png ./public/img/
cp -r ./css ./public/
cp -r ./js ./public/
cp mkbd65-iso.png mkbd65-ansi.png ./public/img/
cp mkbd65-iso-fn.png mkbd65-ansi-fn.png ./public/img/
cat header.html index.html footer.html > public/index.html
cat header.html build.html footer.html > public/build.html
cat ./{header,index,footer}.html > public/index.html
cat ./{header,build,footer}.html > public/build.html
clean:
rm -rf ./public

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

View file

@ -13,17 +13,17 @@
<section id="features" class="section">
<div class="container">
<h1 class="title">Features</h1>
<div class="content">
<ul>
<li>Full qwerty keyboard layout</li>
<li>Fully customizable through QMK firmware</li>
<li>Primary target layout is "English US intl. with AltGr"</li>
<li>Uses the phones USB-C port</li>
<li>Supports USB Power Delivery, phone can still fast charge while keyboard is plugged in</li>
<li>No Bluetooth &ndash; No additional battery</li>
<li>Very thin footprint</li>
<li>Open source firmware</li>
<li>Open hardware</li>
<li>Open source firmware (QMK)</li>
<li>Open source hardware</li>
</ul>
</div><!--/.content-->
</div><!--/.container-->
@ -32,22 +32,19 @@
<section class="section">
<div class="container">
<h1 class="title">Roadmap</h1>
<div class="content">
<h2 class="subtitle">Revision 0 (Prototype)</h2>
<ul>
<li>Standard qwerty keyboard</li>
<li>USB connection with USB-C cable</li>
</ul>
<h2 class="subtitle">Revision 1 (Initial release)</h2>
<h2 class="subtitle">Revision 1 (planned)</h2>
<ul>
<li>Slide out mechanism</li>
<li>Keyboard can be permanently connected to the phone</li>
<li>USB connection with USB-C flex cable</li>
<li>Charging the phone with additional USB-C port (no data)</li>
</ul>
<h2 class="subtitle">Revision 2 (planned)</h2>
<ul>
<li>
@ -59,51 +56,42 @@
</li>
<li>Key frontlight</li>
</ul>
<h2 class="subtitle">Future revisions may include</h2>
<p>Some of these features are a little insane, what can I do. ¯\_(ツ)_/¯</p>
<ul>
<li>Headphone jack with dedicated sound card connected to the on board USB hub</li>
<li>Headphone jack using USB-C SBU pins</li>
<li>Key backlight</li>
<li>
Integrated KVM switch
<ul>
<li>Use the keyboard with a connected PC (headless server etc)</li>
<li>mkbd65 will advertise itself as a DisplayPort monitor over that USB cable and act as a webcam to the connected phone</li>
<li>Display content of the headless unit can then be shown in a dedicated KVM app or a compatible camera app</li>
<li>Inside the KVM app, the phones display area can be used as a touchpad/mouse for the headless unit</li>
</li>
</ul>
</div><!--/.content-->
</div><!--/.container-->
</section><!--/.section-->
<section id="layout" class="section">
<h1 class="title">Layouts</h1>
<h1 class="title">Example layouts</h1>
<div class="columns">
<div class="column">
<h2 class="subtitle">ANSI</h2>
<h2 class="subtitle">English US International (ANSI)</h2>
<div class="container">
<div class="content">
<figure class="image">
<a href="http://www.keyboard-layout-editor.com/#/gists/7dd07f537fdabe4e8c25ad3b9b0d8173"><img src="/img/mkbd65-ansi.png" alt="ANSI layout" /></a>
<a href="http://www.keyboard-layout-editor.com/#/gists/c02095977e3da3a2bc016f7061b70262"><img src="/img/mkbd65-ansi.png" alt="English US International (ANSI) layout" /></a>
</figure><!--/.image-->
<figure class="image">
<a href="http://www.keyboard-layout-editor.com/#/gists/7dd07f537fdabe4e8c25ad3b9b0d8173"><img src="/img/mkbd65-ansi-fn.png" alt="ANSI layout Fn combinations" /></a>
<a href="http://www.keyboard-layout-editor.com/#/gists/c02095977e3da3a2bc016f7061b70262"><img src="/img/mkbd65-ansi-fn.png" alt="English US International (ANSI) layout Fn combinations" /></a>
</figure><!--/.image-->
</div><!--/.content-->
</div><!--/.container-->
</div><!--/.column-->
<div class="column">
<h2 class="subtitle">"ISO" (ANSI with big enter)</h2>
<h2 class="subtitle">German (ISO)</h2>
<div class="container">
<div class="content">
<figure class="image">
<a href="http://www.keyboard-layout-editor.com/#/gists/ea8b9739acc4a8de44a7013d14665932"><img src="/img/mkbd65-iso.png" alt="ISO layout" /></a>
<a href="http://www.keyboard-layout-editor.com/#/gists/c02095977e3da3a2bc016f7061b70262"><img src="/img/mkbd65-iso.png" alt="German (ISO) layout" /></a>
</figure><!--/.image-->
<figure class="image">
<a href="http://www.keyboard-layout-editor.com/#/gists/ea8b9739acc4a8de44a7013d14665932"><img src="/img/mkbd65-iso-fn.png" alt="ISO layout Fn combinations" /></a>
<a href="http://www.keyboard-layout-editor.com/#/gists/c02095977e3da3a2bc016f7061b70262"><img src="/img/mkbd65-iso-fn.png" alt="German (ISO) layout Fn combinations" /></a>
</figure><!--/.image-->
</div><!--/.content-->
</div><!--/.container-->
@ -114,23 +102,22 @@
<section id="layout" class="section">
<div class="container">
<h1 class="title">Tips</h1>
<div class="content">
<p>The <span class="tag">Fn</span> key unlocks a lot of the missing keys and other functions.</p>
<p>The key labeled <span class="tag">Alt</span> is actually the <span class="tag">AltGr</span> key. Because the <span class="tag">Alt</span> key is not very useful on Android but the <span class="tag">AltGr</span> key is used in the English US intl. layout.</p>
<p>The <span class="tag">AltGr</span> key is also a sticky key. That means that it remains active until the next key is pressed, and then it is released. This allows you to type keyboard combinations without pressing more than one key at a time.</p>
<p>This keyboard uses the Esc-Grave option from QMK to combine the <span class="tag">Esc</span> and <span class="tag">`~</span> keys</p>
<p>The key labeled <span class="tag">Alt</span> is actually the <span class="tag">AltGr</span> key. Because the <span class="tag">Alt</span> key is not very useful on Android but the <span class="tag">AltGr</span> key is used heavily in many layouts.</p>
<p>The <span class="tag">AltGr</span> key is also a sticky key. That means that it remains active until the next key is pressed and then it is released. This allows you to type keyboard combinations without pressing more than one key at a time.</p>
<p>This keyboard uses the Esc-Grave option from QMK to combine the <span class="tag">Esc</span> and <span class="tag">`~</span> (<span class="tag">^°</span> in German layout) keys</p>
<p>Useful combinations:</p>
<ul>
<li>Hold left thumb on <span class="tag">Fn</span> and right thumb on <span class="tag">⏎</span> to press <span class="tag">Super</span> (Windows key)</li>
<li>Get <span class="tag">`</span> key by pressing <span class="tag">Fn</span> with left thumb and <span class="tag">'</span> with right thumb</li>
<li>Get <span class="tag">~</span> key by pressing <span class="tag">Shift</span> with right thumb and <span class="tag">Esc</span> with left thumb</li>
<li>Get <span class="tag">~</span> key by pressing <span class="tag">Shift</span> with right thumb and <span class="tag">Esc</span> with left thumb (This is the mentioned Grave Escape feature of the QMK firmware)</li>
<li>Get <span class="tag">&euro;</span> by tapping <span class="tag">AltGr</span> followed by <span class="tag">5</span> in the English (US) international layout</li>
<li>Get the german umlaut <span class="tag">ä</span> by tapping <span class="tag">AltGr</span> followed by <span class="tag">q</span> in the English (US) international layout</li>
<li>Get the german umlaut <span class="tag">ü</span> by tapping <span class="tag">AltGr</span> followed by <span class="tag">y</span> in the English (US) international layout</li>
<li>Get the german umlaut <span class="tag">ö</span> by tapping <span class="tag">AltGr</span> followed by <span class="tag">p</span> in the English (US) international layout</li>
<li>Cycle through open applications with <span class="tag">Fn</span>+<span class="tag">O</span> and <span class="tag">Fn</span>+<span class="tag">P</span> (macro for <span class="tag">Alt</span>+<span class="tag">Tab</span>/<span class="tag">Alt</span>+<span class="tag">Shift</span>+<span class="tag">Tab</span>)
<li>I'm sorry french typists:
<li>Cycle through open applications with <span class="tag">Fn</span>+<span class="tag">O</span> and <span class="tag">Fn</span>+<span class="tag">P</span> (macro for <span class="tag">Alt</span>+<span class="tag">Tab</span> and <span class="tag">Alt</span>+<span class="tag">Shift</span>+<span class="tag">Tab</span>)
<li>I'm sorry french typists using the English US International layout:
<ul>
<li>Tapping <span class="tag">AltGr</span> followed by <span class="tag">Fn</span>+<span class="tag">'</span> is the only way to get <span class="tag">`</span> and combine it with the next char</li>
<li>Tapping <span class="tag">AltGr</span> followed by <span class="tag">Shift</span>+<span class="tag">Fn</span>+<span class="tag">'</span> is the only way to get <span class="tag">~</span> and combine it with the next char</li>
@ -141,22 +128,21 @@
</div><!--/.container-->
</section><!--/.section-->
<section id="hardware" class="section">
<div class="container">
<h1 class="title">Hardware</h1>
<div class="content">
<h2>Revision 0 (Prototype)</h2>
<p>
<figure class="image is-2by1">
<img src="https://gitlab.com/mkbd65/pcb/-/raw/master/mkbd65_front.png?inline=false" />
<img src="https://gitlab.com/mkbd65/pcb/-/raw/main/mkbd65_front.png?inline=false" />
</figure><!--/.image .is-2by1-->
<figure class="image is-2by1">
<img src="https://gitlab.com/mkbd65/pcb/-/raw/master/mkbd65_back.png?inline=false" />
<img src="https://gitlab.com/mkbd65/pcb/-/raw/main/mkbd65_back.png?inline=false" />
</figure><!--/.image .is-2by1-->
</p>
<p>mkbd65 has the USB Vendor ID 1209 and Product ID 4803. You can find it <a href="https://pid.codes/1209/4803/">here</a>.</p>
<p>The PCB is made with KiCAD. You can download the files <a href="https://gitlab.com/mkbd65/pcb">here</a>.</p>
<p>The PCB is made with <a href="http://www.kicad.org">KiCAD</a>. You can download the files <a href="https://gitlab.com/mkbd65/pcb">here</a>.</p>
<p>It costs about 7-25€ to produce the PCB in a fab like JLCPCB. The full <abbr title="Bill of materials">BOM</abbr> can be found <a href="https://octopart.com/bom-tool/YlMBpo3w">here</a>.</p>
</div><!--/.content-->
</div><!--/.container-->
@ -165,8 +151,9 @@
<section id="case" class="section">
<div class="container">
<h1 class="title">Case</h1>
<p>The CAD files for the case are generated from configuration files with the help of <a href="https://github.com/SolidCode/SolidPython">Solidpython</a> and <a href="https://openscad.org/">OpenSCAD</a>.</p>
<p>Imagine some nice pictures of colorful 3D prints here!</p>
<p>The CAD files for the case are generated from adaptable file using <a href="https://openscad.org/">OpenSCAD</a>.</p>
<p>The case and keyboard parts can be easily adapted to any phones shape. Some expections are phone with "weird" camera bumps.</p>
<p><i>Imagine some nice pictures of colorful 3D prints here!</i></p>
</div><!--/.container-->
</section><!--/.section-->
@ -175,13 +162,13 @@
<h1 class="title">Compatible phones</h1>
<div class="content">
<p>The final PCB will be compatible with any phone that has a USB-C port and fits some minimal size requirements. The CAD files for the case are generated from configuration files and can be adapted to most phones. The limiting factor is mostly the shape of the camera bump.</p>
<p>Currently only these models are officially supported:</p>
<p>The final PCB will be compatible with any phone that has a USB-C port and fits some minimal size requirements. The CAD files for the case can be easily adapted to most phones. The limiting factor is mostly the shape of the camera bump.</p>
<p>Currently only these models have been tested and are known to work:</p>
<ul>
<li><a href="https://www.samsung.com/us/smartphones/galaxy-s22/">Samsung S22+</a> (primary target)</li>
<li><a href="https://www.motorola.com/us/smartphones-moto-g100/p">Motorola moto g100</a> (planned)</li>
</ul>
<p>Phones that will never end up on this list include the newer Google Pixel phone with the visor camera bump because it doesn't have any space for the keyboard. So don't get your hopes up to use these with it. I hope the Pixel 8 will have a different design.</p>
<p>Phones that will never end up on this list include the newer Google Pixel phone with the visor camera bump because it doesn't have any space for the keyboard. So don't get your hopes up to use these with it. I hope the Pixel 8 will have a different design.</p>
<p>You want your phone on this list? Open an issue <a href="https://gitlab.com/mkbd65/case/-/issues/new#">here</a> and use the "New phone" template.</p>
</div><!--/.content-->
</div><!--/.container-->

Binary file not shown.

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 32 KiB

Before After
Before After

View file

@ -1,7 +1,7 @@
[
{
"backcolor": "#656565",
"name": "mkbd65 ANSI",
"name": "mkbd65 ISO",
"author": "XenGi",
"notes": "https://gitlab.com/mkbd65",
"radii": "18px",
@ -17,7 +17,7 @@
"sm": "alps",
"sb": "alps",
"a": 7,
"f": 6
"f": 7
},
"",
"F1",
@ -31,32 +31,26 @@
"F9",
"F10",
{
"f": 7,
"w": 2
},
"<i class='mss mss-Unicode-DeleteRight-Big-2'></i>"
],
[
"",
"",
"",
"",
"",
"",
"",
"",
{
"f": 6
"f": 4
},
"",
"",
"",
"",
"",
"",
"",
"",
"Alt Shift Tab",
"Alt Tab",
{
"a": 5,
"f": 5
},
"Alt\nTab\n\n\n\n\nShift",
"Alt\nTab",
{
"a": 7,
"f": 6
"f": 7
},
"F11",
"F12",
@ -79,15 +73,11 @@
"~\n`",
{
"a": 7,
"f": 7,
"w": 2
},
"<i class='kb kb-logo-android'></i>"
],
[
{
"f": 6
},
"",
"",
"",
@ -99,7 +89,7 @@
"<i class='kb kb-Multimedia-Volume-Up-2'></i>",
"<i class='kb kb-Multimedia-Mute-2'></i>",
{
"f": 5
"f": 4
},
"PgUp",
{
@ -124,24 +114,31 @@
"f": 7
},
"",
{
"f": 6
},
"",
{
"f": 6,
"w": 3
},
"<i class='kb kb-Tab-2'></i>",
"<i class='kb kb-Line-Start-End'></i>",
{
"f": 7
},
"",
"",
{
"f": 5
},
"Home",
{
"f": 4
},
"PgDn",
{
"f": 5
},
"End",
{
"f": 6
"f": 7
},
""
]

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

Before After
Before After

View file

@ -17,7 +17,7 @@
"sm": "alps",
"sb": "alps",
"a": 7,
"f": 6
"f": 7
},
"",
"F1",
@ -31,15 +31,11 @@
"F9",
"F10",
{
"f": 7,
"w": 2
},
"<i class='mss mss-Unicode-DeleteRight-Big-2'></i>"
],
[
{
"f": 6
},
"",
"",
"",
@ -49,29 +45,21 @@
"",
"",
{
"a": 5,
"f": 4
},
"Alt\nTab\n\n\n\n\nShift",
"Alt Shift Tab",
"Alt Tab",
{
"f": 6
},
"Alt\nTab",
{
"a": 7
"f": 7
},
"F11",
"F12",
{
"f": 7,
"h": 2
},
"<i class='kb kb-logo-android'></i>"
],
[
{
"f": 6
},
"",
"",
"",
@ -83,7 +71,7 @@
"<i class='kb kb-Multimedia-Play-Pause'></i>",
"<i class='kb kb-Multimedia-Stop'></i>",
{
"a": 5
"a": 4
},
"°\n^",
{
@ -105,14 +93,11 @@
{
"f": 4
},
"PgUp",
{
"f": 6
},
"",
"Bild <i class='kb kb-Arrows-Up'></i>",
{
"f": 7
},
"",
""
],
[
@ -131,24 +116,31 @@
"f": 7
},
"",
{
"f": 6
},
"",
{
"f": 6,
"w": 3
},
"<i class='kb kb-Line-Start-End'></i>",
{
"f": 7
},
"",
"",
{
"f": 5
},
"Pos1",
{
"f": 4
},
"Home",
"PgDn",
"End",
"Bild <i class='kb kb-Arrows-Down'></i>",
{
"f": 6
"f": 5
},
"Ende",
{
"f": 7
},
""
]

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

Before After
Before After