diff --git a/src/view/components/cpx/Cpx.tsx b/src/view/components/cpx/Cpx.tsx index 0debb5c32..a762740af 100644 --- a/src/view/components/cpx/Cpx.tsx +++ b/src/view/components/cpx/Cpx.tsx @@ -1,3 +1,6 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT license. + import * as React from "react"; import Simulator from "../../components/Simulator"; import { TOOLBAR_ICON_ID } from "../../components/toolbar/SensorModalUtils"; diff --git a/src/view/components/microbit/Microbit.tsx b/src/view/components/microbit/Microbit.tsx new file mode 100644 index 000000000..2fd6d3ae9 --- /dev/null +++ b/src/view/components/microbit/Microbit.tsx @@ -0,0 +1,21 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT license. + +import * as React from "react"; +import "../../styles/Simulator.css"; +import { MicrobitImage } from "./MicrobitImage"; + +// Component grouping the functionality for micro:bit functionalities + +export class Microbit extends React.Component { + render() { + return ( +
+
+ +
+ {/* Implement actionbar here */} +
+ ); + } +} diff --git a/src/view/components/microbit/MicrobitImage.tsx b/src/view/components/microbit/MicrobitImage.tsx new file mode 100644 index 000000000..383d5d637 --- /dev/null +++ b/src/view/components/microbit/MicrobitImage.tsx @@ -0,0 +1,10 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT license. + +import * as React from "react"; +import "../../styles/Microbit.css"; +import { MICROBIT_SVG } from "./Microbit_svg"; + +export const MicrobitImage: React.FC = () => { + return MICROBIT_SVG; +}; diff --git a/src/view/components/microbit/Microbit_svg.tsx b/src/view/components/microbit/Microbit_svg.tsx new file mode 100644 index 000000000..0ff29a282 --- /dev/null +++ b/src/view/components/microbit/Microbit_svg.tsx @@ -0,0 +1,1533 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT license. + +// Adapted from : https://makecode.microbit.org/#editor + +import * as React from "react"; + +/* tslint:disable */ + +export const MICROBIT_SVG = ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + (0,0) + + + + (1,0) + + + + (2,0) + + + + (3,0) + + + + (4,0) + + + + (0,1) + + + + (1,1) + + + + (2,1) + + + + (3,1) + + + + (4,1) + + + + (0,2) + + + + (1,2) + + + + (2,2) + + + + (3,2) + + + + (4,2) + + + + (0,3) + + + + (1,3) + + + + (2,3) + + + + (3,3) + + + + (4,3) + + + + (0,4) + + + + (1,4) + + + + (2,4) + + + + (3,4) + + + + (4,4) + + + + + + + + + + P0, ANALOG IN + + + P1, ANALOG IN + + + P2, ANALOG IN + + + P3, ANALOG IN, LED Col 1 + + + P4, ANALOG IN, LED Col 2 + + + P5, BUTTON A + + + P6, LED Col 9 + + + P7, LED Col 8 + + + P8 + + + P9, LED Col 7 + + + P10, ANALOG IN, LED Col 3 + + + P11, BUTTON B + + + P12, RESERVED ACCESSIBILITY + + + P13, SPI - SCK + + + P14, SPI - MISO + + + P15, SPI - MOSI + + + P16, SPI - Chip Select + + + P17, +3v3 + + + P18, +3v3 + + + P19, I2C - SCL + + + P20, I2C - SDA + + + GND + + + GND + + + +3v3 + + + GND + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/src/view/container/device/Device.tsx b/src/view/container/device/Device.tsx index 2e7b125f4..c9999f09e 100644 --- a/src/view/container/device/Device.tsx +++ b/src/view/container/device/Device.tsx @@ -1,7 +1,9 @@ // Copyright (c) Microsoft Corporation. // Licensed under the MIT license. + import * as React from "react"; import { Cpx } from "../../components/cpx/Cpx"; +import { Microbit } from "../../components/microbit/Microbit"; import { DEVICE_LIST_KEY } from "../../constants"; interface IProps { @@ -30,7 +32,7 @@ const loadSelectedDevice = (currentSelectedDevice: string) => { case DEVICE_LIST_KEY.CPX: return ; case DEVICE_LIST_KEY.MICROBIT: - return

Microbit to be implemented!

