79 lines
2.4 KiB
HTML
79 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>Mydeate</title>
|
|
<meta name="viewport" content="width=device-width">
|
|
<link rel="stylesheet" href="./style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="mydeate-main" class="main-div"></div>
|
|
</body>
|
|
|
|
</html>
|
|
<script src="./js/util.js"></script>
|
|
<script src="./js/element.js"></script>
|
|
<script src="./js/elements.js"></script>
|
|
<script src="./js/pointer.js"></script>
|
|
<script src="./js/canvas.js"></script>
|
|
<script src="./js/main.js"></script>
|
|
<script defer>
|
|
|
|
// Time-stepped to support animations;
|
|
// Can also run tasks queued by the UI, if we want;
|
|
// Could also support arbitrary scheduled operations.
|
|
|
|
// Let's create an ontology for the UI, which the render loop can reference
|
|
// What kinds of things we have?
|
|
// Text : Consists of some text content; could have formatting; could have title;
|
|
// May want to specialize it to support data or whatever...
|
|
// Connection : Like a line / arrow ; May have different kinds of connections such as
|
|
// Precedence / hierarchy tree; depencency graph;
|
|
// May have multiple start / end points (a.k.a. may be a hyperedge)
|
|
// Also worth thinking about matrices - outer products
|
|
// Might as well further consider tensor products
|
|
|
|
// So then maybe we have an output / display node; this could be displaying things such as
|
|
// Values of some parameters
|
|
// Graph of (historical trends of) parameters
|
|
// Results of logic computations / expression evaluation
|
|
|
|
// Utility elements to start, for displaying document time and pointer location
|
|
|
|
|
|
// Add utility elements
|
|
addElement({
|
|
id: "time",
|
|
classes: ["monospace"],
|
|
detail: () => {
|
|
const t = currentTime;
|
|
const s = t / 1000;
|
|
const m = s / 60;
|
|
const h = m / 60;
|
|
const d = h / 24;
|
|
const timeStr = [d % 60, h % 24, m % 60, s % 60].map(x => x.toFixed(0).padStart(2, "0")).join(":");
|
|
return `runtime: ${timeStr}`;
|
|
},
|
|
});
|
|
addElement({
|
|
id: "pointer-info",
|
|
classes: ["monospace"],
|
|
detail: () => (["x", "y"]
|
|
.map(q => `${q}:${(pointer[q] ?? 0).toFixed(2).padStart(7, " ")}`)
|
|
.join(", ")
|
|
.replace(/ /g, " ")),
|
|
});
|
|
addElement({
|
|
classes: ["monospace"],
|
|
id: 'pointer-history-length',
|
|
detail: () => `ptr hist len: ${pointerHistory.length}`,
|
|
});
|
|
addElement({
|
|
summary: () => "Element Summary",
|
|
detail: () => "Element Detail<br> With multile lines<br> How about that?",
|
|
});
|
|
|
|
// Run main loop
|
|
main();
|
|
</script> |