Project

General

Profile

Revision 02b38c6f

Added by Alessandro_N over 9 years ago

Script to generate HTML pages for the Preview link + example of a Preview HTML page

View differences:

szcluster-db/preview_page/generate_html_from_template_and_PostgreSQL_db.py
1
#!/usr/bin/python
2
# script to make HTML files used by demonstrator for Sitools SZ DB...
3
# HTML template from Boualam
4
# Script from Elie
5
# Psycopg2 code from Alessandro
6

  
7
html_template = """
8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
9
<html>
10
<head>
11
	<!--<link rel="stylesheet" type="text/css" href="style.css"/>-->
12
	<!--Original dark blue: #005fbf-->
13
	<!--Original light blue: #aad4ff-->
14
	<style type="text/css">
15
		body {
16
		background: #FFFFFF;
17
		color: #EEE;
18
		text-align: center;
19
		font: normal 9pt Verdana;
20
	    }
21
	    img {
22
		border: none;
23
	    }
24
	    #normal2, #normal3, #normal4, #normal5 {
25
		display: none;
26
	    }
27
	    #gallery {
28
		margin:1%% auto;
29
	    }
30
	    .album{
31
	    	width:55%%;
32
	    	float:left;
33
	    	margin-left: 5%%
34
	    }
35
	    #thumbs {
36
		margin-right: 10%%;
37
		width: 5%%;
38
		height: 60%%;
39
		float: left;
40
	    }
41
	    #thumbs img {
42
		width: 248%%;
43
		height: 248%%;
44
		margin: 2%%;
45
		box-shadow: 3px 3px 1px #ccc;
46
	    }
47
	    #thumbs a:hover {
48
		margin: 0 0 0 2%%;
49
	    }
50
	    .big{
51
	    	margin-bottom: 5%%;
52
	    }
53
	    #bigimages {
54
	    }
55
	    #bigimages img {
56
		width: 63%%;
57
		height:63%%;
58
		box-shadow: 3px 3px 1px #ccc;
59
		float:left;
60
	    }
61
	    #arrow {
62
		margin-top: 27%%;
63
		width: 10%%;
64
		float: left;
65
	    }
66
	    #arrow img {
67
		width: 100%%;
68
	    }
69
	    #cds{
70
	    	text-align:center;
71
	    }
72
	    #cds img {
73
        width: 20%%;
74
        }
75
        #information {
76
        	float:left;
77
			padding:0px;
78
			width:26%%;
79
			border:1px solid #000000;
80
			margin-left: 5%%;
81
		}#information table{
82
		    border-spacing: 0;
83
			width:100%%;
84
			margin:0px;padding:0px;
85
		}
86
		#information tr:nth-child(odd){ background-color:#F0F0F0; } 
87
		#information tr:nth-child(even){ background-color:#ffffff; }
88
		#information td{
89
			vertical-align:middle;
90
			border:1px solid #000000;
91
			text-align:right;
92
			font-size:1.2em;
93
			font-family:Arial;
94
			font-weight:normal;
95
			color:#000000;
96
			padding: 3%% 3%% 3%% 5%%;
97
		}
98
		#information tr:first-child td{
99
			background-color:#404040;
100
			text-align:center;
101
			padding:2%%;
102
			font-size:2em;
103
			font-family:Arial;
104
			font-weight:bold;
105
			color:#ffffff;
106
		}
107
		ul{
108
			padding: 0;
109
			margin:0;
110
		}
111
		ul li{
112
			list-style:none;
113
		}
114
	</style> 
115

  
116
	<script type="text/javascript">
117

  
118
		var currentGlobal = 1;
119

  
120
		function changeImage(current,total) {
121
			//var imagesNumber = 6;
122
			for (i=1; i<=total; i++) {	
123
				if (i == current) {
124
					document.getElementById("normal" + current).style.display = "block";
125
				} else {
126
					document.getElementById("normal" + i).style.display = "none";
127
				}
128
			}
129
			currentGlobal = current;
130
		}
131

  
132
		function next() {
133
			if (currentGlobal==5){currentGlobal=0};
134
		        changeImage(currentGlobal+1,5);
135
		}
136

  
137
		function previous() {
138
			if (currentGlobal==1){currentGlobal=6};
139
		        changeImage(currentGlobal-1,5);
140
		}
141

  
142
		window.addEventListener('keyup', function (e) {
143
		    if (e.keyCode === 37) {previous()}
144
		    if (e.keyCode === 39) {next()}
145
		}, false);
146

  
147
	</script>
148

  
149
</head>
150

  
151
<body>
152
  
153
<div id="gallery">	
154

  
155
	<div class="album">
156
	    <div class="big">
157
		<div id="thumbs">
158
		    <a href="javascript: changeImage(1,5);"><img src="../%(DATA_DIR)s/%(SZ_FILE)s" alt="" /></a>
159
		    <a href="javascript: changeImage(2,5);"><img src="../%(DATA_DIR)s/%(SZ_SDSS_FILE)s" alt="" /></a>
160
		    <a href="javascript: changeImage(3,5);"><img src="../%(DATA_DIR)s/%(SZ_W1_FILE)s" alt="" /></a>
161
		    <a href="javascript: changeImage(4,5);"><img src="../%(DATA_DIR)s/%(SZ_FOF_FILE)s" alt="" /></a>
162
		    <a href="javascript: changeImage(5,5);"><img src="../%(DATA_DIR)s/%(SZ_ROSAT_FILE)s" alt="" /></a>
163
		</div>
164

  
165
		<div id="arrow"><a href="javascript: previous();"><img src="../%(DATA_DIR)s/prev.png" alt="" /></a></div>
166

  
167
		<div id="bigimages">
168
		  <div id="normal1"><a href="javascript: next();"><img src="../%(DATA_DIR)s/%(SZ_FILE)s" alt=""/></a></div>
169
		  <div id="normal2"><a href="javascript: next();"><img src="../%(DATA_DIR)s/%(SZ_SDSS_FILE)s" alt=""/></a></div>
170
		  <div id="normal3"><a href="javascript: next();"><img src="../%(DATA_DIR)s/%(SZ_W1_FILE)s" alt=""/></a></div>	
171
		  <div id="normal4"><a href="javascript: next();"><img src="../%(DATA_DIR)s/%(SZ_FOF_FILE)s" alt=""/></a></div>	
172
		  <div id="normal5"><a href="javascript: next();"><img src="../%(DATA_DIR)s/%(SZ_ROSAT_FILE)s" alt=""/></a></div>   
173
		</div>
174
		
175
		<div id="arrow"><a href="javascript: next();"><img src="../%(DATA_DIR)s/next.png" alt="" /></a></div>
176
		<div style="clear:both;"></div> 
177
	    </div>
178
	</div>
179
	<div id="information">
180
                <table >
181
                    <tr><td colspan="2">%(NAME)s</td></tr>
182
                    <tr>
183
                    	<td><b>Index</b></td>
184
                        <td style='text-align:left'>%(INDEX)i</td>
185
                    </tr>
186
                    <tr>
187
                        <td><b>RA</b></td>
188
                        <td style='text-align:left'>%(RA)s</td>
189
                    </tr>
190
                    <tr>
191
                        <td><b>DEC</b></td>
192
                        <td style='text-align:left'>%(DEC)s</td>
193
                    </tr>
194
                    <tr>
195
                        <td><b>Redshift</b></td>
196
                        <td style='text-align:left'>%(REDSHIFT)s</td>
197
                    </tr>
198
                    <tr>
199
                        <td><b>Redshift type</b></td>
200
                        <td style='text-align:left'>%(REDSHIFT_TYPE)s</td>
201
                    </tr>
202
                    <tr>
203
                        <td><b>Redshift ref.</b></td>
204
                        <td style='text-align:left'>%(REDSHIFT_REF)s</td>
205
                        
206
                    </tr>
207
                    <tr>
208
			%(ALT_NAME_BLOCK)s
209
                    </tr>
210
                    <tr>
211
                       <td><b>VO Link</b></td>
212
                       <td id="cds"  style='text-align:left'><a href="http://simbad.u-strasbg.fr/simbad/sim-basic?Ident=%(RA)s %(DEC)s&submit=SIMBAD+search" target="_blank"><img src="../%(DATA_DIR)s/cds_icon.gif" alt="" /></a></td>                       
213
                    </tr>
214
                </table>  
215
	</div>
216
	
217
</div>
218

  
219
</body>
220
</html>
221
"""
222

  
223
import psycopg2
224

  
225
## *** Customize here for the server *** ##
226
dbname = "'<DB_NAME>'"
227
user = "'postgres'"
228
host = "'localhost'"
229
pwd = "''"
230
dataset = "'<DATASET_NAME>'"
231
conn = psycopg2.connect("dbname="+dbname+" user="+user+" host="+host+" password="+pwd+"")
232

  
233
cur = conn.cursor()
234

  
235
# To get the number of rows
236
cur.execute("SELECT COUNT(*) FROM %s;" % dataset)
237
index_max = int(cur.fetchall()[0][0])
238

  
239
for i in range(0, index_max):
240
    output_file = './html/index_%d.html' % (i+1)
