diff --git a/sim/simsvg.ts b/sim/simsvg.ts index 58dada3d..e8596809 100644 --- a/sim/simsvg.ts +++ b/sim/simsvg.ts @@ -67,13 +67,11 @@ namespace ks.rt.micro_bit { } static hydrate(el : SVGElement, props: any) { - Object.keys(props).forEach(k => { + for(let k in props) { if (k == "title") { - let title = Svg.child(el, "title", {}); - title.textContent = props[k]; - } - el.setAttributeNS(null, k, props[k]) - }); + Svg.title(el, props[k]) + } else el.setAttributeNS(null, k, props[k]) + } } static child(parent : Element, name: string, props: any) : SVGElement { @@ -154,6 +152,11 @@ namespace ks.rt.micro_bit { p.removeChild(el); p.appendChild(el) } + + static title(el : SVGElement, txt:string) { + let t = Svg.child(el, "title", {}); + t.textContent = txt; + } } export class MicrobitBoardSvg @@ -461,8 +464,8 @@ namespace ks.rt.micro_bit { this.element.appendChild(this.g); // filters - let glow = Svg.child(this.defs, "filter", {id:"filterglow", x:"-20%", y:"-20%", width:"140%", height:"140%"}); - Svg.child(glow, "feGaussianBlur", {stdDeviation:"2 2", result: "glow" }); + let glow = Svg.child(this.defs, "filter", {id:"filterglow", x:"-5%", y:"-5%", width:"120%", height:"120%"}); + Svg.child(glow, "feGaussianBlur", {stdDeviation:"5", result: "glow" }); let merge = Svg.child(glow, "feMerge", {}); for(let i=0;i<3;++i) Svg.child(merge, "feMergeNode", {in:"glow"}) @@ -489,7 +492,7 @@ namespace ks.rt.micro_bit { var ledleft = j * ledoffw + left; var 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:2, ry:2, style:"filter:url(#filterglow);", title:`(${j},${i})`})); + 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})`})); } } @@ -501,26 +504,45 @@ namespace ks.rt.micro_bit { 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.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 = [ "M16.5,341.2c0,0.4-0.1,0.9-0.1,1.3v60.7c4.1,1.7,8.6,2.7,12.9,2.7h34.4v-64.7h0.3c0,0,0-0.1,0-0.1c0-13-10.6-23.6-23.7-23.6C27.2,317.6,16.5,328.1,16.5,341.2z M21.2,341.6c0-10.7,8.7-19.3,19.3-19.3c10.7,0,19.3,8.7,19.3,19.3c0,10.7-8.6,19.3-19.3,19.3C29.9,360.9,21.2,352.2,21.2,341.6z", "M139.1,317.3c-12.8,0-22.1,10.3-23.1,23.1V406h46.2v-65.6C162.2,327.7,151.9,317.3,139.1,317.3zM139.3,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.3C158.6,351.5,150,360.1,139.3,360.1z", "M249,317.3c-12.8,0-22.1,10.3-23.1,23.1V406h46.2v-65.6C272.1,327.7,261.8,317.3,249,317.3z M249.4,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.3C268.7,351.5,260.1,360.1,249.4,360.1z" - ].map(p => Svg.path(this.g, "sim-pin sim-pin-touch", p)); + ].map((p,pi) => Svg.path(this.g, "sim-pin sim-pin-touch", p, `P${pi}, ANALOG IN`)); - // side pins - this.pins.push(Svg.path(this.g, "sim-pin", "M0,357.7v19.2c0,10.8,6.2,20.2,14.4,25.2v-44.4H0z")); - this.pins.push(Svg.path(this.g, "sim-pin", "M483.6,402c8.2-5,14.4-14.4,14.4-25.1v-19.2h-14.4V402z")); + // P3 + this.pins.push(Svg.path(this.g, "sim-pin", "M0,357.7v19.2c0,10.8,6.2,20.2,14.4,25.2v-44.4H0z", "P3, ANALOG IN, LED Col 1")); [66.7,79.1,91.4,103.7,164.3,176.6,188.9,201.3,213.6,275.2,287.5,299.8,312.1,324.5,385.1,397.4,409.7,422].forEach(x => { this.pins.push(Svg.child(this.g, "rect", {x:x, y:356.7, width:10, height:50})); }) + Svg.title(this.pins[4], "P4, ANALOG IN, LED Col 2") + Svg.title(this.pins[5], "P5, BUTTON A") + Svg.title(this.pins[6], "P6, LED Col 9") + Svg.title(this.pins[7], "P7, LED Col 8") + Svg.title(this.pins[8], "P8") + Svg.title(this.pins[9], "P9, LED Col 7") + Svg.title(this.pins[10], "P10, ANALOG IN, LED Col 3") + Svg.title(this.pins[11], "P11, BUTTON B") + Svg.title(this.pins[12], "P12, RESERVED ACCESSIBILITY") + Svg.title(this.pins[13], "P13, SPI - SCK") + Svg.title(this.pins[14], "P14, SPI - MISO") + Svg.title(this.pins[15], "P15, SPI - MOSI") + Svg.title(this.pins[16], "P16, SPI - Chip Select") + Svg.title(this.pins[17], "P17, +3v3") + Svg.title(this.pins[18], "P18, +3v3") + Svg.title(this.pins[19], "P19, I2C - SCL") + Svg.title(this.pins[20], "P20, I2C - SDA") + Svg.title(this.pins[21], "GND") - 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.push(Svg.path(this.g, "sim-pin", "M483.6,402c8.2-5,14.4-14.4,14.4-25.1v-19.2h-14.4V402z", "GND")); - this.pins.forEach((pin, i) => Svg.hydrate(pin, {title: "P" + i})); + 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", "+3v3")); + 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", "GND")); + this.pinGradients = this.pins.map((pin,i) => { let gid= "gradient-pin-" + i let lg = Svg.linearGradient(this.defs, gid) @@ -531,15 +553,14 @@ namespace ks.rt.micro_bit { this.pinTexts = [67,165,275].map(x => Svg.child(this.g, "text", { class:'sim-text-pin', x:x, y:345})); this.buttonsOuter = []; this.buttons = []; - this.buttonsOuter.push(Svg.path(this.g, "sim-button-outer", "M82.1,232.6H25.9c-0.5,0-1-0.4-1-1v-56.2c0-0.5,0.4-1,1-1h56.2c0.5,0,1,0.4,1,1v56.2C83,232.2,82.6,232.6,82.1,232.6")); + this.buttonsOuter.push(Svg.path(this.g, "sim-button-outer", "M82.1,232.6H25.9c-0.5,0-1-0.4-1-1v-56.2c0-0.5,0.4-1,1-1h56.2c0.5,0,1,0.4,1,1v56.2C83,232.2,82.6,232.6,82.1,232.6", "A")); 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")); - this.buttonsOuter.push(Svg.path(this.g, "sim-button-outer", "M474.3,232.6h-56.2c-0.5,0-1-0.4-1-1v-56.2c0-0.5,0.4-1,1-1h56.2c0.5,0,1,0.4,1,1v56.2C475.3,232.2,474.8,232.6,474.3,232.6")); + this.buttonsOuter.push(Svg.path(this.g, "sim-button-outer", "M474.3,232.6h-56.2c-0.5,0-1-0.4-1-1v-56.2c0-0.5,0.4-1,1-1h56.2c0.5,0,1,0.4,1,1v56.2C475.3,232.2,474.8,232.6,474.3,232.6", "B")); 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")); - this.buttonsOuter.push(Svg.child(this.g, "rect", {class:"sim-button-outer", x:417, y:250, width:58, height:58, rx:1, ry:1})); + this.buttonsOuter.push(Svg.child(this.g, "rect", {class:"sim-button-outer", x:417, y:250, width:58, height:58, rx:1, ry:1, title:"A+B"})); this.buttons.push(Svg.child(this.g, "circle", {class:"sim-button", cx:446, cy:278, r:16.5})); (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");