; + return ; default: return null; } diff --git a/src/view/container/device/__snapshots__/Device.spec.tsx.snap b/src/view/container/device/__snapshots__/Device.spec.tsx.snap index 0d22034c6..bec919b26 100644 --- a/src/view/container/device/__snapshots__/Device.spec.tsx.snap +++ b/src/view/container/device/__snapshots__/Device.spec.tsx.snap @@ -4,8 +4,2548 @@ exports[`Device component should render correctly 1`] = `
-

- Microbit to be implemented! -

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + (0,0) + + + + + + (1,0) + + + + + + (2,0) + + + + + + (3,0) + + + + + + (4,0) + + + + + + (0,1) + + + + + + (1,1) + + + + + + (2,1) + + + + + + (3,1) + + + + + + (4,1) + + + + + + (0,2) + + + + + + (1,2) + + + + + + (2,2) + + + + + + (3,2) + + + + + + (4,2) + + + + + + (0,3) + + + + + + (1,3) + + + + + + (2,3) + + + + + + (3,3) + + + + + + (4,3) + + + + + + (0,4) + + + + + + (1,4) + + + + + + (2,4) + + + + + + (3,4) + + + + + + (4,4) + + + + + + + + + + + + P0, ANALOG IN + + + + + P1, ANALOG IN + + + + + P2, ANALOG IN + + + + + P3, ANALOG IN, LED Col 1 + + + + + P4, ANALOG IN, LED Col 2 + + + + + P5, BUTTON A + + + + + P6, LED Col 9 + + + + + P7, LED Col 8 + + + + + P8 + + + + + P9, LED Col 7 + + + + + P10, ANALOG IN, LED Col 3 + + + + + P11, BUTTON B + + + + + P12, RESERVED ACCESSIBILITY + + + + + P13, SPI - SCK + + + + + P14, SPI - MISO + + + + + P15, SPI - MOSI + + + + + P16, SPI - Chip Select + + + + + P17, +3v3 + + + + + P18, +3v3 + + + + + P19, I2C - SCL + + + + + P20, I2C - SDA + + + + + GND + + + + + GND + + + + + +3v3 + + + + + GND + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
`; diff --git a/src/view/styles/Microbit.css b/src/view/styles/Microbit.css new file mode 100644 index 000000000..8976e2ba6 --- /dev/null +++ b/src/view/styles/Microbit.css @@ -0,0 +1,151 @@ +svg.sim { + box-sizing: border-box; + width: 100%; + height: 100%; + display: block; +} +svg.sim.grayscale { + -moz-filter: grayscale(1); + -webkit-filter: grayscale(1); + filter: grayscale(1); +} +.sim-button-group { + cursor: pointer; +} +.sim-button { + pointer-events: none; +} +.sim-board, +.sim-display, +sim-button { + fill: #111; +} +.sim-button-outer:hover { + stroke: grey; + stroke-width: 3px; +} +.sim-button-nut { + fill: #704a4a; + pointer-events: none; +} +.sim-button-nut:hover { + stroke: 1px solid #704a4a; +} +.sim-pin:hover { + stroke: #d4af37; + stroke-width: 2px; +} +.sim-pin-touch.touched:hover { + stroke: darkorange; +} +.sim-led-back:hover { + stroke: #a0a0a0; + stroke-width: 3px; +} +.sim-led:hover { + stroke: #ff7f7f; + stroke-width: 3px; +} +.sim-systemled { + fill: #333; + stroke: #555; + stroke-width: 1px; +} +.sim-light-level-button { + stroke: #fff; + stroke-width: 3px; +} +.sim-antenna { + stroke: #555; + stroke-width: 2px; +} +.sim-text { + font-family: "Lucida Console", Monaco, monospace; + font-size: 25px; + fill: #fff; + pointer-events: none; +} +.sim-text-pin { + font-family: "Lucida Console", Monaco, monospace; + font-size: 20px; + fill: #fff; + pointer-events: none; +} +.sim-thermometer { + stroke: #aaa; + stroke-width: 3px; +} +/* animations */ +.sim-flash { + animation-name: sim-flash-animation; + animation-duration: 0.1s; +} +@keyframes sim-flash-animation { + from { + fill: yellow; + } + to { + fill: default; + } +} +.sim-flash-stroke { + animation-name: sim-flash-stroke-animation; + animation-duration: 0.4s; + animation-timing-function: ease-in; +} +@keyframes sim-flash-stroke-animation { + from { + stroke: yellow; + } + to { + stroke: default; + } +} +/* wireframe */ +.sim-wireframe * { + fill: none; + stroke: black; +} +.sim-wireframe .sim-display, +.sim-wireframe .sim-led, +.sim-wireframe .sim-led-back, +.sim-wireframe .sim-head, +.sim-wireframe .sim-theme, +.sim-wireframe .sim-button-group, +.sim-wireframe .sim-button-label, +.sim-wireframe .sim-button, +.sim-wireframe .sim-text-pin { + visibility: hidden; +} +.sim-wireframe .sim-label { + stroke: none; + fill: #777; +} +.sim-label, +.sim-button-label { + fill: #000; +} +.sim-wireframe .sim-board { + stroke-width: 2px; +} +*:focus { + outline: none; +} +*:focus .sim-button-outer, +.sim-pin:focus, +.sim-thermometer:focus, +.sim-shake:focus, +.sim-light-level-button:focus { + stroke: #4d90fe; + stroke-width: 5px !important; +} +.no-drag, +.sim-text, +.sim-text-pin { + user-drag: none; + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; +} diff --git a/src/view/styles/Simulator.css b/src/view/styles/Simulator.css index 62a2f3547..000983a53 100644 --- a/src/view/styles/Simulator.css +++ b/src/view/styles/Simulator.css @@ -2,6 +2,7 @@ display: flex; flex-direction: column; justify-content: center; + align-items: center; max-width: 700px; max-height: 700px; margin-left: auto; @@ -63,12 +64,9 @@ } } -.simulator { - display: flex; - flex-direction: column; - justify-content: center; - max-width: 700px; - max-height: 700px; - margin-left: auto; - margin-right: auto; +.microbit-container { + max-width: 350px; +} +.cpx-container { + width: 100%; }