react-spring Error: <path> attribute d: Expected number - reactjs
I am using React-spring to morph my svgs - in this case, rather than a true morph, I'm really just translating particular parts of a large and complex svg on the y axis. I have a button that swaps the related vectors when clicked, so part of the image moves up on the first click, and back on the second.
When I first load the svg, I don't have any errors. I start to get errors after the first click, and the errors are related to this set of vectors:
"M0 834.5L31.6776 810.203L22.1257 798.768L36.2022 791.807H53.2951L79.9399 755.511V747.059L89.9945 740.098H107.087L121.164 713.249L136.749 700.819L158.366 690.875V679.44L179.481 668.501L195.066 637.178L208.137 619.279V586.961V570.056V559.118L195.066 546.688L179.481 516.359L219.197 519.839H244.836V475.588H266.956H297.623L306.169 391.562H323.262V342.339V338.859H324.268V342.339H327.284V339.853L329.295 338.859L331.306 339.853V342.339H334.825V339.853L336.836 338.859L338.847 339.853V342.339H342.869V339.853L344.88 338.859L346.891 339.853V342.339H349.907L357.448 278.2L349.907 260.798V248.866L372.53 236.933L392.639 248.866V260.798L386.607 278.2L392.639 309.027H396.158V306.541L398.169 305.546L400.18 306.541V309.027H404.202V306.541L406.213 305.546L408.224 306.541V309.027H412.246V306.541L414.257 305.546L416.268 306.541V309.027H420.29V306.541L422.301 305.546L424.311 306.541V309.027H428.333V306.541L430.344 305.546L432.355 306.541V309.027H436.377V306.541L438.388 305.546L440.399 306.541V309.027H444.421V306.541L446.432 305.546L448.443 306.541V309.027H452.464V306.541L454.475 305.546L456.486 306.541V309.027H460.508V306.541L462.519 305.546L464.53 306.541V309.027H468.552V306.541L470.563 305.546L472.574 306.541V309.027H476.596V306.541L478.607 305.546L480.617 306.541V309.027H484.137L489.667 278.2L480.617 260.798V248.866L497.71 236.933L518.322 248.866V260.798L512.29 278.2L528.88 342.339H530.388V339.853L532.399 338.859L534.41 339.853V342.339H538.432V339.853L540.443 338.859L542.454 339.853V342.339H547.481L558.541 278.2L547.481 260.798V248.866L569.098 236.933L589.208 248.866V260.798L578.148 278.2L589.208 343.831H591.721V341.345L593.732 340.35L595.743 341.345V343.831H599.765V341.345L601.776 340.35L603.787 341.345V343.831H607.809V340.35H608.814V343.831V384.104L634.956 439.79H636.464V437.304L638.475 436.31L640.486 437.304V439.79H644.508V437.304L646.519 436.31L648.53 437.304V439.79H652.552V437.304L654.563 436.31L656.574 437.304V439.79H660.791V437.304L662.607 436.31L664.617 437.304V439.79H668.639V437.304L670.65 436.31L672.661 437.304V439.79H676.683V437.304L678.694 436.31L680.705 437.304V439.79H684.727V436.31H685.732V439.79V494.233H723.437V559.118L1103 548.676V923H0V834.5Z",
"M0 609.069L32.6776 585.203L23.1257 573.768L37.2022 566.807H54.2951L80.9399 530.511V522.059L90.9945 515.098H108.087L122.164 488.249L137.749 475.819L159.366 465.875V454.44L180.481 443.501L196.066 412.178L209.137 394.279V361.961V345.056V334.118L196.066 321.688L180.481 291.359L220.197 294.839H245.836V250.588H267.956H298.623L307.169 166.562H324.262V117.339V113.859H325.268V117.339H328.284V114.853L330.295 113.859L332.306 114.853V117.339H335.825V114.853L337.836 113.859L339.847 114.853V117.339H343.869V114.853L345.88 113.859L347.891 114.853V117.339H350.907L358.448 53.2003L350.907 35.7983V23.8655L373.53 11.9328L393.639 23.8655V35.7983L387.607 53.2003L393.639 84.0266H397.158V81.5406L399.169 80.5462L401.18 81.5406V84.0266H405.202V81.5406L407.213 80.5462L409.224 81.5406V84.0266H413.246V81.5406L415.257 80.5462L417.268 81.5406V84.0266H421.29V81.5406L423.301 80.5462L425.311 81.5406V84.0266H429.333V81.5406L431.344 80.5462L433.355 81.5406V84.0266H437.377V81.5406L439.388 80.5462L441.399 81.5406V84.0266H445.421V81.5406L447.432 80.5462L449.443 81.5406V84.0266H453.464V81.5406L455.475 80.5462L457.486 81.5406V84.0266H461.508V81.5406L463.519 80.5462L465.53 81.5406V84.0266H469.552V81.5406L471.563 80.5462L473.574 81.5406V84.0266H477.596V81.5406L479.607 80.5462L481.617 81.5406V84.0266H485.137L490.667 53.2003L481.617 35.7983V23.8655L498.71 11.9328L519.322 23.8655V35.7983L513.29 53.2003L529.88 117.339H531.388V114.853L533.399 113.859L535.41 114.853V117.339H539.432V114.853L541.443 113.859L543.454 114.853V117.339H548.481L559.541 53.2003L548.481 35.7983V23.8655L570.098 11.9328L590.208 23.8655V35.7983L579.148 53.2003L590.208 118.831H592.721V116.345L594.732 115.35L596.743 116.345V118.831H600.765V116.345L602.776 115.35L604.787 116.345V118.831H608.809V115.35H609.814V118.831V159.104L635.956 214.79H637.464V212.304L639.475 211.31L641.486 212.304V214.79H645.508V212.304L647.519 211.31L649.53 212.304V214.79H653.552V212.304L655.563 211.31L657.574 212.304V214.79H661.791V212.304L663.607 211.31L665.617 212.304V214.79H669.639V212.304L671.65 211.31L673.661 212.304V214.79H677.683V212.304L679.694 211.31L681.705 212.304V214.79H685.727V211.31H686.732V214.79V269.233H724.437V334.118L1104 323.676V698H1L0.5Z"
error:
Error: <path> attribute d: Expected number, "…323.676V698H1L0.5Z".
After the second click, the errors explode in number, but appear to be for vectors I can't find in my svg (this is when the image returns to it's original position). I'm not sure where the numbers are coming from, which makes me think maybe they are generated by Spring. At any rate, everything looks fine in the actual browser window, so I don't think these errors are legit (in the sense that the image looks good, and the terminal point looks right, the animation happens, and even can be repeated...so what exactly is it complaining about).
The question is:
Is there actually something wrong with these vectors?
If not, I'm not sure how to fix the error. I'm not sure why d would expect a number when it should expect a set of svg instructions. Any advice would be welcome!
The spring code is here:
const animationProps = useSpring({
castle: castleCoord[curIndex],
//moon: moonsCY[curIndex]
});
I am trying to move the castle independent of several elements in the svg.
I get the exact same error by creating a bare minimum svg tag and adding 2 path elements to it with the "d" attributes set to the vector strings you provided, so I don't think its anything specific to React-spring. Browsers are extremely forgiving with how they parse svg xml so even when there are errors it often still renders fine.
If I put that same svg through the svg minifier/validator tool here: https://jakearchibald.github.io/svgomg/ , and then use that cleaned version in the html instead, there are no more errors. But since i'm not sure what its supposed to look like I can't really say if that's a solution or not, but its worth trying.
It turned out to be something about the editor I had used to create the SVGs. After making changes to the base files, I was able to fix related arity errors, and these errors also went away. Maybe not an exciting answer, but if the two SVGs are very similar but still throwing these errors, consider going back and remaking the SVGs (in this case, I literally copy-pasted the SVG back in place and it changed the markup).
Related
Find and then show/hide an edje part
I have a Tizen Edje file which defines my layout. One part is an image with part name 'warning'. The item is set to visible in the edge file, and it shows as expected.
I want to hide this part using C code:
Evas_Object* image_NotSetYet = (Evas_Object *) edje_object_part_object_get(elm_layout_edje_get(wid->edjeLayout), "warning");
if (image_NotSetYet == NULL) {
dlog_print(DLOG_ERROR, LOG_TAG, "View: Unable to get warning image part");
return;
}
evas_object_hide(image_NotSetYet);
I have tried many different ways to get the Evas Object associated with this part name and hide it. After many hours I stumbled onto some code that I modeled after, and it seems to work. I can hide (and show) my image part now.
However, I later add an unrealted image to a swallow in this layout and show it. All of a suddent the 'warning' part image shows again. Why? Am I hiding the 'warning' part the wrong way? Is there something wrong with the above?
Alternatively, is there something wrong with the way I am adding an image to the swallow below? The image (from file) will show up, but suddenly my warning part above shows too:
Evas_Object *img = elm_image_add(wid->edjeLayout);
if (img == NULL) {
dlog_print(DLOG_ERROR, LOG_TAG, "View: Failed to add a image.");
return;
}
// Create an image and set contents to imagefile
char *imageFileName = barcode_filename();
bool isSet = elm_image_file_set(img, imageFileName, NULL);
dlog_print((isSet?DLOG_INFO:DLOG_ERROR), LOG_TAG, "View: %s file [%s] to image",(isSet==EINA_TRUE?"Set":"Failed to set"),imageFileName);
free(imageFileName);
evas_object_show(img);
// Assign the image to the swallow2 part
elm_object_part_content_set(wid->edjeLayout,"swallow2",img);
I tried adding the image to the 'window' instead of the 'layout' but that didn't seem to matter. (I've seen many contradictory examples so I don't know which is right)
I tried setting the image to the 'swallow2' part name many different ways (again, many contradictory ways show). Is this the problem?
Otherwise, can someone explain what is going wrong?
The image_NotSetYet is not an image object. Evas_Object* image_NotSetYet = (Evas_Object *) edje_object_part_object_get(elm_layout_edje_get(wid->edjeLayout), "warning"); That refers to the "warning" swallow part object. You should never modify the state of the returned object, because it's meant to be managed by Edje, solely. If you want to get the image pointer from your layout as you expected, you could use following instead. Evas_Object* image_NotSetYet = elm_object_part_content_get((wid->edjeLayout), "warning") But as above link describes, the image object should be manged by Edje. You might got the 2nd problem because it is managed by Edje. So please use edje_object_signal_emit to handle swallowed images.
Displaying Parse Data to ContainerList
I want to display data from Parse in a list from GamesScores class using Container in Codename One, this is what I've tried so far and it's not showing anything nor giving any errors:
Container container = findListCont();
container.setLayout(BoxLayout.y());
container.setScrollableY(true);
ParseQuery<ParseObject> query = ParseQuery.getQuery("GameScore");
List<ParseObject> results = (List<ParseObject>) query.find();
System.out.println("Size: " + results.size());
container.addComponent(results, f);
Please help me out, I'm a new in Codename One. If there tutorials on it, please share or anything to help me achieve the desired results.
I'm actually shocked this isn't failing. You are using the add constraint to place the object result as a constraint and you add the form object into the container...
You need to loop over the results and convert them to components to add into the layout. It also seems that you are using the old GUI builder which I would recommend against.
Generally something like this rough pseudo code should work assuming you are using a box Y layout:
for(ParseObject o : results) {
MultiButton mb = new MultiButton(o.getDisplayValue());
f.add(mb);
}
f.revalidate();
How to visualize LabelMe database using Matlab
The LabelMe database can be downloaded from http://www.cs.toronto.edu/~norouzi/research/mlh/data/LabelMe_gist.mat
However, there is another link http://labelme.csail.mit.edu/Release3.0/
The webpage has a toolbox but I could not find any database to download. So, I was wondering if I could use the LabelMe_gist.mat which has the following fields. The field names contins the labels for the images, and img perhaps contains the images. How do I display the training and test images? I tried
im = imread(img)
Error using imread>parse_inputs (line 486)
The filename or url argument must be a string.
Error in imread (line 336)
[filename, fmt_s, extraArgs, msg] = parse_inputs(varargin{:});
but surely this is not the way. Please help
load LabelMe_gist.mat;
load('LabelMe_gist.mat', 'img')
Since we had no idea from your post what kind of data this is I went ahead and downloaded it. Turns out, img is a collection of 22019 images that are of size 32x32 (RGB). This is why img is a 32 x 32 x 3 x 22019 variable. Therefore, the i-th image is accessible via imshow(img(:,:,:,i)); Here is an animation of all of them (press Ctrl+C to interrupt): for iImage = 1:size(img,4) figure(1);clf; imshow(img(:,:,:,iImage)); drawnow; end
jqGrid - sorting won't work when datatype:local (jsFiddle included)
I couldn't find any solution.
I want to load my data from a local array. When I use the same settings in a different grid with datatype:json, from server, everything works fine.
But here I need a local array, I use data option. array is in format:
[[x,y,z], ...]
JSFIDDLE:
http://jsfiddle.net/7osga648/
CODE:
$("#datagrid1").jqGrid({
datatype:'local',height:350,width:400,gridview:true,rownumbers:true,rowNum:1000,viewrecords:true,
colNames:["time","col1","col2"],
colModel:[
{name:'time',width:150,resizable:false,sorttype:'date',datefmt:"d/m/Y H:i:s"},
{name:'f1',width:100,resizable:false,sorttype:'number'},
{name:'f2',width:100,resizable:false,sorttype:'number'}],
data:[["03/10/2014 20:46:27","60.8","2.5"],["03/10/2014 21:01:39","58.3","0.1"],["03/10/2014 21:16:51","61.3","3.4"],["03/10/2014 21:32:05","58.9","0.6"],["03/10/2014 21:47:18","58.7","0.8"],["03/10/2014 22:02:32","58.2","0.0"],["03/10/2014 22:17:45","61.9","3.8"],["03/10/2014 22:32:58","58.4","0.1"],["03/10/2014 22:48:11","60.0","2.1"],["03/10/2014 23:03:22","61.2","3.4"],["03/10/2014 23:18:34","62.0","3.8"],["03/10/2014 23:33:47","58.6","0.2"],["03/10/2014 23:49:00","58.4","0.2"],["04/10/2014 00:04:14","58.1","0.2"],["04/10/2014 00:19:28","58.1","0.2"],["04/10/2014 00:34:40","61.8","3.9"],["04/10/2014 00:49:51","58.9","0.6"],["04/10/2014 01:05:03","58.2","0.1"],["04/10/2014 01:20:16","61.2","3.4"],["04/10/2014 01:35:28","59.2","0.9"],["04/10/2014 01:50:40","58.4","0.1"],["04/10/2014 02:00:04","0","0"],["04/10/2014 02:05:52","61.8","3.7"],["04/10/2014 02:21:04","62.9","3.7"],["04/10/2014 02:36:15","63.1","3.5"],["04/10/2014 02:51:27","63.7","3.5"],["04/10/2014 03:06:40","60.1","0.0"],["04/10/2014 03:21:53","63.1","3.1"]],
localReader:{repeatitems:true,cell:""},
caption:"sorting not working. click on col header"
});
Try to click on column header, and see that nothing is happening.
Any idea?
I posted already the bug fix here. The modified demo "jsfiddle.net/7osga648/4/" uses directly the new features. See the answer for additional information.
Using PyMEL to set the "Alpha to Use" attribute in an object of class psdFileTex
I am using Maya to do some procedural work, and I have a lot of textures that I need to load into Maya, and they all have transparencies (alpha channels). I would very much like to be able to automate this process. Using PyMEL, I can create my textures and hook them up to a shader, but the alpha doesn't set properly by default. There is an attribute in the psdFileTex node called "Alpha to Use", and it must be set to "Transparency" in order for my alpha channel to work. My question is this - how do I use PyMEL scripting to set the "Alpha to Use" attribute properly?
Here is the code I am using to set up my textures:
import pymel.core as pm
pm.shadingNode('lambert', asShader=True, name='myShader1')
pm.sets(renderable=True, noSurfaceShader=True, empty=True, name='myShader1SG')
pm.connectAttr('myShader1.outColor', 'myShader1SG.surfaceShader', f=True)
pm.shadingNode('psdFileTex', asTexture=True, name='myShader1PSD')
pm.connectAttr('myShader1PSD.outColor', 'myShader1.color')
pm.connectAttr('myShader1PSD.outTransparency', 'myShader1.transparency')
pm.setAttr('myShader1ColorPSD.fileTextureName', '<pathway>/myShader1_texture.psd', type='string')
If anyone can help me, I would really appreciate it.
Thanks
With any node, you can use listAttr() to get the available editable attributes. Run listAttr('myShaderPSD'), note in it's output, there will be two attributes called 'alpha' and 'alphaList'. Alpha, will return you the current selected alpha channel. AlphaList will return you however many alpha channels you have in your psd.
Example
pm.PyNode('myShader1PSD').alphaList.get()
# Result: [u'Alpha 1', u'Alpha 2'] #
If you know you'll only ever be using just the one alpha, or the first alpha channel, you can simply do this.
psdShader = pm.PyNode('myShader1PSD')
alphaList = psdShader.alphaList.get()
if (len(alphaList) > 0):
psdShader.alpha.set(alphaList[0])
else:
// No alpha channel
pass
Remember that lists start iterating from 0, so our first alpha channel will be located at position 0.
Additionally and unrelated, while you're still using derivative commands of the maya.core converted for Pymel, there's still some commands you can use to help make your code read nicer.
pm.setAttr('myShader1ColorPSD.fileTextureName', '<pathway>/myShader1_texture.psd', type='string')
We can convert this to pymel like so:
pm.PyNode('myShader1ColorPSD').fileTextureName.set('<pathway>/myShader1_texture.psd')
And:
pm.connectAttr('myShader1PSD.outColor', 'myShader1.color')
Can be converted to:
pm.connect('myShader1PSD.outColor', 'myShader1.color')
While they may only be small changes, it reads just the little bit nicer, and it's native PyMel.
Anyway, I hope I have helped you!