CheatSheet for custom HTML-element mec-2

Januar 2021

Keywords: microJam, mec2, Custom Element, cheatsheet

Abstract

This Cheatsheet summarize the core functionality of the custom HTML-element mec-2. For more detail use the mec2 documentation.

Prerequisite

Nodes

Constraints

Loads

Views

Shapes

Prerequisite

Use the code shown in the first code listing to implement mec-2 custom html element with attributes you desire to table 1.

Code 1: Custom HTML-tag for mec2

<mec-2 width="400" height="300" x0="0" y0="0" grid cartesian nodelabels>
{

}
</mec-2>

Table 1: Attributes of the mec-2 element

Attribute	Type	Impact
width	string	width of the element in px
height	string	height of the element in px
x0	string	x-origin of the model
y0	string	y-origin of the model
grid	boolean	show grid in background
cartesian	boolean	whether cartesian is true or not
darkmode	boolean	whether dark mode is set or not
gravity	boolean	activate gravity
pausing	boolean	pause the model
hidenodes	boolean	hide nodes
constraintlabels	boolean	show labels of constraints
loadlabels	boolean	show labels of loads
nodelabels	boolean	show labels of nodes

Nodes

Create a node by giving the required properties. Don't forget to put the propertie key into quotation marks.

Code 2: Creation of node A and B

"nodes": [
    { "id":"A", "x":0,
      "y":0, "base":true },
    { "id":"B", "x":100,
      "y":100, "idloc":"e" }
]

{ "nodes": [ { "id":"A", "x":0, "y":60, "base":true }, { "id":"B", "x":150, "y":90, "idloc":"e" } ] }

Example 1: Result of example 1

Table 2: Node properties

Required properties	Type of value	Comment
id	string	the name of the node
x	number	x-coordinate
y	number	y-coordinate
Optional properties	Type of value	Comment
base	string	for fix node
idloc	number	position of string

Constraints

The constraint defines the relationship between two nodes. i.e. in order to define a constraint, two nodes must first of all be defined.

Code 3: Implementation of constraints

"constraints": [ 
    { "id":"a","p1":"A0","p2":"A",
      "len":{ "type":"const" },
      "ori":{ "type":"drive",
              "repeat":5,"Dt":3 }}
    ]

{ "nodes": [ { "id":"A0", "x": 100, "y": 70, "base": true }, { "id":"A", "x": 100, "y": 120 } ], "constraints": [ { "id":"a","p1":"A0","p2":"A", "len":{"type":"const"}, "ori":{"type":"drive","repeat":5,"Dt":3 } } ] }

Example 2: Drive constraint between two nodes

Table 3: Constrait properties

Required properties	Type of value	Comment
id	string	the name of the constraint
p1	string	first point
p2	string	second point
len	object	it must be specified whether the length between two nodes is variable or constant
ori	object	it must be specified whether the orientation (angle) between two nodes is variable or constant
Optional properties	Type of value	Comment
drive	boolean	define the movement of rotation between two nodes
reference	boolean	as its name indicates, it allows to define a movement while giving just the reference
sequence	boolean	Every segment of a drive sequence must specify its function type func, its duration dt (always positive) and its value range dz (might be negative).

Loads

Currently supported are load elements of type

'force'
'spring'

Forces

Code 4: Implementation of loads of type 'force'

"loads":[
    { "id":"F1","type":"force",
      "p":"A","value":30,
      "w0":1.5708,"mode":"push" }
]

{ "gravity": true, "nodes": [ { "id": "A0", "x": 80, "y": 50, "base": true}, { "id": "A", "x": 150, "y": 50 } ], "constraints": [ { "id": "a", "p1": "A0", "p2": "A", "len": {"type": "const"}} ] , "loads":[{ "id":"F1","type":"force","p":"A", "value":30,"w0":1.5708,"mode":"push" }] }

Example 3: Force pushing node A

Table 4: Properties for loads of type 'force'

Required properties	Type of value	Comment
id	string	the name of the node
type	string	y-coordinate
p	string	point of application
$w_0$	number	angle of application
mode	string	direction

Springs

Code 5: Implementation of loads of type 'spring'

