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

Update simulator as per latest lego UI design for sensors. Fix full screen layout issues. (#554)

Browse Source
This commit is contained in:
Sam El-Husseini
2018-05-02 13:58:59 -07:00
committed by GitHub
parent 4825172423
commit 84990d66a9
14 changed files with 376 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
sim/visuals/controls/backgroundView.ts Normal file
View File

@ -0,0 +1,42 @@
namespace pxsim.visuals {
export class BackgroundViewControl extends ControlView<PortNode> {
private backgroundGroup: SVGGElement;
private backgroundRect: SVGRectElement;
getInnerView() {
this.backgroundGroup = svg.elt("g") as SVGGElement;
this.backgroundRect = pxsim.svg.child(this.backgroundGroup,
"rect", {
'x': 0, 'y': 0,
'width': '100%',
'height': '100%',
'style': `fill: #d6edff; stroke: #A8A9A8; stroke-width: 3px; stroke-opacity: 0.2`
}) as SVGRectElement;
return this.backgroundGroup;
}
buildDom(): SVGElement {
this.content = svg.elt("svg", { width: "100%", height: "100%"}) as SVGSVGElement;
this.content.appendChild(this.getInnerView());
return this.content;
}
public resize(width: number, height: number, strict?: boolean) {
super.resize(width, height, strict);
this.backgroundRect.setAttribute('stroke-dasharray', `${height + width + height} 1000`);
this.backgroundRect.setAttribute('stroke-dashoffset', `-${width}`);
}
getInnerWidth(): number {
return 76.84;
}
getInnerHeight(): number {
return 173.86;
}
}
}

8
sim/visuals/controls/closeIcon.ts
View File

@ -9,7 +9,7 @@ namespace pxsim.visuals {
this.closeGroup = svg.elt("g") as SVGGElement;
this.closeGroup.style.cursor = 'pointer';
const circleCloseWrapper = pxsim.svg.child(this.closeGroup, "g");
pxsim.svg.child(circleCloseWrapper, "circle", { 'cx': "16", 'cy': "16", 'r': "16", 'style': "fill: #fff" });
pxsim.svg.child(circleCloseWrapper, "circle", { 'cx': "16", 'cy': "16", 'r': "16", 'style': "fill: transparent;" });
pxsim.svg.child(circleCloseWrapper, "circle", { 'cx': "16", 'cy': "16", 'r': "15", 'style': "fill: none;stroke: #a8aaa8;stroke-width: 2px" });
pxsim.svg.child(this.closeGroup, "rect", { 'x': "10", 'y': "16", 'width': "18", 'height': "2", 'transform': "translate(-9.46 17.41) rotate(-45)", 'style': "fill: #a8aaa8" });
pxsim.svg.child(this.closeGroup, "rect", { 'x': "18", 'y': "8", 'width': "2", 'height': "18", 'transform': "translate(-9.46 17.41) rotate(-45)", 'style': "fill: #a8aaa8" });
@ -18,15 +18,11 @@ namespace pxsim.visuals {
}
buildDom(): SVGElement {
this.content = svg.elt("svg", { width: "100%", height: "100%"}) as SVGSVGElement;
this.content = svg.elt("svg", { width: "100%", height: "100%", viewBox:"0 0 32 32"}) as SVGSVGElement;
this.content.appendChild(this.getInnerView());
return this.content;
}
public resize(width: number, height: number) {
super.resize(width, height);
}
public getInnerHeight() {
return 32;
}

41
sim/visuals/controls/colorGrid.ts
View File

@ -5,28 +5,32 @@ namespace pxsim.visuals {
export class ColorGridControl extends ControlView<ColorSensorNode> {
private group: SVGGElement;
private static colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey', 'white'];
private static colorValue = [5, 4, 2, 3, 1, 7, 6];
getInnerView() {
this.group = svg.elt("g") as SVGGElement;
this.group.setAttribute("transform", `translate(2, 2.5) scale(0.6)`)
const colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey'];
const colors = ['#f12a21', '#ffd01b', '#006db3', '#00934b', '#000', '#6c2d00'];
const colorValue = [5, 4, 2, 3, 1, 7];
const colorIds = ['red', 'yellow', 'blue', 'green', 'black', 'grey'];
let cy = -4;
for (let c = 0; c < colorIds.length; c++) {
const cx = c % 2 == 0 ? 2.2 : 7.5;
if (c % 2 == 0) cy += 5;
if (colorIds[c]) {
const circle = pxsim.svg.child(this.group, "circle", { 'class': 'sim-color-grid-circle', 'cx': cx, 'cy': cy, 'r': '2', 'style': `fill: ${colors[c]}` });
const circle = pxsim.svg.child(this.group, "circle", {
'class': `sim-color-grid-circle sim-color-grid-${colorIds[c]}`,
'cx': cx, 'cy': cy, 'r': '2', 'style': `fill: ${colors[c]}` });
pointerEvents.down.forEach(evid => circle.addEventListener(evid, ev => {
this.setColor(colorValue[c]);
this.setColor(ColorGridControl.colorValue[c]);
}));
}
}
const whiteCircleWrapper = pxsim.svg.child(this.group, "g", { 'id': 'white-cirlce-wrapper' });
pxsim.svg.child(whiteCircleWrapper, "circle", { 'class': 'sim-color-grid-circle', 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: #fff` });
pxsim.svg.child(whiteCircleWrapper, "circle", { 'class': 'sim-color-grid-circle sim-color-grid-white', 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: #fff` });
pxsim.svg.child(whiteCircleWrapper, "circle", { 'cx': 2.2, 'cy': '16', 'r': '2', 'style': `fill: none;stroke: #94989b;stroke-width: 0.1px` });
pointerEvents.down.forEach(evid => whiteCircleWrapper.addEventListener(evid, ev => {
this.setColor(6);
@ -42,9 +46,34 @@ namespace pxsim.visuals {
return 15;
}
public updateState() {
if (!this.visible) {
return;
}
const node = this.state;
const color = node.getValue();
for (let c = 0; c < ColorGridControl.colorValue.length; c++) {
const colorId = ColorGridControl.colorIds[c];
const colorValue = ColorGridControl.colorValue[c];
const colorDiv = this.group.getElementsByClassName(`sim-color-grid-${colorId}`)[0] as HTMLElement;
if (colorValue == color) {
pxsim.U.addClass(colorDiv, 'sim-color-selected');
} else {
pxsim.U.removeClass(colorDiv, 'sim-color-selected');
}
}
}
private setColor(color: number) {
const state = this.state;
state.setColor(color);
const currentColor = state.getValue();
if (currentColor == color) {
state.setColor(0);
} else {
state.setColor(color);
}
}
}
}

14
sim/visuals/controls/colorWheel.ts
View File

@ -15,7 +15,7 @@ namespace pxsim.visuals {
}
private getReporterHeight() {
return 58;
return 38;
}
private getSliderWidth() {
@ -23,10 +23,10 @@ namespace pxsim.visuals {
}
private getSliderHeight() {
return 111;
return 131;
}
private getMax() {
private getMaxValue() {
return 100;
}
@ -36,9 +36,9 @@ namespace pxsim.visuals {
}
const node = this.state;
const percentage = node.getValue();
const inversePercentage = this.getMax() - percentage;
const inversePercentage = this.getMaxValue() - percentage;
svg.setGradientValue(this.colorGradient, inversePercentage + "%");
this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}`;
this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}%`;
}
updateColorLevel(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
@ -47,7 +47,7 @@ namespace pxsim.visuals {
const height = bBox.height;
let t = Math.max(0, Math.min(1, (height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height));
const state = this.state;
state.setColor(t * this.getMax());
state.setColor(t * this.getMaxValue());
}
getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
@ -60,7 +60,7 @@ namespace pxsim.visuals {
svg.setGradientColors(this.colorGradient, "black", "yellow");
const reporterGroup = pxsim.svg.child(this.group, "g");
reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 50)`);
reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 20)`);
this.reporter = pxsim.svg.child(reporterGroup, "text", { 'text-anchor': 'middle', 'x': 0, 'y': '0', 'class': 'sim-text number large inverted' }) as SVGTextElement;
const sliderGroup = pxsim.svg.child(this.group, "g");

105
sim/visuals/controls/distanceSlider.ts
View File

@ -7,11 +7,59 @@ namespace pxsim.visuals {
private gradient: SVGLinearGradientElement;
private slider: SVGGElement;
private rect: SVGRectElement;
private reporter: SVGTextElement;
private static SLIDER_HANDLE_HEIGHT = 26;
private static SLIDER_SIDE_PADDING = 6;
getInnerWidth() {
return 111;
}
getInnerHeight() {
return 192;
}
private getReporterHeight() {
return 38;
}
private getSliderWidth() {
return 62;
}
private getSliderHeight() {
return 131;
}
private getMaxValue() {
return 250; // cm
}
updateState() {
if (!this.visible) {
return;
}
const node = this.state;
const percentage = node.getValue() / 10; /* convert back to cm */
const y = this.getSliderHeight() * percentage / this.getMaxValue();
this.slider.setAttribute("transform", `translate(0, ${y - DistanceSliderControl.SLIDER_HANDLE_HEIGHT / 2})`);
// Update reporter text
this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}cm`;
}
updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
let cur = svg.cursorPoint(pt, parent, ev);
const bBox = this.rect.getBoundingClientRect();
const height = bBox.height;
let t = Math.max(0, Math.min(1, (height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height));
const state = this.state;
state.setDistance((1 - t) * (this.getMaxValue()));
}
getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
let gid = "gradient-slider-" + this.getPort();
this.group = svg.elt("g") as SVGGElement;
@ -28,13 +76,14 @@ namespace pxsim.visuals {
this.group = svg.elt("g") as SVGGElement;
const reporterGroup = pxsim.svg.child(this.group, "g");
reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 42)`);
reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 20)`);
this.reporter = pxsim.svg.child(reporterGroup, "text", { 'text-anchor': 'middle', 'x': 0, 'y': '0', 'class': 'sim-text number large inverted' }) as SVGTextElement;
const sliderGroup = pxsim.svg.child(this.group, "g");
sliderGroup.setAttribute("transform", `translate(${this.getWidth() / 2 - this.getSliderWidth() / 2}, ${this.getReporterHeight()})`)
sliderGroup.setAttribute("transform", `translate(${this.getInnerWidth() / 2 - this.getSliderWidth() / 2}, ${this.getReporterHeight()})`)
const rect = pxsim.svg.child(sliderGroup, "rect", { 'x': DistanceSliderControl.SLIDER_SIDE_PADDING, 'y': 2, 'width': this.getSliderWidth() - DistanceSliderControl.SLIDER_SIDE_PADDING * 2, 'height': this.getSliderHeight(), 'style': `fill: url(#${gid})` });
this.rect = rect as SVGRectElement;
this.slider = pxsim.svg.child(sliderGroup, "g", { "transform": "translate(0,0)" }) as SVGGElement;
const sliderInner = pxsim.svg.child(this.slider, "g");
@ -48,7 +97,7 @@ namespace pxsim.visuals {
height: this.getInnerHeight(),
opacity: 0,
cursor: '-webkit-grab'
})
}) as SVGRectElement;
let pt = parent.createSVGPoint();
let captured = false;
@ -72,56 +121,6 @@ namespace pxsim.visuals {
return this.group;
}
getInnerHeight() {
return 192;
}
getInnerWidth() {
return 111;
}
private getReporterHeight() {
return 50;
}
private getSliderHeight() {
return 110;
}
private getSliderWidth() {
return 62;
}
updateState() {
if (!this.visible) {
return;
}
const node = this.state;
const percentage = node.getValue() / 10; /* convert back to cm */
const y = this.getSliderHeight() * percentage / this.getMax();
this.slider.setAttribute("transform", `translate(0, ${y - DistanceSliderControl.SLIDER_HANDLE_HEIGHT / 2})`);
// Update reporter text
this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}`;
}
private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
let cur = svg.cursorPoint(pt, parent, ev);
const height = this.getSliderHeight();
const bBox = this.content.getBoundingClientRect();
let t = Math.max(0, Math.min(1, (DistanceSliderControl.SLIDER_HANDLE_HEIGHT + height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height))
const state = this.state;
state.setDistance((1 - t) * (this.getMax()));
}
private getMin() {
return 0;
}
private getMax() {
return 250; //cm
}
private getGradientDefinition(): LinearGradientDefinition {
return {
stops: [

105
sim/visuals/controls/proximitySlider.ts
View File

@ -7,11 +7,60 @@ namespace pxsim.visuals {
private gradient: SVGLinearGradientElement;
private slider: SVGGElement;
private rect: SVGRectElement;
private reporter: SVGTextElement;
private static SLIDER_HANDLE_HEIGHT = 26;
private static SLIDER_SIDE_PADDING = 6;
getInnerWidth() {
return 111;
}
getInnerHeight() {
return 192;
}
private getReporterHeight() {
return 38;
}
private getSliderWidth() {
return 62;
}
private getSliderHeight() {
return 131;
}
private getMaxValue() {
return 100;
}
updateState() {
if (!this.visible) {
return;
}
const node = this.state;
const percentage = node.getValue();
const y = this.getSliderHeight() * percentage / this.getMaxValue();
this.slider.setAttribute("transform", `translate(0, ${y - ProximitySliderControl.SLIDER_HANDLE_HEIGHT / 2})`);
// Update reporter text
this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}`;
}
private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
let cur = svg.cursorPoint(pt, parent, ev);
const bBox = this.rect.getBoundingClientRect();
const height = bBox.height;
let t = Math.max(0, Math.min(1, (height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height));
const state = this.state;
const v = Math.floor((1 - t) * (this.getMaxValue()));
state.setPromixity(v);
}
getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
let gid = "gradient-slider-" + this.getId();
this.group = svg.elt("g") as SVGGElement;
@ -27,13 +76,14 @@ namespace pxsim.visuals {
this.group = svg.elt("g") as SVGGElement;
const reporterGroup = pxsim.svg.child(this.group, "g");
reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 42)`);
reporterGroup.setAttribute("transform", `translate(${this.getWidth() / 2}, 20)`);
this.reporter = pxsim.svg.child(reporterGroup, "text", { 'text-anchor': 'middle', 'x': 0, 'y': '0', 'class': 'sim-text number large inverted' }) as SVGTextElement;
const sliderGroup = pxsim.svg.child(this.group, "g");
sliderGroup.setAttribute("transform", `translate(${this.getWidth() / 2 - this.getSliderWidth() / 2}, ${this.getReporterHeight()})`)
sliderGroup.setAttribute("transform", `translate(${this.getInnerWidth() / 2 - this.getSliderWidth() / 2}, ${this.getReporterHeight()})`)
const rect = pxsim.svg.child(sliderGroup, "rect", { 'x': ProximitySliderControl.SLIDER_SIDE_PADDING, 'y': 2, 'width': this.getSliderWidth() - ProximitySliderControl.SLIDER_SIDE_PADDING * 2, 'height': this.getSliderHeight(), 'style': `fill: url(#${gid})` });
this.rect = rect as SVGRectElement;
this.slider = pxsim.svg.child(sliderGroup, "g", { "transform": "translate(0,0)" }) as SVGGElement;
const sliderInner = pxsim.svg.child(this.slider, "g");
@ -71,57 +121,6 @@ namespace pxsim.visuals {
return this.group;
}
getInnerHeight() {
return 192;
}
getInnerWidth() {
return 111;
}
private getReporterHeight() {
return 50;
}
private getSliderHeight() {
return 110;
}
private getSliderWidth() {
return 62;
}
updateState() {
if (!this.visible) {
return;
}
const node = this.state;
const percentage = node.getValue();
const y = this.getSliderHeight() * percentage / this.getMax();
this.slider.setAttribute("transform", `translate(0, ${y - ProximitySliderControl.SLIDER_HANDLE_HEIGHT / 2})`);
// Update reporter text
this.reporter.textContent = `${parseFloat((percentage).toString()).toFixed(0)}`;
}
private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
let cur = svg.cursorPoint(pt, parent, ev);
const height = this.getSliderHeight();
const bBox = this.content.getBoundingClientRect();
let t = Math.max(0, Math.min(1, (ProximitySliderControl.SLIDER_HANDLE_HEIGHT + height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height))
const state = this.state;
const v = Math.floor((1 - t) * (this.getMax()));
state.setPromixity(v);
}
private getMin() {
return 0;
}
private getMax() {
return 100;
}
private getGradientDefinition(): LinearGradientDefinition {
return {
stops: [

8
sim/visuals/controls/rotationSlider.ts
View File

@ -13,10 +13,10 @@ namespace pxsim.visuals {
this.group = svg.elt("g") as SVGGElement;
const sliderGroup = pxsim.svg.child(this.group, "g");
sliderGroup.setAttribute("transform", `translate(5, ${10 + this.getTopPadding()})`)
sliderGroup.setAttribute("transform", `translate(10,0)`);
const rotationLine = pxsim.svg.child(sliderGroup, "g");
pxsim.svg.child(rotationLine, "path", { 'transform': 'translate(5.11 -31.1)', 'd': 'M68.71,99.5l6.1-8S61.3,79.91,42.69,78.35,12,83.14,6.49,85.63a48.69,48.69,0,0,0-9.6,5.89L3.16,99.3S19.27,87.7,37.51,87.94,68.71,99.5,68.71,99.5Z', 'style': 'fill: #626262' });
pxsim.svg.child(rotationLine, "path", { 'transform': 'translate(7.11 -31.1)', 'd': 'M68.71,99.5l6.1-8S61.3,79.91,42.69,78.35,12,83.14,6.49,85.63a48.69,48.69,0,0,0-9.6,5.89L3.16,99.3S19.27,87.7,37.51,87.94,68.71,99.5,68.71,99.5Z', 'style': 'fill: #626262' });
this.slider = pxsim.svg.child(sliderGroup, "g") as SVGGElement;
const handleInner = pxsim.svg.child(sliderGroup, "g");
@ -52,8 +52,8 @@ namespace pxsim.visuals {
return this.group;
}
private getTopPadding() {
return this.getInnerHeight() / 4;
getInnerWidth() {
return RotationSliderControl.SLIDER_WIDTH * 1.5;
}
updateState() {