neuronlight/pinout

Electronic device pinout renderer

Pinout

Pinout facilitates the rendering of integrated circuit pinout diagrams from a JSON file., _(*1)

Installation

$ composer require neuronlight/pinout, _(*2)

Test the installation by browsing to /vendor/neuronlight/pinout/examples/index.php, _(*3)

You should see a pinout diagram for the PIC12F675 microcontroller., _(*4)

Simple usage

Include the javascript in your web page:, _(*5)

<script type="text/javascript" src="/vendor/neuronlight/pinout/pinout.js"></script>

To have a pinout diagram rendered from a JSON use an element with a data-device attribute:, _(*6)

<div data-device="pic12f675"></div>

where (in this case) pic12f675 is the filename (sans .json extension - although it can be included) of the JSON file defining the device., _(*7)

You'll also need to include jQuery; either locally or via one of the many CDNs available, _(*8)

Defining a device

A JSON file for a device takes the form:, _(*9)

{
    "name": "Serial Infrared Decoder",
    "description": "Serial Infrared Decoder based on PIC12F675 8-Bit Microcontroller",
    "package-type": "SDIP",
    "pin-count": 8,
    "pinout": {
        "undefined": "NC",
        "pins": {
            "1": {
                "name": "VDD",
                "signal-direction": "none",
                "description": "Positive supply"
            },
            "2": {
                "name": "IR IN",
                "signal-direction": "in",
                "description": "Infrared module input"
            },
            "3": {
                "name": "IR IN",
                "signal-direction": "in",
                "description": "Infrared module input"
            },
            "4": [
                    {
                        "name": "MCLR",
                        "inverted": true,
                        "signal-direction": "in",
                        "description": "Master clear"
                    },
                    {
                        "name": "VPP",
                        "signal-direction": "in",
                        "description": "Programming voltage"
                    }
            ],
            "5": {
                "name": "Serial Out",
                "signal-direction": "both",
                "description": "Serial data output"
            },
            "8": {
                "name": "VSS",
                "signal-direction": "none",
                "description": "Ground reference"
            }
        }
    }
}

Package types currently supported are DIP, PDIP, CERDIP, SDIP & SPDIP., _(*10)

(Devices with less than 24 pins that are defined as DIP sized packages are rendered as SDIP), _(*11)

Changing the appearance of the diagram

The diagram is rendered using paramters in the default configuration file:, _(*12)

{
    "color": "000",
    "background": "fff",
    "width": 640,
    "height": 480,
    "scale": 10
}

Some, or all of the paramters can be overridden in one of two ways., _(*13)

1. An alternative configuration file (named pinout_config.json) can be created and placed in the same directory as the device JSON file (parameters defined this way override those defined in the default configuration file), _(*14)

2. Other attributes can be added to the HTML element (any parameters define in this way override those defined in any configuration file), _(*15)

Element attributes supported are:, _(*16)

data-width - width of diagram in pixels, _(*17)

data-height - height of digram in pixels, _(*18)

data-scale - scale of diagram (number of pixels per mm), _(*19)

data-color - diagram color (in hex M, RGB or RRGGBB format), _(*20)

data-background - background color, _(*21)

Direct use

The device image can be called directly. The example image is called, for example, with the form:, _(*22)

/vendor/neuronlight/pinout/pinout.php?f=/vendor/neuronlight/pinout/examples/pic12f675.json&w=600&h=300&c=f40

The file parameter can be omitted when calling directly; the device JSON being sent as a POST parameter called 'dev' instead. When called in such a way the appearance can only be changed from that defined in the default configuration file by way of $_GET parameters (i.e. no custom config file will be loaded)., _(*23)

Experimenter

There's a basic tool included for experimenting with the pinout functions that can be found at /vendor/neuronlight/pinout/examples/experimenter.php (html5 browser required)., _(*24)

Share and enjoy., _(*25)