3
0
Fork 0
mirror of https://github.com/nanoy42/coope synced 2024-11-05 01:16:28 +00:00

Random colors and fixes

This commit is contained in:
root 2020-03-29 23:43:36 +02:00
parent edd724cee3
commit 3cc7966bbc
3 changed files with 524 additions and 12 deletions

519
staticfiles/randomColor.js Normal file
View file

@ -0,0 +1,519 @@
// randomColor by David Merfield under the CC0 license
// https://github.com/davidmerfield/randomColor/
;(function(root, factory) {
// Support CommonJS
if (typeof exports === 'object') {
var randomColor = factory();
// Support NodeJS & Component, which allow module.exports to be a function
if (typeof module === 'object' && module && module.exports) {
exports = module.exports = randomColor;
}
// Support CommonJS 1.1.1 spec
exports.randomColor = randomColor;
// Support AMD
} else if (typeof define === 'function' && define.amd) {
define([], factory);
// Support vanilla script loading
} else {
root.randomColor = factory();
}
}(this, function() {
// Seed to get repeatable colors
var seed = null;
// Shared color dictionary
var colorDictionary = {};
// Populate the color dictionary
loadColorBounds();
// check if a range is taken
var colorRanges = [];
var randomColor = function (options) {
options = options || {};
// Check if there is a seed and ensure it's an
// integer. Otherwise, reset the seed value.
if (options.seed !== undefined && options.seed !== null && options.seed === parseInt(options.seed, 10)) {
seed = options.seed;
// A string was passed as a seed
} else if (typeof options.seed === 'string') {
seed = stringToInteger(options.seed);
// Something was passed as a seed but it wasn't an integer or string
} else if (options.seed !== undefined && options.seed !== null) {
throw new TypeError('The seed value must be an integer or string');
// No seed, reset the value outside.
} else {
seed = null;
}
var H,S,B;
// Check if we need to generate multiple colors
if (options.count !== null && options.count !== undefined) {
var totalColors = options.count,
colors = [];
// Value false at index i means the range i is not taken yet.
for (var i = 0; i < options.count; i++) {
colorRanges.push(false)
}
options.count = null;
while (totalColors > colors.length) {
// Since we're generating multiple colors,
// incremement the seed. Otherwise we'd just
// generate the same color each time...
if (seed && options.seed) options.seed += 1;
colors.push(randomColor(options));
}
options.count = totalColors;
return colors;
}
// First we pick a hue (H)
H = pickHue(options);
// Then use H to determine saturation (S)
S = pickSaturation(H, options);
// Then use S and H to determine brightness (B).
B = pickBrightness(H, S, options);
// Then we return the HSB color in the desired format
return setFormat([H,S,B], options);
};
function pickHue(options) {
if (colorRanges.length > 0) {
var hueRange = getRealHueRange(options.hue)
var hue = randomWithin(hueRange)
//Each of colorRanges.length ranges has a length equal approximatelly one step
var step = (hueRange[1] - hueRange[0]) / colorRanges.length
var j = parseInt((hue - hueRange[0]) / step)
//Check if the range j is taken
if (colorRanges[j] === true) {
j = (j + 2) % colorRanges.length
}
else {
colorRanges[j] = true
}
var min = (hueRange[0] + j * step) % 359,
max = (hueRange[0] + (j + 1) * step) % 359;
hueRange = [min, max]
hue = randomWithin(hueRange)
if (hue < 0) {hue = 360 + hue;}
return hue
}
else {
var hueRange = getHueRange(options.hue)
hue = randomWithin(hueRange);
// Instead of storing red as two seperate ranges,
// we group them, using negative numbers
if (hue < 0) {
hue = 360 + hue;
}
return hue;
}
}
function pickSaturation (hue, options) {
if (options.hue === 'monochrome') {
return 0;
}
if (options.luminosity === 'random') {
return randomWithin([0,100]);
}
var saturationRange = getSaturationRange(hue);
var sMin = saturationRange[0],
sMax = saturationRange[1];
switch (options.luminosity) {
case 'bright':
sMin = 55;
break;
case 'dark':
sMin = sMax - 10;
break;
case 'light':
sMax = 55;
break;
}
return randomWithin([sMin, sMax]);
}
function pickBrightness (H, S, options) {
var bMin = getMinimumBrightness(H, S),
bMax = 100;
switch (options.luminosity) {
case 'dark':
bMax = bMin + 20;
break;
case 'light':
bMin = (bMax + bMin)/2;
break;
case 'random':
bMin = 0;
bMax = 100;
break;
}
return randomWithin([bMin, bMax]);
}
function setFormat (hsv, options) {
switch (options.format) {
case 'hsvArray':
return hsv;
case 'hslArray':
return HSVtoHSL(hsv);
case 'hsl':
var hsl = HSVtoHSL(hsv);
return 'hsl('+hsl[0]+', '+hsl[1]+'%, '+hsl[2]+'%)';
case 'hsla':
var hslColor = HSVtoHSL(hsv);
var alpha = options.alpha || Math.random();
return 'hsla('+hslColor[0]+', '+hslColor[1]+'%, '+hslColor[2]+'%, ' + alpha + ')';
case 'rgbArray':
return HSVtoRGB(hsv);
case 'rgb':
var rgb = HSVtoRGB(hsv);
return 'rgb(' + rgb.join(', ') + ')';
case 'rgba':
var rgbColor = HSVtoRGB(hsv);
var alpha = options.alpha || Math.random();
return 'rgba(' + rgbColor.join(', ') + ', ' + alpha + ')';
default:
return HSVtoHex(hsv);
}
}
function getMinimumBrightness(H, S) {
var lowerBounds = getColorInfo(H).lowerBounds;
for (var i = 0; i < lowerBounds.length - 1; i++) {
var s1 = lowerBounds[i][0],
v1 = lowerBounds[i][1];
var s2 = lowerBounds[i+1][0],
v2 = lowerBounds[i+1][1];
if (S >= s1 && S <= s2) {
var m = (v2 - v1)/(s2 - s1),
b = v1 - m*s1;
return m*S + b;
}
}
return 0;
}
function getHueRange (colorInput) {
if (typeof parseInt(colorInput) === 'number') {
var number = parseInt(colorInput);
if (number < 360 && number > 0) {
return [number, number];
}
}
if (typeof colorInput === 'string') {
if (colorDictionary[colorInput]) {
var color = colorDictionary[colorInput];
if (color.hueRange) {return color.hueRange;}
} else if (colorInput.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)) {
var hue = HexToHSB(colorInput)[0];
return [ hue, hue ];
}
}
return [0,360];
}
function getSaturationRange (hue) {
return getColorInfo(hue).saturationRange;
}
function getColorInfo (hue) {
// Maps red colors to make picking hue easier
if (hue >= 334 && hue <= 360) {
hue-= 360;
}
for (var colorName in colorDictionary) {
var color = colorDictionary[colorName];
if (color.hueRange &&
hue >= color.hueRange[0] &&
hue <= color.hueRange[1]) {
return colorDictionary[colorName];
}
} return 'Color not found';
}
function randomWithin (range) {
if (seed === null) {
//generate random evenly destinct number from : https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/
var golden_ratio = 0.618033988749895
var r=Math.random()
r += golden_ratio
r %= 1
return Math.floor(range[0] + r*(range[1] + 1 - range[0]));
} else {
//Seeded random algorithm from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
var max = range[1] || 1;
var min = range[0] || 0;
seed = (seed * 9301 + 49297) % 233280;
var rnd = seed / 233280.0;
return Math.floor(min + rnd * (max - min));
}
}
function HSVtoHex (hsv){
var rgb = HSVtoRGB(hsv);
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? '0' + hex : hex;
}
var hex = '#' + componentToHex(rgb[0]) + componentToHex(rgb[1]) + componentToHex(rgb[2]);
return hex;
}
function defineColor (name, hueRange, lowerBounds) {
var sMin = lowerBounds[0][0],
sMax = lowerBounds[lowerBounds.length - 1][0],
bMin = lowerBounds[lowerBounds.length - 1][1],
bMax = lowerBounds[0][1];
colorDictionary[name] = {
hueRange: hueRange,
lowerBounds: lowerBounds,
saturationRange: [sMin, sMax],
brightnessRange: [bMin, bMax]
};
}
function loadColorBounds () {
defineColor(
'monochrome',
null,
[[0,0],[100,0]]
);
defineColor(
'red',
[-26,18],
[[20,100],[30,92],[40,89],[50,85],[60,78],[70,70],[80,60],[90,55],[100,50]]
);
defineColor(
'orange',
[19,46],
[[20,100],[30,93],[40,88],[50,86],[60,85],[70,70],[100,70]]
);
defineColor(
'yellow',
[47,62],
[[25,100],[40,94],[50,89],[60,86],[70,84],[80,82],[90,80],[100,75]]
);
defineColor(
'green',
[63,178],
[[30,100],[40,90],[50,85],[60,81],[70,74],[80,64],[90,50],[100,40]]
);
defineColor(
'blue',
[179, 257],
[[20,100],[30,86],[40,80],[50,74],[60,60],[70,52],[80,44],[90,39],[100,35]]
);
defineColor(
'purple',
[258, 282],
[[20,100],[30,87],[40,79],[50,70],[60,65],[70,59],[80,52],[90,45],[100,42]]
);
defineColor(
'pink',
[283, 334],
[[20,100],[30,90],[40,86],[60,84],[80,80],[90,75],[100,73]]
);
}
function HSVtoRGB (hsv) {
// this doesn't work for the values of 0 and 360
// here's the hacky fix
var h = hsv[0];
if (h === 0) {h = 1;}
if (h === 360) {h = 359;}
// Rebase the h,s,v values
h = h/360;
var s = hsv[1]/100,
v = hsv[2]/100;
var h_i = Math.floor(h*6),
f = h * 6 - h_i,
p = v * (1 - s),
q = v * (1 - f*s),
t = v * (1 - (1 - f)*s),
r = 256,
g = 256,
b = 256;
switch(h_i) {
case 0: r = v; g = t; b = p; break;
case 1: r = q; g = v; b = p; break;
case 2: r = p; g = v; b = t; break;
case 3: r = p; g = q; b = v; break;
case 4: r = t; g = p; b = v; break;
case 5: r = v; g = p; b = q; break;
}
var result = [Math.floor(r*255), Math.floor(g*255), Math.floor(b*255)];
return result;
}
function HexToHSB (hex) {
hex = hex.replace(/^#/, '');
hex = hex.length === 3 ? hex.replace(/(.)/g, '$1$1') : hex;
var red = parseInt(hex.substr(0, 2), 16) / 255,
green = parseInt(hex.substr(2, 2), 16) / 255,
blue = parseInt(hex.substr(4, 2), 16) / 255;
var cMax = Math.max(red, green, blue),
delta = cMax - Math.min(red, green, blue),
saturation = cMax ? (delta / cMax) : 0;
switch (cMax) {
case red: return [ 60 * (((green - blue) / delta) % 6) || 0, saturation, cMax ];
case green: return [ 60 * (((blue - red) / delta) + 2) || 0, saturation, cMax ];
case blue: return [ 60 * (((red - green) / delta) + 4) || 0, saturation, cMax ];
}
}
function HSVtoHSL (hsv) {
var h = hsv[0],
s = hsv[1]/100,
v = hsv[2]/100,
k = (2-s)*v;
return [
h,
Math.round(s*v / (k<1 ? k : 2-k) * 10000) / 100,
k/2 * 100
];
}
function stringToInteger (string) {
var total = 0
for (var i = 0; i !== string.length; i++) {
if (total >= Number.MAX_SAFE_INTEGER) break;
total += string.charCodeAt(i)
}
return total
}
// get The range of given hue when options.count!=0
function getRealHueRange(colorHue)
{ if (!isNaN(colorHue)) {
var number = parseInt(colorHue);
if (number < 360 && number > 0) {
return getColorInfo(colorHue).hueRange
}
}
else if (typeof colorHue === 'string') {
if (colorDictionary[colorHue]) {
var color = colorDictionary[colorHue];
if (color.hueRange) {
return color.hueRange
}
} else if (colorHue.match(/^#?([0-9A-F]{3}|[0-9A-F]{6})$/i)) {
var hue = HexToHSB(colorHue)[0]
return getColorInfo(hue).hueRange
}
}
return [0,360]
}
return randomColor;
}));

