How to make an app

Easel App Development
29

I was wondering about this as well, in my day job I use Brackets as my editor and push/pull using Git from within the software.

I was wondering about the possibility of some kind of automated pull of apps in Easel from say a GitHub repo? That way devs could push to their GitHub repo (or maybe even just a Gist) and do a little setup work to tell the apps portion of Easel where to get the code from.

Cheers

Ian

31

Hey Guys, Alex here. Nice to meet you all. Just started develping my app, 2 questions.

  1. How do I add a description next to the parameters in the initial container?

  2. How do I toggle tabs off on the svg I am sending over?

Thanks.

33

Thanks Angus, now how do I display a preview of SVG in the app window?

34

Pass the SVG string to the success callback of the executor function.

35

Isn’t that already happening?

success(svg);

That sends it to Easel, I want it to be a preview in the APP

37

I have 2 apps almost ready I would like you to look at, numbers 32, Quad and 44, Arc. They are simple, they are just more base primitives to build larger blocks from. Ultimately, I want to draw the bulkhead shown in this http://www.spirainternational.com/study/BolsaChicaStudy.pdf , since that’s what I want to cut out. I don’t have an X-Carve yet, so I haven’t tried them in real life.

A few Notes:

  1. I haven’t done proper icons for them yet !
  2. I used a text box instead of sliders. Ideally I would prefer a slider with embedded edit box for the value.
  3. I included a checkbox at the top to switch between mm and inches. It’s because of this, and the change in scaling that I used an edit box.
  4. I think it would be good to have this functionality built into the app framework.
  5. Based on the mm or inches I set the viewBox and size. The limited testing I did, they all seem to come back into Easel at the correct size.
  6. I’m not too happy with the interface for Quad, but I’m not sure what would be better. Setting a base X1,Y1 and X2,Y2, and then have sliders to set offsets for the lower points ?
  7. OnChange callbacks would be handy, so that dependancies can be updated when one value changes.

Anyway, any and all feedback welcome

38

Can someone take a look at Easel for me please. I’m trying to create a gradient from black to white. When I press submit, it Easel just sits there importing the svg, so it has either crashed, or is taking a really long time to process. I think the longest I waited was 5 minutes and then I gave up.

Based on a comment above from jeff talbot

Easel will map the stroke or fill color of a path to a cut depth using a
grayscale-to-cut-depth approach where rgb(0, 0, 0) (black) means the
cut is all the way through, and rgb(255, 255, 255) (white) means no cut
at all, and anything in between is scaled linearly.

What I am trying to achieve is a splice . This is a gradient cut in two pieces of wood to join them to create a longer piece with minimal loss of strength. You can see one in this picture

20151006_084322.jpg2322×4128 2.21 MB

39

Currently Easel doesn’t support gradients, and will hang when you import the SVG. You verify this by taking a pre-made SVG and importing with the SVG import tool or just looking at this screenshot:

Screen Shot 2015-10-06 at 12.09.24 PM.png1336×683 85.4 KB

40

Yup, that’s what I see, So was Jeff Talbot wrong, or what he said is correct, it just can’t be achieved using the “gradient” tag. For instance, I was thinking about doing another version that uses “steps”, rather than a smooth gradient. Each step would be done using a solid fill colour, say (192,192,192), (164,164,164) … ( 0,0,0). Would that work ?

41

Yes.

Solid fills on steps works just fine. Gradients don’t.

43

I have stopped that bugging connection-tries with an little socket.io-server using node.js:

var http = require(‘http’).Server();
var io = require(‘socket.io’)(http);
http.listen(1338);

44

How can I figure out, whats wrong with my created SVG?

I have an app (called waster) , that creates SVG for a set of boreholes for a wasteboard.
In the preview everything looks nice, but if I try to import it, easel says to me, that I should read the import-guide.
I have read it and did the “inkscape-trick”. In inkscape it looks nice too, and the resulting SVG could be imported, but is now too small.

So my SVG is wrong in a kind, that inkscape can fix partially, but I would like to create a fully importable file with my app.
What to do, to learn, how the SVG has to be constructed, that easel can import it?

45

