Skip to content

Commit c02f553

Browse files
ktboltktbolt
authored
Merge pull request #3 from JPFrancis/microscape-embed
Microscape embed
2 parents cd8e9c4 + f6f0442 commit c02f553

File tree

6 files changed

+299
-4
lines changed

6 files changed

+299
-4
lines changed

‎css/style_dataset.css

+83-2
Original file line numberDiff line numberDiff line change
@@ -433,12 +433,23 @@ error msg block behavior
433433
border-radius: 8px !important;
434434
}
435435

436+
#threeDOverlay .modalDialog > div {
437+
width: 1000px;
438+
}
439+
440+
436441
@media only screen and (min-width: 576px) {
437442
.containing_and_positioning_of_modal {
438443
width: 500px;
439444
}
440445
}
441446

447+
@media only screen and (min-width: 576px) {
448+
#threeDOverlay .modalDialog > div {
449+
width: 1000px;
450+
}
451+
}
452+
442453
.details-text {
443454
color: #05080B;
444455
font-weight: 200;
@@ -771,7 +782,7 @@ error msg block behavior
771782

772783
/* ATTEMPT AT OVERLAY FOR DETAILS */
773784

774-
#overlay, #confirmOverlay, #vidOverlay{
785+
#overlay, #threeDOverlay, #confirmOverlay, #vidOverlay{
775786
position: fixed;
776787
display: none;
777788
width: 100%;
@@ -911,4 +922,74 @@ error msg block behavior
911922
margin: 0px;
912923
padding: 0px;
913924
border: 0px;
914-
}
925+
}
926+
927+
.microscape-button img{
928+
position: absolute;
929+
top: 80px;
930+
left: 20px;
931+
width:50px;
932+
border:none;
933+
object-fit: cover;
934+
font-size: 150%;
935+
padding: 5px;
936+
}
937+
938+
.microscape-button:hover .icon,
939+
.microscape-button .icon-hover {
940+
display: none;
941+
}
942+
.microscape-button:hover .icon-hover {
943+
display: inline;
944+
}
945+
946+
.model-image.selected .microscape-button img {
947+
/* box-shadow: inset 0px 0px 50px 10px var(--select); */
948+
box-sizing: border-box;
949+
border-width: inset;
950+
border: none;
951+
background-color: white;
952+
border-color: var(--applied);
953+
}
954+
955+
.top-left:hover, bottom-left:hover{
956+
color: var(--midpointSelectApplied);
957+
}
958+
959+
.lds-ring {
960+
display: inline-block;
961+
position: absolute;
962+
top:350px;
963+
left: 460px;
964+
width: 80px;
965+
height: 80px;
966+
}
967+
.lds-ring div {
968+
box-sizing: border-box;
969+
display: block;
970+
position: absolute;
971+
width: 64px;
972+
height: 64px;
973+
margin: 8px;
974+
border: 2px solid #53c7e9;
975+
border-radius: 50%;
976+
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
977+
border-color: #53c7e9 transparent transparent transparent;
978+
}
979+
.lds-ring div:nth-child(1) {
980+
animation-delay: -0.45s;
981+
}
982+
.lds-ring div:nth-child(2) {
983+
animation-delay: -0.3s;
984+
}
985+
.lds-ring div:nth-child(3) {
986+
animation-delay: -0.15s;
987+
}
988+
@keyframes lds-ring {
989+
0% {
990+
transform: rotate(0deg);
991+
}
992+
100% {
993+
transform: rotate(360deg);
994+
}
995+
}

‎dataset.html

+103
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,87 @@
3232

