-
-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #71 from AttAditya/speed-indicator
Speedometer
- Loading branch information
Showing
6 changed files
with
263 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| class BaseInstrument { | ||
| constructor(canvasId) { | ||
| // Setting up canvas and its dimensions | ||
| /** @type {HTMLCanvasElement} */ | ||
| this.canvas = document.getElementById(canvasId); | ||
| this.rect = this.canvas.getBoundingClientRect(); | ||
| this.width = this.canvas.width = this.rect.width; | ||
| this.height = this.canvas.height = this.rect.height; | ||
| this.ctx = this.canvas.getContext("2d"); | ||
|
|
||
| // Defining parts with their colors and coordinates for rendering | ||
| this.parts = {}; | ||
|
|
||
| // Offsets for the instruments | ||
| this.shiftX = 0; | ||
| this.shiftY = 0; | ||
| } | ||
|
|
||
| // Helper function to draw a rectangle with scaling | ||
| drawRect(x, y, width, height, color) { | ||
| this.ctx.translate(this.width / 2 + this.shiftX, this.height + this.shiftY); | ||
| this.ctx.scale(0.5, 0.5); | ||
| this.ctx.fillStyle = color; | ||
| this.ctx.fillRect(x, y, width, height); | ||
| this.ctx.scale(2, 2); | ||
| this.ctx.translate(-(this.width / 2 + this.shiftX), -(this.height + this.shiftY)); | ||
| } | ||
|
|
||
| drawInstrument() { | ||
| // Adjust the canvas so that element comes in center and bottom | ||
| this.shiftY = 0; | ||
|
|
||
| for (const partName in this.parts) { | ||
| const part = this.parts[partName]; | ||
| for (const coord of part.coords) { | ||
| let [y1, y2] = [coord[1], coord[3]]; | ||
| this.shiftY = -Math.max(-this.shiftY, y1, y2); | ||
| } | ||
| } | ||
|
|
||
| // Iterating over each plane part to draw it | ||
| for (const partName in this.parts) { | ||
| const part = this.parts[partName]; | ||
| for (const coord of part.coords) { | ||
| let [x1, y1, x2, y2] = coord; | ||
|
|
||
| let x = Math.min(x1, x2); | ||
| let y = Math.min(y1, y2); | ||
| let w = Math.abs(x2 - x1); | ||
| let h = Math.abs(y2 - y1); | ||
|
|
||
| this.drawRect(x, y, w, h, part.color); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // Main draw function to render the plane | ||
| draw() { | ||
| // Clearing the canvas before drawing | ||
| this.ctx.clearRect(0, 0, this.width, this.height); | ||
|
|
||
| // this.ctx.translate(this.width / 2, this.height / 2); | ||
| // this.ctx.rotate(this.angle); | ||
| // this.ctx.translate(-this.width / 2, -this.height / 2); | ||
| this.drawInstrument(); | ||
| this.ctx.resetTransform(); | ||
| } | ||
|
|
||
| // Function to change the color of a plane part | ||
| setColor(partName, newColor) { | ||
| if (this.parts[partName]) { | ||
| this.parts[partName].color = newColor; | ||
| this.draw(); | ||
| } | ||
| } | ||
|
|
||
| resetDefaults() { | ||
| document.getElementById("outer").value = this.parts["outer"].color = '#770619'; | ||
| document.getElementById("innerMain").value = this.parts["innerMain"].color = '#ac322e'; | ||
| document.getElementById("innerHighlight").value = this.parts["innerHighlight"].color = '#d85665'; | ||
| document.getElementById("innerDarkHighlight").value = this.parts["innerDarkHighlight"].color = '#8c0308'; | ||
| document.getElementById("aroundWindshield").value = this.parts["aroundWindshield"].color = '#570101'; | ||
| document.getElementById("windshield").value = this.parts["windshield"].color = '#0ba0d2'; | ||
| document.getElementById("propeller").value = this.parts["propeller"].color = '#333333'; | ||
| document.getElementById("propellerBlades").value = this.parts["propellerBlades"].color = '#b3b3b3'; | ||
| this.draw(); | ||
| } | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| class Speedometer extends BaseInstrument { | ||
| constructor(canvasId) { | ||
| super(canvasId); | ||
|
|
||
| this.parts = { | ||
| outerRing: { | ||
| color: '#333333', | ||
| coords: [ | ||
| [-1 * -40, -1 * -80, -1 * 40, -1 * 80], | ||
| [-1 * -100, -1 * -60, -1 * 100, -1 * 40], | ||
| [-1 * -60, -1 * -100, -1 * 60, -1 * 80], | ||
| [-1 * -80, -1 * -80, -1 * 80, -1 * 60], | ||
| ] | ||
| }, | ||
| innerRing: { | ||
| color: '#666666', | ||
| coords: [ | ||
| [-1 * -30, -1 * -70, -1 * 30, -1 * 70], | ||
| [-1 * -90, -1 * -50, -1 * 90, -1 * 30], | ||
| [-1 * -50, -1 * -90, -1 * 50, -1 * 70], | ||
| [-1 * -70, -1 * -70, -1 * 70, -1 * 50], | ||
| ] | ||
| }, | ||
| rangeIndicator1: { | ||
| color: '#00ff00', | ||
| coords: [ | ||
| [-70, -15, -50, 5] | ||
| ] | ||
| }, | ||
| rangeIndicator2: { | ||
| color: '#AAff00', | ||
| coords: [ | ||
| [-25, -40, -45, -20] | ||
| ] | ||
| }, | ||
| rangeIndicator3: { | ||
| color: '#ffff00', | ||
| coords: [ | ||
| [-10, -50, 10, -30] | ||
| ] | ||
| }, | ||
| rangeIndicator4: { | ||
| color: '#ffaa00', | ||
| coords: [ | ||
| [25, -40, 45, -20] | ||
| ] | ||
| }, | ||
| rangeIndicator5: { | ||
| color: '#ff0000', | ||
| coords: [ | ||
| [50, -15, 70, 5] | ||
| ] | ||
| }, | ||
| needle: { | ||
| color: '#ffffff', | ||
| coords: [] | ||
| }, | ||
| centerCircle: { | ||
| color: '#333333', | ||
| coords: [ | ||
| [-10, 20, 10, 40] | ||
| ] | ||
| } | ||
| }; | ||
|
|
||
| this.needleState = 0; | ||
| this.needleCoords = { | ||
| 0: [ | ||
| [-70, -5, -50, 5], | ||
| [-50, 5, -30, 15], | ||
| [-30, 15, -10, 25], | ||
| [-10, 25, 10, 35], | ||
| [10, 35, 20, 45] | ||
| ], | ||
| 25: [ | ||
| [-35, -50, -45, -40], | ||
| [-35, -20, -25, -40], | ||
| [-15, -20, -25, 0], | ||
| [-5, 0, -15, 20], | ||
| [-5, 20, 5, 30], | ||
| [5, 30, 15, 50] | ||
| ], | ||
| 50: [ | ||
| [-5, -50, 5, 50] | ||
| ], | ||
| 75: [ | ||
| [-1 * -35, -50, -1 * -45, -40], | ||
| [-1 * -35, -20, -1 * -25, -40], | ||
| [-1 * -15, -20, -1 * -25, 0], | ||
| [-1 * -5, 0, -1 * -15, 20], | ||
| [-1 * -5, 20, -1 * 5, 30], | ||
| [-1 * 5, 30, -1 * 15, 50] | ||
| ], | ||
| 100: [ | ||
| [-1 * -70, -5, -1 * -50, 5], | ||
| [-1 * -50, 5, -1 * -30, 15], | ||
| [-1 * -30, 15, -1 * -10, 25], | ||
| [-1 * -10, 25, -1 * 10, 35], | ||
| [-1 * 10, 35, -1 * 20, 45] | ||
| ], | ||
| } | ||
|
|
||
| this.parts.needle.coords = this.needleCoords[this.needleState]; | ||
|
|
||
| this.draw(); | ||
| } | ||
|
|
||
| draw() { | ||
| super.drawInstrument(); | ||
| } | ||
| } | ||
|
|
||
| const speedometer = new Speedometer("speedometerCanvas"); | ||
| speedometer.draw(); | ||
|
|
||
| function updateSpeedometerNeedle(needleAnglePercent) { | ||
| needleAnglePercent = Math.min(needleAnglePercent, 100); | ||
| needleAnglePercent = Math.max(needleAnglePercent, 0); | ||
|
|
||
| let stateCount = Object.keys(speedometer.needleCoords).length - 1; | ||
| let needleState = stateCount * (needleAnglePercent / 100); | ||
| needleState = Math.floor(needleState) * (100 / stateCount); | ||
|
|
||
| speedometer.needleState = needleState; | ||
| let needleCoords = speedometer.needleCoords[needleState]; | ||
| speedometer.parts.needle.coords = needleCoords; | ||
|
|
||
| speedometer.draw(); | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters