330 lines
16 KiB
HTML
330 lines
16 KiB
HTML
<!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" />
|
|
<meta name="theme-color" content="#fefefe" />
|
|
<title>mkbd65 - by XenGi</title>
|
|
<link rel="stylesheet" href="/css/bulma.min.css" />
|
|
<link rel="stylesheet" href="/css/fork-awesome.min.css" />
|
|
<link rel="stylesheet" href="/css/main.css" />
|
|
<link rel="icon" sizes="74x74" href="/img/mkbd65_74x74.png" />
|
|
<link rel="icon" sizes="148x148" href="/img/mkbd65_148x148.png" />
|
|
<link rel="icon" sizes="222x222" href="/img/mkbd65_222x222.png" />
|
|
</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="fa fa-chevron-up" aria-hidden="true"></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-->
|
|
<a class="navbar-item" href="guide.html">
|
|
Build guide
|
|
</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="fa fa-gitlab" aria-hidden="true"></i>
|
|
</span><!--/.icon-->
|
|
<span>Gitlab</span>
|
|
</a><!--/.button .is-dark-->
|
|
<a class="button is-dark" href="https://matrix.to/#/#mkbd65:hackint.org">
|
|
<span class="icon">
|
|
<i class="fa fa-matrix-org" aria-hidden="true"></i>
|
|
</span>
|
|
<span>Matrix</span>
|
|
</a><!--/.button .is-dark-->
|
|
<a class="button is-dark" href="ircs://irc.hackint.org:6697/#mkbd65">
|
|
<span class="icon">
|
|
<i class="fa fa-hashtag" aria-hidden="true"></i>
|
|
</span>
|
|
<span>IRC</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">
|
|
<figure class="image is-128x128 is-inline-block">
|
|
<img src="/img/mkbd65_222x222.png" />
|
|
</figure><!--/.image .is-128x128-->
|
|
<p class="title">WIP: mkbd65 build guide v1.0 alpha</p><!--/.title-->
|
|
<p class="subtitle">This is the official build guide for the mkbd65 mobile keyboard addon for modern smartphones.</p><!--/.title-->
|
|
</div><!--/.container .has-text-centered-->
|
|
</div><!--/.hero-body-->
|
|
</section><!--/.hero .is-dark .is-halfheight-->
|
|
|
|
<section id="prerequisites" class="section">
|
|
<div class="container">
|
|
<h1 class="title">1. Prerequisites</h1>
|
|
<div class="content">
|
|
<p>Before you begin, here is a list of all things you will need during the build process. There is also a list
|
|
of optional components that will make your life easier but are not absolutely neccessary.</p>
|
|
<h2>What you need:</h2>
|
|
<ul>
|
|
<li>
|
|
3D printer: A 0.25mm nozzle is strongly suggested for best results<ul><li>If you don't have a 3D printer
|
|
and also no friend with a 3D printer and there also no <a href="https://wiki.hackerspaces.org/List_of_Hacker_Spaces">hackspace</a>
|
|
nearby, you can order the prints online</li></ul>
|
|
</li>
|
|
<li>Soldering iron: Any decent iron will do</li>
|
|
<li><a href="https://openscad.org/">OpenSCAD</a>: A powerful CAD software which will be used to create the
|
|
3D files for the case and key mat</li>
|
|
</ul>
|
|
<h2>Optional requirements</h2>
|
|
<ul>
|
|
<li>Reflow oven (works better then soldering by hand)</li>
|
|
<li><a href="https://www.kicad.org">KiCAD</a>: A PCB CAD software which you can use to order the PCB and
|
|
flex cable. Gerber files from GitLab should be enough for most PCB fabs.</li>
|
|
</ul>
|
|
</div><!--/.content-->
|
|
</div><!--/.container-->
|
|
</section><!--/.section-->
|
|
|
|
<section id="buy-parts" class="section">
|
|
<div class="container">
|
|
<h1 class="title">2. Buy all the things</h1>
|
|
|
|
<div class="content">
|
|
<p>This section lists all things you need to buy before you can put together a mkbd65.</p>
|
|
|
|
<h2>Main PCB</h2>
|
|
<p>The main PCB is the same for all phones. The only thing that changes is the case and the flex cable that
|
|
connects the PCB to your phone. To order the PCB you can either use the Gerber files from GitLab releases or
|
|
open the project in KiCAD and upload from there.</p>
|
|
|
|
<h3>Order with Gerber files from <a href="https://jlcpcb.com">JLCPCB</a> (China)</h3>
|
|
<p></p>
|
|
<ol>
|
|
<li>Download the <code>gerber.zip</code> file from the latest release from <a href="https://gitlab.com/mkbd65/pcb/-/releases">GitLab</a></li>
|
|
<li>Go to JLCPCB and upload the <code>gerber.zip</code> file</li>
|
|
<li>Set the PCB Thickness to 1.6mm</li>
|
|
<li>You can choose whatever color you like</li>
|
|
<li>As Surface Finish you can choose ENIG if you like, it's more expensive but easier to solder and lead free</li>
|
|
<li>You can use the PCB assembly service from JLCPCB if you don't want to assemble the PCB yourself</li>
|
|
<li>If you want to assemble the PCB yourself with a reflow oven, don't forget to buy a stencil!</li>
|
|
</ol>
|
|
<p>5 PCBs (which is the minimum order size) with HASL finish and a stencil will cost you around 15€. If you choose ENIG finish the price go be
|
|
around 30€. Assembly without compoents factored in will be around 35€.</p>
|
|
|
|
<h3>Order from directly with KiCAD from <a href="https://aisler.net">Aisler</a> (Europe)</h3>
|
|
<p></p>
|
|
<ol>
|
|
<li>Clone the git repo from <a href="https://gitlab.com/mkbd65/pcb">GitLab</a>
|
|
<li>Open the project with KiCAD</li>
|
|
<li>If not already done open the <code>Plugin and Content Manager</code></li>
|
|
<li>Install the <code>AISLER Push for KiCad</code> plugin from the Plugins tab and click <code>Apply Pending Changes</code></li>
|
|
<li>Open the PCB Editor and click the <code>Push layout to AISLER</code> button in the top right</li>
|
|
<li>On the website that should open, you can go to the BOM tab and assign the components, if you want Aisler
|
|
to assemble the PCBs for you</li>
|
|
<li>On the checkout tab, choose "Beautiful Boards HD" if you want to assemble the boards yourself or "Amazing Assembly" if you want Aisler to do the assembly</li>
|
|
<li>If you want to assemble the PCB yourself with a reflow oven, don't forget to order a "Stellar Stencil"</li>
|
|
</ol>
|
|
<p>3 PCBs (which is the minimum order size) with ENIG finish and a stencil will cost you around 60€. Assembly
|
|
will cost you more then 100€, so I wouldn't recommend it. It is far too expensive. Better source the
|
|
components at <a href="https://www.mouser.com">Mouser</a> or <a href="https://www.digikey.com">Digikey</a> and
|
|
assemble the PCB yourself. Don't forget the stencil if you want to use a reflow oven!</p>
|
|
|
|
<h2>Flex cable</h2>
|
|
<p>Similar to the main PCB, the flex cable need to be bought at a PCB fab. The lenght of the cable depends on
|
|
the size of you phone.</p>
|
|
|
|
<p><i>JS that calculates hwat flex cable you need here</i></p>
|
|
|
|
<form id="flex_pcb_calc" onsubmit="event.preventDefault(); flex_pcb_calc();">
|
|
<div class="field is-horizontal">
|
|
<div class="field-label">
|
|
<label class="label">Phone length</label>
|
|
</div><!--/.field-label-->
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<div class="field has-addons">
|
|
<p class="control">
|
|
<input id="phone_length" class="input is-hovered" type="number" min="100" step="0.1" value="150" required="required" />
|
|
</p><!--/.control-->
|
|
<p class="control">
|
|
<a class="button is-static">mm</a>
|
|
</p><!--/.control-->
|
|
</div><!--/.field .has-addons-->
|
|
<p class="help">Long side of the phone</p>
|
|
</div><!--/.field-->
|
|
</div><!--/.field-body-->
|
|
</div><!--/.field .is-horizontal-->
|
|
|
|
<div class="field is-horizontal">
|
|
<div class="field-label">
|
|
<label class="label">Phone width</label>
|
|
</div><!--/.field-label-->
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<div class="field has-addons">
|
|
<p class="control">
|
|
<input id="phone_width" class="input is-hovered" type="number" min="10" step="0.1" value="50" required="required" />
|
|
</p><!--/.control-->
|
|
<p class="control">
|
|
<a class="button is-static">mm</a>
|
|
</p><!--/.control-->
|
|
</div><!--/.field .has-addons-->
|
|
<p class="help">Short side of the phone</p>
|
|
</div><!--/.field-->
|
|
</div><!--/.field-body-->
|
|
</div><!--/.field .is-horizontal-->
|
|
|
|
<hr />
|
|
|
|
<div class="field is-horizontal">
|
|
<div class="field-label">
|
|
<label class="label">Flex PCB length</label>
|
|
</div><!--/.field-label-->
|
|
<div class="field-body">
|
|
<div class="field">
|
|
<div class="field has-addons">
|
|
<p class="control">
|
|
<input id="flex_pcb_length" class="input" type="number" readonly="readonly" />
|
|
</p><!--/.control-->
|
|
<p class="control">
|
|
<a class="button is-static">mm</a>
|
|
</p><!--/.control-->
|
|
</div><!--/.field .has-addons-->
|
|
</div><!--/.field-->
|
|
</div><!--/.field-body-->
|
|
</div><!--/.field .is-horizontal-->
|
|
|
|
<div class="field is-horizontal">
|
|
<div class="field-label"></div>
|
|
<div class="field-body">
|
|
<button class="button is-primary">Calculate</button>
|
|
</div><!--/.field-body-->
|
|
</div><!--/.field .is-horizontal-->
|
|
</form>
|
|
|
|
<h2>Case</h2>
|
|
<p>The case is 3D printed and consists of multiple parts. You can choose whatever color you like. As material
|
|
PLA is the recommended choice but others like ABS or PETG would work aswell. Feel free to experiment and share
|
|
you're results in the community chat.</p>
|
|
|
|
</div><!--/.content-->
|
|
</div><!--/.container-->
|
|
</section><!--/.section-->
|
|
|
|
<section id="printing" class="section">
|
|
<div class="container">
|
|
<h1 class="title">3. Printing components</h1>
|
|
|
|
<div class="content">
|
|
<h2>Bottom case</h2>
|
|
<p></p>
|
|
|
|
<h2>Top case</h2>
|
|
<p></p>
|
|
|
|
<h2>Key mat</h2>
|
|
<p>The keyboard has a 3D printed layer which sits on top of the PCB. This 3D print is a bit more tricky
|
|
becasue it involves a material change. Near the stop the print will stop and you have to replace the filamaent
|
|
with a different color. This is done so the labels on the keys have a different color then the rest and are
|
|
visible. If you din't need visible labels you can skip this step and print the key mat in one go.</p>
|
|
|
|
<ol>
|
|
<li>Clone the git repo with the files for the case: <a href="https://gitlab.com/mkbd65/cad">gitlab.com/mkbd65/cad</a></li>
|
|
<li>Design your key mat or use an existing one</li>
|
|
<li>slicer</li>
|
|
<li>print</li>
|
|
</ol>
|
|
</div><!--/.content-->
|
|
</div><!--/.container-->
|
|
</section><!--/.section-->
|
|
|
|
<section id="assembly" class="section">
|
|
<div class="container">
|
|
<h1 class="title">4. Assembling the electronics</h1>
|
|
|
|
<div class="content">
|
|
<i>tba</i>
|
|
</div><!--/.content-->
|
|
</div><!--/.container-->
|
|
</section><!--/.section-->
|
|
|
|
<section id="case" class="section">
|
|
<div class="container">
|
|
<h1 class="title">5. Building the case</h1>
|
|
|
|
<div class="content">
|
|
<i>tba</i>
|
|
</div><!--/.content-->
|
|
</div><!--/.container-->
|
|
</section><!--/.section-->
|
|
|
|
<section id="final" class="section">
|
|
<div class="container">
|
|
<h1 class="title">6. Put everything together</h1>
|
|
|
|
<div class="content">
|
|
<i>tba</i>
|
|
</div><!--/.content-->
|
|
</div><!--/.container-->
|
|
</section><!--/.section-->
|
|
|
|
<footer class="footer">
|
|
<div class="content has-text-centered">
|
|
<div class="columns is-vcentered is-centered">
|
|
<div class="column is-one-quarter">
|
|
<figure class="image">
|
|
<a href="http://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer"><img alt="CC BY-SA 4.0" src="https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-sa.svg" style="height: 31pt; width: 81pt" /></a>
|
|
</figure><!--/.image-->
|
|
</div><!--/.column .is-one-quarter-->
|
|
<div class="column is-one-quarter">
|
|
<figure class="image">
|
|
<a href="https://www.oshwa.org/"><img alt="Open Source Hardware Logo" src="https://www.oshwa.org/wp-content/uploads/2014/03/oshw-logo.svg" style="height: 48pt" /></a>
|
|
</figure><!--/.image-->
|
|
</div><!--/.column .is-one-quarter-->
|
|
<div class="column is-one-quarter">
|
|
<figure class="image">
|
|
<a href="https://qmk.fm/"><img alt="Powered by QMK logo" src="https://qmk.fm/assets/images/badge-dark.svg" style="height:42pt" /></a>
|
|
</figure><!--/.image-->
|
|
</div><!--/.column .is-one-quarter-->
|
|
</div><!--/.columns .is-vcentered-->
|
|
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://gitlab.com/mkbd65/">mkbd65</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://gitlab.com/xengi">XenGi</a> is licensed under <a href="http://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-SA 4.0</a></p>
|
|
</div><!--/.content .has-text-centered-->
|
|
</footer><!--/.footer-->
|
|
|
|
<script type="text/javascript" src="/js/main.js"></script>
|
|
</body>
|
|
</html>
|