scratch-link/playground.html
2023-01-13 08:21:38 -08:00

115 lines
5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Scratch Link Test Client Fun Stuff Yay</title>
<style>
button, input {
margin: 0.125rem auto;
}
</style>
</head>
<body>
<div><label for="log">Log</label></div>
<textarea id="log" title="log" readonly style="width: 40rem; height: 10rem;"></textarea>
<div>
<input id="follow" type="checkbox" title="Follow" checked>
<label for="follow">Follow</label>
</div>
<fieldset>
<legend>Host</legend>
<div>
<input id="linkSecure" type="checkbox" title="WSS" />
<label for="linkSecure">WSS?</label>
<input id="linkHost" value="127.0.0.1" type="text" placeholder="Scratch Link host" style="width: 30rem;" />
</div>
</fieldset>
<fieldset>
<legend>BLE</legend>
<div>
<button id="initBLE">Connect to app</button>
<button id="getVersionBLE">Get Version</button>
<button id="pingBLE">Request ping</button>
</div>
<div>
<button id="discoverBLE">Discover peripherals</button>
<button id="connectBLE">Connect to discovered peripheral</button>
<button id="getServicesBLE">Get services of connected peripheral</button>
</div>
<fieldset>
<legend>Stress Test</legend>
<button id="stressBLE">Go</button>
<input id="stressPingBLE" type="checkbox" title="Ping?" />
<label for="stressPingBLE">Ping?</label>
<input id="stressGetVersionBLE" type="checkbox" title="Get version?" />
<label for="stressGetVersionBLE">Get version?</label>
<input id="stressDiscoverBLE" type="checkbox" title="Discover?" />
<label for="stressDiscoverBLE">Discover?</label>
<input id="stressConnectBLE" type="checkbox" title="Connect?" />
<label for="stressConnectBLE">Connect?</label>
</fieldset>
<fieldset>
<legend>Optional Services</legend>
<textarea id="optionalServicesBLE" placeholder="Optional services, if any, separated by whitespace" style="width:20rem;height:3rem;"></textarea>
</fieldset>
<div id="filtersBLE">
<button id="addFilterBLE">Add a filter</button>
Discovery filters:
</div>
<fieldset>
<legend>micro:bit</legend>
<button id="setServiceMicroBit">Set service ID</button>
<button id="readMicroBit">Read and monitor data</button>
<button id="writeMicroBit">Change the LEDs</button>
</fieldset>
<fieldset>
<legend>WeDo 2.0</legend>
<button id="setServiceWeDo2">Set service ID</button>
</fieldset>
<fieldset>
<legend>GDX-FOR</legend>
<button id="setGDXFOR">Set discovery parameters</button>
</fieldset>
</fieldset>
<fieldset>
<legend>BT / EV3</legend>
<div>
<button id="initBT">Connect to app (BT)</button>
<button id="getVersionBT">Get Version</button>
<button id="discoverBT">Find BT devices</button>
<button id="closeBT">Goodbye</button>
</div>
<fieldset>
<legend>Stress Test</legend>
<button id="stressBT">Go</button>
<input id="stressPingBT" type="checkbox" title="Ping?" />
<label for="stressPingBT">Ping?</label>
<input id="stressGetVersionBT" type="checkbox" title="Get version?" />
<label for="stressGetVersionBT">Get version?</label>
<input id="stressDiscoverBT" type="checkbox" title="Discover?" />
<label for="stressDiscoverBT">Discover?</label>
<input id="stressConnectBT" type="checkbox" title="Connect?" />
<label for="stressConnectBT">Connect?</label>
</fieldset>
<div>
<input id="peripheralId" value="0016533d0504" type="text" placeholder="Peripheral id">
<button id="connectBT">Make friends</button>
</div>
<div>
<input id="messageBody" style="width:20em;" value="DQAAAAAEAJkdAAAAAgFg" type="text" placeholder="data">
<button id="send">Converse!</button>
<button id="beep">Yell</button>
</div>
</fieldset>
<script>
self.module = { exports: {} }; // Hack to allow `module.exports` in the scripts from scratch-vm
self.Scratch = self.Scratch || {}; // Container for semi-global objects in this playground
</script>
<!-- Non-Safari WebSocket support, borrowed from scratch-vm -->
<script src="./node_modules/scratch-vm/src/util/jsonrpc.js"></script>
<script src="./node_modules/scratch-vm/src/util/scratch-link-websocket.js"></script>
<!-- Safari WebExtension support: this script is injected by the Safari extension if it's active -->
<script id="scratch-link-extension-script"></script>
<!-- Playground-specific code -->
<script src="./playground.js"></script>
</body>
</html>