The page is is a test bench for the symbols in the Analog ICs library. The selectors provide the user with all possible options for each and every symbol. But note that, all options do not apply to all symbols.

This page can also be used when you are drawing a logic schematic that contains the Analog IC family. Once you get the symbol you want in the test area, and adjusted with the proper annotation, the complete instance is available below the selection area. This code can then be inserted directly into your drawing script. There will be a few things, like the Drawing Object and Symbol Coordinates, that need changing. But the rest can just be used as is.

This is not a comprehensive library of the Analog devices. Devices are only added as I find a need for them. For information on how to add a symbol to the library, see the section at the botton of this page labeled Adding a Symbol to the Analog ICs Library

Analog Devices Test Bench

Description: Instantiate a Analog Device symbol. Options are available for reversing of the +/- input pins, and switching the symbol from right to left facing.

Note:

ParameterDescriptionExample
Lib_A_Dwg_Obj Graphics Object that points to the drawing.
0
10
30
50
70
90
110
140
170
200
180
160
140
120
100
80
60
40
20
+
U1A
uPC324C
3
2
1
Lib_A_RefDes Reference Designator. Select from the dropdown menu.
Lib_A_Type Type of device. Select from the dropdown menu.
Lib_A_Section
A Only | B Only | C Only | D Only
A w/Power | B w/Power | C w/Power | D w/Power
Power Only
Lib_A_Inputs Show Inputs with
"+" above the "−" (Norm)
"−" above the "+" (Swap).
Select from the dropdown menu.
Lib_A_Center_X Symbol Center X Position Show/Hide Grid (10x10), Center Mark, Pins (green dot).
Grid
On
Off
Center
On
Off
Pins
On
Off
Lib_A_Center_Y Symbol Center Y Position

Return: For the "Op_Amp", the X/Y coordinates for Minus Input, Plus Input, Output, V+, and V- are returned.

Usage: The selections from the table above, are used to create the example below. After selecting and entering your specific information, the example can be used directly, with a copy/paste. The items in Red are the only ones that need to be adjusted to your specific needs. The lines in Green are just comments and can be deleted. Due to space limitations, some of the lines below may be split onto more than one line.

// Draw U1A
var U1A_Ret = Analog_Dev( Dwg_Obj, "uPC324C", "Norm", "U1", "A_Only", Start_X, Start_Y );
U1A_In_Neg_X = U1A_Ret[0]; U1A_In_Neg_Y = U1A_Ret[1];
U1A_In_Pos_X = U1A_Ret[2]; U1A_In_Pos_Y = U1A_Ret[3];
U1A_Out_X = U1A_Ret[4]; U1A_Out_Y = U1A_Ret[5];
Fixes Required for the Misc Library

These are items that are still outstanding in the Analog ICs Library. When they are fixed, they will be marked.

Adding a Symbol to the Analog Devices Library

Adding a symbol to the Analog Devices library is a relatively complex operation. So this section is not only for those who are interested in my method of drawing. It is also for me. I don't always remember all the steps necessary to add a symbol. So this makes sure I cover all the necessary areas. I am actually writing this as I am adding some symbols.

There are three files to deal with and the names usually correspond to the symbol library that you are working with. For example, the Analog Devices Library uses Analog_Devs.html, Analog_Devs_Samples.js, and Analog_Devs.js. Note that the last two are Javascript files.

Initially, I start with the Analog_Devs.html file. In the Test Bench Table there is a dropdown menu for selecting the device type. The new device needs to be added to that dropdown menu. It is also useful to move the selection indicator, selected="selected" to the new selection. This will make it simple when you refresh the page to see changes.

Then, move on to the

Adding a Symbol to the Analog Devices Library

Adding a symbol to the Analog Devices library is a relatively complex operation. So this section is not only for those who are interested in my method of drawing. It is also for me. I don't always remember all the steps necessary to add a symbol. So this makes sure I cover all the necessary areas. I am actually writing this as I am adding some symbols.

Test Bench (HTML)
Option Selectors
Sample Code
Display Area
Sample Gen (JS)
Symbol Lib (JS)
Web Page (HTML)
Param Selectors
Display Area
Draw Pgm (JS)

The block diagram on the right shows the relationship of the Test Bench, Sample Generator, Web Page, Draw Program, and the Symbol Library. The Symbol Library is highlighted to show it's central position. The "red" wires are the data passed between the Test Bench, Sample Generator, and the Symbol Library. The "blue" wires are the data passed between the Web Page, the Draw Program, and the Symbol Library. While there is only one Test Bench for each symbol. However, any number of Web Pages can use a symbol.

Test Bench (HTML)

During symbol creation, the the Test Bench is used to verify/exercise all of the options available to the symbol. Some symbols are simple and don't have many options, but some are complex and require rotation, have multiple sections, or have multiple views. So the Test Bench is divided into three operations.

  • Option Selectors - These are created in a HTML Table structure. The table contains dropdown menus, radio buttons, and free text input areas. These areas are given "id"s, so they can be read by the Sample Generator. The Analog Devices Test Bench, at the top of this page, is a good example. After the page loads, the Sample Generator is run. And each time the user changes any of the menus or buttons, the Sample Generator is run again. This means that, as you change the input, the symbol is redrawn with new options and new sample code is created.
  • Sample Code Area - This is very simply a HTML "<div>..</div>" structure that contains a "id" and is of the "jscode" class. The Sample code area is always located at the bottom of the Test Bench's HTML Table structure.
  • Display Area - As the developer is continuing to select options, each time anything in the Test Bench is changed, the symbol is rewritten in a draw area. The draw area is simply HTML "<div>..</div>" structure that contains a "id". The size of the draw area varies but is usually around 100×100 pixels. It can be bigger to handle large symbols. The Sample Code access this draw area, via the "id" to create the draw object. The draw object is then used as a pointer to the draw area.

Sample Generator (JS)

This file is run from the loading of the HTML file or from option changes. It checks each of the selectors, to determine what is to be drawn and what options are in effect. After the selectors are read, a symbol is created in a small draw area on the right of the Test Bench Table. The draw area is only big enough to draw one symbol and show the user how it will look in their drawing.

Then, the Sample Generator puts together some Sample Code and outputs it to a Text Box, at the bottom of the Test Bench Table. The developer can then cut/paste this code directly into their drawing. Because this code is generic, the developer will have to provide the correct draw object, and coordinates. But, other than that, the code is complete.

The Sample Code then goes on to manage how the test symbol is displayed. At the bottom of the Test Bench table is a Show/Hide section. All symbols are drawn at the center of the small draw area. But, on the fly, a developer can add a 10x10 pixel Grid, a Center Marker, or highlight the attached pins. The Grid and Center Marker are useful during development. The highlighting of attached pins helps the developer verify that the correct coordinates for all pins, is returned to the developers.

Web Page (HTML)

  • Param Selectors - Most of my web pages contain some form of a calculator. For example, I might have a page for calculating component values for a Low-Pass Active Filter. On the HTML page there is a area where the user can enter his/her requirements. This would be things like Configuration, Response Characteristics, Stage Gain, and Cutoff Frequency. When the page loads, or when a requirement is modified, the Draw Program is run.
  • Display Area - This is an area where the output of the draw program is directed. This is very simply a HTML "<div>..</div>" structure that contains a "id". The class can be defined which sets the height and width.

Draw Program (JS)