Update state of the landscape brick view as well to be consistent with the portrait view (main) (#508)

This commit is contained in:
Sam El-Husseini 2018-04-13 14:01:37 -07:00 committed by GitHub
parent 7f8499bb5f
commit 3e534f7329
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 53 additions and 7 deletions

View File

@ -1,10 +1,46 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 146.25 120.31">
<defs>
<linearGradient id="linear-gradient" x1="-809.89" y1="-16.33" x2="-809.89" y2="-16.88" gradientTransform="translate(53145.53 916.09) scale(65.53 48.84)" gradientUnits="userSpaceOnUse">
<linearGradient id="linear-gradient-background" x1="-809.89" y1="-16.33" x2="-809.89" y2="-16.88" gradientTransform="translate(53145.53 916.09) scale(65.53 48.84)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#6a6a6a"/>
<stop offset="0.52" stop-color="#6a6a6a"/>
<stop offset="1" stop-color="#6a6a6a"/>
</linearGradient>
<linearGradient id="linear-gradient" x1="-374.89" y1="432.9" x2="-374.89" y2="432.82" gradientTransform="matrix(110.73, 0, 0, -106.94, 41567.45, 46425.3)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f1f1f1"/>
<stop offset="1" stop-color="#7a7a7a"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-376" y1="450.74" x2="-376" y2="450.72" gradientTransform="matrix(100.11, 0, 0, -79.18, 37697.19, 35762.28)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a8aaa8"/>
<stop offset="1" stop-color="gray"/>
</linearGradient>
<linearGradient id="linear-gradient-3" x1="-376.21" y1="614.94" x2="-376.21" y2="614.75" gradientTransform="matrix(98.29, 0, 0, -23.36, 37033.43, 14529.9)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a8aaa8"/>
<stop offset="1" stop-color="#535453"/>
</linearGradient>
<linearGradient id="linear-gradient-black" x1="-382.07" y1="493.36" x2="-382.07" y2="494.25" gradientTransform="matrix(65.53, 0, 0, -48.84, 25091.11, 24228.69)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#6a6a6a"/>
<stop offset="0.52" stop-color="#6a6a6a"/>
<stop offset="1" stop-color="#6a6a6a"/>
</linearGradient>
<linearGradient id="linear-gradient-green" x1="0" y1="0" x2="145" y2="48" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#6a6a6a"/>
<stop offset="0.52" stop-color="#8CE300"/>
<stop offset="1" stop-color="#6a6a6a"/>
</linearGradient>
<linearGradient id="linear-gradient-red" x1="0" y1="0" x2="145" y2="48" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#6a6a6a"/>
<stop offset="0.52" stop-color="#D02E26"/>
<stop offset="1" stop-color="#6a6a6a"/>
</linearGradient>
<linearGradient id="linear-gradient-orange" x1="0" y1="0" x2="145" y2="48" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#6a6a6a"/>
<stop offset="0.52" stop-color="#F8D039"/>
<stop offset="1" stop-color="#6a6a6a"/>
</linearGradient>
<linearGradient id="linear-gradient-5" x1="-743.87" y1="1256.85" x2="-743.87" y2="1257.21" gradientTransform="matrix(3.03, 0, 0, -6.22, 2312.41, 7891.56)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#757575"/>
<stop offset="1" stop-color="#393939"/>
</linearGradient>
</defs>
<title>EV3Landscape</title>
<g id="EV3">
@ -17,7 +53,7 @@
</g>
<g id="buttons">
<path id="btn_grey" data-name="btn grey" d="M68.9,119.14c-3.46-3.34-8.84-8.84-8.84-8.84v-1.13H57.93a5.13,5.13,0,1,1-.35-10.25h2.47V97.79l8.76-8.94h8.75c3.94,4,8.74,8.75,8.74,8.75v1.32h2a5.13,5.13,0,0,1,.35,10.25H86.3v1.13c-4.66,4.79-8.68,8.84-8.68,8.84Z" style="fill: #6a6a6a"/>
<path id="btn_color" data-name="btn color" d="M68.9,119.14c-3.46-3.34-8.84-8.84-8.84-8.84v-1.13H57.93a5.13,5.13,0,1,1-.35-10.25h2.47V97.79l8.76-8.94h8.75c3.94,4,8.74,8.75,8.74,8.75v1.32h2a5.13,5.13,0,0,1,.35,10.25H86.3v1.13c-4.66,4.79-8.68,8.84-8.68,8.84Z" style="fill: url(#linear-gradient)"/>
<path id="btn_color" data-name="btn color" d="M68.9,119.14c-3.46-3.34-8.84-8.84-8.84-8.84v-1.13H57.93a5.13,5.13,0,1,1-.35-10.25h2.47V97.79l8.76-8.94h8.75c3.94,4,8.74,8.75,8.74,8.75v1.32h2a5.13,5.13,0,0,1,.35,10.25H86.3v1.13c-4.66,4.79-8.68,8.84-8.68,8.84Z" style="fill: url(#linear-gradient-background)"/>
<path id="btn_left" data-name="btn left" d="M57.85,100.14H64.3v7.62H57.85a3.81,3.81,0,0,1-3.8-3.81h0A3.81,3.81,0,0,1,57.85,100.14Z" style="fill: #a8aaa8"/>
<path id="btn_right" data-name="btn right" d="M88.32,107.76H81.88v-7.62h6.44a3.81,3.81,0,0,1,3.81,3.8h0a3.81,3.81,0,0,1-3.81,3.81Z" style="fill: #a8aaa8"/>
<path id="btn_enter" data-name="btn enter" d="M69.37,100.14h7.44a.29.29,0,0,1,.29.28v7.06a.29.29,0,0,1-.29.28H69.37a.29.29,0,0,1-.28-.28v-7.06A.29.29,0,0,1,69.37,100.14Z" style="fill: #393939"/>

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

@ -1,4 +1,4 @@
namespace pxsim.visuals {
export const EV3_LANDSCAPE_SVG = `<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146.25 120.31"><defs><linearGradient id="linear-gradient" x1="-809.89" y1="-16.33" x2="-809.89" y2="-16.88" gradientTransform="matrix(65.53 0 0 48.84 53145.53 916.09)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6a6a6a"/><stop offset=".52" stop-color="#6a6a6a"/><stop offset="1" stop-color="#6a6a6a"/></linearGradient></defs><g id="EV3"><g id="brick"><path id="ev3_body_2" data-name="ev3 body 2" d="M2.64 0h141a2.47 2.47 0 0 1 2.64 2.25v115.81a2.47 2.47 0 0 1-2.64 2.25h-141A2.47 2.47 0 0 1 0 118.06V2.25A2.47 2.47 0 0 1 2.64 0z" fill="#fff"/><path id="ev3_screenborder" data-name="ev3 screenborder" d="M8.47 1.54h129.31a6.58 6.58 0 0 1 6.58 6.58v72.67a6.6 6.6 0 0 1-6.58 6.6H8.47a6.6 6.6 0 0 1-6.58-6.6V8.12a6.58 6.58 0 0 1 6.58-6.58z" fill="#393939"/><path id="ev3_screen" data-name="ev3 screen" d="M19.06 5.07h106.8a4.6 4.6 0 0 1 4.69 4.52v68.25a4.61 4.61 0 0 1-4.61 4.62H19.06a4.61 4.61 0 0 1-4.61-4.62V9.68a4.6 4.6 0 0 1 4.61-4.61z" fill="#97b5a6"/></g><g id="buttons"><path id="btn_grey" data-name="btn grey" d="M68.9 119.14c-3.46-3.34-8.84-8.84-8.84-8.84v-1.13h-2.13a5.13 5.13 0 1 1-.35-10.25h2.47v-1.13l8.76-8.94h8.75c3.94 4 8.74 8.75 8.74 8.75v1.32h2a5.13 5.13 0 0 1 .35 10.25H86.3v1.13c-4.66 4.79-8.68 8.84-8.68 8.84z" fill="#6a6a6a"/><path id="btn_color" data-name="btn color" d="M68.9 119.14c-3.46-3.34-8.84-8.84-8.84-8.84v-1.13h-2.13a5.13 5.13 0 1 1-.35-10.25h2.47v-1.13l8.76-8.94h8.75c3.94 4 8.74 8.75 8.74 8.75v1.32h2a5.13 5.13 0 0 1 .35 10.25H86.3v1.13c-4.66 4.79-8.68 8.84-8.68 8.84z" fill="url(#linear-gradient)"/><path id="btn_left" data-name="btn left" d="M57.85 100.14h6.45v7.62h-6.45a3.81 3.81 0 0 1-3.8-3.81 3.81 3.81 0 0 1 3.8-3.81z" fill="#a8aaa8"/><path id="btn_right" data-name="btn right" d="M88.32 107.76h-6.44v-7.62h6.44a3.81 3.81 0 0 1 3.81 3.8 3.81 3.81 0 0 1-3.81 3.81z" fill="#a8aaa8"/><path id="btn_enter" data-name="btn enter" d="M69.37 100.14h7.44a.29.29 0 0 1 .29.28v7.06a.29.29 0 0 1-.29.28h-7.44a.29.29 0 0 1-.28-.28v-7.06a.29.29 0 0 1 .28-.28z" fill="#393939"/><path id="btn_up" data-name="btn up" d="M69.19 90.26l7.9-.09L83 96.28l-2.44 2.44v4.42h-2.25v-2.55a1.86 1.86 0 0 0-1.86-1.86h-6.87a1.54 1.54 0 0 0-1.6 1.46v3H65.7v-4.47l-2.44-2.49z" fill="#a8aaa8"/><path id="btn_down" data-name="btn down" d="M77.05 117.65l-7.85.06-5.94-6.1 2.48-2.43v-4.44H68v2.54a1.9 1.9 0 0 0 1.86 1.9h6.82a1.62 1.62 0 0 0 1.65-1.58v-2.86h2.27v4.44l2.4 2.43z" fill="#a8aaa8"/></g></g></svg>`;
export const EV3_LANDSCAPE_SVG = `<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146.25 120.31"><defs><linearGradient id="linear-gradient-background" x1="-809.89" y1="-16.33" x2="-809.89" y2="-16.88" gradientTransform="matrix(65.53 0 0 48.84 53145.53 916.09)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6a6a6a"/><stop offset=".52" stop-color="#6a6a6a"/><stop offset="1" stop-color="#6a6a6a"/></linearGradient><linearGradient id="linear-gradient" x1="-374.89" y1="432.9" x2="-374.89" y2="432.82" gradientTransform="matrix(110.73 0 0 -106.94 41567.45 46425.3)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f1f1f1"/><stop offset="1" stop-color="#7a7a7a"/></linearGradient><linearGradient id="linear-gradient-2" x1="-376" y1="450.74" x2="-376" y2="450.72" gradientTransform="matrix(100.11 0 0 -79.18 37697.19 35762.28)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a8aaa8"/><stop offset="1" stop-color="gray"/></linearGradient><linearGradient id="linear-gradient-3" x1="-376.21" y1="614.94" x2="-376.21" y2="614.75" gradientTransform="matrix(98.29 0 0 -23.36 37033.43 14529.9)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a8aaa8"/><stop offset="1" stop-color="#535453"/></linearGradient><linearGradient id="linear-gradient-black" x1="-382.07" y1="493.36" x2="-382.07" y2="494.25" gradientTransform="matrix(65.53 0 0 -48.84 25091.11 24228.69)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6a6a6a"/><stop offset=".52" stop-color="#6a6a6a"/><stop offset="1" stop-color="#6a6a6a"/></linearGradient><linearGradient id="linear-gradient-green" x2="145" y2="48" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6a6a6a"/><stop offset=".52" stop-color="#8CE300"/><stop offset="1" stop-color="#6a6a6a"/></linearGradient><linearGradient id="linear-gradient-red" x2="145" y2="48" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6a6a6a"/><stop offset=".52" stop-color="#D02E26"/><stop offset="1" stop-color="#6a6a6a"/></linearGradient><linearGradient id="linear-gradient-orange" x2="145" y2="48" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6a6a6a"/><stop offset=".52" stop-color="#F8D039"/><stop offset="1" stop-color="#6a6a6a"/></linearGradient><linearGradient id="linear-gradient-5" x1="-743.87" y1="1256.85" x2="-743.87" y2="1257.21" gradientTransform="matrix(3.03 0 0 -6.22 2312.41 7891.56)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#757575"/><stop offset="1" stop-color="#393939"/></linearGradient></defs><g id="EV3"><g id="brick"><path id="ev3_body_2" data-name="ev3 body 2" d="M2.64 0h141a2.47 2.47 0 0 1 2.64 2.25v115.81a2.47 2.47 0 0 1-2.64 2.25h-141A2.47 2.47 0 0 1 0 118.06V2.25A2.47 2.47 0 0 1 2.64 0z" fill="#fff"/><path id="ev3_screenborder" data-name="ev3 screenborder" d="M8.47 1.54h129.31a6.58 6.58 0 0 1 6.58 6.58v72.67a6.6 6.6 0 0 1-6.58 6.6H8.47a6.6 6.6 0 0 1-6.58-6.6V8.12a6.58 6.58 0 0 1 6.58-6.58z" fill="#393939"/><path id="ev3_screen" data-name="ev3 screen" d="M19.06 5.07h106.8a4.6 4.6 0 0 1 4.69 4.52v68.25a4.61 4.61 0 0 1-4.61 4.62H19.06a4.61 4.61 0 0 1-4.61-4.62V9.68a4.6 4.6 0 0 1 4.61-4.61z" fill="#97b5a6"/></g><g id="buttons"><path id="btn_grey" data-name="btn grey" d="M68.9 119.14c-3.46-3.34-8.84-8.84-8.84-8.84v-1.13h-2.13a5.13 5.13 0 1 1-.35-10.25h2.47v-1.13l8.76-8.94h8.75c3.94 4 8.74 8.75 8.74 8.75v1.32h2a5.13 5.13 0 0 1 .35 10.25H86.3v1.13c-4.66 4.79-8.68 8.84-8.68 8.84z" fill="#6a6a6a"/><path id="btn_color" data-name="btn color" d="M68.9 119.14c-3.46-3.34-8.84-8.84-8.84-8.84v-1.13h-2.13a5.13 5.13 0 1 1-.35-10.25h2.47v-1.13l8.76-8.94h8.75c3.94 4 8.74 8.75 8.74 8.75v1.32h2a5.13 5.13 0 0 1 .35 10.25H86.3v1.13c-4.66 4.79-8.68 8.84-8.68 8.84z" fill="url(#linear-gradient-background)"/><path id="btn_left" data-name="btn left" d="M57.85 100.14h6.45v7.62h-6.45a3.81 3.81 0 0 1-3.8-3.81 3.81 3.81 0 0 1 3.8-3.81z" fill="#a8aaa8"/><path id="btn_right" data-name="btn right" d="M88.32 107.76h-6.44v-7.62h6.44a3.81 3.81 0 0 1 3.81 3.8 3.81 3.81 0 0 1-3.81 3.81z" fill="#a8aaa8"/><path id="btn_enter" data-name="btn enter" d="M69.37 100.14h7.44a.29.29 0 0 1 .29.28v7.06a.29.29 0 0 1-.29.28h-7.44a.29.29 0 0 1-.28-.28v-7.06a.29.29 0 0 1 .28-.28z" fill="#393939"/><path id="btn_up" data-name="btn up" d="M69.19 90.26l7.9-.09L83 96.28l-2.44 2.44v4.42h-2.25v-2.55a1.86 1.86 0 0 0-1.86-1.86h-6.87a1.54 1.54 0 0 0-1.6 1.46v3H65.7v-4.47l-2.44-2.49z" fill="#a8aaa8"/><path id="btn_down" data-name="btn down" d="M77.05 117.65l-7.85.06-5.94-6.1 2.48-2.43v-4.44H68v2.54a1.9 1.9 0 0 0 1.86 1.9h6.82a1.62 1.62 0 0 0 1.65-1.58v-2.86h2.27v4.44l2.4 2.43z" fill="#a8aaa8"/></g></g></svg>`;
}

View File

@ -388,7 +388,8 @@ namespace pxsim.visuals {
})
}
// Kill the brick
this.layoutView.getBrick().kill();
this.layoutView.getPortraitBrick().kill();
this.layoutView.getLandscapeBrick().kill();
// Save previous inputs for the next cycle
EV3View.previousSelectedInputs = ev3board().getInputNodes().map((node, index) => (this.getDisplayViewForNode(node.id, index).getSelected()) ? node.id : -1)
@ -474,7 +475,8 @@ namespace pxsim.visuals {
const brickNode = ev3board().getBrickNode();
if (brickNode.didChange()) {
this.getDisplayViewForNode(brickNode.id, -1).updateState();
this.layoutView.getPortraitBrick().updateState();
this.layoutView.getLandscapeBrick().updateState();
}
const outputNodes = ev3board().getMotors();

View File

@ -86,7 +86,15 @@ namespace pxsim.visuals {
}
public getBrick() {
return this.brickInLandscape ? this.brickLandscape : this.brick;
return this.brickInLandscape ? this.getLandscapeBrick() : this.getPortraitBrick();
}
public getPortraitBrick() {
return this.brick;
}
public getLandscapeBrick() {
return this.brickLandscape;
}
public unselectBrick() {