0

My question is different from the question referred to by Jon P in this question question pointed to by Jon P and flagged above as being a question that has already been asked. That question was to display an entire gradient of temperatures. This question is to attach a single hue to a single temperature.

I need to display a single numeric temperature value in a color that maps the temperature to a certain hue in a range of hues on an hsl wheel. I need upper temperatures to show as very red (330 on the hsl wheel) and lower temperatures as very blue (270 on the hsl wheel).

After a bit of work at the suggest of Scott Sauyet in comment below, I solved my problem and it is posted below.

Bobby
  • 137
  • 11
  • So write some code, and SO will help if you have problems with it.... – Scott Sauyet Mar 25 '18 at 23:28
  • Jon P, I hope I provided a satisfactory answer to your duplicate question comment. That other question solves the problem of showing a gradient. This question is not addressed on that page. – Bobby Mar 26 '18 at 00:09
  • Nothing wrong with a self-answered the question, I've done it myself. What is tricky is getting the balance right so it looks like you've done some research (which you've obviously done) in the question. It's worth mentioning in the question itself the research you've done and that you're self-answering. Your edits are a step in the right direction. There are so many bad questions without code that a good one without code is often tarred with the same brush. When referencing an existing answer/question, point out the difference (again you've addressed this). – Jon P Mar 26 '18 at 01:05
  • The best way to bring attention to a user is to ping them in comments, use @UserName. This would have been a better way to alert me that I've erroneously flagged a dupe. I suggest a bit more of an edit to tidy up your question. – Jon P Mar 26 '18 at 01:10
  • Ah, ok, thanks @JonP. I did not know about pinging. – Bobby Mar 26 '18 at 03:10
  • @scottsauyet, I wrote the code and posted it below. – Bobby Mar 26 '18 at 03:12
  • One last thing.... nothing wrong with accepting your own answer either. You get no rep for it, but it "completes the circle". – Jon P Mar 26 '18 at 03:34
  • @Bobby: I'm glad you found an answer that works for you. It's often the case that when trying to reduce a problem to a minimal example, or when trying some solution on your own, the answer will pop out at you. – Scott Sauyet Mar 26 '18 at 13:10

1 Answers1

2

Based on an answer by Alnitak, in this post question 16399677 to show a temperature gradient, I developed a function to map a single temperature to a particular hue in a user definable range on an hsl color wheel. enter image description here

html
<canvas width="300" height="40" id="c"> </canvas>

javascript
var c = document.getElementById('c');
var ctx = c.getContext('2d');
temp = 70; // at 70, getHue() returns a purple around the 300deg mark
var hue = getHue(temp);
ctx.fillStyle = 'hsl(' + [hue, '100%', '50%'] + ')';
ctx.fillRect(0, 0, 40, 40);

function getHue(nowTemp) {
  // following hsl wheel counterclockwise from 0
  // to go clockwise, make maxHsl and minHsl negative 
  // nowTemp = 70;
  var maxHsl = 380; // maxHsl maps to max temp (here: 20deg past 360)
  var minHsl = 170; //  minhsl maps to min temp counter clockwise
  var rngHsl = maxHsl - minHsl; // = 210

  var maxTemp = 115;
  var minTemp = -10;
  var rngTemp = maxTemp - minTemp; // 125
  var degCnt = maxTemp - nowTemp; // 0
  var hslsDeg = rngHsl / rngTemp;  //210 / 125 = 1.68 Hsl-degs to Temp-degs
  var returnHue = (360 - ((degCnt * hslsDeg) - (maxHsl - 360))); 
  return returnHue;  
}
Bobby
  • 137
  • 11