[PHP] Accentkleuren variëren met tijdstip

[Verwijderd]

Geen scriptaanvraag, maar misschien even samen redeneren. Ik ben op zoek naar een goede modus operandi.

Stel, ik maak een erg minimale (typografische) website. Om het ding van een gimmick te voorzien, wil ik dat de accentkleur van bepaalde items 's middags geel is, 's avonds oranje, nog later donkerblauw en 's nachts zwart bijvoorbeeld.

Ik weet dat je met PHP relatief makkelijk delen uit een string (de CSS-code die letterkleur, -grootte en -plaats bepaalt) gemakkelijk kan veranderen. Dus als ik in die code op zoek ga naar "[KLEUR]" en die vervang door de kleurtjes die even voordien worden gedefinieerd, is het in orde. Must is dan wel dat ik niet met een extern CSS-bestand werk, of ben ik hier verkeerd?

Nu weet ik ook dat ik met switch(); kan onderscheiden welke kleur bij welk uur van de dag hoort. Het lijkt me echter leuker om het uur en de minuut op te roepen en die als een soort van multiplicator aan te wenden. Dus als het 16 uur is, dan doe ik 16 keer een kleurwaarde, of iets dergelijks. Het ding is, ik zou met erg subtiele schakeringen willen werken - kleuren zouden per minuut moeten veranderen. Volgens mij moet ik dan een viertal kleuren vastleggen ('s morgens rood (ochtendzon?), 's middags geel, 's avonds blauw en 's nachts zwart) en daartussen zachte overgangen of gradients berekenen - afhankelijk van het precieze uur en de precieze minuut.

Ik denk even hardop, omdat het idee zo niet alleen wat meer vlees krijgt, ik hoop dat het zo ook duidelijker wordt.

De concrete vraag is dan: hoe zouden jullie zoiets aanpakken? Nog eens: ik vraag niet om code (zelfs geen pseudocode, maar als dat je redenering duidelijker maakt... )...

[ Voor 3% gewijzigd door Verwijderd op 24-12-2007 22:41 ]

[SchizoDuckie]

Ik zou dit niet in PHP doen, maar dit gewoon met wat javascript aan de clientside regelen, waar het imo hoort. Je wilt toch geen ('dure') CPU cycles van je webserver verspillen als het binnen een paar regels javascript ook kan?

[AaroN]

Nou als je het 4 kleuren uit wilt smeren over 24 uur met als stapgrootte 1 minuut, dan heb je dus 24 * 60 = 1440 kleurtinten nodig.

Je zult moeten vaststellen hoe je die kleuren wilt gaan samenstellen uit Rood, Groen en Blauw. Deze stel je dus als volgt samen rgb([0-255],[0-255],[0-255]). Nu moet je dus de 4 kleuren vastzetten op 4 mijlpunten bijvoorbeeld:

0:00 uur zwart
6:00 uur rood
12:00 uur geel
18:00 uur blauw

Wat je dus doet is die kleuren vastzetten op die punten en dan de tussenliggende kleuren berekenen als volgt:

6:00 uur --> rgb(255,0,0) == rood
12:00 uur --> rgb(255,255,0) == geel

tussen deze twee kleuren heb je 6 * 60 minuten = 360 minuten. Je moet dus in 360 stappen van 0 naar 255 lopen. Dat zou ik als volgt doen:
255 / 360 is het kleurverschil per stap. Dus als je dan het tijdstip van dat moment, bijvoorbeeld 8 uur 45 neemt,dan krijg je 6 uur --> rgb(255,0,0) + 2 uur en 45 minuten = 165 minuten.
Dat levert dan rgb(255, 0 + 165 * 255 / 360, 0) op als kleur.

Als je dan zo doorgaat voor elke van de 4 perioden heb je jouw probleem opgelost op de manier die je schetste.

[Rekening houdend met de post hieboven]
Je kunt dit algoritme ook in javascript zetten natuurlijk of in php of wat je maar wilt. Het punt van Schizoduckie is wel een belangrijke.

[ Voor 7% gewijzigd door AaroN op 24-12-2007 23:27 . Reden: nieuwe post in thread ]

[crisp]

