Initial board SVG and basic simulator

sim/visuals/pincontrol.ts

@@ -0,0 +1,92 @@
+namespace pxsim.visuals {
+    export class AnalogPinControl {
+        private outerElement: SVGElement;
+
+        private innerCircle: SVGCircleElement;
+        private gradient: SVGLinearGradientElement;
+        private currentValue: number;
+        private pin: Pin;
+
+        constructor(private parent: EV3BoardSvg, private defs: SVGDefsElement, private id: CPlayPinName, name: string) {
+            this.pin = board().edgeConnectorState.getPin(this.id);
+
+            // Init the button events
+            this.outerElement = parent.element.getElementById(name) as SVGElement;
+            svg.addClass(this.outerElement, "sim-pin-touch");
+            this.addButtonEvents();
+
+
+            // Init the gradient controls
+            // const gid = `gradient-${CPlayPinName[id]}-level`;
+            // this.innerCircle = parent.element.getElementById("PIN_CONNECTOR_" + CPlayPinName[id]) as SVGCircleElement;
+            // this.gradient = svg.linearGradient(this.defs, gid);
+            // this.innerCircle.setAttribute("fill", `url(#${gid})`);
+            // this.innerCircle.setAttribute("class", "sim-light-level-button")
+            // this.addLevelControlEvents()
+
+            this.updateTheme();
+        }
+
+        public updateTheme() {
+            const theme = this.parent.props.theme;
+            svg.setGradientColors(this.gradient, theme.lightLevelOff, 'darkorange');
+        }
+
+        public updateValue() {
+            const value = this.pin.value;
+
+            if (value === this.currentValue) {
+                return;
+            }
+
+            this.currentValue = value;
+
+            // svg.setGradientValue(this.gradient, 100 - Math.min(100, Math.max(0, Math.floor(value * 100 / 1023))) + '%')
+            // if (this.innerCircle.childNodes.length) {
+            //    this.innerCircle.removeChild(this.innerCircle.childNodes[0])
+            // }
+
+            svg.title(this.outerElement, value.toString());
+        }
+
+        private addButtonEvents() {
+            this.outerElement.addEventListener(pointerEvents.down, ev => {
+                this.pin.touched = true;
+                svg.addClass(this.outerElement, "touched");
+
+                (pxtcore.getTouchButton(this.id - 1) as CommonButton).setPressed(true);
+            })
+            this.outerElement.addEventListener(pointerEvents.leave, ev => {
+                this.pin.touched = false;
+                svg.removeClass(this.outerElement, "touched");
+
+                (pxtcore.getTouchButton(this.id - 1) as CommonButton).setPressed(false);
+            })
+            this.outerElement.addEventListener(pointerEvents.up, ev => {
+                this.pin.touched = false;
+                svg.removeClass(this.outerElement, "touched");
+
+                (pxtcore.getTouchButton(this.id - 1) as CommonButton).setPressed(false);
+            })
+        }
+
+        private addLevelControlEvents() {
+            const cy = parseFloat(this.innerCircle.getAttribute("cy"));
+            const r = parseFloat(this.innerCircle.getAttribute("r"));
+            const pt = this.parent.element.createSVGPoint();
+
+            svg.buttonEvents(this.innerCircle,
+                (ev) => {
+                    const pos = svg.cursorPoint(pt, this.parent.element, ev);
+                    const rs = r / 2;
+                    const level = Math.max(0, Math.min(1023, Math.floor((1 - (pos.y - (cy - rs)) / (2 * rs)) * 1023)));
+
+                    if (level != this.pin.value) {
+                        this.pin.value = level;
+                        this.updateValue();
+                    }
+                }, ev => { },
+                ev => { });
+        }
+    }
+}