Weighing Control System is a site that allows a user to list loads (weights) expected to come into site from head office and counter-check the target weight disclosed by the driver of the vehicle arriving to site with the target loads expected from head office. The user can then enter the loaded weight (inweight) of a vehicle coming into site and the unladen weight (outweight) of the vehicle leaving site. The program calculates the net weight of product (loaded weight less unladen weight) that has been delivered to site. The system will alert the user if the weight of the product is within the allowable tolerance (10% variance) of the target weight. It will also keep a tally of number of loads that have entered the site in order to counter-check the number of loads expected for that period. This will allow the user to monitor the weight of product in their site and ensure all deliveries have been made

STRATEGY

Focus - What’s worth doing?
Allow the user to list expected loads from head office, counter-check with driver target weight. Calculate net weight between loaded and unladen trucks coming in and out of site, monitor accuracy and tally loads.

Definition - What are we creating?
An easy to use and accessible JavaScript tool that can be used in a browser without any additional software required.

Value - What value does it provide?
It provides the user with an error free way of counter checking number of loads, whether loads entering sites are within tolerance of goods going out of site by taking a reading from the weighing indicator as the loaded truck goes over the incoming weighbridge and taking another reading as the unladen goes over the outgoing weighbridge.

SCOPE

What features will be available?
Below header there will be an Instructions button the user can press which will detail the steps to follow to use the software. Below that there will be a Add expected load weights button where the user can add multiple loads expected for the given period via a pop up notification box that will then be listed onscreen. This is followed by the 3 input boxes and 1 output box which will notify the user if the load is within or outwith 10% tolerance. A Submit Loads button that will tally each load that has come through site when hit. Finally, there will be a clickable LinkedIn link that will take the user to JWS LinkedIn page for further information. Screenshots are provided below.

STRUCTURE

How is the user interaction designed?
At the top of the page will be a JWS logo with a brief description of what the software does. There will then be the instructions button and below that there will be two images of trucks left and right to represent the unladen and loaded trucks and an image of a weighing scale in the middle to represent weighing. Underneath the images will be a section where the user can list expected loads. This will be followed by the input boxes for target, in and out weights then output box for netweight. A submit button will alert the user whether the net weight is within the allowable tolerance of the target weight. The submit button will tally the number of loads when pressed. Finally, the footer will have a LinkedIn logo and link plus JWS contact details.

SKELETON

How will the interface be laid out?

SURFACE

What will the visual design look like?

FUTURE RELEASES

What features would you like to have in the future?
Adding registration plates for the trucks and keeping a database of all the corresponding weight readings including an eternal total for the net weight with a check to ensure it matches expected loads (weights) total. Ticking off expected load weights once that load has been counter-checked with target weight to verify it has arrived.

TECHNOLOGY

What technology was used?

• Gitpod - writing code on workspace.
• Github - hosting repository.
• HTML - markup language used to write code.
• CSS - style sheet language used to style code.
• CSS - programming language used to write code.
• Chrome Dev Tools - platform used to test contrast and device responsiveness.
• Balsamic Wireframes - platform used to sketch out website.
• Lucid Charts - platform used to create flowchart.

TESTING

How was the app tested and are there any bugs that have not been addressed?
Tested HTML code on W3C https://validator.w3.org/ with no errors or warnings found.

Tested CSS code on Jigsaw https://jigsaw.w3.org/css-validator/ with no errors or warnings found.

Tested Javascript code on Jshint https://jshint.com/ with no errors and 11 'let' warnings found.

Tested responsiveness for multiple devices (high res monitor, low res monitor, iPad and iPhone) on Chrome Dev Tools as shown below:

Tested all buttons, outwith tolerance warning, within tolerance calculations and valid input notifications - all working properly as shown below:

• Checked instructions modal working correctly.
• Checked add load weights button working correctly.
• Checked array of load weights showing correctly.
• Checked tolerance calculation and notification working correctly.
• Checked submit load button working correctly.
• Checked outwith tolerance warning working.
• Checked within tolerance notification working.
• Checked valid input (integer) notification working.

Bug found with Instructions modal where the popup overlaps iphone portrait screen size. Fixed bug by reducing width of modal.

DEPLOYMENT

How was the project deployed?
The site was deployed to GitHub pages. The steps to deploy are as follows:

• In the GitHub repository, navigate to the Settings tab.
• Scroll down to the pages option on the left menu and select.
• Select the main branch from the build and deployment section.
• Once the main branch has been selected and the page is refreshed a message is displayed to indicate the successful deployment.

The live link can be found here - https://bfo1715.github.io/weighing_control_system/

The repository can also be cloned by following the following steps:

• Open the terminal in your OS.
• Go to the folder of your choice.
• Type git clone https://github.com/BFO1715/weighing_control_system.git.
• The code will be cloned in your folder.
• You can then start developing the code in the IDE of your choice.

CREDITS

Code Institute - https://codeinstitute.net/
JWS - https://www.johnwhiteandson.com/
Stack Overflow - https://stackoverflow.com/