Indian Institute of Technology, Palakkad 
CE3100 – Internship report 
Computer Science and Engineering 

WEB APPLICATION

Sakshi Rathore Himanshu Jain

111701026 111701013
 
  

 
 
 
 
 
 

 
PREFACE
The purpose of the report is to explain what we did and learned during our internship period in the
Detect Technologies. The report focuses primarily on the task allocated, working environment,
successes and shortcomings that we encounter while handling various tasks assigned to us by
the supervisor.

The major problem that we faced was that we were new to use angular and were not familiar with
it. The tasks allocated were difficult to think for its implementation in the front end. The report
focuses on a few important aspects of the software. The objective of the software was for the
welfare of all resources. As it helped during the shutdown of a huge power plant. This software
helped to reduce the number of injuries caused during the process.

The internship started from 2nd May, 2019 till 29th June, 2019. We were a part of software team.
We got an experience to work on a live project and it was a proud moment for us to see clients
using the software made by us.
 
 

 
 
 
 
  

 
A
​ CKNOWLEDGEMENT 
 
The internship opportunity we had with Detect Technologies was a great chance for learning
and professional development. Therefore, we consider ourselves very lucky as we were
provided with an opportunity to be a part of it. We are so grateful for having a chance to meet
so many wonderful people and professionals who led us through this internship period.

Bearing in mind previous we are using this opportunity to express my deepest gratitude and
special thanks to the CEOs of Detect Technologies who in spite of being extraordinarily busy
with his duties, took time out to hear, guide and keep us on the correct path and allowing us to
carry our their project of their esteemed organisation and extending during the training.

We express our deepest thanks to Mrs. Ramya Sundar​, Senior Software Engineer and ​Mr.
Lokeshwar​, Software Engineer for taking part in useful decision and giving necessary advice
and guidance and arranged all facilities to make life easier. We choose this moment to
acknowledge their contribution gratefully.

We perceive this opportunity as a big milestone in our career development. We will strive to
use gained skills and knowledge in the best possible way, and we will continue to work on
their improvement, in order to attain desired career objectives. Hope to continue cooperation
with all of you in the future.

Thank You.

 
 
 

 
 
  

 
ABOUT DETECT TECHNOLOGIES 
 
Detect  technologies resides at the intersection of patented hardware and intelligent 
algorithms  and  creates  value  for  its  industry  partners  by  enabling  development  of 
real  predictive  capability.  Their  unique  suite  of  patented  products  such  as  GUMPS, 
NOCTUA,T-PULSE  and  APIS  have  been  designed  to  simplify  decision  making 
through  real  time  insights  about  assets  and  especially  inaccessible  assets.  All  of 
their  solutions  are  strongly  supported  by  predictive  algorithms  to  generate 
quantifiable  return  on  investments.We  also  support  our  partners  by  delivering 
services to drive efficiency through innovation across various functions. 
 
Detect  offers  innovative  and  customer-centric  inspection  solutions,  enabling 
Enterprises,  Associates  and  business  to  rise.  Their  convergent,  digital,  design 
experiences  and  innovation  platforms  help  us  to  create  tangible  business value for 
our  partners.  They  aim  to  consistently  achieve  top  quartile  growth  by  contributing 
to  our  customers'  success,  enabling  our  employees  realize  their  potential  and  by 
creating value for all our stakeholders. 
 
 

 
 
 
 
 
 
  

TABLE OF CONTENTS 
 

1. Problem statement 

2. Approach 

3. Results 

4. Learning and Outcome 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 
  

PROBLEM STATEMENT : 
 
1.) Create a UI to mark the faults and provide some observation and recommendation
for the marked fault in the given set of images captured by the drone.

Detailed description of the problem statement :

Set of images (URLs) will be passed from the backend, implement the following set of features :

