Javascript® Electronic Notebook Documentation of "lib_s.js" Schematic Drawing Library by .
Place your mouse pointer over any of the categories above, for an active menu of their contents.
The following information documents a schematic drawing function library. The library contains functions that use jsDraw2D 2D JavaScript drawing library. The jsDraw2D library provides all of the necessary function for two dimensional drawing, like lines, circles, squares, etc..
jsDraw2D is a JavaScript library to draw 2D graphics on web pages inside web browser. The library is entirely written in JavaScript and does not need any plug-in or additional software to run/execute. The JavaScript source code of the library is open and free under "Creative Commons 3.0 Unported" license. The jsDraw2D documentation describes the various JavaScript classes along with their methods (APIs) available in the jsDraw2D library.
Drawing Creation: The list below describes the steps needed to add a drawing to a web page. This is mostly for my own purposes, so that I don't forget something, when I create a new document. The descriptions may not be very detailed, but it's all I need. I can cut/paste directly from this document to drawings started on my web pages.
Source the JavaScript Code - Before you can draw anything, you need to source the JavaScript functions. Add following code inside <head>...</head> structure of your HTML document. The first instance is the jsDraw2D JavaScript code (jsDraw2D.js). The other instances are my various JavaScript drawing libraries. They are the Schematic Library (lib_s.js), the Physical Library (lib_p.js), and the Logic Library (lib_l.js), respectively.
The last file, my_drawing.js is your drawing file that contains your JavaScript commands.
Instantiate the drawing "<div>" - My drawings mostly consist of shapes, lines, and text that can be created using the jsDraw2D.js. That library uses a <canvas> structure because that is what they use in the jsDraw2D.js example. Plus, I don't require the interactive capabilities of a canvas or svg structure.
The HTML code below is how the drawing <div> is instantiated in a HTML document. The "id" must be unique to all other structures that use a "id". The "class" defines the style setting to associate with the drawing.
Drawing CSS - The CSS code below is an example of the style settings that can be used with the drawing <div> above. The A-Size and B-Size designation are really arbitrary. But they are the same Length/Width ratios as the standard A-Size and B-Size drawings. A-Size, C-Size, and E-Size drawings had 1.3:1 Length/Width ratios. B-Size and D-Size drawings had 1.5:1 Length/Width ratios. A-Size drawings often came in portrait and landscape orientations. A-Size Portrait was 8-1/2" Wide x 11" High and A-Size Landscape was 11" Wide x 8-1/2" High. Either one fit easily into a binder.
There is no requirement to stick to standard sizes for your drawings. Drawings can be any size you like. The last two styles below show style settings for smaller drawings than the first there. Generally, I start with a small drawing and start working from the bottom left, and then up and across the drawing. If I need more space I can increase the drawing size without moving everything on the drawing.
Note: The B-Size style, defined below, is probably the biggest drawing you may want on your web page. That size can fit on a single screen, without browser and OS headers/footers getting in the way. Anything bigger may cause the screen to generate scroll bars.
Create a JavaScript Function - I keep all of my JavaScript file in a folder named "js". That is why all of the JavaScript references have "js/" as a prefix. A Javascript file, much like a HTML file, is nothing more than a text file with a ".js" extension. So you can easily create a empty text file and then change the extension to ".js". The OS will complain a bit, but just tell it to do it anyway.
The JavaScript file will contain all of your drawing commands grouped as a function. The function contains the initialization of the object followed by a series of function references to draw the diagram. In the code below, the red text is the id of the drawing <div>. This is then used to create the drawing object pointer, Drawing_Obj.
Note: the line numbers in the example are there for reference purposes only. Do not include them in your JavaScript functions.
Below is a line-by-line description of the code snippet above.
Add draw commands to the Javascript Code
Color Settings (Javascript) - The following global variables are defined in the function library. It they are not changed, the entire drawing will be done with black symbols, wires, dots, and text.
If you wish to change the coloring the same global variables can be declared in your schematic drawing code. Below is and example that is used in this document. It changes the Symbol_Pen to "red", the Wire_Pen to "green", the Dot_Fill color to "green", and the Value_Color to "blue".
Drawing Boarder and Label: Unlike the other entries on this page, this entry describes two draw functions: Drawing_Boarder(...) and Drawing_Label(...). If you are creating a drawing and need a border and label, these functions should be called first, followed by the rest of the drawing operations. The chart on the right shows typical drawing sizes. But these were sheets of vellum or drawing paper and were spread out on large drafting tables. Some of these sizes are still in use, but even 20 years ago, we were taking D-Size drawings and shrinking them to B-Size. That size was easier to handle and could be printed easily.
The B-Size designation, on the sample drawing, is really arbitrary. But it is the same Length/Width ratio (1.5:1) of the B-Size and D-Size, landscape, drawings. It was common to use the A-Size, portrait, drawings for small schematics because they fit right into a 8-1/2" x 11" binder. The A-Size has a 1.3:1 Length/Width ratio.
The Sample Schematic, shown at the bottom of this section, is 900 pixels wide by 600 pixels high (1.5:1 Ratio). This is about as big as you want to get, and still fit the whole drawing on one screen. My monitor is 1366 pixels wide x 768 pixels high. The browser's header and the operating system's task bar take up some vertical space, so 600 pixels high is about all you can do. On some systems, this may need to be reuced. If you do reduce it, also reduce the width keeping the 1.5:1 width/height ratio.
Description: This function draws a border around the edges of the drawing. The boarder line is indented from the edges by 15 pixels. Within that border are zone markers. The horizontal markers are, from left to right, "8" to "1". The vertical markers are, from bottom to top, "A" to "D". The zone are generally used on multi-page drawings to designate the source and destination for signals common to each page.
Return: Returns the X and Y coordinates (Lib_S_Label_X, Lib_S_Label_Y) of the lower right corner of the boarder. You can call those variables anything you want but their intent is for positioning the Label. If you are not using a label, the return values can be ignored.
Usage: The sample function call is shown below. The Width and Height values are extracted from the drawing instance. The values from the select boxes above modify the sample subroutine call directly to show how a call might be constructed. When placed in the proper drawing function, as shown at the top of this document, the Width and Height are extracted from the drawing instance.
Description: In this function, Lib_S_Label_X, Lib_S_Label_Y describe the bottom-right position for the drawing label. Those values can also be returned by the Drawing_Border function. If you are not using the Drawing_Border function, you will need to specify the Lib_S_Label_X, Lib_S_Label_Y.
The information for the Drawing_Label is an array of data (Lib_S_Label_Info) in a specific order. The order is: Manufacturer (Lib_S_Mfgr), Drawing Title (Lib_S_Title), Drawing Size (Lib_S_Size), Drawing Number (Lib_S_Doc_Num), Drawing Revision (Lib_S_Rev), Drawing Date (Lib_S_Date), Drawing Sheet Number (Lib_S_Sheet), and Total Number of Sheets (Lib_S_Pages). Below is an example of the array and the information.
Usage: The sample subroutine call is shown below. The values from the select boxes above modify the sample subroutine call directly to show how a call might be constructed. When placed in the proper drawing function, as shown at the top of this document, the Width and Height are extracted from the draawing instance.
Description: Draws a line starting at point Lib_S_Start_X, Lib_S_Start_Y to Lib_S_End_X, Lib_S_End_Y.
Return: None
Usage: Should only be used after all of the symbols are placed on the drawing so that the symbol end points can be used as end point references.
Description: Draws a line starting at point Lib_S_Start_X, Lib_S_Start_Y routed according to the routing array. This function can only be use if there are two, or more, routing points.
Return: Returns the X,Y of the ending point.
Usage: Generally used after all of the symbols are placed on the drawing. Use to connect a symbol pin on one part to a symbol pin on another part, when the route is not a simple vertical or horizontal line.
Description: Draws a 3 pixel wide dot at the point Lib_S_Start_X, Lib_S_Start_Y.
Usage: Should only be used after all of the symbols are placed on the drawing and wires are drawn, so that the symbol end points can be used for dot placement.
Description: Draws a Off Page arrow at point Lib_S_Start_X. Lib_S_Sig is the associated signal name and Lib_S_Zone is the signal source or destination, depending on whether you instantiate a signal that is going off the page or being received from a off page source.
Return: Returns the X/Y coordinates of the input pin.
Usage: .
Description: Draws a power definition point at point Lib_S_Start_X. The value, Lib_S_Value, is attached to the top of the symbol.
Description: Draws a ground definition point at point Lib_S_Start_X, Lib_S_Start_Y.
Description: Draws a small ground definition point at point Lib_S_Start_X, Lib_S_Start_Y. For use when drawing space is a premium.
Description: Draws a output pin at Lib_S_Start_X, Lib_S_Start_Y.
Usage: Used to indicate a signal going off the circuit. The example below draws a horizontal capacitor, a 10 pixel long wire, and then attaches an output symbol.
Description: Draws a tie point at Lib_S_Start_X, Lib_S_Start_Y.
Usage: Used to indicate a signal tie point. The example below draws a horizontal capacitor, a 10 pixel long wire, and then attaches an output symbol.
Description: Draws a connector pin at Lib_S_Start_X, Lib_S_Start_Y.
Usage: Used to indicate a connector pin.
Description: Draws a Coax Connector at Lib_S_Start_X, Lib_S_Start_Y.
Return: Returns the position of the center conductor tie point and the ground tie point (Lib_S_CTEnd_X, Lib_S_CTEnd_Y, Lib_S_GEnd_X, Lib_S_GEnd_Y) in a array.
Usage:
Description: Draws a Voltage Regulator at Lib_S_Start_X, Lib_S_Start_Y.
Return:
Description: Draws a Op Amp centered at Lib_S_Start_X, Lib_S_Start_Y.
Description: This function draws the specified logic device centered at point Lib_L_Center_X, Lib_L_Center_Y. Most logic devices contain multiple instances of a particular logic function, so the Device Section selector below will change dynamically based on which device is selected. Power and Ground connections are considered a separate Device Section. Note: This is not a comprehensive library of logic devices. Devices are only added as I find a need for them.
Return: The draw function will return, in an array, the X and Y points for each of the displayed pins. This can be different depending on which logic device is specified. For example, the "7400" would return the X,Y points for the two input pins (In1 and In2) and one output pin (Out). The "7474" would return the X,Y points for D, Clk, Set, Clr, Q, and Q-Bar.
Return points are always orderd the same. Starting at the Top-Left of the symbol and working from Top to Bottom, Left to Right. For example, the return points for the "7476" would be ordered:
Usage: The following sample code shows the command line needed to create the object in the sample box. You can cut/paste it to your code page and then adjust the specifics to suite your page. Set the start X and Y values for the symbol. Change all of the variable prefixes, e.g. U1A to U1B, for each instance of the symbol. This keeps the variables unique for later use.
Description: Draws a Resistor Horizontally (R0), left to right, starting at point Lib_S_Start_X, Lib_S_Start_Y. Lib_S_Label is placed above the symbol and Lib_S_Value below the symbol. A Vertical resistor (R90), is drawn top to bottom. Lib_S_Label and Lib_S_Value are placed on the right of the symbol. Symbol placement can be changes with Lib_S_Label_Pos.
Lib_S_Start_X
Lib_S_Start_Y
Lib_S_Label
Lib_S_Value
Lib_S_Label_Pos
Return: The draw function will return the end X and Y values for the symbol, in a array.
Usage: Set the Start_X and Start_Y values for the symbol. The draw function will return the End_X and End_Y values as a array. Change all of the variable prefixes, e.g. R1 to R2, for each instance of the symbol. This keeps the variables unique for later use. The example below draws a horizontal resistor starting at R1_Start_X, R1_Start_Y, with the Part ID ("R1") above the resistor and the value ("220K") below the resistor. The values returned are for the resistor end point.
Start_X
Start_Y
End_X
End_Y
R1_Start_X, R1_Start_Y
Usage: Set the Start_X and Start_Y values for the center of the symbol. The draw function will return the X and Y values for the end points and the wiper. Change all of the variable prefixes, e.g. R1 to R2, for each instance of the symbol. This keeps the variables unique for later use. The example below draws a horizontal resistor starting at R1_Start_X, R1_Start_Y, with the Part ID ("R1") above the resistor and the value ("220K") below the resistor. The values returned are for the resistor end point.
Description: Draws a Capacitor of Type Basic, Electrolytic, or Variable based on Lib_S_Type ("Basic" || "Elect" || "Var" ). Lib_S_Orient specifies the symbol orientation ("R0" = Vertical || "R90" = Right || "R180" = Bottom || "R270" = Left ). Lib_S_Label specifies the Part Designator ("C1" || "C2") and Lib_S_Value specifies the Part Value ("100 uF" || "10 uF" || "0.1 uF" || "" ).
Usage: Set the start X and Y values for the symbol. The draw function will return the end X and Y values as a array. Change all of the variable prefixes, e.g. C1 to C2, for each instance of the symbol. This keeps the variables unique for later use.
Description: Draws a Basic Inductor with 1, 2, 3, or 4 180° arcs (Lib_S_Type = "Basic1" || "Basic2" || "Basic3" || "Basic4" ). Lib_S_Orient specifies the symbol orientation ( "R0" = top to bottom || "R90" = left to right || "R180" = bottom to top || "R270" = right to left ). Lib_S_Core specifies whether the inductor should be marked with a core. Lib_S_Label specifies the Part Designator ("L1" || "L2"). Lib_S_Value specifies the Part Value ("100 uH" || "10 uH" || "0.1 uH" || etc. ).
Usage: Set the start X and Y values for the symbol. The draw function will return the end X and Y values as a array. Change all of the variable prefixes, e.g. L1 to L2, for each instance of the symbol. This keeps the variables unique for later use.
Description: Draws a Diode starting at point Lib_S_Start_X, Lib_S_Start_Y with the cathode direction based on Lib_S_Rot. Default for vertical diodes places the Lib_S_Label and Lib_S_Value on the right of the symbol. Default for horizontal diodes places the Lib_S_Label above and the Lib_S_Value below the symbol.
Return: The draw function will return the Anode (X,Y) coordinates and Cathode (X,Y) coordinates, in a array.
Usage: Set the start X and Y values for the symbol. Change all of the variable prefixes, e.g. D1 to D2, for each instance of the symbol. This keeps the variables unique for later use.
Description: Draws a Transistor starting at point Lib_S_Start_X, Lib_S_Start_Y with the cathode direction based on Lib_S_Cath_Pos. Default for vertical diodes places the Lib_S_Label and Lib_S_Value on the right of the symbol. Default for horizontal diodes places the Lib_S_Label above and the Lib_S_Value below the symbol.
Return: The draw function will return the end X and Y values for the transistor's Base, Emitter, and Collector symbol, in a array.
Usage: Set the start X and Y values for the symbol. Change all of the variable prefixes, e.g. Q1 to Q2, for each instance of the symbol. This keeps the variables unique for later use. Q1_Start_X = 100; Q1_Start_Y = 240; var Q1_XY_Return = [Q1B_X,Q1B_Y,Q1E_X,Q1E_Y,Q1C_X,Q1C_Y] = Transistor( Lib_S_Dwg_Obj, "NPN", "R0", "None", "Q1", "1N3866", "default", Q1_Start_X, Q1_Start_Y );
Description: Draws a Crystal, from left to right, starting at point Lib_S_Start_X, Lib_S_Start_Y. Default operation is to place Lib_S_Label above the symbol and Lib_S_Value below the symbol.
Description: Draws a Transformer starting at point Lib_S_Start_X, Lib_S_Start_Y. This point is the upper left winding of the transformer. Lib_S_Label passes the part designator (T1, T2, etc.). Lib_S_In_Value and Lib_S_Out_Value are used to pass the input and output voltages, respectively.
Return: The draw function will return the X and Y end points of each terminal (A, B, C, and D).
Usage: Set the start X and Y values for the symbol. Change all of the variable prefixes, e.g. T1 to T2, for each instance of the symbol. This keeps the variables unique for later use.
Description: Draws a SPST Switch starting at point Lib_S_Start_X, Lib_S_Start_Y. Drawing is "up" or "right" based on Lib_S_Rot. End point lables, Lib_S_In_Label and Lib_S_Out_Label, can be blanked by passing "".
Return: The draw function will return the X and Y end point.
Description: Draws a DPDT Switch starting at point Lib_S_Start_X, Lib_S_Start_Y. Drawing is "up" or "right" based on Lib_S_Rot. End point lables, Lib_S_In_Label and Lib_S_Out_Label, can be blanked by passing "".
Usage: Set the start X and Y values for the symbol. Change all of the variable prefixes, e.g. S1 to S2, for each instance of the symbol. This keeps the variables unique for later use.
Description: Draws a Fuse starting at point Lib_S_Start_X, Lib_S_Start_Y. Drawing is "R0" or "R90" based on Lib_S_Rot.
Usage: Set the start X and Y values for the symbol. Change all of the variable prefixes, e.g. F1 to F2, for each instance of the symbol. This keeps the variables unique for later use.