241
    
242
    try:
243
      cur.execute("select index, name, ra, dec, redshift, redshift_type, redshift_ref, alt_name, psz1_id_ext from "+dataset+" where index="+str(i+1)+"")
244
    except:
245
      print 'Data access impossible for object with Index: ', i+1
246

  
247
    rows = cur.fetchall()[0]
248
    # custumize here if necessary...
249

  
250
    DATA_dir = 'images'
251
    SZ_file = 'SZ_%d_SZ.png' % i
252
    SZ_SDSS_file = 'SZ_%d_SZ_SDSS.png' % i
253
    SZ_W1_file = 'SZ_%d_SZ_W1.png' % i
254
    SZ_FOF_file = 'SZ_%d_SZ_FoF.png' % i
255
    SZ_ROSAT_file = 'SZ_%d_SZ_ROSAT.png' % i
256

  
257
    INDEX =           int(rows[0])
258
    NAME =            rows[1]
259
    RA =              str(rows[2])
260
    DEC =             str(rows[3])
261
    REDSHIFT =        str(rows[4])
262
    REDSHIFT_TYPE =   rows[5]
263
    REDSHIFT_REF =    rows[6]
264
    if str(REDSHIFT_REF).upper() in ['NULL', 'NONE']: REDSHIFT_REF = ''
