diff --git a/_config.yml b/_config.yml index 9593d9e..99729fb 100644 --- a/_config.yml +++ b/_config.yml @@ -20,4 +20,4 @@ defaults: layout: post -mobile-width: "600px" +mobile-width: "700px" diff --git a/_includes/figure-gallery.html b/_includes/figure-gallery.html new file mode 100644 index 0000000..fbdee57 --- /dev/null +++ b/_includes/figure-gallery.html @@ -0,0 +1,29 @@ +
+ +{% assign rows = include.src | split: ':' %} +{% capture path %}/images/{{page.path | split: '/' | last | split: '.' | first }}{% endcapture %} +{% capture alt %}{{ include.caption | markdownify | strip_html }} {{ include.alt }}{% endcapture %} + +{% for row in rows %} + {% assign imgs = row | split: ' ' %} + + {% if imgs.size == 1 %} +
+ {% else %} +
+ {% endif %} + + {% for img in imgs %} + {% capture src %}{{ path }}/{{ img }}{% endcapture %} + {% include image.html src=src alt=alt %} + {% endfor %} +
+{% endfor %} + +{% if include.caption %} +
+ {{ include.caption | markdownify | remove: '

' | remove: '

' }} +
+{% endif %} + +
diff --git a/_includes/figure-image.html b/_includes/figure-image.html index 8752621..5d19a00 100644 --- a/_includes/figure-image.html +++ b/_includes/figure-image.html @@ -1,25 +1,14 @@ -
+{% if include.float %} +
+{% else %} +
+{% endif %} -{% assign srcs = include.src | split: ' ' %} {% capture path %}/images/{{page.path | split: '/' | last | split: '.' | first }}{% endcapture %} +{% capture alt %}{{ include.caption | markdownify | strip_html }} {{ include.alt }}{% endcapture %} -
-{% for src in srcs %} - {% capture img %} {{path}}/{{src}} {% endcapture %} - {{ include.caption | markdownify | strip_html }} -{% endfor %} -
+{% capture src %}{{ path }}/{{ include.src }}{% endcapture %} +{% include image.html src=src alt=alt %} {% if include.caption %}
diff --git a/_includes/image.html b/_includes/image.html new file mode 100644 index 0000000..4928173 --- /dev/null +++ b/_includes/image.html @@ -0,0 +1,4 @@ + {{ include.alt }} + diff --git a/_posts/2017-11-13-Apple-Mouse.md b/_posts/2017-11-13-Apple-Mouse.md index 50b62b5..a787546 100644 --- a/_posts/2017-11-13-Apple-Mouse.md +++ b/_posts/2017-11-13-Apple-Mouse.md @@ -1,6 +1,10 @@ --- title: Hacking a 1986 computer mouse into the 21st century --- +{% include figure-image.html + src="atkinson.png" + alt="Finished product" %} + While looking through a pile of computer hardware I found an original Apple ADB mouse, the one that shipped with the Apple IIgs and several models of mac. It’s an extremely simple piece of hardware, with only a single button on top and a mechanical ball on the bottom. Interestingly, the cable on the mouse is very short, since it was designed to be daisy-chained with an ADB keyboard. My idea was to transplant the internals from a cheap bluetooth mouse (one I have kept in my backpack for use at school) into the ADB mouse, making it into something I could use daily. I needed to add several things to the hardware: @@ -13,18 +17,48 @@ My idea was to transplant the internals from a cheap bluetooth mouse (one I have ## Day 1: The Mouse Buttons The first step was to split the existing single button into two. After grinding off the plastic welding on the pins holding the button in, I used a hacksaw guided by a block of wood to saw the button in half all the way down to the center part of the hinge. After sanding I think the cut looked pretty good! Something like a laser, or a better suited saw would probably have gotten a cleaner cut, but I was happy with this -{% include figure-image.html src="img-2-small.jpg img-3-small.jpg img-4-small.jpg img-5-small.jpg" caption="the _mouse_ case" %} +{% include figure-gallery.html + src="img-2-small.jpg img-3-small.jpg img-4-small.jpg img-5-small.jpg" + caption="the mouse case" %} ## Day 2: The Board -Since i wanted the optical sensor to peer through where the ball went, I needed it to be centered, but the bluetooth mouse’s board was slightly too wide to do this. Luckily the only thing on that part was the right mouse button, which I had to move anyways, and the connector for the batteries, which i was already replacing with a Lithium battery. + +{% include figure-image.html + src="img-6-small.jpg" + float="right" + caption="The Board needed to be cut down" %} + +{% include figure-image.html + src="img-11-small.jpg" + float="right" + caption="Bluetooth mouse board and lens assembly" %} + + +Since I wanted the optical sensor to peer through where the ball went, I needed it to be centered, but the bluetooth mouse’s board was slightly too wide to do this. Luckily the only thing on that part was the right mouse button, which I had to move anyways, and the connector for the batteries, which I was already replacing with a Lithium battery. + + I unfortunately had to scrape away some of the solder mask from the underside of the board to solder on a wire for the power connection, since all the plated holes were on the cutoff part (I couldn’t trace it to any of the pins on the sensor, I suspect there was some voltage conversioning happening). I also had to solder a piece of 30AWG wire directly to the surface mounted bluetooth module for right click, since that trace went all the way around the outside edge of the board. I also cut down the plastic lens to fit inside the ball door of the original mouse. miraculously the distance between the sensor and the desk was exactly the same as the thickness of the ball hatch. ## Day 3: Assembly + +{% include figure-image.html + src="img-15-small.jpg" + float="left" + caption="electrical assembly" %} + The final major component of the mouse were the left and right click buttons. I used some strip-board cut into a C-shape to accommodate the charging port in the center, which had its middle pin (shorted to ground while disconnected) soldered to it for mechanical support. This was connected to the 5V input on the [charging module](https://www.adafruit.com/product/1904), as well as to the button and common pins of the logic board. Once I had cleaned up the wiring I had a somewhat useful bluetooth mouse (only clicking required pressing the microswitches directly) Next came the part of the project I was putting off: the scroll wheel. there isnt enough room for the scroll wheel to go between the click buttons, both vertically due to the charge port placement and because the buttons were small enough already. I decided to cut a slot in the side for a mouse wheel to fit that would be operated with the thumb, with a separate button for the middle mouse click (I decided the mechanism for a clicking scroll wheel was too complicated. I also cut a hole for the status LED and a power switch, which I had accidentally neglected before +{% include figure-gallery.html + src="img-16-small.jpg img-17-small.jpg" + alt="Putting the pieces together" %} + After this, I did the final assembly by glueing each part in using hot glue, since hot glue can easily be removed by peeling it off or heating with a soldering iron if necessary. I needed to shim the mouse buttons with a bit of wood so they would hit the microswitches correctly (I’ll likely print some nicer looking shims later). I think the final result looks pretty good, and the modifications don’t look to out of place compared to the original apple hardware. If I were to repeat the project I think I would have taken greater care with cutting the case, and perhaps found a way to make a scroll wheel that matches the shade of beige used at the time. The plastic is yellowed, but I think I like it like that, it adds a bit of authenticity. + +{% include figure-gallery.html + src="img-19-small.jpg img-20-small.jpg : img-18-small.jpg" + alt="The Finished Product" %} diff --git a/css/style.scss b/css/style.scss index d58f1f4..df03332 100644 --- a/css/style.scss +++ b/css/style.scss @@ -142,6 +142,7 @@ p { } h1,h2,h3 { + clear: both; margin: { top: 0px; bottom: 10px; @@ -159,38 +160,74 @@ small { font-size: 0.8em; } -figure { +.figure-gallery { margin: 0; + .gallery-grid { + margin-left: -20px; + margin-right: -20px; + line-height: 0; - .figure-contents { display: flex; flex-flow: row wrap; justify-content: center; + + img { + width: auto; + margin: 3px; + height: 220px; + + } + + @media screen and (max-width: 500px) { + margin-left: -20px; + + img { + height: 160px + } + } + } - a { - padding: 3px; + .gallery-solo { margin: 0; - height: 100%; - width: auto; - flex-basis: auto; - flex-shrink: 1; - - } - - img { - margin: auto; - max-height: 240px; - min-height: 100px; - } - - figcaption { - text-align: center; + line-height: 0; + img { + height: auto; + width: 100%; + margin: 3px auto; + } } } +.figure-image { + width: 100%; + margin: 0; + margin-bottom: 20px; + + img { + width: 100%; + height: auto; + } +} + +.figure-float { + width: 50%; + margin: 10px; + + img { + width: 100%; + height: auto; + } +} + +figcaption { + text-align: center; + +} + + // narrow screens override @media screen and (max-width: $mobile-width) { diff --git a/images/2017-11-13-Apple-Mouse/img-11-small.jpg b/images/2017-11-13-Apple-Mouse/img-11-small.jpg index 05c192f..ed58876 100644 --- a/images/2017-11-13-Apple-Mouse/img-11-small.jpg +++ b/images/2017-11-13-Apple-Mouse/img-11-small.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:13ccbc06bbceb9bf45c618c4db9ba0dc5d9b19aa8059a9f07b8a871f7dace193 -size 46345 +oid sha256:feed6aa03994d53c7c3bc5ece8fdab9ec47cf66e231b08277f05cf94618f61c0 +size 39026 diff --git a/images/2017-11-13-Apple-Mouse/img-19-small.jpg b/images/2017-11-13-Apple-Mouse/img-19-small.jpg index 32d00e7..a57ed28 100644 --- a/images/2017-11-13-Apple-Mouse/img-19-small.jpg +++ b/images/2017-11-13-Apple-Mouse/img-19-small.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1e0c37e68271ce3e10a08e75a40668e0365e928e3d0167b9c218cd3836de7d2b -size 32074 +oid sha256:aba23b6f7f3b670f36bfad1288d8c1dcf87496d9460c00790318148b9abbcbb2 +size 30194 diff --git a/images/2017-11-13-Apple-Mouse/img-20-small.jpg b/images/2017-11-13-Apple-Mouse/img-20-small.jpg index 4a2d000..7f807e5 100644 --- a/images/2017-11-13-Apple-Mouse/img-20-small.jpg +++ b/images/2017-11-13-Apple-Mouse/img-20-small.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:18e6163e82151fec7e551749ba8d87aad6a08a7b4023acd74807819de7b7584a -size 38312 +oid sha256:a6006082df2ae82f8b2252440ed2c9fba3c061dfeef3feaa9020804b815ef0a4 +size 30076 diff --git a/images/2017-11-13-Apple-Mouse/img-6-small.jpg b/images/2017-11-13-Apple-Mouse/img-6-small.jpg index 99bc989..a7741d7 100644 --- a/images/2017-11-13-Apple-Mouse/img-6-small.jpg +++ b/images/2017-11-13-Apple-Mouse/img-6-small.jpg @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9d4ce5a316b196dcebcafdbc45f7a9c47b533f4e08604f4be8312d4c0616a925 -size 44394 +oid sha256:39e9fffd75d59c07bd9baafe7477b7ccb18aaa186d6b852a38c6a74275745540 +size 44384