Why 0xFF0000ff is red, and #0000ff is blue? And how do I convert #0000ff into 0x, so it would work properly? I tried to add 0xFF in the beginning, but it results in unexpected (by me) behaviour
I am trying to implement this algorithm http://jsfiddle.net/greggman/wpfd8he1/
function getPixel(pixelData, x, y) {
if (x < 0 || y < 0 || x >= pixelData.width || y >= pixelData.height) {
return -1; // impossible color
} else {
return pixelData.data[y * pixelData.width + x];
}
}
function floodFill(ctx, x, y, fillColor) {
// read the pixels in the canvas
const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
// make a Uint32Array view on the pixels so we can manipulate pixels
// one 32bit value at a time instead of as 4 bytes per pixel
const pixelData = {
width: imageData.width,
height: imageData.height,
data: new Uint32Array(imageData.data.buffer),
};
// get the color we're filling
const targetColor = getPixel(pixelData, x, y);
// check we are actually filling a different color
if (targetColor !== fillColor) {
const pixelsToCheck = [x, y];
while (pixelsToCheck.length > 0) {
const y = pixelsToCheck.pop();
const x = pixelsToCheck.pop();
const currentColor = getPixel(pixelData, x, y);
if (currentColor === targetColor) {
pixelData.data[y * pixelData.width + x] = fillColor;
pixelsToCheck.push(x + 1, y);
pixelsToCheck.push(x - 1, y);
pixelsToCheck.push(x, y + 1);
pixelsToCheck.push(x, y - 1);
}
}
// put the data back
ctx.putImageData(imageData, 0, 0);
}
}
Hexadecimal colours follow the format [ 0x ] [ red] [ green] [ blue] [ transparency].
Conversely, hex 'codes' follow the format [ # ] [ red] [ green] [ blue] (with no transparency value listed).
Each colour is allocated 2 units between 0 and F. It does not matter whether the unit is lowercase or uppercase.
0xFF0000ff equates to the hex code #FF0000 with ff (solid) transparency. Breaking this down we have [ FF (red) ] [ 00 (green) ] [ 00 (blue) ] -- solid red.
In order to covert any hex code to hexadecimal notation, you simply need to prepend 0x and append the transparency value. Assuming the colour you want to convert is opaque, you simply need to append ff.
For example, to convert #0000ff (blue) to hex, you prepend 0x and append ff, giving you 0x0000ffff.
0x hex colors are reversed from web hex codes. #RRGGBBAA for hex code would be 0xAABBGGRR, where AA is alpha, BB is blue, GG is green, and RR is red.
Related
I'm following a tutorial by George Francis in the tutorial after some initial examples he shows how to use image data to create random layouts.
I'm trying to work out how to get the image data from a canvas created using paper.js, as I need to get the rgb values from each individual pixel on the canvas
Link to codepen
Unknowns:
Do I need to use the rasterize() method on the shape I've created?
Currently I am attempting the following:
// create a white rectangle the size of the view (not sure I need this but doing it so that there are both white and black pixels)
const bg = new paper.Path.Rectangle({
position: [0,0],
size: view.viewSize.multiply(2),
fillColor: 'white'
})
// create a black rectangle smaller than the view size
const shape = new paper.Path.RegularPolygon({
radius: view.viewSize.width * 0.4,
fillColor: 'black',
strokeColor: 'black',
sides: 4,
position: view.center
})
// So far so good shapes render as expected. Next put the shapes in a group
const group = new paper.Group([bg,shape])
// rasterise the group (thinking it needs to be rasterized to get the pixel data, but again , not sure?)
group.rasterize()
// iterate over each pixel on the canvas and get the image data
for(let x = 0; x < width; x++){
for(let y = 0; y < height; y++){
const { data } = view.context.getImageData(x,y,1,1)
console.log(data)
}
}
Expecting: To get an array of buffers where if the pixel is white it would give me
Uint8ClampedArray(4) [0, 0, 0, 0, buffer: ArrayBuffer(4),
byteLength: 4, byteOffset: 0, length: 4]
0: 255
1: 255
2: 255
//(not sure if the fourth index represents (rgb'a')?
3: 255
buffer:
ArrayBuffer(4)
byteLength: 4
byteOffset: 0
length: 4
Symbol(Symbol.toStringTag): (...)
[[Prototype]]: TypedArray
and if the pixel is black I should get
Uint8ClampedArray(4) [0, 0, 0, 0, buffer: ArrayBuffer(4),
byteLength: 4, byteOffset: 0, length: 4]
0: 0
1: 0
2: 0
3: 0
buffer:
ArrayBuffer(4)
byteLength: 4
byteOffset: 0
length: 4
Symbol(Symbol.toStringTag): (...)
[[Prototype]]: TypedArray
i.e either 255,255,255 (white) or 0,0,0(black)
Instead, all the values are 0,0,0?
I think that your issue was that at the time where you are getting the image data, your scene is not yet drawn to the canvas.
In order to make sure it's drawn, you just need to call view.update().
Here's a simple sketch demonstrating how it could be used.
Note that you don't need to rasterize your scene if you are using the Canvas API directly to manipulate the image data. But you could also rasterize it and take advantage of Paper.js helper methods like raster.getPixel().
// Draw a white background (you effectively need it otherwise your default
// pixels will be black).
new Path.Rectangle({
rectangle: view.bounds,
fillColor: 'white'
});
// Draw a black rectangle covering most of the canvas.
new Path.Rectangle({
rectangle: view.bounds.scale(0.9),
fillColor: 'black'
});
// Make sure that the scene is drawn into the canvas.
view.update();
// Get the canvas image data.
const { width, height } = view.element;
const imageData = view.context.getImageData(0, 0, width, height);
// Loop over each pixel and store all the different colors to check that this works.
const colors = new Set();
const length = imageData.data.length;
for (let i = 0; i < length; i += 4) {
const [r, g, b, a] = imageData.data.slice(i, i + 4);
const color = JSON.stringify({ r, g, b, a });
colors.add(color);
}
console.log('colors', [...colors]);
I am trying to use d3-geo-voronoi to display vector tile data using d3-tile. My initial attempt in displaying the data, with fill set to "none" worked, which was very exiting!
Voronoi tile map without color fill
However, when I attempted to fill the polygons, some of the tiles were distorted.
Voronoi tile map with color fill
I've not been able to figure out why this is happening. I checked the svg's in the dom, and everything looks correct. The svg's are correct where there are no polygons, they are just not being rendered properly, possibly they are being covered up. Below is the code I used:
const d3 = require('d3');
const d3tile = require('d3-tile');
const d3geovoronoi = require('d3-geo-voronoi');
const vt2geojson = require('#mapbox/vt2geojson');
const pi = Math.PI,
tau = 2 * pi;
const width = Math.max(960, window.innerWidth),
height = Math.max(500, window.innerHeight);
const map = d3.select("body").append("div")
.attr("class", "map")
.style("width", width + "px")
.style("height", height + "px")
.on("mousemove", mousemoved);
let projection = d3.geoMercator()
.scale(1 / tau)
.translate([0, 0]);
let center = projection([-76.3, 38.794745]);
const tile = d3tile.tile()
.size([width, height]);
const zoom = d3.zoom()
.scaleExtent([1 << 15, 1 << 24])
.on("zoom", zoomed);
const svg = map.append("g")
.attr("pointer-events", "none")
.attr("class", "svg");
const info = map.append("g")
.attr("class", "info");
const ramp = d3.scaleLinear().domain([0.05,0.07]).interpolate(d3.interpolateHcl).range(['#34d8eb','#3a34eb']).unknown("#5c5752")
map.call(zoom)
.call(zoom.transform, d3.zoomIdentity
.translate(width / 2, height / 2)
.scale(1 << 21)
.translate(-center[0], -center[1]));
function zoomed() {
let transform = d3.event.transform;
let tiles = tile(transform);
let image = svg
.style("transform", stringify(tiles.scale, tiles.translate))
.selectAll(".tile")
.data(tiles, function(d) { return d; })
.enter().append("svg")
.attr("class", "tile")
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width", "0.5")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.style("left", function(d) { return d[0] * 256 + "px"; })
.style("top", function(d) { return d[1] * 256 + "px"; })
.each(function(d) { this._xhr = render(d, this); });
projection
.scale(transform.k / tau)
.translate([transform.x, transform.y]);
}
function render(d, xnode) {
let k = Math.pow(2, d[2]) * 256;
vt2geojson({
uri: 'http://localhost:7800/public.r3sim_fort_temp/'+d[2]+'/'+d[0]+'/'+d[1]+'.pbf?properties=node,zeta,mask,bathymetry'
}, function (err, json) {
if (err) throw err;
d3.select(xnode)
.selectAll("path")
.data(d3geovoronoi.geoVoronoi().polygons(json).features)
.enter().append("path")
//.attr('fill', 'none')
.attr("fill", function(d) {return ramp(d.properties.site.properties.zeta)})
.attr("stroke", "#fff")
.attr("stroke-width", "0.5")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", d3.geoPath()
.projection(d3.geoMercator()
.scale(k / tau)
.translate([k / 2 - d[0] * 256, k / 2 - d[1] * 256])
.precision(0)));
})
}
function stringify(scale, translate) {
const k = scale / 256, r = scale % 1 ? Number : Math.round;
return "matrix3d(" + [k, 0, 0, 0, 0, k, 0, 0, 0, 0, k, 0, r(translate[0] * scale), r(translate[1] * scale), 0, 1 ] + ")";
}
function mousemoved() {
info.text(formatLocation(projection.invert(d3.mouse(this)), d3.zoomTransform(this).k));
}
function formatLocation(p, k) {
const format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " "
+ (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E");
}
<!doctype html>
<head>
<meta charset="utf-8">
<title>D3 V5 Vector Tile Example</title>
<style>
body {
margin: 0;
}
.map {
background: #5c5752;
position: relative;
overflow: hidden;
}
.svg {
position: absolute;
will-change: transform;
}
.tile {
position: absolute;
width: 256px;
height: 256px;
}
.info {
position: absolute;
bottom: 10px;
left: 10px;
}
</style>
</head>
<body>
<script src="bundle.js"></script>
</body>
In this example I filled the polygons with varying color values. However, the exact same distortions occur if I use a single color value. The distortions are also always in the same place, if I reload all of the data.
I did a deeper dive into the data, and found the bad svg path, and then found the data related to it. It looks like d3.geo.voronoi is producing some bad coordinates, but the input data looks okay. Below are two printouts of node 1192. The first is the input geojson data, showing the coordinates, and the second is the voronoi geometry. The voronoi geometry contains longitude values in the eastern hemisphere (103.86...), which is way outside of the range of the data. I'm still trying to determine why these bad values are being produced. Again, the input coordinates look correct, but possibly it is other data that goes into the voronoi calculation?
1192
{…}
geometry: {…}
coordinates: (2) […]
0: -76.12801194190979
1: 38.78622954627738
length: 2
<prototype>: Array []
type: "Point"
<prototype>: Object { … }
properties: Object { node: 180407, zeta: "NaN", mask: "True", … }
type: "Feature"
<prototype>: Object { … }
1192 (11) […]
0: Array [ 103.86695733932268, -44.964779133003304 ]
1: Array [ -76.13308210176842, 38.75793814039401 ]
2: Array [ -76.13020999558496, 38.782688154120585 ]
3: Array [ -76.12890669699081, 38.78647064351637 ]
4: Array [ -76.12807302385534, 38.786723650244355 ]
5: Array [ -76.12754554182737, 38.78651000385868 ]
6: Array [ -76.12640847594942, 38.78408839960177 ]
7: Array [ -76.11435851540921, 38.636536130021334 ]
8: Array [ 103.858096036925, -39.00570100251519 ]
9: Array [ 103.860092112702, -39.367933188411186 ]
10: Array [ 103.86695733932268, -44.964779133003304 ]
length: 11
<prototype>: []
two question. first off, how could I set a particular value in a 3d texture to 1, lets say the y coordinate of the element at index 1,1,1 in the following Int16Array so I could later read it. I think it'd go something like this:
var data = new Int16Array(size * size * size);
data.fill(0);
// ??? (somehow I'd set values of the data array at index 1,1,1 but I'm unsure how)
data ??? = 1;
gl.texImage3D(
gl.TEXTURE_3D,
0,
gl.R16I,
size,
size,
size,
0,
gl.RED_INTEGER,
gl.SHORT,
data);
secondly, later in my fragment shader, how could I grab that value using the GLSL texture function. I think it'd go something like this:
uniform isampler3d t_sampler;
...
ivec4 value = texture( t_sampler , vec3( 1.0 , 1.0 , 1.0 ) );
if( value.y == 1 ){
// do some special stuff
}
any help would be appreciated. again I'm just trying to create my texture using a data array I create and then read that value in the frag shader.
fyi this code is running but failing to get to the "do some special stuff" part.
thanks
// ??? (somehow I'd set values of the data array at index 1,1,1 but I'm unsure how)
data ??? = 1;
const width = ??
const height = ??
const depth = ??
const numChannels = 1; // 1 for RED, 2 for RG, 3 for RGB, 4 for RGBA
const sliceSize = width * height * numChannels;
const rowSize = width * numChannels;
const x = 1;
const y = 1;
const z = 1;
const offset = z * sliceSize + y * rowSize + x;
data[offset] = redValue;
If there are more channels, for example RGBA then
data[offset + 0] = redValue;
data[offset + 1] = greenValue;
data[offset + 2] = blueValue;
data[offset + 3] = alphaValue;
how could I grab that value using the GLSL texture function
To get a specific value from a texture you can use texelFetch with pixel/texel coordinates.
uniform isampler3d t_sampler;
...
int x = 1;
int y = 1;
int z = 1;
int mipLevel = 0;
ivec4 value = texelFetch(t_sampler, ivec3(x, y, z), mipLevel);
if( value.y == 1 ){
// do some special stuff
}
Be sure to check the JavaScript console for errors. In your case you probably need to set filtering to NEAREST since you're not providing mips and since integer textures can not be filtered.
I am trying to have the widget for the rickshawgraph in dashing change the background color depending on the highest value on the highest graph for the newest incoming data. I have it working for one series, but I am having trouble getting it to handle multiple series in one graph.
This is a snippet from the rickshawgraph.coffee file. I know I need a loop to get each series and check which one has the highest value, then perform the rest of the logic, but I'm having a really tough time with the syntax. Any help would be appreciated. I included the complete files below as well.
node = $(#node)
series = #_parseData {points: #get('points'), series: #get('series')}
data = series[0].data
values = data[data.length - 1].y
#cool = parseInt(#get('cool'))
cool = parseInt node.data "cool"
#warm = parseInt(#get('warm'))
warm = parseInt node.data "warm"
level = switch
when values <= cool then 0
when values >= warm then 4
else
bucketSize = (warm - cool) / 3 # Total # of colours in middle
Math.ceil (values - cool) / bucketSize
backgroundClass = "hotness#{level}"
lastClass = #get "lastClass"
node.toggleClass "#{lastClass} #{backgroundClass}"
#set "lastClass", backgroundClass
My erb file calls the widget here.
</li>
My scss rickshawgraph.scss is here.
// ----------------------------------------------------------------------------
// Mixins
// ----------------------------------------------------------------------------
#mixin transition($transition-property, $transition-time, $method) {
-webkit-transition: $transition-property $transition-time $method;
-moz-transition: $transition-property $transition-time $method;
-o-transition: $transition-property $transition-time $method;
transition: $transition-property $transition-time $method;
}
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #00C176;
// ----------------------------------------------------------------------------
// Widget-graph styles
// ----------------------------------------------------------------------------
.widget-rickshawgraph {
background-color: #00C176;
position: relative;
}
.widget-rickshawgraph .rickshaw_graph {
position: absolute;
left: 0px;
top: 0px;
}
.widget-rickshawgraph svg {
position: absolute;
left: 0px;
top: 0px;
}
.widget-rickshawgraph .title, .widget-rickshawgraph .value {
position: relative;
z-index: 99;
}
.widget-rickshawgraph .title {
color: rgba(126, 126, 126, 0.7);
}
.widget-rickshawgraph .more-info {
color: rgba(0, 0, 0, 0);
font-weight: 600;
font-size: 20px;
margin-top: 0;
opacity: 0;
}
.widget-rickshawgraph .x_tick {
position: absolute;
bottom: 0;
}
.widget-rickshawgraph .x_tick .title {
font-size: 40px;
color: rgba(0, 0, 0, 0.4);
opacity: 0.5;
padding-bottom: 3px;
}
.widget-rickshawgraph .y_ticks {
font-size: 40px;
fill: rgba(0, 0, 0, 0.4);
color: rgba(0, 0, 0, 0.4);
font-weight: bold;
}
.widget-rickshawgraph .y_ticks text {
font-size: 20px;
color: rgba(0, 0, 0, 0.4);
fill: rgba(0, 0, 0, 0.4);
font-weight: bold;
}
.widget-rickshawgraph .domain {
display: none;
}
.widget-rickshawgraph .rickshaw_legend {
position: absolute;
left: 0px;
bottom: 0px;
white-space: nowrap;
overflow-x: scroll;
font-size: 80px;
height: 20px;
}
.widget-rickshawgraph .rickshaw_legend ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.widget-rickshawgraph .rickshaw_legend ul li {
display: inline;
}
.widget-rickshawgraph .rickshaw_legend .swatch {
display: inline-block;
width: 14px;
height: 14px;
margin-left: 5px;
}
.widget-rickshawgraph .rickshaw_legend .label {
display: inline-block;
margin-left: 5px;
/*Change the font size and the text size and make sure the label comes to the front for the legend */
font-size: 200%;
color: rgba(255, 255, 255, 0.7);
}
.hotness0 { background-color: #00C176; }
.hotness1 { background-color: #88C100; }
.hotness2 { background-color: #FABE28; }
.hotness3 { background-color: #FF8A00; }
.hotness4 { background-color: #FF003C; }
// // More colour-blind friendly palette
// .hotness0 { background-color: #046D8B; }
// .hotness1 { background-color: #309292; }
// .hotness2 { background-color: #2FB8AC; }
// .hotness3 { background-color: #93A42A; }
// .hotness4 { background-color: #ECBE13; }
My rickshawgraph.coffee is here.
# Rickshawgraphhot v0.1.0
class Dashing.Rickshawgraphhot extends Dashing.Widget
DIVISORS = [
{number: 100000000000000000000000, label: 'Y'},
{number: 100000000000000000000, label: 'Z'},
{number: 100000000000000000, label: 'E'},
{number: 1000000000000000, label: 'P'},
{number: 1000000000000, label: 'T'},
{number: 1000000000, label: 'G'},
{number: 1000000, label: 'M'},
{number: 1000, label: 'S'},
{number: 1, label: 'MS'}
]
# Take a long number like "2356352" and turn it into "2.4M"
formatNumber = (number) ->
for divisior in DIVISORS
if number > divisior.number
number = "#{Math.round(number / (divisior.number/10))/10}#{divisior.label}"
break
else
number = " number + 'ms'"
return number
getRenderer: () -> return #get('renderer') or #get('graphtype') or 'area'
# Retrieve the `current` value of the graph.
#accessor 'current', ->
answer = null
# Return the value supplied if there is one.
if #get('displayedValue') != null and #get('displayedValue') != undefined
answer = #get('displayedValue')
if answer == null
# Compute a value to return based on the summaryMethod
series = #_parseData {points: #get('points'), series: #get('series')}
if !(series?.length > 0)
# No data in series
answer = ''
else
switch #get('summaryMethod')
when "sum"
answer = 0
answer += (point?.y or 0) for point in s.data for s in series
when "sumLast"
answer = 0
answer += s.data[s.data.length - 1].y or 0 for s in series
when "highest"
answer = 0
if #get('unstack') or (#getRenderer() is "line")
answer = Math.max(answer, (point?.y or 0)) for point in s.data for s in series
else
# Compute the sum of values at each point along the graph
for index in [0...series[0].data.length]
value = 0
for s in series
value += s.data[index]?.y or 0
answer = Math.max(answer, value)
when "none"
answer = ''
else
# Otherwise if there's only one series, pick the most recent value from the series.
if series.length == 1 and series[0].data?.length > 0
data = series[0].data
answer = data[data.length - 1].y
else
# Otherwise just return nothing.
answer = ''
if #get('numformat') == 'ms'
answer = formatNumber answer
return answer
ready: ->
#assignedColors = #get('colors').split(':') if #get('colors')
#strokeColors = #get('strokeColors').split(':') if #get('strokeColors')
#graph = #_createGraph()
#graph.render()
clear: ->
# Remove the old graph/legend if there is one.
$node = $(#node)
$node.find('.rickshaw_graph').remove()
if #$legendDiv
#$legendDiv.remove()
#$legendDiv = null
# Handle new data from Dashing.
onData: (data) ->
series = #_parseData data
if #graph
# Remove the existing graph if the number of series has changed or any names have changed.
needClear = false
needClear |= (series.length != #graph.series.length)
if #get("legend") then for subseries, index in series
needClear |= #graph.series[index]?.name != series[index]?.name
if needClear then #graph = #_createGraph()
# Copy over the new graph data
for subseries, index in series
#graph.series[index] = subseries
#graph.render()
node = $(#node)
series = #_parseData {points: #get('points'), series: #get('series')}
data = series[0].data
values = data[data.length - 1].y
#cool = parseInt(#get('cool'))
cool = parseInt node.data "cool"
#warm = parseInt(#get('warm'))
warm = parseInt node.data "warm"
level = switch
when values <= cool then 0
when values >= warm then 4
else
bucketSize = (warm - cool) / 3 # Total # of colours in middle
Math.ceil (values - cool) / bucketSize
backgroundClass = "hotness#{level}"
lastClass = #get "lastClass"
node.toggleClass "#{lastClass} #{backgroundClass}"
#set "lastClass", backgroundClass
# Create a new Rickshaw graph.
_createGraph: ->
$node = $(#node)
$container = $node.parent()
#clear()
# Gross hacks. Let's fix this.
width = (Dashing.widget_base_dimensions[0] * $container.data("sizex")) + Dashing.widget_margins[0] * 2 * ($container.data("sizex") - 1)
height = (Dashing.widget_base_dimensions[1] * $container.data("sizey"))
if #get("legend")
# Shave 20px off the bottom of the graph for the legend
height -= 20
$graph = $("<div style='height: #{height}px;'></div>")
$node.append $graph
series = #_parseData {points: #get('points'), series: #get('series')}
graphOptions = {
element: $graph.get(0),
renderer: #getRenderer(),
width: width,
height: height,
series: series
}
if !!#get('stroke') then graphOptions.stroke = true
if #get('min') != null then graphOptions.max = #get('min')
if #get('max') != null then graphOptions.max = #get('max')
try
graph = new Rickshaw.Graph graphOptions
catch err
if err.toString() is "x and y properties of points should be numbers instead of number and object"
# This will happen with older versions of Rickshaw that don't support nulls in the data set.
nullsFound = false
for s in series
for point in s.data
if point.y is null
nullsFound = true
point.y = 0
if nullsFound
# Try to create the graph again now that we've patched up the data.
graph = new Rickshaw.Graph graphOptions
if !#rickshawVersionWarning
console.log "#{#get 'id'} - Nulls were found in your data, but Rickshaw didn't like" +
" them. Consider upgrading your rickshaw to 1.4.3 or higher."
#rickshawVersionWarning = true
else
# No nulls were found - this is some other problem, so just re-throw the exception.
throw err
graph.renderer.unstack = !!#get('unstack')
xAxisOptions = {
graph: graph
}
if Rickshaw.Fixtures.Time.Local
xAxisOptions.timeFixture = new Rickshaw.Fixtures.Time.Local()
x_axis = new Rickshaw.Graph.Axis.Time xAxisOptions
y_axis = new Rickshaw.Graph.Axis.Y(graph: graph, tickFormat: Rickshaw.Fixtures.Number.formatMS)
if #get("legend")
# Add a legend
#$legendDiv = $("<div style='position:fixed; z-index:99; width: #{width}px;'></div>")
$node.append(#$legendDiv)
legend = new Rickshaw.Graph.Legend {
graph: graph
element: #$legendDiv.get(0)
}
return graph
# Parse a {series, points} object with new data from Dashing.
#
_parseData: (data) ->
series = []
# Figure out what kind of data we've been passed
if data.series
dataSeries = if isString(data.series) then JSON.parse data.series else data.series
for subseries, index in dataSeries
try
series.push #_parseSeries subseries
catch err
console.log "Error while parsing series: #{err}"
else if data.points
points = data.points
if isString(points) then points = JSON.parse points
if points[0]? and !points[0].x?
# Not already in Rickshaw format; assume graphite data
points = graphiteDataToRickshaw(points)
series.push {data: points}
if series.length is 0
# No data - create a dummy series to keep Rickshaw happy
series.push {data: [{x:0, y:0}]}
#_updateColors(series)
# Fix any missing data in the series.
if Rickshaw.Series.fill then Rickshaw.Series.fill(series, null)
return series
# Parse a series of data from an array passed to `_parseData()`.
# This accepts both Graphite and Rickshaw style data sets.
_parseSeries: (series) ->
if series?.datapoints?
# This is a Graphite series
answer = {
name: series.target
data: graphiteDataToRickshaw series.datapoints
color: series.color
stroke: series.stroke
}
else if series?.data?
# Rickshaw data. Need to clone, otherwise we could end up with multiple graphs sharing
# the same data, and Rickshaw really doesn't like that.
answer = {
name: series.name
data: series.data
color: series.color
stroke: series.stroke
}
else if !series
throw new Error("No data received for #{#get 'id'}")
else
throw new Error("Unknown data for #{#get 'id'}. series: #{series}")
answer.data.sort (a,b) -> a.x - b.x
return answer
# Update the color assignments for a series. This will assign colors to any data that
# doesn't have a color already.
_updateColors: (series) ->
# If no colors were provided, or of there aren't enough colors, then generate a set of
# colors to use.
if !#defaultColors or #defaultColors?.length != series.length
#defaultColors = computeDefaultColors #, #node, series
for subseries, index in series
# Preferentially pick supplied colors instead of defaults, but don't overwrite a color
# if one was supplied with the data.
subseries.color ?= #assignedColors?[index] or #defaultColors[index]
subseries.stroke ?= #strokeColors?[index] or "#000"
# Convert a collection of Graphite data points into data that Rickshaw will understand.
graphiteDataToRickshaw = (datapoints) ->
answer = []
for datapoint in datapoints
# Need to convert potential nulls from Graphite into a real number for Rickshaw.
answer.push {x: datapoint[1], y: (datapoint[0] or 0)}
answer
# Compute a pleasing set of default colors. This works by starting with the background color,
# and picking colors of intermediate luminance between the background and white (or the
# background and black, for light colored backgrounds.) We use the brightest color for the
# first series, because then multiple series will appear to blend in to the background.
computeDefaultColors = (self, node, series) ->
defaultColors = []
# Use a neutral color if we can't get the background-color for some reason.
backgroundColor = parseColor($(node).css('background-color')) or [50, 50, 50, 1.0]
hsl = rgbToHsl backgroundColor
alpha = if self.get('defaultAlpha')? then self.get('defaultAlpha') else 1
if self.get('colorScheme') in ['rainbow', 'near-rainbow']
saturation = (interpolate hsl[1], 1.0, 3)[1]
luminance = if (hsl[2] < 0.6) then 0.7 else 0.3
hueOffset = 0
if self.get('colorScheme') is 'rainbow'
# Note the first and last values in `hues` will both have the same hue as the background,
# hence the + 2.
hues = interpolate hsl[0], hsl[0] + 1, (series.length + 2)
hueOffset = 1
else
hues = interpolate hsl[0] - 0.25, hsl[0] + 0.25, series.length
for hue, index in hues
if hue > 1 then hues[index] -= 1
if hue < 0 then hues[index] += 1
for index in [0...series.length]
defaultColors[index] = rgbToColor hslToRgb([hues[index + hueOffset], saturation, luminance, alpha])
else
hue = if self.get('colorScheme') is "compliment" then hsl[0] + 0.5 else hsl[0]
if hsl[0] > 1 then hsl[0] -= 1
saturation = hsl[1]
saturationSource = if (saturation < 0.6) then 0.7 else 0.3
saturations = interpolate saturationSource, saturation, (series.length + 1)
luminance = hsl[2]
luminanceSource = if (luminance < 0.6) then 0.9 else 0.1
luminances = interpolate luminanceSource, luminance, (series.length + 1)
for index in [0...series.length]
defaultColors[index] = rgbToColor hslToRgb([hue, saturations[index], luminances[index], alpha])
return defaultColors
# Helper functions
# ================
isString = (obj) ->
return toString.call(obj) is "[object String]"
# Parse a `rgb(x,y,z)` or `rgba(x,y,z,a)` string.
parseRgbaColor = (colorString) ->
match = /^rgb\(\s*([\d]+)\s*,\s*([\d]+)\s*,\s*([\d]+)\s*\)/.exec(colorString)
if match
return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3]), 1.0]
match = /^rgba\(\s*([\d]+)\s*,\s*([\d]+)\s*,\s*([\d]+)\s*,\s*([\d]+)\s*\)/.exec(colorString)
if match
return [parseInt(match[1]), parseInt(match[2]), parseInt(match[3]), parseInt(match[4])]
return null
# Parse a color string as RGBA
parseColor = (colorString) ->
answer = null
# Try to use the browser to parse the color for us.
div = document.createElement('div')
div.style.color = colorString
if div.style.color
answer = parseRgbaColor div.style.color
if !answer
match = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})/.exec(colorString)
if match then answer = [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16), 1.0]
if !answer
match = /^#([\da-fA-F])([\da-fA-F])([\da-fA-F])/.exec(colorString)
if match then answer = [parseInt(match[1], 16) * 0x11, parseInt(match[2], 16) * 0x11, parseInt(match[3], 16) * 0x11, 1.0]
if !answer then answer = parseRgbaColor colorString
return answer
# Convert an RGB or RGBA color to a CSS color.
rgbToColor = (rgb) ->
if (!3 of rgb) or (rgb[3] == 1.0)
return "rgb(#{rgb[0]},#{rgb[1]},#{rgb[2]})"
else
return "rgba(#{rgb[0]},#{rgb[1]},#{rgb[2]},#{rgb[3]})"
# Returns an array of size `steps`, where the first value is `source`, the last value is `dest`,
# and the intervening values are interpolated. If steps < 2, then returns `[dest]`.
#
interpolate = (source, dest, steps) ->
if steps < 2
answer =[dest]
else
stepSize = (dest - source) / (steps - 1)
answer = (num for num in [source..dest] by stepSize)
# Rounding errors can cause us to drop the last value
if answer.length < steps then answer.push dest
return answer
# Adapted from http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
#
# Converts an RGBA color value to HSLA. Conversion formula
# adapted from http://en.wikipedia.org/wiki/HSL_color_space.
# Assumes r, g, and b are contained in the set [0, 255] and
# a in [0, 1]. Returns h, s, l, a in the set [0, 1].
#
# Returns the HSLA representation as an array.
rgbToHsl = (rgba) ->
[r,g,b,a] = rgba
r /= 255
g /= 255
b /= 255
max = Math.max(r, g, b)
min = Math.min(r, g, b)
l = (max + min) / 2
if max == min
h = s = 0 # achromatic
else
d = max - min
s = if l > 0.5 then d / (2 - max - min) else d / (max + min)
switch max
when r then h = (g - b) / d + (g < b ? 6 : 0)
when g then h = (b - r) / d + 2
when b then h = (r - g) / d + 4
h /= 6;
return [h, s, l, a]
# Adapted from http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
#
# Converts an HSLA color value to RGBA. Conversion formula
# adapted from http://en.wikipedia.org/wiki/HSL_color_space.
# Assumes h, s, l, and a are contained in the set [0, 1] and
# returns r, g, and b in the set [0, 255] and a in [0, 1].
#
# Retunrs the RGBA representation as an array.
hslToRgb = (hsla) ->
[h,s,l,a] = hsla
if s is 0
r = g = b = l # achromatic
else
hue2rgb = (p, q, t) ->
if(t < 0) then t += 1
if(t > 1) then t -= 1
if(t < 1/6) then return p + (q - p) * 6 * t
if(t < 1/2) then return q
if(t < 2/3) then return p + (q - p) * (2/3 - t) * 6
return p
q = if l < 0.5 then l * (1 + s) else l + s - l * s
p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3)
g = hue2rgb(p, q, h)
b = hue2rgb(p, q, h - 1/3)
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), a]
My rickshawgraph.html is here.
<h1 class="title" data-bind="title" style="color:white;"> </h1>
<h2 class="value" data-bind="current | prepend prefix"></h2>
<p class="more-info" data-bind="moreinfo"></p>
I suggest you do this instead. There are warning and danger colors set in "assets/stylesheets/application.scss". You can add new colors in there.
In your rickshaw graph widget add this
onData: (data) ->
if data.status
# clear existing "status-*" classes
$(#get('node')).attr 'class', (i,c) ->
c.replace /\bstatus-\S+/g, ''
# add new class
$(#get('node')).addClass "status-#{data.status}"
In your job's .rb, set a status and send it.
For example:
if count < 50
status = 'warning'
else
status = 'danger'
end
send_event('thread-count', { value: count, status: status } )
In the above case if my count is less than 50, it blinks yellow or else its red.
NOTE: the animation doesnt work in Firefox. Works in Safari and Chrome only.
The answer here is a simple and nice one. I had to make a few tweaks though as my charts used data-colors and data-stroke colors. Posting it for sample usage.
plug into rickhawgraph.coffee in the top of onData section:
onData: (data) ->
if data.status
# clear existing "status-*" classes
$(#get('node')).attr 'class', (i,c) ->
c.replace /\bstatus-\S+/g, ''
#assignedColors = ""
#strokeColors = ""
# add new class
$(#get('node')).addClass "status-#{data.status}"
else
#assignedColors = #get('colors').split(':') if #get('colors')
#strokeColors = ""
the html
<li data-row="1" data-col="1" data-sizex="2" data-sizey="4">
<div data-id="apdex_score_stage" data-view="Rickshawgraph" data-bind-data-min="0" data-max="1" data-title="Apdex Score (1-Excellent)" class="" data-colors="#4D4D94" data-stroke-colors="#707070" data-unstack="false" data-stroke="true" data-default-alpha="0.5" data-legend="false" data-summary-method="last"></div>
</li>
in the job
apdex_status=""
if apdex_score_values_array_min.min < 1 #yellow if one of the values is less than 1
apdex_status="danger"
end
print apdex_score_values_array_min[1]
if apdex_score_values_array_min[1] < 1 #red if last value is less than 1
apdex_status="warning"
end
#red if last value is less than 1
if apdex_score_values_array_min.min == 1.0 #nothing to worry, no status
apdex_status=""
end
send_event("apdex_score_stage", min: apdex_score_values_array_min.round(2), status: apdex_status, points: apdex_score_array)
Data-binding is also heavily used here for rickshaw graph.
I want to be able to draw shapes and flood-fill them with various fill patterns (diagonal lines, stipple dots, etc).
The CImg library includes functions for drawing various shapes with an arbitrary line pattern for the outline. But I don't see anything about fill pattern.
I think this can probably be done using a bitwise or mathematical operator to mask the pattern onto a solid image, but I'd like to see the specific code for doing it.
Yes, polygon fill patterns can be achieved by first drawing the polygon in a solid color and then using the &= operator with a pre-loaded black-and-white pattern image.
// preload several pattern images (black and white versions of the desired fill patterns)
CImg<unsigned char> *fillPatternImages[ NumFillPatterns ] = { NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL };
fillPatternImages[ 0 ] = new CImg<unsigned char>( "256x256_bw_dotted_fill.png" );
... etc. for all patterns you want to use
// create an empty image
CImg<unsigned char> image( 256, 256, 1, 4, 0 );
// draw the polygon (or in the case of my code, any number of polygons) on the image in a solid color
if ( nShapeType == SHPT_POLYGON && fillPattern != FILL_PATTERN_NONE )
{
for( int i = 0 ; i < nShapeCount ; i++ )
{
SHPObject *psShape;
psShape = SHPReadObject( hSHP, panHits[ i ] );
for ( int part = 0 ; part < psShape->nParts ; part++ )
{
int numPoints;
if ( part < ( psShape->nParts - 1 ) )
{
numPoints = psShape->panPartStart[ part + 1 ] - psShape->panPartStart[ part ];
}
else
{
numPoints = psShape->nVertices - psShape->panPartStart[ part ];
}
CImg<int> pointImage( numPoints, 2, 1, 1, 0 );
int s = psShape->panPartStart[ part ];
for ( int p = 0 ; p < numPoints ; p++ )
{
int screenX;
int screenY;
GetTileXYFromMercatorLonLat( (float)psShape->padfX[ s + p ], (float)psShape->padfY[ s + p ], x, y, z, &screenX, &screenY );
pointImage( p, 0 ) = screenX;
pointImage( p, 1 ) = screenY;
}
image.draw_polygon( pointImage, fillColor );
}
SHPDestroyObject( psShape );
}
}
// to achieve a non-solid pattern, & the image with a pre-loaded pattern image
if ( fillPattern > -1 )
{
image &= *fillPatternImages[ fillPattern ];
}