I am working on a developing a demo displaying a html document and some other things. For this I need to place a window displaying an html document in the top right corner of my screen taking up a quarter of the screen.
I have tried doing this using batch files through internet explorer but it did not work for my html file specifically. I have also tried using WinForms to achieve this, but because WinForms uses Internet Explorer as well, that didn't work. I tried writing a batch file to resize an edge window/chrome window, but neither worked. I suspect my JavaScript code is not compatible with Internet Explorer. For security reasons, I am not allowed to use AutoHotKey and probably cannot use a browser extension. Does anyone know what I can do to resize this window displaying my html file? Do I need to change my JavaScript to accommodate internet explorer or can I do something else?
For reference here is my HTML, CSS, and Javascript and PowerShell code in that order:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LAD Touchscreen Demo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="image-container">
<img src="image.png" alt="Interactive Image" id="interactiveImage">
<div class="overlay">
<div class="clickable" data-value="1" style="top: 0%; left: 0%;"></div>
<div class="clickable" data-value="2" style="top: 0%; left: 25%;"></div>
<div class="clickable" data-value="3" style="top: 0%; left: 50%;"></div>
<div class="clickable" data-value="4" style="top: 25%; left: 0%;"></div>
<div class="clickable" data-value="5" style="top: 25%; left: 25%;"></div>
<div class="clickable" data-value="6" style="top: 25%; left: 50%;"></div>
<div class="clickable" data-value="7" style="top: 50%; left: 0%;"></div>
<div class="clickable" data-value="8" style="top: 50%; left: 25%;"></div>
<div class="clickable" data-value="9" style="top: 50%; left: 50%;"></div>
<div class="clickable" data-value="0" style="top: 75%; left: 25%;"></div>
<div class="clickable" data-value="CLEAR" style="top: 75%; left: 0%;"></div>
<div class="clickable" data-value="ALT" style="top: 0%; left: 75%;"></div>
<div class="clickable" data-value="HDG" style="top: 25%; left: 75%;"></div>
<div class="clickable" data-value="VOR" style="top: 50%; left: 75%;"></div>
<div class="clickable" data-value="SPD" style="top: 75%; left: 75%;"></div>
<div id="alt-display" class="display" style="top: 10%; left: 75%;">00000</div>
<div id="hdg-display" class="display" style="top: 35%; left: 75%;">00000</div>
<div id="vor-display" class="display" style="top: 60%; left: 75%;">00000</div>
<div id="spd-display" class="display" style="top: 85%; left: 75%;">00000</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: black;
color: green;
font-family: 'Roboto Mono', Courier, monospace;
height: 100vh;
margin: 0;
}
.image-container {
position: relative;
width: 80%;
max-width: 800px;
aspect-ratio: 1 / 1; /* Adjust this ratio based on your image's aspect ratio */
margin: auto;
}
#interactiveImage {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.clickable {
position: absolute;
width: 25%;
height: 25%;
pointer-events: auto;
}
.clickable:hover {
background-color: rgba(0, 255, 0, 0.3);
cursor: pointer;
}
.display {
position: absolute;
width: 10%;
text-align: center;
font-size: 3vw;
pointer-events: none;
}
document.addEventListener('DOMContentLoaded', function () {
var selectedOption = null;
var displays = {
ALT: document.getElementById('alt-display'),
HDG: document.getElementById('hdg-display'),
VOR: document.getElementById('vor-display'),
SPD: document.getElementById('spd-display')
};
var elements = document.querySelectorAll('.clickable');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', (function (element) {
return function () {
var value = element.getAttribute('data-value');
if (value === 'CLEAR') {
if (selectedOption) {
displays[selectedOption].innerText = '00000';
}
} else if (value === 'ALT' || value === 'HDG' || value === 'VOR' || value === 'SPD') {
selectedOption = value;
} else if (selectedOption) {
var currentValue = displays[selectedOption].innerText;
var newValue = currentValue === '00000' ? value : currentValue + value;
displays[selectedOption].innerText = newValue.slice(-5); // keep only the last 5 digits
}
};
})(elements[i]));
}
});
@echo off
for /f "tokens=1,2" %%a in ('powershell -ExecutionPolicy Bypass -
File get_resolution.ps1') do (
set SCREEN_WIDTH=%%a
set SCREEN_HEIGHT=%%b
)
set /a WINDOW_WIDTH=%SCREEN_WIDTH% / 2
set /a WINDOW_HEIGHT=%SCREEN_HEIGHT% / 2
set POS_X=0
set POS_Y=0
echo Set IE = CreateObject("InternetExplorer.Application") >
set_window.vbs
echo IE.Visible = True >> set_window.vbs
echo IE.Navigate "index.html" >> set_window.vbs
echo WScript.Sleep 2000 >> set_window.vbs
echo IE.Left = %POS_X% >> set_window.vbs
echo IE.Top = %POS_Y% >> set_window.vbs
echo IE.Width = %WINDOW_WIDTH% >> set_window.vbs
echo IE.Height = %WINDOW_HEIGHT% >> set_window.vbs
cscript set_window.vbs
del set_window.vbs
