xorg1990
New member
Hi, ich habe ein neues Problem aber diesmal nicht so kompliziert als das letztere xD.
Ich möchte bein meinen Analyser eine Farblegende hinzufügen, so das man erkenne kann wie laut war den ein Signal.
Das Problem besteht darin das der Helligkeit slider nicht über alle Farben fährt.
Sprich wenn der Contrast slider das Gradient voll aufzoomt (slider ganz links), muss wenn der Brigthness slider ganz rechts ist die Legende weis sein.
Das ist nicht der Fall.
Richtig wäre das wenn der Helligkeitsregler nach links bewegt wird das jede Farbe einmal komplett in die Legende Passt. Ganz rechts Weis, ganz links Schwarz zwischendrine Farbe.
Das will mir nicht gelingen
Demo-Code:
Der CrysisCore ist das erste fillRect
Da beginne ich immer bei 0. Habe schon versucht die grdWidth wider abzuziehen aber das funzt auch nicht wirklich.
Asso die Slider habe ich invertiert. die Gehen von -100 bis 0 Prozent das möchte ich so.
Vielen Dank im voraus,
xorg1990
Ich möchte bein meinen Analyser eine Farblegende hinzufügen, so das man erkenne kann wie laut war den ein Signal.
Das Problem besteht darin das der Helligkeit slider nicht über alle Farben fährt.
Sprich wenn der Contrast slider das Gradient voll aufzoomt (slider ganz links), muss wenn der Brigthness slider ganz rechts ist die Legende weis sein.
Das ist nicht der Fall.
Richtig wäre das wenn der Helligkeitsregler nach links bewegt wird das jede Farbe einmal komplett in die Legende Passt. Ganz rechts Weis, ganz links Schwarz zwischendrine Farbe.
Das will mir nicht gelingen
Demo-Code:
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>colorsclaehelper</title>
<script type="text/javascript">
var csh;
function ready(){
function colorScaleHelper(ColorScalHelper_ClassID) {
var canvas = document.getElementById(ColorScalHelper_ClassID);
this.canvas_width = canvas.width;
this.canvas_height = canvas.height;
this.canvas_ctx = canvas.getContext("2d");
this.canvas_ctx.imageSmoothingEnabled = false;
this.colors = ['#000000', '#ff0000', '#ffff00', '#ffffff'];
this.db_from = -120;
this.db_to = 0;
this.contrast = 70;
this.brightness = 40;
this.renderdBscale();
this.renderColorScale();
}
colorScaleHelper.prototype.setdB = function(db_from, db_to) {
this.db_from = db_from;
this.db_to = db_to;
};
colorScaleHelper.prototype.setColors = function(colors) {
this.colors = colors;
this.renderColorScale();
};
colorScaleHelper.prototype.setBrigthness = function(bright) {
this.brightness = bright*-1;
this.renderColorScale();
};
colorScaleHelper.prototype.setContrast = function(con) {
this.contrast = con*-1;
this.renderColorScale();
};
colorScaleHelper.prototype.renderColorScale = function() {
this.canvas_ctx.clearRect(0, 0, this.canvas_width, this.canvas_height - 25);
var xoffs = this.brightness*this.canvas_width/100;
var grdWidth = this.contrast*(this.canvas_width*this.colors.length)/100;
var firstColor = this.colors[0];
var grd = this.canvas_ctx.createLinearGradient(xoffs,0,grdWidth+xoffs,0);
for (var i = 0; i < this.colors.length; i++) {
var xcolorSpan = i*1.0/this.colors.length;
grd.addColorStop(xcolorSpan, this.colors[i]);
}
this.canvas_ctx.fillStyle = firstColor;
this.canvas_ctx.fillRect(0, 0, xoffs, this.canvas_height - 25);
this.canvas_ctx.fillStyle = grd;
this.canvas_ctx.fillRect(xoffs, 0, this.canvas_width, this.canvas_height - 25);
};
colorScaleHelper.prototype.renderdBscale = function() {
var width = this.canvas_width;
var beginn = 30;
this.canvas_ctx.clearRect(0, beginn, this.canvas_width,25);
this.canvas_ctx.fillStyle = "white";
this.canvas_ctx.fillRect(0, beginn, this.canvas_width, 25);
this.canvas_ctx.strokeStyle = "black";
this.canvas_ctx.font = "12px Calibri";
this.canvas_ctx.fillStyle = "black";
var ticks = 25;
var dBs = this.db_from - this.db_to;
var xSpan = this.canvas_width / ticks;
var steps = dBs / ticks;
if (steps < 0) steps *= -1;
var exp = Math.floor(Math.log(steps) / Math.LN10);
var stepnorm = steps / Math.pow(10, exp);
var schritt = Math.ceil(stepnorm * Math.pow(10, exp));
var Numr = this.db_from;
if (this.db_from < 0) Numr *= -1;
for (var i = 0; i < ticks; i++, Numr -= schritt) {
if (this.db_from < 0) {
var string = Math.round(-Numr) + "";
} else {
var string = Math.round(Numr) + "";
}
var x = i * xSpan;
if ((i % 2) == 0) {
this.canvas_ctx.moveTo(x, beginn);
this.canvas_ctx.lineTo(x, beginn+8);
} else {
this.canvas_ctx.moveTo(x, beginn);
this.canvas_ctx.lineTo(x, beginn+6);
}
if (i == 5) {
this.canvas_ctx.moveTo(x, beginn);
this.canvas_ctx.lineTo(x, beginn+12);
this.canvas_ctx.fillText(string, x - string.length * 4, beginn+12 + 9);
}
if (i == 14) {
this.canvas_ctx.moveTo(x, beginn);
this.canvas_ctx.lineTo(x, beginn+12);
this.canvas_ctx.fillText(string, x - string.length * 4, beginn+12 + 9);
}
if (i == 24) {
this.canvas_ctx.moveTo(x, beginn);
this.canvas_ctx.lineTo(x, beginn+12);
this.canvas_ctx.fillText(string, x - string.length * 4, beginn+12 + 9);
}
}
this.canvas_ctx.lineWidth = 1;
this.canvas_ctx.stroke();
};
csh = new colorScaleHelper("canvas");
}
</script>
</head>
<body onload="ready()">
<p><input type="range" min="-100" max="0" step="1" onchange="csh.setBrigthness(this.value)" />Brightness</p>
<p><input type="range" min="-100" max="0" step="1" onchange="csh.setContrast(this.value)" />Contrast</p>
<p><canvas id="canvas" width="150" height="55"></canvas></p>
</body>
</html>Der CrysisCore ist das erste fillRect
this.canvas_ctx.fillRect(0, 0, xoffs, this.canvas_height - 25);Da beginne ich immer bei 0. Habe schon versucht die grdWidth wider abzuziehen aber das funzt auch nicht wirklich.
Asso die Slider habe ich invertiert. die Gehen von -100 bis 0 Prozent das möchte ich so.
Vielen Dank im voraus,
xorg1990
