mkbd65/web
Watch
1
0
Fork
You've already forked web
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
web/index.html
XenGi 8ffce9e8cf Update index.html
2022-02-08 22:44:19 +00:00

336 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>mkbd65 - by XenGi</title>
<link rel="stylesheet" href="/css/bulma.css" />
<link rel="stylesheet" href="/css/fontawesome.css" />
<link rel="stylesheet" href="/css/main.css" />
</head>
<body>
<button class="button is-primary is-medium has-text-white" onclick="gototop()" id="gototop" title="Go to top">
<span class="icon is-medium">
<i class="fas fa-chevron-up"></i>
</span><!--/.icon .is-medium-->
</button><!--/.button .is-primary .is-medium .has-text-white #gototop-->
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a><!--/.navbar-burger-->
</div><!--/.navbar-brand-->
<div id="navMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#features">
Features
</a><!--/.navbar-item-->
<a class="navbar-item" href="#layout">
Layout
</a><!--/.navbar-item-->
<a class="navbar-item" href="#hardware">
Hardware
</a><!--/.navbar-item-->
<a class="navbar-item" href="#case">
Case
</a><!--/.navbar-item-->
<a class="navbar-item" href="#compat">
Compatibility
</a><!--/.navbar-item-->
</div><!--/.navbar-start-->
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-dark" href="https://gitlab.com/mkbd65">
<span class="icon">
<i class="fab fa-gitlab"></i>
</span><!--/.icon-->
<span>Gitlab</span>
</a><!--/.button .is-dark-->
</div><!--/.buttons-->
</div><!--/.navbar-item-->
</div><!--/.navbar-end-->
</div><!--/.navbar-menu-->
</div><!--/.container-->
</nav><!--/.navbar-->
<section class="hero is-dark is-halfheight">
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">
mkbd65
</p><!--/.title-->
<p class="subtitle">
Mobile 65% keyboard addon for modern smartphones
</p><!--/.subtitle-->
</div><!--/.container .has-text-centered-->
</div><!--/.hero-body-->
</section><!--/.hero .is-dark .is-halfheight-->
<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>Uses the phones USB-C port</li>
<li>No Bluetooth &ndash; No additional battery</li>
<li>Very thin footprint</li>
<li>Open source firmware</li>
<li>Open hardware</li>
</ul>
</div><!--/.content-->
</div><!--/.container-->
</section><!--/.section-->
<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>Slide out mechanism</li>
</ul>
<h2 class="subtitle">Revision 1</h2>
<ul>
<li>
Integrated USB Hub
<ul>
<li>Keyboard can be permanently connected to the phone</li>
<li>Charge via additional USB-C port with USB-PD passthrough</li>
<li>Get an additional USB-C port to connect other accessories</li>
</ul>
</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>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>
<div class="columns">
<div class="column">
<h2 class="subtitle">ANSI</h2>
<div class="container">
<div class="content">
<div class="highlight">
<pre>0: no mod
╔════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦═════════╗
║ Esc║ 1 ║ 2 ║ 3 ║ 4 ║ 5 ║ 6 ║ 7 ║ 8 ║ 9 ║ 0 ║ ⌫ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╦════╣
║ q ║ w ║ e ║ r ║ t ║ y ║ u ║ i ║ o ║ p ║ [ ║ ] ║ \ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╩════╣
║ a ║ s ║ d ║ f ║ g ║ h ║ j ║ k ║ l ║ ; ║ &apos; ║ ⏎ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬═════════╣
║ z ║ x ║ c ║ v ║ b ║ n ║ m ║ , ║ . ║ / ║ ▲ ║ ⇧ ║
╠════╬════╬════╬════╬════╩════╩════╬════╬════╬════╬════╬════╦════╣
║Ctrl║ Fn ║ ⇧ ║AltG║ Space ║ - ║ = ║ ◀ ║ ▼ ║ ▶ ║Ctrl║
╚════╩════╩════╩════╩══════════════╩════╩════╩════╩════╩════╩════╝</pre>
</div><!--/.highlight-->
<div class="highlight">
<pre>1: mod shift (default keyboard behaviour)
╔════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦═════════╗
║ Esc║ ! ║ @ ║ # ║ $ ║ % ║ ^ ║ &amp; ║ * ║ ( ║ ) ║ ⌫ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╦════╣
║ Q ║ W ║ E ║ R ║ T ║ Y ║ U ║ I ║ O ║ P ║ { ║ } ║ | ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╩════╣
║ A ║ S ║ D ║ F ║ G ║ H ║ J ║ K ║ L ║ : ║ &quot; ║ ⏎ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬═════════╣
║ Z ║ X ║ C ║ V ║ B ║ N ║ M ║ &lt; ║ &gt; ║ ? ║ ▲ ║░░░░░░░░░║
╠════╬════╬════╬════╬════╩════╩════╬════╬════╬════╬════╬════╦════╣
║Ctrl║ Fn ║░░░░║AltG║ Space ║ _ ║ + ║ ◀ ║ ▼ ║ ▶ ║Ctrl║
╚════╩════╩════╩════╩══════════════╩════╩════╩════╩════╩════╩════╝</pre>
</div><!--/.highlight-->
<div class="highlight">
<pre>2: mod AltGr (default keyboard behaviour)
╔════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦═════════╗
║ ║ ¹ ║ ² ║ ³ ║ ¤ ║ &euro; ║ ^ ║ ̛ ║ ˛ ║ ‘ ║ ’ ║ ⌫ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╦════╣
║ ä ║ å ║ é ║ ë ║ þ ║ ü ║ ú ║ í ║ ó ║ ö ║ &laquo; ║ &raquo; ║ ¬ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╩════╣
║ á ║ ß ║ ð ║ ║ ║ ║ ï ║ œ ║ ø ║ &para; ║ ´ ║ ⏎ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬═════════╣
║ æ ║ œ ║ &copy; ║ &reg; ║ ║ ñ ║ µ ║ ç ║ ˙ ║ ¿ ║ ▲ ║ ⇧ ║
╠════╬════╬════╬════╬════╩════╩════╬════╬════╬════╬════╬════╦════╣
║Ctrl║ Fn ║ ⇧ ║░░░░║ Space ║ ¥ ║ × ║ ◀ ║ ▼ ║ ▶ ║Ctrl║
╚════╩════╩════╩════╩══════════════╩════╩════╩════╩════╩════╩════╝</pre>
</div><!--/.highlight-->
<div class="highlight">
<pre>3: mod fn (adds missing keys)
╔════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦═════════╗
║ Esc║ F1 ║ F2 ║ F3 ║ F4 ║ F5 ║ F6 ║ F7 ║ F8 ║ F9 ║ F10║ Delete ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╦════╣
║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ F11║ F12║ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╩════╣
║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ` ║ Super ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬═════════╣
║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║PgUp║ ⇧ ║
╠════╬════╬════╬════╬════╩════╩════╬════╬════╬════╬════╬════╦════╣
║Ctrl║░░░░║ ⇧ ║AltG║ ↹ ║ ║ ║Pos1║PgDn║ End║Ctrl║
╚════╩════╩════╩════╩══════════════╩════╩════╩════╩════╩════╩════╝</pre>
</div><!--/.highlight-->
</div><!--/.content-->
</div><!--/.container-->
</div><!--/.column-->
<div class="column">
<h2 class="subtitle">ANSI (big enter)</h2>
<div class="container">
<div class="highlight"><pre><code>0: no mod
╔════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦═════════╗
║ Esc║ 1 ║ 2 ║ 3 ║ 4 ║ 5 ║ 6 ║ 7 ║ 8 ║ 9 ║ 0 ║ ⌫ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╦════╣
║ q ║ w ║ e ║ r ║ t ║ y ║ u ║ i ║ o ║ p ║ [ ║ ] ║ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╣ ⏎ ║
║ a ║ s ║ d ║ f ║ g ║ h ║ j ║ k ║ l ║ ; ║ &apos; ║ \ ║ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╩════╣
║ z ║ x ║ c ║ v ║ b ║ n ║ m ║ , ║ . ║ / ║ ▲ ║ ⇧ ║
╠════╬════╬════╬════╬════╩════╩════╬════╬════╬════╬════╬════╦════╣
║Ctrl║ Fn ║ ⇧ ║AltG║ Space ║ - ║ = ║ ◀ ║ ▼ ║ ▶ ║Ctrl║
╚════╩════╩════╩════╩══════════════╩════╩════╩════╩════╩════╩════╝</code></pre>
</div><!--/.highlight-->
<div class="highlight"><pre><code>1: mod shift (default keyboard behaviour)
╔════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦═════════╗
║ Esc║ ! ║ @ ║ # ║ $ ║ % ║ ^ ║ &amp; ║ * ║ ( ║ ) ║ ⌫ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╦════╣
║ Q ║ W ║ E ║ R ║ T ║ Y ║ U ║ I ║ O ║ P ║ { ║ } ║ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╣ ⏎ ║
║ A ║ S ║ D ║ F ║ G ║ H ║ J ║ K ║ L ║ : ║ &quot; ║ | ║ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╩════╣
║ Z ║ X ║ C ║ V ║ B ║ N ║ M ║ &lt; ║ &gt; ║ ? ║ ▲ ║░░░░░░░░░║
╠════╬════╬════╬════╬════╩════╩════╬════╬════╬════╬════╬════╦════╣
║Ctrl║ Fn ║░░░░║AltG║ Space ║ _ ║ + ║ ◀ ║ ▼ ║ ▶ ║Ctrl║
╚════╩════╩════╩════╩══════════════╩════╩════╩════╩════╩════╩════╝</code></pre>
</div><!--/.highlight-->
<div class="highlight"><pre><code>2: mod AltGr (default keyboard behaviour)
╔════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦═════════╗
║ ║ ¹ ║ ² ║ ³ ║ ¤ ║ &euro; ║ ^ ║ ̛ ║ ˛ ║ ‘ ║ ’ ║ ⌫ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╦════╣
║ ä ║ å ║ é ║ ë ║ þ ║ ü ║ ú ║ í ║ ó ║ ö ║ &laquo; ║ &raquo; ║ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╣ ⏎ ║
║ á ║ ß ║ ð ║ ║ ║ ║ ï ║ œ ║ ø ║ &para; ║ ´ ║ ¬ ║ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╩════╣
║ æ ║ œ ║ &copy; ║ &reg; ║ ║ ñ ║ µ ║ ç ║ ˙ ║ ¿ ║ ▲ ║ ⇧ ║
╠════╬════╬════╬════╬════╩════╩════╬════╬════╬════╬════╬════╦════╣
║Ctrl║ Fn ║ ⇧ ║░░░░║ Space ║ ¥ ║ × ║ ◀ ║ ▼ ║ ▶ ║Ctrl║
╚════╩════╩════╩════╩══════════════╩════╩════╩════╩════╩════╩════╝</code></pre>
</div><!--/.highlight-->
<div class="highlight"><pre><code>3: mod fn (adds missing keys)
╔════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦════╦═════════╗
║ Esc║ F1 ║ F2 ║ F3 ║ F4 ║ F5 ║ F6 ║ F7 ║ F8 ║ F9 ║ F10║ Delete ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╦════╣
║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ F11║ F12║ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╣Supr║
║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ` ║ ║ ║
╠════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╬════╩════╣
║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║PgUp║ ⇧ ║
╠════╬════╬════╬════╬════╩════╩════╬════╬════╬════╬════╬════╦════╣
║Ctrl║░░░░║ ⇧ ║AltG║ ↹ ║ ║ ║Pos1║PgDn║ End║Ctrl║
╚════╩════╩════╩════╩══════════════╩════╩════╩════╩════╩════╩════╝</code></pre>
</div><!--/.highlight-->
</div><!--/.container-->
</div><!--/.column-->
</div><!--/.columns-->
</section><!--/.section-->
<section id="layout" class="section">
<div class="container">
<h1 class="title">Tips</h1>
<div class="content">
<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></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">Fn</span>+<span class="tag">Shift</span> with left thumb and <span class="tag">'</span> with right thumb</li>
<li>Since Android doesn't really use the <span class="tag">Alt</span> key, the <span class="tag">Alt</span> key on this keyboard is actually an <span class="tag">AltGr</span> key to give you the <span class="tag">€</span> and german umlauts in the English (US) international layout</li>
<li>
The keyboard uses the Esc-Grave option from QMK to combine the <span class="tag">Esc</span> and <span class="tag">`~</span> keys, so sorry french typists but:
<ul>
<li>Pressing <span class="tag">AltGr</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>
<li>Pressing <span class="tag">AltGr</span>+<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>
</ul>
</li>
</ul>
</div><!--/.content-->
</div><!--/.container-->
</section><!--/.section-->
<section id="hardware" class="section">
<div class="container">
<h1 class="title">Hardware</h1>
<div class="content">
<p>
<figure class="image is-2by1">
<img src="https://gitlab.com/mkbd65/pcb/-/raw/master/mkbd65.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>It costs about 20€ 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-->
</section><!--/.section-->
<section id="case" class="section">
<div class="container">
<h1 class="title">Case</h1>
<p>Imagine some nice pictures of colorful 3D prints here!</p>
</div><!--/.container-->
</section><!--/.section-->
<section id="compat" class="section">
<div class="container">
<h1 class="title">Compatible phones</h1>
<div class="content">
<p>The PCB is compatible with any phone that has a USB-C port. 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>
<ul>
<li><a href="https://www.oneplus.com/8t">Oneplus 8T</a> (primary target)</li>
<li><a href="https://www.motorola.com/us/smartphones-moto-g100/p">Motorola moto g100</a> (planned)</li>
</ul>
<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-->
</section><!--/.section-->
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong>mkbd65</strong> by <a href="https://xengi.de">XenGi</a> is licensed under <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. This websites content is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
</p>
</div><!--/.content .has-text-centered-->
</footer><!--/.footer-->
<script type="text/javascript" src="/js/main.js"></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink