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

preliminary-changes

Browse Source 
Implemented toggle switches for each RGB component.
This commit is contained in:
Dmitriy Antipov 2023-05-09 17:27:05 +03:00
parent c37a5d3cc5
commit 73768bb236
4 changed files with 140 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
sim/dalboard.ts
View File

@ -151,7 +151,7 @@ namespace pxsim {
return !!this.inputNodes[port]; return !!this.inputNodes[port];
} }
getSensor(port: number, type: number): SensorNode { getSensor(port: number, type: number): SensorNode | SensorExtendedNode {
if (!this.inputNodes[port]) { if (!this.inputNodes[port]) {
switch (type) { switch (type) {
case DAL.DEVICE_TYPE_GYRO: this.inputNodes[port] = new GyroSensorNode(port); break; case DAL.DEVICE_TYPE_GYRO: this.inputNodes[port] = new GyroSensorNode(port); break;
@ -189,7 +189,7 @@ namespace pxsim {
} }
export function inHighcontrastMode(): boolean { export function inHighcontrastMode(): boolean {
//// ///
return ev3board().highcontrastMode; return ev3board().highcontrastMode;
} }

20
sim/state/color.ts
View File

@ -21,7 +21,9 @@ namespace pxsim {
export class ColorSensorNode extends UartSensorNode { export class ColorSensorNode extends UartSensorNode {
id = NodeType.ColorSensor; id = NodeType.ColorSensor;
//private colors: number[] = [0];
private color: number = 0; private color: number = 0;
private colors: number[] = [0, 0, 0];
constructor(port: number) { constructor(port: number) {
super(port); super(port);
@ -32,8 +34,13 @@ namespace pxsim {
return DAL.DEVICE_TYPE_COLOR; return DAL.DEVICE_TYPE_COLOR;
} }
setColor(color: number) { setColors(colors: number[]) {
this.color = color; this.colors = colors;
this.setChangedState();
}
setColor(colors: number) {
this.colors = [colors];
this.setChangedState(); this.setChangedState();
} }
@ -41,10 +48,15 @@ namespace pxsim {
return this.color; return this.color;
} }
getValues() {
return this.colors;
}
setMode(mode: number) { setMode(mode: number) {
this.mode = mode; this.mode = mode;
if (this.mode == ColorSensorMode.RefRaw) this.color = 512; if (this.mode == ColorSensorMode.RefRaw) this.color = 512;
else this.color = 50; else if (this.mode == ColorSensorMode.RgbRaw) this.colors = [128, 128, 128];
else this.color = 50; // Reflection or ambiend light
this.changed = true; this.changed = true;
this.modeChanged = true; this.modeChanged = true;
} }

74
sim/state/sensor.ts
View File

@ -59,6 +59,64 @@ namespace pxsim {
} }
} }
export class SensorExtendedNode extends BaseNode {
protected mode: number;
protected valueChanged: boolean;
protected modeChanged: boolean;
constructor(port: number) {
super(port);
}
public isUart() {
return true;
}
public isAnalog() {
return false;
}
public getValue() {
return [0];
}
setMode(mode: number) {
this.mode = mode;
this.changed = true;
this.modeChanged = true;
}
getMode() {
return this.mode;
}
getDeviceType() {
return DAL.DEVICE_TYPE_NONE;
}
public hasData() {
return true;
}
valueChange() {
const res = this.valueChanged;
this.valueChanged = false;
return res;
}
modeChange() {
const res = this.modeChanged;
this.modeChanged = false;
return res;
}
setChangedState() {
this.changed = true;
this.valueChanged = false;
}
}
export class AnalogSensorNode extends SensorNode { export class AnalogSensorNode extends SensorNode {
constructor(port: number) { constructor(port: number) {
@ -84,4 +142,20 @@ namespace pxsim {
return this.changed; return this.changed;
} }
} }
export class UartSensorExtendedNode extends SensorNode {
constructor(port: number) {
super(port);
}
hasChanged() {
return this.changed;
}
public getValues() {
return [0];
}
}
} }

81
sim/visuals/controls/colorRGBWheel.ts
View File

@ -2,11 +2,15 @@ namespace pxsim.visuals {
export class ColorRGBWheelControl extends ControlView<ColorSensorNode> { export class ColorRGBWheelControl extends ControlView<ColorSensorNode> {
private group: SVGGElement; private group: SVGGElement;
private colorGradient: SVGLinearGradientElement; private colorGradient: SVGLinearGradientElement[] = [];
private reporter: SVGTextElement[] = []; private reporter: SVGTextElement[] = [];
private rect: SVGElement[] = []; private rect: SVGElement[] = [];
private printOffsetH = 18; private printOffsetH = 16;
private rgbLetters: string[] = ["R", "G", "B"];
private rectNames: string[] = ["rectR", "rectG", "rectB"];
private captured: boolean = false;
private classVal: string;
getInnerWidth() { getInnerWidth() {
return 120; return 120;
@ -29,7 +33,7 @@ namespace pxsim.visuals {
} }
private getMaxValue() { private getMaxValue() {
return 1023; return 512;
} }
private mapValue(x: number, inMin: number, inMax: number, outMin: number, outMax: number) { private mapValue(x: number, inMin: number, inMax: number, outMin: number, outMax: number) {
@ -39,48 +43,59 @@ namespace pxsim.visuals {
updateState() { updateState() {
if (!this.visible) return; if (!this.visible) return;
const node = this.state; const node = this.state;
const value = node.getValue(); const values = node.getValues();
let inverseValue = this.getMaxValue() - value; //console.log("values: ");
inverseValue = this.mapValue(inverseValue, 0, 1023, 0, 100); console.log(values);
svg.setGradientValue(this.colorGradient, inverseValue + "%"); let inverseValue: number[] = [];
this.reporter[0].textContent = "R: " + `${parseFloat((value).toString()).toFixed(0)}`; for (let i = 0; i < 3; i++) {
this.reporter[1].textContent = "G: " + `${parseFloat((value).toString()).toFixed(0)}`; inverseValue[i] = this.getMaxValue() - values[i];
this.reporter[2].textContent = "B: " + `${parseFloat((value).toString()).toFixed(0)}`; inverseValue[i] = this.mapValue(inverseValue[i], 0, this.getMaxValue(), 0, 100);
svg.setGradientValue(this.colorGradient[i], inverseValue[i] + "%");
this.reporter[i].textContent = this.rgbLetters[i] + ": " + `${parseFloat((values[i]).toString()).toFixed(0)}`;
}
} }
updateColorLevel(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) { updateColorLevel(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
//console.log(ev);
//console.log(ev.target);
if (!this.classVal) this.classVal = (ev.target as HTMLElement).classList.value;
//console.log("classVal: " + this.classVal);
let cur = svg.cursorPoint(pt, parent, ev); let cur = svg.cursorPoint(pt, parent, ev);
const bBox = this.rect[0].getBoundingClientRect(); let index = this.rectNames.findIndex(i => i == this.classVal);
//console.log("index: " + index);
const bBox = this.rect[index].getBoundingClientRect();
const height = bBox.height; const height = bBox.height;
let t = Math.max(0, Math.min(1, (height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height)); let t = Math.max(0, Math.min(1, (height + bBox.top / this.scaleFactor - cur.y / this.scaleFactor) / height));
const state = this.state; const state = this.state;
state.setColor(t * this.getMaxValue()); let colorsVal = this.state.getValues();
colorsVal[index] = t * this.getMaxValue();
state.setColors(colorsVal);
} }
getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) { getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
this.group = svg.elt("g") as SVGGElement; this.group = svg.elt("g") as SVGGElement;
let gc = "gradient-color-" + this.getPort(); let gc = "gradient-color-" + this.getPort();
const prevColorGradient = globalDefs.querySelector(`#${gc}`) as SVGLinearGradientElement; let prevColorGradient: SVGLinearGradientElement[] = [];
this.colorGradient = prevColorGradient ? prevColorGradient : svg.linearGradient(globalDefs, gc, false); for (let i = 0; i < 3; i++) {
svg.setGradientValue(this.colorGradient, "50%"); prevColorGradient[i] = globalDefs.querySelector(`#${gc + "-" + i}`) as SVGLinearGradientElement;
svg.setGradientColors(this.colorGradient, "black", "yellow"); this.colorGradient[i] = prevColorGradient[i] ? prevColorGradient[i] : svg.linearGradient(globalDefs, gc + "-" + i, false);
svg.setGradientValue(this.colorGradient[i], "50%");
svg.setGradientColors(this.colorGradient[i], "black", "yellow");
}
let pt = parent.createSVGPoint(); let pt = parent.createSVGPoint();
let captured: boolean[] = [false, false, false];
let reporterGroup: SVGElement[] = []; let reporterGroup: SVGElement[] = [];
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
reporterGroup[i] = pxsim.svg.child(this.group, "g"); reporterGroup[i] = pxsim.svg.child(this.group, "g");
//console.log(`reporterGroup[${i}]:`);
console.log(`reporterGroup[${i}]:`); //console.log(reporterGroup[i]);
console.log(reporterGroup[i]);
reporterGroup[i].setAttribute("transform", `translate(${this.getWidth() / 2}, ${18 + this.printOffsetH * i})`); reporterGroup[i].setAttribute("transform", `translate(${this.getWidth() / 2}, ${18 + this.printOffsetH * i})`);
this.reporter[i] = pxsim.svg.child(reporterGroup[i], "text", { 'text-anchor': 'middle', 'class': 'sim-text number large inverted', 'style': 'font-size: 18px;' }) as SVGTextElement; this.reporter[i] = pxsim.svg.child(reporterGroup[i], "text", { 'text-anchor': 'middle', 'class': 'sim-text number large inverted', 'style': 'font-size: 18px;' }) as SVGTextElement;
//console.log(`this.reporter[${i}]:`);
console.log(`this.reporter[${i}]:`); //console.log(this.reporter[0]);
console.log(this.reporter[0]);
} }
let sliderGroup: SVGElement[] = []; let sliderGroup: SVGElement[] = [];
@ -88,35 +103,35 @@ namespace pxsim.visuals {
sliderGroup[i] = pxsim.svg.child(this.group, "g"); sliderGroup[i] = pxsim.svg.child(this.group, "g");
const translateX = (this.getWidth() / 2 - this.getSliderWidth() / 2 - 36) + 36 * i; const translateX = (this.getWidth() / 2 - this.getSliderWidth() / 2 - 36) + 36 * i;
sliderGroup[i].setAttribute("transform", `translate(${translateX}, ${this.getReporterHeight()})`); sliderGroup[i].setAttribute("transform", `translate(${translateX}, ${this.getReporterHeight()})`);
//console.log(`sliderGroup[${i}]:`);
console.log(`sliderGroup[${i}]:`); //console.log(sliderGroup[i]);
console.log(sliderGroup[i]);
this.rect[i] = pxsim.svg.child(sliderGroup[i], "rect", { this.rect[i] = pxsim.svg.child(sliderGroup[i], "rect", {
"width": this.getSliderWidth(), "width": this.getSliderWidth(),
"height": this.getSliderHeight(), "height": this.getSliderHeight(),
"style": `fill: url(#${gc})` "style": `fill: url(#${gc + "-" + i})`
} }
); );
//console.log(`this.rect[${i}]:`);
console.log(`this.rect[${i}]:`); //console.log(this.rect[i]);
console.log(this.rect[i]);
} }
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
touchEvents(this.rect[i], ev => { touchEvents(this.rect[i], ev => {
if (captured[i] && (ev as MouseEvent).clientY) { if (this.captured && (ev as MouseEvent).clientY) {
ev.preventDefault(); ev.preventDefault();
this.updateColorLevel(pt, parent, ev as MouseEvent); this.updateColorLevel(pt, parent, ev as MouseEvent);
} }
}, ev => { }, ev => {
captured[i] = true; this.captured = true;
if ((ev as MouseEvent).clientY) { if ((ev as MouseEvent).clientY) {
this.rect[i].setAttribute('cursor', '-webkit-grabbing'); this.rect[i].setAttribute('cursor', '-webkit-grabbing');
this.rect[i].setAttribute('class', this.rectNames[i]);
this.updateColorLevel(pt, parent, ev as MouseEvent); this.updateColorLevel(pt, parent, ev as MouseEvent);
} }
}, () => { }, () => {
captured[i] = false; this.captured = false;
this.classVal = '';
this.rect[i].setAttribute('cursor', '-webkit-grab'); this.rect[i].setAttribute('cursor', '-webkit-grab');
}); });
} }