how to change background depending on a string value

[tabasco]

Hello,
Im new here and also new to css etc. So forgive me when I ask the wrong questions…
For a Raspberry Pi sensor I would like to make a local webpage with a vertical thermometer gauge. After some investigation I found this one http://jsfiddle.net/mirceageorgescu/gBW3Y/ I like it a lot.

I’ve managed to get my own readings in there using:
rawurlencode($sensoroutput)

Now I wonder if it is possible to get the red color in the ‘tube’ up and down according to the $sensoroutput value.

I hope someone can give me some hints…

[Atelierbram]

This rawurlencode is a PHP function? Can you show the code somewhere in a demo? The example you linked to will probably not be easy to update dynamically. This will most likely need some javascript too.

[tabasco]

Indeed the rawurlencode is a PHP function.
All I’ve got is here: http://codepen.io/anon/pen/bZRdaN?editors=1010

For some reason the image is not shown there unfortunately.

I was thinking something about: “if the given value is below some amount then display some different css value”
Again sorry for my lame explanation, I’m very new at this ; )

[Atelierbram]

if the given value is below some amount then display some different css value

Such a conditional statement could be a javascript function and maybe dynamically updating a value for style.backgroundImage but … combining this with echoing out this PHP function … maybe not.

Better look into using a HTML5 range slider and nest this range slider within a SVG image.

[tabasco]

Thanks,
I’ve looked into various HTML5 range slider examples. I guess something like this: http://codepen.io/thebabydino/pen/azKqWa is what I need. Unfortunately copy/pasting the code didn’t work for me. I guess I’ll have to dig deeper…

update
I guess I’ll go for the HTML5 <meter></meter> meter element, since it has the colored bar for value and there is no need for any user input as with slider.

[Atelierbram]

Plenty examples to choose from where that one came from!
Concept is simple enough, but making this work maybe not so …

<?php $sensoroutput=10; ?> 
<input type="range" value="<?php echo $sensoroutput; ?>"/>
<?php ?>

[Author]

Posts