+ 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. +
+ ++ 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. +
++ 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. +
+ ++ 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. +
+ ++ 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. +
+ ++ 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. +
+ ++ 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. +
++ 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: +
++ Click OK to add the part to your BOM. +
+ ++ 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. +
++ Let's try producing a PCB. Click on the `Produce PCB` button. +
++ You will be shown the Produce PCB dialog. +
++ 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. +
++ No serial numbers will be generated, as that is only an option for when you produce a PCB. Click on the `Produce` button. +
++ 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. +
+ ++ 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. +
+ ++ Click on the `Create PCB` button. +
++ 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. +
++ 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. +
+ +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.
+ ++ 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: +
++ Click OK to add the part to your BOM. +
+ ++ 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. +
++ Let's try producing a PCB. Click on the `Produce PCB` button. +
+ ++ You will be shown the Produce PCB dialog. +
++ 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. +
+ ++ You are shown the next serial number that will be generated for each PCB you produce. Click on the `Produce` button. +
+ ++ 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. +
+Configuring Api integrations are an important part of using Binner effectively.
+Learn how to configure BOM (Bill of Materials) projects to aid in managing your inventory usage.
+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 = () => {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 {