[WIP] Webassembly

.devcontainer/devcontainer.json

@@ -0,0 +1,13 @@
+{
+	"image": "mcr.microsoft.com/devcontainers/rust:0-1-bullseye",
+  	// Configure tool-specific properties.
+	"customizations": {
+		// Configure properties specific to VS Code.
+		"vscode": {
+			"settings": {},
+			"extensions": [
+				"streetsidesoftware.code-spell-checker"
+			]
+		}
+	}
+}

Cargo.toml

@@ -5,4 +5,5 @@ members = [
   "src/bare-metal/useful-crates/allocator-example",
   "src/bare-metal/useful-crates/zerocopy-example",
   "src/exercises/concurrency/chat-async",
+  "src/rust-wasm-template",
 ]

src/SUMMARY.md

@@ -1,6 +1,7 @@
 # Summary
 
 [Welcome to Comprehensive Rust 🦀](welcome.md)
+
 - [Running the Course](running-the-course.md)
   - [Course Structure](running-the-course/course-structure.md)
   - [Keyboard Shortcuts](running-the-course/keyboard-shortcuts.md)
@@ -10,10 +11,9 @@
   - [Code Samples](cargo/code-samples.md)
   - [Running Cargo Locally](cargo/running-locally.md)
 
-
 # Day 1: Morning
 
-----
+---
 
 - [Welcome](welcome-day-1.md)
   - [What is Rust?](welcome-day-1/what-is-rust.md)
@@ -67,10 +67,9 @@
   - [Storing Books](exercises/day-1/book-library.md)
   - [Iterators and Ownership](exercises/day-1/iterators-and-ownership.md)
 
-
 # Day 2: Morning
 
-----
+---
 
 - [Welcome](welcome-day-2.md)
 - [Structs](structs.md)
@@ -120,10 +119,9 @@
   - [Luhn Algorithm](exercises/day-2/luhn.md)
   - [Strings and Iterators](exercises/day-2/strings-iterators.md)
 
-
 # Day 3: Morning
 
-----
+---
 
 - [Welcome](welcome-day-3.md)
 - [Generics](generics.md)
@@ -177,10 +175,9 @@
 - [Exercises](exercises/day-3/afternoon.md)
   - [Safe FFI Wrapper](exercises/day-3/safe-ffi-wrapper.md)
 
-
 # Android
 
-----
+---
 
 - [Welcome](android.md)
 - [Setup](android/setup.md)
@@ -203,10 +200,9 @@
   - [With Java](android/interoperability/java.md)
 - [Exercises](exercises/android/morning.md)
 
-
 # Bare Metal: Morning
 
-----
+---
 
 - [Welcome](bare-metal.md)
 - [no_std](bare-metal/no_std.md)
@@ -253,10 +249,9 @@
 - [Exercises](exercises/bare-metal/afternoon.md)
   - [RTC Driver](exercises/bare-metal/rtc.md)
 
-
 # Concurrency: Morning
 
-----
+---
 
 - [Welcome](concurrency.md)
 - [Threads](concurrency/threads.md)
@@ -297,19 +292,37 @@
   - [Dining Philosophers](exercises/concurrency/dining-philosophers-async.md)
   - [Broadcast Chat Application](exercises/concurrency/chat-app.md)
 
+# WebAssembly
+
+---
+
+- [WebAssembly basics](webassembly.md)
+- [Load a WASM module](webassembly/load-wasm-module.md)
+- [Expose a method](webassembly/expose-method.md)
+  - [Error handling for exposed methods](webassembly/expose-method/error-handling.md)
+- [Import Method](webassembly/import-method.md)
+  - [Error handling for imported methods](webassembly/import-method/error-handling.md)
+  - [web-sys](webassembly/import-method/web-sys.md)
+- [Expose user-defined Rust types](webassembly/expose-rust-type.md)
+- [Import user-defined Javascript types](webassembly/import-js-type.md)
+- [Limitations](webassembly/limitations.md)
+  - [Borrow Checker](webassembly/limitations/borrow-checker.md)
+  - [Closures](webassembly/limitations/closures.md)
+- [Async](webassembly/async.md)
+- [Exercises](exercises/webassembly/webassembly.md)
+  - [Camera](exercises/webassembly/camera.md)
 
 # Final Words
 
-----
+---
 
 - [Thanks!](thanks.md)
 - [Other Resources](other-resources.md)
 - [Credits](credits.md)
 
-
 # Solutions
 
-----
+---
 
 - [Solutions](exercises/solutions.md)
   - [Day 1 Morning](exercises/day-1/solutions-morning.md)

src/exercises/webassembly/camera.md

@@ -0,0 +1,50 @@
+# Camera
+
+In this exercise we will play with the camera in real time.
+
+Serve the web server and navigate to [http://localhost:8000/exercises/camera/](http://localhost:8000/exercises/camera/).
+
+You will edit [lib.rs](../../rust-wasm-template/lib.rs) as usual.
+
+Here is the basic code you will need:
+
+```rust
+extern crate console_error_panic_hook;
+
+use js_sys::Uint8ClampedArray;
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+extern "C" {
+    fn alert(s: &str);
+
+    #[wasm_bindgen(js_namespace = console)]
+    pub fn log(s: &str);
+}
+
+#[wasm_bindgen]
+pub fn setup() {
+    console_error_panic_hook::set_once();
+}
+
+#[wasm_bindgen]
+pub fn edit_bitmap(image_data: &Uint8ClampedArray, width: u32, height: u32) {
+}
+
+```
+
+We want to edit the function `edit_bitmap`. `image_data` is a reference to the [Uint8ClampedArray](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Uint8ClampedArray.html) being rendered on your screen. `Uint8ClampedArray` is a flat array of unsigned int of `8` bits.
+It represents _srgb_ image, which means that each pixel is represented as a vector of 4 elements [red, green, blue, illumination].
+The image can be thought of as a matrix of dimension `(width, height, 4)`, it is row-major.
+
+We will reuse our different implementations. So do not erase them when going from one exercise to the next.
+
+First off let's implement some methods that modify the video live:
+
+1. Paint the top half the image to black.
+2. Paint the left half of the image to white.
+3. Create an X-ray effect. This is done by mapping colors to their opposite, for instance `0<->255`, `100<->155`. Beware of illumination.
+4. _Bonus question:_  Now feel free to implement other transformations such as _greyscale_ or adding _random noise_.
+5. Let's now add functionalities to our page. In the _setup_ function create a dropdown (`<select>`) that will change which transformation to apply to the image.
+6. _Bonus question:_ Track moving objects. This can be done by figuring out only the pixels that didn't change between multiple frames. For instance, you could compute the standard deviation of the pixel and black out below a threshold.
+While this can be achieved without touching Javascript, I recommend editing it.