Merge "Add ids to flatbuffer fields in y2012, y2016, frc971, and aos"
diff --git a/aos/network/www/config_handler.ts b/aos/network/www/config_handler.ts
index c554647..8670c0a 100644
--- a/aos/network/www/config_handler.ts
+++ b/aos/network/www/config_handler.ts
@@ -33,7 +33,7 @@
       this.tree_div.appendChild(channel_div);
 
       const input_el = document.createElement('input');
-      input_el.setAttribute('data-index', i);
+      input_el.setAttribute('data-index', i.toString());
       input_el.setAttribute('type', 'checkbox');
       input_el.addEventListener('click', () => this.handleChange());
       channel_div.appendChild(input_el);
@@ -62,7 +62,7 @@
         continue;
       }
       const index = toggle.getAttribute('data-index');
-      const channel = this.config.channels(index);
+      const channel = this.config.channels(Number(index));
       const namefb = builder.createString(channel.name());
       const typefb = builder.createString(channel.type());
       Channel.startChannel(builder);
diff --git a/aos/network/www/ping_handler.ts b/aos/network/www/ping_handler.ts
index 9b37d70..a7fb0d4 100644
--- a/aos/network/www/ping_handler.ts
+++ b/aos/network/www/ping_handler.ts
@@ -4,8 +4,8 @@
   const fbBuffer = new flatbuffers.ByteBuffer(data);
   const ping = aos.examples.Ping.getRootAsPing(fbBuffer);
 
-  document.getElementById('val').innerHTML = ping.value();
-  document.getElementById('time').innerHTML = ping.sendTime().low;
+  document.getElementById('val').innerHTML = ping.value().toString();
+  document.getElementById('time').innerHTML = ping.sendTime().low.toString();
 }
 
 export function SetupDom() {
diff --git a/aos/network/www/proxy.ts b/aos/network/www/proxy.ts
index 29f055b..ee3ad69 100644
--- a/aos/network/www/proxy.ts
+++ b/aos/network/www/proxy.ts
@@ -11,7 +11,7 @@
   constructor(
       private readonly handlerFunc:
           (data: Uint8Array, sentTime: number) => void,
-      private readonly channel: RTCPeerConnection) {
+      private readonly channel: RTCDataChannel) {
     channel.addEventListener('message', (e) => this.handleMessage(e));
   }
 
@@ -49,7 +49,7 @@
 export class Connection {
   private webSocketConnection: WebSocket|null = null;
   private rtcPeerConnection: RTCPeerConnection|null = null;
-  private dataChannel: DataChannel|null = null;
+  private dataChannel: RTCDataChannel|null = null;
   private webSocketUrl: string;
 
   private configInternal: aos.Configuration|null = null;
@@ -88,7 +88,7 @@
   }
 
   getConfig() {
-    return this.config_internal;
+    return this.configInternal;
   }
 
   // Handle messages on the DataChannel. Handles the Configuration message as
@@ -128,7 +128,7 @@
   }
 
   // Called for new SDPs. Make sure to set it locally and remotely.
-  onOfferCreated(description: RTCSessionDescription): void {
+  onOfferCreated(description: RTCSessionDescriptionInit): void {
     this.rtcPeerConnection.setLocalDescription(description);
     const builder = new flatbuffers.Builder(512);
     const offerString = builder.createString(description.sdp);
@@ -151,7 +151,8 @@
     this.dataChannel = this.rtcPeerConnection.createDataChannel('signalling');
     this.handlers.add(
         new Handler((data) => this.onConfigMessage(data), this.dataChannel));
-    window.dc = this.dataChannel;
+    // TODO(james): Is this used? Can we delete it?
+    // window.dc = this.dataChannel;
     this.rtcPeerConnection.addEventListener(
         'icecandidate', (e) => this.onIceCandidate(e));
     this.rtcPeerConnection.createOffer().then(
diff --git a/aos/network/www/reflection.ts b/aos/network/www/reflection.ts
index 62cfa61..a2fe3e4 100644
--- a/aos/network/www/reflection.ts
+++ b/aos/network/www/reflection.ts
@@ -150,7 +150,7 @@
       case reflection.BaseType.Double:
         return this.bb.readFloat64(offset);
     }
-    throw new Error('Unsupported message type ' + baseType);
+    throw new Error('Unsupported message type ' + fieldType);
   }
 };
 
@@ -239,8 +239,7 @@
         return field;
       }
     }
-    throw new Error(
-        'Couldn\'t find field ' + fieldName + ' options are ' + fields);
+    throw new Error('Couldn\'t find field ' + fieldName + '.');
   }
 
   // Reads a scalar with the given field name from a Table. If readDefaults
