The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Back End how to change background depending on a string value

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #243336

    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 I like it a lot.

    I’ve managed to get my own readings in there using:

    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…


    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.


    Indeed the rawurlencode is a PHP function.
    All I’ve got is here:

    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 ; )


    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.


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

    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.


    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 ?>
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Back End’ is closed to new topics and replies.