6823676e14
Introduced a new tool for visualizing UI dumps, enabling users to upload XML and image files for inspection. The implementation includes an HTML structure, styled with CSS, and JavaScript for processing files and rendering elements dynamically onto a canvas. This provides a lightweight and functional interface for visual analysis.
71 lines
2.1 KiB
JavaScript
71 lines
2.1 KiB
JavaScript
let dumpWidth = 1080;
|
||
let dumpHeight = 1920;
|
||
|
||
document.getElementById('xmlInput').addEventListener('change', handleXml);
|
||
document.getElementById('imgInput').addEventListener('change', handleImage);
|
||
|
||
function handleImage(event) {
|
||
const file = event.target.files[0];
|
||
if (!file) return;
|
||
|
||
const url = URL.createObjectURL(file);
|
||
document.getElementById('screenshot').src = url;
|
||
}
|
||
|
||
async function handleXml(event) {
|
||
const file = event.target.files[0];
|
||
if (!file) return;
|
||
|
||
const text = await file.text();
|
||
const parser = new DOMParser();
|
||
const xml = parser.parseFromString(text, "text/xml");
|
||
|
||
const nodes = Array.from(xml.querySelectorAll("node"));
|
||
const canvas = document.getElementById("canvas");
|
||
canvas.innerHTML = "";
|
||
|
||
// Автоопределение размеров дампа
|
||
let maxX = 0, maxY = 0;
|
||
for (const node of nodes) {
|
||
const bounds = node.getAttribute("bounds");
|
||
const match = bounds && bounds.match(/\[(\d+),(\d+)\]\[(\d+),(\d+)\]/);
|
||
if (!match) continue;
|
||
|
||
const [, , , x2, y2] = match.map(Number);
|
||
if (x2 > maxX) maxX = x2;
|
||
if (y2 > maxY) maxY = y2;
|
||
}
|
||
dumpWidth = maxX;
|
||
dumpHeight = maxY;
|
||
|
||
// Масштабирование по высоте экрана с отступами
|
||
const padding = 100;
|
||
const displayHeight = window.innerHeight - padding;
|
||
const scale = displayHeight / dumpHeight;
|
||
const displayWidth = dumpWidth * scale;
|
||
|
||
// Установка размеров canvas
|
||
canvas.style.width = `${displayWidth}px`;
|
||
canvas.style.height = `${displayHeight}px`;
|
||
|
||
for (const node of nodes) {
|
||
const bounds = node.getAttribute("bounds");
|
||
const match = bounds && bounds.match(/\[(\d+),(\d+)\]\[(\d+),(\d+)\]/);
|
||
if (!match) continue;
|
||
|
||
const [, x1, y1, x2, y2] = match.map(Number);
|
||
|
||
const div = document.createElement("div");
|
||
div.className = "rect";
|
||
div.style.left = `${x1 * scale}px`;
|
||
div.style.top = `${y1 * scale}px`;
|
||
div.style.width = `${(x2 - x1) * scale}px`;
|
||
div.style.height = `${(y2 - y1) * scale}px`;
|
||
|
||
const text = (node.getAttribute("text") || '').trim();
|
||
if (text) div.innerText = text;
|
||
|
||
canvas.appendChild(div);
|
||
}
|
||
}
|