3333
gtag('config', 'G-YVVR1546XJ');
3434
</script>
35+
<!-- MICROSCAPE FUNCTIONALITY -->
36+
<script>
37+
function send(message) {
38+
const iframe = document.querySelector("#game-window");
39+
iframe.contentWindow.postMessage(message, "*");
40+
}
41+
42+
function sendMessage(event, value) {
43+
const message = {
44+
"type": event,
45+
"value": value
46+
}
47+
send(message);
48+
}
49+
50+
function toogleChannel(cb, channel) {
51+
const message = {
52+
"type": "TOGGLE_CHANNEL",
53+
"value": channel + "|" + cb.checked
54+
}
55+
send(message);
56+
}
57+
58+
function updateChannelAlpha(value, channel) {
59+
const message = {
60+
"type": "UPDATE_ALPHA",
61+
"value": channel + "|" + value
62+
}
63+
send(message);
64+
}
65+
66+
function updateChannelColor(target, channel) {
67+
var color = target.value;
68+
const r = parseInt(color.substr(1,2), 16);
69+
const g = parseInt(color.substr(3,2), 16);
70+
const b = parseInt(color.substr(5,2), 16);
71+
const message = {
72+
"type": "UPDATE_COLOR",
73+
"value": channel + "|" + r + "|" + g + "|" + b
74+
}
75+
console.log(message);
76+
send(message);
77+
}
78+
79+
function setAtlasNumber(event) {
80+
let atlasNumber = document.getElementById("atlas-number");
81+
var number = atlasNumber.value;
82+
83+
let atlasColor = document.getElementById("atlas-color");
84+
var color = atlasColor.value;
85+
86+
const r = parseInt(color.substr(1,2), 16);
87+
const g = parseInt(color.substr(3,2), 16);
88+
const b = parseInt(color.substr(5,2), 16);
89+
const message = {
90+
"type": "SET_ATLAS_NUMBER",
91+
"value": number + "|" + r + "|" + g + "|" + b
92+
}
93+
console.log(message);
94+
send(message);
95+
}
96+
97+
document.getElementById("atlas-number").addEventListener("input", setAtlasNumber);
98+
document.getElementById("atlas-color").addEventListener("change", setAtlasNumber);
99+
100+
function setResolution(resolution) {
101+
const message = {
102+
"type": "SET_RESOLUTION",
103+
"value": parseInt(resolution)
104+
}
105+
console.log(message);
106+
send(message);
107+
}
108+
109+
document.getElementById("project").addEventListener("input", updateProject);
110+
111+
function updateProject(event){
112+
}
113+
114+
</script>
115+
<!-- MICROSCAPE FUNCTIONALITY -->
35116
</head>
36117
<body class="body">
37118
<div id="page-container">
@@ -399,6 +480,28 @@ <h4 class="closed">Project Must Contain</h4>
399480
</div>
400481
</div>
401482
</div>
483+
<!-- microscape viewer portal -->
484+
<div id="threeDOverlay">
485+
<div class="container">
486+
<div id="open3DModal" class="modalDialog">
487+
<div class="containing_and_positioning_of_modal">
488+
<div id="body_of_modal" class="safeOfOverlayClick">
489+
<p id="3Dmodal-greeting">Placeholder</p>
490+
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
491+
<iframe id="game-window" src="http://thien-test-iframe.s3-website-us-east-1.amazonaws.com/index.html?project=0001_h_ao_svd" width="100%" height="600px" style="position: relative; z-index:10;" frameborder="0"></iframe>
492+
<div id="modal-closure" style="margin-bottom:10px;">
493+
<a href="http://www.microscape.xyz">www.microscape.xyz</a></div>
494+
</div>
495+
<div class="row">
496+
<div class="col-xs-4 col-sm-4 top-right">
497+
<a title = "Close" class="button close-button-modal"><i class="fa-solid fa-xmark"></i></a></div>
498+
<!-- 6LedB9gdAAAAANK8mQLhxsR7-mpeDlxzPdm9fQkV secret key -->
499+
</div>
500+
</div>
501+
</div>
502+
</div>
503+
</div>
504+
</div>
402505
<!-- footer with contacts -->
403506
<section id="contact-section">
404507
<div class="container">

‎img/group-logos/MCP_Icon_BlueOverWhite.png

99 KB
Loading

‎img/group-logos/MCP_Icon_GreyOverAlpha.png

126 KB
Loading

‎js/globalVar.js

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ var doneDownloading = false;
4343

4444
//variable that is true when the modal dialog is on to place an overlay
4545
var isOverlayOn = false;
46+
var is3DOverlayOn = false;
4647

4748
var isSafeSelected = false;
4849
var menuBarShowing = false;

0 commit comments

Comments
 (0)