Skip to content

Commit e710271

Browse files
darksidelemmdarksidelemm
authored
Merge pull request projecthorus#67 from darksidelemm/main
Add embed preview page
2 parents fb1f954 + 860b369 commit e710271

File tree

1 file changed

+251
-0
lines changed

1 file changed

+251
-0
lines changed

‎embed-preview.html‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
2+
<html>
3+
<head>
4+
<title>Preview of embedded Sondehub-Amateur tracker</title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6+
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
7+
<style>
8+
html, body {
9+
border: 0;
10+
padding: 0;
11+
margin: 0;
12+
height: 100%;
13+
width: 100%;
14+
}
15+
fieldset {
16+
border:0;
17+
margin:0;
18+
padding:0;
19+
padding-left: 15px;
20+
}
21+
body {
22+
font-family: "Roboto", Helvetica, Arial, sans-serif;
23+
}
24+
25+
h1 {
26+
text-align: center;
27+
font-size: 24px;
28+
margin-top: 10px;
29+
margin-bottom: 20px;
30+
}
31+
32+
h2 {
33+
border-bottom: 1px solid #00A3D3;
34+
font-size: 18px;
35+
margin-bottom: 15px;
36+
margin-top: 15px;
37+
padding-left: 5px;
38+
}
39+
40+
41+
#box {
42+
width: 400px;
43+
position: absolute;
44+
left: 50%;
45+
margin-left: -250px;
46+
}
47+
48+
#iframe-box {
49+
position: absolute;
50+
left: 50%;
51+
margin-left: -200px;
52+
}
53+
54+
iframe {
55+
margin-bottom: 50px;
56+
}
57+
58+
textarea {
59+
width: 100%;
60+
height: 100px;
61+
}
62+
</style>
63+
<script type="text/javascript" language="javascript" src="js/jquery-1.12.4-min.js"></script>
64+
<script>
65+
66+
var updateCode = function() {
67+
var prefix = window.location.href.replace("embed-preview.html","");
68+
var code = $("#iframe-box").html().trim().replace("index.html?",prefix+"index.html?");
69+
70+
var params = "embed=1";
71+
72+
params += "&amp;hidelist=" + ($("#opt_list").prop("checked") ? 0 : 1);
73+
params += "&amp;hidegraph=" + ($("#opt_graph").prop("checked") ? 0 : 1);
74+
params += "&amp;expandgraph=" + ($("#opt_graph_open").prop("checked") ? 1 : 0);
75+
params += "&amp;q=" + encodeURIComponent($("#opt_filter").val());
76+
77+
code = code.replace("&amp;preview=1", params);
78+
79+
$("textarea").html(code);
80+
81+
// center followed vehicle
82+
var p = $("iframe").contents()[0].defaultView;
83+
if('panTo' in p) setTimeout( function() { p.panTo(p.follow_vehicle); }, 300);
84+
}
85+
86+
87+
$(window).ready(function() {
88+
// init/reset values (incase browsers try to remember any)
89+
$("#opt_border,#opt_corners,#opt_list,#opt_graph").prop("checked",true);
90+
$("#opt_graph_open").prop("checked", false);
91+
92+
$("#opt_w").val(400);
93+
$("#opt_h").val(500);
94+
95+
// preview update methods
96+
97+
// filter
98+
$("#opt_filter").on('keyup', function() {
99+
updateCode();
100+
});
101+
102+
// vehicle list
103+
$("#opt_list").on('change', function() {
104+
var elm = $("#opt_list");
105+
var p = $("iframe").contents()[0].defaultView;
106+
107+
if(elm.prop("checked")) {
108+
p.wvar.vlist = true;
109+
elm.prop("checked", true);
110+
} else {
111+
p.wvar.vlist = false;
112+
elm.prop("checked", false);
113+
}
114+
115+
p.checkSize();
116+
updateCode();
117+
});
118+
119+
// telemetry graph
120+
$("#opt_graph").on('change', function() {
121+
var elm = $("#opt_graph");
122+
var p = $($("iframe").contents()[0]);
123+
var box = p.find("#telemetry_graph");
124+
125+
if(elm.prop("checked")) {
126+
box.show();
127+
if($("#opt_graph_open").prop("checked")) p.find("#telemetry_graph .graph_label").click();
128+
elm.prop("checked", true);
129+
} else {
130+
if(box.find(".graph_label").hasClass("active")) p.find("#telemetry_graph .graph_label").click();
131+
box.hide();
132+
elm.prop("checked", false);
133+
}
134+
135+
updateCode();
136+
});
137+
138+
$("#opt_graph_open").on('change', function() {
139+
if(!$("#opt_graph").prop('checked')) return;
140+
141+
var elm = $("#opt_graph_open");
142+
var p = $($("iframe").contents()[0]);
143+
var box = p.find("#telemetry_graph");
144+
145+
if(elm.prop("checked")) {
146+
if(!box.find(".graph_label").hasClass("active")) p.find("#telemetry_graph .graph_label").click();
147+
elm.prop("checked", true);
148+
} else {
149+
if(box.find(".graph_label").hasClass("active")) p.find("#telemetry_graph .graph_label").click();
150+
elm.prop("checked", false);
151+
}
152+
153+
updateCode();
154+
});
155+
156+
// style options
157+
$("#opt_border").on('change', function() {
158+
var elm = $("#opt_border");
159+
160+
if(elm.prop("checked")) {
161+
$("iframe").css({"border":"1px solid #00A3D3"});
162+
elm.prop("checked", true);
163+
} else {
164+
$("iframe").css({"border":0});
165+
elm.prop("checked", false);
166+
}
167+
168+
updateCode();
169+
});
170+
$("#opt_corners").on('change', function() {
171+
var elm = $("#opt_corners");
172+
173+
if(elm.prop("checked")) {
174+
$("iframe").css({"border-radius":"20px"});
175+
elm.prop("checked", true);
176+
} else {
177+
$("iframe").css({"border-radius":0});
178+
elm.prop("checked", false);
179+
}
180+
181+
updateCode();
182+
});
183+
184+
// update size as we type
185+
$("#opt_h").on('keyup', function() {
186+
var elm = $(this);
187+
var v = elm.val();
188+
189+
$("iframe").prop("height", v);
190+
updateCode();
191+
});
192+
$("#opt_w").on('keyup', function() {
193+
var elm = $(this);
194+
var v = elm.val();
195+
196+
$("iframe").prop("width", v);
197+
$("#iframe-box").css({"margin-left":"-"+(v/2)});
198+
199+
updateCode();
200+
});
201+
202+
// autoselect all text on focusing textarea
203+
204+
$("textarea").on("click", function() {
205+
this.select();
206+
});
207+
208+
// init complete, refresh the text box
209+
updateCode();
210+
});
211+
</script>
212+
</head>
213+
<body>
214+
<div id="box">
215+
<h1>Embed SondeHub-Amateur tracker on your page</h1>
216+
<h2>1. Options</h1>
217+
<fieldset>
218+
<label for="opt_filter">Vehicle filter (;)</label>
219+
<input type="input" value="" id="opt_filter" size="40" />
220+
<br />
221+
<input type="checkbox" value="1" id="opt_list" />
222+
<label for="opt_list">Enable vehicle list</label>
223+
<br />
224+
<input type="checkbox" value="1" id="opt_graph" />
225+
<label for="opt_graph">Enable telemetry graph</label>
226+
<br />
227+
<input type="checkbox" value="1" id="opt_graph_open" />
228+
<label for="opt_graph_open">Start telemetry graph expanded</label>
229+
</fieldset>
230+
<h2>2. Style</h1>
231+
<fieldset>
232+
<label for="opt_w">Width:</label>
233+
<input type="text" value="400" id="opt_w" />
234+
<input type="checkbox" value="1" id="opt_border" checked="checked" />
235+
<label for="opt_border">Border</label>
236+
<br />
237+
<label for="opt_h">Height:</label>
238+
<input type="text" value="500" id="opt_h" />
239+
<input type="checkbox" value="1" id="opt_corners" checked="checked" />
240+
<label for="opt_corners">Rounded corners</label>
241+
</fieldset>
242+
<h2>3. HTML code</h1>
243+
<textarea id="embed-code" autocomplete="off" readonly="readonly"></textarea>
244+
245+
<h2>4. Live preview</h1>
246+
<div id="iframe-box">
247+
<iframe width="400px" height="500px" src="index.html?&preview=1" style="border:1px solid #00A3D3;border-radius:20px;"></iframe>
248+
</div>
249+
</div>
250+
</body>
251+
</html>

0 commit comments

Comments
 (0)