diff --git a/Binner/Binner.Web/ClientApp/src/App.js b/Binner/Binner.Web/ClientApp/src/App.js index 99138ffd..326ec755 100644 --- a/Binner/Binner.Web/ClientApp/src/App.js +++ b/Binner/Binner.Web/ClientApp/src/App.js @@ -37,6 +37,7 @@ import { BarcodeScanner } from "./pages/tools/BarcodeScanner"; import { Help } from './pages/help/Home'; import { Scanning } from './pages/help/Scanning'; import { ApiIntegrations } from './pages/help/ApiIntegrations'; +import { BOM } from "./pages/help/BOM"; function withSearchParams(Component) { return props => ; @@ -129,6 +130,7 @@ class App extends Component { } /> } /> } /> + } /> diff --git a/Binner/Binner.Web/ClientApp/src/custom.css b/Binner/Binner.Web/ClientApp/src/custom.css index 5ad560db..60a339f9 100644 --- a/Binner/Binner.Web/ClientApp/src/custom.css +++ b/Binner/Binner.Web/ClientApp/src/custom.css @@ -618,18 +618,18 @@ section.formHeader { border: 1px solid #666; } -.helpimage { - padding: 10px; - font-size: 0.8em; - font-style: italic; -} - -.helpimage img { - border: 1px dashed #eee; - padding: 10px; - max-width: 500px; - height: auto; - display: block; +.popupimage { + padding: 10px; + font-size: 0.8em; + font-style: italic; +} + +.popupimage img { + border: 1px dashed #eee; + padding: 10px; + max-width: 500px; + height: auto; + display: block; } .barcode-support { diff --git a/Binner/Binner.Web/ClientApp/src/pages/Settings.js b/Binner/Binner.Web/ClientApp/src/pages/Settings.js index 4a368435..5f7a8e79 100644 --- a/Binner/Binner.Web/ClientApp/src/pages/Settings.js +++ b/Binner/Binner.Web/ClientApp/src/pages/Settings.js @@ -713,7 +713,7 @@ export const Settings = (props) => {
Your DigiKey Client ID. -
+
DigiKey Client ID {
Your DigiKey Client Secret. -
+
DigiKey Client Secret {

Example: localhost:8090/Authorization/Authorize
-
+
DigiKey Callback URL { + const navigate = useNavigate(); + return ( +
+ + navigate("/")}> + Home + + + navigate("/help")}> + Help + + + BOM + +

Bill of Materials (BOM)

+ + +

+ BOM, or Bill of Materials, allows you to manage all of the parts in your project and give you cost information, status on your inventory, and PCB management. Your BOM tracks the quantities used in your project, allows you to consume those parts as you produce PCB's, determine if you have enough inventory to create the number of PCB's you want to produce, and create PCB serial numbers. +

+ +

Getting Started

+

+ The first thing you need to do is create a Project. Click on the `BOM` icon on the home page. +

+ +
+

+ Create your first project by clicking the `+ Add BOM Project` button. +

+
+ Create Project +
+
+ +
+

+ Fill in your project details - only a name is required. Adding additional information is purely for your reference. You may associate a BOM with a location, as well as a color which will be displayed on the BOM management page. +

+

+ After adding your project, click on it in the list below to view the BOM interface. +

+ +
+ BOM Interface +
+
+

+ The BOM page allows you to add PCB's and parts. If your project has multiple PCB's, you can create and track parts for each PCB. You can download your BOM to an Excel file, or CSV for when it comes time to order out of stock items or import it into another system. +

+ +

Important Concepts

+ +
    +
  • Multiple PCB's can be created per project, but you can also use no PCB's.
  • +
  • Parts can be assigned to a PCB, or not assigned to any PCB. These are called Unassociated parts and are still part of your BOM.
  • +
  • Producing a PCB means you are physically assembling a PCB which will take parts out of your inventory.
  • +
+ +

Creating a BOM without PCBs

+ +

+ If you choose to create your BOM without PCBs, you still have access to most features _except_ for serial number generation and tracking. You can also mix using PCBs and not using PCBs in the same BOM - unassociated parts are essentially treated as a PCB. +

+ +
Add a part
+ +

+ The Add Part dialog is for adding a part to your BOM. Here you can select a PCB (optionally) the part belongs to, the quantity of the part needed for your PCB, and additional designators or notes you may want to provide. +

+ +
Adding a part from your inventory
+ +
+

+ Here we have searched our inventory for any part starting with `LM` and have found two items. We want to add an LM358 to our BOM so click the LM358 row to indicate you would like to add this part to your BOM. +

+
+ Add Part +
+
+ +
Adding a part not in your inventory
+ +

+ You can also add parts you have not entered into your inventory yet. Below we have searched for the part `LM741` and it is not found in your inventory. +

+ +
+

+ Clicking Add on a non-inventory part will display the following dialog: +

+
+ Adding non-inventory part +
+
+ +

+ Click OK to add the part to your BOM. +

+ +
Producing a PCB
+ +
+

+ Below we can see that we have added 2 parts to our BOM. In the black overview area we are being told we have all parts in stock, and that we can produce our BOM 1 time. In this case, we have not assigned any parts to a PCB so we intend to produce all parts onto a single unspecified PCB. If we have added multiple PCBs to our system this overview will tell you how many times you can produce your BOM before you run out of parts, and which PCB has the lowest number of parts in our inventory. +

+
+ BOM Interface +
+
+ +
+

+ Let's try producing a PCB. Click on the `Produce PCB` button. +

+

+ You will be shown the Produce PCB dialog. +

+
+ Produce PCB +
+
+ +

+ Because we have not added any PCB's, we should choose the All or Unassociated options under Select PCB(S). All means to produce everything in your BOM (all defined PCB's as well as unassociated parts). Unassociated parts in this case has the same meaning, as we only have unassociated parts in our BOM. +

+ +
+

+ Enter the quantity you plan to produce. Here we will produce a quantity of 1 as we do not have enough parts for more than that. +

+
+ Produce PCB +
+
+ +
+

+ No serial numbers will be generated, as that is only an option for when you produce a PCB. Click on the `Produce` button. +

+
+ BOM Interface +
+
+ +

+ Now we can see we our inventory was reduced by the total number of parts needed to produce our BOM. We have 1 out of stock part - in this case `LM741` and we must purchase more and add them to our inventory. +

+ +

Creating a BOM with PCBs

+ +

+ BOM's are even more useful when you utilize PCBs. They are very easy to use, even if you only have 1 PCB in your project as they can create and track serial number generation for you. You can also add unassociated parts (not assigned to a PCB) should you need to, they will be treated as an extra PCB. +

+ +

Create a PCB

+ +
+

+ Click on the `Create PCB` button. +

+
+ Create PCB +
+
+ +
+

+ Enter a name, here we will use `Power Supply`. Enter an optional description. Additionally you can specify the quantity of the PCB that is required to produce your BOM - normally this is `1`. But in special cases such as an audio amplifier board, you may have 2 of the same PCB's required for your BOM project (left and right channels). The quantity will be treated as a multiplier of the parts assigned to this PCB. You can specify a serial number format of your choice, this value will be incremented from the right most portion of the format you specify. Cost is used for cost projections of your BOM. +

+

+ Repeat this step by also creating a PCB named `Sensor Board` with a quantity of 1. +

+
+ +

Add a part

+ +

+ The Add Part dialog is for adding a part to your BOM. Here you can select a PCB the part belongs to, the quantity of the part needed for your PCB, and additional designators or notes you may want to provide. Select the `Power Supply` PCB we just created. +

+ +
Adding a part from your inventory
+ +
+

Here we have searched our inventory for any part starting with `LM` and have found two items. We want to add an LM358 to our BOM so click the LM358 row to indicate you would like to add this part to your BOM.

+ +
+ Add Part +
+
+ +
Adding a part not in your inventory
+ +
+

+ You can also add parts you have not entered into your inventory yet. Below we have searched for the part `LM741` and it is not found in your inventory. +

+ +
+ Add Part +
+
+ +
+

+ Clicking Add on a non-inventory part will display the following dialog: +

+
+ Add Non-Inventory Part +
+
+

+ Click OK to add the part to your BOM. +

+ +
Producing a PCB
+ +

+ Below we can see that we have added 2 parts to our BOM in the `All` tab. The `Power Supply` tab should also show 2 parts, and we have not assigned any parts to the `Sensor Board` yet. +

+ +
+

+ In the black overview area we are being told we have all parts in stock, and the Power Supply PCB is lowest on inventory. We are also shown that we can produce our entire BOM 1 time. This overview will tell you how many times you can produce your BOM before you run out of parts, and which PCB has the lowest number of parts in our inventory for your reference. +

+
+ BOM Interface +
+
+ +

+ Let's try producing a PCB. Click on the `Produce PCB` button. +

+ +
+

+ You will be shown the Produce PCB dialog. +

+
+ Produce PCB +
+
+ +

+ Select the `Power Supply` PCB. We could choose `All` means to produce everything in your BOM (all defined PCB's as well as unassociated parts). An overview will be displayed in the dialog for each PCB you are producing, and if you have enough parts to produce the quantity of boards. +

+ +
+

+ Enter the quantity you plan to produce. Here we will produce a quantity of 1 as we do not have enough parts for more than that. +

+ +
+ Produce PCB +
+
+ +
+

+ You are shown the next serial number that will be generated for each PCB you produce. Click on the `Produce` button. +

+ +
+ BOM Interface +
+
+ +

+ Now we can see we our inventory was reduced by the total number of parts needed to produce our BOM. We have 1 out of stock part - in this case `LM741` and we must purchase more and add them to our inventory. +

+ +

+ See the Wiki for more help topics. +

+
+
+ ); +}; diff --git a/Binner/Binner.Web/ClientApp/src/pages/help/Home.js b/Binner/Binner.Web/ClientApp/src/pages/help/Home.js index 07b853a0..27e5fec4 100644 --- a/Binner/Binner.Web/ClientApp/src/pages/help/Home.js +++ b/Binner/Binner.Web/ClientApp/src/pages/help/Home.js @@ -31,6 +31,10 @@ export const Help = () => {

Api Integrations

Configuring Api integrations are an important part of using Binner effectively.

+
  • navigate("/help/bom")}> +

    BOM

    +

    Learn how to configure BOM (Bill of Materials) projects to aid in managing your inventory usage.

    +
  • window.open("https://github.com/replaysMike/Binner/wiki", "_blank")}>

    Wiki

    Get more help from the wiki on GitHub

    diff --git a/Binner/Binner.Web/ClientApp/src/pages/help/Scanning.js b/Binner/Binner.Web/ClientApp/src/pages/help/Scanning.js index a567f667..1e9164d3 100644 --- a/Binner/Binner.Web/ClientApp/src/pages/help/Scanning.js +++ b/Binner/Binner.Web/ClientApp/src/pages/help/Scanning.js @@ -65,7 +65,7 @@ export const Scanning = () => {
  • Bulk import new parts on the Add Inventory page
  • - DigiKey DotMatrix 2D Barcode + DigiKey DotMatrix 2D Barcode Example 1. This is a 2D DotMatrix barcode on a standard DigiKey part label.
    Importing Orders
    @@ -76,7 +76,7 @@ export const Scanning = () => { Sales Order Number manually easily as well.

    - DigiKey DotMatrix 2D Barcode + DigiKey DotMatrix 2D Barcode Example 2. There are multiple 1D code-128 barcodes, and several 2D DotMatrix barcodes on a standard DigiKey packing list.

    diff --git a/Binner/Binner.Web/ClientApp/src/pages/help/help.css b/Binner/Binner.Web/ClientApp/src/pages/help/help.css index cf374ece..8a3b9fb9 100644 --- a/Binner/Binner.Web/ClientApp/src/pages/help/help.css +++ b/Binner/Binner.Web/ClientApp/src/pages/help/help.css @@ -176,6 +176,28 @@ height: 200px; } +.helpimage { + padding: 10px; + font-size: 0.8em; + font-style: italic; +} + +.helpimage img { + border: 1px dashed #eee; + padding: 10px; + max-width: 90%; + height: auto; + display: block; +} + +.helpimage.large img { + max-width: 90%; +} + +.help .bullet.highlight > .helpimage img { + border: 1px dashed #aaa; +} + .help code { background: #f4f4f4; border: 1px solid #ddd; @@ -207,11 +229,17 @@ margin-left: 30px; } +.help .segment { + padding: 40px; +} + .help .bullet { border-left: 2px solid #3340f3; - padding: 10px; + padding: 20px; margin-left: 30px; - margin-bottom: 15px; + margin-top: 30px; + margin-bottom: 50px; + font-weight: 500; } .help .bullet.highlight {