Verwijderd schreef op maandag 24 december 2007 @ 22:40:
[...] Must is dan wel dat ik niet met een extern CSS-bestand werk, of ben ik hier verkeerd?

Ik zou enkel het dynamische gedeelte van je CSS inline in je pagina's zetten en de rest gewoon extern (cacheing voordeel):

PHP:

<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
#foo, #bar, #doeda {
    color: <?php echo $color; ?>;
}
</style>

[xtra]

Verwijderd schreef op maandag 24 december 2007 @ 22:40:
Must is dan wel dat ik niet met een extern CSS-bestand werk, of ben ik hier verkeerd?

Je kunt je css-bestand ook genereren met php. Content-type naar text/css zetten en het moet goed gaan. En anders kun je je html-pagina's ook nog naar een ander css-bestand per tijdstip laten verwijzen.
Zo heb je je kleuren toch nog in een apart css-bestand en dus waar het hoort

[crisp]

xtra schreef op maandag 24 december 2007 @ 23:43:
[...]

Je kunt je css-bestand ook genereren met php. Content-type naar text/css zetten en het moet goed gaan.

Dan kan je je CSS feitelijk niet laten cachen door de client.

En anders kun je je html-pagina's ook nog naar een ander css-bestand per tijdstip laten verwijzen.

Ook dan maak je niet optimaal gebruik van de client cache.

Zo heb je je kleuren toch nog in een apart css-bestand en dus waar het hoort

Je zou kunnen werken met 2 CSS files; eentje static en eentje dynamisch, maar dat is wel een extra HTTP request (die elke view gedaan moet worden).
En waarom zou CSS altijd extern moeten zijn? <style> bestaat toch niet voor niets?

[xtra]

crisp schreef op maandag 24 december 2007 @ 23:50:
[...]

Dan kan je je CSS feitelijk niet laten cachen door de client.

Met een cache instelling tot een bepaald tijdstip kom je nog een heel eind volgens mij.

Ook dan maak je niet optimaal gebruik van de client cache.

Hier kun je de css (4x) cachen en de php iedere keer laten genereren. Het laatste gebeurt in de meeste gevallen al wel. Of je de eerste of de tweede (of een andere) manier kiest is een keuze die eventueel ook nog afhankelijk is van het aantal pagina's dat je hebt.

Je zou kunnen werken met 2 CSS files; eentje static en eentje dynamisch, maar dat is wel een extra HTTP request (die elke view gedaan moet worden).

Zo zou ik het doen iig. Het voordeel van 2 requests is dat het afhankelijk van de browser(instelling) sneller kan worden geladen omdat je 2 requests tegelijk kunt doen. Met de juiste cache-instellingen ben je helemaal efficiënt bezig.

En waarom zou CSS altijd extern moeten zijn? <style> bestaat toch niet voor niets?

<frameset> ook niet ;-)

De belangrijkste reden lijkt mij het kunnen aanpassen van de layout zonder de HTML aan te hoeven passen. Door de kleuren in HTML op te nemen kun je geen hoog-contrast versie meer maken met dezelfde HTML als bron, om maar eens een voorbeeld te noemen. Als je tig pagina's met dezelfde stijl hebt kun je ook nog dataverkeer besparen (door caching.) Uiteraard is dit (zeker met PHP etc.) makkelijk anders op te lossen maar het gaat om het idee.

[crisp]

xtra schreef op dinsdag 25 december 2007 @ 00:22:
[...]

Zo zou ik het doen iig. Het voordeel van 2 requests is dat het afhankelijk van de browser(instelling) sneller kan worden geladen omdat je 2 requests tegelijk kunt doen. Met de juiste cache-instellingen ben je helemaal efficiënt bezig.

Meestal moeten er wel meer externe resources worden opgevraagd voor het weergeven van een pagina hoor
Het verminderen van het aantal benodigde requests kan toch een behoorlijk positieve impact hebben. Vooral CSS en javascript moeten opgevraagd en geparsed zijn alvorens een client de pagina kan laten zien.

[...]

<frameset> ook niet ;-)

appels en peren

