-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1498 lines (1422 loc) · 83 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>
<head>
<title>Gamepad Viewer</title>
<link rel="icon" type="image/png" href="static/favicon.png"/>
<link rel="stylesheet" type="text/css" href="static/reset.css"/>
<link rel="stylesheet" type="text/css" href="static/style-local.css"/>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="static/queue.js"></script>
<script type="text/javascript" src="static/gamepad.js"></script>
<script type="text/javascript" src="static/tester.js"></script>
<!--<script type="text/javascript" src="msgpack.min.js"></script>-->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> -->
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- <script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.5/dist/clipboard.min.js"></script> -->
<script src="https://cdn.bootcss.com/clipboard.js/1.5.5/clipboard.min.js"></script>
<!-- <script src='https://www.google.com/recaptcha/api.js'></script> -->
<script src='https://recaptcha.net/recaptcha/api.js'></script>
<script type="text/javascript" src="static/form.js"></script>
<style type="text/css" id="custom-css"></style>
<meta property="og:title" content="Gamepad Viewer"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://gamepadviewer.com"/>
<meta property="og:image" content="http://gamepadviewer.com/favicon.png"/>
<meta property="og:image:secure_url" content="https://gamepadviewer.com/favicon.png"/>
<meta property="og:image:type" content="image/png"/>
<meta property="og:image:width" content="128"/>
<meta property="og:image:height" content="128"/>
<meta property="og:description" content="A web-based gamepad display for representing visual gamepad input in streams or recordings, along with a plethora of customizable settings."/>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@mrmcpowned">
<meta name="twitter:creator" content="@mrmcpowned">
<meta name="twitter:image" content="https://gamepadviewer.com/twittercard.png">
</head>
<body>
<div class="navbar ty hide-me" id="thanks">
<div class="content">
<span>Thank you so much for donating! You're awesome!</span>
</div>
</div>
<div class="navbar update message hide-me">
<div class="content">
<span>New in this version: <a href="https://obsproject.com/forum/resources/gamepad-display.3/update?update=557">custom
CSS skinning!</a></span>
</div>
</div>
<div class="navbar hide-me">
<div class="content">
<div class="left">
<a href="#menu">
<i class="material-icons menu-button">menu</i>
</a>
</div>
<div class="center pselect">
<div class="left">
<span>Currently Viewing: </span>
<select class="player">
<option>None</option>
<option value="gamepad-0">Player 1</option>
<option value="gamepad-1">Player 2</option>
<option value="gamepad-2">Player 3</option>
<option value="gamepad-3">Player 4</option>
</select>
</div>
<ul class="left skins">
<select class="console" id="cselect">
<option value="xbox">Xbox One</option>
<option value="xbox white">Xbox One (White)</option>
<option value="xbox-old">Xbox 360</option>
<option value="ps">PlayStation 3</option>
<option value="ps white">PlayStation 3 (White)</option>
<option value="ds4">PlayStation 4</option>
<option value="ds4 white">PlayStation 4 (White)</option>
<option value="gc">GameCube</option>
<option value="fpp">FightPad Pro</option>
<option value="fight-stick">Fight Stick</option>
<option value="nes">NES</option>
</select>
</ul>
<a href="#" id="color-picker" class="left"><i class="material-icons">color_lens</i></a>
<input type="color" id="color-picker-input" value="#8B4513">
</div>
<div class="right">
<a href="#donate" class="button">Donate</a>
<a href="https://discord.gg/0SdzYaRROBqfdd0v" target="_blank" style="background: mediumpurple; color: white; border: 1px solid whitesmoke" class="button">Discord</a>
</div>
</div>
</div>
<div class="navbar nocon hide-me">
<div class="content">
<div class="left">
<ul>
<li class="box alert">
<span><i class="fa fa-exclamation-circle"></i></span>
</li>
</ul>
<span>There are currently no gamepads connected. Press any button to enable...</span>
</div>
<span class="clear"></span>
</div>
</div>
<div class="slideout-menu hide-me" id="menu">
<a class="bglink" href="#">
<div class="modal-bg"></div>
</a>
<div class="menu">
<h1><i class="material-icons">videogame_asset</i> Gamepad Viewer</h1>
<div class="yt-contain">
<!-- <iframe src="https://www.youtube.com/embed/_jdupqY9oxM" frameborder="0" allowfullscreen=""></iframe> -->
<!--<iframe src="https://player.twitch.tv/?channel=upefiu&muted=true" frameborder="0" scrolling="no"></iframe>-->
</div>
<ul>
<li><a href="#about"><i class="material-icons">info_outline</i><span>Info</span></a>
</li>
<li><a href="#faq"><i class="material-icons">help_outline</i><span>FAQ</span></a>
</li>
<li><a href="#docs"><i class="material-icons">insert_drive_file</i><span>Docs</span></a>
</li>
<li><a href="#log"><i class="material-icons">new_releases</i><span>Changelog</span></a>
</li>
<li><a href="#generate"><i class="material-icons">link</i><span>Generate URL</span></a>
</li>
<li><a href="#remap"><i class="material-icons">gamepad</i><span>Remap Buttons</span></a>
</li>
<!-- <li><a href="#showcase"><i class="material-icons">style</i><span>Skin Showcase</span></a>
</li>-->
<li><a href="#adoptaskin"><i class="material-icons">loyalty</i><span>Adopt a Skin</span></a>
</li>
<li><a href="#contact"><i class="material-icons">contact_mail</i><span>Contact</span></a>
</li>
<li><a href="#donate"><i class="material-icons">stars</i><span>Donate</span></a>
</li>
<li class="divider">
</li>
<li><a href="https://discord.gg/0SdzYaRROBqfdd0v" target="_blank"><i
class="material-icons">chat</i><span>Discord Server</span></a>
</li>
<li><a href="https://trello.com/b/aSUJ68Km/gamepad-viewer-roadmap" target="_blank"><i
class="material-icons">view_carousel</i><span>Trello Board</span></a>
</li>
<li><a href="https://twitch.tv/mrmcpowned" target="_blank"><i
class="material-icons">live_tv</i><span>Twitch</span></a>
</li>
<li><a href="https://youtube.com/mrmcpowned" target="_blank"><i
class="material-icons">subscriptions</i><span>YouTube Channel</span></a>
</li>
<li><a href="https://obsproject.com/forum/threads/gamepad-display.12508" target="_blank"><i
class="material-icons">forum</i><span>OBS Forums</span></a>
</li>
</ul>
</div>
</div>
<div id="modals" class="hide-me">
<div id="modal-template" class="modal-container">
<a class="bglink" href="#">
<div class="modal-bg"></div>
</a>
<div class="modal">
<header class="minimenu">
<!--Nuke everything in here when copying-->
<ul>
<li><a href="#about">Info</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#docs">Docs</a></li>
<li><a href="#log">Changelog</a></li>
<li><a href="#generate">Generate URL</a></li>
<li><a href="#remap">Remap Buttons</a></li>
<!--<li><a href="#showcase">Skin Showcase</a></li>-->
<li><a href="#adoptaskin">Adopt a Skin</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#donate">Donate</a></li>
</ul>
</header>
<header>
<a class="close" href="#">×</a>
<h1>Parameters List</h1>
</header>
<article>
<p>Ayyy</p>
</article>
</div>
</div>
<div id="about" class="modal-container">
<a class="bglink" href="#">
<div class="modal-bg"></div>
</a>
<div class="modal">
<header class="minimenu">
</header>
<header>
<a class="close" href="#">×</a>
<h1>Info & About</h1>
</header>
<article>
<h2>About this tool</h2>
<div class="video">
<div class="yt-contain">
<!-- <iframe src="https://www.youtube.com/embed/XZLBh5yul6I" frameborder="0"
allowfullscreen=""></iframe> -->
</div>
</div>
<p>I started out making this tool because I found that all the alternatives to display gamepad input
were too much of a hassle to set up or simply weren't customizable enough to my liking. After a
while, I realized that other people could benefit from the tool I made, and ever since I've been
updating and extending the original features. I started out with only the Xbox 360 skin and since
then I've added several skins, the ability to create custom skins, scaling, input delay and many
more features.
</p>
<p>Thankfully, this is all possible due to <a href="http://aresluna.org"
target="_blank">Marcin Wichary's</a> <a
href="https://github.com/html5rocks/www.html5rocks.com/blob/master/content/tutorials/doodles/gamepad/static/gamepad-tester/gamepad.js"
target="_blank">Gamepad.js</a> and <a
href="https://github.com/html5rocks/www.html5rocks.com/blob/master/content/tutorials/doodles/gamepad/static/gamepad-tester/tester.js"
target="_blank">Tester.js</a> libraries, which I've modified for my own purposes.
</p>
<div class="info">
<div>
<h2>Chroma Key Installation</h2>
<ol>
<li>Create new window capture source</li>
<li>Select the window with the gamepad viewer</li>
<li>Enable "Color Key"</li>
<li>Next to "Color" click the "Select" button and use the eyedropper tool to select the
brown background on the page
</li>
<li>Set the "Similarity" and "Blend" to your desired values</li>
<li>Enable "Sub-Region"</li>
<li>Click on "Select Region" and shrink the region box to the desired size</li>
<li>Click "OK" and you're done!</li>
</ol>
</div>
<div>
<h2>CLR Browser Installation</h2>
<ol>
<li>Head to the <a href="#generate">URL Generator</a> to create your own gamepad URL</li>
<li>Click on the generated preview URL to copy it</li>
<li>In OBS, create a new CLR Browser source</li>
<li>Paste the copied URL in the "URL" text box in the browser source</li>
<li>The width and height will require playing around with inorder to get the right values,
so simply work your way up or down from the default values the source already has set
</li>
<li>Click "OK" and you're done!</li>
</ol>
</div>
<span class="clear"></span>
</div>
</article>
</div>
</div>
<div id="faq" class="modal-container">
<a class="bglink" href="#">
<div class="modal-bg"></div>
</a>
<div class="modal">
<header class="minimenu">
</header>
<header>
<a class="close" href="#">×</a>
<h1>Frequently Asked Questions</h1>
</header>
<article>
<section>
<h2>What exactly is this?</h2>
<p>This is a web-based tool used for representing gamepad input visually. You basically get to see
what you're doing with your gamepad on screen. Usually, people would use a tool like this for
showing their controller input on screen for a stream or recorded video.</p>
</section>
<!--
<section>
<h2>Cool. So, how do I actually use this?</h2>
<p>First you need to make sure your gamepad is connected. Pressing one of the face buttons after
connecting, like A or ×, will work. If you did it all correctly, the error
message should have disappeared and you should be able to select the player and skin. Now, if
you're still getting a "Disconnected" error, usually refreshing the page will fix that. With
that, simply <strong>clicking on the dropdown</strong> that says "None" will give you the option
to select a player. If the player disconnected, you'll see a red silhouette of the controller
with the words "Disconnected", else you should see the gamepad inputs displayed when you press
them on the controller. The other dropdown next to that one lets you <strong>switch
skins</strong>. Switching skins is as easy as clicking the icon (which is by default an Xbox
logo for the Xbox One controller) and selecting the preferred skin by name.</p>
</section>
-->
<section>
<h2>How do I set this up to record/stream?</h2>
<p>Just follow the steps on the <a href="#about">Info page</a> and you should be ready to go in no
time.</p>
</section>
<section>
<h2>How do I make a custom skin?</h2>
<p>Well, you need to have some basic knowledge of CSS and how it works to make one from scratch, but
I have an <a href="https://gist.github.com/mrmcpowned/31eddbc3f8344ee69799">example file</a>
which can help you. be sure to check up on it every once in a while though as I do make changes
to in to coincide with updates on the site.</p>
</section>
<section>
<h2>Can I edit the skins instead of just making a custom one?</h2>
<p>Yes! You can use the <code class="codeblock">editcss=</code> URL parameter to point to a properly
formatted CSS file which will edit the currently selected skin. Here's a small <a
href="https://gist.github.com/mrmcpowned/a787fc4f5307b7c008fb">example edit file</a>
just to show what can be done.</p>
</section>
</article>
</div>
</div>
<div id="docs" class="modal-container">
<a class="bglink" href="#">
<div class="modal-bg"></div>
</a>
<div class="modal">
<header class="minimenu">
</header>
<header>
<a class="close" href="#">×</a>
<h1>Parameter Documentation</h1>
</header>
<article>
<p>This section contains documentation of each URL parameter. If you'd like to generate your own custom
URL, please visit
<a href="#generate">this page</a>.</p>
<section class="definition">
<h2 data-param="p=">Player Number</h2>
<div class="codeblock">https://gamepadviewer.com/?p=1</div>
<ul>
<li>N/A</li>
<li>1</li>
<li>1,2,3,4</li>
<li>Setting this parameter initiates "Compact Mode", which removes the background and UI
elements so only the controller is
displayed
</li>
</ul>
<p>The player number parameter is the main method of selecting which connected controller to view in
Compact Mode.</p>
</section>
<section class="definition">
<h2 data-param="s=">Skin ID</h2>
<div class="codeblock">https://gamepadviewer.com/?s=1</div>
<ul>
<li>N/A</li>
<li>1</li>
<li>0,1,2,3,4,5</li>
<li>Setting the ID to anything other than the values above defaults the skin to '1', which is
the "Xbox One" skin
</li>
<li>Setting a player number (<code class="codeblock">p=</code>) is <strong>required</strong> if
you plan
on using the skin ID parameter
</li>
</ul>
<p>Setting a skin ID is the only way to choose what gamepad it is you'd like to display in Compact
Mode. If you'd like to use a custom skin, you'll need to read about the <code class="codeblock">css=</code>
parameter below.</p>
</section>
<section class="definition">
<h2 data-param="smeter=">Strength Meter</h2>
<div class="codeblock">https://gamepadviewer.com/?smeter=1</div>
<ul>
<li>N/A</li>
<li>0</li>
<li>0,1</li>
<li>Any value other than '1' disables this setting</li>
</ul>
<p>When this setting is enabled, the visual representation for the triggers will be strength meters
instead of opacity levels.</p>
</section>
<section class="definition">
<h2 data-param="sc=">Scale Multiplier</h2>
<div class="codeblock">https://gamepadviewer.com/?sc=1.2</div>
<ul>
<li>N/A</li>
<li>1</li>
<li>Any number, including decimal values</li>
<li>Negative values simply flip the skin, while also scaling it negatively</li>
</ul>
<p>Enabling this setting allows you to scale the gamepad's size using either integer or decimal
values.</p>
</section>
<section class="definition">
<h2 data-param="dz=">Deadzone Radius</h2>
<div class="codeblock">https://gamepadviewer.com/?dz=0.3</div>
<ul>
<li>N/A</li>
<li>.25</li>
<li>Any number from 0 to 1, including decimal values</li>
<li>Setting this to 1 or anything greater basically disables the sticks' movement</li>
</ul>
<p>This setting is ideal if you have an old gamepad that's experiencing stick drifting, or simply
don't want every tiny movement made with the gamepad to be displayed.</p>
</section>
<section class="definition">
<h2 data-param="delay=">Input Delay</h2>
<div class="codeblock">https://gamepadviewer.com/?delay=2000</div>
<ul>
<li>Milliseconds</li>
<li>0</li>
<li>Any positive number</li>
</ul>
<p>If you capture gameplay from a PS4 and have your controller connected to both the computer and
console, this setting is for you. Simply enter the stream delay from the console to your PC in
milliseconds and your inputs will be synced, instead of ahead.</p>
</section>
<section class="definition">
<h2 data-param="rot=">Rotational Stop</h2>
<div class="codeblock">https://gamepadviewer.com/?rot=450</div>
<ul>
<li>Degrees</li>
<li>120</li>
<li>Any positive number</li>
<li>This number is half the total rotational stop of the wheel. E.g. A wheel with a 900deg max
rotation will have a 450deg rotation stop.
</li>
<li>Deadzone values <strong>WILL</strong> affect this setting. Setting <code class="codeblock">dz=0</code>
is recommended.
</li>
</ul>
<p>This setting is meant mainly for having the thumbsticks represent wheels, with the option to set
their max degree of rotation.</p>
</section>
<section class="definition">
<h2 data-param="css=">Custom CSS URL</h2>
<div class="codeblock">
https://gamepadviewer.com/?css=https://gist.githubusercontent.com/mrmcpowned/d61ff0d8d0c57cc207d8/raw/minimal%2520xbox.css
</div>
<ul>
<li>N/A</li>
<li>None</li>
<li>Any URL pointing to a properly formatted CSS file</li>
<li>This parameter disables the <code class="codeblock">id=</code> parameter</li>
<li>Whatever the selected skin's CSS class is is replaced with the <code class="codeblock">.custom</code>
class
</li>
</ul>
<p>Using this parameter allows you to completely change the design of the Gamepad Viewer into one of
your own or one somebody has shared.</p>
</section>
<section class="definition">
<h2 data-param="editcss=">Edit CSS URL</h2>
<div class="codeblock">
https://gamepadviewer.com/?editcss=https://gist.githubusercontent.com/mrmcpowned/a787fc4f5307b7c008fb/raw/edit%2520example.css
</div>
<ul>
<li>N/A</li>
<li>None</li>
<li>Any URL pointing to a properly formatted CSS file</li>
<li>The <code class="codeblock">.edit</code> class is applied to all gamepads</li>
</ul>
<p>Similar to the <code class="codeblock">css=</code> parameter, you can edit the currently selected
skin's css instead of making a completely new skin.</p>
</section>
</article>
</div>
</div>
<div id="log" class="modal-container">
<a class="bglink" href="#">
<div class="modal-bg"></div>
</a>
<div class="modal">
<header class="minimenu">
</header>
<header>
<a class="close" href="#">×</a>
<h1>Changelog</h1>
</header>
<article class="changelog">
<div class="log">
<h3>Version 0.7.0 - March 8, 2017</h3>
<ul>
<li><b>New Skin</b>: There's a sorta-new skin in the available list: The white PS3 controller.
Edits are courtesy of <a href="https://www.twitch.tv/million_lights">Million Lights</a></li>
<li><b>OBS Studio & Issues</b>: A recent update to OBS Studio has updated the browser source,
and in doing so has partially broken the Gamepad Viewer. A workaround exists so you can
continue using the Gamepad Viewer until I can find out where it is exactly the bug that's
causing this issue is, and fix it (but that will most likely take some time, cause school).
The steps to fix are as follows:
<code>
1. Double click the Browser Source which has your Gamepad Viewer custom URL
2. Scroll down and click "Clear Cache"
3. Click "Cancel", not "OK" and not the "X" button at the top right
4. Make DOUBLE sure you click "Cancel" else you'll have to repeat steps 2 and 3.
</code>
</li>
<li><b>I'm not dead</b>: I'm still alive, even though school has me beaten down. I still answer
emails though, so if you have any issues just send one of those, or if you're more of a cool
kid like me, join me in my <a href="https://discord.gg/0SdzYaRROBqfdd0v">Discord server</a>.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.7.0 - August 17, 2016</h3>
<ul>
<li><b>Patreon</b>: Yup, <a href="https://www.patreon.com/mrmcpowned" target="_blank"
class="externalLink" rel="nofollow">this thing's on Patreon</a>. If
you know someone who'd be willing to support, feel free to point 'em in the right direction.
</li>
<li><b>New Skin</b>: The long-awaited and much-requested GameCube skin is finally out! Sorry I
kinda took too long with this one, it's just that I wanted to get some stuff together and
ship this with some other things that needed to be done, as follows...
</li>
<li><b>GameCube controller Fix</b>: So, if you own a GameCube controller and MayFlash adapter,
you'd get some really weird values for the triggers and sticks, even if you tried remapping.
Now, there's new remapping setting which can help you solve that! Just watch <a
href="https://www.youtube.com/watch?v=_jdupqY9oxM" target="_blank"
class="externalLink" rel="nofollow">the update video</a> to find out how to do just
that!
</li>
<li><b>Remapping Axis/Button exclusion</b>: Another small but useful update to button remapping
is the ability to disable a button or axes' ability to be selected when remapping inputs.
This is typically useful for when you have an out of control axis that changes values
rapidly and don't want it interfering with remapping. To cancel an input's mapping ability,
simply right click it's blue box on the mapping page after a player is selected. To
re-enable the input, simply right click the red box.
</li>
<li><b>DPAD POV Mapping</b>: Another common issue was that of DPADs that show up as a single
axis input, or a <a href="https://en.wikipedia.org/wiki/Joystick#Hat_switch" target="_blank"
class="externalLink" rel="nofollow">Point-Of-View Hat Switch</a>. With
the new "DPAD" remapping option, just select the DPAD's axis, fill in the requested values,
and the DPAD should be fixed!
</li>
<li><b>Remapping feedback</b>: When I was asking someone to test the new remapping options, i
found that they had a hard time of telling if something worked or if it failed. To fix that,
should a mapping failed, you'll see a persistent error message in red above the appropriate
mapping, and if it succeeds, a green success message which fades away.
</li>
<li><b>Remapping UI Populated via URL</b>: Before when you would access exported remapping
settings via URL, you couldn't edit them or customize them. Now, when accessing the exported
mappings via URL, the remapping page will populate with the appropriate settings.
</li>
<li><b>Input hints in Generate Page</b>: Now, before entering information into the text boxes
you see input hints. Hopefully this helps with people who are unsure of what to place in
those inputs.
</li>
<li><b>New Generate Page options</b>: You can now disable stick curving and change the stick
offset as well.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.6.2 - April 27, 2016</h3>
<ul>
<li><strong>New Digs</strong>: Now sure if you've noticed, but the URL doesn't say <strong>http://mrmcpowned.com/gamepad</strong>
anymore! Yup, the site's on it's own special domain:
<a href="https://gamepadviewer.com/">https://gamepadviewer.com/</a> Don't worry about the
old links either, they'll redirect here properly from the old address.
</li>
<li><strong>Discord</strong>: I've got a <a href="https://discord.gg/0SdzYaRROBqfdd0v">Discord
Server</a> setup for anyone who feels the need to chat or prefers help in a slightly faster
manner. I'm usually on, although that doesn't mean not busy working either :P
</li>
<li><strong>Problems? Questions? Concerns?</strong>: If anything's broken, or if you need help,
or just wanna say hi, you can always contact me using the <a href="#contact">contact
form</a> or by visiting the discord server linked above.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.6.1 - April 23, 2016</h3>
<ul>
<li><strong>Mapping Bugfix</strong>: Apparently mapping values for buttons that don't exist
(like
trying to show a touchpad or PS Button press) was broken before, but now it's not!
</li>
<li><strong>Swanky New Skin</strong>: Thanks to an anonymous benefactor, there's a new white DS4
skin, and it looks <em>sweeeeet</em>.
</li>
<li><strong>DS4 Changes</strong>: The DS4's touchpad press is now represented (though not the
touches on the touchpad, as I have no way of figuring out that information from the Gamepad
API), as well as the PS button. Also, the sticks are inverted now when pressed, and I have
no idea why I didn't set them to do that before. Enjoy!
</li>
<li><strong>Not much else</strong>: Yeah, not much else to this update. I've mostly been working
on a site redesign for a podcast, so that's been my main focus so far in terms of work. Once
I'm done with that, I'll probably get to work on this and go through the tasks I have listed
on the trello.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.6.0 - March 20, 2016</h3>
<ul>
<li><strong>Getting Started</strong>: There's a <a href="https://youtu.be/XZLBh5yul6I">getting
started video</a> on YouTube for anyone who's unsure about how to set up the tool, or for
those who are curious and don't have a gamepad to test! It's also on the <a href="#about">Info
& About</a> page too for easy access.
</li>
<li><strong>Pretty Colors</strong>: You can now change the color of the background with a
click of a button! Just click the palette icon after you've connected your controller and
<em>voila</em>, you're instantly a background <em>artiste</em>.
</li>
<li><strong>Gamepad Cartesian</strong>: Controller button remapping is
<strong><em>finally</em></strong> here! It's got a <em>swanky</em> <a href="#remap">new
modal</a>, some very intuitive functionality, and even the ability to export mappings to
the URL generator. Yay! If you're a little lost on how to use it, simply choose a connected
player, add a mapping, select whether you're mapping an axis or button and select the
appropriate choice from the dropdown, click the button to set an axis/button to be mapped to
(at this point you have a three second window to press the desired button on the
controller), and when you're finished that process with all applicable mappings, just click
"Apply Mappings" or export them for use with Compact Mode. <strong>Author's Note</strong> -
Yeah, it's a tad complicated, but I'll be making a video soon on how to set mappings up
easily. <a href="http://chrisr.xyz/s/2016-03-14_17-20-17.mp4">Here's a sort of mini tutorial
on how to do it</a>. Also, the Touchpad and PS buttons work, it's just that none of the
skins have anything set up for them when they're pressed.
</li>
<li><strong>New Skins</strong>: Finally, I've included a generic Fight Stick skin setup for
use. The background's transparent so you can use your favorite image as your own background
:D
</li>
<li><strong>White wash</strong>: Decided to have the top row of icons all be white to follow
some sort of consistency.
</li>
<li><strong>Ah, the [Scale]ne Triangle</strong>: So, I kinda might have broken scaling during
the last update. Luckily, I caught it quick and fixed it a couple days after I pushed the
last major update, but I thought you should know anyway.
</li>
<li><strong>Generated Choice</strong>: Now if you generate a URL, the tooltip mentions you
can hold shift and it'll copy the link starting with HTTP instead of HTTPS, which leads me
to...
</li>
<li><strong>A word on HTTPS and skins</strong>: Ok, so during the last major update, I
decided it would be great to force HTTPS. I mean, why not, right? Then I realized people
load skins insecurely from their own sites, to which I hurriedly changed the setting. So, if
your stylesheet or any assets are loaded via HTTP, access the site from HTTP, else use
HTTPS.
</li>
<li><strong>To <code>name</code>, or not to <code>name</code></strong>: Another sort of
unimportant-but-still-interesting-I-kinda-suppose-maybe updates was changing the attribute
used to select buttons and axes from <code>name</code> to <code>data-name</code> which has
it fall more inline with HTML5's semantics. Riveting stuff, I know.
</li>
<li><strong>Addendum on Remapping</strong>: It should be noted that you can't half remap an
axis, like say you only want to map the positive or only the negative end. If you try to do
that, the mapping is just straight up ignored.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.5.1 - February 18, 2016</h3>
<ul>
<li><strong>FightPad Pro Skin</strong>: Not much of an overall update, but an update
nonetheless! Many a thanks to
<a href="https://twitch.tv/kingradinov" target="_blank">King Radinov</a> for being the first
skin adopter! If you'd like to show the right stick instead of the left stick, you can use
<a href="https://gist.githubusercontent.com/mrmcpowned/511679c83346beed889d/raw/2a1c08d3c3321f59e33d460b365f6ec489e63d1d/rightstick.css"
target="_blank">this edit CSS</a> as well.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.5.0 - February 1, 2016</h3>
<ul>
<li><strong>New Slide-in Menu</strong>: Who needs square buttons when you have a <em>whole
menu</em> to link to stuff. Stuff like...
</li>
<li><strong>Modals</strong>: All brand-spankin'-new content modals, for everything and anything
that needs text on it.
</li>
<li><strong>Contact Form</strong>: If you're lonely and want someone to talk to or want to find
out more info on the new...
</li>
<li><strong>Adopt a Skin Initiative</strong>: I don't think I could properly summarize what I
have written on the page, so <a href="#adoptaskin">here's a link to it instead</a>!
</li>
<li><strong>Edit CSS Parameter</strong>: Because sometimes you just want to <a target="_blank"
href="https://gamepadviewer.com/?editcss=https%3A%2F%2Fgist.githubusercontent.com%2Fmrmcpowned%2Fa787fc4f5307b7c008fb%2Fraw%2Fedit%252520example.css">make
all the colors look psychedelic</a>.
</li>
<li><strong>Edit Opacity Parameter</strong>: Sometimes you just want the controller to melt into
the background, forever hidden yet always seen.
</li>
<li><strong>Click to copy</strong>: Now you can simply *<strong>click</strong>* and easily copy
a generated URL. Speaking of which...
</li>
<li><strong>Generate custom URLs</strong>: Long gone are the cavemen times when man used to
place numbers into address bars. Behold, a new age of typing things into forms and clicking
to copy them dawns upon us!
</li>
<li><strong>Trigger meters</strong>: This a feature many of you have asked for, and one that
I've neglected for far too long. It's finally here though and it looks <em>sweeeeet</em>.
</li>
<li><strong>Better controller centering CSS</strong>: This one isn't a very large announcement,
since it only really affects custom skins but now centering them is done better and no
longer necessary on the custom skin's end of things!
</li>
<li><strong>X360 Quadrant Fixed</strong>: Another bugfix, but anyone who would see a black
square for the quadrant shouldn't be having that issue anymore.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.4.0 - November 18, 2015</h3>
<ul>
<li>Added a new skin, the DualShock 4! The trackpad can't show where your finger is, but pushing
down on the trackpad is registered (but not shown because I haven't implemented that yet).
</li>
<li>Added a new deadzone setting, just add &dz=[Any number from 0 to 1] to the URL! The default
is set to .25 and the accepted values are anything between 0 and 1 (although at 1 you
wouldn't have anything showing because the max the sticks go to is 1)
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.3.4 - November 8, 2015</h3>
<ul>
<li>Added a new skin, the DualShock 4! The trackpad can't show where your finger is, but pushing
down on the trackpad is registered (but not shown because I haven't implemented that yet).
</li>
<li>Added a new deadzone setting, just add &dz=[Any number from 0 to 1] to the URL! The default
is set to .25 and the accepted values are anything between 0 and 1 (although at 1 you
wouldn't have anything showing because the max the sticks go to is 1)
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.3.3 - October 25, 2015</h3>
<ul>
<li>Added queueing, with code provided by <a href="http://romibi.ch/">romibi</a>, so many a
thanks to him.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.3.2 - August 15, 2015</h3>
<ul>
<li>Added custom styles! Now, you too can make your own controller skin and share it with your
friends!
</li>
<li>To apply a custom skin, add &css=[url to CSS file] to the end of the address.</li>
<li>Added some HTML for future fighstick functionality.</li>
</ul>
</div>
<div class="log">
<h3>Version 0.3.1 - July 7, 2015</h3>
<ul>
<li>Added back the Xbox 360 skin, cause reasons</li>
<li>The new URL ID for the Xbox 360 skin is 4</li>
</ul>
</div>
<div class="log">
<h3>Version 0.3.0 - July 6, 2015</h3>
<ul>
<li>Hello darkness my old friend <sup>I've come to speak with you again...</sup></li>
<li>Finally updated the Xbox controller skin</li>
<li>Added a dark Xbox controller skin along with a white one</li>
<li>The new order of skins for the URL params is 0: White Xbox, 2: Dark Xbox, 3: PS Controller,
4: NES Controller
</li>
<li>New Xbox skin is the first to be saved in SVG format, allowing for infinite scalability.
Speaking of scaling..
</li>
<li>You can now scale controllers using &sc=[scale multiplier] in the URL! Do note, this
currently works best with the Xbox controller skins at the moment due to them being scalable
vectors. The other controllers will look pixelated at larger sizes, but I'm working on
moving them over to SVG a well :)
</li>
<li>Added links to my <a href="http://twitch.tv/MrMcPowned">Twitch</a>, <a
href="http://imraising.tv/u/mrmcpowned">ImRaising</a> and
<a href="http://youtube.com/MrMcPowned">YouTube</a> to the top bar.
</li>
<li>I believe in the honor system. If you'd like to donate to me for how much of a help this
tool I've made has been to you, I believe it's up to
<b><strong>you</strong></b> to decide how much you think this app is worth.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.2.2 - May 26, 2014</h3>
<ul>
<li>Added the NES skin for some retro-ey goodness.</li>
</ul>
</div>
<div class="log">
<h3>Version 0.2.1 - May 24, 2014</h3>
<ul>
<li>Now you can control the gamepad display via URL parameters. More on that <a
href="https://obsproject.com/forum/resources/gamepad-display.3/update?update=127">here</a>.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.2.1 - May 23, 2014</h3>
<ul>
<li>New PS3 Skin!</li>
<li>Along with this skin, a way to easily switch skins</li>
</ul>
</div>
<div class="log">
<h3>PSA - Jan 31, 2014</h3>
<ul>
<li>Just want to point out that if you don't see much development happening on this, it's not
because I've suddenly abandoned the project, but simply because school is my main priority;
I only have so much time to dedicate when I have to allot most of it towards my studies.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.1.8 - Jan 21, 2014</h3>
<ul>
<li>The analog sticks may look a little trippy now. Don't worry, that's perfectly normal.</li>
</ul>
</div>
<div class="log">
<h3>Version 0.1.7 - Jan 14, 2014</h3>
<ul>
<li>Bye, bye emoji. Hello, <a href="http://fontawesome.io/">Font Awesome</a>!</li>
<li>Made controller show a red silhouette with the word "Disconnected" when disconnected,
instead of showing a frozen controller display.
</li>
<li>Fixed "Changelog" from Chaneglog", because letters.</li>
</ul>
</div>
<div class="log">
<h3>Version 0.1.6 - Jan 4, 2014</h3>
<ul>
<li>Changed the <a href="static/favicon.png">favicon</a> to something a little more visually pleasing.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.1.5 - Jan 2, 2014</h3>
<ul>
<li>Added a link to the <a href="https://obsproject.com/forum/viewtopic.php?f=22&t=9977">Open
Broadcaster thread</a> for discussion and user suggestions.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.1.4 - Dec 31, 2013</h3>
<ul>
<li>Applied better deadzoning so the analog sticks won't snap to top edges. Should be a more of
a radial deadzone now.
</li>
<li>Title now says which player is selected, so you don't have to fumble around with figuring
out which window you want.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.1.3 - Dec 30, 2013</h3>
<ul>
<li>Changed the title from "Xbox Remote Control" to "Gamepad Viewer" for generic reasons</li>
<li>Moved the Viewer's location to <a href="https://mrmcpowned.com/gamepad">https://mrmcpowned.com/gamepad</a>
from <a href="https://mrmcpowned.com/xbrc">https://mrmcpowned.com/xbrc</a>. The old URL
redirects to the newer one.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.1.2 - Dec 29, 2013</h3>
<ul>
<li>Added a warning to the top of the help pane</li>
<li>Changed non-connected text to "There are currently no gamepads connected. Press any button
to enable..."
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.1.1 - Dec 28, 2013</h3>
<ul>
<li>Moved directional pad arrows to css for cleaner html. Will allow for easier skinning of the
gamepad in the future.
</li>
<li>Added a changelog</li>
<li>Added <a href="http://emojisymbols.com/">Emoji Symbols Font</a> for donation button. If you
like my work, and would like to "buy me a coffee", then simply click the coffee mug up top
<span class="emj">👍</span>.
</li>
</ul>
</div>
<div class="log">
<h3>Version 0.1 - Dec 26, 2013</h3>
<ul>
<li>Initial release</li>
</ul>
</div>
</article>
</div>
</div>
<div id="generate" class="modal-container">
<a class="bglink" href="#">
<div class="modal-bg"></div>
</a>
<div class="modal">
<header class="minimenu">
</header>
<header>
<a class="close" href="#">×</a>
<h1>Generate Custom URL</h1>
</header>
<article>
<div class="codeblock" id="generated-url" data-clipboard-text="" data-message="">
<span class="pre-url">https://gamepadviewer.com/?</span><span class="url"></span></div>
<div class="codeblock" id="url-generate-reset"><span>Reset</span></div>
<span class="clear"></span>
<form id="url-form">
<div class="form-group"><label for="p-input">Player Number: </label><select id="p-input" name="p">
<option value="">None (Meant for Chroma-Key users)</option>
<option selected value="1">Player 1</option>
<option value="2">Player 2</option>
<option value="3">Player 3</option>
<option value="4">Player 4</option>
</select><span class="clear"></span></div>
<div class="form-group"><label for="s-input">Skin: </label><select id="s-input" name="s">
<option value="">Choose a skin (Xbox One is Default)</option>
<option value="1">Xbox One</option>
<option value="0">Xbox One (White)</option>
<option value="4">Xbox 360</option>
<option value="2">PlayStation 3</option>
<option value="10">PlayStation 3 (White)</option>
<option value="5">PlayStation 4</option>
<option value="8">PlayStation 4 (White)</option>
<option value="9">GameCube</option>
<option value="6">FightPad Pro</option>
<option value="7">Fight Stick</option>
<option value="3">NES</option>
</select><span class="clear"></span></div>
<div class="form-group"><label for="smeter-input">Strength Meter: </label><input id="smeter-input"
type="checkbox"
name="smeter"
value="1"/><span
class="clear"></span></div>
<div class="form-group"><label for="nocurve-input">Stick Curving: </label><input
id="nocurve-input"
type="checkbox"
name="nocurve"
class="flipped"
value="1"/><span
class="clear"></span></div>
<div class="form-group"><label for="sc-input">Scale Modifier: </label><input id="sc-input"
type="text" name="sc"
placeholder="1 = Normal, 2 = 2x, .5 = Half, etc..."/><span
class="clear"></span></div>
<div class="form-group"><label for="dz-input">Deadzone Value: </label><input id="dz-input"
type="text" name="dz"
placeholder="Number from 0.0 to 1.0"/><span
class="clear"></span></div>
<div class="form-group"><label for="op-input">Opacity Value: </label><input id="op-input"
type="text"
name="op"
placeholder="Number from 0.0 to 1.0"/><span
class="clear"></span></div>
<div class="form-group"><label for="delay-input">Delay Value: </label><span
class="input-unit">ms</span><input id="delay-input"
type="text"
name="delay"
placeholder="1000 = 1 second"/><span
class="clear"></span></div>
<div class="form-group"><label for="rot-input">Rotation Stop: </label><span
class="input-unit">deg</span><input id="rot-input"
type="text"
name="rot"/><span