4. obfc.js: All SVG Shapes

This post demonstrates 24 different SVG shapes of obfc.js and their javascript codes for creating these shapes.

<div style="height: auto; overflow: hidden;">
<div id="desc" style="width: 250px; float: right;"> </div>
<div id="right" style="background: #e6f2ff; float: none; width: auto; overflow: hidden;">
<svg id="demo" width="700" height="900">  </svg></div>
</div>
<script type="text/javascript" src="/wp-content/uploads/obfc/obfc.min.js"></script>
<script>
prepare_SVG("demo");
free_write("Operation Symbols", 20, "bold", 350, 10);
var object1 = add_theObject(new Process(75, 60, 1, "Process", 12));
var object2 = add_theObject(new PredefinedProcess(250, 60, 1, "Predefined Process", 10));
var object3 = add_theObject(new AlternateProcess(425, 60, 1, "Alternate Process", 12));
var object4 = add_theObject(new Delay(600, 60, 1, "Delay", 12));
var object5 = add_theObject(new Preparation(75, 160, 1, "Preparation", 12));
var object6 = add_theObject(new ManualOperation(250, 160, 1, "Manual Operation", 10));
free_write("Branching and Control of Flow Symbols", 20, "bold", 350, 230);
var object7 = add_theObject(new Terminal(75, 320, 1, "Terminal", 12));
var object8 = add_theObject(new Decision(250, 320, 1, "Decision", 10));
var object9 = add_theObject(new Connector(375, 320, 1, "A", 12, "<h2>Connector (Inspection)</h2>"));
var object10 = add_theObject(new OffPage_Connector(475, 320, 1, "D", 12, "<h2>Off-Page Connector</h2>"));
var object11 = add_theObject(new OR(575, 320, 1, "<h2>OR</h2>"));
var object12 = add_theObject(new SummingJunction(675, 320, 1, "<h2>Summing Junction</h2>"));
free_write("Input and Output Symbols", 20, "bold", 350, 410);
var object13 = add_theObject(new Data(75, 470, 1, "Data", 12));
var object14 = add_theObject(new Document(250, 470, 1, "Document", 12));
var object15 = add_theObject(new MultiDocument(425, 470, 1, "Multi - Document", 12));
var object16 = add_theObject(new Display(600, 470, 1, "Display", 12));
var object17 = add_theObject(new ManualInput(75, 570, 1, "Manual Input", 12));
var object18 = add_theObject(new Card(250, 570, 1, "Card", 12));
var object19 = add_theObject(new PunchedTape(425, 570, 1, "Punched Tape", 12));
free_write("File and Information Storage Symbols", 20, "bold", 350, 640);
var object20 = add_theObject(new StoredData(75, 700, 1, "Stored Data", 12));
var object21 = add_theObject(new MagneticDisk(250, 700, 1, "Magnetic Disk", 10));
var object22 = add_theObject(new DirectAccess(425, 700, 1, ["Direct", "Access", "Storage"], 10, "<h2>Direct Access - Storage</h2>"));
var object23 = add_theObject(new InternalStorage(600, 700, 1, ["Internal", "Storage"], 10, "<h2>Internal Storage</h2>"));
var object24 = add_theObject(new MagneticTape(75, 800, 1, ["Magnetic", "Tape"], 8, "<h2>Sequential Access Storage - Magnetic Tape</h2>"));
</script>

</div>

prepare_SVG("demo");

free_write("Operation Symbols", 20, "bold", 350, 10);

var object1 = add_theObject(new Process(75, 60, 1, "Process", 12));

var object2 = add_theObject(new PredefinedProcess(250, 60, 1, "Predefined Process", 10));

var object3 = add_theObject(new AlternateProcess(425, 60, 1, "Alternate Process", 12));

var object4 = add_theObject(new Delay(600, 60, 1, "Delay", 12));

var object5 = add_theObject(new Preparation(75, 160, 1, "Preparation", 12));

var object6 = add_theObject(new ManualOperation(250, 160, 1, "Manual Operation", 10));

free_write("Branching and Control of Flow Symbols", 20, "bold", 350, 230);

var object7 = add_theObject(new Terminal(75, 320, 1, "Terminal", 12));

var object8 = add_theObject(new Decision(250, 320, 1, "Decision", 10));

var object9 = add_theObject(new Connector(375, 320, 1, "A", 12, "<h2>Connector (Inspection)</h2>"));

var object10 = add_theObject(new OffPage_Connector(475, 320, 1, "D", 12, "<h2>Off-Page Connector</h2>"));

var object11 = add_theObject(new OR(575, 320, 1, "<h2>OR</h2>"));

var object12 = add_theObject(new SummingJunction(675, 320, 1, "<h2>Summing Junction</h2>"));

free_write("Input and Output Symbols", 20, "bold", 350, 410);

var object13 = add_theObject(new Data(75, 470, 1, "Data", 12));

var object14 = add_theObject(new Document(250, 470, 1, "Document", 12));

var object15 = add_theObject(new MultiDocument(425, 470, 1, "Multi - Document", 12));

var object16 = add_theObject(new Display(600, 470, 1, "Display", 12));

var object17 = add_theObject(new ManualInput(75, 570, 1, "Manual Input", 12));

var object18 = add_theObject(new Card(250, 570, 1, "Card", 12));

var object19 = add_theObject(new PunchedTape(425, 570, 1, "Punched Tape", 12));

free_write("File and Information Storage Symbols", 20, "bold", 350, 640);

var object20 = add_theObject(new StoredData(75, 700, 1, "Stored Data", 12));

var object21 = add_theObject(new MagneticDisk(250, 700, 1, "Magnetic Disk", 10));

var object22 = add_theObject(new DirectAccess(425, 700, 1, ["Direct", "Access", "Storage"], 10, "<h2>Direct Access - Storage</h2>"));

var object23 = add_theObject(new InternalStorage(600, 700, 1, ["Internal", "Storage"], 10, "<h2>Internal Storage</h2>"));

var object24 = add_theObject(new MagneticTape(75, 800, 1, ["Magnetic", "Tape"], 8, "<h2>Sequential Access Storage - Magnetic Tape</h2>"));

</script>