Can you post the svg string that you are creating and post it. If you add a “console.log(svg);” right before the success call, it will print out in the console for firebug.

46

no, sorry, that is not possible, it is not displayable here …

47

It should be something like

<?xml version="1.0" standalone="no"?>< svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="11in" height="2in" viewBox="0 0 11 2">

Sounds like you don’t have something right in your string catenation maybe to form the svg string ?

I had to add a space at the start of the svg tag to stop it from being interpreted

48

hm, but why can inkscape show and handle it and why can I do
$(function() {
var svg = waster.createSVG([{Width:290, Height: 210}]);
$(’#graph’).html(svg);
});

to show it within my browser in an html-page?

49

< ?xml version=“1.0” standalone=“no”?>< svg xmlns=“SVG namespace” version=“1.0” width=“500” height=“500”>< rect x=“0” y=“0” width=“290” height=“210” style="fill:none;stroke:rgb(50%,50%,50%); " />< circle cx=“10” cy=“10” r=“5” style=“fill:rgb(50%,50%,50%); stroke:none” />< circle cx=“10” cy=“10” r=“3” style=“fill:rgb(0%,0%,0%); stroke:none” />< circle cx=“10” cy=“95” r=“5” style=“fill:rgb(50%,50%,50%); stroke:none” />< circle cx=“10” cy=“95” r=“3” style=“fill:rgb(0%,0%,0%); stroke:none” />< circle cx=“10” cy=“180” r=“5” style=“fill:rgb(50%,50%,50%); stroke:none” />< circle cx=“10” cy=“180” r=“3” style=“fill:rgb(0%,0%,0%); stroke:none” />< circle cx=“95” cy=“10” r=“5” style=“fill:rgb(50%,50%,50%); stroke:none” />< circle cx=“95” cy=“10” r=“3” style=“fill:rgb(0%,0%,0%); stroke:none” />< circle cx=“95” cy=“95” r=“5” style=“fill:rgb(50%,50%,50%); stroke:none” />< circle cx=“95” cy=“95” r=“3” style=“fill:rgb(0%,0%,0%); stroke:none” />< circle cx=“95” cy=“180” r=“5” style=“fill:rgb(50%,50%,50%); stroke:none” />< circle cx=“95” cy=“180” r=“3” style=“fill:rgb(0%,0%,0%); stroke:none” />< circle cx=“180” cy=“10” r=“5” style=“fill:rgb(50%,50%,50%); stroke:none” />< circle cx=“180” cy=“10” r=“3” style=“fill:rgb(0%,0%,0%); stroke:none” />< circle cx=“180” cy=“95” r=“5” style=“fill:rgb(50%,50%,50%); stroke:none” />< circle cx=“180” cy=“95” r=“3” style=“fill:rgb(0%,0%,0%); stroke:none” />< circle cx=“180” cy=“180” r=“5” style=“fill:rgb(50%,50%,50%); stroke:none” />< circle cx=“180” cy=“180” r=“3” style=“fill:rgb(0%,0%,0%); stroke:none” />< circle cx=“265” cy=“10” r=“5” style=“fill:rgb(50%,50%,50%); stroke:none” />< circle cx=“265” cy=“10” r=“3” style=“fill:rgb(0%,0%,0%); stroke:none” />< circle cx=“265” cy=“95” r=“5” style=“fill:rgb(50%,50%,50%); stroke:none” />< circle cx=“265” cy=“95” r=“3” style=“fill:rgb(0%,0%,0%); stroke:none” />< circle cx=“265” cy=“180” r=“5” style=“fill:rgb(50%,50%,50%); stroke:none” />< circle cx=“265” cy=“180” r=“3” style=“fill:rgb(0%,0%,0%); stroke:none” />< /svg>

50

hm, i figured out, that something is wrong with the rect-tag

51

The rect is masking out the circles, so you end up in effect importing nothing.

Get rid of the rect, and change the size to be "width=“500mm” height=“500mm” viewBox=“0 0 500 500"”

That will set your work area to be 500mm square.

I think if you want to do a square around the edge, you will need to do a line and moves, rather than a rect

52

Cool, thank you, that works.

What does that mean “The rect is masking out the circles”?