-
Notifications
You must be signed in to change notification settings - Fork 1
/
Index.html
113 lines (99 loc) · 6.01 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
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.6.2/jquery.contextMenu.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.6.2/jquery.ui.position.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.6.2/jquery.contextMenu.min.css">
<script type="text/javascript" src="lz-string.min.js"></script>
<script type="text/javascript" src="default.js"></script>
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div style="display:none" id="pageButtons">
<div id="previewModeButton" class="pageButton">Preview Mode</div>
<div id="pageSettingsButton" class="pageButton">Page Settings</div>
<div id="toggleSnapButton" class="pageButton" style="color: #00FF00;">Toggle Snap</div>
<div id="getTinyUrl" class="pageButton">Get Config Url</div>
<div id="profiles" class="pageButton">
<span>Profile:</span>
<div id="profile1">1</div>
<div id="profile2">2</div>
<div id="profile3">3</div>
</div>
<div id="connectionStatus" style="color: #FF0000" class="pageButton">
Not Connected
</div>
</div>
<div style="display:none" id="tinyUrlDiv">
This is your overlay, copy this URL and paste it into the Browser Source URL in OBS. It will not change.
<input type="text" id="urlText" style="width:400px" /><br />
<input type="button" id="copyUrl" value="Copy URL to Clipboard" /><br /><br />
Someone want your layout setup? Send them this:
<input type="text" id="tinyUrlText" style="width:400px" /><br />
<input type="button" id="copyTinyUrl" value="Copy Export URL to Clipboard" /><br />
</div>
<div style="display:none" id="containerSettingDialog">
<ul style="list-style-type:none">
<li><label for="scale">Scale:</label><input type="text" id="scale" /></li>
<li><label for="hideWhenMissing">Hide Icon When Missing:</label><input type="checkbox" id="hideWhenMissing" /></li>
<li><label for="flourish">Flourish:</label><select id="flourish">
<option value="none">None</option>
<option value="topLeft">Top Left</option>
<option value="topRight">Top Right</option>
</select></li>
<li><label for="growDirection">Grow From:</label><select id="growDirection">
<option value="Left">Left To Right</option>
<option value="Right">Right To Left</option>
</select></li>
</ul>
</div>
<div style="display:none" id="pageSettingsDialog">
<ul style="list-style-type:none">
<li><label for="pageWidth">Page Width:</label><input type="text" id="pageWidth" /></li>
<li><label for="pageHeight">Page Height:</label><input type="text" id="pageHeight" /></li>
</ul>
</div>
<div style="display:none" id="initialSettingsDialog">
<p>
Hey There! Looks like you've never setup the Hollow Knight OBS Overlay before (or this is the first time since the big 2.0 release of the overlay). To get started, lets set a few things up. If you're seeing this message in OBS, take the URL for this page and go over to Chrome/FireFox/IE and go through the setup. Once done you'll be given a new URL for OBS that contains your setup.
<br /> <br />
For Page Width and Height, this should be the size, in pixels, that you normally capture HK with in OBS. Common values are 1920x1080 & 1080x720.
<br /> <br />
Next you'll be given the ability to move stuff around the page. The green border signifies the area that you'll be displaying in OBS. Icons can be moved from container to container or reordered within the container. Icons moved into the Red/Disabled container will be hidden even if you pick them up.
<br /> <br />
For more information go to: <a href="https://github.com/iamwyza/HollowKnightRandomizerTracker">https://github.com/iamwyza/HollowKnightRandomizerTracker</a>
</p>
<ul style="list-style-type:none">
<li><label for="setupPageWidth">Page Width:</label><input type="text" id="setupPageWidth" value="1920" /></li>
<li><label for="setupPageHeight">Page Height:</label><input type="text" id="setupPageHeight" value="1080" /></li>
</ul>
</div>
<div style="display:none" id="miscSettingsDialog">
<ul style="list-style-type:none;">
<li><label for="miscEnabled">Enabled:</label><input type="checkbox" id="miscEnabled" /></li>
<li><label for="miscFontSize">Font Size:</label><input type="text" id="miscFontSize" /></li>
<li><label for="miscFontColor">Color:</label><input type="text" id="miscFontColor" /></li>
</ul>
</div>
<div style="display:none" id="importDialog">
<p>
Looks like you're loading in a config from the URL. This might be because you've just added the profile feature in Overlay 2.1. If so, just select profile 1.<br />
If you're importing a layout from another runner, but don't want to overwrite your current layout, pick a profile you haven't used before.
<select id="importProfileSelect">
<option value="1">Profile 1</option>
<option value="2">Profile 2</option>
<option value="3">Profile 3</option>
</select>
</p>
</div>
</body>
</html>