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

Optimize simulator for light mode. (#379)

Browse Source 
* Optimize simulator for light mode.

* Add user-select none.
This commit is contained in:
Sam El-Husseini 2018-03-28 13:36:52 -07:00 committed by GitHub
parent b4b3a24ed2
commit 0dc2548d0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 108 additions and 631 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
sim/dalboard.ts
View File

@ -19,6 +19,9 @@ namespace pxsim {
brickNode: BrickNode; brickNode: BrickNode;
outputNodes: MotorNode[] = []; outputNodes: MotorNode[] = [];
highcontrastMode?: boolean;
lightMode?: boolean;
public motorMap: pxt.Map<number> = { public motorMap: pxt.Map<number> = {
0x01: 0, 0x01: 0,
0x02: 1, 0x02: 1,
@ -77,17 +80,25 @@ namespace pxsim {
fnArgs: fnArgs, fnArgs: fnArgs,
maxWidth: "100%", maxWidth: "100%",
maxHeight: "100%", maxHeight: "100%",
highContrast: msg.highContrast,
light: msg.light
}; };
const viewHost = new visuals.BoardHost(pxsim.visuals.mkBoardView({ const viewHost = new visuals.BoardHost(pxsim.visuals.mkBoardView({
visual: boardDef.visual visual: boardDef.visual,
highContrast: msg.highContrast,
light: msg.light
}), opts); }), opts);
document.body.innerHTML = ""; // clear children document.body.innerHTML = ""; // clear children
document.body.className = msg.light ? "light" : "";
document.body.appendChild(this.view = viewHost.getView() as SVGSVGElement); document.body.appendChild(this.view = viewHost.getView() as SVGSVGElement);
this.inputNodes = []; this.inputNodes = [];
this.outputNodes = []; this.outputNodes = [];
this.highcontrastMode = msg.highContrast;
this.lightMode = msg.light;
return Promise.resolve(); return Promise.resolve();
} }
@ -171,6 +182,14 @@ namespace pxsim {
return runtime.board as EV3Board; return runtime.board as EV3Board;
} }
export function inLightMode(): boolean {
return /light=1/i.test(window.location.href) || ev3board().lightMode;
}
export function inHighcontrastMode(): boolean {
return ev3board().highcontrastMode;
}
if (!pxsim.initCurrentRuntime) { if (!pxsim.initCurrentRuntime) {
pxsim.initCurrentRuntime = initRuntimeWithDalBoard; pxsim.initCurrentRuntime = initRuntimeWithDalBoard;
} }

4
sim/public/simulator.html
View File

@ -18,6 +18,10 @@ body {
overflow: hidden; overflow: hidden;
margin: 0; margin: 0;
} }
.light * {
transition: none !important;
}
</style> </style>
<script src="/cdn/bluebird.min.js"></script> <script src="/cdn/bluebird.min.js"></script>
<script src="/cdn/pxtsim.js"></script> <script src="/cdn/pxtsim.js"></script>

2
sim/visuals/assets/Color Sensor.svg
View File

@ -13,7 +13,7 @@
<path id="color_sideboxes" data-name="color sideboxes" d="M2.14,9.19H34a.7.7,0,0,1,.7.7V28a.7.7,0,0,1-.7.7H2.14a.7.7,0,0,1-.7-.7V9.89A.7.7,0,0,1,2.14,9.19Z" transform="translate(-1.44 -1.6)" style="fill: #a8aaa8"/> <path id="color_sideboxes" data-name="color sideboxes" d="M2.14,9.19H34a.7.7,0,0,1,.7.7V28a.7.7,0,0,1-.7.7H2.14a.7.7,0,0,1-.7-.7V9.89A.7.7,0,0,1,2.14,9.19Z" transform="translate(-1.44 -1.6)" style="fill: #a8aaa8"/>
<g id="color_bigbox-2" data-name="color bigbox-2"> <g id="color_bigbox-2" data-name="color bigbox-2">
<image width="33" height="34" transform="translate(0.06)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAjCAYAAADxG9hnAAAACXBIWXMAAAsSAAALEgHS3X78AAAAzUlEQVRYR+3YMU4DMRBG4W8Q5eYMUEMuw/3ScQDugkTPcoSsa4ZibYjcUMVQ+Ekjj+Tif7YrT2Sm/8BtayIisOCurtemYEXJzIzMFBEL7vGIJ7vMtVnxgje8q09zxAmvOONzQJ1r3gnH9jQLHuw3cmMMB3tewXIZGrVG8p056vS/MkV6pkjPFOmZIj1TpGeK9EyRninSM0V6pkjPFOmZIj2XIn81n0h+RAo+sNWNUbXV3NI+4Sueaz9iJNFouWu0iVFEHIwb0jQK1szcvgDqy2NNnOFs5AAAAABJRU5ErkJggg==" style="opacity: 0.30000000000000004;mix-blend-mode: multiply"/> <image width="33" height="34" transform="translate(0.06)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAjCAYAAADxG9hnAAAACXBIWXMAAAsSAAALEgHS3X78AAAAzUlEQVRYR+3YMU4DMRBG4W8Q5eYMUEMuw/3ScQDugkTPcoSsa4ZibYjcUMVQ+Ekjj+Tif7YrT2Sm/8BtayIisOCurtemYEXJzIzMFBEL7vGIJ7vMtVnxgje8q09zxAmvOONzQJ1r3gnH9jQLHuw3cmMMB3tewXIZGrVG8p056vS/MkV6pkjPFOmZIj1TpGeK9EyRninSM0V6pkjPFOmZIj2XIn81n0h+RAo+sNWNUbXV3NI+4Sueaz9iJNFouWu0iVFEHIwb0jQK1szcvgDqy2NNnOFs5AAAAABJRU5ErkJggg==" style="opacity: 0.30000000000000004;mix-blend-mode: multiply"/>
<path d="M5,3.33h26c1,0,1.78.57,1.78,1.27V32.77c0,.7-.8,1.27-1.78,1.27H5c-1,0-1.78-.57-1.78-1.27V4.6C3.25,3.9,4.05,3.33,5,3.33Z" transform="translate(-1.44 -1.6)" style="fill: url(#linear-gradient)"/> <path id="color_bigbox-2_path" d="M5,3.33h26c1,0,1.78.57,1.78,1.27V32.77c0,.7-.8,1.27-1.78,1.27H5c-1,0-1.78-.57-1.78-1.27V4.6C3.25,3.9,4.05,3.33,5,3.33Z" transform="translate(-1.44 -1.6)" style="fill: url(#linear-gradient)"/>
</g> </g>
<rect id="color_side_black_4" data-name="color side black 4" x="31.83" y="10.38" width="0.7" height="5.58"/> <rect id="color_side_black_4" data-name="color side black 4" x="31.83" y="10.38" width="0.7" height="5.58"/>
<rect id="color_side_black_3" data-name="color side black 3" x="0.84" y="10.38" width="0.7" height="5.58"/> <rect id="color_side_black_3" data-name="color side black 3" x="0.84" y="10.38" width="0.7" height="5.58"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

33
sim/visuals/assets/ColorSensorsvg.ts
View File

