2e0ea198f1
Summary: Ref T2746 Reviewers: #testers, kuba-orlik Reviewed By: #testers, kuba-orlik Subscribers: kuba-orlik Maniphest Tasks: T2746 Differential Revision: https://hub.sealcode.org/D1393
152 lines
3.6 KiB
HTML
152 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Rentgen android</title>
|
|
<style>
|
|
main{
|
|
display: flex;
|
|
}
|
|
|
|
.log-section{
|
|
height: 600px;
|
|
width: 300px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.screen{
|
|
display: inline-block
|
|
}
|
|
|
|
.screen-buttons{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 5px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.screen-buttons button{
|
|
font-size: 1.1rem;
|
|
padding: 10px 20px;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.screen-buttons button:hover{
|
|
background-color: aqua;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<section class="screen-section">
|
|
<img id="screen" alt="android screen" src="" class="screen"/>
|
|
<div class="screen-buttons">
|
|
<button class="screen-buttons-home">home</button>
|
|
<button class="screen-buttons-back">back</button>
|
|
</div>
|
|
</section>
|
|
<p
|
|
id="clicks-log"
|
|
class="log-section"
|
|
></p>
|
|
<p
|
|
id="traffic-log"
|
|
class="log-section"
|
|
></p>
|
|
</main>
|
|
<script>
|
|
var screen = document.getElementById("screen");
|
|
var clicksLog = document.getElementById("clicks-log");
|
|
const homeButton = document.querySelector(".screen-buttons-home");
|
|
const backButton = document.querySelector(".screen-buttons-back");
|
|
|
|
let lastTouch = new Date().getTime();
|
|
|
|
const calculateElapsedTime = (last) => {
|
|
const currentTouch = new Date().getTime();
|
|
const elapsedTime = currentTouch - lastTouch;
|
|
const elapsedSec = Math.round(elapsedTime / 1000);
|
|
lastTouch = currentTouch;
|
|
return elapsedSec;
|
|
};
|
|
|
|
const waitToLog = (clickInfoText) => {
|
|
const clickInfo = document.createElement("span");
|
|
const waitInfo = document.createElement("span");
|
|
waitInfo.textContent = `await wait(${calculateElapsedTime(lastTouch)});`
|
|
clicksLog.appendChild(waitInfo);
|
|
clickInfo.textContent = clickInfoText;
|
|
clicksLog.appendChild(clickInfo);
|
|
}
|
|
|
|
const registerClick = ({path, logText}) =>{
|
|
const clicksLog = document.getElementById("clicks-log");
|
|
const span = document.createElement("span");
|
|
|
|
waitToLog(logText);
|
|
|
|
fetch(path, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
|
},
|
|
});
|
|
}
|
|
|
|
homeButton.addEventListener("click", () => registerClick({path: "home", logText: "await homeButton();"}));
|
|
|
|
backButton.addEventListener("click", () => registerClick({path: "back", logText: "await backButton();"}));
|
|
|
|
async function displayImage() {
|
|
try {
|
|
const response = await fetch("screen");
|
|
const blob = await response.blob();
|
|
screen.src = URL.createObjectURL(blob);
|
|
} catch (error) {
|
|
console.error("Error fetching image: ", error);
|
|
}
|
|
}
|
|
|
|
async function handleTouchEvent(event) {
|
|
const phoneX = event.offsetX;
|
|
const phoneY = event.offsetY;
|
|
|
|
waitToLog(`await click(${phoneX}, ${phoneY});`);
|
|
|
|
await fetch("touch", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
|
},
|
|
body: `x=${phoneX}&y=${phoneY}`,
|
|
});
|
|
}
|
|
|
|
async function sleep(time) {
|
|
return new Promise((resolve) => setTimeout(resolve, time));
|
|
}
|
|
|
|
async function screenshot_loop() {
|
|
var before;
|
|
|
|
while (true) {
|
|
before = performance.now();
|
|
await displayImage();
|
|
while (performance.now() - before < ___screenshotDelayMs___)
|
|
await sleep(50);
|
|
}
|
|
}
|
|
|
|
screen.addEventListener("click", handleTouchEvent);
|
|
|
|
screenshot_loop();
|
|
</script>
|
|
<script src="/trafficLog.js"></script>
|
|
</body>
|
|
</html>
|