Colorize gauge according to value.

softyde commented 5 years ago

Haven't found a nicer way to convert numbers to 2-digit hexadecimal, but I don't find the result too bad. ;)

tkem commented 5 years ago

I don't know... Frankly, I like the color gradient better.

tkem commented 5 years ago

So, what's the purpose of this PR? What issues does it try to resolve? Am I missing something here?

softyde commented 5 years ago

It's just a usability improvement. In the previous version only the length of the bar shows the current fuel level. In this version also the color shows the status. (green = full, red = empty, yelllow = something between).

softyde commented 5 years ago

Ok, I didn't check it, maybe it's an iOS phenomenon: the current version only shrinks the bar, but the gradient is always shown completely (regardless of fuel level)

@Edit: I looked at the playstore pictures again: in iOS the color gradient is always scaled to the length, so that it runs from green to red even when the tank is almost empty. I thought it should be like this - probably you can fix it in CSS as well.

tkem commented 5 years ago

OK, just to make sure: The gauge should be displayed like this, i.e. with 50% fuel, the right end of the displayed bar should be in the yellow/light green area. With ca. 20%, it should be all red/orange:

https://lh3.googleusercontent.com/_btBg3RELn1lOG-I0D1N13-iGb5X8aONFfA6XGjPnChnQ4dLEoHElpRk81u5zP1quhQ=w1853-h978

From your iOS App Store pics, this looked okay on first sight. Do you have more screenshots to better show the effect?

tkem commented 5 years ago

Due to workload and some private issues, I won't be able to spend much time on this in the next couple of weeks. But any screenshots to help me understand this better would still be welcome! Nice "Werbeeinschaltung" on softyroyal.de, by the way ;-)

tkem commented 5 years ago

@softyde: I managed to put together a little test case. The following HTML page

<html>
<style>
  body{
    display: flex;
    flex-direction: column;
  }
  div.wrapper {
    width: 4em;
    box-sizing: border-box;
    flex-grow: 0;
    flex-shrink: 1;
  }
  div.gauge {
    box-sizing: border-box;
  }
  div.gauge span {
    background-clip: content-box;
    background-origin: padding-box;
    background-image: linear-gradient(to right, red, #ee0 25%, green 50%, darkGreen);
    box-sizing: border-box;
    display: inline-block;
    min-height: 0.75em;
    width: 100%;
  }
</style>
  <div class="wrapper">
    <div class="gauge">
      <span style="padding-right: 90%;">10%</span>
    </div>
  </div>
  <div class="wrapper">
    <div class="gauge">
      <span style="padding-right: 75%;">25%</span>
    </div>
  </div>
  <div class="wrapper">
    <div class="gauge">
      <span style="padding-right: 50%">50%</span>
    </div>
  </div>
  <div class="wrapper">
    <div class="gauge">
      <span style="padding-right: 25%;">75%</span>
    </div>
  </div>
  <div class="wrapper">
    <div class="gauge">
      <span style="padding-right: 0%">100%</span>
    </div>
  </div>
</html>

looks somewhat like this on Firefox and Chromium (Linux):

Maybe you can check with iOS/macOS/Safari and post some screenshots here?

tkem commented 5 years ago

Or just use http://test.kemmer.co.at/test.html

tkem / openlap

Colorize gauge according to value. #103