feat(xy-pad): Use the xy-pad to change Pan / Tilt

Instead of changing the values of pan and tilt separately using simple inputs, we now have an xy-pad
component that can change both values in a coordinate system thta is easier to use and understand.
The xy-pad is used when the "PanTiltParam" is used for a fixture.

fix #117

src/components/dmx-fixture-property/index.js

@@ -1,8 +1,9 @@
-import { LitElement, html } from 'lit-element'
+import { LitElement, html, css } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { rgbToHex } from '../../directives/rgb-to-hex.js'
 import { defaultValue } from '../../directives/default-value.js'
 import { selected } from '../../directives/selected.js'
+import '../xy-pad/xy-pad.js'
 
 
 /*
@@ -49,6 +50,22 @@ class DmxFixtureProperty extends LitElement {
     }))
   }
 
+  handleXYPadChange(e) {
+    const { realX, realY } = e.detail
+
+    const value = {
+      realX,
+      realY
+    }
+
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: {
+        value,
+        name: this.name
+      }
+    }))
+  }
+
   handleSelectChange(e) {
     const [selectedOption] = e.target.selectedOptions
     const { value } = selectedOption
@@ -60,6 +77,20 @@ class DmxFixtureProperty extends LitElement {
       }
     }))
   }
+
+  static get styles() {
+    return css`
+      .big-pad {
+        --pad-background: rgba(0, 0, 0, 1); 
+        --position-color: rgba(255, 0, 0, 1);
+        --position-radius: 5;
+        --position-line-width: 1;
+        --grid-sections: 10;
+        --grid-color: rgba(255, 255, 255, .25);
+        --grid-line-width: 1;
+      }
+    `
+  }
 
   render() {
     const { channels, property, name, value } = this
@@ -115,6 +146,27 @@ class DmxFixtureProperty extends LitElement {
         : ''
       }
 
+      ${
+        property.isPanTilt
+        ? html`
+          <xy-pad
+            width="180" 
+            height="120"
+            currentX="${defaultValue(value.realX, 0)}" 
+            currentY="${defaultValue(value.realY, 0)}" 
+            maxX="180" 
+            maxY="120"
+            labelX="pan"
+            labelY="tilt"
+
+            @changed="${e => this.handleXYPadChange(e)}"
+                  
+            class="big-pad">
+          </xy-pad>
+        `
+        : ''
+      }
+
     </div>
     `
   }

src/components/timeline/timeline-keytime.js

@@ -15,6 +15,11 @@ export default class TimelineKeytime extends Keytime {
       // Custom interpolation for Strings
       if (typeof frame1.value === 'string') {
         return frame1.value
+      } else if (frame1.value['realX'] !== undefined) {
+        return {
+          realX: Math.round(this.lerp(frame1.value.realX, frame2.value.realX, time)),
+          realY: Math.round(this.lerp(frame1.value.realY, frame2.value.realY, time))
+        }
       }
     } else {
       // Reset the regex