3. obfc.js: Properties of a SVG shape

obfc.js has 24 different SVG shapes but this post is described properties of a shape (process) by examples. add_theObject is a function that adds the object into a given SVG element and returns this object. This returned object is used for drawing lines between two objects. There are 24 different SVG objects in obfc.js. 22 of them contain 9 parameters for creating an object. First two parameters are required, others are optimal.

Object_Name(_middle_x, _middle_y, _size, _text, _text_size, _description, _fill_color, _stroke_color, _text_color);

_middle_x and middle_y: centre of the object. (Required)
_size: For example, default size of a process object width is 125 and height is 50. _size value is multiplied by these values.
_text and _text_size: Text is written in the center of an object. This parameter can be defined string value or array[“”, “”…]. If your text is too long, you can use array for creating lines.
_description: These value can be coded in HTML format. These value is displayed in a HTML element that contains “desc” id after clicking an object or a line.
_fill_color: Default value is white. But, the object color can be determined with this parameter.
_stroke_color: Default value is black.
_text_color: Default value is black.

An empty process shape:

<svg id="demo" width="200" height="100"></svg>
<script>
prepare_SVG("demo");
var object1 = add_theObject(new Process(75, 50));      
</script>

prepare_SVG("demo");

var object1 = add_theObject(new Process(75, 50));

</script>

Size of a shape can be changed:

<svg id="demo_02" width="400" height="150"></svg>
<script>
prepare_SVG("demo_02");
var object1 = add_theObject(new Process(75, 50, 0.5));
var object2 = add_theObject(new Process(250, 50, 1.25));
</script>

prepare_SVG("demo_02");

var object1 = add_theObject(new Process(75, 50, 0.5));

var object2 = add_theObject(new Process(250, 50, 1.25));

</script>

Text and Text Size:

String for single line and array string for multiline can be used.

<svg id="demo_03" width="500" height="100"></svg>
<script>
prepare_SVG("demo_03");
var object1 = add_theObject(new Process(75, 50, 1, "Hi obfc.js", 14));
var object2 = add_theObject(new Process(250, 50, 1, ["Hi", "obfc.js"], 10));

prepare_SVG("demo_03");

var object1 = add_theObject(new Process(75, 50, 1, "Hi obfc.js", 14));

var object2 = add_theObject(new Process(250, 50, 1, ["Hi", "obfc.js"], 10));

Description:

Description is showed in an element which id is “desc” after click a shape.

<svg id="demo_04" width="500" height="100"></svg>
<script>
prepare_SVG("demo_04");
var object1 = add_theObject(new Process(75, 50, 1, "Hi obfc.js", 14, "Hello Description in HTML format"));
</script>

prepare_SVG("demo_04");

var object1 = add_theObject(new Process(75, 50, 1, "Hi obfc.js", 14, "Hello Description in HTML format"));

</script>

Coloring (Fill, Stroke, Text)

<svg id="demo_05" width="500" height="100"></svg>
<script>
prepare_SVG("demo_05");
var object1 = add_theObject(new Process(75, 50, 1, "Hi Colors", 14, null, "red", "#660000", "AntiqueWhite", "Crimson"));
</script>

prepare_SVG("demo_05");

var object1 = add_theObject(new Process(75, 50, 1, "Hi Colors", 14, null, "red", "#660000", "AntiqueWhite", "Crimson"));

</script>

2 of them (OR and SummingJunction) contain 7 parameter. These objects are not included parameters of _text and _text_size.

Object_Name(_middle_x, _middle_y, _size, _description, _fill_color, _stroke_color, _text_color);