- Email: [email protected]
A smartphone-based colorimetric reader coupled with a remote server for rapid on-site catechols analysis
Author’s Accepted Manuscript A smartphone-based colorimetric reader coupled with a remote server for rapid on-site catechols analysis Yun Wang, Yuanyuan Li, Xu Bao, Juan Han, Jinchen Xia, Xiaoyu Tian, Liang Ni www.elsevier.com/locate/talanta
PII: DOI: Reference:
S0039-9140(16)30506-9 http://dx.doi.org/10.1016/j.talanta.2016.07.012 TAL16709
To appear in: Talanta Received date: 13 May 2016 Revised date: 26 June 2016 Accepted date: 4 July 2016 Cite this article as: Yun Wang, Yuanyuan Li, Xu Bao, Juan Han, Jinchen Xia, Xiaoyu Tian and Liang Ni, A smartphone-based colorimetric reader coupled with a remote server for rapid on-site catechols analysis, Talanta, http://dx.doi.org/10.1016/j.talanta.2016.07.012 This is a PDF file of an unedited manuscript that has been accepted for publication. As a service to our customers we are providing this early version of the manuscript. The manuscript will undergo copyediting, typesetting, and review of the resulting galley proof before it is published in its final citable form. Please note that during the production process errors may be discovered which could affect the content, and all legal disclaimers that apply to the journal pertain.
A smartphone-based colorimetric reader coupled with a remote server for rapid on-site catechols analysis a a Yun Wang , Yuanyuan Li , Xu Bao b,*, Juan Han c,*, Jinchen Xia a, Xiaoyu Tian c , and Liang Ni a a School of Chemistry and Chemical Engineering, Jiangsu University, Zhenjiang 212013, PR China b
School of Computer and Communications Engineering, Jiangsu University, Zhenjiang 212013, PR China c
School of Food and Biological Engineering, Jiangsu University, Zhenjiang 212013, PR China [email protected] [email protected] * Corresponding author. Tel: +86 158 0529 6802; Fax: +86-0511-88797508. * Corresponding author. Tel: +86 137 7553 4923; Fax: +86-0511-88780201. Abstract The search of a practical method to analyze cis-diol-containing compounds outside laboratory settings remains a substantial scientific challenge. Herein, a smartphone-based colorimetric reader was coupled with a remote server for rapid on-site analysis of catechols. A smallest-scale 2×2 colorimetric sensor array composed of pH indicators and phenylboronic acid was configured. The array was able to distinguish 13 catechols at 6 serial concentrations, through simultaneous treatment via principal component analysis, hierarchical cluster analysis, and linear discriminant analysis. After both the discriminatory power of the array and the prediction ability of the partial least squares quantitative models were proved to be predominant, the smartphone was coupled to the remote server. All the ΔRGB data were uploaded to the remote server wherein linear discriminant analysis and partial least squares processing modules were established to provide qualitative discrimination and quantitative calculation, respectively, of the analytes in real time. The applicability of this novel method to a real-life scenario was confirmed by the on-site analysis of various catechols from a water sample of the Yangtze River; the feedback result in the smartphone showed the method was able to identify the catechols with 100% accuracy and predict the concentrations to within 0.706-2.240 standard deviation. Keywords: catechols; colorimetric sensor array; on-site analysis; pH indicators; remote server; smartphone-based colorimetric reader 1. Introduction Catechols are classified both as phenolic compounds and structurally as cis-diols. Catechols are commodity chemicals which find uses as pharmaceutical and fine chemical intermediates, such as catechol, 4-tert-butylcatechol, chloroacetyl catechol. While the tremendous value of catechols in chemical synthesis is well established, there is lesser appreciation for the environmental-pollution and harm to human health caused by the massive illegal discharge and accidental leak of catechols [1]. For example, catechol is highly toxic by ingestion and contact, can irritate human eyes 1
and skin. Even at low concentrations, catechol can give foods an undesirable taste and it is readily adsorbed from the gastrointestinal tract. Once in the bloodstream, it can adversely affect liver function and cause renal tube degeneration [2]. Dopamine hydrochloride can be used to lower the fat content of pigs by being added to their feed or drinking-water in large amounts. Meat from these pigs can cause adverse health effects if consumed by humans over long periods, which may include headache, nausea, weakness, and convulsions of the limbs [3]. For these reasons, simple and convenient techniques for the qualitative and quantitative detection of catechols which provide the result in real time would be highly desirable. Traditional methods of detecting catechols, such as HPLC [4], flow injection [5], chemiluminescence [6], and spectrophotometric methods [7], are troubled by high costs, cumbersome operation of the analytical instruments, and slow analysis speed, which hinders their use as rapid detection methods. For this reason, colorimetric sensor arrays have been developed into powerful tools for the analysis of compounds bearing cis-diols, present in compounds such as catechols and carbohydrates. Lim and co-workers established a simple and low-cost colorimetric sensing array, which was successfully used in the molecular recognition of sugars and artificial sweeteners [8]. Zhang et al. employed a colorimetric sensor array to successfully discriminate 8 cis-diol-containing flavonoids [9]. This sensor array methodology is vastly superior to the conventional approaches because of its low cost, simple processing steps, and rapid generation of results. For the analysis of samples in the field, one drawback of this sensor array method is that collection of data involves a time-consuming process of image collection with a camera or a scanner and later processing of those images with a computer. A portable computing capable of operating in real time would be a great improvement for the use of colorimetric sensor arrays for on-site testing. Recently, the use of smartphones for chemical detection and analysis and in medical testing has gained popularity. Modern smartphones are fully automated and equipped with high-resolution cameras, powerful processors with large storage capacity, wireless connectivity, real-time geotagging, secure data management, and cloud computing. These capabilities allow smartphones to be used as small, conveniently carried portable devices for convenient on-site diagnostic/chemical analysis and testing with rapid reproduction of results. Thus, smartphones have proven to be an attractive alternative for the on-site collection, imaging, and analysis of data. Several researchers have already demonstrated the feasibility of smartphones for on-site diagnosis in microscopy [10], dermatology [11], chemical analyses [12], and colorimetric diagnostics [13,14]. In this work, a smallest-scale 2×2 colorimetric sensor array composed of pH indicators and phenylboronic acid was configured and used to identify 13 different catechols at 6 serial concentrations. The “before” and “after” images of the array were captured in a light-tight box with a white light-emitting diode (LED) light in the bottom using an smartphone with an application (app) designed by our own research group which was responsible for processing the images and digitizing the colors. The ΔRGB data generated from the color difference maps were then processed by principal component analysis (PCA), hierarchical cluster analysis (HCA), and linear 2
discriminant analysis (LDA) for qualitative discrimination. Partial least squares (PLS) models were established for the quantitative determination of the concentrations of specific catechols. After the simultaneous treatment via PCA, HCA, LDA, and PLS, the ΔRGB data were uploaded to a remote server to establish the LDA and PLS processing modules, which allowed the rapid and convenient on-site analysis of catechols from water samples in the Yangtze River. To the best of our knowledge, this is the first paper dealing with the on-site detection of analytes using a smartphone-based colorimetric reader coupled to a remote server. 2. Materials and methods 2.1. Chemicals and instruments Phenylboronic acid was purchased from Sigma (U.S.). Xylenol orange, o-nitrodiphenol, rhodizonic acid, and m-cresol purple were purchased from Sinopharm Chemical Reagent Co., Ltd. (Shanghai, China). Catechol, 4-tert-butylcatechol, 4-methylcatechol, 4-nitrocatechol, 3,5-di-t-butylcatechol, 1,2,4-benzentriol, 3,4-dihydroxybenzaldehyde, dopamine hydrochloride, 3-fluorocatechol, 3,4-dihydroxyphenylacetic acid, 3,4-dihydroxybenzoic acid, L-adrenaline bitartrate, and chloroacetyl catechol were purchased from Shanghai Haorui Chemical Co., Ltd. (Shanghai, China). Phosphate buffer (50 mM, pH 9.0) was prepared from phosphoric acid by titrating with NaOH solution. This buffer was used to prepare the solution of phenylboronic acid (50 mM) which was used without further pH adjustment for the configuration of the colorimetric sensor array. Solutions of the catechols (1, 10, 25, 50, 100, 150, 200, 300 mM) were prepared in de-ionized water and alcohol-water solution. pH indicator solutions (0.1%, w/v) were prepared in de-ionized water and alcohol-water solution. Commercially available white light-emitting diode (LED) light and 96-well Perspex plates were used. The smartphone (Samsung Galaxy A8) with a 1.5 GHz Qualcomm Snapdragon 615 CPU and a 16 MP camera was employed in this study. Its high-performance CPU was capable of image recognition and calculation in real-time, and the high-resolution camera produced finely digitized images. The app on the smartphone was coded using Java and Android Studio 1.3.2 in order to achieve image rendering, automatic color recognition, and calibration. 2.2. Configuration of 2×2 colorimetric sensor array and processing of data One phenylboronic acid and one pH indicator (xylenol orange, o-nitrodiphenol, rhodizonic acid, m-cresol purple) are served as an ensemble probe. 4 pH indicator solutions (0.3 mL each) were respectively added to 4 glass tubes containing the phenylboronic acid phosphate buffer solution (50 mM, 0.2 mL), forming 4 ensemble probes. Next, 13 different catechols solutions with specific concentrations (1, 10, 25, 50, 100, 150, 200, 300 mM, 0.5 mL each) including water (blank control), were each added to the 4 glass tubes. In this way, 10 mM phosphate buffer with 10 mM phenylboronic acid in the absence of catechols (water control) at initial pH 7.5 was finalized as the condition, and the final concentrations of catechols that were detected at this condition were 0.5, 5, 12.5, 25, 50, 75, 100, 150 mM. After 5 min of mixing for full color development, the mixtures were placed in the 96-well Perspex plate to constitute a 2×2 colorimetric sensor array. 3
A schematic diagram representing data acquistion and processing by the smartphone/colorimetric sensor array ensemble designed in-house by our research group is shown in Fig. 1. The 96-well Perspex plate was transferred to the light-tight box containing a white LED light in the bottom and a smartphone fixed to the top. With this equipment, ambient lighting condition and imaging distance/angle were kept constant when capturing the images of the sensor array. The “before” image consisted of a shot taken with the 16 megapixel (MP) smartphone camera capturing the color of each ensemble probe and water; the “after” image consisted of a camera shot directed towards the 2×2 array of ensemble probe/analyte mixtures. Using our laboratory designed app on the smartphone, a color difference map was obtained by subtracting the “before” image from the “after” image (red minus red, green minus green, blue minus blue). To prevent subtraction artifacts caused by acquisitions near the spot edge, only the spot center was included in the calculation. All experiments were run in quintuplicate for each of the 13 analytes and the blank control. Next, the ΔRGB data were processed by PCA, HCA, LDA, and PLS analysis using a computer before being uploaded to a remote server. 2.3. Application of 2×2 colorimetric sensor array/smartphone ensemble coupled to a remote server for detection of analytes The smartphone was connected to the remote server via a wireless-network using user datagram protocol (UDP). As shown in Fig. 2, the remote server consists of three parts: database, processing modules, and communication modules. The database in the remote server plays a role in storing the array data (ΔRGB). It must be pointed out that the ΔRGB data from the array have been processed by PCA, HCA, LDA, and PLS analysis before the smartphone was connected to the remote server. The processing module was programmed and linked in to the Java package by using Matlab 2013a software. Eclipse Integrated Development Environment (IDE) for Java Developers was used to create the communication module in order to process the analyte data by linking with the Java created processing module. The communication module functions as receiving the ΔRGB data of one unknown analyte and transmitting the analysis results to the smartphone. To qualitatively and quantitatively analyze unknown samples, all the ΔRGB data previously subjected to PCA, HCA, LDA, and PLS analysis are uploaded to the database of the remote server, which can be used to form the analysis polynomials for LDA and PLS. Once the database is updated because of the investigation of more serial concentrations of the 13 catechols, the analysis polynomials are re-derived correspondingly. When new analyte data arrive at the receive module of the remote server, they are first sent to the LDA processing module, where the data undergo classification discriminant analysis. Next, the analyte data and the classification results are forwarded to the PLS processing module for detailed calculation of the concentration. Finally, the analysis results including the classification and concentration information are fed back to the smartphone. 3. Results and discussion 3.1. 2×2 colorimetric sensor array responses The selective association of boronic acids with diols has been extensively studied 4
[15-17]. As shown in Fig. 3, boronic acids can form reversible cyclic ester complexes with cis-diols with concomitant hydronium ion generation, thereby lowering the solution pH. Different catechols (Fig. 4) generate very different changes in pH when bound to boronic acid because of the different binding constants; therefore, boronic acid and pH indicators can serve as ensemble probes to facilitate discrimination of different catechols. Herein, 4 pH indicators and phenylboronic acid (pKa 8.8) [18] were used as ensemble probes for full discrimination of the 13 catechols. It is well known that, the pKa values of phenylboronic acid vary upon complexation to different cis-diols. This decrease in pKa translates into increased acidity of the solution; the presence of pH indicators in the ensemble probes therefore reflects this change through the variation in RGB values obtained from the colorimetric sensor array responses. The color difference maps for the 13 different catechols at 12.5 mM concentration are shown in Fig. 5. Despite the low concentration of catechols, the smallest-scale 2×2 colorimetric sensor array displays a high overall response, which indicates phenylboronic acid has great affinity for catechols in this work. In previous studies, probe sets composed of various pH indicators and one or more boronic acids were required to produce desirable discrimination of the cis-diol-containing analytes [8,16,19]. In this work, an attempt was made to differentiate the greatest number of analytes with the fewest number of ensemble probes. Only 4 ensemble probes were used to configure the smallest-scale 2×2 colorimetric sensor array to differentiate as many as 13 catechols with 6 serial concentrations, which made great progress in the number of the probes. 3.2. PCA analysis of 2×2 colorimetric sensor array The 2×2 colorimetric sensor array was used for the discrimination of 13 catechols with 6 serial concentrations (12.5, 25, 50, 75, 100, 150 mM). Each analyte in the array is represented as a 12-dimensional vector since the color difference maps are a 3N-dimensional vector, where N is the number of pH indicators in the array, i.e. (4 red, blue and green difference values in a 2×2 colorimetric sensor array). Then PCA [20] was used to compress and visualize the high-dimensional discriminant information using Matlab 2014b software. The color difference maps in Fig. 5, which prove to be unique for each analyte, were easily distinguished by the naked eye even without statistical analysis. At a first glance, the changes of pH values in the acidic or alkaline solution environment accounted for the colorimetric changes of the array. When we classified the analytes by PCA, however, a single dimension (i.e. pH values) and even two dimensions failed to achieve a satisfactory discrimination of the 13 catechols with 6 serial concentrations (12.5, 25, 50, 75, 100, 150 mM). Therefore, colorimetric array data with more independent dimensions were required for the optimal identification of closely related catechols. As shown in Fig. 6, 99.03% of all data variance was contained in 5 dimensions. The high dimensionality indicated that the colorimetric array senses more than the changes of pH, which is consistent with the conclusions of previous studies [8,16,21]. In addition to the selective association of phenylboronic acid and catechols, there are other non-pH-related analyte-dye interactions that assist 5
in the discrimination process. These include Lewis acid-base interactions, hydrogen-bonds, π-π bonds, dipolar bonds, etc. Many sensor arrays based on specific or selective interactions between receptors and analytes have been developed. Although PCA showed that for these sensor arrays over 90% of all discriminatory information was contained within the two principal components, the ability to differentiate similar analytes was limited [22-25]. Other sensor arrays have been configured that are able to identify the analytes unambiguously but require the use of multiple sets of probes, in other words, an optimized colorimetric sensor array for the detection of a wide range of analytes was far unavailable [8,21,26-29]. In contrast, only 4 ensemble probes were used in this paper, making up a smallest-scale 2×2 array. The combination of the first three principal components contains about 88% of the information (Fig. 6). Although the percent is not high, the colorimetric sensor array demonstrates an extraordinary ability of chemical discrimination. As shown in Fig. 7a-7f, 13 catechols at 6 serial concentrations and 1 control are visually clustered together and separated from each other in the three-dimensional plot, which indicates the strong reproducibility and discriminatory power of the colorimetric sensor array. In addition, the concentration of catechols that can be visually distinguished in the PCA space could be as low as 12.5 mM, which indicates that the 2×2 array can be applied for microanalysis. 3.3. HCA analysis of 2×2 colorimetric sensor array The high dispersion of the colorimetric sensor array data requires a classification algorithm that takes advantages of the full dimensionality of the data. A simple and model-free approach is HCA [30], which forms dendrograms based on clustering of the array response data in the 12-dimensional ΔRGB color space. HCA analysis was performed using the SPSS Statistics 20 software to group the 13 catechols with 6 serial concentrations (12.5, 25, 50, 75, 100, 150 mM) based on the similarity in the response pattern of the 2×2 array. Clustering was defined according to the Euclidean distance. Quintuplicate trials were run for each analyte. All the 13 catechols at 6 serial concentrations plus 1 control were accurately identified against one another (Fig. 8a-8f). Remarkably, for the 70 total cases (13 catechols and 1 control × 5 replicates) of each concentration, there were no errors and zero misclassifications. For example, 3,4-dihydroxyphenylacetic acid and 3,4-dihydroxybenzoic acid were adjacent in Fig. 8a, possibly because of their similar chemical structures. This is consistent with the PCA plot in Fig. 7a, in which the two chemicals are in close proximity. With the trihydroxy group, 1,2,4-benzentriol at 12.5 mM concentration may take on the greatest response, thus facilitating the color change of the four pH indicators. As a result, 1,2,4-benzentriol located furthest from the blank control in the dendrogram, as shown in Fig. 8a. Both the properties of the substituents (electron-donating and electron-withdrawing groups) and the locations of the substituents on the pheny rings of the catechols can affect the binding affinities of catechols to phenylboronic acid. This binding affinity and other non-pH related analyte-dye interactions (Lewis acid-base, dipolar, hydrogen-bond, etc.) assists in the appropriate clustering and discrimination of the 13 analytes in the HCA dendrogram. 3.4. LDA analysis of 2×2 colorimetric sensor array 6
LDA is commonly used for data classification and dimensionality reduction. Discriminant functions are established as a linear combination of descriptors that maximize the ratio of inter-class variance and minimize the ratio of intra-class variance [31]. The data from the sensor array were processed using SPSS Statistics 20 software, and an LDA scatter plot was obtained using the discriminant functions. Fig. 9a-9f shows the distribution of 13 catechols at 6 serial concentrations plus 1 control in 2D space defined by the first two calculated discriminant functions (Function 1 and Function 2). Quintuplicate trials were run for each analyte. In the scatter plot, the overlapping of the points demonstrates the reproducibility of the analysis. More importantly, the divided groups suggests that the 2×2 colorimetric sensor array displays high discrimination among the 13 different catechols at 6 serial concentrations. LDA serves as a useful method for testing the accuracy of the colorimetric sensor array since it can not only be utilized to visualize the discriminatory ability of the colorimetric sensor array but can also be used to identify the unknown samples. Leave-one-out cross-validation was used to evaluate the predictive power of LDA. Table 1 summarizes the results of the classification matrix of the LDA model. There was no incorrect classification among 70 cases (13 catechols and 1 control × 5 replicates), affording a prediction accuracy of 100%. Table 1 Prediction abilities for different catechols at 12.5 mM concentration using stepwise discriminant analysis. 1: control, 2: catechol, 3: 4-tert-butylcatechol, 4: 4-methylcatechol, 5: 4-nitrocatechol, 6: 3,5-di-butylcatechol, 7: 1,2,4-benzentnol, 8: 3,4-dihydroxybenzaldehyde, 9: dopamine hydrochloride, 10: 3-fluorocatechol, 11: 3,4-dihydroxyphenylacetic acid, 12: 3,4-dihydroxybenzoic acid, 13: L-adrenaline bitartrate, 14: chloroacetyl catechol. Classification results a,c Predicted group membership Original
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Total
1
5
0
0
0
0
0
0
0
0
0
0
0
0
0
5
2
0
5
0
0
0
0
0
0
0
0
0
0
0
0
5
3
0
0
5
0
0
0
0
0
0
0
0
0
0
0
5
4
0
0
0
5
0
0
0
0
0
0
0
0
0
0
5
5
0
0
0
0
5
0
0
0
0
0
0
0
0
0
5
6
0
0
0
0
0
5
0
0
0
0
0
0
0
0
5
7
0
0
0
0
0
0
5
0
0
0
0
0
0
0
5
8
0
0
0
0
0
0
0
5
0
0
0
0
0
0
5
9
0
0
0
0
0
0
0
0
5
0
0
0
0
0
5
10
0
0
0
0
0
0
0
0
0
5
0
0
0
0
5
11
0
0
0
0
0
0
0
0
0
0
5
0
0
0
5
12
0
0
0
0
0
0
0
0
0
0
0
5
0
0
5
13
0
0
0
0
0
0
0
0
0
0
0
0
5
0
5
14
0
0
0
0
0
0
0
0
0
0
0
0
0
5
5
1
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
2
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
3
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
4
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
5
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
6
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
100%
7
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
100%
8
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
100%
9
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
100%
10
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
100%
11
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
100%
12
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
100%
13
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
100%
14
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
100%
7
Cross-validatedb
1
5
0
0
0
0
0
0
0
0
0
0
0
0
0
5
2
0
5
0
0
0
0
0
0
0
0
0
0
0
0
5
3
0
0
5
0
0
0
0
0
0
0
0
0
0
0
5
4
0
0
0
5
0
0
0
0
0
0
0
0
0
0
5
5
0
0
0
0
5
0
0
0
0
0
0
0
0
0
5
6
0
0
0
0
0
5
0
0
0
0
0
0
0
0
5
7
0
0
0
0
0
0
5
0
0
0
0
0
0
0
5
8
0
0
0
0
0
0
0
5
0
0
0
0
0
0
5
9
0
0
0
0
0
0
0
0
5
0
0
0
0
0
5
10
0
0
0
0
0
0
0
0
0
5
0
0
0
0
5
11
0
0
0
0
0
0
0
0
0
0
5
0
0
0
5
12
0
0
0
0
0
0
0
0
0
0
0
5
0
0
5
13
0
0
0
0
0
0
0
0
0
0
0
0
5
0
5
14
0
0
0
0
0
0
0
0
0
0
0
0
0
5
5
1
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
2
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
3
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
4
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
5
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
6
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
100%
7
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
100%
8
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
100%
9
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
100%
10
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
100%
11
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
100%
12
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
100%
13
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
100%
14
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
100%
a
100% of original grouped cases correctly classified.
b
Cross validation is done only for those cases in the analysis. In cross validation, each case is classified by the functions derived from all cases other than that case.
c
100% of cross-validated grouped cases correctly classified.
3.5. Creation of PLS quantitative models PLS is a multivariate calibration method that searches for factors, which explain as much covariance as possible between a set of predictor variables, X, and response variables, Y [32]. In this section, the cross-responses of 13 catechols with 9 serial concentrations (0, 0.5, 5, 12.5, 25, 50, 75, 100, 150 mM) to the 2×2 colorimetric sensor array were firstly performed. Quintuplicate trials were run for each concentration. Next, PLS quantitative models based on the data from the array were established to predict the concentrations of the 13 catechols. The principal components have an important influence on the predictive ability of PLS quantitative models. To obtain the optimal models for accurately predicting the concentrations of the 13 catechols, a cross-validation method was used to select the appropriate number of the principal components. The effect of the principal components on the root mean squared error (RMSE) value of each PLS quantitative model of 13 catechols was studied. The smaller the RMSE value is, the more precise of the PLS quantitative model created based on the number of the principal components is. According to the RMSE value, the number of the principal components (6-8) was eventually selected to create the 13 PLS quantitative models. The models were assessed with further samples in order to evaluate the accuracy and precision of the created prediction models. Fig. 10a-10m display the actual catechols concentration value (mM) against the predicted concentration value using the PLS algorithm. The usefulness of the PLS algorithm was clearly demonstrated by subjecting the experimental data to linear regression analysis to make a line of best fit. According to Fig. 10a-10m, the values of the slopes of the fitting lines and the values of the regression coefficients are both very close to 1, which demonstrates the accuracy of the 13 PLS quantitative models. The values of RMSEs of the 13 PLS 8
quantitative models are low, which proves their precision. All the PLS graphs of actual concentration values against predicted values for the 13 catechols exhibit a positive trend in the prediction of analytes’ concentrations. It can be concluded that the PLS quantitative models in this paper are a powerful tool for predicting the concentrations of catechols. 3.6. Analysis of practical samples In an attempt to evaluate the feasibility of this novel method to real-life examples, 3 catechols (catechol, dopamine hydrochloride, 4-methylcatechol) were analyzed on site from a sample of water in the Yangtze River. Each analyte was added to a separate solution of water from the Yangtze River at two concentrations (12.5, 150 mM). The Yangtze River water solution was regarded as blank control, which contains no catechols (0 mM). According to the steps described in Section 2.2, the 2×2 colorimetric sensor arrays were configured and color difference maps were subsequently obtained and digitized using the smartphone. The new ΔRGB data were uploaded to the remote server and the feedback information was displayed in the smartphone in real time. Analysis was performed five times per analyte per concentration, as shown in Table 2. We were gratified to learn that all analytes at all concentrations were identified without even one instance of misclassification. Although there were some unavoidable deviations from the predicted and actual concentrations, especially for low concentrations, the results of quantitative analysis gave a very good estimate of the degree of water pollution. The Yangtze River is the one of the important drinking water resources of many cities in China. In 2012, it took a long time to discover that the drinking water supply in the city of Zhenjiang, China was contaminated by phenol leaking into the Yangtze River. Therefore, rapid methods of detection and quantification of water contaminants such as catechols are highly desirable. For future suspected cases of water catechols contamination, the simple, convenient, and rapid method described in this paper will allow individuals to conveniently analyze the water sample in a qualitative and quantitative manner on site. The use of this method to accurately analyze catechols and other cis-diol-containinng compounds at trace levels is currently under study. Table 2 Analysis results of catechols in the Yangtze River solution Predicted result Actual sample
Actual concentration (mM)
Compound
Concentration (mM) a
150.00
Catechol
146.73 ± 1.75
12.50
Catechol
16.77 ± 1.87
150.00
Dopamine hydrochloride
148.91 ± 2.24
12.50
Dopamine hydrochloride
10.27 ± 2.00
150.00
4-methylcatechol
141.67 ± 0.84
12.50
4-methylcatechol
7.07 ± 0.76
0
Control
-0.44 ± 1.82
Catechol
Dopamine hydrochloride
4-methylcatechol Control a
means ± SD
4. Conclusions In this study, a low-cost, simple to arrange colorimetric sensor array/smartphone 9
ensemble coupled to a remote server was used for the rapid on-site analysis of catechols. The smallest-scale 2×2 colorimetric sensor array was able to distinguish among all 13 catechols at 6 serial concentrations, through simultaneous treatment via PCA, HCA, and LDA. The results from the multivariate data analysis demonstrated the ability of the proposed array for reliable identification and classification of catechols. A particularly noteworthy aspect of our work is the novel coupling of a smartphone to a remote server that allows for the on-site classification discriminant analysis and quantitative measurement of concentrations of unknown samples to be undertaken. This is the first time such a system has been established. The smartphone is a uniquely practical portable device that is able to read the array, upload the data, and receive the results in real time. This simple, convenient approach was here shown in a real life example to be suitable for the simple, rapid qualitative and quantitative analysis of catchols on site. Acknowledgments This work was supported by the National Natural Science Foundation of China (Nos. 31470434, 21406090 and 21576124) and the Special Financial Grant from the China Postdoctoral Science Foundation (No. 2015T80510). References [1] I.M. Russell, S.G. Burton, Anal. Chim. Acta 389 (1999) 161-170. [2] M. Aziz, T. Selvaraju, H. Yang, Electroanalysis 19 (2007) 1543-1546. [3] F. Ramos, A. Cristino, P. Carrola, T. Eloy, J.M. Silva, M. da Conceição Castilho, M.I.N. da Silveira, Anal. Chim. Acta 483 (2003) 207-213. [4] M. Tsunoda, M. Hirayama, K. Ohno, T. Tsuda, Anal. Methods 5 (2013) 5161-5164. [5] S. Wang, L. Du, L. Wang, H. Zhuang, Anal. Sci. 20 (2004) 315-317. [6] R. Cui, Y.-P. Gu, L. Bao, J.-Y. Zhao, B.-P. Qi, Z.-L. Zhang, Z.-X. Xie, D.-W. Pang, Anal. Chem. 84 (2012) 8932-8935. [7] P. Nagaraja, R. Vasantha, K. Sunitha, J. Pharm. Biomed. Anal. 25 (2001) 417-424. [8] S.H. Lim, C.J. Musto, E. Park, W. Zhong, K.S. Suslick, Org. Lett. 10 (2008) 4405-4408. [9] X. Zhang, E.V. Anslyn, X. Qian, Supramol. Chem. 24 (2012) 520-525. [10] D. Tseng, O. Mudanyali, C. Oztoprak, S.O. Isikman, I. Sencan, O. Yaglidere, A. Ozcan, Lab on a Chip 10 (2010) 1787-1792. [11] S. Kroemer, J. Frühauf, T. Campbell, C. Massone, G. Schwantzer, H.P. Soyer, R. Hofmann-Wellenhof, Brit. J. Dermatol. 164 (2011) 973-979. [12] H. Zhu, S. Mavandadi, A.F. Coskun, O. Yaglidere, A. Ozcan, Anal. Chem. 83 (2011) 6641-6647. [13] S. Wang, X. Zhao, I. Khimji, R. Akbas, W. Qiu, D. Edwards, D.W. Cramer, B. Ye, U. Demirci, Lab on a chip 11 (2011) 3411-3418. [14] A.W. Martinez, S.T. Phillips, E. Carrilho, S.W. Thomas III, H. Sindi, G.M. Whitesides, Anal. Chem. 80 (2008) 3699-3707. [15] T.D. James, K. Sandanayake, S. Shinkai, Angew. Chem. Int. Ed. 35 (1996) 1910-1922. 10
[16] J.W. Lee, J.S. Lee, Y.T. Chang, Angew. Chem. 118 (2006) 6635-6637. [17] M. Dowlut, D.G. Hall, J. Am. Chem. Soc. 128 (2006) 4226-4227. [18] L. Bosch, T. Fyles, T.D. James, Tetrahedron 60 (2004) 11175-11190. [19] K. KantaáGhosh, Chem. Commun. 47 (2011) 4001-4003. [20] J.R. Carey, K.S. Suslick, K.I. Hulkower, J.A. Imlay, K.R. Imlay, C.K. Ingison, J.B. Ponder, A. Sen, A.E. Wittrig, J. Am. Chem. Soc. 133 (2011) 7571-7576. [21] C.J. Musto, S.H. Lim, K.S. Suslick, Anal. Chem. 81 (2009) 6526-6533. [22] A. Ziyatdinov, S. Marco, A. Chaudry, K. Persaud, P. Caminal, A. Perera, Sens. Actuators B: Chem. 146 (2010) 460-465. [23] Sasaki, H. Tsuchiya, M. Nishioka, M. Sadakata, T. Okubo, Sens. Actuators B: Chem. 86 (2002) 26-33. [24] J. Cui, W. Zhu, N. Gao, J. Li, H. Yang, Y. Jiang, P. Seidel, B.J. Ravoo, G. Li, Angew. Chem. Int. Ed. 53 (2014) 3844-3848. [25] R.B. Roy, B. Tudu, L. Shaw, A. Jana, N. Bhattacharyya, R. Bandyopadhyay, J. Food Eng. 110 (2012) 356-363. [26] H. Zhou, L. Baldini, J. Hong, A.J. Wilson, A.D. Hamilton, J. Am. Chem. Soc. 128 (2006) 2421-2425. [27] L. Feng, H. Li, X. Li, L. Chen, Z. Shen, Y. Guan, Anal. Chim. Acta 743 (2012) 1-8. [28] Z. Li, W.P. Bassett, J.R. Askim, K.S. Suslick, Chem. Commun. 51 (2015) 15312-15315. [29] J.R. Askim, K.S. Suslick, Anal. Chem. 87 (2015) 7810-7816. [30] M.A. Palacios, R. Nishiyabu, M. Marquez, P. Anzenbacher, J. Am. Chem. Soc. 129 (2007) 7538-7544. [31] G.L. Feudo, B. Macchione, A. Naccarato, G. Sindona, A. Tagarelli, Food Res. Int. 44 (2011) 781-788. [32] X. Huang, Z. Li, X. Zou, J. Shi, H. Mao, J. Zhao, L. Hao, M. Holmes, Food Chem. 197 (2016) 930-936. Figure captions: Fig. 1. Schematic diagram of smartphone-based colorimetric reader. Fig. 2. Structure of remote server. Fig. 3. Boronic acid equilibrium in water in the absence and presence of catechols. Fig. 4. Structures of 13 catechols. Fig. 5. Color difference maps of 13 catechols at 12.5 mM concentration plus 1 control. For display, the color RGB range 0-147 is expanded to 0-255 with 8 bits per color. 1: control, 2: catechol, 3: 4-tert-butylcatechol, 4: 4-methylcatechol, 5: 4-nitrocatechol, 6: 3,5-di-butylcatechol, 7: 1,2,4-benzentnol, 8: 3,4-dihydroxybenzaldehyde, 9: dopamine hydrochloride, 10: 3-fluorocatechol, 11: 3,4-dihydroxyphenylacetic acid, 12: 3,4-dihydroxybenzoic acid, 13: L-adrenaline bitartrate, 14: chloroacetyl catechol. Fig. 6. Scree plot from a principal components analysis for identification of 13 catechols at 12.5 mM concentration plus 1 control. Fig. 7. PCA plot for identification of 13 catechols at 6 serial concentrations and 1 control using 2×2 colorimetric sensor array. Quintuplicate trials were run for each 11
analyte. a: 12.5 mM, b: 25 mM, c: 50 mM, d: 75 mM, e: 100 mM, f: 150 mM. Fig. 8. HCA dendrogram for identification of 13 catechols at 6 serial concentrations and 1 control using 2×2 colorimetric sensor array. Quintuplicate trials were run for each analyte. a: 12.5 mM, b: 25 mM, c: 50 mM, d: 75 mM, e: 100 mM, f: 150 mM. Fig. 9. LDA scatter plot for the identification of 13 catechols at 6 serial concentrations and 1 control using 2×2 colorimetric sensor array. Quintuplicate trials were run for each analyte. a: 12.5 mM, b: 25 mM, c: 50 mM, d: 75 mM, e: 100 mM, f: 150 mM. Fig. 10. Actual value vs. predicted value of catechols concentration. a: catechol, b: 4-tert-butylcatechol, c: 4-methylcatechol, d: 4-nitrocatechol, e: 3,5-di-butylcatechol, f: 1,2,4-benzentnol, g: 3,4-dihydroxybenzaldehyde, h: dopamine hydrochloride, i: 3-fluorocatechol, j: 3,4-dihydroxyphenylacetic acid, k: 3,4-dihydroxybenzoic acid, l: L-adrenaline bitartrate, m: chloroacetyl catechol. Highlights 1. Discrimination of 13 catechols with a smallest-scale 2×2 colorimetric sensor array 2. The coupling of a colorimetric sensor array/smartphone ensemble to a remote server 3. Rapid on-site analysis and real-time generation of results with only a smartphone 4. Practical application of a colorimetric sensor array in to real samples
Fig. 1. Schematic diagram of smartphone-based colorimetric reader. 12
Database
Remote Server
Database update
Linear Discriminant Analysis
Partial Least Squares
Processing Module Qualitative Discriminant Functions
Quantitative Calculation Functions
Receive
Transmit
Communication Module ΔRGB data
Analysis results
Fig. 2. Structure of remote server.
Fig. 3. Boronic acid equilibrium in water in the absence and presence of catechols.
13
Fig. 4. Structures of 13 catechols.
Fig. 5. Color difference maps of 13 catechols at 12.5 mM concentration plus 1 control. For display, the color RGB range 0-147 is expanded to 0-255 with 8 bits per color. 1: control, 2: catechol, 3: 4-tert-butylcatechol, 4: 4-methylcatechol, 5: 4-nitrocatechol, 6: 3,5-di-butylcatechol, 7: 1,2,4-benzentnol, 8: 3,4-dihydroxybenzaldehyde, 9: dopamine hydrochloride, 10: 3-fluorocatechol, 11: 3,4-dihydroxyphenylacetic acid, 12: 3,4-dihydroxybenzoic acid, 13: L-adrenaline bitartrate, 14: chloroacetyl catechol.
14
Cumulative percentage (%)
120 12.5 mM 100
88.28
99.03
99.46
76.16
80 60
96.12
49.34
40 20 0
1
2
3 4 5 Principal components
6
Fig. 6. Scree plot from a principal components analysis for identification of 13 catechols at 12.5 mM concentration plus 1 control.
15
16
Fig. 7. PCA plot for identification of 13 catechols at 6 serial concentrations and 1 control using 2×2 colorimetric sensor array. Quintuplicate trials were run for each analyte. a: 12.5 mM, b: 25 mM, c: 50 mM, d: 75 mM, e: 100 mM, f: 150 mM.
17
18
19
Fig. 8. HCA dendrogram for identification of 13 catechols at 6 serial concentrations and 1 control using 2×2 colorimetric sensor array. Quintuplicate trials were run for each analyte. a: 12.5 mM, b: 25 mM, c: 50 mM, d: 75 mM, e: 100 mM, f: 150 mM.
20
21
Fig. 9. LDA scatter plot for the identification of 13 catechols at 6 serial concentrations and 1 control using 2×2 colorimetric sensor array. Quintuplicate trials were run for each analyte. a: 12.5 mM, b: 25 mM, c: 50 mM, d: 75 mM, e: 100 mM, f: 150 mM.
22
Predicted value (mM)
a
160 140
Catechol
120
R =0.9970 Slope=0.9904 RMSE=3.6368
2
100 80 60 40 20 0
0
b
20
40
60 80 100 Actual value (mM)
120
140
160
Predicted value (mM)
160 140
4-tert-butylcatechol
120
R =0.9967 Slope=1.0026 RMSE=4.5881
2
100 80 60 40 20 0
0
Predicted value (mM)
40
60 80 100 Actual value (mM)
120
140
160
160 140
4-methylcatechol
120
R =0.9975 Slope=1.0021 RMSE=0.9085
100
2
80 60 40 20 0 0
20
40
60 80 100 Actual value (mM)
120
140
160
d 160 140
Predicted value (mM)
c
20
120 100
4-nitrocatechol 2 R =0.9884 Slope=0.9659 RMSE=0.9170
80 60 40 20 0 0
20
40
60
80
100
Actual value (mM)
23
120
140
160
e
160 140
Predicted value (mM)
120
3,5-di-butylcatechol 2 R =0.9953 Slope=1.0204 RMSE=6.4831
100 80 60 40 20 0 0
f
20
40
60 80 100 Actual value (mM)
120
140
160
160 140
1,2,4-benzentriol
120
R =0.9981 Slope=0.9446 RMSE=3.9169
Predicted value (mM)
2
100 80 60 40 20 0
0
g
40
60 80 100 Actual value (mM)
120
140
160
160 140 120 100
3,4-dihydroxybenzaldehyde 2 R =0.9986 Slope=0.9887 RMSE=1.2943
80 60 40 20 0 0
20
40
60 80 100 Actual value (mM)
120
140
160
h 160 140 120
Predicted value (mM)
Predicted value (mM)
20
Dopamine hydrochloride 2 R =0.9997 Slope=1.0150 RMSE=8.5820
100 80 60 40 20 0 0
20
40
60 80 100 Actual value (mM)
24
120
140
160
Predicted value (mM)
i
160 140
3-fluorocatechol
120
R =0.9972 Slope=0.9897 RMSE=4.2173
100
2
80 60 40 20 0 0
j
40
60 80 100 Actual value (mM)
120
140
160
160 3,4-dihydroxyphenylacetic acid 2 R =0.9986 Slope=1.0054 RMSE=5.2035
140
Predicted value (mM)
20
120 100 80 60 40 20 0
0
k
40
60 80 100 Actual value (mM)
120
140
160
160 140 120 100
3,4-dihydroxybenzoic acid 2 R =0.9985 Slope=0.9718 RMSE=3.0459
80 60 40 20 0 0
l
20
40
60 80 100 Actual value (mM)
120
140
160
160 140
Predicted value (mM)
Predicted value (mM)
20
120 100
L-adrenaline bitartrate 2 R =0.9874 Slope=1.0053 RMSE=1.6902
80 60 40 20 0 0
20
40
60 80 100 Actual value (mM)
25
120
140
160
m 160
Predicted value (mM)
140 120 100
Chloracetyl catechol 2 R =0.9962 Slope=0.9736 RMSE=1.5332
80 60 40 20 0 0
20
40
60 80 100 Actual value (mM)
120
140
160
Fig. 10. Actual value vs. predicted value of catechols concentration. a: catechol, b: 4-tert-butylcatechol, c: 4-methylcatechol, d: 4-nitrocatechol, e: 3,5-di-butylcatechol, f: 1,2,4-benzentnol, g: 3,4-dihydroxybenzaldehyde, h: dopamine hydrochloride, i: 3-fluorocatechol, j: 3,4-dihydroxyphenylacetic acid, k: 3,4-dihydroxybenzoic acid, l: L-adrenaline bitartrate, m: chloroacetyl catechol.
26
PII: DOI: Reference:
S0039-9140(16)30506-9 http://dx.doi.org/10.1016/j.talanta.2016.07.012 TAL16709
To appear in: Talanta Received date: 13 May 2016 Revised date: 26 June 2016 Accepted date: 4 July 2016 Cite this article as: Yun Wang, Yuanyuan Li, Xu Bao, Juan Han, Jinchen Xia, Xiaoyu Tian and Liang Ni, A smartphone-based colorimetric reader coupled with a remote server for rapid on-site catechols analysis, Talanta, http://dx.doi.org/10.1016/j.talanta.2016.07.012 This is a PDF file of an unedited manuscript that has been accepted for publication. As a service to our customers we are providing this early version of the manuscript. The manuscript will undergo copyediting, typesetting, and review of the resulting galley proof before it is published in its final citable form. Please note that during the production process errors may be discovered which could affect the content, and all legal disclaimers that apply to the journal pertain.
A smartphone-based colorimetric reader coupled with a remote server for rapid on-site catechols analysis a a Yun Wang , Yuanyuan Li , Xu Bao b,*, Juan Han c,*, Jinchen Xia a, Xiaoyu Tian c , and Liang Ni a a School of Chemistry and Chemical Engineering, Jiangsu University, Zhenjiang 212013, PR China b
School of Computer and Communications Engineering, Jiangsu University, Zhenjiang 212013, PR China c
School of Food and Biological Engineering, Jiangsu University, Zhenjiang 212013, PR China [email protected] [email protected] * Corresponding author. Tel: +86 158 0529 6802; Fax: +86-0511-88797508. * Corresponding author. Tel: +86 137 7553 4923; Fax: +86-0511-88780201. Abstract The search of a practical method to analyze cis-diol-containing compounds outside laboratory settings remains a substantial scientific challenge. Herein, a smartphone-based colorimetric reader was coupled with a remote server for rapid on-site analysis of catechols. A smallest-scale 2×2 colorimetric sensor array composed of pH indicators and phenylboronic acid was configured. The array was able to distinguish 13 catechols at 6 serial concentrations, through simultaneous treatment via principal component analysis, hierarchical cluster analysis, and linear discriminant analysis. After both the discriminatory power of the array and the prediction ability of the partial least squares quantitative models were proved to be predominant, the smartphone was coupled to the remote server. All the ΔRGB data were uploaded to the remote server wherein linear discriminant analysis and partial least squares processing modules were established to provide qualitative discrimination and quantitative calculation, respectively, of the analytes in real time. The applicability of this novel method to a real-life scenario was confirmed by the on-site analysis of various catechols from a water sample of the Yangtze River; the feedback result in the smartphone showed the method was able to identify the catechols with 100% accuracy and predict the concentrations to within 0.706-2.240 standard deviation. Keywords: catechols; colorimetric sensor array; on-site analysis; pH indicators; remote server; smartphone-based colorimetric reader 1. Introduction Catechols are classified both as phenolic compounds and structurally as cis-diols. Catechols are commodity chemicals which find uses as pharmaceutical and fine chemical intermediates, such as catechol, 4-tert-butylcatechol, chloroacetyl catechol. While the tremendous value of catechols in chemical synthesis is well established, there is lesser appreciation for the environmental-pollution and harm to human health caused by the massive illegal discharge and accidental leak of catechols [1]. For example, catechol is highly toxic by ingestion and contact, can irritate human eyes 1
and skin. Even at low concentrations, catechol can give foods an undesirable taste and it is readily adsorbed from the gastrointestinal tract. Once in the bloodstream, it can adversely affect liver function and cause renal tube degeneration [2]. Dopamine hydrochloride can be used to lower the fat content of pigs by being added to their feed or drinking-water in large amounts. Meat from these pigs can cause adverse health effects if consumed by humans over long periods, which may include headache, nausea, weakness, and convulsions of the limbs [3]. For these reasons, simple and convenient techniques for the qualitative and quantitative detection of catechols which provide the result in real time would be highly desirable. Traditional methods of detecting catechols, such as HPLC [4], flow injection [5], chemiluminescence [6], and spectrophotometric methods [7], are troubled by high costs, cumbersome operation of the analytical instruments, and slow analysis speed, which hinders their use as rapid detection methods. For this reason, colorimetric sensor arrays have been developed into powerful tools for the analysis of compounds bearing cis-diols, present in compounds such as catechols and carbohydrates. Lim and co-workers established a simple and low-cost colorimetric sensing array, which was successfully used in the molecular recognition of sugars and artificial sweeteners [8]. Zhang et al. employed a colorimetric sensor array to successfully discriminate 8 cis-diol-containing flavonoids [9]. This sensor array methodology is vastly superior to the conventional approaches because of its low cost, simple processing steps, and rapid generation of results. For the analysis of samples in the field, one drawback of this sensor array method is that collection of data involves a time-consuming process of image collection with a camera or a scanner and later processing of those images with a computer. A portable computing capable of operating in real time would be a great improvement for the use of colorimetric sensor arrays for on-site testing. Recently, the use of smartphones for chemical detection and analysis and in medical testing has gained popularity. Modern smartphones are fully automated and equipped with high-resolution cameras, powerful processors with large storage capacity, wireless connectivity, real-time geotagging, secure data management, and cloud computing. These capabilities allow smartphones to be used as small, conveniently carried portable devices for convenient on-site diagnostic/chemical analysis and testing with rapid reproduction of results. Thus, smartphones have proven to be an attractive alternative for the on-site collection, imaging, and analysis of data. Several researchers have already demonstrated the feasibility of smartphones for on-site diagnosis in microscopy [10], dermatology [11], chemical analyses [12], and colorimetric diagnostics [13,14]. In this work, a smallest-scale 2×2 colorimetric sensor array composed of pH indicators and phenylboronic acid was configured and used to identify 13 different catechols at 6 serial concentrations. The “before” and “after” images of the array were captured in a light-tight box with a white light-emitting diode (LED) light in the bottom using an smartphone with an application (app) designed by our own research group which was responsible for processing the images and digitizing the colors. The ΔRGB data generated from the color difference maps were then processed by principal component analysis (PCA), hierarchical cluster analysis (HCA), and linear 2
discriminant analysis (LDA) for qualitative discrimination. Partial least squares (PLS) models were established for the quantitative determination of the concentrations of specific catechols. After the simultaneous treatment via PCA, HCA, LDA, and PLS, the ΔRGB data were uploaded to a remote server to establish the LDA and PLS processing modules, which allowed the rapid and convenient on-site analysis of catechols from water samples in the Yangtze River. To the best of our knowledge, this is the first paper dealing with the on-site detection of analytes using a smartphone-based colorimetric reader coupled to a remote server. 2. Materials and methods 2.1. Chemicals and instruments Phenylboronic acid was purchased from Sigma (U.S.). Xylenol orange, o-nitrodiphenol, rhodizonic acid, and m-cresol purple were purchased from Sinopharm Chemical Reagent Co., Ltd. (Shanghai, China). Catechol, 4-tert-butylcatechol, 4-methylcatechol, 4-nitrocatechol, 3,5-di-t-butylcatechol, 1,2,4-benzentriol, 3,4-dihydroxybenzaldehyde, dopamine hydrochloride, 3-fluorocatechol, 3,4-dihydroxyphenylacetic acid, 3,4-dihydroxybenzoic acid, L-adrenaline bitartrate, and chloroacetyl catechol were purchased from Shanghai Haorui Chemical Co., Ltd. (Shanghai, China). Phosphate buffer (50 mM, pH 9.0) was prepared from phosphoric acid by titrating with NaOH solution. This buffer was used to prepare the solution of phenylboronic acid (50 mM) which was used without further pH adjustment for the configuration of the colorimetric sensor array. Solutions of the catechols (1, 10, 25, 50, 100, 150, 200, 300 mM) were prepared in de-ionized water and alcohol-water solution. pH indicator solutions (0.1%, w/v) were prepared in de-ionized water and alcohol-water solution. Commercially available white light-emitting diode (LED) light and 96-well Perspex plates were used. The smartphone (Samsung Galaxy A8) with a 1.5 GHz Qualcomm Snapdragon 615 CPU and a 16 MP camera was employed in this study. Its high-performance CPU was capable of image recognition and calculation in real-time, and the high-resolution camera produced finely digitized images. The app on the smartphone was coded using Java and Android Studio 1.3.2 in order to achieve image rendering, automatic color recognition, and calibration. 2.2. Configuration of 2×2 colorimetric sensor array and processing of data One phenylboronic acid and one pH indicator (xylenol orange, o-nitrodiphenol, rhodizonic acid, m-cresol purple) are served as an ensemble probe. 4 pH indicator solutions (0.3 mL each) were respectively added to 4 glass tubes containing the phenylboronic acid phosphate buffer solution (50 mM, 0.2 mL), forming 4 ensemble probes. Next, 13 different catechols solutions with specific concentrations (1, 10, 25, 50, 100, 150, 200, 300 mM, 0.5 mL each) including water (blank control), were each added to the 4 glass tubes. In this way, 10 mM phosphate buffer with 10 mM phenylboronic acid in the absence of catechols (water control) at initial pH 7.5 was finalized as the condition, and the final concentrations of catechols that were detected at this condition were 0.5, 5, 12.5, 25, 50, 75, 100, 150 mM. After 5 min of mixing for full color development, the mixtures were placed in the 96-well Perspex plate to constitute a 2×2 colorimetric sensor array. 3
A schematic diagram representing data acquistion and processing by the smartphone/colorimetric sensor array ensemble designed in-house by our research group is shown in Fig. 1. The 96-well Perspex plate was transferred to the light-tight box containing a white LED light in the bottom and a smartphone fixed to the top. With this equipment, ambient lighting condition and imaging distance/angle were kept constant when capturing the images of the sensor array. The “before” image consisted of a shot taken with the 16 megapixel (MP) smartphone camera capturing the color of each ensemble probe and water; the “after” image consisted of a camera shot directed towards the 2×2 array of ensemble probe/analyte mixtures. Using our laboratory designed app on the smartphone, a color difference map was obtained by subtracting the “before” image from the “after” image (red minus red, green minus green, blue minus blue). To prevent subtraction artifacts caused by acquisitions near the spot edge, only the spot center was included in the calculation. All experiments were run in quintuplicate for each of the 13 analytes and the blank control. Next, the ΔRGB data were processed by PCA, HCA, LDA, and PLS analysis using a computer before being uploaded to a remote server. 2.3. Application of 2×2 colorimetric sensor array/smartphone ensemble coupled to a remote server for detection of analytes The smartphone was connected to the remote server via a wireless-network using user datagram protocol (UDP). As shown in Fig. 2, the remote server consists of three parts: database, processing modules, and communication modules. The database in the remote server plays a role in storing the array data (ΔRGB). It must be pointed out that the ΔRGB data from the array have been processed by PCA, HCA, LDA, and PLS analysis before the smartphone was connected to the remote server. The processing module was programmed and linked in to the Java package by using Matlab 2013a software. Eclipse Integrated Development Environment (IDE) for Java Developers was used to create the communication module in order to process the analyte data by linking with the Java created processing module. The communication module functions as receiving the ΔRGB data of one unknown analyte and transmitting the analysis results to the smartphone. To qualitatively and quantitatively analyze unknown samples, all the ΔRGB data previously subjected to PCA, HCA, LDA, and PLS analysis are uploaded to the database of the remote server, which can be used to form the analysis polynomials for LDA and PLS. Once the database is updated because of the investigation of more serial concentrations of the 13 catechols, the analysis polynomials are re-derived correspondingly. When new analyte data arrive at the receive module of the remote server, they are first sent to the LDA processing module, where the data undergo classification discriminant analysis. Next, the analyte data and the classification results are forwarded to the PLS processing module for detailed calculation of the concentration. Finally, the analysis results including the classification and concentration information are fed back to the smartphone. 3. Results and discussion 3.1. 2×2 colorimetric sensor array responses The selective association of boronic acids with diols has been extensively studied 4
[15-17]. As shown in Fig. 3, boronic acids can form reversible cyclic ester complexes with cis-diols with concomitant hydronium ion generation, thereby lowering the solution pH. Different catechols (Fig. 4) generate very different changes in pH when bound to boronic acid because of the different binding constants; therefore, boronic acid and pH indicators can serve as ensemble probes to facilitate discrimination of different catechols. Herein, 4 pH indicators and phenylboronic acid (pKa 8.8) [18] were used as ensemble probes for full discrimination of the 13 catechols. It is well known that, the pKa values of phenylboronic acid vary upon complexation to different cis-diols. This decrease in pKa translates into increased acidity of the solution; the presence of pH indicators in the ensemble probes therefore reflects this change through the variation in RGB values obtained from the colorimetric sensor array responses. The color difference maps for the 13 different catechols at 12.5 mM concentration are shown in Fig. 5. Despite the low concentration of catechols, the smallest-scale 2×2 colorimetric sensor array displays a high overall response, which indicates phenylboronic acid has great affinity for catechols in this work. In previous studies, probe sets composed of various pH indicators and one or more boronic acids were required to produce desirable discrimination of the cis-diol-containing analytes [8,16,19]. In this work, an attempt was made to differentiate the greatest number of analytes with the fewest number of ensemble probes. Only 4 ensemble probes were used to configure the smallest-scale 2×2 colorimetric sensor array to differentiate as many as 13 catechols with 6 serial concentrations, which made great progress in the number of the probes. 3.2. PCA analysis of 2×2 colorimetric sensor array The 2×2 colorimetric sensor array was used for the discrimination of 13 catechols with 6 serial concentrations (12.5, 25, 50, 75, 100, 150 mM). Each analyte in the array is represented as a 12-dimensional vector since the color difference maps are a 3N-dimensional vector, where N is the number of pH indicators in the array, i.e. (4 red, blue and green difference values in a 2×2 colorimetric sensor array). Then PCA [20] was used to compress and visualize the high-dimensional discriminant information using Matlab 2014b software. The color difference maps in Fig. 5, which prove to be unique for each analyte, were easily distinguished by the naked eye even without statistical analysis. At a first glance, the changes of pH values in the acidic or alkaline solution environment accounted for the colorimetric changes of the array. When we classified the analytes by PCA, however, a single dimension (i.e. pH values) and even two dimensions failed to achieve a satisfactory discrimination of the 13 catechols with 6 serial concentrations (12.5, 25, 50, 75, 100, 150 mM). Therefore, colorimetric array data with more independent dimensions were required for the optimal identification of closely related catechols. As shown in Fig. 6, 99.03% of all data variance was contained in 5 dimensions. The high dimensionality indicated that the colorimetric array senses more than the changes of pH, which is consistent with the conclusions of previous studies [8,16,21]. In addition to the selective association of phenylboronic acid and catechols, there are other non-pH-related analyte-dye interactions that assist 5
in the discrimination process. These include Lewis acid-base interactions, hydrogen-bonds, π-π bonds, dipolar bonds, etc. Many sensor arrays based on specific or selective interactions between receptors and analytes have been developed. Although PCA showed that for these sensor arrays over 90% of all discriminatory information was contained within the two principal components, the ability to differentiate similar analytes was limited [22-25]. Other sensor arrays have been configured that are able to identify the analytes unambiguously but require the use of multiple sets of probes, in other words, an optimized colorimetric sensor array for the detection of a wide range of analytes was far unavailable [8,21,26-29]. In contrast, only 4 ensemble probes were used in this paper, making up a smallest-scale 2×2 array. The combination of the first three principal components contains about 88% of the information (Fig. 6). Although the percent is not high, the colorimetric sensor array demonstrates an extraordinary ability of chemical discrimination. As shown in Fig. 7a-7f, 13 catechols at 6 serial concentrations and 1 control are visually clustered together and separated from each other in the three-dimensional plot, which indicates the strong reproducibility and discriminatory power of the colorimetric sensor array. In addition, the concentration of catechols that can be visually distinguished in the PCA space could be as low as 12.5 mM, which indicates that the 2×2 array can be applied for microanalysis. 3.3. HCA analysis of 2×2 colorimetric sensor array The high dispersion of the colorimetric sensor array data requires a classification algorithm that takes advantages of the full dimensionality of the data. A simple and model-free approach is HCA [30], which forms dendrograms based on clustering of the array response data in the 12-dimensional ΔRGB color space. HCA analysis was performed using the SPSS Statistics 20 software to group the 13 catechols with 6 serial concentrations (12.5, 25, 50, 75, 100, 150 mM) based on the similarity in the response pattern of the 2×2 array. Clustering was defined according to the Euclidean distance. Quintuplicate trials were run for each analyte. All the 13 catechols at 6 serial concentrations plus 1 control were accurately identified against one another (Fig. 8a-8f). Remarkably, for the 70 total cases (13 catechols and 1 control × 5 replicates) of each concentration, there were no errors and zero misclassifications. For example, 3,4-dihydroxyphenylacetic acid and 3,4-dihydroxybenzoic acid were adjacent in Fig. 8a, possibly because of their similar chemical structures. This is consistent with the PCA plot in Fig. 7a, in which the two chemicals are in close proximity. With the trihydroxy group, 1,2,4-benzentriol at 12.5 mM concentration may take on the greatest response, thus facilitating the color change of the four pH indicators. As a result, 1,2,4-benzentriol located furthest from the blank control in the dendrogram, as shown in Fig. 8a. Both the properties of the substituents (electron-donating and electron-withdrawing groups) and the locations of the substituents on the pheny rings of the catechols can affect the binding affinities of catechols to phenylboronic acid. This binding affinity and other non-pH related analyte-dye interactions (Lewis acid-base, dipolar, hydrogen-bond, etc.) assists in the appropriate clustering and discrimination of the 13 analytes in the HCA dendrogram. 3.4. LDA analysis of 2×2 colorimetric sensor array 6
LDA is commonly used for data classification and dimensionality reduction. Discriminant functions are established as a linear combination of descriptors that maximize the ratio of inter-class variance and minimize the ratio of intra-class variance [31]. The data from the sensor array were processed using SPSS Statistics 20 software, and an LDA scatter plot was obtained using the discriminant functions. Fig. 9a-9f shows the distribution of 13 catechols at 6 serial concentrations plus 1 control in 2D space defined by the first two calculated discriminant functions (Function 1 and Function 2). Quintuplicate trials were run for each analyte. In the scatter plot, the overlapping of the points demonstrates the reproducibility of the analysis. More importantly, the divided groups suggests that the 2×2 colorimetric sensor array displays high discrimination among the 13 different catechols at 6 serial concentrations. LDA serves as a useful method for testing the accuracy of the colorimetric sensor array since it can not only be utilized to visualize the discriminatory ability of the colorimetric sensor array but can also be used to identify the unknown samples. Leave-one-out cross-validation was used to evaluate the predictive power of LDA. Table 1 summarizes the results of the classification matrix of the LDA model. There was no incorrect classification among 70 cases (13 catechols and 1 control × 5 replicates), affording a prediction accuracy of 100%. Table 1 Prediction abilities for different catechols at 12.5 mM concentration using stepwise discriminant analysis. 1: control, 2: catechol, 3: 4-tert-butylcatechol, 4: 4-methylcatechol, 5: 4-nitrocatechol, 6: 3,5-di-butylcatechol, 7: 1,2,4-benzentnol, 8: 3,4-dihydroxybenzaldehyde, 9: dopamine hydrochloride, 10: 3-fluorocatechol, 11: 3,4-dihydroxyphenylacetic acid, 12: 3,4-dihydroxybenzoic acid, 13: L-adrenaline bitartrate, 14: chloroacetyl catechol. Classification results a,c Predicted group membership Original
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Total
1
5
0
0
0
0
0
0
0
0
0
0
0
0
0
5
2
0
5
0
0
0
0
0
0
0
0
0
0
0
0
5
3
0
0
5
0
0
0
0
0
0
0
0
0
0
0
5
4
0
0
0
5
0
0
0
0
0
0
0
0
0
0
5
5
0
0
0
0
5
0
0
0
0
0
0
0
0
0
5
6
0
0
0
0
0
5
0
0
0
0
0
0
0
0
5
7
0
0
0
0
0
0
5
0
0
0
0
0
0
0
5
8
0
0
0
0
0
0
0
5
0
0
0
0
0
0
5
9
0
0
0
0
0
0
0
0
5
0
0
0
0
0
5
10
0
0
0
0
0
0
0
0
0
5
0
0
0
0
5
11
0
0
0
0
0
0
0
0
0
0
5
0
0
0
5
12
0
0
0
0
0
0
0
0
0
0
0
5
0
0
5
13
0
0
0
0
0
0
0
0
0
0
0
0
5
0
5
14
0
0
0
0
0
0
0
0
0
0
0
0
0
5
5
1
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
2
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
3
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
4
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
5
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
6
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
100%
7
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
100%
8
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
100%
9
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
100%
10
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
100%
11
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
100%
12
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
100%
13
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
100%
14
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
100%
7
Cross-validatedb
1
5
0
0
0
0
0
0
0
0
0
0
0
0
0
5
2
0
5
0
0
0
0
0
0
0
0
0
0
0
0
5
3
0
0
5
0
0
0
0
0
0
0
0
0
0
0
5
4
0
0
0
5
0
0
0
0
0
0
0
0
0
0
5
5
0
0
0
0
5
0
0
0
0
0
0
0
0
0
5
6
0
0
0
0
0
5
0
0
0
0
0
0
0
0
5
7
0
0
0
0
0
0
5
0
0
0
0
0
0
0
5
8
0
0
0
0
0
0
0
5
0
0
0
0
0
0
5
9
0
0
0
0
0
0
0
0
5
0
0
0
0
0
5
10
0
0
0
0
0
0
0
0
0
5
0
0
0
0
5
11
0
0
0
0
0
0
0
0
0
0
5
0
0
0
5
12
0
0
0
0
0
0
0
0
0
0
0
5
0
0
5
13
0
0
0
0
0
0
0
0
0
0
0
0
5
0
5
14
0
0
0
0
0
0
0
0
0
0
0
0
0
5
5
1
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
2
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
3
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
4
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
5
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
6
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
0%
100%
7
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
0%
100%
8
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
0%
100%
9
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
0%
100%
10
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
0%
100%
11
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
0%
100%
12
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
0%
100%
13
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
0%
100%
14
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
0%
100%
100%
a
100% of original grouped cases correctly classified.
b
Cross validation is done only for those cases in the analysis. In cross validation, each case is classified by the functions derived from all cases other than that case.
c
100% of cross-validated grouped cases correctly classified.
3.5. Creation of PLS quantitative models PLS is a multivariate calibration method that searches for factors, which explain as much covariance as possible between a set of predictor variables, X, and response variables, Y [32]. In this section, the cross-responses of 13 catechols with 9 serial concentrations (0, 0.5, 5, 12.5, 25, 50, 75, 100, 150 mM) to the 2×2 colorimetric sensor array were firstly performed. Quintuplicate trials were run for each concentration. Next, PLS quantitative models based on the data from the array were established to predict the concentrations of the 13 catechols. The principal components have an important influence on the predictive ability of PLS quantitative models. To obtain the optimal models for accurately predicting the concentrations of the 13 catechols, a cross-validation method was used to select the appropriate number of the principal components. The effect of the principal components on the root mean squared error (RMSE) value of each PLS quantitative model of 13 catechols was studied. The smaller the RMSE value is, the more precise of the PLS quantitative model created based on the number of the principal components is. According to the RMSE value, the number of the principal components (6-8) was eventually selected to create the 13 PLS quantitative models. The models were assessed with further samples in order to evaluate the accuracy and precision of the created prediction models. Fig. 10a-10m display the actual catechols concentration value (mM) against the predicted concentration value using the PLS algorithm. The usefulness of the PLS algorithm was clearly demonstrated by subjecting the experimental data to linear regression analysis to make a line of best fit. According to Fig. 10a-10m, the values of the slopes of the fitting lines and the values of the regression coefficients are both very close to 1, which demonstrates the accuracy of the 13 PLS quantitative models. The values of RMSEs of the 13 PLS 8
quantitative models are low, which proves their precision. All the PLS graphs of actual concentration values against predicted values for the 13 catechols exhibit a positive trend in the prediction of analytes’ concentrations. It can be concluded that the PLS quantitative models in this paper are a powerful tool for predicting the concentrations of catechols. 3.6. Analysis of practical samples In an attempt to evaluate the feasibility of this novel method to real-life examples, 3 catechols (catechol, dopamine hydrochloride, 4-methylcatechol) were analyzed on site from a sample of water in the Yangtze River. Each analyte was added to a separate solution of water from the Yangtze River at two concentrations (12.5, 150 mM). The Yangtze River water solution was regarded as blank control, which contains no catechols (0 mM). According to the steps described in Section 2.2, the 2×2 colorimetric sensor arrays were configured and color difference maps were subsequently obtained and digitized using the smartphone. The new ΔRGB data were uploaded to the remote server and the feedback information was displayed in the smartphone in real time. Analysis was performed five times per analyte per concentration, as shown in Table 2. We were gratified to learn that all analytes at all concentrations were identified without even one instance of misclassification. Although there were some unavoidable deviations from the predicted and actual concentrations, especially for low concentrations, the results of quantitative analysis gave a very good estimate of the degree of water pollution. The Yangtze River is the one of the important drinking water resources of many cities in China. In 2012, it took a long time to discover that the drinking water supply in the city of Zhenjiang, China was contaminated by phenol leaking into the Yangtze River. Therefore, rapid methods of detection and quantification of water contaminants such as catechols are highly desirable. For future suspected cases of water catechols contamination, the simple, convenient, and rapid method described in this paper will allow individuals to conveniently analyze the water sample in a qualitative and quantitative manner on site. The use of this method to accurately analyze catechols and other cis-diol-containinng compounds at trace levels is currently under study. Table 2 Analysis results of catechols in the Yangtze River solution Predicted result Actual sample
Actual concentration (mM)
Compound
Concentration (mM) a
150.00
Catechol
146.73 ± 1.75
12.50
Catechol
16.77 ± 1.87
150.00
Dopamine hydrochloride
148.91 ± 2.24
12.50
Dopamine hydrochloride
10.27 ± 2.00
150.00
4-methylcatechol
141.67 ± 0.84
12.50
4-methylcatechol
7.07 ± 0.76
0
Control
-0.44 ± 1.82
Catechol
Dopamine hydrochloride
4-methylcatechol Control a
means ± SD
4. Conclusions In this study, a low-cost, simple to arrange colorimetric sensor array/smartphone 9
ensemble coupled to a remote server was used for the rapid on-site analysis of catechols. The smallest-scale 2×2 colorimetric sensor array was able to distinguish among all 13 catechols at 6 serial concentrations, through simultaneous treatment via PCA, HCA, and LDA. The results from the multivariate data analysis demonstrated the ability of the proposed array for reliable identification and classification of catechols. A particularly noteworthy aspect of our work is the novel coupling of a smartphone to a remote server that allows for the on-site classification discriminant analysis and quantitative measurement of concentrations of unknown samples to be undertaken. This is the first time such a system has been established. The smartphone is a uniquely practical portable device that is able to read the array, upload the data, and receive the results in real time. This simple, convenient approach was here shown in a real life example to be suitable for the simple, rapid qualitative and quantitative analysis of catchols on site. Acknowledgments This work was supported by the National Natural Science Foundation of China (Nos. 31470434, 21406090 and 21576124) and the Special Financial Grant from the China Postdoctoral Science Foundation (No. 2015T80510). References [1] I.M. Russell, S.G. Burton, Anal. Chim. Acta 389 (1999) 161-170. [2] M. Aziz, T. Selvaraju, H. Yang, Electroanalysis 19 (2007) 1543-1546. [3] F. Ramos, A. Cristino, P. Carrola, T. Eloy, J.M. Silva, M. da Conceição Castilho, M.I.N. da Silveira, Anal. Chim. Acta 483 (2003) 207-213. [4] M. Tsunoda, M. Hirayama, K. Ohno, T. Tsuda, Anal. Methods 5 (2013) 5161-5164. [5] S. Wang, L. Du, L. Wang, H. Zhuang, Anal. Sci. 20 (2004) 315-317. [6] R. Cui, Y.-P. Gu, L. Bao, J.-Y. Zhao, B.-P. Qi, Z.-L. Zhang, Z.-X. Xie, D.-W. Pang, Anal. Chem. 84 (2012) 8932-8935. [7] P. Nagaraja, R. Vasantha, K. Sunitha, J. Pharm. Biomed. Anal. 25 (2001) 417-424. [8] S.H. Lim, C.J. Musto, E. Park, W. Zhong, K.S. Suslick, Org. Lett. 10 (2008) 4405-4408. [9] X. Zhang, E.V. Anslyn, X. Qian, Supramol. Chem. 24 (2012) 520-525. [10] D. Tseng, O. Mudanyali, C. Oztoprak, S.O. Isikman, I. Sencan, O. Yaglidere, A. Ozcan, Lab on a Chip 10 (2010) 1787-1792. [11] S. Kroemer, J. Frühauf, T. Campbell, C. Massone, G. Schwantzer, H.P. Soyer, R. Hofmann-Wellenhof, Brit. J. Dermatol. 164 (2011) 973-979. [12] H. Zhu, S. Mavandadi, A.F. Coskun, O. Yaglidere, A. Ozcan, Anal. Chem. 83 (2011) 6641-6647. [13] S. Wang, X. Zhao, I. Khimji, R. Akbas, W. Qiu, D. Edwards, D.W. Cramer, B. Ye, U. Demirci, Lab on a chip 11 (2011) 3411-3418. [14] A.W. Martinez, S.T. Phillips, E. Carrilho, S.W. Thomas III, H. Sindi, G.M. Whitesides, Anal. Chem. 80 (2008) 3699-3707. [15] T.D. James, K. Sandanayake, S. Shinkai, Angew. Chem. Int. Ed. 35 (1996) 1910-1922. 10
[16] J.W. Lee, J.S. Lee, Y.T. Chang, Angew. Chem. 118 (2006) 6635-6637. [17] M. Dowlut, D.G. Hall, J. Am. Chem. Soc. 128 (2006) 4226-4227. [18] L. Bosch, T. Fyles, T.D. James, Tetrahedron 60 (2004) 11175-11190. [19] K. KantaáGhosh, Chem. Commun. 47 (2011) 4001-4003. [20] J.R. Carey, K.S. Suslick, K.I. Hulkower, J.A. Imlay, K.R. Imlay, C.K. Ingison, J.B. Ponder, A. Sen, A.E. Wittrig, J. Am. Chem. Soc. 133 (2011) 7571-7576. [21] C.J. Musto, S.H. Lim, K.S. Suslick, Anal. Chem. 81 (2009) 6526-6533. [22] A. Ziyatdinov, S. Marco, A. Chaudry, K. Persaud, P. Caminal, A. Perera, Sens. Actuators B: Chem. 146 (2010) 460-465. [23] Sasaki, H. Tsuchiya, M. Nishioka, M. Sadakata, T. Okubo, Sens. Actuators B: Chem. 86 (2002) 26-33. [24] J. Cui, W. Zhu, N. Gao, J. Li, H. Yang, Y. Jiang, P. Seidel, B.J. Ravoo, G. Li, Angew. Chem. Int. Ed. 53 (2014) 3844-3848. [25] R.B. Roy, B. Tudu, L. Shaw, A. Jana, N. Bhattacharyya, R. Bandyopadhyay, J. Food Eng. 110 (2012) 356-363. [26] H. Zhou, L. Baldini, J. Hong, A.J. Wilson, A.D. Hamilton, J. Am. Chem. Soc. 128 (2006) 2421-2425. [27] L. Feng, H. Li, X. Li, L. Chen, Z. Shen, Y. Guan, Anal. Chim. Acta 743 (2012) 1-8. [28] Z. Li, W.P. Bassett, J.R. Askim, K.S. Suslick, Chem. Commun. 51 (2015) 15312-15315. [29] J.R. Askim, K.S. Suslick, Anal. Chem. 87 (2015) 7810-7816. [30] M.A. Palacios, R. Nishiyabu, M. Marquez, P. Anzenbacher, J. Am. Chem. Soc. 129 (2007) 7538-7544. [31] G.L. Feudo, B. Macchione, A. Naccarato, G. Sindona, A. Tagarelli, Food Res. Int. 44 (2011) 781-788. [32] X. Huang, Z. Li, X. Zou, J. Shi, H. Mao, J. Zhao, L. Hao, M. Holmes, Food Chem. 197 (2016) 930-936. Figure captions: Fig. 1. Schematic diagram of smartphone-based colorimetric reader. Fig. 2. Structure of remote server. Fig. 3. Boronic acid equilibrium in water in the absence and presence of catechols. Fig. 4. Structures of 13 catechols. Fig. 5. Color difference maps of 13 catechols at 12.5 mM concentration plus 1 control. For display, the color RGB range 0-147 is expanded to 0-255 with 8 bits per color. 1: control, 2: catechol, 3: 4-tert-butylcatechol, 4: 4-methylcatechol, 5: 4-nitrocatechol, 6: 3,5-di-butylcatechol, 7: 1,2,4-benzentnol, 8: 3,4-dihydroxybenzaldehyde, 9: dopamine hydrochloride, 10: 3-fluorocatechol, 11: 3,4-dihydroxyphenylacetic acid, 12: 3,4-dihydroxybenzoic acid, 13: L-adrenaline bitartrate, 14: chloroacetyl catechol. Fig. 6. Scree plot from a principal components analysis for identification of 13 catechols at 12.5 mM concentration plus 1 control. Fig. 7. PCA plot for identification of 13 catechols at 6 serial concentrations and 1 control using 2×2 colorimetric sensor array. Quintuplicate trials were run for each 11
analyte. a: 12.5 mM, b: 25 mM, c: 50 mM, d: 75 mM, e: 100 mM, f: 150 mM. Fig. 8. HCA dendrogram for identification of 13 catechols at 6 serial concentrations and 1 control using 2×2 colorimetric sensor array. Quintuplicate trials were run for each analyte. a: 12.5 mM, b: 25 mM, c: 50 mM, d: 75 mM, e: 100 mM, f: 150 mM. Fig. 9. LDA scatter plot for the identification of 13 catechols at 6 serial concentrations and 1 control using 2×2 colorimetric sensor array. Quintuplicate trials were run for each analyte. a: 12.5 mM, b: 25 mM, c: 50 mM, d: 75 mM, e: 100 mM, f: 150 mM. Fig. 10. Actual value vs. predicted value of catechols concentration. a: catechol, b: 4-tert-butylcatechol, c: 4-methylcatechol, d: 4-nitrocatechol, e: 3,5-di-butylcatechol, f: 1,2,4-benzentnol, g: 3,4-dihydroxybenzaldehyde, h: dopamine hydrochloride, i: 3-fluorocatechol, j: 3,4-dihydroxyphenylacetic acid, k: 3,4-dihydroxybenzoic acid, l: L-adrenaline bitartrate, m: chloroacetyl catechol. Highlights 1. Discrimination of 13 catechols with a smallest-scale 2×2 colorimetric sensor array 2. The coupling of a colorimetric sensor array/smartphone ensemble to a remote server 3. Rapid on-site analysis and real-time generation of results with only a smartphone 4. Practical application of a colorimetric sensor array in to real samples
Fig. 1. Schematic diagram of smartphone-based colorimetric reader. 12
Database
Remote Server
Database update
Linear Discriminant Analysis
Partial Least Squares
Processing Module Qualitative Discriminant Functions
Quantitative Calculation Functions
Receive
Transmit
Communication Module ΔRGB data
Analysis results
Fig. 2. Structure of remote server.
Fig. 3. Boronic acid equilibrium in water in the absence and presence of catechols.
13
Fig. 4. Structures of 13 catechols.
Fig. 5. Color difference maps of 13 catechols at 12.5 mM concentration plus 1 control. For display, the color RGB range 0-147 is expanded to 0-255 with 8 bits per color. 1: control, 2: catechol, 3: 4-tert-butylcatechol, 4: 4-methylcatechol, 5: 4-nitrocatechol, 6: 3,5-di-butylcatechol, 7: 1,2,4-benzentnol, 8: 3,4-dihydroxybenzaldehyde, 9: dopamine hydrochloride, 10: 3-fluorocatechol, 11: 3,4-dihydroxyphenylacetic acid, 12: 3,4-dihydroxybenzoic acid, 13: L-adrenaline bitartrate, 14: chloroacetyl catechol.
14
Cumulative percentage (%)
120 12.5 mM 100
88.28
99.03
99.46
76.16
80 60
96.12
49.34
40 20 0
1
2
3 4 5 Principal components
6
Fig. 6. Scree plot from a principal components analysis for identification of 13 catechols at 12.5 mM concentration plus 1 control.
15
16
Fig. 7. PCA plot for identification of 13 catechols at 6 serial concentrations and 1 control using 2×2 colorimetric sensor array. Quintuplicate trials were run for each analyte. a: 12.5 mM, b: 25 mM, c: 50 mM, d: 75 mM, e: 100 mM, f: 150 mM.
17
18
19
Fig. 8. HCA dendrogram for identification of 13 catechols at 6 serial concentrations and 1 control using 2×2 colorimetric sensor array. Quintuplicate trials were run for each analyte. a: 12.5 mM, b: 25 mM, c: 50 mM, d: 75 mM, e: 100 mM, f: 150 mM.
20
21
Fig. 9. LDA scatter plot for the identification of 13 catechols at 6 serial concentrations and 1 control using 2×2 colorimetric sensor array. Quintuplicate trials were run for each analyte. a: 12.5 mM, b: 25 mM, c: 50 mM, d: 75 mM, e: 100 mM, f: 150 mM.
22
Predicted value (mM)
a
160 140
Catechol
120
R =0.9970 Slope=0.9904 RMSE=3.6368
2
100 80 60 40 20 0
0
b
20
40
60 80 100 Actual value (mM)
120
140
160
Predicted value (mM)
160 140
4-tert-butylcatechol
120
R =0.9967 Slope=1.0026 RMSE=4.5881
2
100 80 60 40 20 0
0
Predicted value (mM)
40
60 80 100 Actual value (mM)
120
140
160
160 140
4-methylcatechol
120
R =0.9975 Slope=1.0021 RMSE=0.9085
100
2
80 60 40 20 0 0
20
40
60 80 100 Actual value (mM)
120
140
160
d 160 140
Predicted value (mM)
c
20
120 100
4-nitrocatechol 2 R =0.9884 Slope=0.9659 RMSE=0.9170
80 60 40 20 0 0
20
40
60
80
100
Actual value (mM)
23
120
140
160
e
160 140
Predicted value (mM)
120
3,5-di-butylcatechol 2 R =0.9953 Slope=1.0204 RMSE=6.4831
100 80 60 40 20 0 0
f
20
40
60 80 100 Actual value (mM)
120
140
160
160 140
1,2,4-benzentriol
120
R =0.9981 Slope=0.9446 RMSE=3.9169
Predicted value (mM)
2
100 80 60 40 20 0
0
g
40
60 80 100 Actual value (mM)
120
140
160
160 140 120 100
3,4-dihydroxybenzaldehyde 2 R =0.9986 Slope=0.9887 RMSE=1.2943
80 60 40 20 0 0
20
40
60 80 100 Actual value (mM)
120
140
160
h 160 140 120
Predicted value (mM)
Predicted value (mM)
20
Dopamine hydrochloride 2 R =0.9997 Slope=1.0150 RMSE=8.5820
100 80 60 40 20 0 0
20
40
60 80 100 Actual value (mM)
24
120
140
160
Predicted value (mM)
i
160 140
3-fluorocatechol
120
R =0.9972 Slope=0.9897 RMSE=4.2173
100
2
80 60 40 20 0 0
j
40
60 80 100 Actual value (mM)
120
140
160
160 3,4-dihydroxyphenylacetic acid 2 R =0.9986 Slope=1.0054 RMSE=5.2035
140
Predicted value (mM)
20
120 100 80 60 40 20 0
0
k
40
60 80 100 Actual value (mM)
120
140
160
160 140 120 100
3,4-dihydroxybenzoic acid 2 R =0.9985 Slope=0.9718 RMSE=3.0459
80 60 40 20 0 0
l
20
40
60 80 100 Actual value (mM)
120
140
160
160 140
Predicted value (mM)
Predicted value (mM)
20
120 100
L-adrenaline bitartrate 2 R =0.9874 Slope=1.0053 RMSE=1.6902
80 60 40 20 0 0
20
40
60 80 100 Actual value (mM)
25
120
140
160
m 160
Predicted value (mM)
140 120 100
Chloracetyl catechol 2 R =0.9962 Slope=0.9736 RMSE=1.5332
80 60 40 20 0 0
20
40
60 80 100 Actual value (mM)
120
140
160
Fig. 10. Actual value vs. predicted value of catechols concentration. a: catechol, b: 4-tert-butylcatechol, c: 4-methylcatechol, d: 4-nitrocatechol, e: 3,5-di-butylcatechol, f: 1,2,4-benzentnol, g: 3,4-dihydroxybenzaldehyde, h: dopamine hydrochloride, i: 3-fluorocatechol, j: 3,4-dihydroxyphenylacetic acid, k: 3,4-dihydroxybenzoic acid, l: L-adrenaline bitartrate, m: chloroacetyl catechol.
26