...
HTML |
---|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <style> option:disabled { opacity: 0.4; } </style> <script> $(document).ready(function(){ var plotsBaseURL='https://sites.ecmwf.int/cxep/c3s-seasonal-verification/' var origins = [{key:'ecmwf.s51',label:'ECMWF SEAS5 (C3Sv5.1)'},{key:'meteo_france.s8',label:'MeteoFrance System8'},{key:'ukmo.s601',label:'UK MetOffice GloSea6 (system=601)'}, {key:'ukmo.s602',label:'UK MetOffice GloSea6 (system=602)'}, {key:'cmcc.s35',label:'CMCC SPSv3.5'}, {key:'dwd.s21',label:'DWD GCFS2.1'}, {key:'ncep.s2',label:'NCEP CFSv2'}, {key:'jma.s3',label:'JMA CPS3'}, {key:'eccc.s2',label:'ECCC CanCM4'}, {key:'eccc.s3',label:'ECCC GEM5-NEMO'}, {key:'C3Smm.s2022',label:'C3S multi-system (2022)'}, {key:'C3Smm.s2023',label:'C3S multi-system (2023)'}]; // var startDates = [{key:'10',label:'October'}, {key:'11',label:'November'},{key:'12',label:'December'},]; var variableNames = [{key:'msl',label:'Mean sea-level pressure'}, {key:'tp',label:'Total precipitation'}, {key:'t2m',label:'2-metre temperature'}, {key:'sst',label:'Sea-surface temperature'}]; var scores =[{key:'corr',label:'Correlation'}, {key:'rps',label:'RPS'}, {key:'roc',label:'ROC'}]; var leadtimes =[{key:'1m.fcmonth1',label:'1m; lead0'},{key:'1m.fcmonth2',label:'1m; lead1'}, {key:'1m.fcmonth3',label:'1m; lead2'},{key:'1m.fcmonth4',label:'1m; lead3'},{key:'1m.fcmonth5',label:'1m; lead4'},{key:'1m.fcmonth6',label:'1m; lead5'},{key:'3m.fcmonth3',label:'3m; lead0'},{key:'3m.fcmonth4',label:'3m; lead1'},{key:'3m.fcmonth5',label:'3m; lead2'},{key:'3m.fcmonth6',label:'3m; lead3'} ]; var categories = [{key:'0', label:'Below lower tercile'}, {key:'1', label:'Normal'}, {key:'2', label:'Above upper tercile'}] var scores_by_cat = ['roc']; // populate selects var populate = function(vals,id,available){ $.each(vals, function(){ $('<option/>', {'value': this.key,'text': this.label}).appendTo('#'+id); }); } populate(origins,'sel_origin'); // populate(startDates,'sel_stdate'); populate(variableNames,'sel_varn'); populate(scores,'sel_score'); populate(leadtimes,'sel_leadt'); populate(categories,'sel_cat'); // populate start dates function getMonthName(monthNumber) { const date = new Date(); date.setMonth(monthNumber - 1); date.setDay(1); return date.toLocaleString('en-GB', { month: 'long' }); } for (var i = 1; i < 13; i++) { //available = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; //if (available.includes(i)) { // $('<option />', {'value': i,'text': getMonthName(i) }).appendTo('#sel_stdate'); // //} else { // $('<option />', {'value': i,'text': getMonthName(i), 'disabled':'disabled'}).appendTo('#sel_stdate'); //} $('<option />', {'value': i,'text': getMonthName(i) }).appendTo('#sel_stdate'); console.log(i,getMonthName(i)) } //update functions var updateImage = function(){ var origin = $('#sel_origin').val(); var stdate = $('#sel_stdate').val(); var str_stdate = String(stdate).padStart(2, '0'); var varn = $('#sel_varn').val(); var score = $('#sel_score').val(); var leadt = $('#sel_leadt').val(); var cat = $('#sel_cat').val(); var imgbasename = origin.replace('.','_')+'_stmonth'+str_stdate+'_hindcast1993-2016_monthly.'+leadt+'.'+varn ; if (scores_by_cat.includes(score)) { $('#menu_cat').show(); $('#plot1').attr('src',plotsBaseURL+'/plots/stmonth'+str_stdate+'/'+imgbasename+'.category'+cat+'.'+score+'.png'); } else { $('#menu_cat').hide(); $('#plot1').attr('src',plotsBaseURL+'/plots/stmonth'+str_stdate+'/'+imgbasename+'.'+score+'.png'); } } updateImage(); $('#selectors select').on('change',function(e){ updateImage(); }) }) </script> <div id="selectors"> <label for="sel_origin">Forecast system: </label><select id="sel_origin"></select> <br> <label for="sel_stdate">Nominal start date: </label><select id="sel_stdate" ></select> <label for="sel_leadt">Aggregation and leadtime: </label><select id="sel_leadt"></select> <br> <label for="sel_varn">Variable: </label><select id="sel_varn"></select> <label for="sel_score">Score: </label><select id="sel_score"></select> <div id="menu_cat" style="display: inline"><label for="sel_cat">Category: </label><select id="sel_cat"></select></div> <br/> </div> <img id="plot1" width="100%"/><br/> |
...