"loads": [
    { "id":"s","type":"spring",
      "p1":"A0","p2":"A","k":20 }
    ]

{ "gravity":true, "nodes": [ { "id": "A0", "x": 175, "y": 50,"base": true }, { "id": "B0", "x": 175, "y": 100,"base": true }, { "id": "A", "x": 225, "y": 50 }, { "id": "B", "x": 300, "y": 50 } ], "constraints": [ { "id": "a", "p1": "A0", "p2": "A", "len":{"type":"const"}}, { "id": "b", "p1": "A", "p2": "B", "len": {"type": "const" }, "ori": { "type": "const", "ref": "a" } } ], "loads": [ { "id": "s", "type": "spring", "p1": "B0","p2": "A","k": 78.695, "len0": 0 } ] }

Example 4: Result of springs

Table 5: Properties for loads of type 'spring'

Required properties	Type of value	Comment
id	string	the name of the node
type	string	y-coordinate
p1	string	first point of application
p2	string	second point of application
k	number	spring constante

Views

Views can be used to make different properties of the model or single elements of the model visible.

Code 6: Use of views to show the trace and vector of node C

"views": [
    { "show":"pos","of":"C",
      "as":"trace", "Dt":2.1,
      "mode":"preview",
      "fill":"orange" }, 
    { "show":"vel","of":"C",
      "as":"vector" }
]

{ "nodes": [ { "id": "A0", "x": 75, "y": 60, "base": true }, { "id": "A", "x": 75, "y": 110 }, { "id": "B", "x": 275, "y": 180 }, { "id": "B0", "x": 275, "y": 60, "base": true }, { "id": "C", "x": 125, "y": 185 } ], "constraints": [ { "id": "a", "p1": "A0", "p2": "A", "len": { "type":"const" }, "ori": { "type": "drive", "Dt": 2, "Dw": 6.28 } }, { "id": "b", "p1": "A", "p2": "B", "len": { "type":"const" } }, { "id": "c", "p1": "B0", "p2": "B", "len": { "type":"const" } }, { "id": "d", "p1": "B", "p2": "C", "len": { "type":"const" }, "ori": { "ref": "b", "type": "const" } } ], "views": [ { "show": "pos", "of": "C", "as": "trace", "Dt":2.1, "mode":"preview", "fill":"orange" }, { "show": "vel", "of": "C", "as": "vector" } ] }

Example 5: Demonstration of views

Table 6: Properties for views

Required properties	Type of value	Comment
show	string	Which property is to be shown
of	string	The `id` of the respective element
as	string	Which type of `view` is to be used
Dt	number	Time interval of the view to be active
Optional properties	Type of value	Comment
vector	string	to show a vector with a conforming orientation and length
trace	string	to show the movement of a point
info	string	to show an info cart
chart	string	to show coherences between different entities

Shapes

to stylize elements with geometric forms or images.

Code 7: Use of shapes to transform nodes into fixed/floating bearing and constraints into beam

"shapes": [
    { "type": "fix", "p": "A0" },
    { "type": "flt", "p": "B0" },
    { "type": "bar",
      "p1": "B0", "p2": "A" },
    { "type": "bar",
      "p1": "A0", "p2": "A" }
]

{ "nodes": [ { "id": "A0", "x": 75, "y": 125, "base": true }, { "id": "A", "x": 100, "y": 175 }, { "id": "B0", "x": 300, "y": 125 } ], "constraints": [ { "id": "a", "p1": "A0", "p2": "A", "len": { "type": "const" }, "ori": { "type": "drive", "repeat": 3 } }, { "id": "b", "p1": "B0", "p2": "A", "len": { "type": "const" } }, { "id": "c", "p1": "A0", "p2": "B0", "ori": { "type": "const" } } ], "shapes": [ { "type": "fix", "p": "A0" }, { "type": "flt", "p": "B0" }, {"type": "bar", "p1": "B0", "p2": "A"}, {"type": "bar", "p1": "A0", "p2": "A"} ] }

Example 6: Demonstration of shapes

Table 7: Properties for shapes

Required properties	Type of value	Comment
type	string	which shake should be used
uri	string	the source of an image if we want to insert images from the Internet
p	string	point of application