De belangrijkste reden lijkt mij het kunnen aanpassen van de layout zonder de HTML aan te hoeven passen. Door de kleuren in HTML op te nemen kun je geen hoog-contrast versie meer maken met dezelfde HTML als bron, om maar eens een voorbeeld te noemen. Als je tig pagina's met dezelfde stijl hebt kun je ook nog dataverkeer besparen (door caching.) Uiteraard is dit (zeker met PHP etc.) makkelijk anders op te lossen maar het gaat om het idee.

Als je allemaal losse HTML files zou hebben dan was dit een argument, maar meestal als je al met een serverside generator werkt dan maakt het geen bal uit of je nu een <link> in al je pagina's laat genereren of een stukje <style>.

Als dataverkeer een issue is (en een grotere dan je clientside performance) dan zijn er vast wel betere dingen te bedenken waarop je kan besparen. De cacheing-mogelijkheden zijn ook maar beperkt (aangezien de style toch meerdere malen per dag wijzigt), en bedenk ook dat het meerendeel van je bezoekers toch met een 'stale' of een lege cache binnenkomen...

[xtra]

crisp schreef op dinsdag 25 december 2007 @ 00:37:
[...]

Meestal moeten er wel meer externe resources worden opgevraagd voor het weergeven van een pagina hoor
Het verminderen van het aantal benodigde requests kan toch een behoorlijk positieve impact hebben. Vooral CSS en javascript moeten opgevraagd en geparsed zijn alvorens een client de pagina kan laten zien.

[...]

appels en peren


[...]

Als je allemaal losse HTML files zou hebben dan was dit een argument, maar meestal als je al met een serverside generator werkt dan maakt het geen bal uit of je nu een <link> in al je pagina's laat genereren of een stukje <style>.

Als dataverkeer een issue is (en een grotere dan je clientside performance) dan zijn er vast wel betere dingen te bedenken waarop je kan besparen. De cacheing-mogelijkheden zijn ook maar beperkt (aangezien de style toch meerdere malen per dag wijzigt), en bedenk ook dat het meerendeel van je bezoekers toch met een 'stale' of een lege cache binnenkomen...

Het voornaamste lijkt me inderdaad dat veel andere maatregelen veel meer effect zullen hebben dan een paar regels tekst meer of minder en een request meer of minder. De voors en tegens lijken mij in ieder geval niet meer algemeen toepasbaar op een willekeurige website en zullen bij veel websites niet echt een grote (merkbare) rol spelen.

[MacWebber]

Als je de kleuren per dagdeel toch vantevoren al weet zou ik maar gewoon simpel met vaste CSS bestanden werken en vanuit PHP vertellen dat 'ie bv. 'avond.css' of 'nacht.css' moet pakken. Simpeler en makkelijker kwa caching.

[Verwijderd]

Erg bedankt voor jullie constructieve reacties.

Ik onderschrijf de keuze voor JavaScript, ook door de redenen die jullie aanhalen. M'n voorkeur gaat toch naar PHP uit, omdat server load niet echt één van m'n kopzorgen is (het is een eenvoudig, persoonlijk projectje). Ook niet iedereen heeft JavaScript ingeschakeld, maar dat is meer een drogreden

Ondertussen heb ik niet stilgezeten, en een beetje ruwe code geschreven. Ze is op geen enkele manier geoptimaliseerd, dus reken me daar niet op af. Suggesties zijn natuurlijk meer dan welkom. Het ding doet al iets met kleuren (wat goed is), maar het reageert erg onnozel (wat niet zo goed is). Ik ben niet zo'n held in wiskunde, en ik denk dat m'n probleem ligt bij het schrijven van het kleuralgoritme zelf. Ik hang even de code erbij.

PHP:

