-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
4033 lines (3483 loc) · 178 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<meta name="referrer" content="no-referrer">
<title>Project Cars - live view. (https://github.com/eckhchri/pcars-ds-liveview) </title>
<link rel="icon" type="image/vnd.microsoft.icon" href="./favicon.ico">
<!-- static load google maps -->
<!-- <script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3.26"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?v=3.26exp&key=______"></script>
-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.3/d3.min.js"></script> -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js'></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-url/1.8.6/url.min.js"></script>
<script src="./lib/FileSaver/FileSaver.js"></script>
<script src="./lib/jszip/jszip.min.js"></script>
<link rel="stylesheet" href="./lib/LapChart/lap-chart.css">
<script src="./lib/LapChart/lap-chart.js"></script>
<link rel="stylesheet" href="./lib/jBox/jBox.css">
<script src="./lib/jBox/jBox.min.js"></script>
<link rel="stylesheet" type="text/css" href="./lib/w2ui/w2ui-1.4.3.min.css" />
<script type="text/javascript" src="./lib/w2ui/w2ui-1.4.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="./lib/jquery.qtip.custom/jquery.qtip.min.css" />
<script type="text/javascript" src="./lib/jquery.qtip.custom/jquery.qtip.min.js"></script>
<!-- Jquery UI needed for jTable and the function dragable/resize-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- The jqGrid language file code-->
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-de.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<!-- jqgrid 5.3.2 disabled, because of Issue #127
<link rel="stylesheet" type="text/css" media="screen" href="./lib/jqGrid/v5.3.2/ui.jqgrid.css" />
<script src="./lib/jqGrid/v5.3.2/grid.locale-en.js" type="text/javascript"></script>
<script src="./lib/jqGrid/v5.3.2/jquery.jqGrid.min.js" type="text/javascript"></script>
-->
<!-- CSS definitions moved to folder ./css/ -->
<link rel="stylesheet" href="./css/pcars.css"> <!-- Should be loaded after ui.jqgrid.css, to overwirte some setting #80 -->
<link rel="stylesheet" href="./css/w2ui.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">
<!-- new pcarslv classes -->
<script src="./PCARSLV_BASIC.js" charset="utf-8"></script>
<script src="./PCARSLV_SETTINGS.js" charset="utf-8"></script>
<script src="./config.js" charset="utf-8"></script>
<script src="./pcars_map_gpssensor.js" charset="utf-8"></script>
<script src="./pcars_map_controller.js" charset="utf-8"></script>
<script src="./pcars_map.js" charset="utf-8"></script>
<script src="./pcars_map_google.js" charset="utf-8"></script>
<script src="./pcars_map_raw.js" charset="utf-8"></script>
<script src="./pcars_map_bing.js" charset="utf-8"></script>
<script src="./pcars_map_osm.js" charset="utf-8"></script>
<script src="./pcars_driver.js" charset="utf-8"></script>
<script src="./pcars_track.js" charset="utf-8"></script>
<script src="./pcars_vehicle.js" charset="utf-8"></script>
<script src="./pcars_vehiclelist.js" charset="utf-8"></script>
<script src="./pcars_vehicleliverylist.js" charset="utf-8"></script>
<script src="./pcars_html_controls.js" charset="utf-8"></script>
<script src="./receive_ds_data.js" charset="utf-8"></script>
<script src="./calc_coordinates.js" charset="utf-8"></script>
<script src="./class_reference_points.js" charset="utf-8"></script>
<script src="./css_classchanger.js" charset="utf-8"></script>
<script src="./pcars_recorder.js" charset="utf-8"></script>
<script src="./RefPoint.js" charset="utf-8"></script>
<script src="./RefPointData.js" charset="utf-8"></script>
<script src="./RefPointDataPCARS1.js" charset="utf-8"></script>
<script src="./RefPointDataPCARS2.js" charset="utf-8"></script>
<script src="./RefPointDataAMS2.js" charset="utf-8"></script>
<!-- pdfmake lib -->
<script src='lib/pdfmake/pdfmake.min.js'></script>
<script src='lib/pdfmake/vfs_fonts.js'></script>
</head>
<body>
<!-- W2UI Toolbar top -->
<div id="toolbar" style="padding: 4px; border: 1px solid silver; border-radius: 3px"></div>
<div id="map">Google Maps.</div>
<!-- refpoint fiddling window -->
<div id="RefpointFiddling" class="mapoverlay focus">
<h3>Refpoint Fiddling</h3><br>
<table>
<tr><td>refLat:</td><td><input type="text" name="fiddling_reflat_name" id="fiddling_reflat"></td></tr>
<tr><td colspan="2"><div id="slider-refLat"></div></td></tr>
<tr><td>refLong:</td><td><input type="text" name="fiddling_reflong_name" id="fiddling_reflong"></td></tr>
<tr><td colspan="2"><div id="slider-refLong"></div></td></tr>
<tr><td>rotation:</td><td><input type="text" name="fiddling_rotation_name" id="fiddling_rotation"></td></tr>
<tr><td colspan="2"><div id="slider-rotation"></div></td></tr>
<tr><td>cor_r_Long:</td><td><input type="text" name="fiddling_cor_r_long_name" id="fiddling_cor_r_long"></td></tr>
<tr><td colspan="2"><div id="slider-cor_r_Long"></div></td></tr>
<tr><td>cor_r_Lat:</td><td><input type="text" name="fiddling_cor_r_lat_name" id="fiddling_cor_r_lat"></td></tr>
<tr><td colspan="2"><div id="slider-cor_r_Lat"></div></td></tr>
<tr><td>cor_PosX_mul:</td><td><input type="text" name="fiddling_cor_posx_mul" id="fiddling_cor_posx_mul"></td></tr>
<tr><td colspan="2"><div id="slider-cor_PosX_mul"></div></td></tr>
<tr><td>cor_PosY_mul:</td><td><input type="text" name="fiddling_cor_posy_mul" id="fiddling_cor_posy_mul"></td></tr>
<tr><td colspan="2"><div id="slider-cor_PosY_mul"></div></td></tr>
<tr><td>Zoom:</td><td><input type="text" name="fiddling_zoom" id="fiddling_zoom"></td></tr>
<tr><td colspan="2"><div id="slider-Zoom"></div></td></tr>
<tr><td>MapInitLat:</td><td><input type="text" name="fiddling_mapinitlat" id="fiddling_mapinitlat"></td></tr>
<tr><td colspan="2"><div id="slider-MapInitLat"></div></td></tr>
<tr><td>MapInitLong:</td><td><input type="text" name="fiddling_mapinitlong" id="fiddling_mapinitlong"></td></tr>
<tr><td colspan="2"><div id="slider-MapInitLong"></div></td></tr>
</table>
<p>
</div>
<div id="LiveryOverviewVehicle" class="mapoverlay LiveryOverview">
<div id="LiveryOverviewVehicleHead" class="LiveryOverviewHead"><span id="txtLiveryOverview">All Liveries< </span><input type="button" title="Close Livery Overview" id="cbLiveryOverviewClose" value="Close" style="background-color:#dddddd; width:50px"></input></div>
</div>
<div id="SpotterGuide" class="mapoverlay LiveryOverview focus">
<div id="SpotterGuideHead" class="LiveryOverviewHead"><span id="txtSpotterGuide">Spotter Guide </span><input type="button" title="Close Spotter Guide" id="cbSpotterGuideClose" value="Close" style="background-color:#dddddd; width:50px"></input> <input type="button" title="Open New Window" id="cbSpotterGuideNewWindow" value="Print" style="background-color:#dddddd; width:50px"></input></div>
</div>
<div id="LiveryImageWrapperDriverTable" class="LiveryImageWrapper">
<img id="LiveryImageDriverTable" class="overlayLiveryImage" src="">
<br><span id="overlayLiveryImageTextDriverTable" class="overlayLiveryImageText"></span>
</div>
<!-- -->
<div id="DSstatistic" class="mapoverlay">
Todo: Statistiken
After implement a kind of recording Race Data, show some statistics of that.
1st places, number of laps, common race statistics, extracted from pcars_recording.js ...
<div id="chart"></div>
</div>
<!-- Replay -->
<div id="DSreplay" class="mapoverlay">
Todo: Replay
</div>
<div id="DSdata" class="pcarswindowgrp2 focus">
<div id="pcars-dsurl"></div>
<div id="pcars-dsstate"></div>
<div id="pcars-dsjoinable"></div>
<div id="pcars-dslobbyid"></div>
<div id="pcars-dsnow"></div>
<div id="pcars-trackname"></div>
<div id="pcars-racelength"></div>
<div id="pcars-dssessionstate"></div>
<div id="pcars-dssessionstage"></div>
<div id="pcars-dssessionlength"></div>
<div id="pcars-ambienttemp"></div>
<div id="pcars-tracktemp"></div>
<br>----- Settings ----<br>
<div id="pcars-apimode"></div>
<div id="pcars-curgamerunning"></div>
<div id="pcars-displayduration"></div>
<div id="pcars-record_pos"></div>
<div id="DSdataInformation"></div>
<div id="DSdataSettings"></div>
<div id="demo_start_pos"></div>
<div id="demo_end_pos"></div>
</div>
<!-- definition of data areas, the order of the tables decides which one is in foreground and which in background-->
<div id="TrackList" class="pcarswindowgrp2 focus">
<table id="tracklisttable"></table>
<div id="pager_tracklisttable"></div>
</div>
<div id="CarList" class="pcarswindowgrp2 focus">
<table id="carlisttable"></table>
</div>
<div id="DriverDataArea" class="pcarswindowgrp2 focus">
<table id="DriverDataTable"></table>
<div id="pager_DriverDataTable"></div>
</div>
<div id="DSRecStatistics" class="focus">
<table>
<!-- https://www.w3.org/TR/CSS21/tables.html#table-display -->
<tr class="replay_row">
<td class="box">
<div><i class="fa fa-fast-backward fa-2x"></i></div>
</td>
<td class="box">
<div><i id="btn_fa_play-pause" class="fa fa-pause fa-2x"></i></div>
</td>
<td class="box">
<div><i class="fa fa-fast-forward fa-2x"></i></div>
</td>
<td class="box">
<div>loop start pos:</div>
<div><input name="field_textarea" id="loop_start_pos" type="number" size="4" maxlength="4" style="width: 45px;"/></div>
</td>
<td class="box">
<div>loop end pos:</div>
<div><input name="field_textarea" id="loop_end_pos" type="number" size="4" maxlength="4" style="width: 45px;"/></div>
</td><!--<td></td>-->
<td class="box replay_cell">
<div>Start/Stop Recording:</div>
</td>
<td class="box">
<label class="switch">
<input type="checkbox" id="btn-start-rec-data">
<div class="slider round"></div>
</label>
</td>
</tr>
<tr class="replay_row">
<td class="box" colspan="4">
<label for="amount">Pos:</label>
<input type="text" id="replaybar_curpos_infobox" readonly style="border:0;">
<div id="slider-replaybar"></div>
</td>
<td class="box" width="140px">
<div id="pcars-record_pos"></div>
<div id="pcars-record_max"></div>
</td>
<td class="box">
<div>Export Data:</div>
</td>
<td class="box">
<button id="btn-export-rec-data" class="btn" onclick="PCARS_Rec.exportDataCompressed(builtFilename('rec')+'.zip')">export</button>
</td>
</tr>
<tr class="replay_row">
<td class="box" colspan="2">
<div>load local File:</div>
</td>
<td class="box" colspan="3">
<input id="RecFileUploader" type="file" name="Select PCARS File">
</td>
<td class="box">
<button id="btn-load-demo-file" class="btn" onclick="open_popup_load_demofile();">Load from URL</button>
</td>
<!--<td class="box">
<div>Rec Stats:</div>
</td>
<td class="box">
<div id="pcars-rec-elemnr" ></div>
<div id="pcars-rec-elemsize" ></div>
</td>-->
</tr>
</table>
</div>
<!-- definition of option panel-->
<div id="Settings" class="pcarswindowgrp2 focus">
Settings: <br>
<!-- API dropdown -->
<form action="#">
<fieldset id="fieldset">
<label for="APIMODE">Select API Type</label>
<select class="APIMODE" name="APIMODE" id="APIMODE">
<option>DS</option>
<option>DS2</option>
<option>DS-AMS2</option>
<option>CREST</option>
<option>CREST2</option>
<option>CREST2-AMS2</option>
<option>DEMO</option>
</select>
</fieldset>
</form>
<!-- API dropdown -->
<form action="#">
<fieldset id="fieldset">
<label for="MAPTYPE">Select Map Type</label>
<select class="MAPTYPE" name="MAPTYPE" id="MAPTYPE">
</select>
</fieldset>
</form>
<label for="DRIVERCOLOR">color driver objects</label>
<select class="DRIVERCOLOR" name="DRIVERCOLOR" id="DRIVERCOLOR">
<option></option>
<option value="hidedrivers">hide-drivers</option>
<option value="unhidedrivers">unhide-drivers</option>
<option value="colortop3">Top 3 vehicles</option>
<option value="colorsamename">same vehicles</option>
<option value="colorsameclass">same classes</option>
<option value="ishuman">Is Human</option>
<option value="isai">Is AI</option>
<option value="deletecssclasses">reset CSS Classes</option>
</select>
<br>
<label for="DRIVERLABELSTYLE">Driverlabel Options</label>
<select class="DRIVERLABELSTYLE" name="DRIVERLABELSTYLE" id="DRIVERLABELSTYLE">
<option value="normallabelsdark">Normal Labels Dark</option>
<option value="cutdriverlabeldark">Cut Labels Dark</option>
<option value="normallabelslight">Normal Labels Light</option>
<option value="cutlabelslight">Cut Labels Light</option>
</select>
<p>
<label for="amount">"Hidden"Driver Opacity:</label>
<input type="text" class="CSS_OPACITY_DRIVER" id="filtered_driver_opacity" readonly style="border:0;">
<div id="slider-filtered_driver_opacity"></div>
</p>
<p>
<label for="amount">Trackmap Opacity:</label>
<input type="text" id="trackmap_opacity" readonly style="border:0;">
<div id="slider-trackmap_opacity"></div>
</p>
<br>----<br>
<label for="amount">WORKERDELAY_DSDATA:</label>
<input type="text" id="workerdelay_dsdata" readonly style="border:0;">
<div id="slider-workerdelay_dsdata"></div>
<br>----<br>
<p>
<label for="amount">DisplayDurationCorrector:</label>
<input type="text" id="amount" readonly style="border:0;">
<div id="slider-range-max"></div>
</p>
<br>----<br>
<p>
<label for="amount">GuiElementUpdateInterval</label>
<input type="text" id="gui_update_interval" readonly style="border:0;">
<div id="slider-gui_update_interval"></div>
</p>
</div>
<script type="text/javascript" charset="utf-8">
//dynamic load google maps API with API key
// 1. check url parameters for api key
// 2. check config.js if api key defined
function loadGoogleMapAPI() {
// if parameter exists overwrite configuration
if(get_url_param('api_key')){
GOOGLE_MAP_KEY = get_url_param('api_key');
if(log >= 3){console.log("+++++++++ GOOGLE_MAP_KEY found in a URL paremeter. Overwrite config.js and using this google map key: " , GOOGLE_MAP_KEY );}
}else {
if(log >= 3){console.log("+++++++++ GOOGLE_MAP_KEY use key from config.js: ", GOOGLE_MAP_KEY);}
}
if (GOOGLE_MAP_KEY.length <= 0 ){
if(log >= 2){console.log("+++++++++ GOOGLE_MAP_KEY seems empty: " , GOOGLE_MAP_KEY );}
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.47' + // 'https://maps.google.com/maps/api/js?v=3.38'
'&key=' + GOOGLE_MAP_KEY + '&callback=initialize_app'; //& needed
document.body.appendChild(script);
}
window.onload = loadGoogleMapAPI;
// initialize vars
var oPcarsMapCtrl = null; // TODO_SENSORLAYER controller object of all map types
var oMap; // google map object, aka map, sometimes used as global variable TODO_SENSORLAYER
var aDrivers = new Array(); // array for PCARSdriver objects
var aSensorData = new Array(); // array of Hashes, each hash includes parameters of a driver
var XMLHTTPTimeout = 2000;
var StopTransitionDelay = "false"; // if set to true, DisplayDuration set to 0 ( cases: zoom, mapchange )
var StopTransitionDelay_StartTime = Date.now(); //timestamp for StopTransitionDelay is set to "true"
var dsdata_workerrun_counter = 0; // worker run counter for reactivating smooth marker transition, for example after dragging the map is finished this counter is activated and if it reached a limit the smooth transition is activated again
var dsdata_workerrun_counter_limit_default = 1; //if this limit is reached the smooth transition is reactivated, default for all cases except zoom at the moment
var dsdata_workerrun_counter_limit_other = 2; //if this limit is reached the smooth transition is reactivated, on a map zoom event or the playback reaches the end and begins again or SessionStage change
var dsdata_workerrun_counter_limit_cur = dsdata_workerrun_counter_limit_default; //current limit for smooth transition reactivation
var count_dsdata_workerruns = false; // set to true after dragging the map is finished for example and then the worker run counter is increased every worker run
var global_i = 0;
var CurGameRunning = demo[0]['globals']['curgamerunning']; // PCARS1|PCARS2|AMS2 show the name of the current game is running and should be the same string used PCARSVEHICLELIST.aVehicleInfoExt !
var CurGameRunning_old = CurGameRunning; //In case of CurGameRunning is changing, we use both values to compare it and if they are different we can reset the refpoint array for the current game
var sensorLayer;
var sensorLayer_UpdateTime; //time, when marker are updated
var sensorLayer_UpdateTime_old; //time of the recent dsdata-worker run, when the marker were updated
var sensorLayer_UpdateDelta; //time between recent and current dsdata-worker run, when the marker were updated
var DriverTable_ReloadTime;
var DriverTable_ReloadTime_old;
var UnHide = "false"; //UnHide markers
var UnHide_Timer = 0; //Timer for UnHide markers
var DisplayDurationCorrector = 0;
var oRPs = new RefPoint(CurGameRunning);
var aRefPointTMP = oRPs.getRefPointsByGame(CurGameRunning); // hash of game related RefPoints of tracks
//var aRefPointTMP = oRPs.getRefPointsAll(); // hash of all RefPoints for available tracks
var aRefPointTMPAll = oRPs.getRefPointsAll();
var aRefPointTrackname2ID = oRPs.GetMappingTrackname2Trackid(CurGameRunning); // hash to map Trackname variants to unique trackid
//An additional Refpoint object for fiddling is needed. For the fiddling sliders we need an original unchanged refpoint as slider baseline, because sliding changes the current refpoint in real time
//If you then set the value via input field, the refpoint and the fiddling refpoint are both updated for new slider baseline
var oRPsFiddling = new RefPoint(CurGameRunning);
var aRefPointFiddling = oRPsFiddling.getRefPointsAll();
var StopRefreshTracklist = "false";
var StopRefreshDriverlist = "false";
var StopRawDataAppending = false;
var SessionState = "";
var SessionState_old = "";
var SessionStage = "";
var SessionStage_old = "";
var HTMLCTRL = new HTMLCONTROL(); //provide help functions
//var aVehicleList = new Array(); // array of pcars_vehicle.js objects // commented out on 17.03.2017
var PCARSVehicleList = new PCARSVEHICLELIST(); // creates an empty object
var PCARSVehicleLiveryList = new PCARSVEHICLELIVERYLIST(); // creates an empty object
//var aVehicleIdToName = PCARSVehicleList.getIdToNameMapping(); // hash to translate vehicleID to VehicleName
var aCurrentVehicleClasses = {}; // all vehicle classes within the current race
var aCurrentVehicleNames = {}; // all vehicle names within the current race
var PCARSd = new PCARSdriver(); // only use the object to get functions of it
PCARSd.SetExampleData(); // setDefaultValues
var CSSClsChg = new CSSClassChanger(CSSDEFINITIONS); // CSS defined in config.js
var PCARS_Rec = new PCARSRECORDER(aRecConfig); // initialize PcarsRecording instance
var record_pos; //used for playback of data during DEMO mode
var record_pos_helper; //for WORKERDELAY_DEMODATA calculation needed
var sensorLayer_UpdateDelta_DEMOdiff; //Difference between sensorLayer_UpdateDelta of the recorded data and the playback
var WORKERDELAY_DEMODATA = WORKERDELAY_DSDATA; //Worker delay for DEMO mode to adapt the playback speed to the recording
// set to global var, to modify in future stage for periodical updates via ajax
var DsName = "-+-"; // aDsData.name;
var DsState = "-+-"; //aDsData.state; //idle/running
var DsTrackName = "Slightly Mad Studios Ltd"; //aTrackList[aDsData.TrackId];
var DsMaxMemberCnt = "-+-"; //aDsData.max_member_count;
var cuircitID = 9999999999; //aDsData.TrackId;
var sCurUrl = ""; //in each time this var should be the current DS URL independent of the APIMODE
var sCurPort = ""; //in each time this var should be the current DS PORT independent of the APIMODE
var sCurPath = ""; //in each time this var should be the current DS PATH independent of the APIMODE
var scrollPositionDriverTable = 0; // used for saving the current scollbar position
var scrollPositionTrackTable = 0; // used for saving the current scollbar position
var cellDataDrivername;
var cellDataVehiclename;
var cellDataTrackID;
// init PCARS Live View classes
var PLV_S = new PCARSLV_SETTINGS();
PLV_S.switchAPIMODE( APIMODE+"3" ); // only test call
PLV_S.switchAPIMODE( APIMODE ); // only test call
PLV_S.setCurrentSettings( APIMODE ); // initial force copy of vars to common vars
//PolyLine global vars for trackmaps
var PolyLineMid = null;
var PolyLineOuter = null;
var PolyLineInner = null;
var PolyLineSF = null;
// white background variables for fictional tracks
var Polygon = null;
var PolygonWorldCoords = [
{lat: -90 ,lng: -180},
{lat: 90 ,lng: -180},
{lat: 90 ,lng: 180},
{lat: -90 ,lng: 180},
{lat: -90 ,lng: 0}
];
//PolyLine global vars for CoordSystem
var PolyLineXneg = null;
var PolyLineXpos = null;
var PolyLineYneg = null;
var PolyLineYpos = null;
//coordinate system for devmode, 2km length in all 4 directions
var CoordSystem = {
"Xneg": [-2000000,0],
"Xpos": [2000000,0],
"Yneg": [0,-2000000],
"Ypos": [0,2000000]
};
var CoordSystemGPS = {};
// trackmap debug markers for refPoint tuning
var tm_debug_markers = [];
var zoom_level; //Google Maps zoom level
// race statistics powered by lapChart library
var aRacestats;
aRacestats = PCARS_Rec.resetRacestats(aRacestats);
var CSVExport = { //CSV Export Data
Practice1: "",
Practice2: "",
Qualifying: "",
Warmup: "",
Race1: "",
Race2: ""
};
var PDFdocDefinition = {
pageSize: 'A4',
pageOrientation: 'portrait',
info: {title: 'Complete Results'},
content: [
{text: 'Complete Results', style: 'globalHeader' }
],
styles: PDFstyles
};
//Trackmap Google GPS coordinates
var tmGPS = {};
//init array for calculate InClassRacePosition
var aInClass;
//array for saving number of pit stops and time gaps during race
var aRaceData = {};
//array for saving driver position to drivername
var aPosDriver = [];
// store z-index-ordered windows from class "focus" in an array
var aFocusWindows = $('.focus').toArray().sort(function(a, b) {
return parseInt($(a).css('zIndex'), 10) - parseInt($(b).css('zIndex'), 10);
});
// store available z-indices of these windows
var zIndices = [];
for (var i = 0; i < aFocusWindows.length; ++i) {
zIndices.push($(aFocusWindows[i]).css('zIndex'));
}
var slider_replaybar_sliding = false;
//// FOR DEVELOPER PURPOSES ONLY
//// checks for missing Livery Files, enable it only if you want to check these, result in browser developer console
//PCARSVehicleLiveryList.checkfiles('PCARS2');
////////////////////////////////////////////// start application after loading google map api
function initialize_app(){
if (window.location.protocol == "https:") {
alert('Please use http instead of https for proper functionality!\n\n' +
'Its because loading mixed content is blocked by browsers.\nMore details: https://github.com/eckhchri/pcars-ds-liveview/issues/2');
}
//preset HTML elemets
setParamDemoStartPos(demo_start_pos , true);
setParamDemoEndPos(demo_end_pos, true);
// catch demo array boundary breaks
if(demo_start_pos > demo.length-1 || demo_start_pos < 0){
setParamDemoStartPos(0 , true);
//demo_start_pos = 0;
}
record_pos = demo_start_pos;
if(demo_end_pos < 0){
setParamDemoEndPos(9999 , true);
//demo_end_pos = 0;
}
// in the case of APIMODE==DEMO, load zipped demo file to variable demo
if ( APIMODE == "DEMO" && SHOWPOPUPLOADDEMO == "true" ) {
open_popup_load_demofile();
}
// hide or unhide objects as defined within config.js
if ( SHOWTRACKLIST == false ) { $( "#TrackList" ).hide(); }
if ( SHOWDSDATA == false ) { $( "#DSdata" ).hide(); }
if ( SHOWDRIVERDATA == false ) { $( "#DriverDataArea" ).hide(); }
if ( SHOWSETTINGS == false ) { $( "#Settings" ).hide(); }
if ( SHOWCARLIST == false ) { $( "#CarList" ).hide(); }
//if ( SHOWDSSTATISTIC== false ) { $( "#DSstatistic" ).hide(); }
//if ( SHOWDSREPLAY == false ) { $( "#DSreplay" ).hide(); }
if ( SHOWRECSTATISTIC== false ) { $( "#DSRecStatistics" ).hide(); }
if ( SHOWREFPOINTFIDDLING== false || devmode_tm == false ) { $( "#RefpointFiddling" ).hide(); }
//Set toggles to correct
$("#btn-start-rec-data").prop( "checked", isRecEnabled); // set state to button configure in config.js
// init W2UI elemets
// info: moved to start of the script and in front of init_map() to show google maps within a W2UI tab in correct format
initW2UI();
// init button and events for import Recording files from client
initRecFileReader( HTMLCTRL );
///////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////
// BLOCK to set settings
$( document ).ready(function() {
//set default value for CSS coloration
//$("#DRIVERCOLOR").val( ).change();
HTMLCTRL.DRIVERCOLOR_SetActiveElement( CSSDEFAULTSET );
//set dropdown menu APIMODE
HTMLCTRL.APIMODE_SetSelection( APIMODE );
//creat all tooltips
initToolTips();
//make elements dragable/resizable
$(function() {
$( "#DSdata" ).draggable();
$( "#TrackList" ).draggable();
$( "#CarList" ).draggable();
$( "#DriverDataArea" ).draggable();
$( "#Settings" ).draggable();
$( "#RefpointFiddling" ).draggable();
$( "#DSdata" ).resizable({
//animate: true
ghost: true
});
$( "#DSRecStatistics" ).draggable();
$( "#LiveryImageWrapperDriverTable" ).draggable();
$( "#LiveryOverviewVehicle" ).draggable();
$( "#SpotterGuide" ).draggable();
});
});
// overwrite all API URL and Port settings in case the nodejs Proxy is used
if(use_node){
DsServerURL = nodeServerURL;
DsPort = nodePort;
DsPath = nodePath;
Ds2ServerURL = nodeServerURL;
Ds2Port = nodePort;
Ds2Path = nodePath;
DsAMS2ServerURL = nodeServerURL;
DsAMS2Port = nodePort;
DsAMS2Path = nodePath;
CRESTServerURL = nodeServerURL;
CRESTPort = nodePort;
CRESTPath = nodePath;
CREST2ServerURL = nodeServerURL;
CREST2Port = nodePort;
CREST2Path = nodePath;
CREST2AMS2ServerURL = nodeServerURL;
CREST2AMS2Port = nodePort;
CREST2AMS2Path = nodePath;
}
if (AllowUrlParams) {
if(use_node){
// check if url params overwrite the default node settings
if (get_url_param('nodeurl') && get_url_param('nodeport')) {
nodeServerURL = get_url_param('nodeurl');
nodePort = get_url_param('nodeport');
}
}else{
// check if url params overwrite the default ds info
if (get_url_param('dsurl') && get_url_param('dsport')) {
DsServerURL = get_url_param('dsurl');
DsPort = get_url_param('dsport');
APIMODE = "DS";
//overwrite dropdown menu selection
HTMLCTRL.APIMODE_SetSelection( APIMODE );
}
// check if url params overwrite the default ds2 info
if (get_url_param('ds2url') && get_url_param('ds2port')) {
Ds2ServerURL = get_url_param('ds2url');
Ds2Port = get_url_param('ds2port');
APIMODE = "DS2";
//overwrite dropdown menu selection
HTMLCTRL.APIMODE_SetSelection( APIMODE );
}
// check if url params overwrite the default DS-AMS2 info
if (get_url_param('dsams2url') && get_url_param('dsams2port')) {
DsAMS2ServerURL = get_url_param('dsams2url');
DsAMS2Port = get_url_param('dsams2port');
APIMODE = "DS-AMS2";
//overwrite dropdown menu selection
HTMLCTRL.APIMODE_SetSelection( APIMODE );
}
// check if url params overwrite the default CREST info
if (get_url_param('cresturl') && get_url_param('crestport')) {
CRESTServerURL = get_url_param('cresturl');
CRESTPort = get_url_param('crestport');
APIMODE = "CREST";
DisplayDuration = DisplayDurationCREST;
//overwrite dropdown menu selection
HTMLCTRL.APIMODE_SetSelection( APIMODE );
}
// check if url params overwrite the default CREST2 info
if (get_url_param('crest2url') && get_url_param('crest2port')) {
CREST2ServerURL = get_url_param('crest2url');
CREST2Port = get_url_param('crest2port');
APIMODE = "CREST2";
DisplayDuration = DisplayDurationCREST;
//overwrite dropdown menu selection
HTMLCTRL.APIMODE_SetSelection( APIMODE );
}
// check if url params overwrite the default CREST2-AMS2 info
if (get_url_param('crest2ams2url') && get_url_param('crest2ams2port')) {
CREST2AMS2ServerURL = get_url_param('crest2url');
CREST2AMS2Port = get_url_param('crest2port');
APIMODE = "CREST2-AMS2";
DisplayDuration = DisplayDurationCREST;
//overwrite dropdown menu selection
HTMLCTRL.APIMODE_SetSelection( APIMODE );
}
}
// check if url params overwrite the default autoExport option
if (get_url_param('autoexport')){
autoExport = get_url_param('autoexport');
}
}//END AllowUrlParams check
/////////////////////////////////////
// Event Handler
$("#APIMODE").change(function() {
$("#APIMODE option:selected").each(function() {
APIMODE = $( this ).text();
// change common vars to current API Mode
PLV_S.setCurrentSettings(APIMODE);
// in case of a marked driver table row in pcars2 APIMODEs and a visible Livery Image the image visibility is changed to hidden - Issue #161
$("#LiveryImageWrapperDriverTable").hide();
if(log >= 4){console.log('------- Switch API Mode to: ', APIMODE );}
});
}); // end #APIMODE change event
$("#MAPTYPE").change(function() {
$("#MAPTYPE option:selected").each(function() {
ChangeHtmlContentByID( '#pcars-maptype-info' , "Map Type: " + $( this ).text() );
});
}); // end #MAPTYPE change event
//init map
oPcarsMapCtrl = new pcars_map_controller ( DEFAULT_MAP_TYPE ,'map' ,aRefPointTMPAll[cuircitID]);
oPcarsMapCtrl.init_map(aRefPointTMPAll[cuircitID], aSensorData);
if(log >= 3){console.log("TODO new pcars_map_controller 2 : ", oPcarsMapCtrl);}
// init MapType Selection
var aMapTypes = oPcarsMapCtrl.getMapTypes();
HTMLCTRL.addMaptypeOption("#MAPTYPE", aMapTypes );
HTMLCTRL.MAPTYPE_SetSelection( DEFAULT_MAP_TYPE );
//Override refpoint variables for optimize/tune the refpoints, for developers only
$("#fiddling_reflat").change(function(e){
OverrideRefpointValue("refLat", parseFloat($(this).val()), false);
});
$("#fiddling_reflong").change(function(e){
OverrideRefpointValue("refLong", parseFloat($(this).val()), false);
});
$("#fiddling_rotation").change(function(e){
OverrideRefpointValue("rotation", parseFloat($(this).val()), false);
});
$("#fiddling_cor_r_long").change(function(e){
OverrideRefpointValue("cor_r_Long", parseInt($(this).val()), false);
});
$("#fiddling_cor_r_lat").change(function(e){
OverrideRefpointValue("cor_r_Lat", parseInt($(this).val()), false);
});
$("#fiddling_cor_posx_mul").change(function(e){
OverrideRefpointValue("cor_PosX_mul", parseFloat($(this).val()), false);
});
$("#fiddling_cor_posy_mul").change(function(e){
OverrideRefpointValue("cor_PosY_mul", parseFloat($(this).val()), false);
});
$("#fiddling_zoom").change(function(e){
OverrideRefpointValue("Zoom", parseInt($(this).val()), false);
});
$("#fiddling_mapinitlat").change(function(e){
OverrideRefpointValue("MapInitLat", parseFloat($(this).val()), false);
});
$("#fiddling_mapinitlong").change(function(e){
OverrideRefpointValue("MapInitLong", parseFloat($(this).val()), false);
});
// Recording button
$("#btn-start-rec-data").change(function() {
if ( !isRecEnabled){ PCARS_Rec.clearDataSet()};
isRecEnabled = !isRecEnabled; //switch between true/false
});
//changing loop positions
$("#loop_start_pos").change(function() {
setParamDemoStartPos( $( this ).val(), false );
});
$("#loop_end_pos").change(function() {
setParamDemoEndPos( $( this ).val(), false );
});
$( "#DRIVERCOLOR" ).change(function() {
$("#DRIVERCOLOR option:selected").each(function() {
var str1 = $( this ).val();
switch ( str1 ) {
case "hidedrivers":
CSSClsChg.HideAllSvg();
break;
case "unhidedrivers":
CSSClsChg.UnHideAllSvg();
break;
case "colortop3":
CSSClsChg.ColorTop3vehicles();
break;
case "colorsameclass":
CSSClsChg.ColorSameClass( aCurrentVehicleClasses );
break;
case "colorsamename":
CSSClsChg.ColorSameVName( aCurrentVehicleNames );
break;
case "deletecssclasses":
CSSClsChg.ClearAllCssClases();
break;
case "ishuman":
CSSClsChg.ColorHumanDrivers();
break;
case "isai":
CSSClsChg.ColorAiDrivers();
break;
// for all dynamic generated selections
default:
CSSClsChg.ColorDynClasses();
break;
}
});
}); // end #DRIVERCOLOR change Venet
$( "#DRIVERLABELSTYLE" ).change(function() {
$("#DRIVERLABELSTYLE option:selected").each(function() {
CSSClsChg.setDriverLabelStyle($( this ).val());
});
}); // end #DRIVERLABELSTYLE change Venet
// Event handler for Slider
$(function() {
$( "#slider-range-max" ).slider({
range: "max",
min: -1000,
max: 1000,
value: DisplayDurationCorrector,
step: 25,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
//set new value
DisplayDurationCorrector = ui.value;
}
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});
$(function() {
$( "#slider-workerdelay_dsdata" ).slider({
range: "max",
min: 0,
max: 1500,
value: WORKERDELAY_DSDATA,
step: 10,
slide: function( event, ui ) {
$( "#workerdelay_dsdata" ).val( ui.value );
//set new value
WORKERDELAY_DSDATA = ui.value;
}
});
$( "#workerdelay_dsdata" ).val( $( "#slider-workerdelay_dsdata" ).slider( "value" ) );
});
$(function() {
$( "#slider-filtered_driver_opacity" ).slider({
range: "max",
min: 0,
max: 1,
value: 0.3,
step: 0.1,
slide: function( event, ui ) {
//set new value to text box above slider
$( "#filtered_driver_opacity" ).val( ui.value );
//set new value to css class
CSSClsChg.setDriverLabelStyle('update_opacity_drivers', {opacity_driver: ui.value} );
}
});
// INFO: use fixed value instead of $('.CSS_OPACITY_DRIVER').css("opacity"), because css class is not initialized a appication start
$( "#filtered_driver_opacity" ).val( 0.3 );
//initial set a CSS class
CSSClsChg.setDriverLabelStyle('update_opacity_drivers', {opacity_driver: $( "#filtered_driver_opacity" ).val()} );
});
$(function() {
$( "#slider-trackmap_opacity" ).slider({
range: "max",
min: 0,
max: 1,
value: trackmap_opacity,
step: 0.1,
slide: function( event, ui ) {
$( "#trackmap_opacity" ).val( ui.value );
//set new value
trackmap_opacity = ui.value;
//check if there is a circuitID of a selected tracklisttable row. -1 means there is no. In this case the live circuit ID from the current APIMODE is used.
if(oPcarsMapCtrl.circuitID == -1){
oPcarsMapCtrl.circuitID = cuircitID;
}
oPcarsMapCtrl.changeMapSettings(aRefPointTMPAll[oPcarsMapCtrl.circuitID], oMap, oPcarsMapCtrl.circuitID); //Update Map
}
});
$( "#trackmap_opacity" ).val( $( "#slider-trackmap_opacity" ).slider( "value" ) );
});
$(function() {
$( "#slider-gui_update_interval" ).slider({
range: "max",
min: 1,
max: 10,
value: GuiUpdateIntervall,
step: 1,
slide: function( event, ui ) {
$( "#gui_update_interval" ).val( ui.value );
//set new value
GuiUpdateIntervall = ui.value;
}
});
$( "#gui_update_interval" ).val( $( "#slider-gui_update_interval" ).slider( "value" ) );
});
$(function() {
$( "#slider-replaybar" ).slider({
range: "max",
min: demo_start_pos,
max: demo_start_pos+1,
value: demo_start_pos,
step: 1,
start: function( event, ui ) {
slider_replaybar_sliding = true;
},
stop: function( event, ui ) {
$( "#replaybar_curpos_infobox" ).val( ui.value );
//set new values if needed
record_pos = ui.value;
slider_replaybar_sliding = false;
},
slide: function( event, ui ) {
$( "#replaybar_curpos_infobox" ).val( ui.value );
}
});
$( "#replaybar_curpos_infobox" ).val( demo_start_pos );
});
$(function() {
$( "#slider-refLat" ).slider({
range: "max",
min: -1000,
max: 1000,
value: 0,
step: 1,
slide: function( event, ui ) {
var slider_cor = ui.value/1000000; //slider values +/- 0-1000 changing 3rd-6th digit after decimal point
OverrideRefpointValue("refLat", slider_cor, true);
}
});
});
$(function() {
$( "#slider-refLong" ).slider({
range: "max",
min: -1000,
max: 1000,
value: 0,
step: 1,
slide: function( event, ui ) {
var slider_cor = ui.value/1000000; //slider values +/- 0-1000 changing 3rd-6th digit after decimal point
OverrideRefpointValue("refLong", slider_cor, true);
}
});
});