g2.mec.js

g2 extension for mechanical applications

Mechanical Symbols

g2.mec.js provides some useful mechanical symbols for the g2.js graphics library.

Using these symbols is easily done with the help of the use command. While they are available through the g2.symbol namespace, the bare symbol name is sufficient as the first parameter. We can translate, rotate and scale the symbols as expected. Please note, that their line width is mostly immune against scaling.

    g = g2().use(g2.symbol.origin,{x:100,y:50});
    // or alternatively ...
    g = g2().use("origin",{x:100,y:50});

Mechanical Elements

g2.mec.js also provides some mechanical elements.

Element functions have individual arguments.

Element | Image | Meaning -------- | -------- | ------ vec(p,r,style) | | Linear vector element by start point p and end point or direction r. avec(p,r,w,dw,style) | | Arc vector element by center point p, radius r, start angle w and angular range dw. dim(p,r,args) | | Linear dimension element by start point p and end point or direction r. adim(p,r,w,dw,args) | | Arc dimension element by center point p, radius r, start angle w and angular range dw. slider(p,w,args) | | Slider element by center point p and rotation angle w. spring(p,r,args) | | Symbolical Spring element by start point p and end point or direction r. damper(p,r,args) | | Symbolical Damper element by start point p and end point or direction r. ground(pts,closed,args) | | Polygonial ground element by points array pts and closed flag closed. bar(p,r) | | Bar element by start point p and end point or direction r. bar2(p,r) | | Alternate Bar2 element by start point p and end point or direction r. link(pts,closed) | | Link element by points array pts and closed flag [true,false]. link2(pts,closed) | | Alternate Link2 element by points array pts and closed flag [true,false]. beam(pts) | | Beam element by points array pts. beam2(pts) | | Alternate Beam2 element by points array pts. load(pts,spacing,style) | | Load element by points array pts and spacing spacing between arrows. pulley(p,r) | | Pulley element by center point p and radius r. pulley2(p,r) | | Pulley2 element by position pos={x,y,w} including rotation angle w and radius r. rope(p1,r1,p2,r2) | | Rope element tangential to two circles with given center points p1 and p2 and radii r1 and r2. You can switch between the four possible tangents by the sign of the radii.

Mechanical Styles

There are some predefined colors, line styles and other constants. You can overwrite them, if you are not comfortable with it.

| Name | Type | Default | Description | | --- | --- | --- | --- | | State | object | | g2 state namespace. | | State.nodcolor | string | "#333" | node color. | | State.nodfill | string | "#dedede" | node fill color. | | State.nodfill2 | string | "#aeaeae" | alternate node fill color, somewhat darker. | | State.linkcolor | string | "#666" | link color. | | State.linkfill | string | "rgba(200,200,200,0.5)" | link fill color, semi-transparent. | | State.solid | array | [] | solid line style. | | State.dash | array | [15,10] | dashed line style. | | State.dot | array | [4,4] | dotted line style. | | State.dashdot | array | [25,6.5,2,6.5] | dashdotted line style. | | State.labelOffset | number | 5 | default label offset distance. | | State.labelSignificantDigits | number | 3 | default label's significant digits after floating point. |

Truss Example

You can see a simple truss below, composed from mechanical symbols and elements.

// g2.mec truss example ...
    var A = {x:50,y:50},  B = {x:250,y:50},
        C = {x:50,y:150}, D = {x:150,y:150},
        E = {x:50,y:250},
        g = g2()
             .cartesian()
             .link2([A,B,E,A,D,C])
             .vec(B,{dx:0,dy:-50},{lw:2,ls:"darkred"})
             .vec(D,{dx:80,dy:0},{lw:2,ls:"darkred"})
             .use("nodfix",A)
             .use("nod",B)
             .use("nod",C)
             .use("nod",D)
             .use("nodflt",{x:E.x,y:E.y,w:-Math.PI/2})
             .exe(document.getElementById("c").getContext("2d"));

Labels

If you want to add text to a geometric element, you can always use the basic txt element. However some element types support the smarter label element, which comes with a more intuitive relative positioning with respect to its nearest previous element. Reliable positioning requires always cartesian coordinates.

Element | Meaning :--------: | :--------: label(str,loc,off) | Label element placing string str at location loc using offset off.

Point like and rectangular elements provide locations according cardinal directions. Linear elements provide parameterized numerical or named locations.