● Images should be displayed in sets of eight divided in two rows along with image names as
given from backend.
● On clicking an image a modal should be opened.
● Modal consists of an image, observation-recommendation box, features to mark faults in the
image along with the close button and the image name on top.
● Images should be opened in corresponding tabs.
● Make two tabs for observations and recommendations in the modal.
● Features to mark faults in the image -
○ Draw​ - on clicking user should be able to draw a rectangle on the image.
○ Select - on clicking user should be able to select any drawn rectangle along with its
corresponding observation and recommendation.
○ Delete - on clicking user should be able to delete any selected rectangle along with its
corresponding observation and recommendation.
○ Clear - on clicking user should be able to clear all the drawn rectangles along with all the
observations and recommendations.
○ Download - on clicking user should be able to download the image along with the
rectangles on it.
○ Save - on clicking user should be able to save the image in the backend along with the
rectangles on it.
● For each fault marked on the image user should be able to give observation and
recommendation.
● On selecting a rectangle highlight the corresponding observation and recommendation.

 
  

● On deleting a rectangle delete the corresponding observation and recommendation along

with the rectangle.
● Map the rectangle with the observation and recommendation.
● User should be able to select riskrate from the dropdown in observation tab.
● User should be able to select predefined observation / recommendation from the dropdown
which should be added to the textarea.
● Observation should be passed along with the selected riskrate.
● After the observation / recommendation are added to the table user should be able to update it.
● Provide numbering to the rectangles, observations and recommendations.
● User should be able to zoom the image before drawing any rectangle.
● User should be able to zoom and mark the faults.
● Display a popup message for the following actions :
○ If user tries to give observation or recommendation without marking any fault.
○ If user tries to mark another fault without adding observation and recommendation for
the previously marked fault.
○ If the user tries to pass an empty text for observation / recommendation.
○ If user tries to save the image without marking any fault.
○ If the user tries to save the image without adding any observation to the marked fault.
○ If the user tries to save the image without adding any recommendation to the marked
fault.
○ If user tries to close the modal without saving the marked faults.
● A table should be displayed below the images.
● On clicking the image name in the table should open the modal.
● Table should consist of observation and recommendation for all the images along with their
name.

● Backend should provide the images along with the corresponding observations and
recommendations according to the given filters.

● While saving replace the earlier saved image in the backend.

 
  

2.) Display the count of people in the working area on a chart on a daily basis with some
filters with respect to date time and threshold values.

Detailed description of the problem statement :

Data for each ten minutes will be taken from the backend:

● On starting of the page today’s data should displayed on the chart.

● On scrolling over the chart should zoom the chart on scroll up and zoom out on scroll down.
● Y-Axis should be dynamic i.e it should adjust its range according to the data values.
● We should be able to choose the date range for which we want to see the data.
● We should also be able to select the time range if we want to see the data for a single day.
● X-Axis should also be dynamic i.e it should be able to adjust itself automatically according to the
date range.
● There should be a box above the chart to display the current count of the people.
● Annotations should be put on the chart for the min and max threshold values.
Min Threshold - It is the minimum count of the people that we will use to know the time
for which count was below this. We can adjust this from the side bar.
Max Threshold - It is the maximum count of the people that we will use to know the time
for which count was above this. We can adjust this from the side bar.
● There should be another box above the chart which will display the number of hours people
count was below the min threshold value.
● There should be one more box above the chart which will display the number of hours people
count was above the max threshold value.
● Double click on the chart should reset it if it is zoomed.
● After zooming on the chart we should be able to pan over it.
● We should not be able to pan before the 00:00 hour of the day and after the 23:59 hour of the
day.
● Hovering over the chart should display the corresponding time and the people count on that
point on chart.

3.) Use routing to navigate from one view to the other as the user performs application tasks.

 
  

Approach
1.) Create a UI to mark the faults and provide some observation and recommendation for the
marked fault in the given set of images captured by the drone.

● To display the images in the set of eight we have used the ngFor in html which is a function of
angular to run the for loop in the html language. It was used in such a manner that it can handle
any number of incoming images.
● To open the clicked image in the modal the image clicked is passed to a function which stores it
in a variable.
● Image name is also given to a function and stored in a variable.
● To open the modal in the corresponding tab the tab name is also passed along with the images.
● Modal and rest tabs are designed using html, css and bootstrap.
● To get the mouse position on the image -
○ The event is fired when the mouse moves on the image.
○ From this event we can get the x coordinate and the y coordinate of the mouse on the
whole screen.
○ To get the coordinates on the image we find the coordinates where the image is starting on
the screen and then calculates the coordinates on the image.
○ The image coordinates changes as the screen size changes so we need to take of care of
the responsiveness of the coordinates.
● To draw rectangles on the image -
○ First of all we should be able to get the mouse position on the image, it regularly updates
the current mouse position as we move the mouse over the image.
○ The position on the image where the mouse was clicked is noted.
○ Then we added a div element dynamically through ts (typescript) and gave it a border of
some colour with width and height from start position till the current position of the mouse.
○ Then on mouse up event we stopped changing the height and width of the rectangle.
○ Each drawn rectangle is given a unique id and displayed over the rectangle dynamically.

 
  