@ -1,34 +1,3 @@
namespace pxsim { namespace pxsim {
export const COLOR_SENSOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 33.22 34"> export const COLOR_SENSOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 33.22 34"><defs><linearGradient id="linear-gradient" x1="-448.15" y1="475.99" x2="-448.15" y2="475.83" gradientTransform="matrix(32.16 0 0 -33.37 14429.08 15914.64)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a8aaa8"/><stop offset="1" stop-color="#535453"/></linearGradient></defs><g style="isolation:isolate"><g id="svg41"><g id="color_box" data-name="color box"><g id="color_grey" data-name="color grey"><path id="color_sideboxes" data-name="color sideboxes" d="M2.14 9.19H34a.7.7 0 0 1 .7.7V28a.7.7 0 0 1-.7.7H2.14a.7.7 0 0 1-.7-.7V9.89a.7.7 0 0 1 .7-.7z" transform="translate(-1.44 -1.6)" fill="#a8aaa8"/><g id="color_bigbox-2" data-name="color bigbox-2"><image width="33" height="34" transform="translate(.06)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAjCAYAAADxG9hnAAAACXBIWXMAAAsSAAALEgHS3X78AAAAzUlEQVRYR+3YMU4DMRBG4W8Q5eYMUEMuw/3ScQDugkTPcoSsa4ZibYjcUMVQ+Ekjj+Tif7YrT2Sm/8BtayIisOCurtemYEXJzIzMFBEL7vGIJ7vMtVnxgje8q09zxAmvOONzQJ1r3gnH9jQLHuw3cmMMB3tewXIZGrVG8p056vS/MkV6pkjPFOmZIj1TpGeK9EyRninSM0V6pkjPFOmZIj2XIn81n0h+RAo+sNWNUbXV3NI+4Sueaz9iJNFouWu0iVFEHIwb0jQK1szcvgDqy2NNnOFs5AAAAABJRU5ErkJggg==" style="mix-blend-mode:multiply" opacity=".3"/><path id="color_bigbox-2_path" d="M5 3.33h26c1 0 1.78.57 1.78 1.27v28.17c0 .7-.8 1.27-1.78 1.27H5c-1 0-1.78-.57-1.78-1.27V4.6c.03-.7.83-1.27 1.78-1.27z" transform="translate(-1.44 -1.6)" fill="url(#linear-gradient)"/></g><path id="color_side_black_4" data-name="color side black 4" d="M31.83 10.38h.7v5.58h-.7z"/><path id="color_side_black_3" data-name="color side black 3" d="M.84 10.38h.7v5.58h-.7z"/><path id="color_side_black_2" data-name="color side black 2" d="M31.83 18.34h.7v5.58h-.7z"/><path id="color_side_black1" data-name="color side black1" d="M.84 18.34h.7v5.58h-.7z"/></g><path id="color_red" data-name="color red" d="M11.63 23.43a6.32 6.32 0 0 1 .15-1.37 8.79 8.79 0 1 1 12.54 0 6.42 6.42 0 1 1-12.55 2.7 6.61 6.61 0 0 1-.15-1.33z" transform="translate(-1.44 -1.6)" fill="#d42715"/><path id="color_black" data-name="color black" d="M13.11 23.43a4.89 4.89 0 0 1 .34-1.81 7.4 7.4 0 1 1 10.4-1.2 7.32 7.32 0 0 1-1.18 1.18 5 5 0 1 1-9.56 1.83z" transform="translate(-1.44 -1.6)"/><g id="color_sensors" data-name="color sensors" fill="#f1f1f1"><circle id="color_sensor_white_big" data-name="color sensor white big" cx="16.61" cy="14.43" r="3.35"/><circle id="color_sensor_white_small" data-name="color sensor white small" cx="16.61" cy="21.69" r="1.81"/></g></g></g></g></svg>`;
<defs>
<linearGradient id="linear-gradient" x1="-448.15" y1="475.99" x2="-448.15" y2="475.83" gradientTransform="matrix(32.16, 0, 0, -33.37, 14429.08, 15914.64)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a8aaa8"/>
<stop offset="1" stop-color="#535453"/>
</linearGradient>
</defs>
<title>Color Sensor</title>
<g style="isolation: isolate">
<g id="svg41">
<g id="color_box" data-name="color box">
<g id="color_grey" data-name="color grey">
<path id="color_sideboxes" data-name="color sideboxes" d="M2.14,9.19H34a.7.7,0,0,1,.7.7V28a.7.7,0,0,1-.7.7H2.14a.7.7,0,0,1-.7-.7V9.89A.7.7,0,0,1,2.14,9.19Z" transform="translate(-1.44 -1.6)" style="fill: #a8aaa8"/>
<g id="color_bigbox-2" data-name="color bigbox-2">
<image width="33" height="34" transform="translate(0.06)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAjCAYAAADxG9hnAAAACXBIWXMAAAsSAAALEgHS3X78AAAAzUlEQVRYR+3YMU4DMRBG4W8Q5eYMUEMuw/3ScQDugkTPcoSsa4ZibYjcUMVQ+Ekjj+Tif7YrT2Sm/8BtayIisOCurtemYEXJzIzMFBEL7vGIJ7vMtVnxgje8q09zxAmvOONzQJ1r3gnH9jQLHuw3cmMMB3tewXIZGrVG8p056vS/MkV6pkjPFOmZIj1TpGeK9EyRninSM0V6pkjPFOmZIj2XIn81n0h+RAo+sNWNUbXV3NI+4Sueaz9iJNFouWu0iVFEHIwb0jQK1szcvgDqy2NNnOFs5AAAAABJRU5ErkJggg==" style="opacity: 0.30000000000000004;mix-blend-mode: multiply"/>
<path d="M5,3.33h26c1,0,1.78.57,1.78,1.27V32.77c0,.7-.8,1.27-1.78,1.27H5c-1,0-1.78-.57-1.78-1.27V4.6C3.25,3.9,4.05,3.33,5,3.33Z" transform="translate(-1.44 -1.6)" style="fill: url(#linear-gradient)"/>
</g>
<rect id="color_side_black_4" data-name="color side black 4" x="31.83" y="10.38" width="0.7" height="5.58"/>
<rect id="color_side_black_3" data-name="color side black 3" x="0.84" y="10.38" width="0.7" height="5.58"/>
<rect id="color_side_black_2" data-name="color side black 2" x="31.83" y="18.34" width="0.7" height="5.58"/>
<rect id="color_side_black1" data-name="color side black1" x="0.84" y="18.34" width="0.7" height="5.58"/>
</g>
<path id="color_red" data-name="color red" d="M11.63,23.43a6.32,6.32,0,0,1,.15-1.37,8.79,8.79,0,1,1,12.54,0,6.42,6.42,0,1,1-12.55,2.7,6.61,6.61,0,0,1-.15-1.33Z" transform="translate(-1.44 -1.6)" style="fill: #d42715"/>
<path id="color_black" data-name="color black" d="M13.11,23.43a4.89,4.89,0,0,1,.34-1.81,7.4,7.4,0,1,1,10.4-1.2,7.32,7.32,0,0,1-1.18,1.18,5,5,0,1,1-9.56,1.83Z" transform="translate(-1.44 -1.6)"/>
<g id="color_sensors" data-name="color sensors">
<circle id="color_sensor_white_big" data-name="color sensor white big" cx="16.61" cy="14.43" r="3.35" style="fill: #f1f1f1"/>
<circle id="color_sensor_white_small" data-name="color sensor white small" cx="16.61" cy="21.69" r="1.81" style="fill: #f1f1f1"/>
</g>
</g>
</g>
</g>
</svg>`;
} }

108
sim/visuals/assets/EV3svg.ts
View File

File diff suppressed because one or more lines are too long

78
sim/visuals/assets/LargeMotorsvg.ts
View File

File diff suppressed because one or more lines are too long

34
sim/visuals/assets/MediumMotorsvg.ts
View File

