How can I cumulate _.zip, _.map _.reduce operations?

How can I cumulate _.zip, _.map _.reduce operations? - javascript

Given a JSON as this one :
var data = {
"entries": [
{
"fund": 1,
"values": [
{ "name": "alm1", "splits": [ 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]},
{ "name": "alm2", "splits": [ 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]}
]
},
{
"fund": 2,
"values": [
{ "name": "alm1", "splits": [ 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ "name": "alm2", "splits": [ 1.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ "name": "alm3", "splits": [ 2, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0] }
]
}
]
};
I would be able to set "sums" property as it with lodash/underscore :
var expected = {
"entries": [
{
"fund": 1,
"values": [
{ "name": "alm1", "splits": [ 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]},
{ "name": "alm2", "splits": [ 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]}
],
"sums": [ 0.5, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]
},
{
"fund": 2,
"values": [
{ "name": "alm1", "splits": [ 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ "name": "alm2", "splits": [ 1.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
{ "name": "alm3", "splits": [ 2, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0] }
],
"sums": [ 4, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]
}
],
"sums": [ 4.5, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0]
};
I've tried different methods with lodash, without success.
_.map(), _.reduce() or _.zip()
Is it possible to cumulate/chain call to obtain the expected result?
Thanks a lot for your help.

I think unzip() is better suited for what you're doing:
var a1 = [ 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
a2 = [ 1.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],
a3 = [ 2, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
_([a1, a2, a3])
.unzip()
.map(_.sum)
.value()
// → [4, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]

Related

Is there a way to convert mp4/wav files to a byte array in nativescript?

Working on trying to write mp4 and wav files to byte arrays, so that I am able to share them with other apps. Would appreciate any help. Thanks

If I assume if you're using python then its same as reading text_file or video_file.
Let's assume if your filename is test.ts then you can use below function.
def get_bytes_from_file(filename):
return open(filename, "rb").read()
get_bytes_from_file("test.ts")
You can also use scipy inbuild function scipy.io.wavfile.read and/or scipy.io.wavfile.write.Refer this.
If you have decimal value that you would like to convert to binary you can use the following:
In [3]: import numpy as np
...:
...: def bitfield(n):
...: """Convert integer into bitfield (as list)
...: From StackOverflow: http://stackoverflow.com/a/10322018/
...: """
...: return [int(digit) for digit in bin(n)[2:]]
...:
In [4]: p = 0x91
...: p = np.array(bitfield(p))
In [5]: p
Out[5]: array([1, 0, 0, 1, 0, 0, 0, 1])
If you want to convert string message to binary you can use this:
In [1]: import numpy as np
import codecs
In[2]: s = '44.6488N,63.5752W,20.5,2.25,125.6,11.5,6.8,T10.5,271.4,35.5,44.6491N,63.5755W'.encode('utf-8')
In[4]: s.hex()
Out[4]: '34342e363438384e2c36332e35373532572c32302e352c322e32352c3132352e362c31312e352c362e382c5431302e352c3237312e342c33352e352c34342e363439314e2c36332e3537353557'
In[10]: print(codecs.decode("34342e363438384e2c36332e35373532572c32302e352c322e32352c3132352e362c31312e352c362e382c5431302e352c3237312e342c33352e352c34342e363439314e2c36332e3537353557", "hex").decode('utf-8'))
Out[10]: 44.6488N,63.5752W,20.5,2.25,125.6,11.5,6.8,T10.5,271.4,35.5,44.6491N,63.5755W
In[11]: hex_string = "34342e363438384e2c36332e35373532572c32302e352c322e32352c3132352e362c31312e352c362e382c5431302e352c3237312e342c33352e352c34342e363439314e2c36332e3537353557"
for i in range(len(hex_string)//2):
print('{0}'.format(hex_string[i*2:i*2+2]), end=":")
Out[11]: 34:34:2e:36:34:38:38:4e:2c:36:33:2e:35:37:35:32:57:2c:32:30:2e:35:2c:32:2e:32:35:2c:31:32:35:2e:36:2c:31:31:2e:35:2c:36:2e:38:2c:54:31:30:2e:35:2c:32:37:31:2e:34:2c:33:35:2e:35:2c:34:34:2e:36:34:39:31:4e:2c:36:33:2e:35:37:35:35:57:
In[12]: p = '34342e363438384e2c36332e35373532572c32302e352c322e32352c3132352e362c31312e352c362e382c5431302e352c3237312e342c33352e352c34342e363439314e2c36332e3537353557'
p = int(p, 16)
p = np.array(bitfield(p))
p
Out[12] : array([1, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 1, 1, 0,
0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0,
0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 1, 0,
1, 1, 0, 0, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0,
1, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1,
0, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1,
1, 1, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 1, 1,
0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 1, 0, 1, 0, 0,
1, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 1, 0, 1, 1, 1, 0,
0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1,
0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 1, 1,
0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0,
1, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1,
0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1,
0, 0, 0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1,
1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0,
1, 1, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 0,
0, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0,
1, 0, 0, 0, 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 1, 0,
1, 1, 1, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0,
1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 1, 0,
0, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 1,
0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1,
0, 1, 1, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0,
1, 1, 0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 1, 0, 0, 0, 1, 0, 1, 1, 0, 0,
0, 0, 1, 1, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1, 1,
1, 0, 0, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1, 0, 0, 1, 1,
0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1])

How to return a number from an array from a specific x and y location?

I am making a super mario game and the map for it is made from an array. like so
const map =
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,];
In order to make collisions i want to find the index of the block that is under mario, and check whether its 0 or something else, which would allow me to make him stop falling when a block with the index 1 is under him.
I am trying to write it like this:
export function findBlockUnder(posX: number, posY: number) {
for (let index = 0; index < map.length; index++) {
return map[index] }
}
But this returns the first index of the array.
Is there a way to get the index from the position Y of mario?

assuming you have defined the width and height of your map :
function findBlockUnder(posX: number, posY: number) {
return map[posY * width + posX]
}

Assuming the entries in the array represent left to right, top to bottom, and you know how many columns there are in the map, you can look up a given position via:
const GRID_COLUMNS = 32; // or whatever
function findBlockUnder(x, y) {
return map[ y * GRID_COLUMNS + x ]
}
However, if you broke your map into a two-dimensional array such that each entry represented a row of cell values, you could then access a given cell via rows[y][x]. (It might be more intuitive if it were chunked into columns instead of rows so the x would come first, but for the purposes of this discussion this is fine.)
The snippet below demonstrates this idea, rendering the map onto a canvas and then highlighting a cell at random and displaying its coordinates and value. Most of the code here is to support the drawing and highlighting but it seemed useful to have a visualization.
const map = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
];
// splits the input array into arrays of the given length
function chunk(data, size, prev = []) {
prev.push(data.splice(0, size));
return data.length ? chunk(data, size, prev) : prev;
}
const numCols = 32;
// break map into an array rows, 32 cells per row
// so we can access a row via rows[y], and a specific
// cell via rows[y][x]
const rows = chunk(map, numCols);
// random cell highlighting interval
const rate = 2000;
// container for text output
const outputDiv = document.getElementById('output');
// get the canvas and its drawing context
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// compute cell size based on canvas size
// and the number of rows and columns
const cellSize = {
width: ctx.canvas.width / numCols,
height: ctx.canvas.height / rows.length
}
// define some colors
const colors = ['bisque', 'tomato'];
// gap between cells
const inset = 1;
// initial paint of the cells
rows.forEach((columns, r) => {
columns.forEach((value, c) => {
drawCell(c, r);
});
})
// utility for filling the cell at x, y.
// if color isn't unspecified it'll use the map's value to get a color
function drawCell(x, y, color) {
ctx.fillStyle = color || colors[rows[y][x] % colors.length];
ctx.fillRect(x * cellSize.width + inset, y * cellSize.height + inset, cellSize.width - inset, cellSize.height - inset);
}
// chooses a cell at random and highlights it
function highlightRandomCell() {
// choose a random coordinate
const x = Math.floor(Math.random() * (numCols - 1));
const y = Math.floor(Math.random() * rows.length);
// get the cell's value
const cellValue = rows[y][x];
// display the coordinate and its value in the output div
outputDiv.innerHTML = `(${x}, ${y}) ${cellValue}`;
// fill the cell
drawCell(x, y, 'black');
// reset the cell
setTimeout(() => drawCell(x, y), rate);
}
// highlight some cells
setInterval(highlightRandomCell, rate);
<canvas width="200" height="112"></canvas>
<div id="output"></div>

Second series not displaying in Highcharts

I am trying to create a graph to display performance of a system. My issue is that Higcharts, for some reason, won't recognize that I have more than one series. The first series displays perfectly, however the second is no where to be seen.
I am using Django 1.8 to loop the data from dictionaries.
My series code:
series: [
{% for ID, run in attDict.items|sort %}
{
yAxis: 0,
id: "Run" + {{forloop.counter}},
name: "RunID " + {{ID}},
color: getLineColor({{ID}}),
data: {{run}},
marker: {
fillColor: getFillColor({{forloop.counter}}),
},
visible: false
},
{% endfor %}
{% for key, task in TaskE.items|sort %}
{
yAxis: 1,
id: "during",
linkedTo: "Run" + {{forloop.counter}},
name: "Duringtask for run " + {{key}}
type: 'area',
color: '#12e000',
fillOpacity: 0.3,
data: {{task}},
visible: fasle
}{% if forloop.last %}{% else %},{% endif %}
{% endfor %}
]
The output look like this:
series: [
{
yAxis: 0,
id: "Run" + 1,
name: "RunID " + 250,
color: getLineColor(250),
data: [0, 0, 0, 0, 0, 0, 6, 33, 27, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 83, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
marker: {
fillColor: getFillColor(1),
},
visible: false
},
{
yAxis: 0,
id: "Run" + 2,
name: "RunID " + 256,
color: getLineColor(256),
data: [0, 0, 0, 1, 0, 0, 0, 0],
marker: {
fillColor: getFillColor(2),
},
visible: false
},
{
yAxis: 0,
id: "Run" + 3,
name: "RunID " + 257,
color: getLineColor(257),
data: [0, 0, 0, 1, 0, 0, 0, 0],
marker: {
fillColor: getFillColor(3),
},
visible: false
},
{
yAxis: 0,
id: "Run" + 4,
name: "RunID " + 265,
color: getLineColor(265),
data: [83, 0, 101, 0, 0, 96, 0],
marker: {
fillColor: getFillColor(4),
},
visible: false
},
{
yAxis: 0,
id: "Run" + 5,
name: "RunID " + 295,
color: getLineColor(295),
data: [14, 3, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 70, 0, 0, 0, 37, 0, 0, 0, 0, 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 83, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 52, 0, 0, 0, 0, 0, 0, 0, 45, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 77, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 67, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 88, 0, 0, 0, 0, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 32, 0, 0, 3, 0, 58, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0],
marker: {
fillColor: getFillColor(5),
},
visible: false
},
{
yAxis: 0,
id: "Run" + 6,
name: "RunID " + 296,
color: getLineColor(296),
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 116, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 0, 0, 0, 1, 0, 0, 0, 0, 28, 15],
marker: {
fillColor: getFillColor(6),
},
visible: false
},
]

You are explicitly telling the chart not to show the series in the legend by using this:
linkedTo: "Run" + {{forloop.counter}}
When two series are linked, only the first one appears in the legend.
Toggling the visibility of this also toggles the linked series.
Reference:
http://api.highcharts.com/highcharts/plotOptions.series.linkedTo
Remove the linkedTo property from the second loop, and it should work fine.

JavaScript JSON array undefined

I am trying to read in a tilemap that is in a JSON format. Here's the tilemap:
var obj = {
"height": 20,
"layers": [{
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 6, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 9, 9, 9, 9, 0, 0, 0, 0, 0, 3, 7, 7, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 7, 7, 7, 7, 7, 3, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 7, 7, 8, 8, 7, 7, 8, 8, 8, 8, 8, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 7, 7, 8, 7, 7, 8, 7, 7, 7, 7, 8, 8, 8, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
"height": 20,
"name": "Tile Layer 1",
"opacity": 1,
"type": "tilelayer",
"visible": true,
"width": 50,
"x": 0,
"y": 0
}],
"nextobjectid": 1,
"orientation": "orthogonal",
"properties": {},
"renderorder": "right-down",
"tileheight": 64,
"tilesets": [{
"firstgid": 1,
"image": "tileset.png",
"imageheight": 128,
"imagewidth": 320,
"margin": 0,
"name": "tileset",
"properties": {},
"spacing": 0,
"tilecount": 10,
"tileheight": 64,
"tilewidth": 64
}],
"tilewidth": 64,
"version": 1,
"width": 50
};
Here's the code I use to read it in:
var levelData = JSON.parse(xhr.responseText);
var lvlHeight = levelData.height;
var lvlWidth = levelData.width;
var tilesets = levelData.tilesets;
var tilesetWidth = tilesets[0].imagewidth;
var tilesetHeight = tilesets[0].imageheight;
var tileWidth = levelData.tilesets[0].tilewidth;
var tileHeight = levelData.tilesets[0].tileheight;
var tileCount = levelData.tilesets[0].tilecount;
var layers = levelData.layers;
// print out levelData to see if it works
for(var j = 0; j < levelData.layers[0].data.length; ++j) {
console.log(levelData.layers[0].data[i]);
}
for(var i = 0; i < layers.length; ++i) {
that.mapLayers.push(new TileMapLayer(lvlWidth, lvlHeight, tileWidth, tileHeight, layers[i].name, tilesetWidth, tilesetHeight, tileCount, layers[i].data));
}
However, whenever I try to log it to the console, I always get undefined. Could someone please tell me what's wrong?

you are printing i in index instead of j
for (var j = 0; j < levelData.layers[0].data.length; ++j) {
console.log(levelData.layers[0].data[i]); // <= should be j
}
Try like this
for (var j = 0; j < levelData.layers[0].data.length; ++j) {
console.log(levelData.layers[0].data[j]);
}

Phaser, Tileset and Tilemap transparency

I use Tiled to make a map. However when rendering the map in Phaser the transparency doesn't seem to work.
It works as expected in Tiled:
Unfortunately not when rendered with Phaser:
main.js:
var game = new Phaser.Game(320, 320, Phaser.AUTO, 'mquest', { preload: preload, create: create });
function preload() {
game.load.tilemap('test', 'assets/js/maps/test.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('forest_tiles', 'assets/img/forest_tiles.png');
}
function create() {
game.stage.backgroundColor = '#787878';
map = game.add.tilemap('test');
map.addTilesetImage('Forest', 'forest_tiles');
backgroundLayer = map.createLayer('Background');
foregroundLayer = map.createLayer('Foreground');
topLayer = map.createLayer('Top');
backgroundLayer.resizeWorld();
}
And the test.json:
{ "height":20,
"layers":[
{
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
"height":20,
"name":"Background",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 20, 21, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":20,
"name":"Foreground",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":20,
"name":"Top",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"x":0,
"y":0
}],
"orientation":"orthogonal",
"properties":
{
},
"renderorder":"right-down",
"tileheight":16,
"tilesets":[
{
"firstgid":1,
"image":"..\/..\/img\/forest_tiles.png",
"imageheight":160,
"imagewidth":240,
"margin":0,
"name":"Forest",
"properties":
{
},
"spacing":0,
"tileheight":16,
"tilewidth":16,
"transparentcolor":"#ffffff"
}],
"tilewidth":16,
"version":1,
"width":20
}

I thought the engine handled the transparency if a transparentcolor property was set as it was through Tiled, but apparently not.
The problem was solved when just transparent the white color through a software like Photoshop or Gimp.

Develop Reference

JavaScript is the programming language of the Web.

How can I cumulate _.zip, _.map _.reduce operations? - javascript

I think unzip() is better suited for what you're doing: var a1 = [ 0.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], a2 = [ 1.5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], a3 = [ 2, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]; _([a1, a2, a3]) .unzip() .map(_.sum) .value() // → [4, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]

Related

Is there a way to convert mp4/wav files to a byte array in nativescript?

How to return a number from an array from a specific x and y location?

Second series not displaying in Highcharts

JavaScript JSON array undefined

Phaser, Tileset and Tilemap transparency

Categories

Resources