-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathtutorial.html
More file actions
149 lines (141 loc) · 9.3 KB
/
tutorial.html
File metadata and controls
149 lines (141 loc) · 9.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@100;200;300&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style_grid.css">
<title>CardIAP</title>
</head>
<body>
<header class="sticky">
<span class="tittle">
<h1></b>CardIAP</b></h1>
</span>
<nav id="nav-bar">
<ul>
<li class="nav-li"><a href="index.html">About</a></li>
<li class="nav-li"><a href="tutorial.html" class="activate">Using CardIAP</a></li>
<li class="nav-li"><a href="documentation.html">Documentation</a></li>
<li class="nav-li"><a href="index.html">Citing us</a></li>
<li class="nav-li"><a href="index.html">Contact Us</a></li>
</ul>
</nav>
</header>
<main class="main" id="main">
<section class="installation" id="installation">
<article class="locally-running">
<h2>Using CardIAP with Docker</h2>
<p>With <a href="https://docs.docker.com/get-docker/">Docker</a> installed in your machine, run in the terminal the following command:</p>
<div class="code small-cell">
<p>$ docker run -it --rm --net host ajvelezrueda/cardiap</p>
</div>
<p>CardiAP will be listening at <a href="#">//localhos:5000/</a></p>
<br>
<h2>Running CardIAP locally for contributing</h2>
<p>You can easly use <strong>CardIAP</strong> locally by installing it like follows:</p>
<div class="code big-cell">
<p>$ git clone https://github.com/CardiAP/CardiAp.git</p>
<p> $ virtualenv venv</p>
<p>$ ./venv/bin/activate</p>
<p> $ pip3 install -r requirements.txt </p>
</div>
<p>And locally-running as follows:</p>
<div class="code medium-cell">
<p>$ voila CardiAP.ipynb</p>
<p> $ voila CardiAP.ipynb --autoreload=True</p>
</div>
<p><b>CardIAP</b> image analysis is based on <a href="https://pypi.org/project/cardilib/0.0.2/" target="_blank" class="link-white"><b>cardilib</b></a>, a python library created by the authors for or performing biomedical images analysis. </p>
<p>This package based on NumPy, OpenCV, and Pandas libraries is available for installation and usage in all operative systems through
<a href="https://pypi.org/project/cardilib/" class="link-white" target=”_blank”><b>pip</b></a>.</p>
</article>
<article class="online-running">
<h2>You can run CardIAP Online</h2>
<article>
<p>Launch <b>CardIAP</b> <a href="http://50.19.16.236/" class="link-white" target="_blank">here</a>:</p>
<ul class="project-icons">
<li class="project-item">
<a class="iconitos link-white" href="http://50.19.16.236/" target="_blank"><i class="fa fa-globe"></i></a>
</li>
<li class="project-item">
<a class="iconitos link-white" href="https://github.com/CardiAP/CardiAp" target="_blank"><i class="fa fa-github"></i></a>
</li>
</ul>
</article>
</article>
</section>
<section class="tutorial" id="tutorial">
<article class="dependences">
<h2>Quick start using <b>CardIAP</b></h2>
<article>
<p><b>STEP I:</b> Upload your image(s) to analyze using the upload button. You can use the <a href="https://github.com/CardiAP/CardiAp/tree/master/photos_examples" target=”_blank”>example images</a> provided by CardiAP to make the first try.</p>
<p><b>Start</b> button displays image(s). Users can delete the image(s) using <b>Clear</b> button.</p>
<figure>
<img src="./images/Figura_cadiap_A.png" alt="upload-image">
</figure>
<p><b>STEP II:</b> select the region of the picture for the analysis. </p>
<p><b>CardIAP</b> allows the user to crop each image interactivelly, by using the image display and width and heigth selector. </p>
<figure>
<img src="./images/Figura_cadiap_B.png" alt="cropp-image">
<figcaption> After cropping the image and saving the crop sizes the setting inputs for the smoothing and analysis are requested.</figcaption>
</figure>
<figure>
<p><b>STEP III:</b> Voilà!! Now you can check out your results and download the tables</p>
<img src="./images/Figura_cadiap_C.png" alt="table-image">
<img src="./images/Figura_cadiap_D.png" alt="slices-image">
<img src="./images/Figura_cardiap_E.png" alt="AR-DI-image">
<figcaption>
The results for each picture you uploaded will be provided in a different tab. Also, you will be able to check out the information about all the slices.
</figcaption>
<p><b>CardIAP</b> also provides the amplitudes and intensities plots.</p>
</figure>
</article>
</section>
<br>
<section class="tutorial" id="tutorial">
<article class="dependences">
<h2>Video tutorial</h2>
<article>
<br>
<p><b>CardIAP usage:</b> Once the application is deployed, we must load an image from the <b>upload</b> button, we select the image and when we click on the <b>play</b> button it appears on the screen.
Using the scroll bars we can select a rectangle that will represent our area of interest. Make sure that area takes only a region within the cell that contains at least one Ca2+ transient. Once established, the selection can be saved through the <b>save crop sizes</b> button. This will display a configuration menu for filter and analysis parameters.</p>
</br>
<br>
<p>The filter setting is loaded with zero, so no filter will be applied to the ROI. The values depend on the noise in our images but we usually use a value of 5 for the <b>kernel size</b> and a <b>sigma</b> of 75.
Regarding the analysis setting, we can set the width of the slices (<b>Slices width</b>), which we recommend to be greater than one to reduce possible noise. The distance between peaks (<b>Peaks dist.</b>) can be known through the frequency or measured using the scroll bars. <b>Calibration</b> allows the users to modify the data corresponding to time.
Once the parameterization is finished, we proceed to analyze by clicking on the <b>Analyze</b> button.
</p>
</br>
<br>
<p>Once the results are displayed, they can be downloaded. In the first tab the complete ROI data is shown, in the second the data of all the slices can be downloaded and in the third tab we can view and download the desired slices.
</p>
</br>
<br>
<video width="500px" height="280px" controls="controls">
<source src="./images/VideoTutorial1.mp4" type="video/mp4" />
</video>
</br>
<br>
<p><b>Dealing with analysis error</b>
</br>
<br>
<p>
When <b>CardIAP</b> displays an analysis error message it is usually related to the ROI selection, usually when one of the slices does not contain the Ca2+ transient. This can be fixed by making sure the selection is inside the cell and includes Ca2+ transients. Another possible reason for this type of error is that the image is too noisy. In this case, the user can apply filters or determine the proper spacing between peaks. <b>CardIAP</b> allows the user to correct the parameters without having to reload the image.
</p>
</br>
<video width="500px" height="280px" controls="controls">
<source src="./images/VideoTutorial2.mp4" type="video/mp4" />
</video>
</article>
</section>
</br>
</main>
<footer>
<p>Copyright (c) 2020-2021 Velez Rueda, Garcia Smith, Sommese</p>
</footer>
</body>
</html>