Browsing a complex JSON - javascript

first of all, excuse me for my English, I'm French.
I am coming to you because I have a problem. I would like help browsing a complex JSON object with a loop in Javascript (because it generates itself with JOINTJS) but I am not being able to do it. I can do it manually by json [ "cells"] ["7"] ["attrs"] ["text"] ["text"]. Here is an example of JSON for one element:
{"cells":[
{
"type":"basic.Image",
"position":{
"x":50,
"y":350
},
"size":
{
"width":100,
"height":50
},
"angle":0,
"id":"4a2802a8-0bd6-4d06-9343-921092a1decd",
"z":1,
"attrs":{
"text":{
"text":"230004",
"fill":"black"
},
"image":{
"xlink:href":"/uploads/documents/computer.png",
"width":100,
"height":50
}
}
}
]}
and parse JSON :
I would get the "text": "230004" (which changes depending on the item).
Thank you in advance for your help !


You can access the object like this: obj.cells[7].attrs.text.text, where obj is a variable holding the object.
Also note that as the cells property holds an array, you can loop through that array and get each individual value separately, like this:
var obj = {
"cells": [{
"type": "basic.Image",
"position": {
"x": 50,
"y": 350
},
"size": {
"width": 100,
"height": 50
},
"angle": 0,
"id": "4a2802a8-0bd6-4d06-9343-921092a1decd",
"z": 1,
"attrs": {
"text": {
"text": "230004",
"fill": "black"
},
"image": {
"xlink:href": "/uploads/documents/computer.png",
"width": 100,
"height": 50
}
}
}, {
"type": "basic.Image",
"position": {
"x": 50,
"y": 350
},
"size": {
"width": 100,
"height": 50
},
"angle": 0,
"id": "4a2802a8-0bd6-4d06-9343-921092a1decd",
"z": 1,
"attrs": {
"text": {
"text": "230005",
"fill": "black"
},
"image": {
"xlink:href": "/uploads/documents/computer.png",
"width": 100,
"height": 50
}
}
}, {
"type": "basic.Image",
"position": {
"x": 50,
"y": 350
},
"size": {
"width": 100,
"height": 50
},
"angle": 0,
"id": "4a2802a8-0bd6-4d06-9343-921092a1decd",
"z": 1,
"attrs": {
"text": {
"text": "230006",
"fill": "black"
},
"image": {
"xlink:href": "/uploads/documents/computer.png",
"width": 100,
"height": 50
}
}
}]
}
obj.cells.forEach(function(cell) {
console.log(cell.attrs.text.text);
});

Related

TensorFlow.js PoseNet model keypoints animation

I'm using TensorFlow.js pre-trained PoseNet model to collect and store pose data from my web app. I already have some chunk of JSON with keypoints data I want to analyze to use it as training set for another neural network. Here's the keypoints data example:
"keypoints": [
{
"position": {
"y": 76.291801452637,
"x": 253.36747741699
},
"part": "nose",
"score": 0.99539834260941
},
{
"position": {
"y": 71.10383605957,
"x": 253.54365539551
},
"part": "leftEye",
"score": 0.98781454563141
},
{
"position": {
"y": 71.839515686035,
"x": 246.00454711914
},
"part": "rightEye",
"score": 0.99528175592422
},
{
"position": {
"y": 72.848854064941,
"x": 263.08151245117
},
"part": "leftEar",
"score": 0.84029853343964
},
{
"position": {
"y": 79.956565856934,
"x": 234.26812744141
},
"part": "rightEar",
"score": 0.92544466257095
},
{
"position": {
"y": 98.34538269043,
"x": 399.64068603516
},
"part": "leftShoulder",
"score": 0.99559044837952
},
{
"position": {
"y": 95.082359313965,
"x": 458.21868896484
},
"part": "rightShoulder",
"score": 0.99583911895752
},
{
"position": {
"y": 94.626205444336,
"x": 163.94561767578
},
"part": "leftElbow",
"score": 0.9518963098526
},
{
"position": {
"y": 150.2349395752,
"x": 245.06030273438
},
"part": "rightElbow",
"score": 0.98052614927292
},
{
"position": {
"y": 113.9603729248,
"x": 393.19735717773
},
"part": "leftWrist",
"score": 0.94009721279144
},
{
"position": {
"y": 186.47859191895,
"x": 257.98034667969
},
"part": "rightWrist",
"score": 0.98029226064682
},
{
"position": {
"y": 208.5266418457,
"x": 284.46710205078
},
"part": "leftHip",
"score": 0.97870296239853
},
{
"position": {
"y": 209.9910736084,
"x": 243.31219482422
},
"part": "rightHip",
"score": 0.97424703836441
},
{
"position": {
"y": 281.61965942383,
"x": 310.93188476562
},
"part": "leftKnee",
"score": 0.98368924856186
},
{
"position": {
"y": 282.80120849609,
"x": 203.81164550781
},
"part": "rightKnee",
"score": 0.96947449445724
},
{
"position": {
"y": 360.62716674805,
"x": 292.21047973633
},
"part": "leftAnkle",
"score": 0.8883239030838
},
{
"position": {
"y": 347.41177368164,
"x": 203.88229370117
},
"part": "rightAnkle",
"score": 0.8255187869072
}
]
The problem is that I need an interface to display that data, perfectly if it would be a web app interface. I've only found Google's demo app using PoseNet model with the keypoints attached on top of webcam video that is displayed in a <canvas/>, but it seems that it uses some manual canvas drawing.
So I'm interested, are there some libraries or non-JS tools for viewing the keypoints data as animated keyframes or maybe manually sliding between them? Or do I have to implement that myself? Thanks in advance.

