Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Simple DL drawing example

1593815528
David M.
Pro
API Scripter
Have "some" programming experience, but new to js starting...today. Was just playing around with drawing shapes via api script. Stealing code from the forums like nobody's business. While not my end goal, the code below is intended to draw a simple red line on the DL layer adjacent to a selected token. It does not return any errors to the log, but doesn't seem to be doing anything except returning the chat message at the end. I wouldn't be surprised if I'm messing up the _path property, seeing as how I was basically Googling JSON about an hour minutes ago (ha!), but any insight would be appreciated. Also, what is the significance of "M" and "L" in the path? Are those just arbitrary identifiers for points, or do they have some built-in meaning? TIA! on("ready",function() {     on("chat:message",function(msg){         if(msg.type=="api" && msg.content.indexOf("!dldraw")==0)         {             var selected = msg.selected;             if (selected===undefined)             {                 sendChat("API","You must first select a token");                 return;             }             var tok = getObj("graphic",selected[0]._id);                          let thePath = [["M", 0, 0],["L", 0, 70]]                          let pathstring=JSON.stringify(thePath);                          createObj("path", {                                 pageid: tok.pageid,                 path: pathstring,                 fill: "transparent",                 stroke: "#ff0000",                 layer: "walls",                 stroke_width: 5,                 width: 70,                 height: 70,                 left: tok.get("left"),                 top: tok.get("top"),             });             sendChat(tok.get("name"),"DL object created");         }     }); });
1593816215
The Aaron
Roll20 Production Team
API Scripter
The path string is encoded SVG (Scalable Vector Graphics).&nbsp; The "M" is for "Move To" ( <a href="https://www.w3.org/TR/SVG2/paths.html#PathDataMovetoCommands" rel="nofollow">https://www.w3.org/TR/SVG2/paths.html#PathDataMovetoCommands</a> ), the "L" is for "Line To" ( <a href="https://www.w3.org/TR/SVG2/paths.html#PathDataLinetoCommands" rel="nofollow">https://www.w3.org/TR/SVG2/paths.html#PathDataLinetoCommands</a> ).&nbsp; Not all SVG commands are supported by Roll20, just FYI. The issue is probably in your width, it should be 0 since your line doesn't move any in the X direction.&nbsp; Paths are kind of persnickety.&nbsp; In the last script I wrote that creates them, I also have scaleX and scaleY set to 1, which should be the default, and rotation set to 0 which should also be the default.&nbsp; You might grab the output from createObj() and log that to see if there's anything obvious.
1593880701
David M.
Pro
API Scripter
Thanks Aaron, but turns out I *was* getting an error log. The only other errors I had encountered previously were apparently sandbox breaking ones that showed up in giant red/pink text on the API page, so that was the only place I was looking! Derp. Didn't think about the incredibly obvious and probably much more useful Output Console until today. Noob error, sorry for the incorrect information in my original post. The problem was with the pageid property. I was trying to set as: tok.pageid when it should have been: tok.get("pageid")&nbsp; The width 5 worked fine after that fix.Thanks for the background on the SVG - was scratching my head on that one! Now, I'm sure I will never have another scripting question again and everything will of course go exactly according to plan ;)&nbsp;
1593884068
The Aaron
Roll20 Production Team
API Scripter
No problem! I should have spotted that. =D Glad you sorted it out! &nbsp;Good luck on that "everything works out exactly..." part. =D