kleur veranderen in dit script...

Door Eric T op 29-09-2014 00:14 gewijzigd op 29-09-2014 00:15

4.436 views

Ik heb een supervette code voor een progressie-/thermometer gevonden:

http://jsfiddle.net/GeekyJohn/vQ4Xn/

Heeft iemand een idee hoe ik de gevulde kleur (nu default groen) kan laten veranderen
van blauw (0-waarde) naar rood (max waarde)?

Blauw: #0000CC
Rood : #FF0000

De huidige kleur wordt hier bepaald:

.thermometer .progress {
...
background: rgba(20,100,20,0.6);
...
}

In mijn geval heb ik overigens het script aangepast zodat deze een schaal van 0 tot 100% heeft (ter info)

Ik heb zelf helemaal geen idee waar te beginnen :-(
dus een duwtje in de goede richting is meer dan welkom.
PhP is me bekend, mocht daarin een oplossing liggen nog.

Alvast dank,
M vr gr Eric

P.S. Het topic over dit script is hier te vinden:
http://community.sitepoint.com/t/code-for-a-fundraising-thermometer/21832/41
Daar is e.e.a. nét ietsje aangepast en gewijzigd, maar zo goed als niks.
Maar dat ter info.

Frank Nietbelangrijk

29-09-2014 02:52 gewijzigd op 29-09-2014 03:07

Ik denk dat dit je wel gaat helpen:


<?php

function gradient($startcol,$endcol,$graduations=10)
{
	$graduations--;
	
	$RedOrigin = hexdec(substr($startcol,0,2));
	$GrnOrigin = hexdec(substr($startcol,2,2));
	$BluOrigin = hexdec(substr($startcol,4,2));
	 
	$GradientSizeRed = (hexdec(substr($endcol,0,2))-$RedOrigin)/$graduations; //Graduation Size Red
	$GradientSizeGrn = (hexdec(substr($endcol,2,2))-$GrnOrigin)/$graduations;
	$GradientSizeBlu = (hexdec(substr($endcol,4,2))-$BluOrigin)/$graduations;
	 
	for($i = 0 ; $i <= $graduations ; $i++)
	{
		$RetVal[$i] = 
		str_pad(dechex($RedOrigin+($GradientSizeRed*$i)),2,'0',STR_PAD_LEFT) . 
		str_pad(dechex($GrnOrigin+($GradientSizeGrn*$i)),2,'0',STR_PAD_LEFT) .
		str_pad(dechex($BluOrigin+($GradientSizeBlu*$i)),2,'0',STR_PAD_LEFT);
	}
	
	return $RetVal;
}

$lowest =  '0000CC';
$highest =  'FF0000';
$i = 0;
$colors = gradient($lowest, $highest, 100);

?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.color-div {
	height:20px;
	margin-bottom:2px; 
	color:#FFF;
}
</style>
</head>

<body>
<h2>$colors is een array met de volgende kleuren:</h2>
<?php
foreach($colors as $color)
{
	echo '<div class="color-div" style="background-color:#'.$color.'">['.($i++).'] => #'.strtoupper($color).'</div>'."\n";
}
?>
</body>
</html>

Eric T

29-09-2014 08:13

Heel netjes Frank :-) Helemaal blij :-)
Ik ga em in de loop van de dag even proberen als ik even tijd heb.
Top!

gr Eric

Frank Nietbelangrijk

29-09-2014 11:07

Ik heb hem nog even veranderd zodat je rgb waardes krijgt ipv hexadecimale waardes.


<?php

function gradient($startcol,$endcol,$graduations=10)
{
	$graduations--;
	
	$RedOrigin = hexdec(substr($startcol,0,2));
	$GrnOrigin = hexdec(substr($startcol,2,2));
	$BluOrigin = hexdec(substr($startcol,4,2));
	 
	$GradientSizeRed = (hexdec(substr($endcol,0,2))-$RedOrigin)/$graduations;
	$GradientSizeGrn = (hexdec(substr($endcol,2,2))-$GrnOrigin)/$graduations;
	$GradientSizeBlu = (hexdec(substr($endcol,4,2))-$BluOrigin)/$graduations;
	 
	for($i = 0 ; $i <= $graduations ; $i++)
	{
		$RetVal[$i] = array(
			round($RedOrigin+($GradientSizeRed*$i)),
			round($GrnOrigin+($GradientSizeGrn*$i)),
			round($BluOrigin+($GradientSizeBlu*$i))
		);
	}
	
	return $RetVal;
}

$lowest =  '0000CC';
$highest =  'FF0000';
$i = 0;
$colors = gradient($lowest, $highest, 100);

?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.color-div {
	height:20px;
	margin-bottom:2px; 
	color:#FFF;
}
</style>
</head>