| Type | Elements | default | locations | offset | img | | :-----: | :------: | :-----: | :-----: | :-----: | :-----: | | Point elements | cir, use | c |ce,ne,n,nw,w,sw,s,seangle in [radians] | number | | | Rectangular elements | rec, slider | c |ce,ne,n,nw,w,sw,s,se | number | | | Linear elements | lin, vec, dimarc, avec, adimspring, damper bar, bar2| 0.5 | beg, mid, end normalized numerical parameter | left, rightnumber | | Polygonial elements | ply, groundlink, link2 | 0.5 | beg, end #index normalized numerical parameter | left, rightnumber | | Spline element | spline | beg | beg, end #index | left, rightnumber |

A numerical offset always means outside of closed shapes with regard to the specified point. With linear, polygonial and spline elements a positive value means right of and a negativ value means left of the line at the specified point. If there is no offset distance specified, the global g2.State.labelOffset's value is taken. Please note, that cardinal locations are not sensitive to transformations.

Truss Example with Labels

The truss example above can now be improved by adding labels.

  // g2.mec truss example with labels ...
     var A = {x:50,y:50},  B = {x:250,y:50},
         C = {x:50,y:150}, D = {x:150,y:150},
         E = {x:50,y:250},
         g = g2()
              .cartesian()
              .style({foz:12,fof:"cursive",foc:"green"})
              .bar2(A,B).label("1")
              .bar2(A,C).label("2")
              .bar2(A,D).label("3")
              .bar2(B,D).label("4")
              .bar2(C,D).label("5")
              .bar2(C,E).label("6")
              .bar2(D,E).label("7")
              .style({foc:"@nodcolor"})
              .vec(B,{dx:0,dy:-50},{lw:2,ls:"brown"}).label("F","end","left")
              .vec(D,{dx:80,dy:0},{lw:2,ls:"brown"}).label("2F","end")
              .use("nodfix",A).label("A","w")
              .use("nod",B).label("B","se")
              .use("nod",C).label("C","w")
              .use("nod",D).label("D","ne")
              .use("nodflt",{x:E.x,y:E.y,w:-Math.PI/2}).label("E","e")
              .style({ls:"@dimcolor",foc:"@ls"})
              .dim({x:A.x,y:275},{dx:100,dy:0}).label("b")
              .dim({x:D.x,y:275},{dx:100,dy:0}).label("b")
              .dim({x:275,y:E.y},{dx:0,dy:-100}).label("b")
              .dim({x:275,y:D.y},{dx:0,dy:-100}).label("b")
              .exe(document.getElementById("c").getContext("2d"));

Markers

Markers can be placed onto the outline of the nearest previous element.

Element | Meaning :--------: | :--------: mark(type,loc,dir) | Marker element placing marker symbol type at locations loc regarding to direction dir.

Elements with a unique center and rectangular elements provide locations according cardinal directions. Linear elements provide parameterized numerical or named locations. The spline element only support indexed locations. It does not support parameterized locations.

| Type | Elements | default | locations |dir | img | | :-----: | :------: | :-----: | :-----: | :-----: | :-----: | | Centered elements | cir | c | ce,ne,n,nw,w,sw,s,senormalized parameter | -1,0,1 | | | Rectangular elements | rec, slider | c | ce,ne,n,nw,w,sw,s,se | -1,0,1 | | | Linear elements | lin, vec, dimarc, avec, adimspring, damper bar, bar2| 0.5 | beg, mid, end normalized numerical parameter | -1,0,1 | | Polygonial elements | ply, groundlink, link2 | 0.5 | beg, end, mid, all #index normalized numerical parameter |-1,0,1 | | Spline element | spline | beg | beg, end, mid, all #index |-1,0,1 |

API Reference

See the API Reference for details.

Tests

See this growing table of test cases with canvas and svg output side by side.

GitCDN

Use the link https://gitcdn.xyz/repo/goessner/g2-mec/master/g2.mec.min.js for getting the latest commit as a raw file.

In HTML use ...

<script src="https://gitcdn.xyz/repo/goessner/g2-mec/master/g2.mec.min.js"></script>

License

g2.mec is licensed under the terms of the MIT License.

#Change Log

0.4.7 - 2016-09-09

Modified

• label offset bug removed.

0.4.5 - 2016-08-01

Modified

• Use of mark and label element requires cartesian flag set from now on.
• use command execution simplified.
• styling bug with g2.prototype.use removed.

0.4.4 - 2016-06-21

Added

• g2.spline performing 'centripetal Catmull-Rom' interpolation.

Modified

• modified g2.prototype.ply.iterator integrated.

0.4.0 - 2016-05-24

Added

link, bar, pulley, rope elements added.

0.3.0 - 2016-05-13

Changed

• Fundamental changes also affecting the api.

• See documentation and API for details. @goessner.

0.2.3 - 2016-05-03

Changed

Transformation bug removed @goessner.

0.2.0 - 2016-01-10

Added

CHANGELOG.md @goessner.