c_meyer/pxt-ev3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simulator support for remote (#302)

Browse Source 
* fixing up state

* upgrading ir simulator

* displaying remote

* updated infrared svg
This commit is contained in:
Peli de Halleux 2018-02-02 13:38:54 -08:00 committed by GitHub
parent 4dfada877c
commit 69fcb7407a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 178 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
libs/infrared-sensor/ir.ts
View File

@ -129,7 +129,7 @@ namespace sensors {
* @param ev the event to wait for * @param ev the event to wait for
*/ */
//% help=input/remote-infrared-beacon/pause-until //% help=input/remote-infrared-beacon/pause-until
//% blockId=remotebuttonEvent block="pause until %button|%event" //% blockId=remoteButtonPauseUntil block="pause until %button|%event"
//% parts="remote" //% parts="remote"
//% blockNamespace=sensors //% blockNamespace=sensors
//% weight=99 blockGap=8 //% weight=99 blockGap=8

21
sim/visuals/assets/RemoteSvg.ts Normal file
View File

@ -0,0 +1,21 @@
namespace pxsim.visuals {
export const REMOVE_SVG = `
<svg xmlns="http://www.w3.org/2000/svg" width="371.7" height="418.7" viewBox="0 0 98.3 110.8" id="svg8">
<g id="layer1" transform="translate(0 -186.2)">
<rect id="rect90-3" width="72.7" height="9.6" x="12.1" y="186.5" rx="2.1" fill="#666" stroke="#000" stroke-width=".5"/>
<rect id="rect90" width="73.1" height="9.6" x="12.2" y="287.1" rx="2.1" stroke="#000" stroke-width=".5"/>
<path d="M14.3 193.2c-1.1 0-2.1 1-2.1 2.1v15.5H2.4c-1.2 0-2.1 1-2.1 2.1v73.7c0 1.1 1 2.1 2.1 2.1h9.8v.6c0 1.2 1 2.1 2.1 2.1h68.3c1.2 0 2.2-1 2.2-2.1v-.6h11.1c1.2 0 2.2-1 2.2-2.1v-73.7c0-1.1-1-2.1-2.2-2.1H84.8v-15.5c0-1.2-1-2.1-2.2-2.1z" id="rect10" fill="#fff" stroke="#000" stroke-width="1.1"/>
<path d="M31 197.9c7.3 0 7.7 8.2 7.7 9.3v17.4c0 1.2-1 2.2-2.2 2.2H25.7c-1.2 0-2.2-1-2.2-2.2v-17c0-1.1.2-9.7 7.5-9.7z" id="topleft" fill="#ccc" stroke="#000" stroke-width="1.1"/>
<path d="M65.5 197.9c7.3 0 7.7 8.2 7.7 9.3v17.4c0 1.2-1 2.2-2.2 2.2H60.2c-1.2 0-2.1-1-2.1-2.2v-17c0-1.1.2-9.7 7.4-9.7z" id="topright" fill="#ccc" stroke="#000" stroke-width="1.1"/>
<path d="M65.7 266.3c-7.3 0-7.6-8.2-7.6-9.4v-17.4c0-1.2 1-2.2 2.1-2.2H71c1.2 0 2.2 1 2.2 2.2v17c0 1.2-.2 9.8-7.5 9.8z" id="bottomright" fill="#ccc" stroke="#000" stroke-width="1.1"/>
<path d="M31.2 266.3c-7.3 0-7.7-8.2-7.7-9.4v-17.4c0-1.2 1-2.2 2.2-2.2h10.8c1.2 0 2.2 1 2.2 2.2v17c0 1.2-.3 9.8-7.5 9.8z" id="bottomleft" fill="#ccc" stroke="#000" stroke-width="1.1"/>
<path d="M27.5 273.6l40.1.1c1.2 0 5.4 6.3 5.4 7.5v5.8c0 1.1-1 2.1-2.2 2.1H25.5c-1.2 0-2.1-1-2.1-2.1v-5.5c0-1.2 3-7.9 4.1-7.9z" id="center" fill="#b3b3b3" stroke="#000" stroke-width="1.1"/>
<rect id="rect107" width="15.1" height="3.2" x="23.1" y="231.1" ry="1.3" fill="#247aff" stroke-width=".5"/>
<rect id="rect107-1" width="15.1" height="3.2" x="58.2" y="231.1" ry="1.3" fill="#ff242b" stroke-width=".5"/>
<circle id="path941" cx="49.2" cy="263.3" r="2.5" fill="#ff242b" stroke-width=".5"/>
<circle id="path943" cx="49.2" cy="263.3" r="4.5" fill="none" stroke="#949494" stroke-width=".5"/>
</g>
</svg>
`;
}

48
sim/visuals/assets/infrared.svg Normal file
View File

@ -0,0 +1,48 @@
<svg xmlns="http://www.w3.org/2000/svg" id="svg5190" viewBox="0 0 83.5 35.1">
<defs id="defs961">
<clipPath id="clip-path" transform="translate(0 -22.4)">
<circle cx="17.5" cy="40" r="7" id="circle955" fill="none"/>
</clipPath>
<clipPath id="clip-path-2" transform="translate(0 -22.4)">
<circle cx="65.9" cy="40" r="7" id="circle958" fill="none"/>
</clipPath>
</defs>
<path data-name="US main black2" id="US_main_black2" fill="#242424" d="M22.6 1.5H66v31.3H22.6z"/>
<path data-name="US main black1" id="US_main_black1" d="M30.2 8.5h25.3v17.6H30.2z"/>
<g id="US_eye1_net" data-name="US eye1 net">
<g clip-path="url(#clip-path)" id="g991">
<g id="US_eye1_net_mask" data-name="US eye1 net mask">
<g id="US_eye1_net_total" data-name="US eye1 net total" fill="#aa7707">
<path id="US_eye1_net14" data-name="US eye1 net14" transform="rotate(-30 -30.7 33.6)" d="M10.8 33.5h.6v22.8h-.6z"/>
<path id="US_eye1_net13" data-name="US eye1 net13" transform="rotate(-30 -18.8 36.5)" d="M11.8 47.4h22.5v.6H11.8z"/>
<path id="US_eye1_net12" data-name="US eye1 net12" transform="rotate(-30 -28.2 32.2)" d="M13.3 32.1h.6v22.8h-.6z"/>
<path id="US_eye1_net11" data-name="US eye1 net11" transform="rotate(-30 -20.2 34)" d="M10.4 45h22.5v.6H10.4z"/>
<path id="US_eye1_net10" data-name="US eye1 net10" transform="rotate(-30 -25.7 30.8)" d="M15.8 30.6h.6v22.8h-.6z"/>
<path id="US_eye1_net9" data-name="US eye1 net9" transform="rotate(-30 -21.7 31.5)" d="M8.9 42.5h22.5v.6H8.9z"/>
<path id="US_eye1_net8" data-name="US eye1 net8" transform="rotate(-30 -23.2 29.3)" d="M18.3 29.2h.6V52h-.6z"/>
<path id="US_eye1_net7" data-name="US eye1 net7" transform="rotate(-30 -23.1 29)" d="M7.5 40H30v.6H7.5z"/>
<path id="US_eye1_net6" data-name="US eye1 net6" transform="rotate(-30 -20.7 27.9)" d="M20.8 27.8h.6v22.8h-.6z"/>
<path id="US_eye1_net5" data-name="US eye1 net5" transform="rotate(-30 -24.6 26.5)" d="M6 37.5h22.5v.6H6z"/>
<path id="US_eye1_net4" data-name="US eye1 net4" transform="rotate(-30 -18.2 26.4)" d="M23.3 26.3h.6v22.8h-.6z"/>
<path id="US_eye1_net3" data-name="US eye1 net3" transform="rotate(-30 -26 24)" d="M4.6 35h22.5v.6H4.6z"/>
<path id="US_eye1_net2" data-name="US eye1 net2" transform="rotate(-30 -15.7 25)" d="M25.8 24.9h.6v22.8h-.6z"/>
<path id="US_eye1_net1" data-name="US eye1 net1" transform="rotate(-30 -27.4 21.5)" d="M3.2 32.5h22.5v.6H3.2z"/>
</g>
</g>
</g>
</g>
<g id="g1656">
<g data-name="US eye1 black" id="US_eye1_black">
<circle id="circle967" r="17.4" cy="17.6" cx="17.6" stroke="#b3b3b3" stroke-width=".3" stroke-miterlimit="10"/>
<circle id="circle969" r="17.3" cy="17.6" cx="17.6" fill="none"/>
</g>
<path id="path1650" d="M5.8 17h19.7l3.1 3.6" fill="none" stroke="#e80000" stroke-width="1.7"/>
</g>
<g transform="matrix(-1 0 0 1 83.5 0)" id="g1656-6">
<g data-name="US eye1 black" id="US_eye1_black-9">
<circle id="circle967-5" r="17.4" cy="17.6" cx="17.6" stroke="#b3b3b3" stroke-width=".3" stroke-miterlimit="10"/>
<circle id="circle969-1" r="17.3" cy="17.6" cx="17.6" fill="none"/>
</g>
<path id="path1650-4" d="M5.8 17h19.7l3.1 3.6" fill="none" stroke="#e80000" stroke-width="1.7"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

114
sim/visuals/assets/infraredsvg.ts
View File

@ -1,79 +1,53 @@
namespace pxsim { namespace pxsim {
export const INFRARED_SVG = `<svg id="svg5190" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 83.53 35.14"> export const INFRARED_SVG = `
<defs> <svg xmlns="http://www.w3.org/2000/svg" id="svg5190" viewBox="0 0 83.5 35.1">
<clipPath id="clip-path" transform="translate(0.04 -22.43)"> <defs id="defs961">
<circle cx="17.53" cy="40" r="6.98" style="fill: none"/> <clipPath id="clip-path" transform="translate(0 -22.4)">
<circle cx="17.5" cy="40" r="7" id="circle955" fill="none"/>
</clipPath> </clipPath>
<clipPath id="clip-path-2" transform="translate(0.04 -22.43)"> <clipPath id="clip-path-2" transform="translate(0 -22.4)">
<circle cx="65.92" cy="40" r="6.98" style="fill: none"/> <circle cx="65.9" cy="40" r="7" id="circle958" fill="none"/>
</clipPath> </clipPath>
</defs> </defs>
<title>ultra sonic</title> <path data-name="US main black2" id="US_main_black2" fill="#242424" d="M22.6 1.5H66v31.3H22.6z"/>
<g id="ultra_sonic" data-name="ultra sonic"> <path data-name="US main black1" id="US_main_black1" d="M30.2 8.5h25.3v17.6H30.2z"/>
<rect id="US_main_black2" data-name="US main black2" x="22.57" y="1.49" width="43.38" height="31.25" style="fill: #242424"/> <g id="US_eye1_net" data-name="US eye1 net">
<rect id="US_main_black1" data-name="US main black1" x="30.16" y="8.47" width="25.33" height="17.59"/> <g clip-path="url(#clip-path)" id="g991">
<g id="US_eye1" data-name="US eye1"> <g id="US_eye1_net_mask" data-name="US eye1 net mask">
<g id="US_eye1_black" data-name="US eye1 black"> <g id="US_eye1_net_total" data-name="US eye1 net total" fill="#aa7707">
<circle cx="17.57" cy="17.57" r="17.44" style="stroke: #b3b3b3;stroke-miterlimit: 10;stroke-width: 0.25px"/> <path id="US_eye1_net14" data-name="US eye1 net14" transform="rotate(-30 -30.7 33.6)" d="M10.8 33.5h.6v22.8h-.6z"/>
<circle cx="17.57" cy="17.57" r="17.32" style="fill: none"/> <path id="US_eye1_net13" data-name="US eye1 net13" transform="rotate(-30 -18.8 36.5)" d="M11.8 47.4h22.5v.6H11.8z"/>
</g> <path id="US_eye1_net12" data-name="US eye1 net12" transform="rotate(-30 -28.2 32.2)" d="M13.3 32.1h.6v22.8h-.6z"/>
<circle id="US_eye1_red" data-name="US eye1 red" cx="17.57" cy="17.57" r="10.77" style="fill: #ab1919"/> <path id="US_eye1_net11" data-name="US eye1 net11" transform="rotate(-30 -20.2 34)" d="M10.4 45h22.5v.6H10.4z"/>
<circle id="US_eye1_gold_circle" data-name="US eye1 gold circle" cx="17.57" cy="17.57" r="8.04" style="fill: #aa7707"/> <path id="US_eye1_net10" data-name="US eye1 net10" transform="rotate(-30 -25.7 30.8)" d="M15.8 30.6h.6v22.8h-.6z"/>
<circle id="US_eye1_wh_in_gold" data-name="US eye1 wh in gold" cx="17.57" cy="17.57" r="6.98" style="fill: #f1f1f1"/> <path id="US_eye1_net9" data-name="US eye1 net9" transform="rotate(-30 -21.7 31.5)" d="M8.9 42.5h22.5v.6H8.9z"/>
<g id="US_eye1_net" data-name="US eye1 net"> <path id="US_eye1_net8" data-name="US eye1 net8" transform="rotate(-30 -23.2 29.3)" d="M18.3 29.2h.6V52h-.6z"/>
<g style="clip-path: url(#clip-path)"> <path id="US_eye1_net7" data-name="US eye1 net7" transform="rotate(-30 -23.1 29)" d="M7.5 40H30v.6H7.5z"/>
<g id="US_eye1_net_mask" data-name="US eye1 net mask"> <path id="US_eye1_net6" data-name="US eye1 net6" transform="rotate(-30 -20.7 27.9)" d="M20.8 27.8h.6v22.8h-.6z"/>
<g id="US_eye1_net_total" data-name="US eye1 net total"> <path id="US_eye1_net5" data-name="US eye1 net5" transform="rotate(-30 -24.6 26.5)" d="M6 37.5h22.5v.6H6z"/>
<rect id="US_eye1_net14" data-name="US eye1 net14" x="10.84" y="33.53" width="0.61" height="22.79" transform="translate(-20.93 -10.84) rotate(-30)" style="fill: #aa7707"/> <path id="US_eye1_net4" data-name="US eye1 net4" transform="rotate(-30 -18.2 26.4)" d="M23.3 26.3h.6v22.8h-.6z"/>
<rect id="US_eye1_net13" data-name="US eye1 net13" x="11.8" y="47.44" width="22.51" height="0.61" transform="translate(-20.75 -4.51) rotate(-30)" style="fill: #aa7707"/> <path id="US_eye1_net3" data-name="US eye1 net3" transform="rotate(-30 -26 24)" d="M4.6 35h22.5v.6H4.6z"/>
<rect id="US_eye1_net12" data-name="US eye1 net12" x="13.33" y="32.09" width="0.61" height="22.79" transform="translate(-19.88 -9.79) rotate(-30)" style="fill: #aa7707"/> <path id="US_eye1_net2" data-name="US eye1 net2" transform="rotate(-30 -15.7 25)" d="M25.8 24.9h.6v22.8h-.6z"/>
<rect id="US_eye1_net11" data-name="US eye1 net11" x="10.36" y="44.95" width="22.51" height="0.61" transform="translate(-19.7 -5.56) rotate(-30)" style="fill: #aa7707"/> <path id="US_eye1_net1" data-name="US eye1 net1" transform="rotate(-30 -27.4 21.5)" d="M3.2 32.5h22.5v.6H3.2z"/>
<rect id="US_eye1_net10" data-name="US eye1 net10" x="15.83" y="30.65" width="0.61" height="22.79" transform="translate(-18.82 -8.73) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye1_net9" data-name="US eye1 net9" x="8.92" y="42.45" width="22.51" height="0.61" transform="translate(-18.64 -6.62) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye1_net8" data-name="US eye1 net8" x="18.33" y="29.21" width="0.61" height="22.79" transform="translate(-17.77 -7.68) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye1_net7" data-name="US eye1 net7" x="7.47" y="39.96" width="22.51" height="0.61" transform="translate(-17.59 -7.67) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye1_net6" data-name="US eye1 net6" x="20.82" y="27.77" width="0.61" height="22.79" transform="translate(-16.72 -6.62) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye1_net5" data-name="US eye1 net5" x="6.03" y="37.46" width="22.51" height="0.61" transform="translate(-16.53 -8.73) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye1_net4" data-name="US eye1 net4" x="23.32" y="26.32" width="0.61" height="22.79" transform="translate(-15.66 -5.57) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye1_net3" data-name="US eye1 net3" x="4.59" y="34.96" width="22.51" height="0.61" transform="translate(-15.48 -9.78) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye1_net2" data-name="US eye1 net2" x="25.81" y="24.88" width="0.61" height="22.79" transform="translate(-14.61 -4.51) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye1_net1" data-name="US eye1 net1" x="3.15" y="32.47" width="22.51" height="0.61" transform="translate(-14.42 -10.84) rotate(-30)" style="fill: #aa7707"/>
</g>
</g>
</g>
</g>
</g>
<g id="US_eye2" data-name="US eye2">
<g id="US_eye2_black" data-name="US eye2 black">
<circle cx="65.96" cy="17.57" r="17.44" style="stroke: #b3b3b3;stroke-miterlimit: 10;stroke-width: 0.25px"/>
<circle cx="65.96" cy="17.57" r="17.32" style="fill: none"/>
</g>
<circle id="US_eye2_red" data-name="US eye2 red" cx="65.96" cy="17.57" r="10.77" style="fill: #ab1919"/>
<circle id="US_eye2_gold_circle" data-name="US eye2 gold circle" cx="65.96" cy="17.57" r="8.04" style="fill: #aa7707"/>
<circle id="US_eye2_wh_in_gold" data-name="US eye2 wh in gold" cx="65.96" cy="17.57" r="6.98" style="fill: #f1f1f1"/>
<g id="US_eye2_net" data-name="US eye2 net">
<g style="clip-path: url(#clip-path-2)">
<g id="US_eye2_net_mask" data-name="US eye2 net mask">
<g id="US_eye2_net_total" data-name="US eye2 net total">
<rect id="US_eye2_net14" data-name="US eye2 net14" x="59.23" y="33.53" width="0.61" height="22.79" transform="translate(-14.45 13.35) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye2_net13" data-name="US eye2 net13" x="60.18" y="47.44" width="22.51" height="0.61" transform="translate(-14.27 19.69) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye2_net12" data-name="US eye2 net12" x="61.72" y="32.09" width="0.61" height="22.79" transform="translate(-13.4 14.41) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye2_net11" data-name="US eye2 net11" x="58.74" y="44.95" width="22.51" height="0.61" transform="translate(-13.21 18.63) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye2_net10" data-name="US eye2 net10" x="64.22" y="30.65" width="0.61" height="22.79" transform="translate(-12.34 15.46) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye2_net9" data-name="US eye2 net9" x="57.3" y="42.45" width="22.51" height="0.61" transform="translate(-12.16 17.58) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye2_net8" data-name="US eye2 net8" x="66.71" y="29.21" width="0.61" height="22.79" transform="translate(-11.29 16.52) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye2_net7" data-name="US eye2 net7" x="55.86" y="39.96" width="22.51" height="0.61" transform="translate(-11.1 16.52) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye2_net6" data-name="US eye2 net6" x="69.21" y="27.77" width="0.61" height="22.79" transform="translate(-10.23 17.57) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye2_net5" data-name="US eye2 net5" x="54.42" y="37.46" width="22.51" height="0.61" transform="translate(-10.05 15.47) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye2_net4" data-name="US eye2 net4" x="71.71" y="26.32" width="0.61" height="22.79" transform="translate(-9.18 18.63) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye2_net3" data-name="US eye2 net3" x="52.98" y="34.96" width="22.51" height="0.61" transform="translate(-8.99 14.41) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye2_net2" data-name="US eye2 net2" x="74.2" y="24.88" width="0.61" height="22.79" transform="translate(-8.12 19.68) rotate(-30)" style="fill: #aa7707"/>
<rect id="US_eye2_net1" data-name="US eye2 net1" x="51.54" y="32.47" width="22.51" height="0.61" transform="translate(-7.94 13.36) rotate(-30)" style="fill: #aa7707"/>
</g>
</g>
</g> </g>
</g> </g>
</g> </g>
</g> </g>
</svg>`; <g id="g1656">
<g data-name="US eye1 black" id="US_eye1_black">
<circle id="circle967" r="17.4" cy="17.6" cx="17.6" stroke="#b3b3b3" stroke-width=".3" stroke-miterlimit="10"/>
<circle id="circle969" r="17.3" cy="17.6" cx="17.6" fill="none"/>
</g>
<path id="path1650" d="M5.8 17h19.7l3.1 3.6" fill="none" stroke="#e80000" stroke-width="1.7"/>
</g>
<g transform="matrix(-1 0 0 1 83.5 0)" id="g1656-6">
<g data-name="US eye1 black" id="US_eye1_black-9">
<circle id="circle967-5" r="17.4" cy="17.6" cx="17.6" stroke="#b3b3b3" stroke-width=".3" stroke-miterlimit="10"/>
<circle id="circle969-1" r="17.3" cy="17.6" cx="17.6" fill="none"/>
</g>
<path id="path1650-4" d="M5.8 17h19.7l3.1 3.6" fill="none" stroke="#e80000" stroke-width="1.7"/>
</g>
</svg>
`;
} }

16
sim/visuals/assets/remote.svg Normal file
View File

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="371.7" height="418.7" viewBox="0 0 98.3 110.8" id="svg8">
<g id="layer1" transform="translate(0 -186.2)">
<rect id="rect90-3" width="72.7" height="9.6" x="12.1" y="186.5" rx="2.1" fill="#666" stroke="#000" stroke-width=".5"/>
<rect id="rect90" width="73.1" height="9.6" x="12.2" y="287.1" rx="2.1" stroke="#000" stroke-width=".5"/>
<path d="M14.3 193.2c-1.1 0-2.1 1-2.1 2.1v15.5H2.4c-1.2 0-2.1 1-2.1 2.1v73.7c0 1.1 1 2.1 2.1 2.1h9.8v.6c0 1.2 1 2.1 2.1 2.1h68.3c1.2 0 2.2-1 2.2-2.1v-.6h11.1c1.2 0 2.2-1 2.2-2.1v-73.7c0-1.1-1-2.1-2.2-2.1H84.8v-15.5c0-1.2-1-2.1-2.2-2.1z" id="rect10" fill="#fff" stroke="#000" stroke-width="1.1"/>
<path d="M31 197.9c7.3 0 7.7 8.2 7.7 9.3v17.4c0 1.2-1 2.2-2.2 2.2H25.7c-1.2 0-2.2-1-2.2-2.2v-17c0-1.1.2-9.7 7.5-9.7z" id="topleft" fill="#ccc" stroke="#000" stroke-width="1.1"/>
<path d="M65.5 197.9c7.3 0 7.7 8.2 7.7 9.3v17.4c0 1.2-1 2.2-2.2 2.2H60.2c-1.2 0-2.1-1-2.1-2.2v-17c0-1.1.2-9.7 7.4-9.7z" id="topright" fill="#ccc" stroke="#000" stroke-width="1.1"/>
<path d="M65.7 266.3c-7.3 0-7.6-8.2-7.6-9.4v-17.4c0-1.2 1-2.2 2.1-2.2H71c1.2 0 2.2 1 2.2 2.2v17c0 1.2-.2 9.8-7.5 9.8z" id="bottomright" fill="#ccc" stroke="#000" stroke-width="1.1"/>
<path d="M31.2 266.3c-7.3 0-7.7-8.2-7.7-9.4v-17.4c0-1.2 1-2.2 2.2-2.2h10.8c1.2 0 2.2 1 2.2 2.2v17c0 1.2-.3 9.8-7.5 9.8z" id="bottomleft" fill="#ccc" stroke="#000" stroke-width="1.1"/>
<path d="M27.5 273.6l40.1.1c1.2 0 5.4 6.3 5.4 7.5v5.8c0 1.1-1 2.1-2.2 2.1H25.5c-1.2 0-2.1-1-2.1-2.1v-5.5c0-1.2 3-7.9 4.1-7.9z" id="center" fill="#b3b3b3" stroke="#000" stroke-width="1.1"/>
<rect id="rect107" width="15.1" height="3.2" x="23.1" y="231.1" ry="1.3" fill="#247aff" stroke-width=".5"/>
<rect id="rect107-1" width="15.1" height="3.2" x="58.2" y="231.1" ry="1.3" fill="#ff242b" stroke-width=".5"/>
<circle id="path941" cx="49.2" cy="263.3" r="2.5" fill="#ff242b" stroke-width=".5"/>
<circle id="path943" cx="49.2" cy="263.3" r="4.5" fill="none" stroke="#949494" stroke-width=".5"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

60
sim/visuals/controls/remoteBeaconButtons.ts
View File

@ -11,47 +11,47 @@ namespace pxsim.visuals {
export class RemoteBeaconButtonsControl extends ControlView<InfraredSensorNode> { export class RemoteBeaconButtonsControl extends ControlView<InfraredSensorNode> {
private group: SVGGElement; private group: SVGGElement;
private id = Math.random().toString();
getInnerView() { getInnerView() {
this.group = svg.elt("g") as SVGGElement; 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 = [ const btns: Map<InfraredRemoteButton> = {
InfraredRemoteButton.CenterBeacon, "center": InfraredRemoteButton.CenterBeacon,
InfraredRemoteButton.TopLeft, "topleft": InfraredRemoteButton.TopLeft,
InfraredRemoteButton.TopRight, "topright": InfraredRemoteButton.TopRight,
InfraredRemoteButton.BottomLeft, "bottomleft": InfraredRemoteButton.BottomLeft,
InfraredRemoteButton.BottomRight]; "bottomright": 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);
});
}
})
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; return this.group;
} }
getInnerWidth() { getInnerWidth() {
return 10.2; return 98.3;
} }
getInnerHeight() { getInnerHeight() {
return 15; return 110.8;
} }
} }
} }

30
sim/visuals/nodes/moduleView.ts
View File

@ -1,4 +1,20 @@
namespace pxsim.visuals { 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 { export class ModuleView extends View implements LayoutElement {
protected content: SVGSVGElement; protected content: SVGSVGElement;
@ -9,21 +25,11 @@ namespace pxsim.visuals {
constructor(protected xml: string, protected prefix: string, protected id: NodeType, protected port: NodeType) { constructor(protected xml: string, protected prefix: string, protected id: NodeType, protected port: NodeType) {
super(); super();
this.xml = this.normalizeXml(xml); this.xml = normalizeXml(this.prefix, xml);
} }
private normalizeXml(xml: string) { private normalizeXml(xml: string) {
const prefix = this.prefix; return pxsim.visuals.normalizeXml(this.prefix, xml);
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;
} }
protected normalizeId(svgId: string) { protected normalizeId(svgId: string) {