265
    
266
    ALT_NAME =        rows[7]
267
    ID_EXT =          rows[8] #rows[1]
268

  
269
    try:
270
      single_alt_names = ALT_NAME.split(';')
271
    except:
272
      single_alt_names = ['']
273
    
274
    ALT_NAME_BLOCK = """<td><b>Alt. Name</b></td>
275
          <td style='text-align:left'>
276
	  <ul>"""
277
    for names in single_alt_names:
278
      ALT_NAME_BLOCK += """
279
      	    <li>%s</li>""" % names.strip()
280
    ALT_NAME_BLOCK += """
281
          </ul>
282
          </td>"""
283

  
284
    html_current = html_template % {
285
        'DATA_DIR' : DATA_dir,
286
        'SZ_FILE' : SZ_file,
287
        'SZ_SDSS_FILE' : SZ_SDSS_file,
288
        'SZ_W1_FILE' : SZ_W1_file,
289
        'SZ_FOF_FILE' : SZ_FOF_file, 
290
        'SZ_ROSAT_FILE' : SZ_ROSAT_file,
291
        
292
        'NAME' : NAME,	
293
        'INDEX' : INDEX,
294
        'RA' : RA,
295
        'DEC' : DEC,
296
        'REDSHIFT' : REDSHIFT,
297
        'REDSHIFT_TYPE' : REDSHIFT_TYPE,
298
        'REDSHIFT_REF' : REDSHIFT_REF,
299
        'ALT_NAME' : ALT_NAME,
300
        'ID_EXT' : ID_EXT,
301
	'ALT_NAME_BLOCK' : ALT_NAME_BLOCK
302
        }
