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

20
sim/state/color.ts
View File

@ -21,7 +21,9 @@ namespace pxsim {
export class ColorSensorNode extends UartSensorNode {
id = NodeType.ColorSensor;
//private colors: number[] = [0];
private color: number = 0;
private colors: number[] = [0, 0, 0];
constructor(port: number) {
super(port);
@ -32,8 +34,13 @@ namespace pxsim {
return DAL.DEVICE_TYPE_COLOR;
}
setColor(color: number) {
this.color = color;
setColors(colors: number[]) {
this.colors = colors;
this.setChangedState();
}
setColor(colors: number) {
this.colors = [colors];
this.setChangedState();
}
@ -41,10 +48,15 @@ namespace pxsim {
return this.color;
}
getValues() {
return this.colors;
}
setMode(mode: number) {
this.mode = mode;
if (this.mode == ColorSensorMode.RefRaw) this.color = 512;
else this.color = 50;
if (this.mode == ColorSensorMode.RefRaw) this.color = 512;
else if (this.mode == ColorSensorMode.RgbRaw) this.colors = [128, 128, 128];
else this.color = 50; // Reflection or ambiend light
this.changed = 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 {
constructor(port: number) {
@ -84,4 +142,20 @@ namespace pxsim {
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> {
private group: SVGGElement;
private colorGradient: SVGLinearGradientElement;
private colorGradient: SVGLinearGradientElement[] = [];
private reporter: SVGTextElement[] = [];
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() {
return 120;
@ -29,7 +33,7 @@ namespace pxsim.visuals {
}
private getMaxValue() {
return 1023;
return 512;
}
private mapValue(x: number, inMin: number, inMax: number, outMin: number, outMax: number) {
@ -39,48 +43,59 @@ namespace pxsim.visuals {
updateState() {
if (!this.visible) return;
const node = this.state;
const value = node.getValue();
let inverseValue = this.getMaxValue() - value;
inverseValue = this.mapValue(inverseValue, 0, 1023, 0, 100);
svg.setGradientValue(this.colorGradient, inverseValue + "%");
this.reporter[0].textContent = "R: " + `${parseFloat((value).toString()).toFixed(0)}`;
this.reporter[1].textContent = "G: " + `${parseFloat((value).toString()).toFixed(0)}`;
this.reporter[2].textContent = "B: " + `${parseFloat((value).toString()).toFixed(0)}`;
const values = node.getValues();
//console.log("values: ");
console.log(values);
let inverseValue: number[] = [];
for (let i = 0; i < 3; i++) {
inverseValue[i] = this.getMaxValue() - values[i];
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) {
//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);
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;
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.getMaxValue());
let colorsVal = this.state.getValues();
colorsVal[index] = t * this.getMaxValue();
state.setColors(colorsVal);
}
getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
this.group = svg.elt("g") as SVGGElement;
let gc = "gradient-color-" + this.getPort();
const prevColorGradient = globalDefs.querySelector(`#${gc}`) as SVGLinearGradientElement;
this.colorGradient = prevColorGradient ? prevColorGradient : svg.linearGradient(globalDefs, gc, false);
svg.setGradientValue(this.colorGradient, "50%");
svg.setGradientColors(this.colorGradient, "black", "yellow");
let prevColorGradient: SVGLinearGradientElement[] = [];
for (let i = 0; i < 3; i++) {
prevColorGradient[i] = globalDefs.querySelector(`#${gc + "-" + i}`) as SVGLinearGradientElement;
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 captured: boolean[] = [false, false, false];
let reporterGroup: SVGElement[] = [];
for (let i = 0; i < 3; i++) {
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})`);
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[0]);
//console.log(`this.reporter[${i}]:`);
//console.log(this.reporter[0]);
}
let sliderGroup: SVGElement[] = [];
@ -88,35 +103,35 @@ namespace pxsim.visuals {
sliderGroup[i] = pxsim.svg.child(this.group, "g");
const translateX = (this.getWidth() / 2 - this.getSliderWidth() / 2 - 36) + 36 * i;
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", {
"width": this.getSliderWidth(),
"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++) {
touchEvents(this.rect[i], ev => {
if (captured[i] && (ev as MouseEvent).clientY) {
if (this.captured && (ev as MouseEvent).clientY) {
ev.preventDefault();
this.updateColorLevel(pt, parent, ev as MouseEvent);
}
}, ev => {
captured[i] = true;
this.captured = true;
if ((ev as MouseEvent).clientY) {
this.rect[i].setAttribute('cursor', '-webkit-grabbing');
this.rect[i].setAttribute('class', this.rectNames[i]);
this.updateColorLevel(pt, parent, ev as MouseEvent);
}
}, () => {
captured[i] = false;
this.captured = false;
this.classVal = '';
this.rect[i].setAttribute('cursor', '-webkit-grab');
});
}