@ -1,35 +1,3 @@
namespace pxsim.visuals { namespace pxsim.visuals {
export const MEDIUM_MOTOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"> export const MEDIUM_MOTOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><linearGradient id="linear-gradient" x1="-427.2" y1="440.79" x2="-427.2" y2="440.63" gradientTransform="matrix(44.14 0 0 -44.15 18878.72 19502.57)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a8aaa8"/><stop offset="1" stop-color="#535453"/></linearGradient></defs><g style="isolation:isolate"><g id="svg7610"><g id="Medium_Motor" data-name="Medium Motor"><g id="medmotor_box" data-name="medmotor box"><path id="medmotor_box_wgradient" data-name="medmotor box wgradient" d="M2.57 0h39a2.36 2.36 0 0 1 2.57 2v40.33c0 1-1.1 1.82-2.57 1.82h-39C1.1 44.15 0 43.34 0 42.33V2a2.36 2.36 0 0 1 2.57-2z" transform="translate(2 1.84)" fill="url(#linear-gradient)"/></g><g id="medmotor_star" data-name="medmotor star"><image width="48" height="48" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAYAAACcXioiAAAACXBIWXMAAAsSAAALEgHS3X78AAACfElEQVRoQ+2aPXLbMBBG32ZUijlCnDo/R1AukCoHyAFS5Sw5g5t0bnwCu0ofpTZ9A1usvSmwoClRJEEAI4gzejMcqliS+2FB4AMoUVVyISICrIErO3dpgBpoNONDJde9RKTCJf4R+Ga/u9TADbAFalXdkYEsAiz5L8B3nICxCmyBa+Auh4jVVMAUneR/ABugAuRIaIUT9w4TJyLJIpIEWJ+/wrX8Bng7fgViMRtcRR5F5G/KO/FmKiCANa5Vq6nADhXwwY7DrjaLHALgeJcZQ4D32MtulYwil4AYfOXOogKxRLe8p7SAZC4CSnMRUJrBmThwbBbSRxIh4HFDs3VPwIQl7oXj/M1U3BBr3PUAY3aiEZGjVnzPjQZY4mOscbNqjIgGeLDzGINWvBUQaImHSOlGIUZu2IqbgAr4CtwCT8AL7sbndLzgcrvF5Vq1jQ98An5bwNSNSh9PuFw/A+KH0RhLXIo9K96dB1L68SnZs+JLnchaK75UAWA9ZskCgGULUFiugAZ4BJquAB0IPjcUZz9ugNoL8IqSNplOxA74Z0ezUlU1p3eNG5787tocUuaQOZXfAfe4XB9UVVcAqroTkTsLaghzoZ5TuFGPb+jWzA3Z6dBk/Hrgp53nVEJx7vKXnUMq0XBgp/cWNFaJbe+yYXzCoS14SINL/g9hAnors96KbM5Gqy0Dg+MHUNxjo+6z1Hmg5SKgNBcBpSktIGrk6VJSQOsopwLHKCVAed2sqmPnAMgnICaB9sv9VOAYOQTEWPEdGZKHRAFWeu8Q74Fnpjemnnm1xEndBxI/dEOUFe9Z4hSy/FcCZlnxniVOIZsACPhKYaR2my5ZBZTgP7HrUIs43RAaAAAAAElFTkSuQmCC" style="mix-blend-mode:multiply" opacity=".3"/><path id="medmotor_cut-2" data-name="medmotor cut-2" d="M0 21.25A6.21 6.21 0 0 1 6.22 15H15V6.23A6.22 6.22 0 0 1 21.24 0h1.66a6.22 6.22 0 0 1 6.22 6.22V15h8.8a6.21 6.21 0 0 1 6.22 6.22v1.66a6.21 6.21 0 0 1-6.22 6.22h-8.8v8.8a6.21 6.21 0 0 1-6.22 6.22h-1.66A6.22 6.22 0 0 1 15 37.93v-8.8H6.22A6.22 6.22 0 0 1 0 22.92z" transform="translate(2 1.84)" fill="#a8aaa8"/><circle id="medmotor_hole_4" data-name="medmotor hole 4" cx="39.77" cy="24" r="4.85" fill="#393939"/><circle id="medmotor_hole_3" data-name="medmotor hole 3" cx="8.37" cy="24" r="4.85" fill="#393939"/><circle id="medmotor_hole_2" data-name="medmotor hole 2" cx="24.15" cy="8.22" r="4.85" fill="#393939"/><circle id="medmotor_hole_1" data-name="medmotor hole 1" cx="24.15" cy="39.62" r="4.85" fill="#393939"/></g><g id="medmotor_red" data-name="medmotor red"><circle cx="24.3" cy="24" r="6.75" fill="#d42715"/><circle cx="24.3" cy="24" r="6.63" fill="none" stroke="#a20800" stroke-width=".25"/></g><path id="medmotor_Hole" data-name="medmotor Hole" d="M20.59 19.46s-.05 1-.77 1h-1.46a2.38 2.38 0 0 0-.45 1.69c0 1.27.36 1.6.36 1.6h1.62a.64.64 0 0 1 .7.59.21.21 0 0 1 0 .11v1.67a4 4 0 0 0 1.77.29 6.88 6.88 0 0 0 1.64-.26v-1.67a.73.73 0 0 1 .73-.7 9.89 9.89 0 0 0 1.44-.14s.4-.37.44-1.63-.36-1.64-.36-1.64H24.6a.65.65 0 0 1-.75-.51.49.49 0 0 1 0-.17 11.22 11.22 0 0 1 0-1.64 4.78 4.78 0 0 0-3.25 0c-.02.69-.01 1.41-.01 1.41z" transform="translate(2 1.84)"/></g></g></g></svg>`;
<defs>
<linearGradient id="linear-gradient" x1="-427.2" y1="440.79" x2="-427.2" y2="440.63" gradientTransform="matrix(44.14, 0, 0, -44.15, 18878.72, 19502.57)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a8aaa8"/>
<stop offset="1" stop-color="#535453"/>
</linearGradient>
</defs>
<title>MediumMotor</title>
<g style="isolation: isolate">
<g id="svg7610">
<g id="Medium_Motor" data-name="Medium Motor">
<g id="medmotor_box" data-name="medmotor box">
<path id="medmotor_box_wgradient" data-name="medmotor box wgradient" d="M2.57,0h39a2.36,2.36,0,0,1,2.57,2V42.33c0,1-1.1,1.82-2.57,1.82h-39C1.1,44.15,0,43.34,0,42.33V2A2.36,2.36,0,0,1,2.57,0Z" transform="translate(2 1.84)" style="fill: url(#linear-gradient)"/>
</g>
<g id="medmotor_star" data-name="medmotor star">
<g>
<image width="48" height="48" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAxCAYAAACcXioiAAAACXBIWXMAAAsSAAALEgHS3X78AAACfElEQVRoQ+2aPXLbMBBG32ZUijlCnDo/R1AukCoHyAFS5Sw5g5t0bnwCu0ofpTZ9A1usvSmwoClRJEEAI4gzejMcqliS+2FB4AMoUVVyISICrIErO3dpgBpoNONDJde9RKTCJf4R+Ga/u9TADbAFalXdkYEsAiz5L8B3nICxCmyBa+Auh4jVVMAUneR/ABugAuRIaIUT9w4TJyLJIpIEWJ+/wrX8Bng7fgViMRtcRR5F5G/KO/FmKiCANa5Vq6nADhXwwY7DrjaLHALgeJcZQ4D32MtulYwil4AYfOXOogKxRLe8p7SAZC4CSnMRUJrBmThwbBbSRxIh4HFDs3VPwIQl7oXj/M1U3BBr3PUAY3aiEZGjVnzPjQZY4mOscbNqjIgGeLDzGINWvBUQaImHSOlGIUZu2IqbgAr4CtwCT8AL7sbndLzgcrvF5Vq1jQ98An5bwNSNSh9PuFw/A+KH0RhLXIo9K96dB1L68SnZs+JLnchaK75UAWA9ZskCgGULUFiugAZ4BJquAB0IPjcUZz9ugNoL8IqSNplOxA74Z0ezUlU1p3eNG5787tocUuaQOZXfAfe4XB9UVVcAqroTkTsLaghzoZ5TuFGPb+jWzA3Z6dBk/Hrgp53nVEJx7vKXnUMq0XBgp/cWNFaJbe+yYXzCoS14SINL/g9hAnors96KbM5Gqy0Dg+MHUNxjo+6z1Hmg5SKgNBcBpSktIGrk6VJSQOsopwLHKCVAed2sqmPnAMgnICaB9sv9VOAYOQTEWPEdGZKHRAFWeu8Q74Fnpjemnnm1xEndBxI/dEOUFe9Z4hSy/FcCZlnxniVOIZsACPhKYaR2my5ZBZTgP7HrUIs43RAaAAAAAElFTkSuQmCC" style="opacity: 0.30000000000000004;mix-blend-mode: multiply"/>
<path id="medmotor_cut-2" data-name="medmotor cut-2" d="M0,21.25A6.21,6.21,0,0,1,6.22,15H15V6.23A6.22,6.22,0,0,1,21.24,0H22.9a6.22,6.22,0,0,1,6.22,6.22V15h8.8a6.21,6.21,0,0,1,6.22,6.22v1.66a6.21,6.21,0,0,1-6.22,6.22h-8.8v8.8a6.21,6.21,0,0,1-6.22,6.22H21.24A6.22,6.22,0,0,1,15,37.93v-8.8H6.22A6.22,6.22,0,0,1,0,22.92H0Z" transform="translate(2 1.84)" style="fill: #a8aaa8"/>
</g>
<circle id="medmotor_hole_4" data-name="medmotor hole 4" cx="39.77" cy="24" r="4.85" style="fill: #393939"/>
<circle id="medmotor_hole_3" data-name="medmotor hole 3" cx="8.37" cy="24" r="4.85" style="fill: #393939"/>
<circle id="medmotor_hole_2" data-name="medmotor hole 2" cx="24.15" cy="8.22" r="4.85" style="fill: #393939"/>
<circle id="medmotor_hole_1" data-name="medmotor hole 1" cx="24.15" cy="39.62" r="4.85" style="fill: #393939"/>
</g>
<g id="medmotor_red" data-name="medmotor red">
<circle cx="24.3" cy="24" r="6.75" style="fill: #d42715"/>
<circle cx="24.3" cy="24" r="6.63" style="fill: none;stroke: #a20800;stroke-width: 0.25px"/>
</g>
<path id="medmotor_Hole" data-name="medmotor Hole" d="M20.59,19.46s-.05,1-.77,1-1.46,0-1.46,0a2.38,2.38,0,0,0-.45,1.69c0,1.27.36,1.6.36,1.6h1.62a.64.64,0,0,1,.7.59.21.21,0,0,1,0,.11v1.67a4,4,0,0,0,1.77.29A6.88,6.88,0,0,0,24,26.15V24.48a.73.73,0,0,1,.73-.7,9.89,9.89,0,0,0,1.44-.14s.4-.37.44-1.63-.36-1.64-.36-1.64H24.6a.65.65,0,0,1-.75-.51.49.49,0,0,1,0-.17,11.22,11.22,0,0,1,0-1.64,4.78,4.78,0,0,0-3.25,0C20.58,18.74,20.59,19.46,20.59,19.46Z" transform="translate(2 1.84)"/>
</g>
</g>
</g>
</svg>`;
} }

11
sim/visuals/assets/Portsvg.ts
View File

@ -1,13 +1,4 @@
namespace pxsim.visuals { namespace pxsim.visuals {
export const PORT_SVG = `<svg id="svg6348" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.96 58.93"> export const PORT_SVG = `<svg id="svg6348" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.96 58.93"><g id="icn_port" data-name="icn port"><path id="port_2" data-name="port 2" d="M4.48 0h50v58.93h-50z" transform="translate(-4.48)" fill="#eaeaea"/><path id="port_1" data-name="port 1" d="M9.74 46.49V18.66h17.11v-6.91h4.72V2.59h12.92v8.82h5.06v35.08h-8v7.43H38.9v-7.51h-2v7.5h-2.19v-7.5h-2.16v7.5h-2.1v-7.5H28.6v7.5h-2.1v-7.5h-1.82v7.5h-2.46v-7.5h-1.68v7.5H18v-7.45z" transform="translate(-4.48)" fill="#a8aaa8"/><g id="text10060" style="isolation:isolate"><text id="port_text" transform="translate(22.21 40.2)" style="isolation:isolate" font-size="16" fill="#fff" font-family="ArialMT,Arial">B</text></g></g></svg>`;
<title>port</title>
<g id="icn_port" data-name="icn port">
<path id="port_2" data-name="port 2" d="M4.48,0h50V58.93h-50Z" transform="translate(-4.48)" style="fill: #eaeaea"/>
<path id="port_1" data-name="port 1" d="M9.74,46.49V18.66H26.85V11.75h4.72V2.59H44.49v8.82h5.06V46.49h-8v7.43H38.9V46.41h-2v7.5H34.71v-7.5H32.55v7.5h-2.1v-7.5H28.6v7.5H26.5v-7.5H24.68v7.5H22.22v-7.5H20.54v7.5H18V46.46Z" transform="translate(-4.48)" style="fill: #a8aaa8"/>
<g id="text10060" style="isolation: isolate">
<text id="port_text" class="user-select-none" transform="translate(22.21 40.2)" style="isolation: isolate;font-size: 16px;fill: white;font-family: ArialMT, Arial">B</text>
</g>
</g>
</svg>`;
} }

99
sim/visuals/assets/RemoteSvg.ts
View File

