/
microscope.html
300 lines (273 loc) · 16.2 KB
/
microscope.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="//use.typekit.net/eaw0jyd.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<title>USB microscope kit</title>
<meta name="description" content="A powerful microscope that simply plugs into your laptop.">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/lanes.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/swipebox.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<meta name="apple-mobile-web-app-title" content="StoneTurners">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="application-name" content="StoneTurners">
<!--Google Analytics-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-54472576-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<header class="scope-page">
<div class="container group nav-wrap subMenu">
<div class="row">
<ul id="nav" class="product">
<li id="logo"><a href="#scope-intro"><img src="images/StoneTuner_Logo_RGB_neg.svg" class="stone-logo" alt="Stone Turners"></a></li>
<li class="nav-list"><a href="#gallery">Gallery</a></li>
<li class="nav-list"><a href="#instructions">Instructions</a></li>
<li class="nav-list external-link"><a href="index.html">Home</a></li>
</ul>
<a href="#" id="pull"><img src="images/nav-icon-dark.png"></a>
</div>
</div>
<section class="tag-desktop">
<h2>Play. Prod. Hack. <strong>Discover.</strong></h2>
</section>
</header>
<div id="scope-intro" class="nav-block">
<div class="tag-mobile">
<h2>Play. Prod. Hack. <strong>Discover.</strong></h2>
</div>
<section>
<div class="container">
<div class="row">
<h3>See what you can find with our <strong>USB microscope kit.</strong></h3>
</div>
<div class="row">
<div class="button">
<a href="http://stoneturners.bigcartel.com/">Buy the kit</a>
</div>
</div>
</div>
</section>
<div class="nutshell">
<p>A powerful microscope</p>
<img src="images/scope.svg" alt="Microscope icon">
<p>that simply plugs into your laptop.</p>
<img src="images/usb.svg" alt="USB icon">
</div>
</div>
<div id="gallery" class="nav-block">
<section>
<div class="container">
<div class="row">
<h2>Here are a few things we’ve taken a look at with the scope.</h2>
</div>
</div>
<div class="container">
<div class="row">
<a href="images/BigBang_MicroscopeGrabs-3-sml.jpg" class="swipebox four columns" title="Blood worm">
<div class="card">
<img src="images/BigBang_MicroscopeGrabs-3-sml.jpg">
<span class="image-caption">Blood worm</span>
</div>
</a>
<a href="images/BigBang_MicroscopeGrabs-8-sml.jpg" class="swipebox four columns" title="Flea">
<div class="card">
<img src="images/BigBang_MicroscopeGrabs-8-sml.jpg">
<span class="image-caption">Flea</span>
</div>
</a>
<a href="images/BigBang_MicroscopeGrabs-9-sml.jpg" class="swipebox four columns" title="Graphite on paper">
<div class="card">
<img src="images/BigBang_MicroscopeGrabs-9-sml.jpg">
<span class="image-caption">Graphite on paper</span>
</div>
</a>
</div>
<div class="row">
<a href="images/BigBang_MicroscopeGrabs-13-sml.jpg" class="swipebox four columns" title="Crystal">
<div class="card">
<img src="images/BigBang_MicroscopeGrabs-13-sml.jpg">
<span class="image-caption">Crystal</span>
</div>
</a>
<a href="images/BigBang_MicroscopeGrabs-15-sml.jpg" class="swipebox four columns" title="Feather">
<div class="card">
<img src="images/BigBang_MicroscopeGrabs-15-sml.jpg">
<span class="image-caption">Feather</span>
</div>
</a>
<a href="images/BigBang_MicroscopeGrabs-17-sml.jpg" class="swipebox four columns" title="Fabric">
<div class="card">
<img src="images/BigBang_MicroscopeGrabs-17-sml.jpg">
<span class="image-caption">Fabric</span>
</div>
</a>
</div>
</div>
</section>
</div>
<div id="instructions" class="nav-block">
<section>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two">
<h2>Follow these steps to build the scope</h2>
<p>With a few simple tools and a little bit of time (we suggest you set aside about 1.5 hours to complete) you will soon be gaining a new perspective on the world and discovering things invisible to the naked eye!</p>
<p>What makes this microscope different to other USB microscopes we have seen is the use of a transparent twist container to provide an easy-to-use focusing mechanism that also protects the camera from knocks and scrapes.</p>
<p>This microscope can be used facing up, as well as down, which is particularly useful if you want to view prepared slides or water specimens.</p>
<h2>Before you start</h2>
<p>Before you start to build your microscope make sure you have all the necessary parts and tools, a suitable space in which to work, and a surface that you can cut and glue on. <a href="http://stoneturners.bigcartel.com/">A ready to assemble kit containing all of the necessary parts is available from our store.</a></p>
<p>Parts required:</p>
<ul>
<li>1 x USB Webcam</li>
<li>1 x Twist container</li>
<li>Stiff card or MDF </li>
<li>Self-adhesive neoprene strips</li>
</ul>
<img src="images/P1050894.jpg" alt="The parts">
<p>You will also require the following tools:</p>
<ul class="border">
<li>Hot glue gun (or impact adhesive)</li>
<li>Small screwdrivers (Phillips and flathead)</li>
<li>Wire snips</li>
<li>A sharp knife or scalpel</li>
<li>A fine hack saw</li>
<li>Possibly an adult ☺ (depending on how experienced you are handling hot and/or sharp things)</li>
</ul>
<h2><strong>1</strong>Dismantle your webcam</h2>
<p>The first step is to take apart your webcam. The webcam supplied in our kit can be easily dismantled with a small Philips head screwdriver and some pulling apart. The aim is to strip everything back until you are left with a small circuit board, a lens and a USB cable. Audio components are not really required so these can be removed or taped out of the way.</p>
</div>
</div/>
<div class="row">
<div class="twelve columns">
<img src="images/dismantle-webcam.jpg" alt="Dismantling the webcam">
</div>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<h2><strong>2</strong>Prepare the twist container</h2>
<p>The twist container in our kit comes with holes pre-cut. However, to be able to place your microscope on a table facing up, which is useful if you want to observe water samples for example, you need to keep the USB cable out of the way. This can be achieved by cutting a small 'notch' or channel about 5mm wide from the centre hole to the edge of the hexagonal top of the container.</p>
<img src="images/P1050890.jpg" alt="Preparing the twist pack">
<img src="images/P1050891.jpg" alt="Placing the lead">
<p class="border">Note: Make sure that when you are cutting you are using a knife with a good point, and that the container is on a suitable and stable surface e.g. a cutting mat or wood block.</p>
<h2><strong>3</strong>Reverse the lens on the webcam</h2>
<p>Unscrew the lens barrel from the webcam if you haven’t already.</p>
<img src="images/P1050690.jpg" alt="Removing the lens barrel">
<p>You now need to reattach it – upside down! The neatest way to do this is to saw the first part of the barrel off so that you are left with the ‘threaded’ section only. If you do this carefully enough (a fine saw and a vice help) you should be able to screw the barrel back in to it’s holder.</p>
<img src="images/P1050695.jpg" alt="Sawing the lens barrel">
<img src="images/P1050697.jpg" alt="Switching the order of lenses">
<img src="images/P1050698.jpg" alt="Replacing the lens barrel">
<p>And that's it! Your webcam is now a microscope (albeit a quite hard to focus microscope, but we'll soon sort that out).</p>
<p>Note: The advantage of the ‘neat’ approach is that you have some ability to ‘focus’ the lens once it is back in place (experiment to find the best position for the lens, we prefer to screw the barrel in to get the lens as close to the sensor as is possible).</p>
<p class="border">Alternatively, you can simply turn the barrel upside down and glue it in place. However, this leaves less scope for fine-tuning the focus.</p>
<h2><strong>4</strong>Mount the camera inside the twist pack</h2>
<p>Fix your modified webcam to one of the MDF rings with a little hot glue. Take care to get the camera level and central.</p>
<img src="images/P1050701.jpg" alt="Attaching camera to the MDF ring">
<img src="images/P1050705.jpg" alt="Camera is level and centred in the ring">
<p>You now need to create two neoprene ‘gaskets’ to hold the MDF ring holding your camera in place. Our kit comes with a 10mm wide strip that can be cut to give you two 5mm strips.</p>
<p>First, place a 5mm wide strip of neoprene around the inside of the top half of the twist container (the bit with the hexagonal end) so that its bottom edge is about 7mm from the bottom edge of the container edge.</p>
<img src="images/P1050711.jpg" alt="Placing first neoprene ring into twist pack">
<img src="images/P1050712.jpg" alt="Feeding in cable">
<p>Now place the MDF ring holding the camera against this first strip of Neoprene (you will need to feed the USB cable through the top hole to do this). Then add a second 5mm strip of neoprene directly below the MDF ring to ‘sandwich’ it in place. The bottom edge of this second strip should be flush with the edge of the plastic.</p>
<img src="images/P1050713.jpg" alt="Placing the webcam ring">
<img src="images/P1050714.jpg" alt="Adding second neoprene ring">
<h2><strong>5</strong>Test that everything works</h2>
<p>You're almost done!</p>
<p>Join the two halves of your twist container together and plug the microscope in to your computer. If you have the right drivers and some compatible webcam software* you should be able to create an image on screen (you may have to set your microscope webcam as the source to make this happen).</p>
<p>As a simple first test, try focusing your microscope on white area of your computer display until you get an image of the individual RGB LEDs that make up the pixels - it should look like the image below.</p>
</div>
</div>
<div class="row close-up">
<img src="images/camImage001-2.jpg" class="pixel-close four columns offset-by-four" alt="Close up of your computer screen">
</div>
<div class="row">
<div class="eight columns offset-by-two">
<p class="border">*We have been successfully using MacCam webcam drivers and CamSpinner on a Mac to capture images and record video. If you are using a PC you might require something different, or you might already have everything you need :-) If not there is plenty of help available via the power of the internetz :-)</p>
<h2><strong>6</strong>Finishing off</h2>
<p>All that remains now is to double check everything is in place and to glue the remaining MDF ring to the bottom of your twist container and the disc to the top of the container to finish things off. Hot glue works well.</p>
<p>Note: before you add the disc to the top, a little bit of hot glue where the cable exits will help prevent it being pulled out.</p>
<img src="images/P1050893.jpg" alt="Adding second MDF ring">
<img src="images/P1050892.jpg" alt="Adding MDF disk to the top">
<h2>Congratulations! You're ready to start exploring a microscopic world of wonders!</h2>
<p class="border">So there you have it! You've made yourself a powerful little USB microscope. Now you can make a start making discoveries!</p>
<h2>Licence information</h2>
<p>Unless otherwise specified, everything in this repository is covered by the following licence:</p>
</div>
</div>
<div class="row">
<a href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" class="cc eight columns offset-by-two" style="border-width:0" src="images/by-sa.png"></a>
</div>
<div class="row">
<div class="eight columns offset-by-two">
<h4><strong>USB webcam microscope</strong> by the StoneTurners is licensed under a <a href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution 4.0 International Licence.</a></h4>
<h4>Based on a work at <a href="http://www.instructables.com/id/Save-money-on-your-DIY-laboratory-robust-easy-to-f/">Instructables.com.</a></h4>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class="container nav-wrap">
<div class="row">
<div class="six columns contacts">
<a href="mailto:prod@wearestoneturners.com"><i class="fa fa-envelope"></i></a>
<a href="http://twitter.com/StoneTurning"><i class="fa fa-twitter"></i></a>
<!--<a href="http://facebook.com/wearestoneturners"><i class="fa fa-facebook-square"></i></a>-->
<a href="https://plus.google.com/103807657331129746181" rel="publisher"><i class="fa fa-google-plus-square"></i></a>
</div>
<div class="six columns open-source">
<p>We <i class="fa fa-heart"></i> open source</p>
</div>
</div>
</div>
</footer>
<script src="js/jquery.js"></script>
<script src="js/stoneturners.js"></script>
<script src="js/jquery.nav.js"></script>
<script>
$(document).ready(function() {
$('#nav').onePageNav();
});
</script>
<script src="lib/ios-orientationchange-fix.js"></script>
<!--<script src="lib/jquery-2.1.0.min.js"></script>-->
<script src="js/jquery.swipebox.js"></script>
<script type="text/javascript">
;( function( $ ) {
/* Basic Gallery */
$( '.swipebox' ).swipebox( {
useCSS : true, // false will force the use of jQuery for animations
useSVG : true, // false to force the use of png for buttons
hideBarsOnMobile : true, // false will show the caption and navbar on mobile devices
hideBarsDelay : 3000, // delay before hiding bars
beforeOpen: function() {}, // called before opening
afterClose: function() {} // called after closing
} );
} )( jQuery );
</script>
</body>
</html>