<!DOCTYPE html>
<html lang="en"><head>
<title>ui_prototype</title>
<meta charset="UTF-8">
<meta name="description" content="A little UI prototype for the codemelted.js module to tryout custom UI elements.">
<meta name="keywords" content="UI,GUI,CodeMelted,HTML,CSS">
<meta name="author" content="Mark Shaffer">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="https://codemelted.com/favicon.png">
<link rel="stylesheet" href="https://codemelted.com/assets/css/developer-theme.css">
<link rel="stylesheet" href="https://codemelted.com/assets/css/scrollbars.css">
<style>
codemelted-ui-button img {
vertical-align: middle;
}
codemelted-ui-button button {
color: white;
font-weight: bold;
text-align: left;
width: 100%;
padding: 5px;
background-color: transparent;
border-style: inset;
border: 1px solid transparent;
padding-left: 25px;
}
codemelted-ui-button button:hover {
background-color: blue;
}
codemelted-ui-expansion-tile summary:hover {
background-color: blue;
}
codemelted-ui-expansion-tile details {
border: 1px solid black;
}
</style>
</head><body><div class="content-main">
<center>
<button id="btn_post_message">Post Message</button>
</center>
<script type="module">
import {
CONNECT_REQUEST,
CBroadcastChannelProtocol,
CTimerResult,
async_timer,
network_connect
} from "./codemelted.js";
let channel1 = network_connect({
request: CONNECT_REQUEST.BroadcastChannel,
url: "test_channel",
});
let channel2 = network_connect({
request: CONNECT_REQUEST.BroadcastChannel,
url: "test_channel",
});
let timer = async_timer({
interval: 1000,
task: async () => {
let evt = await channel2.get_message();
console.log("evt = ", evt);
}
});
document.getElementById("btn_post_message").onclick = async (evt) => {
let data = prompt("Enter Something");
let result = await channel1.post_message(data);
console.log("post result = ", result);
};
</script>
</div></body></html>