<?php
    $mijlpaal = array();
    $mijlpaal['snachts']['kleur'] = "000000"; // zwart
    $mijlpaal['snachts']['start'] = 0;
    $mijlpaal['snachts']['stop'] = 6;
    $mijlpaal['smorgens']['kleur'] = "FF0000"; // rood
    $mijlpaal['smorgens']['start'] = 6;
    $mijlpaal['smorgens']['stop'] = 12;
    $mijlpaal['smiddags']['kleur'] = "FFFF00"; // geel
    $mijlpaal['smiddags']['start'] = 12;
    $mijlpaal['smiddags']['stop'] = 18;
    $mijlpaal['savonds']['kleur'] = "0000FF"; // blauw
    $mijlpaal['savonds']['start'] = 18;
    $mijlpaal['savonds']['stop'] = 0;
    //$nu_uur = date("H");
    //$nu_minuut = date("i");
    $nu_uur = 3;
    $nu_minuut = 31;
    if(isset($_GET['uur']) && is_numeric($_GET['uur'])){
        $nu_uur = $_GET['uur'];
    }
    if(isset($_GET['minuut']) && is_numeric($_GET['minuut'])){
        $nu_minuut = $_GET['minuut'];
    }
    if($nu_uur > $mijlpaal['snachts']['start'] && $nu_uur < $mijlpaal['snachts']['stop']){ // 's nachts
        $kleur['start'] = $mijlpaal['snachts']['kleur'];
        $kleur['stop'] = $mijlpaal['smorgens']['kleur'];
        $uur['start'] = $mijlpaal['snachts']['start'];
    }
    elseif($nu_uur > $mijlpaal['smorgens']['start'] && $nu_uur < $mijlpaal['smorgens']['stop']){ // 's morgens
        $kleur['start'] = $mijlpaal['smorgens']['kleur'];
        $kleur['stop'] = $mijlpaal['smiddags']['kleur'];
        $uur['start'] = $mijlpaal['smorgens']['start'];
    }
    elseif($nu_uur > $mijlpaal['smiddags']['start'] && $nu_uur < $mijlpaal['smiddags']['stop']){ // 's middags
        $kleur['start'] = $mijlpaal['smiddags']['kleur'];
        $kleur['stop'] = $mijlpaal['savonds']['kleur'];
        $uur['start'] = $mijlpaal['smiddags']['start'];
    }
    else{ // 's avonds
        $kleur['start'] = $mijlpaal['savonds']['kleur'];
        $kleur['stop'] = $mijlpaal['snachts']['kleur'];
        $uur['start'] = $mijlpaal['savonds']['start'];
    }
    $verschil['rood'] = hexdec(substr($kleur['stop'], 0, 2)) - hexdec(substr($kleur['start'], 0, 2));
    $verschil['groen'] = hexdec(substr($kleur['stop'], 2, 2)) - hexdec(substr($kleur['start'], 2, 2));
    $verschil['blauw'] = hexdec(substr($kleur['stop'], 4, 2)) - hexdec(substr($kleur['start'], 4, 2));
    $verschil['uur'] = $nu_uur - $uur['start'];
    $verschil['minuut'] = $nu_minuut; // startminuut is steeds 0
    $totaal_minuten = ($verschil['uur'] * 60) + $verschil['minuut'];
    print_r($verschil);
    $nieuw['rood'] = hexdec(substr($kleur['start'], 0, 2)) + (floor($verschil['rood'] * $totaal_minuten / 360));
    $nieuw['groen'] = hexdec(substr($kleur['start'], 2, 2)) + (floor($verschil['groen'] * $totaal_minuten / 360));
    $nieuw['blauw'] = hexdec(substr($kleur['start'], 4, 2)) + (floor($verschil['blauw'] * $totaal_minuten / 360));
    print_r($nieuw);
    $hex['rood'] = dechex($nieuw['rood']);
    $hex['groen'] = dechex($nieuw['groen']);
    $hex['blauw'] = dechex($nieuw['blauw']);
    foreach($hex as $kleur => $waarde){
        if($waarde == 0){
            $hex[$kleur] = $waarde = '00';
        }
    }
    print_r($hex);
?>
<h1 style="color: #FFFFFF; background-color: #<?php echo($hex['rood'] . $hex['groen'] . $hex['blauw']); ?>;">Dit is een teksttitel. Het uur is <?php echo($nu_uur . ":" . $nu_minuut); ?><h1>

Dat levert dit resultaat op. Zoals je ziet, heb ik het even zo gemaakt dat je via de url vlug uur en minuut kan wijzigen. Dat is natuurlijk maar even om te testen. Alvast bedankt.

[Verwijderd]