View file

@ -76,17 +76,10 @@
<section class="row uniform">
<canvas id="myChart" width="2000px" height="2000px"></canvas>
<script src="{% static 'chart.min.js' %}"></script>
<script src="{% static 'randomColor.js' %}"></script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
baseColor = Math.round(Math.random()*255) + "," + Math.round(Math.random()*255) + "," + Math.round(Math.random()*255);
console.log(baseColor)
$.get("http://www.thecolorapi.com/scheme?rgb=" + baseColor + "&mode=analogic&count={{products | length}}", function( data ) {
colors = data.colors
var bgColor = []
for(var i = 0; i < colors.length; i++){
color = colors[i]
bgColor.push("rgb(" + color.rgb.r + "," + color.rgb.g + "," + color.rgb.b + ")")
}
var bgColor = randomColor({count: {{products|length}}});
var myChart = new Chart(ctx, {
type: 'pie',
data: {
@ -107,7 +100,6 @@
}
}
});
}, "json" );
</script>
</section>
</section>
@ -310,4 +302,4 @@
</div>
</section>
</section>
{%endblock%}
{%endblock%}

View file

@ -17,6 +17,7 @@ from django.utils import timezone
from django.conf import settings
from django.contrib.sites.shortcuts import get_current_site
from django.utils.encoding import force_bytes
from django.db.models import Sum
import simplejson as json
from datetime import datetime, timedelta
@ -163,7 +164,7 @@ def profile(request, pk):
"quantities": quantities,
"lastConsumptions": lastConsumptions,
"lastMenus": lastMenus,
"banishments": banishments
"banishments": banishments,
})
@active_required