I always got the error:
"TypeError: Kinetic[type] is not a constructor"
"ReferenceError: reference to undefined property obj.nodeType"
when i try to load one json.
json = stage.toJSON();
stage = Kinetic.Node.create(json, 'myCanvas');
the method _createNode from Kineticjs 4.3.3
var no = new Kinetic[type](obj.attrs);
on my canvas I have a simple group
var circle1 = new Kinetic.Circle({
x: 40,
y: 50,
radius: 42,
fill: 'white',
stroke: 'black',
strokeWidth: 1,
draggable: false
});
var polygon1Tab1 = new Kinetic.RegularPolygon({
x: 40,
y: 50,
radius: 27,
sides: 4,
stroke: 'black',
strokeWidth: 4,
draggable: false
});
polygon1Tab1.rotateDeg(45);
var group1 = new Kinetic.Group({
draggable: true,
});
group1.add(circle1.clone());
group1.add(polygon1.clone());
What is "polygon1" here?
group1.add(polygon1.clone());
I created this example. Everything forks fine: http://jsfiddle.net/lavrton/N3UPX/
'polygon1' It's just one name ... a change!!!!
I take your code and place to run and continue with the same error!
when i print the json I noticed that it has an error!
he puts this "children": "[]" and should not have quotes in brackets
if I copy and put my string this fixed string corrected wheel normal!!
I made a method to remove the error .... Now I'm with an error
SyntaxError: JSON.parse: expected property name or '}'
var json = polygonLayer.toJSON();
json = json.replace('"children":"', '"children":');
json = json.substring(0, json.length-2) + json.substring(json.length-1, json.length);
whereas using the same fixed string works!
I'm using version 4.3.3
this work
var json = '{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false,"dragOnTop":true},"nodeType":"Layer","children":[{\"attrs\": {\"width\": 600, \"height\": 400, \"cornerRadius\": 0, \"fillEnabled\": true, \"strokeEnabled\": true, \"shadowEnabled\": true, \"dashArrayEnabled\": true, \"fillPriority\": \"color\", \"visible\": true, \"listening\": true, \"opacity\": 1, \"x\": 0, \"y\": 0, \"scale\": {\"x\": 1, \"y\": 1}, \"rotation\": 0, \"offset\": {\"x\": 0, \"y\": 0}, \"draggable\": false, \"dragOnTop\": true, \"fill\": \"white\"}, \"nodeType\": \"Shape\", \"shapeType\": \"Rect\"}]}';
layer = Kinetic.Node.create(json, 'canvas');
but this dont work
var json = layer.toJSON();
layer = Kinetic.Node.create(json, 'canvas');
Related
I am trying to use PLOTLY.JS to plot 2 line graphs. But nothing is showing up on the screen except an empty graph. Any help? It works fine with one lines, bar charts, etc.
var plot_data = {}
var trace1 = {
x: [4, 3, 1],
y: [1, 3, 6],mode: 'lines',
type: 'scatter'
};
var trace2 = {
x: [6, 8, 9],
y: [1, 2, 4],mode: 'lines',
type: 'scatter'
};
var data = [trace1, trace2];
plot_data.push(data);
var layout =
{
title: { text: 'Task Plot', font: { family: 'Courier New, monospace', size: 24 }, xref: 'paper', x: 0.05,}
};
//var config = {responsive : true};
Tester = document.getElementById('myDash');
Plotly.newPlot(Tester, plot_data, layout);
If you look at the documentation here, you'll want to pass an array of traces to Plotly.newPlot, so you can replace plot_data with data:
Plotly.newPlot(Tester, data, layout);
I have a scatter plot made using plotly.py and I would like to color certain points in the scatter plot with a different color based on a certain condition. I have attached a sample code below :
import plotly.plotly as py
import plotly.graph_objs as go
from plotly.offline import plot
data = [4.1, 2.1, 3.1, 4.4, 3.2, 4.1, 2.2]
trace_1 = go.Scatter(
x = [1, 2, 3, 4, 5, 6, 7],
y = data
)
layout = go.Layout(
paper_bgcolor='rgb(255,255,255)',
plot_bgcolor='rgb(229,229,229)',
title = "Sample Plot",
showlegend = False,
xaxis = dict(
mirror = True,
showline = True,
showticklabels = True,
ticks = 'outside',
gridcolor = 'rgb(255,255,255)',
),
yaxis = dict(
mirror = True,
showline = True,
showticklabels = False,
gridcolor = 'rgb(255,255,255)',
),
shapes = [{
'type': 'line',
'x0': 1,
'y0': 4,
'x1': len(data),
'y1': 4,
'name': 'First',
'line': {
'color': 'rgb(147, 19, 19)',
'width': 1,
'dash': 'longdash'
}
},
{
'type': 'line',
'x0': 1,
'y0': 3,
'x1': len(data),
'y1': 3,
'line': {
'color': 'rgb(147, 19, 19)',
'width': 1,
'dash': 'longdash'
}
}
]
)
fig = dict(data = [trace_1], layout = layout)
plot(fig, filename = "test_plot.html")
Here's the output Output Scatter plot
Here the long dashed horizontal lines have corresponding x values 4 & 3 respectively. As one can see, points 1, 2, 4, 6 and 7 lie outside the dashed lines. Is there a way to color them differently based on the condition (x > 3) and (x<4).
Here's a reference to something I found while searching for a solution :
Python Matplotlib scatter plot: Specify color points depending on conditions
How can I achieve this in plotly.py ?
You can accomplish this by using a numeric array to specify the marker color. See https://plot.ly/python/line-and-scatter/#scatter-with-a-color-dimension.
Adapting your particular example to display red markers below 3, green markers above 4, and gray markers between 3 and 4:
import plotly.graph_objs as go
from plotly.offline import init_notebook_mode, iplot
init_notebook_mode()
data = [4.1, 2.1, 3.1, 4.4, 3.2, 4.1, 2.2]
color = [
-1 if v < 3 else 1 if v > 4 else 0
for v in data
]
colorscale = [[0, 'red'], [0.5, 'gray'], [1.0, 'green']]
trace_1 = go.Scatter(
x = [1, 2, 3, 4, 5, 6, 7],
y = data,
marker = {'color': color,
'colorscale': colorscale,
'size': 10
}
)
layout = go.Layout(
paper_bgcolor='rgb(255,255,255)',
plot_bgcolor='rgb(229,229,229)',
title = "Sample Plot",
showlegend = False,
xaxis = dict(
mirror = True,
showline = True,
showticklabels = True,
ticks = 'outside',
gridcolor = 'rgb(255,255,255)',
),
yaxis = dict(
mirror = True,
showline = True,
showticklabels = False,
gridcolor = 'rgb(255,255,255)',
),
shapes = [{
'type': 'line',
'x0': 1,
'y0': 4,
'x1': len(data),
'y1': 4,
'name': 'First',
'line': {
'color': 'rgb(147, 19, 19)',
'width': 1,
'dash': 'longdash'
}
},
{
'type': 'line',
'x0': 1,
'y0': 3,
'x1': len(data),
'y1': 3,
'line': {
'color': 'rgb(147, 19, 19)',
'width': 1,
'dash': 'longdash'
}
}
]
)
fig = dict(data = [trace_1], layout = layout)
iplot(fig)
Hope that helps!
I'm noob at Phaser 3 and trying to add a group (2 sprites) in a follower. The code works when I use a sprite at 'add.follower'.
function create () {
var bola = this.add.group();
bola.create(0, 0, 'bola15');
bola.create(0, 0, 'bolasombra');
var line1 = new Phaser.Curves.Line([ 100, 100, 500, 100 ]);
var line2 = new Phaser.Curves.Line([ 500, 100, 500, 500 ]);
path1 = this.add.path();
path1.add(line1);
path1.add(line2);
var mover = this.add.follower(path1, 0, 0, bola);
mover.startFollow({
positionOnPath: true,
duration: 3000,
yoyo: false,
repeat: 0,
rotateToPath: false,
verticalAdjust: true
});
}
That's what I got:
Any solution for that, or other way to make something like that?
Edit:
Have tried with 'container' and got the same result:
bola = this.add.container(0,0);
bola1 = this.add.sprite(0,0,'bola15');
bola2 = this.add.sprite(0,0,'bolasombra');
bola.add(bola1);
bola.add(bola2);
At current state, PathFollower is set up to take in only a single GameObject. Unfortunately, this means you'll have to add your group items to a follower one by one. You can set up a loop to run through your group items and create the path followers like this:
for (var i = 0; i < bola.children.entries.length; i++) {
var mover = this.add.follower(path1, 0, 0, bola.children.entries[i].texture.key);
mover.startFollow({
positionOnPath: true,
duration: 3000,
yoyo: false,
repeat: 0,
rotateToPath: false,
verticalAdjust: true
});
}
Check this example from the Phaser 3 labs to see another example of how you can use multiple items with the same path if the group structure isn't important to your game.
I would like to have a trailing orange path behind movement of my billboard entity. I am pro grammatically controlling its movement (it is coming from a live remote sensor). The the actual SVG/Canvas for the symbol comes from: https://github.com/spatialillusions/milsymbol
But the point is that I am clearly making an error in how to setup the PATH attribute of the entity. I don't see a trailing or leading path. What am I doing wrong?
makeGlyph(sprite) {
let milSym = milSymbols[sprite.type]
if (milSym === undefined) milSym = milSymbols["UFO"]
sprite.mps = 0
sprite.symbol = milSym
let sym2 = new ms.Symbol(milSym, { size: 26, type: sprite.marking, speed: sprite.mps + ' mps', direction: sprite.heading, infoColor: "red" })
let glyph = new Cesium.Entity({
name: sprite.marking,
id: sprite.id,
position: Cesium.Cartesian3.fromDegrees(sprite.lon, sprite.lat, sprite.altitude),
billboard: {
image: sym2.asCanvas(), //Get the canvas for the billboard
// heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
pixelOffset: new Cesium.Cartesian2(-sym2.markerAnchor.x, -sym2.markerAnchor.y), // Symbol offset
eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // default
verticalOrigin: Cesium.VerticalOrigin.TOP
},
path: {
leadTime: 100,
trailTime: 100,
width: 1,
material: new Cesium.ColorMaterialProperty({
color : Cesium.Color.ORANGE,
})
},
label: {
text: sprite.marking,
font: '14pt monospace',
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 1,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(0, -20)
}
})
sprite.glyph = glyph
this.infoBox(sprite)
this.viewer.entities.add(glyph)
}
updateGlyph(sprite) {
this.viewer.entities.suspendEvents()
let loc = Cesium.Cartesian3.fromDegrees(sprite.lon, sprite.lat, sprite.altitude)
sprite.mps = sprite.speed[0] + sprite.speed[1] + sprite.speed[2]
sprite.glyph.position = loc;
this.infoBox(sprite)
this.viewer.entities.resumeEvents()
}
I'm trying to colour the rows of paper-datatable
using the attribute customRowStyle
This Plunk of paper-datatable is working, rows are colored, but it's not enclosed as separate Polymer element.
I need to enclose paper-datatable in separate element.
Need some help to fix this:
how to make customRowStyle(item) to get called on table render and pass the item?
<paper-datatable data="{{data}}"
custom-row-style="{{generateRowCss}}"
on-row-tap="row_tap">
<paper-datatable-column header="title" property="title"></paper-datatable-column>
<paper-datatable-column header="Calories" property="calories"></paper-datatable-column>
<paper-datatable-column header="Fat (g)" property="fat" ></paper-datatable-column>
</paper-datatable>
...
generateRowCss: function (item) {
console.log('theming_2 generateRowCss:');
var levels = ['#FFFFFF', '#FFEBEE', '#FFCDD2', '#EF9A9A'];
var min = 150;
var max = 450;
var level = Math.floor((item.calories - min) / (max - min) * levels.length);
return 'background:' + levels[level] + ';';
},
EDIT:
Plunk with #a1626 solution.
As generateRowCssthat is passed to customRowStyle is a function rather than the return value of the function(which is what your code is passing) you'll have to do something like this. Instead of creating a function generateRowCss create a property with the same name, initialize it as Object and return its value as whole function
properties: {
data: {
type: Array,
notify: true,
value: [
{id: 0, title: 'Frozen yogurt', calories: 159, fat: 6},
{id: 1, title: 'Ice cream sandwich', calories: 237, fat: 9},
{id: 2, title: 'Eclair', calories: 262, fat: 16},
{id: 3, title: 'Cupcake', calories: 305, fat: 3.7},
],
},
generateRowCss:{
type:Object, //this is optional you can skip this also
value:function(){
return function(item){
console.log('app.generateRowCss');
console.log(item);
var levels = ['#FFFFFF', '#FFEBEE', '#FFCDD2', '#EF9A9A'];
var min = 150;
var max = 450;
var level = Math.floor((item.calories - min)/(max-min)*levels.length);
console.log(level);
console.log('background:'+levels[level]+';');
return 'background:'+levels[level]+';';
}
}
}
},
Pasted above are the properties of your custom element. Here is the working plunkr