diff --git a/y2020/www/BUILD b/y2020/www/BUILD
index 1311b7d..5e11d7c 100644
--- a/y2020/www/BUILD
+++ b/y2020/www/BUILD
@@ -10,6 +10,8 @@
     ],
     visibility = ["//y2020:__subpackages__"],
     deps = [
+        "//aos:configuration_ts_fbs",
+        "//aos/network:connect_ts_fbs",
         "//aos/network/www:proxy",
         "//y2020/vision:vision_ts_fbs",
         "//y2020/vision/sift:sift_ts_fbs",
@@ -24,6 +26,8 @@
         "field_main.ts",
     ],
     deps = [
+        "//aos:configuration_ts_fbs",
+        "//aos/network:connect_ts_fbs",
         "//aos/network/www:proxy",
         "//frc971/control_loops/drivetrain:drivetrain_status_ts_fbs",
         "//y2020/vision/sift:sift_ts_fbs",
diff --git a/y2020/www/field_handler.ts b/y2020/www/field_handler.ts
index 5053ef6..ffb4aee 100644
--- a/y2020/www/field_handler.ts
+++ b/y2020/www/field_handler.ts
@@ -84,7 +84,7 @@
 export class FieldHandler {
   private canvas = document.createElement('canvas');
   private imageMatchResult: frc971.vision.sift.ImageMatchResult|null = null;
-  private drivetrainStatus: DrivetrianStatus|null = null;
+  private drivetrainStatus: DrivetrainStatus|null = null;
 
   constructor(private readonly connection: Connection) {
     document.body.appendChild(this.canvas);
@@ -238,7 +238,7 @@
     this.drawField();
     //draw cameras
     if (this.imageMatchResult) {
-      for (const i = 0; i < this.imageMatchResult.cameraPosesLength(); i++) {
+      for (let i = 0; i < this.imageMatchResult.cameraPosesLength(); i++) {
         const pose = this.imageMatchResult.cameraPoses(i);
         const mat = pose.fieldToCamera();
         const x = mat.data(3);
diff --git a/y2020/www/image_handler.ts b/y2020/www/image_handler.ts
index e48fbfb..c84fa23 100644
--- a/y2020/www/image_handler.ts
+++ b/y2020/www/image_handler.ts
@@ -108,7 +108,7 @@
   }
 
   handleSelect(ev: Event) {
-    this.selectedIndex = ev.target.selectedIndex;
+    this.selectedIndex = (ev.target as HTMLSelectElement).selectedIndex;
   }
 
   handleImage(data: Uint8Array): void {
@@ -137,8 +137,8 @@
     this.imageBuffer = new Uint8ClampedArray(this.width * this.height * 4); // RGBA
     // Read four bytes (YUYV) from the data and transform into two pixels of
     // RGBA for canvas
-    for (const j = 0; j < this.height; j++) {
-      for (const i = 0; i < this.width; i += 2) {
+    for (let j = 0; j < this.height; j++) {
+      for (let i = 0; i < this.width; i += 2) {
         const y1 = this.image.data((j * this.width + i) * 2);
         const u = this.image.data((j * this.width + i) * 2 + 1);
         const y2 = this.image.data((j * this.width + i + 1) * 2);
@@ -194,21 +194,21 @@
     const idata = ctx.createImageData(this.width, this.height);
     idata.data.set(this.imageBuffer);
     ctx.putImageData(idata, 0, 0);
-    console.log('features: ', this.result.featuresLength();
+    console.log('features: ', this.result.featuresLength());
     if (this.selectedIndex === 0) {
-      for (const i = 0; i < this.result.featuresLength(); i++) {
+      for (let i = 0; i < this.result.featuresLength(); i++) {
         const feature = this.result.features(i);
         this.drawFeature(feature);
       }
     } else {
       console.log(this.result.imageMatchesLength(), this.result.cameraPosesLength());
       const imageMatch = this.result.imageMatches(this.selectedIndex - 1);
-      for (const i = 0; i < imageMatch.matchesLength(); i++) {
+      for (let i = 0; i < imageMatch.matchesLength(); i++) {
         const featureIndex = imageMatch.matches(i).queryFeature();
         this.drawFeature(this.result.features(featureIndex));
       }
       // Draw center of target.
-      const cameraPose = this.result.cameraPoses(this.selctedIndex - 1);
+      const cameraPose = this.result.cameraPoses(this.selectedIndex - 1);
       ctx.strokeStyle = 'red';
       ctx.beginPath();
       ctx.arc(
@@ -223,12 +223,12 @@
     }
     const defaultOption = document.createElement('option');
     defaultOption.innerText = 'Show all features';
-    defaultOption.setAttribute('value', 0);
+    defaultOption.setAttribute('value', '0');
     this.select.appendChild(defaultOption);
-    for (const i = 0; i < this.result.imageMatchesLength(); i++) {
+    for (let i = 0; i < this.result.imageMatchesLength(); i++) {
       const imageMatch = this.result.imageMatches(i);
       const option = document.createElement('option');
-      option.setAttribute('value', i + 1);
+      option.setAttribute('value', (i + 1).toString());
       option.innerText =
           `Show image ${i} features (${imageMatch.matchesLength()})`;
       this.select.appendChild(option);