diff --git a/sim/dalboard.ts b/sim/dalboard.ts index a5dd3e02..8a1dcf7e 100644 --- a/sim/dalboard.ts +++ b/sim/dalboard.ts @@ -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; } diff --git a/sim/state/color.ts b/sim/state/color.ts index 9a8e43cf..e453c0b7 100644 --- a/sim/state/color.ts +++ b/sim/state/color.ts @@ -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; } diff --git a/sim/state/sensor.ts b/sim/state/sensor.ts index 7c37ffdd..23d853ea 100644 --- a/sim/state/sensor.ts +++ b/sim/state/sensor.ts @@ -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]; + } + } + } \ No newline at end of file diff --git a/sim/visuals/controls/colorRGBWheel.ts b/sim/visuals/controls/colorRGBWheel.ts index e0ea2529..badad5d6 100644 --- a/sim/visuals/controls/colorRGBWheel.ts +++ b/sim/visuals/controls/colorRGBWheel.ts @@ -2,11 +2,15 @@ namespace pxsim.visuals { export class ColorRGBWheelControl extends ControlView { 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'); }); }