Write the rest of the slides
This commit is contained in:
parent
7478cddec9
commit
2d0c301dad
GPG key ID:
57AFB45680EDD477
3 changed files with 210 additions and 5 deletions
200
src/index.html
200
src/index.html
|
|
@ -151,9 +151,9 @@
|
|||
- Image is just pixels (RGB)
|
||||
</aside>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="r-fit-text">2. Thresholding</h2>
|
||||
<p class="fragment">Demo 🤞</p>
|
||||
<section data-background-image="https://docs.opencv.org/4.x/singlemarkersthresh.png">
|
||||
<h2 class="r-fit-text text-shadow">2. Thresholding</h2>
|
||||
<p class="fragment text-shadow">Demo 🤞</p>
|
||||
<aside class="notes" data-markdown>
|
||||
- Images aren't black and white
|
||||
- This slide is
|
||||
|
|
@ -167,6 +167,200 @@
|
|||
- Useful in future
|
||||
</aside>
|
||||
</section>
|
||||
<section>
|
||||
<section>
|
||||
<h2 class="r-fit-text">3. Edge Detection</h2>
|
||||
<aside class="notes" data-markdown>
|
||||
- Marker edges are straight lines
|
||||
- Markers are squares
|
||||
- Well, quadralaterals
|
||||
- Filter to find hard edges
|
||||
- Are neighbouring pixels sufficiently different from eachother?
|
||||
- Find collections with 4 sides
|
||||
</aside>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="r-fit-text">3a. Contour Refinement</h2>
|
||||
<aside class="notes" data-markdown>
|
||||
- Only care about the square (ish) ones
|
||||
- Get rid of anything else
|
||||
- Ignore rectangles, too skewed etc
|
||||
- Remove contours within contours
|
||||
- Refinement is fast and simple
|
||||
- Latter stages are more complex
|
||||
- Exclude now whilst it's easy and cheap
|
||||
</aside>
|
||||
</section>
|
||||
</section>
|
||||
<section data-background-image="https://docs.opencv.org/4.x/singlemarkersoriginal.jpg">
|
||||
<h2 class="r-fit-text text-shadow">4. <em>Distortion</em></h2>
|
||||
<aside class="notes" data-markdown>
|
||||
- Highly unlikely a marker is directly in front of you
|
||||
- Want the simplest possible case when decoding
|
||||
- Remove the need for special casing later
|
||||
- Make our lives easier!
|
||||
- Skew the image a bit
|
||||
- Same process used for those paper scanning apps
|
||||
- Markers are now always straight on
|
||||
</aside>
|
||||
</section>
|
||||
<section data-background-image="https://docs.opencv.org/4.x/bitsextraction2.png" data-background-size="contain">
|
||||
<h2 class="r-fit-text text-shadow">5. Bit extraction</h2>
|
||||
<aside class="notes" data-markdown>
|
||||
- Convert the image into some 1s and 0s
|
||||
- Images we have are much higher resolution than the markers
|
||||
- We know how many pixels are in a marker
|
||||
- Divide it down into cells
|
||||
- Add some margins in case we're slightly off
|
||||
- Average the remaining pixels in each cell
|
||||
- Convert into 2D list
|
||||
</aside>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="r-fit-text">6. Decoding</h2>
|
||||
<aside class="notes" data-markdown>
|
||||
- Just 1s and 0s now
|
||||
- 7x7 markers have 2041 combinations
|
||||
- There are only ~255 possible combinations
|
||||
- Error checks
|
||||
- Single pixel flips can be corrected
|
||||
- Sometimes even more
|
||||
- Try all 4 rotations
|
||||
- Search "Hamming code" for more
|
||||
</aside>
|
||||
</section>
|
||||
<section data-background-image="https://docs.opencv.org/4.x/singlemarkersdetection.jpg">
|
||||
<h2 class="r-fit-text text-shadow">And done!</h2>
|
||||
<p class="fragment text-shadow">...Almost</p>
|
||||
<aside class="notes" data-markdown>
|
||||
- And that's it
|
||||
- We can now find markers in a given image
|
||||
- But what if we wanted to do a little more?
|
||||
</aside>
|
||||
</section>
|
||||
<section data-background-image="https://docs.opencv.org/4.x/singlemarkersaxes.jpg">
|
||||
<h2 class="r-fit-text text-shadow">7. Pose Estimation</h2>
|
||||
<aside class="notes" data-markdown>
|
||||
- Now know where there's a marker
|
||||
- Which way is it facing?
|
||||
- We know where the corners are
|
||||
- With some calibration, if it knows what a known-size marker looks like, it can be used to determine how far away a marker is
|
||||
- Camera lenses have some distortion (lenses aren't completely flat), so as the image moves around the camera, it skews.
|
||||
- If we account for that, we can get accurate angles
|
||||
- Out the end, we get rotation and translations from the camera
|
||||
- _complicated maths_
|
||||
- `solvePnP` in OpenCV (entertaining name)
|
||||
- "Perspective 'n' Point"
|
||||
- Requires calibration for each camera model
|
||||
- With simpler maths, can be turned into angles, distances etc
|
||||
</aside>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="r-fit-text">Another demo 🙏</h2>
|
||||
</section>
|
||||
<section>
|
||||
<section>
|
||||
<h2 class="r-fit-text">Endless possibilities 🤯</h2>
|
||||
<aside class="notes" data-markdown>
|
||||
- Markers are useful for lots of different purposes
|
||||
</aside>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="r-fit-text">A single marker provides:</h2>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<ul>
|
||||
<li class="fragment">"id"</li>
|
||||
<li class="fragment">Rotation</li>
|
||||
<li class="fragment">Bearing</li>
|
||||
<li class="fragment">Distance</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column">
|
||||
<ul>
|
||||
<li class="fragment">Object tracking</li>
|
||||
<li class="fragment">Localization</li>
|
||||
<li class="fragment">Identification</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="notes" data-markdown>
|
||||
- From just a single marker
|
||||
- id
|
||||
- Rotation
|
||||
- Bearing
|
||||
- How far away it is
|
||||
- Could be used for
|
||||
- Tracking objects
|
||||
- Working out where you are
|
||||
- Working out what something is
|
||||
</aside>
|
||||
</section>
|
||||
<section data-background-image="https://github.com/ju1ce/April-Tag-VR-FullBody-Tracker/raw/master/images/demo.gif"></section>
|
||||
<section data-background-iframe="https://www.youtube-nocookie.com/embed/5iV_hB08Uns?autoplay=1"></section>
|
||||
<section data-background-iframe="https://www.youtube-nocookie.com/embed/4sRnVUHdM4A?autoplay=1&start=17"></section>
|
||||
</section>
|
||||
<section>
|
||||
<section>
|
||||
<h2 class="r-fit-text">Don't do it yourself</h2>
|
||||
<aside class="notes" data-markdown>
|
||||
- I've run through this quickly
|
||||
- Lots of intricacies
|
||||
- OpenCV has great primitives for these operations
|
||||
- If it's good enough for JPL on Mars, it's good enough for me
|
||||
- (and you)
|
||||
- OpenCV has a built-in marker detection library called ArUco
|
||||
- Where I got lots of this from
|
||||
</aside>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="r-fit-text"><code>pip install zoloto</code></h2>
|
||||
<pre><code data-trim data-noescape>
|
||||
from pathlib import Path
|
||||
|
||||
from zoloto import MarkerType
|
||||
from zoloto.cameras import Camera
|
||||
|
||||
with Camera(marker_type=MarkerType.ARUCO_6X6) as camera:
|
||||
for frame in camera:
|
||||
print(
|
||||
"Markers I can see:",
|
||||
len(camera.get_visible_markers(frame=frame))
|
||||
)
|
||||
</code></pre>
|
||||
<aside class="notes" data-markdown>
|
||||
- If you're like me
|
||||
- Know Python
|
||||
- Lazy
|
||||
- I wrote a library to help
|
||||
- Wraps OpenCV's ArUco, but with a much nicer API
|
||||
</aside>
|
||||
</section>
|
||||
</section>
|
||||
<section data-background-image="https://i.ytimg.com/vi/JICMv4TAFMA/maxresdefault.jpg">
|
||||
<aside class="notes" data-markdown>
|
||||
- Now you know how these markers work
|
||||
- Makes for great geeky pub conversation
|
||||
</aside>
|
||||
</section>
|
||||
<section>
|
||||
<h2>More‽</h2>
|
||||
<ul class="r-fit-text">
|
||||
<li>Slides: <a href="https://slides.jakehoward.tech">slides.jakehoward.tech</a></li>
|
||||
<li>Student Robotics: <a href="https://studentrobotics.org">studentrobotics.org</a></li>
|
||||
<li>OpenCV: <a href="https://docs.opencv.org/4.x/d5/dae/tutorial_aruco_detection.html">opencv.org</a></li>
|
||||
<li>AptilTag: <a href="https://april.eecs.umich.edu/software/apriltag">april.eecs.umich.edu</a></li>
|
||||
<li>🐦 <a class="has-text-primary" href="https://twitter.com/realorangeone">@RealOrangeOne</a></li>
|
||||
</ul>
|
||||
<aside class="notes" data-markdown>
|
||||
- Notes are available online
|
||||
- Find out more about Student Robotics
|
||||
- If your company likes sponsoring charities, let's chat
|
||||
</aside>
|
||||
</section>
|
||||
<section>
|
||||
<h1 class="is-family-code"></me></h1>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="./index.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import Reveal from 'reveal.js';
|
||||
import Markdown from 'reveal.js/plugin/markdown/markdown.js';
|
||||
import Notes from 'reveal.js/plugin/notes/notes.js';
|
||||
import Highlight from 'reveal.js/plugin/highlight/highlight.js';
|
||||
|
||||
let deck = new Reveal({
|
||||
plugins: [ Markdown, Notes ],
|
||||
plugins: [ Markdown, Notes, Highlight ],
|
||||
controlsTutorial: false,
|
||||
hash: true
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,10 +1,20 @@
|
|||
$text: white;
|
||||
$text-strong: white;
|
||||
$primary: #e85537;
|
||||
$pre-background: none;
|
||||
$code-background: none;
|
||||
$code: $text;
|
||||
$family-code: var(--r-code-font);
|
||||
|
||||
@import "../node_modules/reveal.js/css/reveal";
|
||||
@import "../node_modules/reveal.js/css/theme/source/night";
|
||||
@import "../node_modules/bulma/bulma";
|
||||
@import "../node_modules/reveal.js/plugin/highlight/monokai.css";
|
||||
|
||||
// Bulma (the useful bits)
|
||||
@import "../node_modules/bulma/sass/utilities/_all";
|
||||
@import "../node_modules/bulma/sass/helpers/_all";
|
||||
@import "../node_modules/bulma/sass/base/_all";
|
||||
@import "../node_modules/bulma/sass/grid/_all";
|
||||
|
||||
|
||||
.text-shadow {
|
||||
|
|
|
|||
Loading…
Reference in a new issue