Check this repo: https://github.com/ajaichemmanam/Posenet-ReactWebapp. It uses react to make a webapp for displaying posenet keypoints.

Heatmap js min value 0

I am trying to plot the heatmap using 'heatmap js' library .
For some value of inputs if the min value is 0 and max value is 1 then whole heatmap will be red instead of plotting actual values.
It works fine if the max value is other than 1 (ex. min: 0, max 2 or min:0 , max: 3) but only for this case the heatmap fails to map the data.
var data = null;
/* this set of data works fine though */
values = [{
"uid": "1",
"x": 100,
"y": 200,
"value": 0
},
{
"uid": "2",
"x": 100,
"y": 220,
"value": 0
},
{
"uid": "22",
"x": 100,
"y": 240,
"value": 0
},
{
"uid": "30",
"x": 100,
"y": 260,
"value": 0
},
{
"uid": "39",
"x": 100,
"y": 280,
"value": 0
},
{
"uid": "70",
"x": 100,
"y": 300,
"value": 1
},
{
"uid": "75",
"x": 120,
"y": 200,
"value": 0
},
{
"uid": "84",
"x": 140,
"y": 200,
"value": 1
},
{
"uid": "85",
"x": 160,
"y": 200,
"value": 1
},
{
"uid": "104",
"x": 180,
"y": 200,
"value": 0
},
{
"uid": "105",
"x": 200,
"y": 200,
"value": 0
}
];
var heatmap = h337.create({
container: $("#testcanvas").get(0)
});
data = {
max: 1,
min: 0,
data: values
}
heatmap.setData(data);
heatmap.repaint();
#testcanvas {
width: 600px;
height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js"></script>
<div id="testcanvas"></div>

If I understand correctly your problem then I guess Script understand 0 = false and 1 = true so you need to pass 0 as "0" and 1 as "1"
var data = null;
/* this set of data works fine though */
values = [{
"uid": "1",
"x": 100,
"y": 200,
"value": "0"
},
{
"uid": "2",
"x": 100,
"y": 220,
"value": "0"
},
{
"uid": "22",
"x": 100,
"y": 240,
"value": "0"
},
{
"uid": "30",
"x": 100,
"y": 260,
"value": "0"
},
{
"uid": "39",
"x": 100,
"y": 280,
"value": "0"
},
{
"uid": "70",
"x": 100,
"y": 300,
"value": "1"
},
{
"uid": "75",
"x": 120,
"y": 200,
"value": "0"
},
{
"uid": "84",
"x": 140,
"y": 200,
"value": "1"
},
{
"uid": "85",
"x": 160,
"y": 200,
"value": "1"
},
{
"uid": "104",
"x": 180,
"y": 200,
"value": "0"
},
{
"uid": "105",
"x": 200,
"y": 200,
"value": "0"
}
];
var heatmap = h337.create({
container: $("#testcanvas").get(0)
});
data = {
max: "1",
min: "0",
data: values
}
heatmap.setData(data);
heatmap.repaint();
#testcanvas {
width: 600px;
height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js"></script>
<div id="testcanvas"></div>

jointjs: i want to get the value of source":{"id": from json text