○ To calculate the height and width of the rectangle we use the following formula -
■ Height = |startPosition Y - currentPosition Y|
■ Width = |startPosition X - currentPosition X|
○ Hence the rectangle is drawn on image according to our mouse move.
● To select the drawn rectangles -
○ Get the mouse position where it is clicked on the image.
○ Check if that coordinates lies inside any of the drawn rectangle.
○ If there is any such rectangle, change it’s border colour so that it looks like it is selected.
Store it’s id in a variable for reference in future.
● To delete the selected rectangle -
○ To delete the rectangle we just removed the div element of the rectangle if any rectangle is
selected.
○ Also the id’s of all ahead rectangles is updated (decrease by 1).
● To clear the image -
○ We just removed all the drawn rectangles and also cleared all the given corresponding
observations and recommendations.
○ Kind of resetting the image.
● To download the image with the rectangles drawn on the image, we used a library named
domtoimage, which converts the dom elements of html to canvas and then we have
downloaded the image by converting it to blob using FileSaver library.
● The blob that will be made to download the image is saved in the backend to save the image
with the rectangles drawn over it.
● After drawing rectangles we can give observation and recommendation for that rectangle (which
is basically a fault in the image).
● Observation and recommendation was updated using again ngFor loop in the html so we can
add as many observation and recommendation as we need.
● For each fault marked, observation and recommendation were updated in the array.
● Each rectangle is mapped to its observation and recommendation, on selecting any rectangle
the background color for its corresponding observation and recommendation text is also
changed.
● Get the id for the selected rectangle to delete and remove the rectangle position and its
corresponding observation and recommendation from the array.

 
  

● The observation and recommendation are mapped to each other by providing them the
same id.
● The selected risk rate was saved and id of the rectangle was given to it. Also it was updated in
the text-box along with the observation and recommendation.
● A set of observations and recommendations were pre-defined in a dropdown. The selected
value is updated to the textbox and also in the respective arrays of observation and
recommendation.
● After selecting update the content are made editable and on hit of enter the saved text for
observation or recommendation is updated.
● In the div of rectangle id is also added. In the observations and recommendations text area
numbering is also added.
● To zoom and draw a rectangle over the image.
○ First find the mouse position where mousewheel event is called.
○ We have set the zoom count to 0.5 i.e. on one mouseup or mousedown event the image
size will increase or decrease by 1.5.
○ The image should not go beyond the modal and the position of the image should be set
according to the mouse cursor’s current position.
○ The image position is set according to the following algorithm :
■ The coordinates of the mouse position will also increase by 1.5 times.
■ The cursor will remain at the same position (say x) where it was previously on the
image.
■ So the part of image that will remain inside of the modal will be decided by keeping
the point x at the same position.
■ The overflow for the image will be set hidden.

 
  

Fig. 1 : Normal Image

Fig. 2 : Zoomed Image

 
  

○ Then on the zoomed image the rectangle is drawn in the same way as earlier.
○ Then while zooming out the image we have used the template matching algorithm to
identify the position of the rectangle that is drawn on zoomed image on the original zoom
out image.
○ Template Matching Algorithm -
■ First find all the pixel values inside the rectangle drawn.
■ Find the mean median and mode of those values
■ Then in the original image pick all the possible sets of such pixels and the find the mean
median and mode of that set
■ Draw a rectangle on the matched part of the image
■ Repeat it on every mouse scroll out event till the image is resetted
2.)  Display  the  count  of  people  in  the  working  area  on  a  chart  on  a  daily  basis  with  some 
filters with respect to date time and threshold values. 
 