303

  
304
    
305
    file_out = open(output_file,'w')
306
    file_out.write(html_current)
307
    file_out.close()
308

  
309
    
szcluster-db/preview_page/index_23.html
1

  
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3
<html>
4
<head>
5
	<!--<link rel="stylesheet" type="text/css" href="style.css"/>-->
6
	<!--Original dark blue: #005fbf-->
7
	<!--Original light blue: #aad4ff-->
8
	<style type="text/css">
9
		body {
10
		background: #FFFFFF;
11
		color: #EEE;
12
		text-align: center;
13
		font: normal 9pt Verdana;
14
	    }
15
	    img {
16
		border: none;
17
	    }
18
	    #normal2, #normal3, #normal4, #normal5 {
19
		display: none;
20
	    }
21
	    #gallery {
22
		margin:1% auto;
23
	    }
24
	    .album{
25
	    	width:55%;
26
	    	float:left;
27
	    	margin-left: 5%
28
	    }
29
	    #thumbs {
30
		margin-right: 10%;
31
		width: 5%;
32
		height: 60%;
33
		float: left;
34
	    }
35
	    #thumbs img {
36
		width: 248%;
37
		height: 248%;
38
		margin: 2%;
39
		box-shadow: 3px 3px 1px #ccc;
40
	    }
41
	    #thumbs a:hover {
42
		margin: 0 0 0 2%;
43
	    }
44
	    .big{
45
	    	margin-bottom: 5%;
46
	    }
47
	    #bigimages {
48
	    }
49
	    #bigimages img {
50
		width: 63%;
51
		height:63%;
52
		box-shadow: 3px 3px 1px #ccc;
53
		float:left;
54
	    }
55
	    #arrow {
56
		margin-top: 27%;
57
		width: 10%;
58
		float: left;
59
	    }
60
	    #arrow img {
61
		width: 100%;
62
	    }
63
	    #cds{
64
	    	text-align:center;
65
	    }
66
	    #cds img {
67
        width: 20%;
68
        }
69
        #information {
70
        	float:left;
71
			padding:0px;
72
			width:26%;
73
			border:1px solid #000000;
74
			margin-left: 5%;
75
		}#information table{
76
		    border-spacing: 0;
77
			width:100%;
78
			margin:0px;padding:0px;
79
		}
80
		#information tr:nth-child(odd){ background-color:#F0F0F0; } 
81
		#information tr:nth-child(even){ background-color:#ffffff; }
82
		#information td{
83
			vertical-align:middle;
84
			border:1px solid #000000;
85
			text-align:right;
86
			font-size:1.2em;
87
			font-family:Arial;
88
			font-weight:normal;
89
			color:#000000;
90
			padding: 3% 3% 3% 5%;
91
		}
92
		#information tr:first-child td{
93
			background-color:#404040;
94
			text-align:center;
95
			padding:2%;
96
			font-size:2em;
97
			font-family:Arial;
98
			font-weight:bold;
99
			color:#ffffff;
100
		}
101
		ul{
102
			padding: 0;
103
			margin:0;
104
		}
105
		ul li{
106
			list-style:none;
107
		}
108
	</style> 
109

  
110
	<script type="text/javascript">
111

  
112
		var currentGlobal = 1;
113

  
114
		function changeImage(current,total) {
115
			//var imagesNumber = 6;
116
			for (i=1; i<=total; i++) {	
117
				if (i == current) {
118
					document.getElementById("normal" + current).style.display = "block";
119
				} else {
120
					document.getElementById("normal" + i).style.display = "none";
121
				}
122
			}
123
			currentGlobal = current;
124
		}
125

  
126
		function next() {
127
			if (currentGlobal==5){currentGlobal=0};
128
		        changeImage(currentGlobal+1,5);
129
		}
130

  
131
		function previous() {
132
			if (currentGlobal==1){currentGlobal=6};
133
		        changeImage(currentGlobal-1,5);
134
		}
135

  
136
		window.addEventListener('keyup', function (e) {
137
		    if (e.keyCode === 37) {previous()}
138
		    if (e.keyCode === 39) {next()}
139
		}, false);
