kleur veranderen in dit script...

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Eric T

Eric T

29/09/2014 00:14:45
Quote Anchor link
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.
Gewijzigd op 29/09/2014 00:15:09 door Eric T
 
PHP hulp

PHP hulp

27/11/2024 04:17:18
 
Frank Nietbelangrijk

Frank Nietbelangrijk

29/09/2014 02:52:55
Quote Anchor link
Ik denk dat dit je wel gaat helpen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?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>
Gewijzigd op 29/09/2014 03:07:32 door Frank Nietbelangrijk
 
Eric T

Eric T

29/09/2014 08:13:01
Quote Anchor link
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

Frank Nietbelangrijk

29/09/2014 11:07:22
Quote Anchor link
Ik heb hem nog even veranderd zodat je rgb waardes krijgt ipv hexadecimale waardes.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?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

Eric T

29/09/2014 13:48:30
Quote Anchor link
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

Frank Nietbelangrijk

29/09/2014 15:03:17
Quote Anchor link
Behalve de hoogte zal hier ook de nieuwe kleur ingevoegd moeten worden lijkt mij.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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

Eric T

29/09/2014 17:03:25
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<?php
//html code hieromheen
    [code]<?php
    for($i=0;$i<=125;$i++){
        echo "<div id='siteID".$i."' style='float:left;'> </div>";
    }


?>



[size=xsmall][i]Toevoeging op 29/09/2014 17:06:18:[/i][/size]

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>
Gewijzigd op 29/09/2014 17:08:51 door Eric T
 
Frank Nietbelangrijk

Frank Nietbelangrijk

29/09/2014 19:24:46
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
    newCSS[ "background-color" ] = "rgba(255,0,0,0.6)";

zet maar net onder deze regel:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
    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
Gewijzigd op 29/09/2014 19:28:47 door Frank Nietbelangrijk
 
Eric T

Eric T

29/09/2014 21:15:03
Quote Anchor link
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!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.