Let er wel op dat dit alleen geschikt is een 12 urige klok en dus niet voor een 24 urige die hier toch wel regelmatig gebruikt wordt

Array ( [rood] => -255 [groen] => -255 [blauw] => 255 [uur] => 14 [minuut] => 44 ) Array ( [rood] => -372 [groen] => -372 [blauw] => 626 ) Array ( [rood] => 00 [groen] => 00 [blauw] => 272 )

[ Voor 43% gewijzigd door Verwijderd op 25-12-2007 13:21 ]

[Muthas]

Toch zou ik de kleuren dan zelf met 'de hand' instellen en gewoon 4 à 5 aparte tijd-stylesheets nemen (ochtend, middag, etc.) Zo heb je de kleuren beter zelf in de hand en kan je mooie kleuren kiezen i.p.v. dat er random maar wat te voorschijn komt.

[Voutloos]

Verwijderd schreef op dinsdag 25 december 2007 @ 13:06:
maar het reageert erg onnozel (wat niet zo goed is). Ik ben niet zo'n held in wiskunde, en ik denk dat m'n probleem ligt bij het schrijven van het kleuralgoritme zelf.

Denk het dan eerst los / in pseudocode uit. Je pakt nu een kleur en telt er proportioneel de nieuwe kleur bij op. Dit kan slimmer, door ook bij de beginkleur rekening te houden met de verstreken tijd, en door het zo te doen dat je waardes tussen 00 en FF blijven.

Schets (1 kleurcomponent):
0:00 uur is 00.
6:00 uur is FF.
Dan wil je als het 2:00 is en je het lineair wil doen, 2/3 invloed van 00, en 1/3 invloed van FF. Het sommetje dat je nu nodig hebt moge wel duidelijk zijn:
^{( minuten_tot_eind * beginkleur + minuten_vanaf_begin * eindkleur )}/₃₆₀
minuten_tot_eind + minuten_vanaf_begin is als je periodes allemaal 360 minuten zijn ook altijd 360 minuten, dus je krijgt nooit illegale waardes.

En je code kan de helft korter en codestyle kan ook wel iets beter, maar dat wou je niet horen.

[ Voor 4% gewijzigd door Voutloos op 25-12-2007 13:44 ]

[Verwijderd]

Niet horen is een beetje overdreven Ik vind het gewoon een beetje efficiënter werken om eerst wat ruwe redeneringen te doen zodat slopen niet met te veel hartpijn gepaard gaat.

Ik heb het vandaag een beetje laten rusten. Langs de ene kant wil ik graag verder doen zoals ik bezig was (dus niet te hevig van het oorspronkelijke idee afwijken), omdat ik dat nog steeds een leuk gegeven vind, maar wat Muthas zegt is ook waar. Ik merkte net al dat er foeilelijke kleuren tevoorschijn kwamen, en dat doet het ontwerp wat teniet. Misschien kan ik inderdaad dan beter met een voorgedefinieerde set kleuren werken en eventueel met eenvoudiger te manipuleren eigenschappen als opacity spelen.

Wat denken jullie?

[Tim]

Je zou kunnen proberen HSL/HSV kleurwaarde te interpoleren, ipv RGB. Dan heb je denk ik al minder last van lelijke tussenwaarde. En als je het geheel dan in javascript implementeerd kan je een mooi schuifbalkje maken zodat je het verloop makkelijk kan visualiseren.

[killercow]

Misschien heb je iets aan mijn meuk?

http://www.innerheight.com/greenery/articles.php?id=1

Ik wissel de kleur aan de hand van een url argument op een van onze sites,
De aafbeeldingen zijn verder inverted PNG's waarvan juist de achtergrond wit is, en de afbeelding zelf in verschillende gradaties transparant (alpha layers ownen).

Door dan de achtergrondkleur van de image te verwisselen kun je dus zelfs je afbeeldingen verkleuren.

Voorbeeldjes:
NSFW (maar ook niet ranzig)
normaal: www.loveart.nl
kleurtje: www.loveart.nl/?color=338020

Uiteraard kun je zelf de hex kleurtjes kiezen, de varianten worden automatisch berekend.

[? ?]

..

[ Voor 104% gewijzigd door ? ? op 25-01-2013 09:52 ]