<body>
<h2>$colors is een array met de volgende kleuren:</h2>
<?php
foreach($colors as $color)
{
	echo '<div class="color-div" style="background-color:rgba('.$color[0].','.$color[1].','.$color[2].',0.6);">'.
								'['.($i++).'] => rgba('.$color[0].','.$color[1].','.$color[2].',0.6)</div>'."\n";
}
?>
</body>
</html>

Eric T

29-09-2014 13:48

Hmzzzz....
Op zich werkt het...zij het dat ik de kleur niet in de thermometer heb.
De kleur wordt in principe gevuld binnen het javascript (met connectie naar css), waardoor je de meter langzaam ziet oplopen. Dus mijn vermoeden is dat dat oplopen van kleur a naar kleur b dan ook binnen het javascript moet gebeuren
Ik zal daarom eens kijken of ik dit php script kan omzetten binnen het javascript...

Wordt vervolgd...

Huidg resultaat:
http://www.jointheuniverse.com/thermo/

Frank Nietbelangrijk

29-09-2014 15:03

Behalve de hoogte zal hier ook de nieuwe kleur ingevoegd moeten worden lijkt mij.


newCSS[ isHorizontal ? "width" : "height" ] = percentageAmount + "%";

Omzetten van de functie naar javascript is zeker mogelijk. Laat maar weten als je er niet uit komt.

Ik heb dit al gevonden voor het omzetten van decimaal naar hex en andersom

Convert a number to a hexadecimal string with:

hexString = yourNumber.toString(16);
and reverse the process with:

yourNumber = parseInt(hexString, 16);

Eric T

29-09-2014 17:03 gewijzigd op 29-09-2014 17:08

Wel... het oplopen binnen het script zit ingebakken in het ajax scriptje.
Om heel veel werk te voorkomen ben ik maar opnieuw begonnen met een eigen javascript gedeeltelijk op basis van wat je hierboven gaf Frank.

Zoals ik het nu heb, wordt meteen de volledige pagina geladen (html), en het javascript loopt gewoon door. Dat is perfect! Want dat was met alles via php doen helaas niet het geval.

Grappig genoeg is de gehele code ook een stuk korter geworden vooralsnog, maar uiteraard is hij nog niet af. Nog even mooi maken :-) Het begin is er echter...

http://www.jointheuniverse.com/thermo2/

Index.php:
<?php
//html code hieromheen
<?php
for($i=0;$i<=125;$i++){
echo "<div id='siteID".$i."' style='float:left;'> </div>";
}

?>

Toevoeging op 29/09/2014 17:06:18:

En het javascript:
<?php
<script>
function progressBlocks(j){

//Choose your own paramaters:
var height = 3;//in pixels
var width = 60;//in pixels
var delay = 18;//milliseconds Blauw: #0000CC Rood : #FF0000

//Other variables
var dist = j*height + "px";
var siteid = "siteID" + j;
var red=255-(2*j);
var grn=0;
var blu=(2*j);
var color = "rgb("+red+","+grn+","+blu+")";

document.getElementById(siteid).style.zIndex='3';
document.getElementById(siteid).style.background=color;
document.getElementById(siteid).style.width=width+'px';
document.getElementById(siteid).style.height=height+'px';
document.getElementById(siteid).style.marginTop=dist;
document.getElementById(siteid).style.marginLeft='-'+width+'px';

j--;
if(j==0){return;}
setTimeout (function(){progressBlocks(j)}, delay);
}

$(document).ready(function(){

progressBlocks(125);

});
</script>

Frank Nietbelangrijk

29-09-2014 19:24 gewijzigd op 29-09-2014 19:28

Top. Je hebt echter helemaal die functie niet nodig :-)

Er wordt gebruik gemaakt van jquery's .animate() functie. Deze functie regelt alles zelf. Je hoeft alleen maar de eindwaarde op te geven en te zorgen dat het element dat geanimeerd gaat worden de juiste beginwaarde heeft voordat je de animatie start.

Om kleurverloop te ondersteunen moet wel de jqueryui library worden toegevoegd.

toevoegen van jqueryui in de <head> van index.html:


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

Voeg deze regel maar eens toe:


    newCSS[ "background-color" ] = "rgba(255,0,0,0.6)";

zet maar net onder deze regel:


    newCSS[ isHorizontal ? "width" : "height" ] = percentageAmount + "%";

Toevoeging op 29/09/2014 19:30:35:

Wel zul je de eindwaarde moeten berekenen als je de thermometer meer blauw wilt als de waarde waar die stopt lager is.

Toevoeging op 29/09/2014 19:31:42:

Ook de animatie duur zou voor een lagere waarder korter kunnen. Nu loopt een lagere waarde langzamer op dan een hogere waarde

Eric T

29-09-2014 21:15

Heeee, dat is em! :-) Ziet er wel gaaf uit nu :-)
Misschien nog even naar smaak aanpassen kwa grootte e.d. en dan is ie af :-)

Heel veel dank Frank voor alle hulp!

Reageren

Inloggen om te reageren