diff --git a/docs/static/calliope.simplified.svg b/docs/static/calliope.simplified.svg new file mode 100644 index 00000000..0bd01f41 --- /dev/null +++ b/docs/static/calliope.simplified.svg @@ -0,0 +1,921 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/docs/static/calliope.svg b/docs/static/calliope.svg new file mode 100644 index 00000000..85447b14 --- /dev/null +++ b/docs/static/calliope.svg @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/static/microbit.docs.svg b/docs/static/microbit.docs.svg deleted file mode 100644 index 6392907d..00000000 --- a/docs/static/microbit.docs.svg +++ /dev/null @@ -1 +0,0 @@ -(1,0)(3,0)(0,1)(2,1)(4,1)(0,2)(4,2)(1,3)(3,3)(2,4)P0, ANALOG INP1, ANALOG INP2, ANALOG INP3, ANALOG IN, LED Col 1P4, ANALOG IN, LED Col 2P5, BUTTON AP6, LED Col 9P7, LED Col 8P8P9, LED Col 7P10, ANALOG IN, LED Col 3P11, BUTTON BP12, RESERVED ACCESSIBILITYP13, SPI - SCKP14, SPI - MISOP15, SPI - MOSIP16, SPI - Chip SelectP17, +3v3P18, +3v3P19, I2C - SCLP20, I2C - SDAGNDGND+3v3GNDABA+B \ No newline at end of file diff --git a/docs/static/microbit.red.png b/docs/static/microbit.red.png deleted file mode 100644 index 9b2a5efa..00000000 Binary files a/docs/static/microbit.red.png and /dev/null differ diff --git a/docs/static/microbit.red.square.png b/docs/static/microbit.red.square.png deleted file mode 100644 index 13b6d96c..00000000 Binary files a/docs/static/microbit.red.square.png and /dev/null differ diff --git a/docs/static/microbit.red.svg b/docs/static/microbit.red.svg deleted file mode 100644 index 0ad2d248..00000000 --- a/docs/static/microbit.red.svg +++ /dev/null @@ -1 +0,0 @@ -(1,0)(3,0)(0,1)(2,1)(4,1)(0,2)(4,2)(1,3)(3,3)(2,4)P0, ANALOG INP1, ANALOG INP2, ANALOG INP3, ANALOG IN, LED Col 1P4, ANALOG IN, LED Col 2P5, BUTTON AP6, LED Col 9P7, LED Col 8P8P9, LED Col 7P10, ANALOG IN, LED Col 3P11, BUTTON BP12, RESERVED ACCESSIBILITYP13, SPI - SCKP14, SPI - MISOP15, SPI - MOSIP16, SPI - Chip SelectP17, +3v3P18, +3v3P19, I2C - SCLP20, I2C - SDAGNDGND+3v3GNDABA+B \ No newline at end of file diff --git a/docs/static/microbit.simplified.svg b/docs/static/microbit.simplified.svg deleted file mode 100644 index 0db9abfd..00000000 --- a/docs/static/microbit.simplified.svg +++ /dev/null @@ -1 +0,0 @@ -(1,0)(3,0)(0,1)(2,1)(4,1)(0,2)(4,2)(1,3)(3,3)(2,4)P0, ANALOG INP1, ANALOG INP2, ANALOG INP3, ANALOG IN, LED Col 1P4, ANALOG IN, LED Col 2P5, BUTTON AP6, LED Col 9P7, LED Col 8P8P9, LED Col 7P10, ANALOG IN, LED Col 3P11, BUTTON BP12, RESERVED ACCESSIBILITYP13, SPI - SCKP14, SPI - MISOP15, SPI - MOSIP16, SPI - Chip SelectP17, +3v3P18, +3v3P19, I2C - SCLP20, I2C - SDAGNDGND+3v3GNDAB \ No newline at end of file diff --git a/package.json b/package.json index 23d9e676..ddd9ae28 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "pxt-microbit", + "name": "pxt-calliope", "version": "0.4.18", - "description": "micro:bit target for PXT", + "description": "calliope target for PXT", "keywords": [ "JavaScript", "education", @@ -9,11 +9,11 @@ ], "repository": { "type": "git", - "url": "git+https://github.com/Microsoft/pxt-microbit.git" + "url": "git+https://github.com/Microsoft/pxt-calliope.git" }, "author": "", "license": "MIT", - "homepage": "https://github.com/Microsoft/pxt-microbit#readme", + "homepage": "https://github.com/Microsoft/pxt-calliope#readme", "files": [ "README.md", "pxtarget.json", diff --git a/pxtarget.json b/pxtarget.json index 84a02977..8eb78afa 100644 --- a/pxtarget.json +++ b/pxtarget.json @@ -1,8 +1,8 @@ { - "id": "microbit", - "name": "code the micro:bit", - "title": "code the micro:bit - Blocks / Javascript editor", - "description": "A Blocks / JavaScript code editor for the micro:bit.", + "id": "calliope", + "name": " calliope", + "title": "calliope - Blocks / Javascript editor", + "description": "A Blocks / JavaScript code editor for the calliope.", "corepkg": "microbit", "bundleddirs": [ "libs/microbit", @@ -14,10 +14,6 @@ "workspace": false, "packages": true, "preferredPackages": [ - "Microsoft/pxt-neopixel", - "Microsoft/pxt-sonar", - "Microsoft/pxt-max6675", - "Microsoft/pxt-i2c-fram" ] }, "blocksprj": { @@ -65,7 +61,7 @@ "hasHex": true, "deployDrives": "(MICROBIT|MBED)", "driveName": "MICROBIT", - "hexMimeType": "application/x-microbit-hex" + "hexMimeType": "application/x-calliope-hex" }, "runtime": { "mathBlocks": true, @@ -89,7 +85,7 @@ "compass": true }, "boardDefinition": { - "visual": "microbit", + "visual": "calliope", "gpioPinBlocks": [ [ "P0" @@ -167,7 +163,9 @@ "onboardComponents": [ "buttonpair", "ledmatrix", - "speaker" + "speaker", + "microphone", + "rgbled" ], "useCrocClips": true, "marginWhenBreadboarding": [ @@ -193,18 +191,17 @@ "appTheme": { "accentColor": "#5C005C", "logoUrl": "https://codethemicrobit.com/about", - "logo": "./static/microbit.simplified.svg", - "docsLogo": "./static/microbit.simplified.svg", - "portraitLogo": "./static/microbit.simplified.svg", - "footerLogo": "./static/microbit.simplified.svg", + "logo": "./static/calliope.simplified.svg", + "docsLogo": "./static/calliope.simplified.svg", + "portraitLogo": "./static/calliope.simplified.svg", + "footerLogo": "./static/calliope.simplified.svg", "cardLogo": "https://az851932.vo.msecnd.net/pub/drbwxcth", "appLogo": "https://az851932.vo.msecnd.net/pub/tbhemtig", "organizationLogo": "./static/Microsoft-logo_rgb_c-gray.png", "homeUrl": "https://codethemicrobit.com/", - "embedUrl": "https://codethemicrobit.com/", "privacyUrl": "https://go.microsoft.com/fwlink/?LinkId=521839", "termsOfUseUrl": "https://go.microsoft.com/fwlink/?LinkID=206977", - "githubUrl": "https://github.com/Microsoft/pxt-microbit", + "githubUrl": "https://github.com/Microsoft/pxt-calliope", "browserSupport": [ { "name": "unsupported", @@ -323,9 +320,5 @@ "path": "/static/mb/device/usb-windows-sendto.jpg" } ] - }, - "analytics": { - "userVoiceApiKey": "WEkkIGaj1WtJnSUF59iwaA", - "userVoiceForumId": 402381 } } diff --git a/sim/visuals/microbit.ts b/sim/visuals/microbit.ts index 95f4238e..1d3958ec 100644 --- a/sim/visuals/microbit.ts +++ b/sim/visuals/microbit.ts @@ -176,8 +176,8 @@ namespace pxsim.visuals { "P20, I2C - SDA", "GND", "GND", "+3v3", "GND" ]; - const MB_WIDTH = 500; - const MB_HEIGHT = 408; + const MB_WIDTH = 340; + const MB_HEIGHT = 312; export interface IBoardTheme { accent?: string; display?: string; @@ -196,15 +196,14 @@ namespace pxsim.visuals { lightLevelOff?: string; } - export var themes: IBoardTheme[] = ["#3ADCFE", "#FFD43A", "#3AFFB3", "#FF3A54"].map(accent => { + export var themes: IBoardTheme[] = ["#3ADCFE"].map(accent => { return { accent: accent, - display: "#000", pin: "#D4AF37", pinTouched: "#FFA500", pinActive: "#FF5500", ledOn: "#ff7f7f", - ledOff: "#202020", + ledOff: "#ccc", buttonOuter: "#979797", buttonUp: "#000", buttonDown: "#FFA500", @@ -232,10 +231,6 @@ namespace pxsim.visuals { private defs: SVGDefsElement; private g: SVGGElement; - private logos: SVGElement[]; - private head: SVGGElement; private headInitialized = false; - private headText: SVGTextElement; - private display: SVGElement; private buttons: SVGElement[]; private buttonsOuter: SVGElement[]; private buttonABText: SVGTextElement; @@ -307,14 +302,12 @@ namespace pxsim.visuals { private updateTheme() { let theme = this.props.theme; - svg.fill(this.display, theme.display); svg.fills(this.leds, theme.ledOn); svg.fills(this.ledsOuter, theme.ledOff); svg.fills(this.buttonsOuter.slice(0, 2), theme.buttonOuter); svg.fills(this.buttons.slice(0, 2), theme.buttonUp); svg.fill(this.buttonsOuter[2], theme.virtualButtonOuter); svg.fill(this.buttons[2], theme.virtualButtonUp); - svg.fills(this.logos, theme.accent); if (this.shakeButton) svg.fill(this.shakeButton, theme.virtualButtonUp); this.pinGradients.forEach(lg => svg.setGradientColors(lg, theme.pin, theme.pinActive)); @@ -450,6 +443,7 @@ namespace pxsim.visuals { let yc = 75; let state = this.board; if (!state || !state.compassState.usesHeading) return; + /* if (!this.headInitialized) { 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"); @@ -470,7 +464,7 @@ namespace pxsim.visuals { if (txt != this.headText.textContent) { svg.rotateElement(this.head, xc, yc, state.compassState.heading + 180); this.headText.textContent = txt; - } + } */ } private lastFlashTime: number = 0; @@ -563,6 +557,141 @@ namespace pxsim.visuals { private buildDom() { this.element = svg.elt("svg") + this.element.innerHTML = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; svg.hydrate(this.element, { "version": "1.0", "viewBox": `0 0 ${MB_WIDTH} ${MB_HEIGHT}`, @@ -585,41 +714,22 @@ namespace pxsim.visuals { let merge = svg.child(glow, "feMerge", {}); for (let i = 0; i < 3; ++i) svg.child(merge, "feMergeNode", { in: "glow" }) - // outline - svg.path(this.g, "sim-board", "M498,31.9C498,14.3,483.7,0,466.1,0H31.9C14.3,0,0,14.3,0,31.9v342.2C0,391.7,14.3,406,31.9,406h434.2c17.6,0,31.9-14.3,31.9-31.9V31.9z M14.3,206.7c-2.7,0-4.8-2.2-4.8-4.8c0-2.7,2.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8C19.2,204.6,17,206.7,14.3,206.7z M486.2,206.7c-2.7,0-4.8-2.2-4.8-4.8c0-2.72.2-4.8,4.8-4.8c2.7,0,4.8,2.2,4.8,4.8C491,204.6,488.8,206.7,486.2,206.7z"); - - // script background - 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" })); - // leds this.leds = []; this.ledsOuter = []; - let left = 154, top = 113, ledoffw = 46, ledoffh = 44; + const left = 138, top = 89, ledoffw = 15, ledoffh = 14.5; + const ledw = 5; + const ledh = 10; for (let i = 0; i < 5; ++i) { let ledtop = i * ledoffh + top; for (let j = 0; j < 5; ++j) { let ledleft = j * ledoffw + left; let k = i * 5 + j; - this.ledsOuter.push(svg.child(this.g, "rect", { class: "sim-led-back", x: ledleft, y: ledtop, width: 10, height: 20, rx: 2, ry: 2 })); - this.leds.push(svg.child(this.g, "rect", { class: "sim-led", x: ledleft - 2, y: ledtop - 2, width: 14, height: 24, rx: 3, ry: 3, title: `(${j},${i})` })); + this.ledsOuter.push(svg.child(this.g, "rect", { class: "sim-led-back", x: ledleft, y: ledtop, width: ledw, height: ledh, rx: 1, ry: 1 })); + this.leds.push(svg.child(this.g, "rect", { class: "sim-led", x: ledleft - 1, y: ledtop - 1, width: ledw + 2, height: ledh + 2, rx: 2, ry: 2, title: `(${j},${i})` })); } } - // head - this.head = svg.child(this.g, "g", {class: "sim-head"}); - svg.child(this.head, "circle", { cx: 258, cy: 75, r: 100, fill: "transparent" }) - 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 // P0, P1, P2 this.pins = [ @@ -638,7 +748,7 @@ namespace pxsim.visuals { this.pins.push(svg.path(this.g, "sim-pin", "M359.9,317.3c-12.8,0-22.1,10.3-23.1,23.1V406H383v-65.6C383,327.7,372.7,317.3,359.9,317.3z M360,360.1c-10.7,0-19.3-8.6-19.3-19.3c0-10.7,8.6-19.3,19.3-19.3c10.7,0,19.3,8.7,19.3,19.3C379.3,351.5,370.7,360.1,360,360.1z")); this.pins.push(svg.path(this.g, "sim-pin", "M458,317.6c-13,0-23.6,10.6-23.6,23.6c0,0,0,0.1,0,0.1h0V406H469c4.3,0,8.4-1,12.6-2.7v-60.7c0-0.4,0-0.9,0-1.3C481.6,328.1,471,317.6,458,317.6z M457.8,360.9c-10.7,0-19.3-8.6-19.3-19.3c0-10.7,8.6-19.3,19.3-19.3c10.7,0,19.3,8.7,19.3,19.3C477.1,352.2,468.4,360.9,457.8,360.9z")); - this.pins.forEach((p, i) => svg.hydrate(p, {title: pinTitles[i]})); + this.pins.forEach((p, i) => svg.hydrate(p, { title: pinTitles[i] })); this.pinGradients = this.pins.map((pin, i) => { let gid = "gradient-pin-" + i @@ -652,40 +762,32 @@ namespace pxsim.visuals { this.buttonsOuter = []; this.buttons = []; const outerBtn = (left: number, top: number) => { - const btnr = 4; - const btnw = 56.2; - const btnn = 6; - const btnnm = 10 - let btng = svg.child(this.g, "g", {class: "sim-button-group"}); + const btnr = 3; + const btnw = 21.71; + const btnn = 1; + const btnnm = 1; + const btnb = 5; + let btng = svg.child(this.g, "g", { class: "sim-button-group" }); this.buttonsOuter.push(btng); svg.child(btng, "rect", { class: "sim-button-outer", x: left, y: top, rx: btnr, ry: btnr, width: btnw, height: btnw }); svg.child(btng, "circle", { class: "sim-button-nut", cx: left + btnnm, cy: top + btnnm, r: btnn }); svg.child(btng, "circle", { class: "sim-button-nut", cx: left + btnnm, cy: top + btnw - btnnm, r: btnn }); svg.child(btng, "circle", { class: "sim-button-nut", cx: left + btnw - btnnm, cy: top + btnw - btnnm, r: btnn }); svg.child(btng, "circle", { class: "sim-button-nut", cx: left + btnw - btnnm, cy: top + btnnm, r: btnn }); + + this.buttons.push(svg.child(btng, "circle", { + class: "sim-button", + cx: left + btnw / 2, + cy: top + btnw / 2, + r: btnb + })); } - outerBtn(25.9, 176.4); - this.buttons.push(svg.path(this.g, "sim-button", "M69.7,203.5c0,8.7-7,15.7-15.7,15.7s-15.7-7-15.7-15.7c0-8.7,7-15.7,15.7-15.7S69.7,194.9,69.7,203.5")); - outerBtn(418.1, 176.4); - this.buttons.push(svg.path(this.g, "sim-button", "M461.9,203.5c0,8.7-7,15.7-15.7,15.7c-8.7,0-15.7-7-15.7-15.7c0-8.7,7-15.7,15.7-15.7C454.9,187.8,461.9,194.9,461.9,203.5")); - outerBtn(417, 250); - this.buttons.push(svg.child(this.g, "circle", { class: "sim-button", cx: 446, cy: 278, r: 16.5 })); + outerBtn(83.61, 96.8); + outerBtn(236.66, 96.8); + outerBtn(108, 136); (this.buttonsOuter[2]).style.visibility = "hidden"; (this.buttons[2]).style.visibility = "hidden"; - - svg.path(this.g, "sim-label", "M35.7,376.4c0-2.8,2.1-5.1,5.5-5.1c3.3,0,5.5,2.4,5.5,5.1v4.7c0,2.8-2.2,5.1-5.5,5.1c-3.3,0-5.5-2.4-5.5-5.1V376.4zM43.3,376.4c0-1.3-0.8-2.3-2.2-2.3c-1.3,0-2.1,1.1-2.1,2.3v4.7c0,1.2,0.8,2.3,2.1,2.3c1.3,0,2.2-1.1,2.2-2.3V376.4z"); - svg.path(this.g, "sim-label", "M136.2,374.1c2.8,0,3.4-0.8,3.4-2.5h2.9v14.3h-3.4v-9.5h-3V374.1z"); - svg.path(this.g, "sim-label", "M248.6,378.5c1.7-1,3-1.7,3-3.1c0-1.1-0.7-1.6-1.6-1.6c-1,0-1.8,0.6-1.8,2.1h-3.3c0-2.6,1.8-4.6,5.1-4.6c2.6,0,4.9,1.3,4.9,4.3c0,2.4-2.3,3.9-3.8,4.7c-2,1.3-2.5,1.8-2.5,2.9h6.1v2.7h-10C244.8,381.2,246.4,379.9,248.6,378.5z"); - - svg.path(this.g, "sim-button-label", "M48.1,270.9l-0.6-1.7h-5.1l-0.6,1.7h-3.5l5.1-14.3h3.1l5.2,14.3H48.1z M45,260.7l-1.8,5.9h3.5L45,260.7z"); - svg.path(this.g, "sim-button-label", "M449.1,135.8h5.9c3.9,0,4.7,2.4,4.7,3.9c0,1.8-1.4,2.9-2.5,3.2c0.9,0,2.6,1.1,2.6,3.3c0,1.5-0.8,4-4.7,4h-6V135.8zM454.4,141.7c1.6,0,2-1,2-1.7c0-0.6-0.3-1.7-2-1.7h-2v3.4H454.4z M452.4,144.1v3.5h2.1c1.6,0,2-1,2-1.8c0-0.7-0.4-1.8-2-1.8H452.4z") - - svg.path(this.g, "sim-label", "M352.1,381.1c0,1.6,0.9,2.5,2.2,2.5c1.2,0,1.9-0.9,1.9-1.9c0-1.2-0.6-2-2.1-2h-1.3v-2.6h1.3c1.5,0,1.9-0.7,1.9-1.8c0-1.1-0.7-1.6-1.6-1.6c-1.4,0-1.8,0.8-1.8,2.1h-3.3c0-2.4,1.5-4.6,5.1-4.6c2.6,0,5,1.3,5,4c0,1.6-1,2.8-2.1,3.2c1.3,0.5,2.3,1.6,2.3,3.5c0,2.7-2.4,4.3-5.2,4.3c-3.5,0-5.5-2.1-5.5-5.1H352.1z") - svg.path(this.g, "sim-label", "M368.5,385.9h-3.1l-5.1-14.3h3.5l3.1,10.1l3.1-10.1h3.6L368.5,385.9z") - svg.path(this.g, "sim-label", "M444.4,378.3h7.4v2.5h-1.5c-0.6,3.3-3,5.5-7.1,5.5c-4.8,0-7.5-3.5-7.5-7.5c0-3.9,2.8-7.5,7.5-7.5c3.8,0,6.4,2.3,6.6,5h-3.5c-0.2-1.1-1.4-2.2-3.1-2.2c-2.7,0-4.1,2.3-4.1,4.7c0,2.5,1.4,4.7,4.4,4.7c2,0,3.2-1.2,3.4-2.7h-2.5V378.3z") - svg.path(this.g, "sim-label", "M461.4,380.9v-9.3h3.3v14.3h-3.5l-5.2-9.2v9.2h-3.3v-14.3h3.5L461.4,380.9z") - svg.path(this.g, "sim-label", "M472.7,371.6c4.8,0,7.5,3.5,7.5,7.2s-2.7,7.2-7.5,7.2h-5.3v-14.3H472.7z M470.8,374.4v8.6h1.8c2.7,0,4.2-2.1,4.2-4.3s-1.6-4.3-4.2-4.3H470.8z") } private attachEvents() {