more progress

Signed-off-by: Sean Cross <sean@xobs.io>
2022-04-07 12:57:48 +08:00 · 2022-04-07 12:57:48 +08:00 · 0decfd5ea5
parent bf81312e84
commit 0decfd5ea5
12 changed files with 513 additions and 43 deletions
--- a/dist/theme/fossasia2022.css
+++ b/dist/theme/fossasia2022.css
@ -0,0 +1,396 @@
+/**
+ * League theme for reveal.js.
+ *
+ * This was the default theme pre-3.0.0.
+ *
+ * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
+ */
+@import url(./fonts/league-gothic/league-gothic.css);
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
+
+section.has-light-background,
+section.has-light-background h1,
+section.has-light-background h2,
+section.has-light-background h3,
+section.has-light-background h4,
+section.has-light-background h5,
+section.has-light-background h6 {
+  color: #222;
+}
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+:root {
+  --r-background-color: #2b2b2b;
+  --r-main-font: Lato, sans-serif;
+  --r-main-font-size: 40px;
+  --r-main-color: #eee;
+  --r-block-margin: 20px;
+  --r-heading-margin: 0 0 20px 0;
+  --r-heading-font: League Gothic, Impact, sans-serif;
+  --r-heading-color: #eee;
+  --r-heading-line-height: 1.2;
+  --r-heading-letter-spacing: normal;
+  --r-heading-text-transform: uppercase;
+  --r-heading-text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
+  --r-heading-font-weight: normal;
+  --r-heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
+  --r-heading1-size: 3.77em;
+  --r-heading2-size: 2.11em;
+  --r-heading3-size: 1.55em;
+  --r-heading4-size: 1em;
+  --r-code-font: monospace;
+  --r-link-color: #13DAEC;
+  --r-link-color-dark: #0d99a5;
+  --r-link-color-hover: #71e9f4;
+  --r-selection-background-color: #FF5E99;
+  --r-selection-color: #fff;
+}
+
+.reveal-viewport {
+  background: #1c1e20;
+  background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
+  background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
+  background-color: var(--r-background-color);
+}
+
+.reveal {
+  font-family: var(--r-main-font);
+  font-size: var(--r-main-font-size);
+  font-weight: normal;
+  color: var(--r-main-color);
+}
+
+.reveal .footer {
+  background-image: url("../../media/fossasia-logo.png");
+  background-repeat: no-repeat;
+  background-size: 10%;
+  background-position-x: 50px;
+  width: 100%;
+  height: 68px;
+  position: absolute;
+  bottom: 0em;
+  right: 0em;
+  padding-bottom: 1em;
+  padding-right: 1em;
+  text-align: right;
+  font-size: 0.5em;
+  width: 100%;
+  height: 68px;
+  background-color: rgb(78, 78, 78);
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  z-index: 1;
+}
+
+.reveal ::selection {
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
+
+.reveal ::-moz-selection {
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
+
+.reveal .slides section,
+.reveal .slides section>section {
+  line-height: 1.3;
+  font-weight: inherit;
+}
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: var(--r-heading-margin);
+  color: var(--r-heading-color);
+  font-family: var(--r-heading-font);
+  font-weight: var(--r-heading-font-weight);
+  line-height: var(--r-heading-line-height);
+  letter-spacing: var(--r-heading-letter-spacing);
+  text-transform: var(--r-heading-text-transform);
+  text-shadow: var(--r-heading-text-shadow);
+  word-wrap: break-word;
+}
+
+.reveal h1 {
+  font-size: var(--r-heading1-size);
+}
+
+.reveal h2 {
+  font-size: var(--r-heading2-size);
+}
+
+.reveal h3 {
+  font-size: var(--r-heading3-size);
+}
+
+.reveal h4 {
+  font-size: var(--r-heading4-size);
+}
+
+.reveal h1 {
+  text-shadow: var(--r-heading1-text-shadow);
+}
+
+/*********************************************
+ * OTHER
+ *********************************************/
+.reveal p {
+  margin: var(--r-block-margin) 0;
+  line-height: 1.3;
+}
+
+/* Remove trailing margins after titles */
+.reveal h1:last-child,
+.reveal h2:last-child,
+.reveal h3:last-child,
+.reveal h4:last-child,
+.reveal h5:last-child,
+.reveal h6:last-child {
+  margin-bottom: 0;
+}
+
+/* Ensure certain elements are never larger than the slide itself */
+.reveal img,
+.reveal video,
+.reveal iframe {
+  max-width: 95%;
+  max-height: 95%;
+}
+
+.reveal strong,
+.reveal b {
+  font-weight: bold;
+}
+
+.reveal em {
+  font-style: italic;
+}
+
+.reveal ol,
+.reveal dl,
+.reveal ul {
+  display: inline-block;
+  text-align: left;
+  margin: 0 0 0 1em;
+}
+
+.reveal ol {
+  list-style-type: decimal;
+}
+
+.reveal ul {
+  list-style-type: disc;
+}
+
+.reveal ul ul {
+  list-style-type: square;
+}
+
+.reveal ul ul ul {
+  list-style-type: circle;
+}
+
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
+  display: block;
+  margin-left: 40px;
+}
+
+.reveal dt {
+  font-weight: bold;
+}
+
+.reveal dd {
+  margin-left: 40px;
+}
+
+.reveal blockquote {
+  display: block;
+  position: relative;
+  width: 70%;
+  margin: var(--r-block-margin) auto;
+  padding: 5px;
+  font-style: italic;
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
+
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
+  display: inline-block;
+}
+
+.reveal q {
+  font-style: italic;
+}
+
+.reveal pre {
+  display: block;
+  position: relative;
+  width: 90%;
+  margin: var(--r-block-margin) auto;
+  text-align: left;
+  font-size: 0.75em;
+  font-family: var(--r-code-font);
+  line-height: 1.2em;
+  word-wrap: break-word;
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+}
+
+.reveal code {
+  font-family: var(--r-code-font);
+  text-transform: none;
+  tab-size: 2;
+}
+
+.reveal pre code {
+  display: block;
+  padding: 5px;
+  overflow: auto;
+  max-height: 400px;
+  word-wrap: normal;
+}
+
+.reveal .code-wrapper {
+  white-space: normal;
+}
+
+.reveal .code-wrapper code {
+  white-space: pre;
+}
+
+.reveal table {
+  margin: auto;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.reveal table th {
+  font-weight: bold;
+}
+
+.reveal table th,
+.reveal table td {
+  text-align: left;
+  padding: 0.2em 0.5em 0.2em 0.5em;
+  border-bottom: 1px solid;
+}
+
+.reveal table th[align=center],
+.reveal table td[align=center] {
+  text-align: center;
+}
+
+.reveal table th[align=right],
+.reveal table td[align=right] {
+  text-align: right;
+}
+
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.reveal sup {
+  vertical-align: super;
+  font-size: smaller;
+}
+
+.reveal sub {
+  vertical-align: sub;
+  font-size: smaller;
+}
+
+.reveal small {
+  display: inline-block;
+  font-size: 0.6em;
+  line-height: 1.2em;
+  vertical-align: top;
+}
+
+.reveal small * {
+  vertical-align: top;
+}
+
+.reveal img {
+  margin: var(--r-block-margin) 0;
+}
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a {
+  color: var(--r-link-color);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.reveal a:hover {
+  color: var(--r-link-color-hover);
+  text-shadow: none;
+  border: none;
+}
+
+.reveal .roll span:after {
+  color: #fff;
+  background: var(--r-link-color-dark);
+}
+
+/*********************************************
+ * Frame helper
+ *********************************************/
+.reveal .r-frame {
+  border: 4px solid var(--r-main-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+}
+
+.reveal a .r-frame {
+  transition: all 0.15s linear;
+}
+
+.reveal a:hover .r-frame {
+  border-color: var(--r-link-color);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls {
+  color: var(--r-link-color);
+}
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2);
+  color: var(--r-link-color);
+}
+
+/*********************************************
+ * PRINT BACKGROUND
+ *********************************************/
+@media print {
+  .backgrounds {
+    background-color: var(--r-background-color);
+  }
+}
--- a/index.html
+++ b/index.html
@ -9,10 +9,10 @@

    <link rel="stylesheet" href="dist/reset.css">
    <link rel="stylesheet" href="dist/reveal.css">
-    <link rel="stylesheet" href="dist/theme/night.css">
+    <link rel="stylesheet" href="dist/theme/fossasia2022.css">

    <!-- Theme used for syntax highlighted code -->
-    <link rel="stylesheet" href="plugin/highlight/monokai.css">
+    <link rel="stylesheet" href="plugin/highlight/zenburn.css">
 </head>

 <!--
@ -80,17 +80,32 @@

 <body>
    <div class="reveal">
+        <div class="footer">
+            <a class="url" href="https://p.xobs.io/fa22/">p.xobs.io/fa22</a>
+        </div>
        <div class="slides">
            <section>
+                <section>
+                    <h2>Renode: Easy CI for your Weird Hardware</h2>
+                    <h3>Sean Cross</h3>
+                </section>
                <section>
                    <h2>Renode</h2>
                    <p>I find it a useful tool. Maybe you will, too!
                </section>
+                <section>
+                    <h2>What is "Weird Hardware"?</h2>
+                    <ul>
+                        <li>Hardware that there is only one of (because you just made it)</li>
+                        <li>Hardware that you're trying to understand</li>
+                        <li>Hardware that uses ARM, i386, PowerPC, Risc-V, Sparc, or Xtensa</li>
+                    </ul>
+                </section>
                <section>
                    <h2>About Me: I Do Weird Hardware</h2>
                    <ul>
-                        <li>Simmel: Contact Tracing with Audio</li>
-                        <li>Chibitronics: Programming Stickers with Audio</li>
+                        <li>Betrusted/Precursor: FPGA Secure Communications</li>
+                        <li>Fomu: World's Smallest FPGA Dev Board</li>
                        <li>Novena: Open Source Laptop</li>
                        <li>Senoko: Open Source Power Board for Novena</li>
                    </ul>
@ -113,20 +128,20 @@
                        <li>MIT Licensed</li>
                    </ul>
                </section>
-                <section>
+                <!-- <section>
                    <h2>About This Talk</h2>
                    <ul>
                        <li>Overview of Emulators</li>
                        <li>Oevrview of Weird Hardware</li>
                        <li>Cool things you can do</li>
                    </ul>
-                </section>
+                </section> -->
                <section>
-                    <h2>Who will find this interesting?</h2>
+                    <h2>Who Might Find This Talk Interesting?</h2>
                    <ul>
-                        <li>Creators: Those making new boards or hardware</li>
-                        <li>Integrators: Running CI on firmware files</li>
-                        <li>Reverse Engineers: Understanding new hardware and firmware</li>
+                        <li>Creators</li>
+                        <li>Integrators</li>
+                        <li>Reverse Engineers</li>
                    </ul>
                </section>
                <section>
@ -134,7 +149,8 @@
                    <ul>
                        <li>Reusing an existing platform</li>
                        <li>Reusing an existing microcontroller</li>
-                        <li>New microcontroller fron existing family</li>
+                        <li>New microcontroller from existing family</li>
+                        <li>New microcontroller with a common CPU</li>
                    </ul>
                </section>
                <section>
@ -146,7 +162,6 @@
                        </ul>
                        <li>Hardware crunch makes it difficult to get hardware</li>
                        <li>Downloading software is much cheaper than shipping</li>
-                        <li>Can run tests on every code push</li>
                    </ul>
                </section>
                <section>
@ -154,22 +169,13 @@
                    <ul>
                        <li>Staring at code flow is enlightening, but time-consuming</li>
                        <li>What is it doing and how does it get there?</li>
-                        <li>How can we make it do $x?</li>
                    </ul>
+                    <img src="media/bluenrg-ghidra-trace.png" class="fragment">
                </section>
            </section>
            <section>
-                <section data-transition="fade-out">
-                    <h2>What is an Emulator?</h2>
-                    <img class="fragment" src="media/bbs-example.png">
-                </section>
-                <section data-transition="fade">
-                    <h2>What is an Emulator?</h2>
-                    <img src="media/DEC_VT100_terminal_cropped.jpg">
-                </section>
-                <section data-transition="fade-in slide-out">
-                    <h2>What is an Emulator?</h2>
-                    <img src="media/bbs-example.png">
+                <section>
+                    <h2>What Is an Emulator?</h2>
                </section>
                <section data-transition="slide-in fade-out">
                    <h2>Whole-System Emulator</h2>
@ -201,14 +207,29 @@
                        <li>Rosetta on Mac</li>
                    </ul>
                </section>
+                <section data-transition="slide-in fade-out">
+                    <h2>What is an Emulator?</h2>
+                    <img class="fragment" src="media/bbs-example.png">
+                </section>
+                <section data-transition="fade">
+                    <h2>What is an Emulator?</h2>
+                    <img src="media/DEC_VT100_terminal_cropped.jpg">
+                </section>
+                <section data-transition="fade-in slide-out">
+                    <h2>What is an Emulator?</h2>
+                    <img src="media/bbs-example.png">
+                </section>
                <section>
+                    <h2>Emulation Depends on your Goals!</h2>
+                </section>
+                <!-- <section>
                    <h2>Renode Is Many of These</h2>
                    <ul>
                        <li>Console: Able to present an interactive environment</li>
                        <li>Transparent: Can run in CI via Robot commands</li>
                        <li>Debugger: Has a GDB server built in</li>
                    </ul>
-                </section>
+                </section> -->
            </section>

            <section>
@ -246,10 +267,10 @@
                    <h2>What is a Computer?</h2>
                    <img src="media/bluenrg-block-diagram-peripherals.png">
                </section>
-                <section>
+                <!-- <section>
                    <h2>What is a Computer?</h2>
                    <img src="media/bluenrg-peripherals.png">
-                </section>
+                </section> -->
                <section>
                    <h2>What is a Computer?</h2>
                    <img src="media/bluenrg-memory-map.png">
@ -260,7 +281,7 @@
                </section>
                <section>
                    <h2>Defining a Computer in Renode</h2>
-                    <pre><code data-trim>
+                    <pre><code data-trim data-line-numbers="|1-5|7-8|10-13">
                        flash: Memory.MappedMemory @ sysbus 0x00000000
                            size: 0x00008000

@ -301,15 +322,16 @@
                    <pre class="fragment"><code data-trim>
                        sysbus LoadBinary @rom.bin 0x20000000
                    </code></pre>
-                    <pre class="fragment"><code data-trim>
+                    <!-- <pre class="fragment"><code data-trim>
                        sysbus LoadSymbolsFrom @rom.elf
-                    </code></pre>
+                    </code></pre> -->
                </section>
                <section>
                    <h2>How does Renode Interact With $VENDOR_TOOL?</h2>
                    <ul>
                        <li>Hopefully your vendor tool produces ELF files</li>
-                        <li class="fragment">At the end of the day, it's all bytes. Just use <code>LoadBinary</code>!
+                        <li class="fragment">HEX? BIN? Just use <code>LoadBinary</code>!
+                        <li class="fragment">Custom firmware format? Need to unpack first.</li>
                        </li>
                    </ul>
                </section>
@ -324,8 +346,11 @@
                        <li>Jump to loaded program</li>
                    </ol>
                    <pre class="fragment"><code data-trim>
+                        sysbus LoadBinary @rom.bin 0x20000000
                        sysbus.cpu VectorTableOffset 0x20000000
-                        sysbus.cpu PC 0x20000c00
+                        sysbus.cpu SP `sysbus ReadDoubleWord 0x20000000`
+                        sysbus.cpu PC `sysbus ReadDoubleWord 0x20000004`
+                        start
                    </code></pre>
                </section>
            </section>
@ -341,7 +366,19 @@
                        <li>They are easy to script</li>
                    </ul>
                </section>
-                <section data-transition="fade-out">
+                <section>
+                    <h2>What is a Computer?</h2>
+                    <img src="media/bluenrg-memory-map.png">
+                </section>
+                <section data-transition="slide-in fade-out">
+                    <h2>What is a Register?</h2>
+                    <img src="media/pl011-bluenrg.png">
+                </section>
+                <section data-transition="fade">
+                    <h2>What is a Register?</h2>
+                    <img src="media/pl011-bluenrg-field.png">
+                </section>
+                <section data-transition="fade">
                    <h2>What is a Register?</h2>
                    <img src="media/pl011-bluenrg.png">
                    <img class="fragment" src="media/pl011-cc2538-cropped.png">
@ -376,6 +413,17 @@
                            PerformanceInMips: 24
                    </code></pre>
                </section>
+                <section>
+                    <h2>Setting up Renode</h2>
+                    <pre data-id="code-animation"><code data-trim>
+                        machine LoadPlatformDescription @bluenrg-1.repl
+                        sysbus LoadBinary @BLE_Chat_Server.bin 0x10040000
+                        cpu VectorTableOffset 0x10040000
+                        cpu SP `sysbus ReadDoubleWord 0x10040000`
+                        cpu PC `sysbus ReadDoubleWord 0x10040004`
+                        start
+                    </code></pre>
+                </section>
                <section>
                    <h2>Output Success!</h2>
                    <img src="media/bluenrg-renode-uart.png">
@ -413,7 +461,10 @@
                    </ul>
                </section>
                <section>
-                    <h2>Example Serial Port</h2>
+                    <h2>Modify an Existing Block</h2>
+                </section>
+                <section>
+                    <h2>Example Serial Port: LiteX UART</h2>
                    <pre class="code-animation"><code class="cs" data-trim data-line-numbers="|132-140|118-126|125|20-33">
                    //
                    // Copyright (c) 2010-2018 Antmicro
@ -575,6 +626,14 @@
                        <li class="fragment">Most writes can be ignored</li>
                    </ul>
                </section>
+                <section>
+                    <h2>Peripheral Rapid Development</h2>
+                    <img src="media/hardware-20191117-cropped.jpg">
+                </section>
+                <section>
+                    <h2>Peripheral Rapid Development</h2>
+                    <video class="r-stretch" data-autoplay src="media/Renode-20191117-trimmed.m4v"></video>
+                </section>
                <section data-transition="fade-out">
                    <h2>Advantages of Emulation</h2>
                    <img src="media/betrusted-soc-uart-mux.png">
@ -583,6 +642,14 @@
                    <h2>Advantages of Emulation</h2>
                    <img src="media/renode-xous-double-uart-tiled.png">
                </section>
+                <section>
+                    <h2>Getting Hardware to Users</h2>
+                    <img src="media/betrusted-wycheproof-patch.png">
+                </section>
+                <section>
+                    <h2>Getting Hardware to Users</h2>
+                    <img src="media/betrusted-wycheproof-patch-fix.png">
+                </section>
            </section>
            <!-- 
            <section>
@ -798,7 +865,7 @@
                </section>
                <section>
                    <h2>SVD: Using with Renode</h2>
-                    <pre class="code-animation"><code data-trim data-line-numbers="|1-6|8-18|20-26|28-40">
+                    <pre class="code-animation"><code data-trim>
                        sysbus ApplySVD @BlueNRG2.svd
                    </code></pre>
                    <img class="fragment" src="media/bluenrg-renode-svd.png">
@ -817,16 +884,23 @@
                    <img src="media/ghidra-decompile.png">
                </section>
            </section>
-            <section>
-                <h2>Multi-System Emulation</h2>
-                <img src="media/renode-multi-system.png">
-            </section>
-            <section>
-                <h2>Multi-System Emulation</h2>
-                <img src="media/betrusted-ec-com-1.png">
-            </section>
            <section>

+                <section>
+                    <h2>Multi-System Emulation</h2>
+                    <img src="media/betrusted-ec-com-1.png">
+                </section>
+                <section>
+                    <h2>Multi-System Emulation</h2>
+                    <img src="media/renode-multi-system.png">
+                </section>
+            </section>
+            <section>
+                <h2>Renode is Free Software</h2>
+                Give it a try!
+            </section>
+            <section>
+                <h2>Thank you for your time</h2>
            </section>
        </div>
    </div>
--- a/media/DEC_VT100_terminal_cropped.jpg
+++ b/media/DEC_VT100_terminal_cropped.jpg
--- a/media/Renode-20191117-trimmed.m4v
+++ b/media/Renode-20191117-trimmed.m4v
--- a/media/betrusted-ec-com-1.png
+++ b/media/betrusted-ec-com-1.png
--- a/media/betrusted-wycheproof-patch-fix.png
+++ b/media/betrusted-wycheproof-patch-fix.png
--- a/media/betrusted-wycheproof-patch.png
+++ b/media/betrusted-wycheproof-patch.png
--- a/media/bluenrg-ghidra-trace.png
+++ b/media/bluenrg-ghidra-trace.png
--- a/media/fossasia-logo.png
+++ b/media/fossasia-logo.png
--- a/media/hardware-20191117-cropped.jpg
+++ b/media/hardware-20191117-cropped.jpg
--- a/media/pl011-arm.png
+++ b/media/pl011-arm.png
--- a/media/pl011-bluenrg-field.png
+++ b/media/pl011-bluenrg-field.png