@ -1,100 +1,3 @@
namespace pxsim.visuals { namespace pxsim.visuals {
export const REMOVE_SVG = ` export const REMOVE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="123.773" viewBox="0 0 21.167 32.748" id="svg10208"><defs id="defs10202"><linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -2.30835 7.23512 0 1161.604 852.653)" id="linearGradient9407"><stop offset="0" id="stop9403" stop-color="#a9aba9"/><stop offset="1" id="stop9405" stop-color="#848484"/></linearGradient><linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 2.61718 -8.4555 0 1161.604 932.35)" id="linearGradient9387"><stop offset="0" id="stop9383" stop-color="#303030"/><stop offset="1" id="stop9385" stop-color="#777"/></linearGradient><clipPath id="clipPath9357"><path d="M0 1145.871h1366V0H0z" id="path9355"/></clipPath><linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(124.418 344.32 757.342) scale(10.33459)" id="linearGradient9347"><stop offset="0" id="stop9343" stop-color="#fff"/><stop offset="1" id="stop9345" stop-color="#9e9e9e"/></linearGradient><clipPath id="clipPath9305"><path d="M0 1145.871h1366V0H0z" id="path9303"/></clipPath><linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -5.71338 10.23004 0 1161.5 872.467)" id="linearGradient9295"><stop offset="0" id="stop9291" stop-color="#f2f2f2"/><stop offset="1" id="stop9293" stop-color="#7a7a7a"/></linearGradient><clipPath id="clipPath9273"><path d="M0 1145.871h1366V0H0z" id="path9271"/></clipPath></defs><g id="layer1" transform="translate(0 -264.252)"><g transform="matrix(.38484 0 0 -.38484 -436.414 624.07)" id="g9267"><g id="g9269" clip-path="url(#clipPath9273)"><g id="g9275" transform="translate(1188.02 889.514)"><path d="M0 0h-53.041c-.541 0-.98.254-.98.566v29.585c0 .313.439.566.98.566H0c.541 0 .979-.253.979-.566V.566C.979.254.541 0 0 0" id="path9277" fill="#f2f2f2"/></g></g></g><g transform="matrix(.38484 0 0 -.38484 -436.414 624.07)" id="g9279"><g id="g9281"><g id="g9287"><g id="g9289"><path d="M1134.979 898.024c-.541 0-.979-.254-.979-.567v-29.584c0-.313.438-.567.979-.567h53.042c.541 0 .979.254.979.567v29.584c0 .313-.438.567-.979.567z" id="path9297" fill="url(#linearGradient9295)"/></g></g></g></g><path d="M19.01 291.648H2.237v-22.204H19.01z" id="path9307" fill="#f2f2f2" stroke-width=".385"/><g id="g9309" transform="matrix(.38484 0 0 -.38484 11.821 288.693)"><path d="M0 0h-6.642c-.687 0-1.245.558-1.245 1.246v12.867c0 .688.558 1.246 1.245 1.246H0c.687 0 1.245-.558 1.245-1.246V1.246C1.245.558.687 0 0 0" id="path9311" fill="#f22a21"/></g><path d="M6.251 274.214c-.838 0-1.517.68-1.517 1.518v3.536h3.083v-3.536c0-.839-.68-1.518-1.518-1.518z" id="topleft" fill="#a9aba9" stroke-width=".385"/><path d="M4.734 281.185v3.725c0 .838.68 1.517 1.517 1.517H6.3c.838 0 1.518-.68 1.518-1.517v-3.725z" id="bottomleft" fill="#a9aba9" stroke-width=".385"/><g id="g9327" transform="matrix(.38484 0 0 -.38484 7.498 280.74)"><path d="M0 0h-6.352a.415.415 0 0 0-.415.416v1.717c0 .229.186.415.415.415H0a.415.415 0 0 0 .415-.415V.416A.415.415 0 0 0 0 0" id="path9329" fill="#f22a21"/></g><g transform="matrix(.38484 0 0 -.38484 -436.414 624.07)" id="g9331"><g id="g9333"><g id="g9339"><g id="g9341"><path d="M1157.731 904.68a3.697 3.697 0 1 1 7.393 0 3.697 3.697 0 0 1-7.393 0" id="path9349" fill="url(#linearGradient9347)"/></g></g></g></g><g id="g9359" transform="matrix(.38484 0 0 -.38484 10.556 276.771)"><path d="M0 0a2.244 2.244 0 1 0 0 4.488A2.244 2.244 0 0 0 0 0" id="path9361" fill="#f22a21"/></g><g id="centerbeacon" transform="matrix(.38484 0 0 -.38484 15.002 273.177)"><path d="M0 0h-23.265l-3.683 4.151v6.736H3.684V4.151z" id="path9365" fill="#a9aba9"/></g><path d="M12.061 283.616H9.026v-.48h3.035z" id="path9367" fill="#b42e29" stroke-width=".385"/><path d="M12.061 284.494H9.026v-.479h3.035z" id="path9369" fill="#b42e29" stroke-width=".385"/><g transform="matrix(.38484 0 0 -.38484 -436.414 624.07)" id="g9371"><g id="g9373"><g id="g9379"><g id="g9381"><path d="M1140.849 934.967a1.04 1.04 0 0 1-1.038-1.039v-12.452h43.585v12.452c0 .573-.465 1.039-1.037 1.039z" id="path9389" fill="url(#linearGradient9387)"/></g></g></g></g><g transform="matrix(.38484 0 0 -.38484 -436.414 624.07)" id="g9391"><g id="g9393"><g id="g9399"><g id="g9401"><path d="M1139.811 863.778v-12.453c0-.803.651-1.453 1.453-1.453h40.679c.803 0 1.453.65 1.453 1.453v12.453z" id="path9409" fill="url(#linearGradient9407)"/></g></g></g></g><path d="M14.878 274.214c-.838 0-1.518.68-1.518 1.518v3.536h3.083v-3.536c0-.839-.68-1.518-1.517-1.518z" id="topright" fill="#a9aba9" stroke-width=".385"/><path d="M13.36 281.185v3.725c0 .838.68 1.517 1.518 1.517h.048c.838 0 1.517-.68 1.517-1.517v-3.725z" id="bottomright" fill="#a9aba9" stroke-width=".385"/><g id="g9323" transform="matrix(.38484 0 0 -.38484 16.124 280.74)"><path d="M0 0h-6.352a.416.416 0 0 0-.415.416v1.717c0 .229.187.415.415.415H0a.415.415 0 0 0 .415-.415V.416A.415.415 0 0 0 0 0" id="path9325" fill="#006db4"/></g></g></svg>`;
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="123.773" viewBox="0 0 21.166666 32.748275" id="svg10208">
<defs id="defs10202">
<linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -2.30835 7.23512 0 1161.6036 852.6532)" id="linearGradient9407">
<stop offset="0" id="stop9403" stop-color="#a9aba9"/>
<stop offset="1" id="stop9405" stop-color="#848484"/>
</linearGradient>
<linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 2.61718 -8.4555 0 1161.6036 932.34937)" id="linearGradient9387">
<stop offset="0" id="stop9383" stop-color="#303030"/>
<stop offset="1" id="stop9385" stop-color="#777"/>
</linearGradient>
<clipPath id="clipPath9357">
<path d="M0 1145.871h1366V0H0z" id="path9355"/>
</clipPath>
<linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(124.418 344.320607 757.342015) scale(10.33459)" id="linearGradient9347">
<stop offset="0" id="stop9343" stop-color="#fff"/>
<stop offset="1" id="stop9345" stop-color="#9e9e9e"/>
</linearGradient>
<clipPath id="clipPath9305">
<path d="M0 1145.871h1366V0H0z" id="path9303"/>
</clipPath>
<linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -5.71338 10.23004 0 1161.4999 872.46655)" id="linearGradient9295">
<stop offset="0" id="stop9291" stop-color="#f2f2f2"/>
<stop offset="1" id="stop9293" stop-color="#7a7a7a"/>
</linearGradient>
<clipPath id="clipPath9273">
<path d="M0 1145.871h1366V0H0z" id="path9271"/>
</clipPath>
</defs>
<g id="layer1" transform="translate(0 -264.2517)">
<g transform="matrix(.38484 0 0 -.38484 -436.41402 624.06906)" id="g9267">
<g id="g9269" clip-path="url(#clipPath9273)">
<g id="g9275" transform="translate(1188.0205 889.5135)">
<path d="M0 0h-53.041c-.541 0-.98.254-.98.566v29.585c0 .313.439.566.98.566H0c.541 0 .979-.253.979-.566V.566C.979.254.541 0 0 0" id="path9277" fill="#f2f2f2"/>
</g>
</g>
</g>
<g transform="matrix(.38484 0 0 -.38484 -436.41402 624.06906)" id="g9279">
<g id="g9281">
<g id="g9287">
<g id="g9289">
<path d="M1134.979 898.024c-.541 0-.979-.254-.979-.567v-29.584c0-.313.438-.567.979-.567h53.042c.541 0 .979.254.979.567v29.584c0 .313-.438.567-.979.567z" id="path9297" fill="url(#linearGradient9295)"/>
</g>
</g>
</g>
</g>
<path d="M19.009995 291.64843H2.236527v-22.20479h16.773468z" id="path9307" fill="#f2f2f2" stroke-width=".384845"/>
<g id="g9309" transform="matrix(.38484 0 0 -.38484 11.821398 288.69324)">
<path d="M0 0h-6.642c-.687 0-1.245.558-1.245 1.246v12.867c0 .688.558 1.246 1.245 1.246H0c.687 0 1.245-.558 1.245-1.246V1.246C1.245.558.687 0 0 0" id="path9311" fill="#f22a21"/>
</g>
<path d="M6.251333 274.21366c-.838192 0-1.517581.67957-1.517581 1.51814v3.53633h3.083082v-3.53633c0-.83857-.67939-1.51814-1.517582-1.51814z" id="topleft" fill="#a9aba9" stroke-width=".384845"/>
<path d="M4.733752 281.18484v3.72518c0 .8378.679389 1.51702 1.517581 1.51702h.04792c.838192 0 1.51758-.67922 1.51758-1.51702v-3.72518z" id="bottomleft" fill="#a9aba9" stroke-width=".384845"/>
<g id="g9327" transform="matrix(.38484 0 0 -.38484 7.497511 280.74023)">
<path d="M0 0h-6.352c-.229 0-.415.186-.415.416v1.717c0 .229.186.415.415.415H0c.229 0 .415-.186.415-.415V.416C.415.186.229 0 0 0" id="path9329" fill="#f22a21"/>
</g>
<g transform="matrix(.38484 0 0 -.38484 -436.41402 624.06906)" id="g9331">
<g id="g9333">
<g id="g9339">
<g id="g9341">
<path d="M1157.731 904.68c0-2.042 1.655-3.697 3.696-3.697 2.043 0 3.698 1.655 3.698 3.697 0 2.041-1.655 3.697-3.698 3.697-2.041 0-3.696-1.656-3.696-3.697" id="path9349" fill="url(#linearGradient9347)"/>
</g>
</g>
</g>
</g>
<g id="g9359" transform="matrix(.38484 0 0 -.38484 10.555605 276.77113)">
<path d="M0 0c-1.239 0-2.244 1.004-2.244 2.244 0 1.239 1.005 2.244 2.244 2.244 1.24 0 2.244-1.005 2.244-2.244C2.244 1.004 1.24 0 0 0" id="path9361" fill="#f22a21"/>
</g>
<g id="centerbeacon" transform="matrix(.38484 0 0 -.38484 15.001642 273.1773)">
<path d="M0 0h-23.265l-3.683 4.151v6.736H3.684V4.151z" id="path9365" fill="#a9aba9"/>
</g>
<path d="M12.061234 283.61556H9.025961v-.47952h3.035273z" id="path9367" fill="#b42e29" stroke-width=".384845"/>
<path d="M12.061234 284.49416H9.025961v-.47913h3.035273z" id="path9369" fill="#b42e29" stroke-width=".384845"/>
<g transform="matrix(.38484 0 0 -.38484 -436.41402 624.06906)" id="g9371">
<g id="g9373">
<g id="g9379">
<g id="g9381">
<path d="M1140.849 934.967c-.573 0-1.038-.466-1.038-1.039v-12.452h43.585v12.452c0 .573-.465 1.039-1.037 1.039z" id="path9389" fill="url(#linearGradient9387)"/>
</g>
</g>
</g>
</g>
<g transform="matrix(.38484 0 0 -.38484 -436.41402 624.06906)" id="g9391">
<g id="g9393">
<g id="g9399">
<g id="g9401">
<path d="M1139.811 863.778v-12.453c0-.803.651-1.453 1.453-1.453h40.679c.803 0 1.453.65 1.453 1.453v12.453z" id="path9409" fill="url(#linearGradient9407)"/>
</g>
</g>
</g>
</g>
<path d="M14.877744 274.21376c-.838192 0-1.517581.67957-1.517581 1.51815v3.53632h3.083082v-3.53632c0-.83858-.679389-1.51815-1.517582-1.51815z" id="topright" fill="#a9aba9" stroke-width=".384845"/>
<path d="M13.360163 281.18494v3.72518c0 .83781.679389 1.51702 1.517581 1.51702h.04792c.838192 0 1.517581-.67921 1.517581-1.51702v-3.72518z" id="bottomright" fill="#a9aba9" stroke-width=".384845"/>
<g id="g9323" transform="matrix(.38484 0 0 -.38484 16.12385 280.74023)">
<path d="M0 0h-6.352c-.228 0-.415.186-.415.416v1.717c0 .229.187.415.415.415H0c.229 0 .415-.186.415-.415V.416C.415.186.229 0 0 0" id="path9325" fill="#006db4"/>
</g>
</g>
</svg>
`;
} }

62
sim/visuals/assets/TouchSensorsvg.ts
View File

File diff suppressed because one or more lines are too long

2
sim/visuals/assets/gyro.svg
View File

@ -32,7 +32,7 @@
<path id="gyro_white_1" data-name="gyro white 1" d="M13.52,55.52H46.28v3a2,2,0,0,1-2,2H15.49a2,2,0,0,1-2-2h0Z" transform="translate(-11.5 1.52)" style="opacity: 0.600000023841858;isolation: isolate;fill: url(#linear-gradient)"/> <path id="gyro_white_1" data-name="gyro white 1" d="M13.52,55.52H46.28v3a2,2,0,0,1-2,2H15.49a2,2,0,0,1-2-2h0Z" transform="translate(-11.5 1.52)" style="opacity: 0.600000023841858;isolation: isolate;fill: url(#linear-gradient)"/>
</g> </g>
<g id="gyro_white_small" data-name="gyro white small"> <g id="gyro_white_small" data-name="gyro white small">
<path d="M37.94,60.85H21.71a7.84,7.84,0,0,1-1.26-.24,3.14,3.14,0,0,1-1-.38l1.25-1a1.8,1.8,0,0,1,1.05-.36H37.94a1,1,0,0,1,.6.33l.16.15L40,60.49a2.47,2.47,0,0,1-.93.25A11.33,11.33,0,0,1,37.94,60.85Z" transform="translate(-11.5 1.52)" style="fill: url(#linear-gradient-2)"/> <path id="gyro_white_small_path" d="M37.94,60.85H21.71a7.84,7.84,0,0,1-1.26-.24,3.14,3.14,0,0,1-1-.38l1.25-1a1.8,1.8,0,0,1,1.05-.36H37.94a1,1,0,0,1,.6.33l.16.15L40,60.49a2.47,2.47,0,0,1-.93.25A11.33,11.33,0,0,1,37.94,60.85Z" transform="translate(-11.5 1.52)" style="fill: url(#linear-gradient-2)"/>
<path d="M37.94,60.73a9,9,0,0,0,1.85-.27L38.62,59.4l-.17-.14c-.18-.17-.34-.31-.51-.31H21.71a1.68,1.68,0,0,0-1,.34l-1.11.93a8.7,8.7,0,0,0,2.08.51H37.94m0,.25H21.71c-.34,0-2.46-.44-2.46-.78l1.33-1.1a1.88,1.88,0,0,1,1.13-.4H37.94c.33,0,.57.29.84.51l1.4,1.26C40.18,60.81,38.27,61,37.94,61Z" transform="translate(-11.5 1.52)" style="fill: #9a9a9a"/> <path d="M37.94,60.73a9,9,0,0,0,1.85-.27L38.62,59.4l-.17-.14c-.18-.17-.34-.31-.51-.31H21.71a1.68,1.68,0,0,0-1,.34l-1.11.93a8.7,8.7,0,0,0,2.08.51H37.94m0,.25H21.71c-.34,0-2.46-.44-2.46-.78l1.33-1.1a1.88,1.88,0,0,1,1.13-.4H37.94c.33,0,.57.29.84.51l1.4,1.26C40.18,60.81,38.27,61,37.94,61Z" transform="translate(-11.5 1.52)" style="fill: #9a9a9a"/>
</g> </g>
</g> </g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

52
sim/visuals/assets/gyrosvg.ts
View File

@ -1,54 +1,4 @@
namespace pxsim { namespace pxsim {
export const GYRO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 37 62.5"> export const GYRO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 37 62.5"><defs><clipPath id="clip-path" transform="translate(-11.5 1.52)"><path d="M21.71 61a8.91 8.91 0 0 1-2-.46h-4.22a2 2 0 0 1-2-2V54h-.76a.76.76 0 0 1-.76-.76V7a.76.76 0 0 1 .76-.76h.76V2a2 2 0 0 1 2-2h12.65v.61h3.42V0h12.75a2 2 0 0 1 2 2v4.22h.91A.76.76 0 0 1 48 7v46.24a.76.76 0 0 1-.76.76h-.91v4.55a2 2 0 0 1-2 2h-4.16c-.18.3-1.91.46-2.23.46z" fill="none"/></clipPath><linearGradient id="linear-gradient" x1="-438.91" y1="1403.05" x2="-438.91" y2="1402.05" gradientTransform="matrix(32.76 0 0 -5.01 14410.48 7079.21)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#3e3e3e"/></linearGradient><linearGradient id="linear-gradient-2" x1="-468.07" y1="2985.3" x2="-468.07" y2="2984.3" gradientTransform="matrix(20.61 0 0 -2.03 9674.72 6104.84)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="gray"/></linearGradient></defs><g style="isolation:isolate"><g id="svg5788"><g id="gyro"><g clip-path="url(#clip-path)" id="gyro_total" data-name="gyro total"><g id="gyro_mask_total" data-name="gyro mask total"><g id="gyro_box" data-name="gyro box"><path id="gyro_sides" data-name="gyro sides" d="M12.76 6.22h34.43A.76.76 0 0 1 48 7v46.24a.76.76 0 0 1-.76.76H12.76a.76.76 0 0 1-.76-.76V7a.76.76 0 0 1 .76-.78z" transform="translate(-11.5 1.52)" fill="#a8aaa8"/><path id="gyro_grey_behind" data-name="gyro grey behind" fill="#9a9a9a" d="M15.52 2.13h5.76V17.9h-5.76z"/><image width="37" height="51" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAA0CAYAAADmI0o+AAAACXBIWXMAAAsSAAALEgHS3X78AAABDklEQVRYR+2ZwU3DQBBF36DcSBHcU0DKohZqoKZwJmkh5jwcNg62iRHfHkEO/0mWbXn99TyytKudyEzukU1/ERFb4AnYzo6epwPeM7OrytkARETQwp6BHRDz734jgQPwEhFv1OQcrhWjfeEO2KMHwleFSnKGYtCC+kNhOn51zsNPo/4Ti6lYTMViKhZTsZhKpdjS+fEm00l8Kf2Kgst5yVpsRIXYcC33ATxe7ldVrkIMxhWDlVJQJwYFMkMqf/5SLKZiMRWLqVhMxWIqFlOxmIrFVCymYjEVi6lYTMViKvcmdm2eTjdVcvjwjzkDJ1rPciTW0fqFULxz80uOwCtwzMyMvvW8sjNbQUeTOgN8AqpBM7JNqq/cAAAAAElFTkSuQmCC" style="mix-blend-mode:multiply" opacity=".3"/><path id="gyro_grey_large-2" data-name="gyro grey large-2" d="M15.49 0h12.66v16l3.42-.26V0h12.74a2 2 0 0 1 2 2v43.81a2 2 0 0 1-2 2H15.49a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z" transform="translate(-11.5 1.52)" fill="#a8aaa8"/><g id="gyro_white" data-name="gyro white"><g id="gyro_white-2" data-name="gyro white-2"><path id="gyro_white_2" data-name="gyro white 2" d="M14.73 29.58h30.34a1.21 1.21 0 0 1 1.21 1.21v27.76a2 2 0 0 1-2 2H15.49a2 2 0 0 1-2-2V30.79a1.21 1.21 0 0 1 1.24-1.21z" transform="translate(-11.5 1.52)" fill="#f1f1f1"/><path id="gyro_white_1" data-name="gyro white 1" d="M13.52 55.52h32.76v3a2 2 0 0 1-2 2H15.49a2 2 0 0 1-2-2z" transform="translate(-11.5 1.52)" style="isolation:isolate" opacity=".6" fill="url(#linear-gradient)"/></g><g id="gyro_white_small" data-name="gyro white small"><path id="gyro_white_small_path" d="M37.94 60.85H21.71a7.84 7.84 0 0 1-1.26-.24 3.14 3.14 0 0 1-1-.38l1.25-1a1.8 1.8 0 0 1 1.05-.36h16.19a1 1 0 0 1 .6.33l.16.15 1.3 1.14a2.47 2.47 0 0 1-.93.25 11.33 11.33 0 0 1-1.13.11z" transform="translate(-11.5 1.52)" fill="url(#linear-gradient-2)"/><path d="M37.94 60.73a9 9 0 0 0 1.85-.27l-1.17-1.06-.17-.14c-.18-.17-.34-.31-.51-.31H21.71a1.68 1.68 0 0 0-1 .34l-1.11.93a8.7 8.7 0 0 0 2.08.51h16.26m0 .25H21.71c-.34 0-2.46-.44-2.46-.78l1.33-1.1a1.88 1.88 0 0 1 1.13-.4h16.23c.33 0 .57.29.84.51l1.4 1.26c0 .34-1.91.53-2.24.53z" transform="translate(-11.5 1.52)" fill="#9a9a9a"/></g></g><g id="gyro_red_elements" data-name="gyro red elements" fill="#d42715"><circle id="gyro_reddot" data-name="gyro reddot" cx="18.4" cy="18.97" r="3.03"/><path id="gyro_arrow_2" data-name="gyro arrow 2" d="M21.92 23.36s-3.9-5.13-.76-10.77a9.59 9.59 0 0 0 .91.45c.65.37.74-.3.61-.75l-1.21-3.8-3.8 1.07a1.2 1.2 0 0 0-.45.15c-.2.12-.37.4 0 .61l1.06.6s-4.53 6.65 1.06 14.26c1.6-1.18 2.58-1.82 2.58-1.82z" transform="translate(-11.5 1.52)"/><path id="gyro_arrow1" data-name="gyro arrow1" d="M37.84 23.36s3.9-5.13.76-10.77a9.59 9.59 0 0 1-.91.45c-.64.37-.74-.3-.6-.75l1.21-3.8 3.79 1.07a1.31 1.31 0 0 1 .46.15c.2.12.36.4 0 .61l-1.07.6s4.52 6.65-1.06 14.26c-1.59-1.18-2.58-1.82-2.58-1.82z" transform="translate(-11.5 1.52)"/></g></g></g></g></g></g></g></svg>`;
<defs>
<clipPath id="clip-path" transform="translate(-11.5 1.52)">
<path d="M21.71,61a8.91,8.91,0,0,1-2-.46H15.49a2,2,0,0,1-2-2h0V54h-.76a.76.76,0,0,1-.76-.76V7a.76.76,0,0,1,.76-.76h.76V2a2,2,0,0,1,2-2H28.14V.61h3.42V0H44.31a2,2,0,0,1,2,2h0V6.22h.91A.76.76,0,0,1,48,7h0V53.24a.76.76,0,0,1-.76.76h-.91v4.55a2,2,0,0,1-2,2H40.17c-.18.3-1.91.46-2.23.46Z" style="fill: none"/>
</clipPath>
<linearGradient id="linear-gradient" x1="-438.91" y1="1403.05" x2="-438.91" y2="1402.05" gradientTransform="matrix(32.76, 0, 0, -5.01, 14410.48, 7079.21)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" stop-opacity="0"/>
<stop offset="1" stop-color="#3e3e3e"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-468.07" y1="2985.3" x2="-468.07" y2="2984.3" gradientTransform="matrix(20.61, 0, 0, -2.03, 9674.72, 6104.84)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff"/>
<stop offset="1" stop-color="gray"/>
</linearGradient>
</defs>
<title>gyro</title>
<g style="isolation: isolate">
<g id="svg5788">
<g id="gyro">
<g id="gyro_total" data-name="gyro total">
<g style="clip-path: url(#clip-path)">
<g id="gyro_mask_total" data-name="gyro mask total">
<g id="gyro_box" data-name="gyro box">
<path id="gyro_sides" data-name="gyro sides" d="M12.76,6.22H47.19A.76.76,0,0,1,48,7V53.24a.76.76,0,0,1-.76.76H12.76a.76.76,0,0,1-.76-.76V7A.76.76,0,0,1,12.76,6.22Z" transform="translate(-11.5 1.52)" style="fill: #a8aaa8"/>
<rect id="gyro_grey_behind" data-name="gyro grey behind" x="15.52" y="2.13" width="5.76" height="15.77" style="fill: #9a9a9a"/>
<g>
<image width="37" height="51" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAA0CAYAAADmI0o+AAAACXBIWXMAAAsSAAALEgHS3X78AAABDklEQVRYR+2ZwU3DQBBF36DcSBHcU0DKohZqoKZwJmkh5jwcNg62iRHfHkEO/0mWbXn99TyytKudyEzukU1/ERFb4AnYzo6epwPeM7OrytkARETQwp6BHRDz734jgQPwEhFv1OQcrhWjfeEO2KMHwleFSnKGYtCC+kNhOn51zsNPo/4Ti6lYTMViKhZTsZhKpdjS+fEm00l8Kf2Kgst5yVpsRIXYcC33ATxe7ldVrkIMxhWDlVJQJwYFMkMqf/5SLKZiMRWLqVhMxWIqFlOxmIrFVCymYjEVi6lYTMViKvcmdm2eTjdVcvjwjzkDJ1rPciTW0fqFULxz80uOwCtwzMyMvvW8sjNbQUeTOgN8AqpBM7JNqq/cAAAAAElFTkSuQmCC" style="opacity: 0.30000000000000004;mix-blend-mode: multiply"/>
<path id="gyro_grey_large-2" data-name="gyro grey large-2" d="M15.49,0H28.15V16l3.42-.26V0H44.31a2,2,0,0,1,2,2h0V45.81a2,2,0,0,1-2,2H15.49a2,2,0,0,1-2-2h0V2a2,2,0,0,1,2-2Z" transform="translate(-11.5 1.52)" style="fill: #a8aaa8"/>
</g>
<g id="gyro_white" data-name="gyro white">
<g id="gyro_white-2" data-name="gyro white-2">
<path id="gyro_white_2" data-name="gyro white 2" d="M14.73,29.58H45.07a1.21,1.21,0,0,1,1.21,1.21h0V58.55a2,2,0,0,1-2,2H15.49a2,2,0,0,1-2-2h0V30.79A1.21,1.21,0,0,1,14.73,29.58Z" transform="translate(-11.5 1.52)" style="fill: #f1f1f1"/>
<path id="gyro_white_1" data-name="gyro white 1" d="M13.52,55.52H46.28v3a2,2,0,0,1-2,2H15.49a2,2,0,0,1-2-2h0Z" transform="translate(-11.5 1.52)" style="opacity: 0.600000023841858;isolation: isolate;fill: url(#linear-gradient)"/>
</g>
<g id="gyro_white_small" data-name="gyro white small">
<path d="M37.94,60.85H21.71a7.84,7.84,0,0,1-1.26-.24,3.14,3.14,0,0,1-1-.38l1.25-1a1.8,1.8,0,0,1,1.05-.36H37.94a1,1,0,0,1,.6.33l.16.15L40,60.49a2.47,2.47,0,0,1-.93.25A11.33,11.33,0,0,1,37.94,60.85Z" transform="translate(-11.5 1.52)" style="fill: url(#linear-gradient-2)"/>
<path d="M37.94,60.73a9,9,0,0,0,1.85-.27L38.62,59.4l-.17-.14c-.18-.17-.34-.31-.51-.31H21.71a1.68,1.68,0,0,0-1,.34l-1.11.93a8.7,8.7,0,0,0,2.08.51H37.94m0,.25H21.71c-.34,0-2.46-.44-2.46-.78l1.33-1.1a1.88,1.88,0,0,1,1.13-.4H37.94c.33,0,.57.29.84.51l1.4,1.26C40.18,60.81,38.27,61,37.94,61Z" transform="translate(-11.5 1.52)" style="fill: #9a9a9a"/>
</g>
</g>
<g id="gyro_red_elements" data-name="gyro red elements">
<circle id="gyro_reddot" data-name="gyro reddot" cx="18.4" cy="18.97" r="3.03" style="fill: #d42715"/>
<path id="gyro_arrow_2" data-name="gyro arrow 2" d="M21.92,23.36s-3.9-5.13-.76-10.77a9.59,9.59,0,0,0,.91.45c.65.37.74-.3.61-.75l-1.21-3.8-3.8,1.07a1.2,1.2,0,0,0-.45.15c-.2.12-.37.4,0,.61l1.06.6s-4.53,6.65,1.06,14.26C20.94,24,21.92,23.36,21.92,23.36Z" transform="translate(-11.5 1.52)" style="fill: #d42715"/>
<path id="gyro_arrow1" data-name="gyro arrow1" d="M37.84,23.36s3.9-5.13.76-10.77a9.59,9.59,0,0,1-.91.45c-.64.37-.74-.3-.6-.75l1.21-3.8,3.79,1.07a1.31,1.31,0,0,1,.46.15c.2.12.36.4,0,.61l-1.07.6S46,17.57,40.42,25.18C38.83,24,37.84,23.36,37.84,23.36Z" transform="translate(-11.5 1.52)" style="fill: #d42715"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>`;
} }

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

@ -1,64 +1,3 @@
namespace pxsim { namespace pxsim {
export const INFRARED_SVG = ` export const INFRARED_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="83" height="34.663" viewBox="0 0 21.96 9.171" id="svg9433"><defs id="defs9427"><clipPath id="clipPath9203"><path d="M0 1145.871h1366V0H0z" id="path9201"/></clipPath><clipPath id="clipPath9215"><path d="M737.191 1004.92h12.59v-18.959h-12.59z" id="path9213"/></clipPath><clipPath id="clipPath9233"><path d="M741.135 1011.29h5.158v-5.16h-5.158z" id="path9231"/></clipPath><linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="scale(-3.61054) rotate(-42.51 -461.754 125.99)" id="linearGradient9243"><stop offset="0" id="stop9239" stop-color="#f2f2f2"/><stop offset="1" id="stop9241" stop-color="#7a7a7a"/></linearGradient></defs><g id="layer1" transform="translate(0 -287.829)"><g id="g10128" transform="translate(-62.25 173.06) scale(.74516)"><path id="path9195" d="M92.414 162.955h13.539v2.515H92.414z" fill="#1f1f1f" stroke-width=".353"/><g id="g9197" transform="matrix(.35278 0 0 -.35278 -164.065 511.69)"><g clip-path="url(#clipPath9203)" id="g9199"><g transform="translate(719.444 1013.871)" id="g9205"><path id="path9207" d="M0 0h48.387c9.634.073 17.503-7.678 17.575-17.312.073-9.633-7.678-17.502-17.312-17.575a11.528 11.528 0 0 0-.263 0h-5.716l-7.482 6.977H13.803l-6.827-6.977H0c-9.634-.073-17.503 7.678-17.576 17.311C-17.648-7.942-9.898-.073-.265 0H0"/></g><g id="g9209"><g id="g9221"><g id="g9219" clip-path="url(#clipPath9215)" opacity=".058"><path id="path9217" d="M737.191 1004.922h12.59v-18.961h-12.59z" fill="#fff"/></g></g></g><g transform="translate(728.09 1013.871)" id="g9223"><path id="path9225" d="M0 0h31.101v-1.288L21.7-10.315H9.101L0-1.288z" fill="#1f1f1f"/></g><g id="g9227"><g id="g9257"><g id="g9255" clip-path="url(#clipPath9233)" opacity=".261"><g id="g9253"><g id="g9251"><g id="g9249"><g id="g9247"><path id="path9245" d="M743.714 1011.292a2.578 2.578 0 1 0 0-5.158 2.58 2.58 0 0 0 0 5.158" fill="url(#linearGradient9243)"/></g></g></g></g></g></g></g><g transform="translate(709.889 997.793)" id="g9259"><path id="path9261" d="M0 0h14.106l2.275-2.427h-4.248L10.616-.759H0z" fill="#d52715"/></g><g transform="translate(777.54 997.793)" id="g9263"><path id="path9265" d="M0 0h-14.106l-2.275-2.427h4.246l1.518 1.668H.001z" fill="#d52715"/></g></g></g></g></g></svg>`;
<svg xmlns="http://www.w3.org/2000/svg" width="83" height="34.662998" viewBox="0 0 21.960417 9.171252" id="svg9433">
<defs id="defs9427">
<clipPath id="clipPath9203">
<path d="M0 1145.871h1366V0H0z" id="path9201"/>
</clipPath>
<clipPath id="clipPath9215">
<path d="M737.191 1004.92h12.59v-18.959h-12.59z" id="path9213"/>
</clipPath>
<clipPath id="clipPath9233">
<path d="M741.135 1011.29h5.158v-5.16h-5.158z" id="path9231"/>
</clipPath>
<linearGradient x2="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.66153 2.43973 -2.43973 -2.66153 745.59473 1006.9893)" id="linearGradient9243">
<stop offset="0" id="stop9239" stop-color="#f2f2f2"/>
<stop offset="1" id="stop9241" stop-color="#7a7a7a"/>
</linearGradient>
</defs>
<g id="layer1" transform="translate(0 -287.82875)">
<g id="g10128" transform="translate(-62.249591 173.06003) scale(.74516)">
<path id="path9195" d="M92.414417 162.9553h13.538203v2.51495H92.414417z" fill="#1f1f1f" stroke-width=".352778"/>
<g id="g9197" transform="matrix(.35278 0 0 -.35278 -164.0649 511.69022)">
<g clip-path="url(#clipPath9203)" id="g9199">
<g transform="translate(719.4443 1013.8715)" id="g9205">
<path id="path9207" d="M0 0h48.387c9.634.073 17.503-7.678 17.575-17.312.073-9.633-7.678-17.502-17.312-17.575-.087-.001-.175-.001-.263 0h-5.716l-7.482 6.977H13.803l-6.827-6.977H0c-9.634-.073-17.503 7.678-17.576 17.311C-17.648-7.942-9.898-.073-.265 0H0"/>
</g>
<g id="g9209">
<g id="g9221">
<g id="g9219" clip-path="url(#clipPath9215)" opacity=".057999">
<path id="path9217" d="M737.191 1004.922h12.59v-18.961h-12.59z" fill="#fff"/>
</g>
</g>
</g>
<g transform="translate(728.0898 1013.8715)" id="g9223">
<path id="path9225" d="M0 0h31.101v-1.288L21.7-10.315H9.101L0-1.288z" fill="#1f1f1f"/>
</g>
<g id="g9227">
<g id="g9257">
<g id="g9255" clip-path="url(#clipPath9233)" opacity=".261002">
<g id="g9253">
<g id="g9251">
<g id="g9249">
<g id="g9247">
<path id="path9245" d="M743.714 1011.292c1.425 0 2.579-1.154 2.579-2.579 0-1.424-1.154-2.579-2.579-2.579-1.424 0-2.579 1.155-2.579 2.579 0 1.425 1.155 2.579 2.579 2.579" fill="url(#linearGradient9243)"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(709.8887 997.7933)" id="g9259">
<path id="path9261" d="M0 0h14.106l2.275-2.427h-4.248L10.616-.759H0z" fill="#d52715"/>
</g>
<g transform="translate(777.5391 997.7933)" id="g9263">
<path id="path9265" d="M0 0h-14.106l-2.275-2.427h4.246l1.518 1.668H.001z" fill="#d52715"/>
</g>
</g>
</g>
</g>
</g>
</svg>
`;
} }

