From 2f8b61998b803f3196d9b844c138e902f712de66 Mon Sep 17 00:00:00 2001 From: Peli de Halleux Date: Mon, 16 May 2016 21:48:54 -0700 Subject: [PATCH] bringing back triangles / logo on simulator --- sim/simsvg.ts | 39 ++++++++++++++++++++++++--------------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/sim/simsvg.ts b/sim/simsvg.ts index 9945c3ab..ac4463d3 100644 --- a/sim/simsvg.ts +++ b/sim/simsvg.ts @@ -234,8 +234,8 @@ namespace pxsim.micro_bit { let t = Math.max(tmin, Math.min(tmax, state.temperature)) let per = Math.floor((state.temperature - tmin) / (tmax - tmin) * 100) - svg.setGradientValue(this.thermometerGradient, 100 - per + '%'); - this.thermometerText.textContent = t + '°C'; + svg.setGradientValue(this.thermometerGradient, 100 - per + "%"); + this.thermometerText.textContent = t + "°C"; } private updateHeading() { @@ -244,8 +244,8 @@ namespace pxsim.micro_bit { let state = this.board; if (!state || !state.usesHeading) return; if (!this.headInitialized) { - let p = svg.path(this.head, "sim-theme", "m269.9,50.134647l0,0l-39.5,0l0,0c-14.1,0.1 -24.6,10.7 -24.6,24.8c0,13.9 10.4,24.4 24.3,24.7l0,0l39.6,0c14.2,0 40.36034,-22.97069 40.36034,-24.85394c0,-1.88326 -26.06034,-24.54606 -40.16034,-24.64606m-0.2,39l0,0l-39.3,0c-7.7,-0.1 -14,-6.4 -14,-14.2c0,-7.8 6.4,-14.2 14.2,-14.2l39.1,0c7.8,0 14.2,6.4 14.2,14.2c0,7.9 -6.4,14.2 -14.2,14.2l0,0l0,0z"); - this.logos.push(p); + let p = this.head.firstChild.nextSibling as SVGPathElement; + p.setAttribute("d", "m269.9,50.134647l0,0l-39.5,0l0,0c-14.1,0.1 -24.6,10.7 -24.6,24.8c0,13.9 10.4,24.4 24.3,24.7l0,0l39.6,0c14.2,0 40.36034,-22.97069 40.36034,-24.85394c0,-1.88326 -26.06034,-24.54606 -40.16034,-24.64606m-0.2,39l0,0l-39.3,0c-7.7,-0.1 -14,-6.4 -14,-14.2c0,-7.8 6.4,-14.2 14.2,-14.2l39.1,0c7.8,0 14.2,6.4 14.2,14.2c0,7.9 -6.4,14.2 -14.2,14.2l0,0l0,0z"); this.updateTheme(); let pt = this.element.createSVGPoint(); svg.buttonEvents( @@ -437,6 +437,18 @@ svg.sim.grayscale { } /* animations */ +.sim-theme-glow { + animation-name: sim-theme-glow-animation; + animation-timing-function: ease-in-out; + animation-direction: alternate; + animation-iteration-count: infinite; + animation-duration: 1.25s; +} +@keyframes sim-theme-glow-animation { + from { opacity: 1; } + to { opacity: 0.8; } +} + .sim-flash { animation-name: sim-flash-animation; animation-duration: 0.1s; @@ -452,9 +464,6 @@ svg.sim.grayscale { animation-duration: 0.4s; animation-timing-function: ease-in; } -.sim-button-label { - fill:#fff; -} @keyframes sim-flash-stroke-animation { from { stroke: yellow; } @@ -481,11 +490,11 @@ svg.sim.grayscale { this.display = svg.path(this.g, "sim-display", "M333.8,310.3H165.9c-8.3,0-15-6.7-15-15V127.5c0-8.3,6.7-15,15-15h167.8c8.3,0,15,6.7,15,15v167.8C348.8,303.6,342.1,310.3,333.8,310.3z"); this.logos = []; - //this.logos.push(svg.child(this.g, "polygon", { class: "sim-theme", points: "115,56.7 173.1,0 115,0" })); - //this.logos.push(svg.path(this.g, "sim-theme", "M114.2,0H25.9C12.1,2.1,0,13.3,0,27.7v83.9L114.2,0z")); - //this.logos.push(svg.child(this.g, "polygon", { class: "sim-theme", points: "173,27.9 202.5,0 173,0" })); - //this.logos.push(svg.child(this.g, "polygon", { class: "sim-theme", points: "54.1,242.4 54.1,274.1 22.4,274.1" })); - //this.logos.push(svg.child(this.g, "polygon", { class: "sim-theme", points: "446.2,164.6 446.2,132.8 477.9,132.8" })); + this.logos.push(svg.child(this.g, "polygon", { class: "sim-theme", points: "115,56.7 173.1,0 115,0" })); + this.logos.push(svg.path(this.g, "sim-theme", "M114.2,0H25.9C12.1,2.1,0,13.3,0,27.7v83.9L114.2,0z")); + this.logos.push(svg.child(this.g, "polygon", { class: "sim-theme", points: "173,27.9 202.5,0 173,0" })); + this.logos.push(svg.child(this.g, "polygon", { class: "sim-theme", points: "54.1,242.4 54.1,274.1 22.4,274.1" })); + this.logos.push(svg.child(this.g, "polygon", { class: "sim-theme", points: "446.2,164.6 446.2,132.8 477.9,132.8" })); // leds this.leds = []; @@ -504,9 +513,9 @@ svg.sim.grayscale { // head this.head = svg.child(this.g, "g", {}); svg.child(this.head, "circle", { cx: 258, cy: 75, r: 100, fill: "transparent" }) - //this.logos.push(svg.path(this.head, "sim-theme", "M269.9,50.2L269.9,50.2l-39.5,0v0c-14.1,0.1-24.6,10.7-24.6,24.8c0,13.9,10.4,24.4,24.3,24.7v0h39.6c14.2,0,24.8-10.6,24.8-24.7C294.5,61,284,50.3,269.9,50.2 M269.7,89.2L269.7,89.2l-39.3,0c-7.7-0.1-14-6.4-14-14.2c0-7.8,6.4-14.2,14.2-14.2h39.1c7.8,0,14.2,6.4,14.2,14.2C283.9,82.9,277.5,89.2,269.7,89.2")); - //this.logos.push(svg.path(this.head, "sim-theme", "M230.6,69.7c-2.9,0-5.3,2.4-5.3,5.3c0,2.9,2.4,5.3,5.3,5.3c2.9,0,5.3-2.4,5.3-5.3C235.9,72.1,233.5,69.7,230.6,69.7")); - //this.logos.push(svg.path(this.head, "sim-theme", "M269.7,80.3c2.9,0,5.3-2.4,5.3-5.3c0-2.9-2.4-5.3-5.3-5.3c-2.9,0-5.3,2.4-5.3,5.3C264.4,77.9,266.8,80.3,269.7,80.3")); + this.logos.push(svg.path(this.head, "sim-theme sim-theme-glow", "M269.9,50.2L269.9,50.2l-39.5,0v0c-14.1,0.1-24.6,10.7-24.6,24.8c0,13.9,10.4,24.4,24.3,24.7v0h39.6c14.2,0,24.8-10.6,24.8-24.7C294.5,61,284,50.3,269.9,50.2 M269.7,89.2L269.7,89.2l-39.3,0c-7.7-0.1-14-6.4-14-14.2c0-7.8,6.4-14.2,14.2-14.2h39.1c7.8,0,14.2,6.4,14.2,14.2C283.9,82.9,277.5,89.2,269.7,89.2")); + this.logos.push(svg.path(this.head, "sim-theme sim-theme-glow", "M230.6,69.7c-2.9,0-5.3,2.4-5.3,5.3c0,2.9,2.4,5.3,5.3,5.3c2.9,0,5.3-2.4,5.3-5.3C235.9,72.1,233.5,69.7,230.6,69.7")); + this.logos.push(svg.path(this.head, "sim-theme sim-theme-glow", "M269.7,80.3c2.9,0,5.3-2.4,5.3-5.3c0-2.9-2.4-5.3-5.3-5.3c-2.9,0-5.3,2.4-5.3,5.3C264.4,77.9,266.8,80.3,269.7,80.3")); this.headText = svg.child(this.g, "text", { x: 310, y: 100, class: "sim-text" }) // https://www.microbit.co.uk/device/pins