From 69fcb7407ae989c0f0912156ed3069206c403c5d Mon Sep 17 00:00:00 2001 From: Peli de Halleux Date: Fri, 2 Feb 2018 13:38:54 -0800 Subject: [PATCH] Simulator support for remote (#302) * fixing up state * upgrading ir simulator * displaying remote * updated infrared svg --- libs/infrared-sensor/ir.ts | 2 +- sim/visuals/assets/RemoteSvg.ts | 21 ++++ sim/visuals/assets/infrared.svg | 48 +++++++++ sim/visuals/assets/infraredsvg.ts | 114 ++++++++------------ sim/visuals/assets/remote.svg | 16 +++ sim/visuals/controls/remoteBeaconButtons.ts | 60 +++++------ sim/visuals/nodes/moduleView.ts | 30 +++--- 7 files changed, 178 insertions(+), 113 deletions(-) create mode 100644 sim/visuals/assets/RemoteSvg.ts create mode 100644 sim/visuals/assets/infrared.svg create mode 100644 sim/visuals/assets/remote.svg diff --git a/libs/infrared-sensor/ir.ts b/libs/infrared-sensor/ir.ts index 028e7d79..bef06d5e 100644 --- a/libs/infrared-sensor/ir.ts +++ b/libs/infrared-sensor/ir.ts @@ -129,7 +129,7 @@ namespace sensors { * @param ev the event to wait for */ //% help=input/remote-infrared-beacon/pause-until - //% blockId=remotebuttonEvent block="pause until %button|%event" + //% blockId=remoteButtonPauseUntil block="pause until %button|%event" //% parts="remote" //% blockNamespace=sensors //% weight=99 blockGap=8 diff --git a/sim/visuals/assets/RemoteSvg.ts b/sim/visuals/assets/RemoteSvg.ts new file mode 100644 index 00000000..bbd85312 --- /dev/null +++ b/sim/visuals/assets/RemoteSvg.ts @@ -0,0 +1,21 @@ +namespace pxsim.visuals { + export const REMOVE_SVG = ` + + + + + + + + + + + + + + + + + + `; +} \ No newline at end of file diff --git a/sim/visuals/assets/infrared.svg b/sim/visuals/assets/infrared.svg new file mode 100644 index 00000000..dd329ffb --- /dev/null +++ b/sim/visuals/assets/infrared.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/sim/visuals/assets/infraredsvg.ts b/sim/visuals/assets/infraredsvg.ts index 00768506..b54a59ae 100644 --- a/sim/visuals/assets/infraredsvg.ts +++ b/sim/visuals/assets/infraredsvg.ts @@ -1,79 +1,53 @@ namespace pxsim { - export const INFRARED_SVG = ` - - - + export const INFRARED_SVG = ` + + + + - - + + - ultra sonic - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + -`; + + + + + + + + + + + + + + + + + `; } \ No newline at end of file diff --git a/sim/visuals/assets/remote.svg b/sim/visuals/assets/remote.svg new file mode 100644 index 00000000..6fa2e99b --- /dev/null +++ b/sim/visuals/assets/remote.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/sim/visuals/controls/remoteBeaconButtons.ts b/sim/visuals/controls/remoteBeaconButtons.ts index 5ef78e1f..d547449c 100644 --- a/sim/visuals/controls/remoteBeaconButtons.ts +++ b/sim/visuals/controls/remoteBeaconButtons.ts @@ -11,47 +11,47 @@ namespace pxsim.visuals { export class RemoteBeaconButtonsControl extends ControlView { private group: SVGGElement; - + private id = Math.random().toString(); + getInnerView() { this.group = svg.elt("g") as SVGGElement; - this.group.setAttribute("transform", `translate(2, 2.5) scale(0.6)`) + this.group.setAttribute("transform", `scale(0.25, 0.25)`) + + const xml = pxsim.visuals.normalizeXml(this.id, pxsim.visuals.REMOVE_SVG); + const content = svg.parseString(xml); + this.group.appendChild(content); - const btnIds = [ - InfraredRemoteButton.CenterBeacon, - InfraredRemoteButton.TopLeft, - InfraredRemoteButton.TopRight, - InfraredRemoteButton.BottomLeft, - InfraredRemoteButton.BottomRight]; - const colors = ['#f12a21', '#ffd01b', '#006db3', '#00934b', '#6c2d00']; - - let cy = -4; - btnIds.forEach((cid, c) => { - const cx = c % 2 == 0 ? 2.2 : 8.2; - if (c % 2 == 0) cy += 5; - if (btnIds[c]) { - const circle = pxsim.svg.child(this.group, "circle", { 'class': 'sim-color-grid-circle', 'cx': cx, 'cy': cy, 'r': '2', 'style': `fill: ${colors[c]}` }); - pointerEvents.down.forEach(evid => circle.addEventListener(evid, ev => { - ev3board().remoteState.setPressed(cid, true); - })); - circle.addEventListener(pointerEvents.leave, ev => { - ev3board().remoteState.setPressed(cid, false); - }); - circle.addEventListener(pointerEvents.up, ev => { - ev3board().remoteState.setPressed(cid, true); - }); - } - - }) + const btns: Map = { + "center": InfraredRemoteButton.CenterBeacon, + "topleft": InfraredRemoteButton.TopLeft, + "topright": InfraredRemoteButton.TopRight, + "bottomleft": InfraredRemoteButton.BottomLeft, + "bottomright": InfraredRemoteButton.BottomRight + } + Object.keys(btns).forEach(bid => { + const cid = btns[bid]; + const bel = content.getElementById(pxsim.visuals.normalizeId(this.id, bid)); + bel.className += " sim-button"; + pointerEvents.down.forEach(evid => bel.addEventListener(evid, ev => { + ev3board().remoteState.setPressed(cid, true); + })); + bel.addEventListener(pointerEvents.leave, ev => { + ev3board().remoteState.setPressed(cid, false); + }); + bel.addEventListener(pointerEvents.up, ev => { + ev3board().remoteState.setPressed(cid, false); + }); + }); return this.group; } getInnerWidth() { - return 10.2; + return 98.3; } getInnerHeight() { - return 15; + return 110.8; } } } \ No newline at end of file diff --git a/sim/visuals/nodes/moduleView.ts b/sim/visuals/nodes/moduleView.ts index b9d2adc0..6b68034c 100644 --- a/sim/visuals/nodes/moduleView.ts +++ b/sim/visuals/nodes/moduleView.ts @@ -1,4 +1,20 @@ namespace pxsim.visuals { + export function normalizeId(prefix: string, svgId: string) { + return `${prefix}-${svgId}`; + } + + export function normalizeXml(prefix: string, xml: string): string { + xml = xml.replace(/id=\"(.*?)\"/g, (m: string, id: string) => { + return `id="${normalizeId(prefix, id)}"`; + }); + xml = xml.replace(/url\(#(.*?)\)/g, (m: string, id: string) => { + return `url(#${normalizeId(prefix, id)})`; + }); + xml = xml.replace(/xlink:href=\"#(.*?)\"/g, (m: string, id: string) => { + return `xlink:href="#${normalizeId(prefix, id)}"`; + }); + return xml; + } export class ModuleView extends View implements LayoutElement { protected content: SVGSVGElement; @@ -9,21 +25,11 @@ namespace pxsim.visuals { constructor(protected xml: string, protected prefix: string, protected id: NodeType, protected port: NodeType) { super(); - this.xml = this.normalizeXml(xml); + this.xml = normalizeXml(this.prefix, xml); } private normalizeXml(xml: string) { - const prefix = this.prefix; - xml = xml.replace(/id=\"(.*?)\"/g, (m: string, id: string) => { - return `id="${this.normalizeId(id)}"`; - }); - xml = xml.replace(/url\(#(.*?)\)/g, (m: string, id: string) => { - return `url(#${this.normalizeId(id)})`; - }); - xml = xml.replace(/xlink:href=\"#(.*?)\"/g, (m: string, id: string) => { - return `xlink:href="#${this.normalizeId(id)}"`; - }); - return xml; + return pxsim.visuals.normalizeXml(this.prefix, xml); } protected normalizeId(svgId: string) {