78
sim/visuals/assets/ultrasonicsvg.ts
View File

File diff suppressed because one or more lines are too long

7
sim/visuals/board.ts
View File

@ -109,7 +109,7 @@ namespace pxsim.visuals {
} }
}); });
export function randomTheme(): IBoardTheme { export function randomTheme(highContrast?: boolean, light?: boolean): IBoardTheme {
return themes[Math.floor(Math.random() * themes.length)]; return themes[Math.floor(Math.random() * themes.length)];
} }
@ -303,7 +303,7 @@ namespace pxsim.visuals {
this.wrapper = document.createElement('div'); this.wrapper = document.createElement('div');
this.wrapper.style.display = 'inline'; this.wrapper.style.display = 'inline';
this.element = svg.elt("svg", { height: "100%", width: "100%" }) as SVGSVGElement; this.element = svg.elt("svg", { height: "100%", width: "100%", "class": "user-select-none" }) as SVGSVGElement;
this.defs = svg.child(this.element, "defs") as SVGDefsElement; this.defs = svg.child(this.element, "defs") as SVGDefsElement;
@ -391,6 +391,9 @@ namespace pxsim.visuals {
cancelAnimationFrame(animationId); cancelAnimationFrame(animationId);
}) })
} }
// Kill the brick
this.layoutView.getBrick().kill();
// Save previous inputs for the next cycle // Save previous inputs for the next cycle
EV3View.previousSelectedInputs = ev3board().getInputNodes().map((node, index) => (this.getDisplayViewForNode(node.id, index).getSelected()) ? node.id : -1) EV3View.previousSelectedInputs = ev3board().getInputNodes().map((node, index) => (this.getDisplayViewForNode(node.id, index).getSelected()) ? node.id : -1)
EV3View.previousSeletedOutputs = ev3board().getMotors().map((node, index) => (this.getDisplayViewForNode(node.id, index).getSelected()) ? node.id : -1); EV3View.previousSeletedOutputs = ev3board().getMotors().map((node, index) => (this.getDisplayViewForNode(node.id, index).getSelected()) ? node.id : -1);

