-
Notifications
You must be signed in to change notification settings - Fork 1
/
advancedViewer.html
130 lines (119 loc) · 3.44 KB
/
advancedViewer.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
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<title>3D Model Viewer/Recorder</title>
<link rel="stylesheet" type="text/css" href="https://create3000.github.io/code/x_ite/4.7.15/dist/x_ite.css"/>
<script type="text/javascript" src="https://create3000.github.io/code/x_ite/4.7.15/dist/x_ite.min.js"></script>
<script type="text/javascript">
// pull a parameter off url
function GetURLParameter(paramName){
var fs = window.location.search.substring(1).split('&');
for (var i = 0; i < fs.length; i++) {
var f = fs[i].split('=',2);
if (f[0] == paramName){
return f[1];
}
}
}
// insert a new X3DCanvas Element, inside the provided element, set its source from the page urls 'paramName' parameter and return the base of the url.
function insertX3DCanvasChild(elem,paramName){
var n = document.createElement("X3DCanvas")
var a = document.createAttribute("src")
a.value =GetURLParameter(paramName);
n.setAttributeNode(a);
elem.appendChild(n)
<!-- elem.focus()-->
return base(a.value)
}
// strip path
function base(url){
return decodeURI(url).split('/').pop()
}
</script>
<script type="text/javascript">
function record(ms){
var mr=new MediaRecorder(ms)
mr.onwarning = function(e){
console.log(e)
}
mr.onerror = function(e){
alert(e)
}
mr.ondataavailable = function(e){
downloadBlob(e.data)
}
return mr
}
function downloadBlob(b) {
var url = URL.createObjectURL(b);
const a = document.createElement('a');
a.href = url;
a.style.display = 'none';
<!--// a.target="_blank" ;-->
document.body.appendChild(a);
setTimeout(() => {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 5000);
a.click();
}
</script>
<style>
X3DCanvas {
width: 100%;
height: 100%;
}
.content {
display: block;
position: absolute;
z-index:0;
}
.widget {
display: block;
position: absolute;
z-index:1;
font-size: 2em;
font-weight: bold;
opacity:0.75;
border-radius: .5em;
padding:0em 0.5em 0.3em;
background-color: Grey;
cursor: pointer;
user-select: none;
}
.labelledBlinkingToggler {
display:none;
}
.labelledBlinkingToggler:checked+span:first-child{
animation: blinker .5s infinite;
}
.outlinedText {
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
</style>
</head>
<body onload="this.document.body.firstElementChild.firstElementChild.onload();">
<label class="widget" title="Model Reference">
<input class="labelledBlinkingToggler" type="checkbox"
onload="this.nextElementSibling.nextElementSibling.textContent=insertX3DCanvasChild(this.parentElement.nextElementSibling,'model')"
oninput="if (this.checked){
this[record]=record(this.parentElement.nextElementSibling.firstElementChild.children[0].children[1].children[0].captureStream(25));
this[record].start();
}else{
this[record].stop();
};">
</input>
<span title="Recording Status" style="color:red;font-size:larger;">●</span>
<span class="outlinedText">No Model Set</span>
</label>
<span></span>
<!--<input type="checkbox" oninput="alert(this.firstElementChild);if (this.checked){this.firstElementChild.textContent='🔇︎'}else{this.firstElementChild.textContent='🔊︎'}">-->
<!--<label><span title="Sound Status" style="color:blue;">🔊︎</span></label>-->
<!--</input>-->
</body>
</html>