Fixes display and fonts (#85)

* change simulator svg * change radio image * Remove google fonts cdn * change color of 'advanced' button * font fix * font fix 2 * display fix * change fullsceen simulator bg * Continuous servo * handle continuous state * adding shims * update rendering for continuous servos * fixing sim * fix sig * typo * fix sim * bump pxt * bump pxt * rerun travis
2020-02-15 22:16:34 +01:00 · 2020-02-15 22:16:34 +01:00 · e4008a3a73
commit e4008a3a73
parent c200b042c6
9 changed files with 96 additions and 50 deletions
--- a/libs/core/_locales/core-jsdoc-strings.json
+++ b/libs/core/_locales/core-jsdoc-strings.json
@ -535,6 +535,7 @@
  "pins.pulseIn": "Return the duration of a pulse at a pin in microseconds.",
  "pins.pulseIn|param|name": "the pin which measures the pulse, eg: DigitalPin.P0",
  "pins.pulseIn|param|value": "the value of the pulse, eg: PulseValue.High",
+  "pins.servoSetContinuous": "Specifies that a continuous servo is connected.",
  "pins.servoSetPulse": "Configure the IO pin as an analog/pwm output and set a pulse width. The period is 20 ms period and the pulse width is set based on the value given in **microseconds** or `1/1000` milliseconds.",
  "pins.servoSetPulse|param|micros": "pulse duration in micro seconds, eg:1500",
  "pins.servoSetPulse|param|name": "pin name",
--- a/libs/core/pins.cpp
+++ b/libs/core/pins.cpp
@ -258,6 +258,14 @@ namespace pins {
        PINOP(setServoValue(value));
    }

+    /**
+    * Specifies that a continuous servo is connected.
+    */
+    //%
+    void servoSetContinuous(AnalogPin name, bool value) {
+        // handled in simulator
+    }
+
    /**
     * Configure the IO pin as an analog/pwm output and set a pulse width. The period is 20 ms period and the pulse width is set based on the value given in **microseconds** or `1/1000` milliseconds.
     * @param name pin name
--- a/libs/core/pinscompat.ts
+++ b/libs/core/pinscompat.ts
@ -48,6 +48,9 @@ interface PwmOnlyPin extends DigitalInOutPin, AnalogOutPin {

    //% parts=microservo trackArgs=0
    servoSetPulse(duration: number): void;
+
+    //% parts=microservo tracArgs=0
+    servoSetContinuous(value: boolean): void;
 }

 //% noRefCounting fixedInstances
@ -109,6 +112,10 @@ class MicrobitPin implements AnalogInPin, AnalogOutPin, AnalogInOutPin, PwmOnlyP
        pins.servoWritePin(this.analogId(), value);
    }

+    servoSetContinuous(value: boolean): void {
+        pins.servoSetContinuous(this.analogId(), value);
+    }
+
    servoSetPulse(duration: number): void {
        pins.servoSetPulse(this.analogId(), duration);
    }
--- a/libs/core/shims.d.ts
+++ b/libs/core/shims.d.ts
@ -732,6 +732,12 @@ declare namespace pins {
    //% name.fieldOptions.tooltips="false" name.fieldOptions.width="250" shim=pins::servoWritePin
    function servoWritePin(name: AnalogPin, value: int32): void;

+    /**
+     * Specifies that a continuous servo is connected.
+     */
+    //% shim=pins::servoSetContinuous
+    function servoSetContinuous(name: AnalogPin, value: boolean): void;
+
    /**
     * Configure the IO pin as an analog/pwm output and set a pulse width. The period is 20 ms period and the pulse width is set based on the value given in **microseconds** or `1/1000` milliseconds.
     * @param name pin name
--- a/sim/state/edgeconnector.ts
+++ b/sim/state/edgeconnector.ts
@ -81,6 +81,13 @@ namespace pxsim.pins {
        pin.servoAngle = value;
    }

+    export function servoSetContinuous(pinId: number, value: boolean) {
+        let pin = getPin(pinId);
+        if (!pin) return;
+
+        pin.servoSetContinuous(value);
+    }
+
    export function servoSetPulse(pinId: number, micros: number) {
        let pin = getPin(pinId);
        if (!pin) return;
--- a/sim/state/edgeconnectorsim.ts
+++ b/sim/state/edgeconnectorsim.ts
@ -17,6 +17,7 @@ namespace pxsim {
        mode = PinFlags.Unused;
        pitch = false;
        pull = 0; // PullDown
+        servoContinuous = false;

        digitalReadPin(): number {
            this.mode = PinFlags.Digital | PinFlags.Input;
@ -59,6 +60,10 @@ namespace pxsim {
            runtime.queueDisplayUpdate();
        }

+        servoSetContinuous(value: boolean) {
+            this.servoContinuous = !!value;
+        }
+
        servoSetPulse(pinId: number, micros: number) {
            // TODO
        }
--- a/sim/state/microservo.ts
+++ b/sim/state/microservo.ts
@ -10,7 +10,7 @@ namespace pxsim.visuals {
            <path id="VCC" fill="red" stroke-width="2" d="M53.72 21.93h5.504v22.627H53.72z"/>
            <path id="LOGIC" fill="#fc0" stroke-width="2" d="M47.3 21.93h5.503v22.627H47.3z"/>
            <path id="GND" fill="#a02c2c" stroke-width="2" d="M60.14 21.93h5.505v22.627H60.14z"/>
-            <path id="connector" fill="#111" stroke-width="2" d="M45.064 0a1.488 1.488 0 0 0-1.488 1.488v24.5a1.488 1.488 0 0 0 1.488 1.487h22.71a1.488 1.488 0 0 0 1.49-1.488v-24.5A1.488 1.488 0 0 0 67.774 0h-22.71z"/>
+            <path id="connector" stroke-width="2" d="M45.064 0a1.488 1.488 0 0 0-1.488 1.488v24.5a1.488 1.488 0 0 0 1.488 1.487h22.71a1.488 1.488 0 0 0 1.49-1.488v-24.5A1.488 1.488 0 0 0 67.774 0h-22.71z"/>
            <g id="crank" transform="translate(0 -752.688)">
              <path id="arm" fill="#ececec" stroke="#000" stroke-width="1.372" d="M47.767 880.88c-4.447 1.162-8.412 8.278-8.412 18.492s3.77 18.312 8.412 18.494c8.024.314 78.496 5.06 78.51-16.952.012-22.013-74.377-21.117-78.51-20.035z"/>
              <circle id="path8216" cx="56.661" cy="899.475" r="8.972" fill="gray" stroke-width="2"/>
@ -24,6 +24,7 @@ namespace pxsim.visuals {
        return { el: createMicroServoElement(), x: xy[0], y: xy[1], w: 112.188, h: 299.674 };
    }

+    const SPEED = 300; // 0.1s/60 degree
    export class MicroServoView implements IBoardPart<EdgeConnectorState> {
        public style: string = "";
        public overElement: SVGElement = undefined;
@ -61,21 +62,36 @@ namespace pxsim.visuals {
            translateEl(this.element, [x, y])
        }
        updateState(): void {
-            this.targetAngle = 180.0 - this.state.getPin(this.pin).servoAngle;
-            if (this.targetAngle != this.currentAngle) {
+            const p = this.state.getPin(this.pin);
+            const continuous = !!p.servoContinuous;
+            const servoAngle = p.servoAngle;
+            if (continuous) {
+                // for a continuous servo, the angle is interpreted as a rotation speed
+                // 0 -> -100%, 90 - 0%, 180 - 100%
                const now = U.now();
-                const cx = 56.661;
-                const cy = 899.475;
-                const speed = 300; // 0.1s/60 degree
                const dt = Math.min(now - this.lastAngleTime, 50) / 1000;
-                const delta = this.targetAngle - this.currentAngle;
-                this.currentAngle += Math.min(Math.abs(delta), speed * dt) * (delta > 0 ? 1 : -1);
-                this.crankEl.setAttribute("transform", this.crankTransform
-                    + ` rotate(${this.currentAngle}, ${cx}, ${cy})`)
-                this.lastAngleTime = now;
-                setTimeout(() => runtime.updateDisplay(), 20);
+                this.currentAngle = this.targetAngle;
+                this.targetAngle += ((servoAngle - 90) / 90) * SPEED * dt;
+            } else {
+                this.targetAngle = 180.0 - servoAngle;
            }
+            if (this.targetAngle != this.currentAngle)
+                this.renderAngle();
        }
+
+        private renderAngle() {
+            const now = U.now();
+            const cx = 56.661;
+            const cy = 899.475;
+            const dt = Math.min(now - this.lastAngleTime, 50) / 1000;
+            const delta = this.targetAngle - this.currentAngle;
+            this.currentAngle += Math.min(Math.abs(delta), SPEED * dt) * (delta > 0 ? 1 : -1);
+            this.crankEl.setAttribute("transform", this.crankTransform
+                + ` rotate(${this.currentAngle}, ${cx}, ${cy})`)
+            this.lastAngleTime = now;
+            setTimeout(() => runtime.updateDisplay(), 20);
+        }
+
        updateTheme(): void {

        }
--- a/sim/visuals/microbit.ts
+++ b/sim/visuals/microbit.ts
@ -145,7 +145,7 @@ namespace pxsim.visuals {
        }
    `;
    const BOARD_SVG = `<?xml version="1.0" encoding="utf-8"?>
-    <svg version="1.1" id="CalliopeMini" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
         y="0px" viewBox="0 0 530 530" style="enable-background:new 0 0 530 530;" xml:space="preserve">
    <style type="text/css">
        .st0{fill:#044854;}
@ -443,33 +443,33 @@ namespace pxsim.visuals {
        
            <ellipse id="BTN_B" transform="matrix(0.1602 -0.9871 0.9871 0.1602 157.3084 627.5282)" class="st16" cx="447.4" cy="221.3" rx="11.6" ry="11.6"/>
    </g>
-    <g id="Display">
-        <rect id="LED_0_0" x="208.4" y="139.1" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_0_1" x="234.3" y="139.1" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_0_2" x="260.3" y="139.1" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_0_3" x="286.2" y="139.1" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_0_4" x="312.2" y="139.1" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_1_0" x="208.4" y="167.2" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_1_1" x="234.3" y="167.2" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_1_2" x="260.3" y="167.2" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_1_3" x="286.2" y="167.2" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_1_4" x="312.2" y="167.2" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_2_0" x="208.4" y="195.3" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_2_1" x="234.3" y="195.3" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_2_2" x="260.3" y="195.3" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_2_3" x="286.2" y="195.3" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_2_4" x="312.2" y="195.3" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_3_0" x="208.4" y="223.4" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_3_1" x="234.3" y="223.4" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_3_2" x="260.3" y="223.4" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_3_3" x="286.2" y="223.4" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_3_4" x="312.2" y="223.4" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_4_0" x="208.4" y="251.5" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_4_1" x="234.3" y="251.5" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_4_2" x="260.3" y="251.5" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_4_3" x="286.2" y="251.5" class="st3" width="6.3" height="13.3"/>
-        <rect id="LED_4_4" x="312.2" y="251.5" class="st3" width="6.3" height="13.3"/>
-    </g>
+
+    <rect id="LED_0_0" x="210.7" y="146.2" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_1_0" x="236.8" y="146.2" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_2_0" x="262.7" y="146.2" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_3_0" x="288.7" y="146.2" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_4_0" x="314.6" y="146.2" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_0_1" x="210.7" y="171.7" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_1_1" x="236.8" y="171.7" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_2_1" x="262.7" y="171.7" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_3_1" x="288.7" y="171.7" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_4_1" x="314.6" y="171.7" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_0_2" x="210.7" y="197" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_1_2" x="236.8" y="197" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_2_2" x="262.7" y="197" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_3_2" x="288.7" y="197" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_4_2" x="314.6" y="197" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_0_3" x="210.7" y="222.5" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_1_3" x="236.8" y="222.5" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_2_3" x="262.7" y="222.5" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_3_3" x="288.7" y="222.5" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_4_3" x="314.6" y="222.5" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_0_4" x="210.7" y="247.8" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_1_4" x="236.8" y="247.8" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_2_4" x="262.7" y="247.8" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_3_4" x="288.7" y="247.8" class="st6" width="5.1" height="12.9"/>
+    <rect id="LED_4_4" x="314.6" y="247.8" class="st6" width="5.1" height="12.9"/>
+
    <g id="PINS">
        <g id="C_GND4">
            <circle class="st11" cx="370.8" cy="422" r="5.2"/>
--- a/theme/style.less
+++ b/theme/style.less
@ -14,20 +14,14 @@
 *******************************/

 /* Roboto font */
-// @RobotoMonoFont: data-uri("../docs/static/fonts/Roboto_Mono_400_normal.woff2");
+@RobotoMonoFont: data-uri("../docs/static/fonts/roboto-mono-v7-latin-regular.woff");

 /* roboto-mono-regular - latin */
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
-    src: url('../static/fonts/roboto-mono-v7-latin-regular.eot'); /* IE9 Compat Modes */
-    src: local('Roboto Mono'), local('RobotoMono-Regular'),
-         url('../static/fonts/roboto-mono-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-         url('../static/fonts/roboto-mono-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-         url('../static/fonts/roboto-mono-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
-         url('../static/fonts/roboto-mono-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-         url('../static/fonts/roboto-mono-v7-latin-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */
+    src: @RobotoMonoFont format('woff');
  }
 .ui.button.download-button {
    &:extend(.ui.purple.button all);
@ -58,9 +52,12 @@
    &:extend(.ui.blue.button all);
 }

-#filelist, #editortools {
+#filelist, #editortools, .fullscreensim #boardview {
    background: #fff data-uri("../docs/static/logo_texture.png") 0 0 repeat !important;
 }
+.fullscreensim #mainmenu {
+    background: #1b1c1d !important;
+}

 #downloadArea {
    background: transparent !important;
@ -97,7 +94,6 @@
@media only screen and (min-width: @largeMonitorBreakpoint) {
 }

-
 /* Download dialog */
 .ui.downloaddialog.modal>.content {
    padding: 1rem;