I want to get the value of text in " source":{"id": with JSON from this JSon text :
{
"cells":
[
{
"type": "devs.Model", "size": { "width": 40, "height": 40 },
"inPorts": [""], "outPorts": [""], "position": { "x": 103, "y": 345 },
"angle": 0, "id": "4a8edbca-dd9d-4164-bf0a-fc4cbffdca86", "z": 1,
"attrs": {
".label": { "text": "aa", "ref-x": 0.4, "ref-y": 0.2 },
"rect": { "fill": "#2ECC71" },
".inPorts circle": { "fill": "#16A085", "magnet": "active", "type": "input" },
".outPorts circle": { "fill": "#E74C3C", "type": "output" },
".inPorts>.port0>.port-label": { "text": "" },
".inPorts>.port0>.port-body": { "port": { "id": "in8", "type": "in" } },
".inPorts>.port0": { "ref": ".body", "ref-y": 0.5 },
".outPorts>.port0>.port-label": { "text": "" },
".outPorts>.port0>.port-body": {
"port": { "id": "out9", "type": "out" }
},
".outPorts>.port0": { "ref": ".body", "ref-y": 0.5, "ref-dx": 0 }
}
},
{
"type": "link", "source": {}, "target": {}, "id": "35173392-8b69-44fc-b6f4-f7c8a62319bb", "z": 2, "attrs": {}
},
{
"type": "devs.Model", "size": { "width": 40, "height": 40 },
"inPorts": [""], "outPorts": [""], "position": { "x": 603, "y": 488 },
"angle": 0, "id": "39e8bc7f-0553-4c5a-b198-b948b0905ae7", "z": 3,
"attrs": {
".label": { "text": "aaa", "ref-x": 0.4, "ref-y": 0.2 },
"rect": { "fill": "#2ECC71" },
".inPorts circle": { "fill": "#16A085", "magnet": "active", "type": "input" },
".outPorts circle": { "fill": "#E74C3C", "type": "output" },
".inPorts>.port0>.port-label": { "text": "" },
".inPorts>.port0>.port-body": { "port": { "id": "in15", "type": "in" } },
".inPorts>.port0": { "ref": ".body", "ref-y": 0.5 },
".outPorts>.port0>.port-label": { "text": "" },
".outPorts>.port0>.port-body": { "port": { "id": "out16", "type": "out" } },
".outPorts>.port0": { "ref": ".body", "ref-y": 0.5, "ref-dx": 0 }
}
},
{
"type": "link", "source": { "id": "4a8edbca-dd9d-4164-bf0a-fc4cbffdca86", "selector": "g:nth-child(1) g:nth-child(4) g:nth-child(1) circle:nth-child(1) ", "port": "out9" },
"target": { "id": "39e8bc7f-0553-4c5a-b198-b948b0905ae7", "selector": "g:nth-child(1) g:nth-child(3) g:nth-child(1) circle:nth-child(1) ", "port": "in15" },
"id": "19bfe3a0-bb48-4665-8f2b-807c3bc33451", "embeds": "", "z": 4,
"attrs": { ".marker-target": { "d": "M 10 0 L 0 5 L 10 10 z" } }
}]
}
i do
var t = JSON.stringify(graph )+"";
var obj = jQuery.parseJSON(t);
alert(obj.cells[3].source['.id']);
but it doesn’t work

You don't need to stringify and then re-parse it. Just access the field:
alert(graph.cells[3].source.id);

Remove the . from .id
var obj={"cells":[{"type":"devs.Model","size":{"width":40,"height":40},"inPorts":[""],"outPorts":[""],"position":{"x":103,"y":345},"angle":0,"id":"4a8edbca-dd9d-4164-bf0a-fc4cbffdca86","z":1,"attrs":{".label":{"text":"aa","ref-x":0.4,"ref-y":0.2},"rect":{"fill":"#2ECC71"},".inPorts circle":{"fill":"#16A085","magnet":"active","type":"input"},".outPorts circle":{"fill":"#E74C3C","type":"output"},".inPorts>.port0>.port-label":{"text":""},".inPorts>.port0>.port-body":{"port":{"id":"in8","type":"in"}},".inPorts>.port0":{"ref":".body","ref-y":0.5},".outPorts>.port0>.port-label":{"text":""},".outPorts>.port0>.port-body":{"port":{"id":"out9","type":"out"}},".outPorts>.port0":{"ref":".body","ref-y":0.5,"ref-dx":0}}},{"type":"link","source":{},"target":{},"id":"35173392-8b69-44fc-b6f4-f7c8a62319bb","z":2,"attrs":{}},{"type":"devs.Model","size":{"width":40,"height":40},"inPorts":[""],"outPorts":[""],"position":{"x":603,"y":488},"angle":0,"id":"39e8bc7f-0553-4c5a-b198-b948b0905ae7","z":3,"attrs":{".label":{"text":"aaa","ref-x":0.4,"ref-y":0.2},"rect":{"fill":"#2ECC71"},".inPorts circle":{"fill":"#16A085","magnet":"active","type":"input"},".outPorts circle":{"fill":"#E74C3C","type":"output"},".inPorts>.port0>.port-label":{"text":""},".inPorts>.port0>.port-body":{"port":{"id":"in15","type":"in"}},".inPorts>.port0":{"ref":".body","ref-y":0.5},".outPorts>.port0>.port-label":{"text":""},".outPorts>.port0>.port-body":{"port":{"id":"out16","type":"out"}},".outPorts>.port0":{"ref":".body","ref-y":0.5,"ref-dx":0}}},{"type":"link","source":{"id":"4a8edbca-dd9d-4164-bf0a-fc4cbffdca86","selector":"g:nth-child(1) g:nth-child(4) g:nth-child(1) circle:nth-child(1) ","port":"out9"},"target":{"id":"39e8bc7f-0553-4c5a-b198-b948b0905ae7","selector":"g:nth-child(1) g:nth-child(3) g:nth-child(1) circle:nth-child(1) ","port":"in15"},"id":"19bfe3a0-bb48-4665-8f2b-807c3bc33451","embeds":"","z":4,"attrs":{".marker-target":{"d":"M 10 0 L 0 5 L 10 10 z"}}}]};
alert(obj.cells[3].source['id']);

jointjs: I want to get the value of label from json text

I want to get the value of text a "Label" and the type with JSON from this JSon text :
{
"cells": [{
"type": "devs.Model",
"size": {
"width": 40,
"height": 40
},
"inPorts": [""],
"outPorts": [""],
"position": {
"x": 168,
"y": 99
},
"angle": 0,
"id": "c7cf7b2d-3b54-4dd1-9cbf-7a37a72559fc",
"z": 1,
"attrs": {
".label": {
"text": "aa",
"ref-x": 0.4,
"ref-y": 0.2
},
"rect": {
"fill": "#2ECC71"
},
".inPorts circle": {
"fill": "#16A085",
"magnet": "active",
"type": "input"
},
".outPorts circle": {
"fill": "#E74C3C",
"type": "output"
},
".inPorts>.port0>.port-label": {
"text": ""
},
".inPorts>.port0>.port-body": {
"port": {
"id": "in8",
"type": "in"
}
},
".inPorts>.port0": {
"ref": ".body",
"ref-y": 0.5
},
".outPorts>.port0>.port-label": {
"text": ""
},
".outPorts>.port0>.port-body": {
"port": {
"id": "out9",
"type": "out"
}
},
".outPorts>.port0": {
"ref": ".body",
"ref-y": 0.5,
"ref-dx": 0
}
}
}, {
"type": "link",
"source": {},
"target": {},
"id": "1e977b11-c003-4c22-ba48-c04994f63c79",
"z": 2,
"attrs": {}
}]
}
For the label , I do : document.write(jsonString.cells[0].attrs.label.text);
and for the type : (jsonString.cells[0].attrs.label.text);
var jsonString = JSON.stringify(graph);
document.write(jsonString.cells[0].type);

KineticJS: Saving to JSON: Objects saved more than once

big edit
Having analyzed my situation, it seems to be another question / another scenario, more generally about saving to json.
So, I add a new Shapegroup to a layer on my stage with the following code:
...
var selectedShape, json = null;
...
function addNode(xPos, yPos)
{
//create the new node
var node = new Kinetic.Circle({
id: 'myRect',
x: xPos,
y: yPos,
radius: 30,
fill: '#FFFFFF',
stroke: '#000000',
strokeWidth: 4,
// test: "testattr"
});
// create the label
var label = new Kinetic.Text({
x: node.getX() - node.getRadius() + 10,
y: node.getY() + node.getRadius() + 4,
text: 'node',
fontSize: 12,
fontFamily: 'Arial',
fill: 'black',
});
// create group
var nodeGroup = new Kinetic.Group({
draggable: true
});
// add shapes to group
nodeGroup.add(node);
nodeGroup.add(label);
// add group to the layer
layer.add(nodeGroup);
// add layer to the stage
stage.add(layer);
/*
* Events for Nodes
* all events for the actual states / nodes
*/
// mouse over => red stroke
node.on('mouseover', function() {
$('body').css('cursor', 'pointer');
this.setStroke('red');
layer.draw();
});
// mouse out => back in black
node.on('mouseout', function() {
if(selectedShape != this){
console.log('mouseout fired, Position: ' + node.getX());
$('body').css('cursor', 'default');
this.setStroke('#000000');
writeMessage(messageLayer, node.getX()); // just for testing purposes
layer.draw();
}
});
node.on('click tap', function(){ //relevant
if(selectedShape != null){
$('body').css('cursor', 'default');
selectedShape.setStroke('#000000');
layer.draw();
}
selectedShape = null;
console.log('clicked');
selectedShape = this;
this.setStroke('red');
layer.draw();
});
/*
* Events for Node-labels
* events for labels
*/
label.on('mouseover', function() {
$('body').css('cursor', 'text');
this.setStroke('red');
this.setStrokeWidth(0.5)
layer.draw();
});
label.on('mouseout', function() {
$('body').css('cursor', 'default');
this.setStroke('');
this.setStrokeWidth(0);
layer.draw();
});
//change the Label of a node, return 'node' if nothing entered or cancelled.
label.on('click', function(){
var lblTxt = prompt('Neue Bezeichnung:', '');
if (lblTxt) {
this.setText(lblTxt);
} else {
this.setText('node');
}
layer.draw();
});
}
Having a button 'add new State' which actually adds a new group.
Code:
$('#createNode').click(function(e){
addNode(125, 125);
});
And a Button "remove State" which removes a selected nodegroup.
Code:
$('#removeNode').click(function(e){
if(selectedShape){
var selectedGroup = selectedShape.getParent();
selectedGroup.removeChildren();
selectedGroup.remove();
layer.draw();
} else {
writeMessage(messageLayer, 'No Object chosen');
}
});
Also, there's a button 'save to json' where I want to save all the actually remaining Shapes on my Stage.
Code:
$('#saveJSON').click(function(e){
json = null;
json = stage.toJSON();
console.log(json);
});
So, now I test the following cases:
Case 1: Save empty stage
JSON output:
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
}
]
}
Status: Seems to be OK.So, the formatting issue with the last } depends on stackoverflow, it should (and is) actually be included to code tag.
Case 2: Add one Node after Saving empty Stage (double-clicking / tapping or using button is no difference here). Save again.
JSON Output:
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
}
]
}
Status: Why is there an empty Layer? But: One Group, two Objects, seems to be okay.
Case 3
Adding another Node. Save.
JSON Output:
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
},
{
"attrs": {
"draggable": true,
"x": 206,
"y": 75,
"rotation": 0,
"scaleX": 1,
"scaleY": 1,
"offsetX": 0,
"offsetY": 0,
"skewX": 0,
"skewY": 0
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "red",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
},
{
"attrs": {
"draggable": true,
"x": 206,
"y": 75,
"rotation": 0,
"scaleX": 1,
"scaleY": 1,
"offsetX": 0,
"offsetY": 0,
"skewX": 0,
"skewY": 0
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "red",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
}
]
}
Status: Here you can see the first occurence of my problem: All the objects on my stage are doubled in my JSON file on two different layers. So they are tripled and so on when adding more objects. My Problem: I want to add a data model and use the data with a database, so I think this is pretty messy but I have no clue where I went wrong.
** case 4**
Removing all but one node from my stage:
JSON Output:
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
},
{
"attrs": {},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "myRect",
"x": 125,
"y": 125,
"radius": 30,
"fill": "#FFFFFF",
"stroke": "#000000",
"strokeWidth": 4,
"test": "testattr"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 105,
"y": 159,
"text": "node",
"fontSize": 12,
"fontFamily": "Arial",
"fill": "black"
},
"className": "Text"
}
]
}
]
}
]
}
Status: Again, the remaining nodes are doubled.
** case 5**: Removing all nodes, having an empty stage again (after adding 2 nodes, then removing them)
JSON Output:
{
"attrs": {
"width": 960,
"height": 600
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": []
},
{
"attrs": {},
"className": "Layer",
"children": []
}
]
}
Status: Stage is empty, but layers still remaining. Not that nice.
Conclusion: I think I'm doing something pretty wrong. It's a lot of JSON in this question and I hope someone actually reads through this and may help me figuring out what I did wrong. Would be so great.
Best regards,
Dominik
another edit
Problem seems for me in addnode-function, using stage.add(layer); to add new shapegroups. A different way to add new groups to one layer would be much appreciated for I am fairly new to kineticjs and don't know it yet.

So, after writing out this Question, rewriting the whole question, adding another edit after further investigaten, I actually found my problem and I think I want to share it with you:
At the addnode-function, i called stage.add(layer) - as the code says, it adds a new layer for each new Shapegroup. This caused the behaviour I explained in the question.
Now I removed stage.add(layer) from addNode to my init()-function which is only called at startup. At addNode, I now just say layer.add(nodeGroup); layer.draw(); and it works like a charm now. Sorry for the inconvenience :( I had a knot in my brain.

Categories