● For plotting the data on the chart we have used ​angular2-chartjs​ library.
● To zoom and pan over the chart we have used chart js zoom and pan plugin.
● For giving red dot line for max and min threshold we have used chart js annotations plugin.
● For Y - axis to be dynamic we were changing the range of y-axis as the data changes using the
following formula
○ Upper limit = ((max(data)+10)*100)/100
○ Lower limit = ((min(data)-10)*100)/100
● The data comes with date and time so we were taking the input of date and time and then
filtering the data to display on the chart.
● Whenever the date or other filter is changed we were refreshing the chart using event listener
property.
● For x - axis to be dynamic we have given a specific format to ticks of x-axis such that it will
automatically decides the gap between two values on x-axis.
● We have made service file to fetch data from the backend.
● Live count was fetched and displayed.
● To calculate the number of hours workers were below or above the min and max threshold we
calculated it at the time when the data was fetched from the backend and displayed it on the
box above.
● For resetting the chart on double mouse click, we have made a separate function in the library
of chartjs to reset every variable and functions.
● To restrict the pan and zoom we have given limits to it in their properties section.

 
  

RESULTS
1. Each tab receives image urls and the images along with their names are displayed as a set of eight
in two rows. Table below the images contain observations, recommendations and risk rate for each
fault.

2​. On clicking the image or image name in the table modal is opened. Modal consists of image name and close
icon at the top, image in the left, observation and recommendation table in the right, draw, select, delete, clear,
save, download, at the bottom-left, textbox to enter observations and recommendations.

 
  

3. We are able to mark faults in the image and give observation and recommendation for each fault.
On selecting the marked fault it is highlighted along with corresponding observation and
recommendation. Each rectangle is mapped to its corresponding observation and recommendation. A
unique id is displayed for each rectangle and same id is displayed for its corresponding observation
and recommendation.

 
  

4. Message box are to be displayed in the modal as shown below -

5. On mouse wheel we are able to zoom in and zoom out the image (if no rectangle is drawn).

 
  

6. We can update the given observation and recommendation for recently marked faults.

7. Data was displayed on the chart with start and end date time.

 
  

8. Image modal without zoom.

9. Zoomed image

 
  

10. Rectangle drawn on the zoomed image.

11. Zoomed out image along with the rectangle drawn over it.

 
  

Learning and Outcome

1. We have learnt Angular7 ​which is a typescript framework to build web and mobile
applications.
2. We have learnt to use the following libraries :
➢ angular2-chart js - ​v​0.5.1- MIT

https://www.npmjs.com/package/angular2-chartjs

Used in manPowerCounting to plot the line chart

➢ chartjs-plugin-zoom - ​v​0.7.0 - MIT

https://www.npmjs.com/package/chartjs-plugin-zoom

Used in manPowercounting to zoom over the chart.

➢ chartjs-plugin-annotation - ​v​0.5.7 - MIT

https://www.npmjs.com/package/chartjs-plugin-annotation

Used in manPowerCounting to plot the max min threshold in the chart.

➢ Chartjs-plugin-labels - ​v​1.1.0 - MIT

https://www.npmjs.com/package/chartjs-plugin-labels

Used to put text over the pie chart.

➢ Dom-to-image - ​v​2.6.0 - MIT

https://www.npmjs.com/package/dom-to-image

Used in modal.ts to convert html elements to image for downloading and saving
purpose.

 
  

➢ file-saver - ​v​2.0.1 - MIT

https://www.npmjs.com/package/file-saver

Used to download the image from its blob.

3. We learnt Bootstrap to make the UI mobile friendly.

4. We also had a unique experience of working in a vibrant work culture. It taught us to be
flexible, resilient and make the most out of scarce resources.
✓ Learn to be multitasking.
✓ Developed self learning skills.
✓ Learn to be flexible.
✓ Decision making skills.
✓ Learn to work in a team environment.
✓ Understanding the software from end-users perceptive.
✓ Be a tester and come up with the fixes for the bugs found.
✓ Perform task within the allotted deadline.

 
 
 
 
 
 
 
 
 
 
 
 
 

 
  

 
 
 
 
 
 
 
 
 

 
  

 
 
 
 
 
 
 
 

 
 

 
 
 
Signature