2
sim/visuals/boardview.ts
View File

@ -2,7 +2,7 @@ namespace pxsim.visuals {
mkBoardView = (opts: BoardViewOptions): BoardView => { mkBoardView = (opts: BoardViewOptions): BoardView => {
return new visuals.EV3View({ return new visuals.EV3View({
runtime: runtime, runtime: runtime,
theme: visuals.randomTheme(), theme: visuals.randomTheme(opts.highContrast, opts.light),
disableTilt: false, disableTilt: false,
wireframe: opts.wireframe, wireframe: opts.wireframe,
}); });

34
sim/visuals/nodes/brickView.ts
View File

@ -13,6 +13,9 @@ namespace pxsim.visuals {
private currentCanvasX = 178; private currentCanvasX = 178;
private currentCanvasY = 128; private currentCanvasY = 128;
private static LIGHT_BLACK_COLOR = '#6a6a6a';
private static LIGHT_RED_COLOR = '#6a6a6a';
constructor(port: number) { constructor(port: number) {
super(EV3_SVG, "board", NodeType.Brick, port); super(EV3_SVG, "board", NodeType.Brick, port);
} }
@ -26,9 +29,16 @@ namespace pxsim.visuals {
this.light = this.content.getElementById(this.normalizeId(BrickView.EV3_LIGHT_ID)) as SVGElement; this.light = this.content.getElementById(this.normalizeId(BrickView.EV3_LIGHT_ID)) as SVGElement;
} }
private setStyleFill(svgId: string, fillUrl: string) { protected optimizeForLightMode() {
(this.content.getElementById(this.normalizeId('ev3_body_2')) as SVGElement).style.fill = '#f1f1f1';
(this.content.getElementById(this.normalizeId('ev3_screen_grey')) as SVGElement).style.fill = '#a8aaa8';
(this.content.getElementById(this.normalizeId('ev3_grey_buttom')) as SVGElement).style.fill = '#a8aaa8';
(this.content.getElementById(this.normalizeId('btn_part_2')) as SVGElement).style.fill = '#393939';
}
private setStyleFill(svgId: string, fillUrl: string, lightFill?: string) {
const el = (this.content.getElementById(svgId) as SVGRectElement); const el = (this.content.getElementById(svgId) as SVGRectElement);
if (el) el.style.fill = `url("#${fillUrl}")`; if (el) el.style.fill = inLightMode() ? lightFill || BrickView.LIGHT_BLACK_COLOR : `url("#${fillUrl}")`;
} }
public hasClick() { public hasClick() {
@ -64,15 +74,15 @@ namespace pxsim.visuals {
//svg.fill(this.light, "#FFF"); //svg.fill(this.light, "#FFF");
break; break;
case 1: // LED_GREEN case 1: // LED_GREEN
this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-green`)); this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-green`), 'green');
//svg.fill(this.light, "#00ff00"); //svg.fill(this.light, "#00ff00");
break; break;
case 2: // LED_RED case 2: // LED_RED
this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-red`)); this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-red`), 'red');
//svg.fill(this.light, "#ff0000"); //svg.fill(this.light, "#ff0000");
break; break;
case 3: // LED_ORANGE case 3: // LED_ORANGE
this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-orange`)); this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-orange`), 'orange');
//svg.fill(this.light, "#FFA500"); //svg.fill(this.light, "#FFA500");
break; break;
case 4: // LED_GREEN_FLASH case 4: // LED_GREEN_FLASH
@ -120,14 +130,13 @@ namespace pxsim.visuals {
private flash: boolean; private flash: boolean;
private flashLightAnimationStep(id: string) { private flashLightAnimationStep(id: string) {
if (this.flash) { if (this.flash) {
this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`)); this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`), id);
} else { } else {
this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`));
} }
this.flash = !this.flash; this.flash = !this.flash;
} }
private pulseLightAnimation(id: string) { private pulseLightAnimation(id: string) {
const pattern = this.lastLightPattern; const pattern = this.lastLightPattern;
let fps = 8; let fps = 8;
@ -153,21 +162,24 @@ namespace pxsim.visuals {
private pulse: number = 0; private pulse: number = 0;
private pulseLightAnimationStep(id: string) { private pulseLightAnimationStep(id: string) {
switch (this.pulse) { switch (this.pulse) {
case 0: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
case 1: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break; case 1: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
case 2: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break; case 2: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
case 3: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break; case 3: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
case 4: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break; case 4: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
case 5: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`)); break; case 5: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`), id); break;
case 6: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`)); break; case 6: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`), id); break;
case 7: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break; case 7: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-black`)); break;
case 8: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`)); break; case 8: this.setStyleFill(this.normalizeId(BrickView.EV3_LIGHT_ID), this.normalizeId(`linear-gradient-${id}`), id); break;
} }
this.pulse++; this.pulse++;
if (this.pulse == 9) this.pulse = 0; if (this.pulse == 9) this.pulse = 0;
} }
public kill() {
cancelAnimationFrame(this.lastLightAnimationId);
}
public attachEvents() { public attachEvents() {
let bpState = ev3board().getBrickNode().buttonState; let bpState = ev3board().getBrickNode().buttonState;
let stateButtons = bpState.buttons; let stateButtons = bpState.buttons;

4
sim/visuals/nodes/colorSensorView.ts
View File

@ -9,6 +9,10 @@ namespace pxsim.visuals {
super(COLOR_SENSOR_SVG, "color", NodeType.ColorSensor, port); super(COLOR_SENSOR_SVG, "color", NodeType.ColorSensor, port);
} }
protected optimizeForLightMode() {
(this.content.getElementById(this.normalizeId('color_bigbox-2_path')) as SVGElement).style.fill = '#a8aaa8';
}
public getPaddingRatio() { public getPaddingRatio() {
return 1 / 4; return 1 / 4;
} }

5
sim/visuals/nodes/gyroSensorView.ts
View File

@ -7,6 +7,11 @@ namespace pxsim.visuals {
super(GYRO_SVG, "gyro", NodeType.GyroSensor, port); super(GYRO_SVG, "gyro", NodeType.GyroSensor, port);
} }
protected optimizeForLightMode() {
(this.content.getElementById(this.normalizeId('gyro_white_1')) as SVGElement).style.fill = '#7B7B7B';
(this.content.getElementById(this.normalizeId('gyro_white_small_path')) as SVGElement).style.fill = '#7B7B7B';
}
public getPaddingRatio() { public getPaddingRatio() {
return 0.3; return 0.3;
} }

4
sim/visuals/nodes/infraredview.ts
View File

@ -6,5 +6,9 @@ namespace pxsim.visuals {
constructor(port: number) { constructor(port: number) {
super(INFRARED_SVG, "infrared", NodeType.InfraredSensor, port); super(INFRARED_SVG, "infrared", NodeType.InfraredSensor, port);
} }
protected optimizeForLightMode() {
(this.content.getElementById(this.normalizeId('path9245')) as SVGElement).style.fill = '#f2f2f2';
}
} }
} }

4
sim/visuals/nodes/mediumMotorView.ts
View File

@ -8,6 +8,10 @@ namespace pxsim.visuals {
super(MEDIUM_MOTOR_SVG, "medium-motor", NodeType.MediumMotor, port, "medmotor_Hole"); super(MEDIUM_MOTOR_SVG, "medium-motor", NodeType.MediumMotor, port, "medmotor_Hole");
} }
protected optimizeForLightMode() {
(this.content.getElementById(this.normalizeId('medmotor_box_wgradient')) as SVGElement).style.fill = '#a8aaa8';
}
public getPaddingRatio() { public getPaddingRatio() {
return 1 / 5; return 1 / 5;
} }

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

@ -55,6 +55,7 @@ namespace pxsim.visuals {
protected buildDom(): SVGElement { protected buildDom(): SVGElement {
this.content = svg.parseString(this.xml); this.content = svg.parseString(this.xml);
this.buildDomCore(); this.buildDomCore();
if (pxsim.inLightMode()) this.optimizeForLightMode();
this.attachEvents(); this.attachEvents();
if (this.hasClick()) if (this.hasClick())
this.content.style.cursor = "pointer"; this.content.style.cursor = "pointer";
@ -65,6 +66,10 @@ namespace pxsim.visuals {
} }
protected optimizeForLightMode() {
}
public getInnerHeight() { public getInnerHeight() {
if (!this.content) { if (!this.content) {
return 0; return 0;

15
sim/visuals/nodes/touchSensorView.ts
View File

@ -12,10 +12,17 @@ namespace pxsim.visuals {
private xLinkGradients: string[]; private xLinkGradients: string[];
private static LIGHT_TOUCH_BLACK_COLOR = '#000';
private static LIGHT_TOUCH_RED_COLOR = '#d42715';
constructor(port: number) { constructor(port: number) {
super(TOUCH_SENSOR_SVG, "touch", NodeType.TouchSensor, port); super(TOUCH_SENSOR_SVG, "touch", NodeType.TouchSensor, port);
} }
protected optimizeForLightMode() {
(this.content.getElementById(this.normalizeId('touch_box_2-2')) as SVGElement).style.fill = '#a8aaa8';
}
public getPaddingRatio() { public getPaddingRatio() {
return 1 / 4; return 1 / 4;
} }
@ -29,9 +36,9 @@ namespace pxsim.visuals {
if (el) el.setAttribute(attribute, value); if (el) el.setAttribute(attribute, value);
} }
private setStyleFill(svgId: string, fillUrl: string) { private setStyleFill(svgId: string, fillUrl: string, lightFill: string) {
const el = (this.content.getElementById(svgId) as SVGRectElement); const el = (this.content.getElementById(svgId) as SVGRectElement);
if (el) el.style.fill = `url("#${fillUrl}")`; if (el) el.style.fill = inLightMode() ? lightFill : `url("#${fillUrl}")`;
} }
public attachEvents() { public attachEvents() {
@ -55,11 +62,11 @@ namespace pxsim.visuals {
private setPressed(pressed: boolean) { private setPressed(pressed: boolean) {
if (pressed) { if (pressed) {
for (let i = 0; i < 4; i ++) { for (let i = 0; i < 4; i ++) {
this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_PRESSED[i])}`); this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_PRESSED[i])}`, TouchSensorView.LIGHT_TOUCH_BLACK_COLOR);
} }
} else { } else {
for (let i = 0; i < 4; i ++) { for (let i = 0; i < 4; i ++) {
this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_UNPRESSED[i])}`); this.setStyleFill(`${this.normalizeId(TouchSensorView.RECT_ID[i])}`, `${this.normalizeId(TouchSensorView.TOUCH_GRADIENT_UNPRESSED[i])}`, TouchSensorView.LIGHT_TOUCH_RED_COLOR);
} }
} }
} }

