mirror of
https://github.com/google/blockly.git
synced 2026-01-09 10:00:09 +01:00
5c541c6f99
Using 123 as a better indicator to the user this block can represent any number, and the user should replace this value with their own desired number.
92 lines
2.3 KiB
HTML
92 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Blockly Demo: Minimap</title>
|
|
<script src="../../blockly_compressed.js"></script>
|
|
<script src="../../blocks_compressed.js"></script>
|
|
<script src="../../msg/js/en.js"></script>
|
|
<script src="minimap.js"></script>
|
|
<style>
|
|
body {
|
|
background-color: #fff;
|
|
font-family: sans-serif;
|
|
}
|
|
h1 {
|
|
font-weight: normal;
|
|
font-size: 140%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1><a href="https://developers.google.com/blockly/">Blockly</a> >
|
|
<a href="../index.html">Demos</a> > Minimap</h1>
|
|
|
|
<p>This is a simple demo showing how a minimap can be implemented.</p>
|
|
|
|
<table width="100%">
|
|
<tr>
|
|
<td>
|
|
<div id="masterDiv" style="height: 480px; width: 900px;"></div>
|
|
</td>
|
|
<td>
|
|
<div id="mapDiv" style="height: 480px; width: 200px;"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<xml id="toolbox" style="display: none">
|
|
<block type="controls_if"></block>
|
|
<block type="logic_compare"></block>
|
|
<block type="controls_repeat_ext"></block>
|
|
<block type="math_number">
|
|
<field name="NUM">123</field>
|
|
</block>
|
|
<block type="math_arithmetic"></block>
|
|
<block type="text"></block>
|
|
<block type="text_print"></block>
|
|
<block type="variables_get"><field name="VAR">i</field></block>
|
|
<block type="variables_get"><field name="VAR">j</field></block>
|
|
<block type="variables_get"><field name="VAR">k</field></block>
|
|
</xml>
|
|
|
|
<script>
|
|
// Inject master workspace.
|
|
var masterWorkspace = Blockly.inject('masterDiv', {
|
|
media: '../../media/',
|
|
scrollbars: true,
|
|
toolbox: document.getElementById('toolbox')
|
|
});
|
|
|
|
// Inject workspace for minimap.
|
|
var minimapWorkspace = Blockly.inject('mapDiv', {
|
|
media: '../../media/',
|
|
readOnly: true,
|
|
zoom: {
|
|
controls: false,
|
|
wheel: true,
|
|
startScale: 0.1, // Change this according to your needs.
|
|
maxScale: 0.1,
|
|
minScale: 0.01
|
|
}
|
|
});
|
|
|
|
// Initialize the minimap.
|
|
Minimap.init(masterWorkspace,minimapWorkspace);
|
|
</script>
|
|
<style>
|
|
.minimap{
|
|
position: absolute;
|
|
}
|
|
.mapDragger{
|
|
cursor: move;
|
|
fill: rgb(0,0,255);
|
|
stroke-width: .5;
|
|
stroke: rgb(0,0,0);
|
|
fill-opacity: .1;
|
|
}
|
|
</style>
|
|
|
|
</body>
|
|
</html>
|