140

  
141
	</script>
142

  
143
</head>
144

  
145
<body>
146
  
147
<div id="gallery">	
148

  
149
	<div class="album">
150
	    <div class="big">
151
		<div id="thumbs">
152
		    <a href="javascript: changeImage(1,5);"><img src="../images/SZ_22_SZ.png" alt="" /></a>
153
		    <a href="javascript: changeImage(2,5);"><img src="../images/SZ_22_SZ_SDSS.png" alt="" /></a>
154
		    <a href="javascript: changeImage(3,5);"><img src="../images/SZ_22_SZ_W1.png" alt="" /></a>
155
		    <a href="javascript: changeImage(4,5);"><img src="../images/SZ_22_SZ_FoF.png" alt="" /></a>
156
		    <a href="javascript: changeImage(5,5);"><img src="../images/SZ_22_SZ_ROSAT.png" alt="" /></a>
157
		</div>
158

  
159
		<div id="arrow"><a href="javascript: previous();"><img src="../images/prev.png" alt="" /></a></div>
160

  
161
		<div id="bigimages">
162
		  <div id="normal1"><a href="javascript: next();"><img src="../images/SZ_22_SZ.png" alt=""/></a></div>
163
		  <div id="normal2"><a href="javascript: next();"><img src="../images/SZ_22_SZ_SDSS.png" alt=""/></a></div>
164
		  <div id="normal3"><a href="javascript: next();"><img src="../images/SZ_22_SZ_W1.png" alt=""/></a></div>	
165
		  <div id="normal4"><a href="javascript: next();"><img src="../images/SZ_22_SZ_FoF.png" alt=""/></a></div>	
166
		  <div id="normal5"><a href="javascript: next();"><img src="../images/SZ_22_SZ_ROSAT.png" alt=""/></a></div>   
167
		</div>
168
		
169
		<div id="arrow"><a href="javascript: next();"><img src="../images/next.png" alt="" /></a></div>
170
		<div style="clear:both;"></div> 
171
	    </div>
172
	</div>
173
	<div id="information">
174
                <table >
175
                    <tr><td colspan="2">ACT-CL J0008.1+0201</td></tr>
176
                    <tr>
177
                    	<td><b>Index</b></td>
178
                        <td style='text-align:left'>23</td>
179
                    </tr>
180
                    <tr>
181
                        <td><b>RA</b></td>
182
                        <td style='text-align:left'>2.0418</td>
183
                    </tr>
184
                    <tr>
185
                        <td><b>DEC</b></td>
186
                        <td style='text-align:left'>2.0204</td>
187
                    </tr>
188
                    <tr>
189
                        <td><b>Redshift</b></td>
190
                        <td style='text-align:left'>0.365069</td>
191
                    </tr>
192
                    <tr>
193
                        <td><b>Redshift type</b></td>
194
                        <td style='text-align:left'>spec</td>
195
                    </tr>
196
                    <tr>
197
                        <td><b>Redshift ref.</b></td>
198
                        <td style='text-align:left'>2014arXiv1401.7716R</td>
199
                        
200
                    </tr>
201
                    <tr>
202
			<td><b>Alt. Name</b></td>
203
          <td style='text-align:left'>
204
	  <ul>
205
      	    <li>ACT-CL J0008.1+0201</li>
206
      	    <li>RMJ000810.4+020112.3</li>
207
      	    <li>PSZ1 G101.60-59.03</li>
208
      	    <li>PSZ2 G101.55-59.03</li>
209
          </ul>
210
          </td>
211
                    </tr>
212
                    <tr>
213
                       <td><b>VO Link</b></td>
214
                       <td id="cds"  style='text-align:left'><a href="http://simbad.u-strasbg.fr/simbad/sim-basic?Ident=2.0418 2.0204&submit=SIMBAD+search" target="_blank"><img src="../images/cds_icon.gif" alt="" /></a></td>                       
215
                    </tr>
216
                </table>  
217
	</div>
218
	
219
</div>
220

  
221
</body>
222
</html>

Also available in: Unified diff