3
sim/visuals/view.ts
View File

@ -249,6 +249,9 @@ namespace pxsim.visuals {
protected getView() { protected getView() {
return super.getView(); return super.getView();
} }
public kill() {
}
} }
export class ViewContainer extends View { export class ViewContainer extends View {

9
theme/site/globals/site.variables
View File

@ -131,8 +131,6 @@
@editorToolsBackground: @legoGreyLight; /* #fff;*/ /* #fcfbfa; */ @editorToolsBackground: @legoGreyLight; /* #fff;*/ /* #fcfbfa; */
@blocklySvgColor: #f9f9f9; /*#f2f6f8;*/ /*ecf6fe;*/ @blocklySvgColor: #f9f9f9; /*#f2f6f8;*/ /*ecf6fe;*/
@homeScreenBackground: #F2F2F2;
/*------------------- /*-------------------
Full screen Full screen
--------------------*/ --------------------*/
@ -147,6 +145,13 @@
@sidedocsButtonsTop: (@mainMenuHeight + 1rem); @sidedocsButtonsTop: (@mainMenuHeight + 1rem);
@sidedocsButtonsRight: 4.25rem; @sidedocsButtonsRight: 4.25rem;
/*-------------------
Home screen
--------------------*/
@homeScreenBackground: #F2F2F2;
@homeCardBorderColor: #F2F2F2;
/*------------------- /*-------------------
Editor Editor
--------------------*/ --------------------*/