diff options
Diffstat (limited to 'snap.html')
| -rwxr-xr-x | snap.html | 173 |
1 files changed, 139 insertions, 34 deletions
@@ -1,38 +1,143 @@ <!DOCTYPE html> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> - <title>Snap! Build Your Own Blocks. Beta</title> - <link rel="shortcut icon" href="favicon.ico"> - <script type="text/javascript" src="morphic.js"></script> - <script type="text/javascript" src="widgets.js"></script> - <script type="text/javascript" src="blocks.js"></script> - <script type="text/javascript" src="threads.js"></script> - <script type="text/javascript" src="objects.js"></script> - <script type="text/javascript" src="gui.js"></script> - <script type="text/javascript" src="paint.js"></script> - <script type="text/javascript" src="lists.js"></script> - <script type="text/javascript" src="byob.js"></script> - <script type="text/javascript" src="xml.js"></script> - <script type="text/javascript" src="store.js"></script> - <script type="text/javascript" src="locale.js"></script> - <script type="text/javascript" src="cloud.js"></script> - <script type="text/javascript" src="sha512.js"></script> - <script type="text/javascript" src="peer.js"></script> - <script type="text/javascript"> - var world; - window.onload = function () { - world = new WorldMorph(document.getElementById('world')); + <head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <title>Snap! Build Your Own Blocks. Beta</title> + <link rel="shortcut icon" href="favicon.ico"> + <link rel="stylesheet" href="leaflet.css" /> + <link rel="stylesheet" href="Leaflet.Coordinates-0.1.4.css" /> + <script type="text/javascript" src="leaflet.js"></script> + <script type="text/javascript" src="OSMBuildings-Leaflet.js"></script> + <script type="text/javascript" src="Leaflet.Coordinates-0.1.4.min.js"></script> + <script type="text/javascript" src="leaflet-geodesy.js"></script> + <script type="text/javascript" src="peer.js"></script> + <script type="text/javascript" src="morphic.js"></script> + <script type="text/javascript" src="widgets.js"></script> + <script type="text/javascript" src="blocks.js"></script> + <script type="text/javascript" src="threads.js"></script> + <script type="text/javascript" src="objects.js"></script> + <script type="text/javascript" src="gui.js"></script> + <script type="text/javascript" src="paint.js"></script> + <script type="text/javascript" src="lists.js"></script> + <script type="text/javascript" src="byob.js"></script> + <script type="text/javascript" src="xml.js"></script> + <script type="text/javascript" src="store.js"></script> + <script type="text/javascript" src="locale.js"></script> + <script type="text/javascript" src="cloud.js"></script> + <script type="text/javascript" src="sha512.js"></script> + </head> + <body style="margin: 0;"> + <canvas id="world" tabindex="1" style="position: absolute;"></canvas> + <div id="map" style="position: absolute; width: 480px; height: 360px;" /> + <!-- set initial size to 480x360 or the map will not load properly --> + <script type="text/javascript"> + // custom leaflet definitions + L.SpriteIcon = L.Icon.extend({ + options: { + iconSize: [24, 24], + iconAnchor: [12, 12], + canvas: null, + className: 'leaflet-sprite-icon' + }, + createIcon: function () { + this.options.iconSize = + [this.options.canvas.width, this.options.canvas.height]; + var copy = document.createElement('canvas'); + copy.width = this.options.iconSize[0]; + copy.height = this.options.iconSize[1]; + var context = copy.getContext('2d'); + context.drawImage(this.options.canvas, 0, 0); + this._setIconStyles(copy, 'icon'); + return copy; + }, + createShadow: function (oldIcon) { + return null; + } + }); + L.spriteIcon = function (options) { + return new L.SpriteIcon(options); + }; + + // Snap! YOW starts here + var world, map, layer, spriteGroup, polylines, polylineIndex; + + function loop() { + world.doOneCycle(); + } + + // Grabbing values via global variables from deep inside Snap! is easier + // Possible drawback: Multiple worlds could conflict + function locationfound(e) { + if (!window.geoposition) { + // Sets the view on the first locate + map.setView(e.latlng, 18); + } + window.geoposition = e.latlng; + } + + window.map = map; + window.layer = layer; + + // initialize leaflet + map = L.map('map', { + keyboard: false, + closePopupOnClick: false + }); + // The map steals the key events, so the 'world' canvas has to be focused + map.on('mouseover', function() {document.getElementById('world').focus();}); + // Resizing hides the markers + map.on('resize', function() { + ide.sprites.asArray().forEach(function (sprite) { + sprite.updateMarker(); + }); + }); + + layer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { + attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' + }).addTo(map); + L.control.coordinates({ + decimals: 7, + enableUserInput: false, + labelTemplateLng: "Lon: {x}", + position: "topright" + }).addTo(map); + + // continuously update the local location variable + map.on('locationfound', locationfound); + map.locate({watch: true, enableHighAccuracy: true}); + + // OSMBuildings provides fancy 3D buildings + new OSMBuildings(map).load(); + + // A Sprite's X position is mapped to longitude + // A Sprite's Y position is mapped to latitude + // The stage has -x left and +x right, + // -y top and +y bottom but we want + // +y top and -y bottom. + window.spriteGroup = spriteGroup; + spriteGroup = L.layerGroup().addTo(map); + + // During a pen down, a polyline is updated at polylines[this.myPolylineIndex]. + // On pen up, myPolylineIndex is set to polylineIndex and polylineIndex is incremented + // so polylines contains complete lines created by different sprites. + // These lines might be (partially) transformed into polygons. + window.penTrails = L.layerGroup().addTo(map); + window.shapes = L.layerGroup().addTo(window.penTrails); + window.lines = L.layerGroup().addTo(window.penTrails); + window.polylines = polylines; + polylineIndex = 0; + polylines = []; + + // Load the IDE + world = new WorldMorph(document.getElementById('world')); world.worldCanvas.focus(); - new IDE_Morph().openIn(world); - setInterval(loop, 1); - }; - function loop() { - world.doOneCycle(); - } - </script> - </head> - <body style="margin: 0;"> - <canvas id="world" tabindex="1" style="position: absolute;" /> - </body> + ide = new IDE_Morph(); + ide.openIn(world); + + setTimeout(function () { // FIXME dirty hack + ide.droppedText(ide.getURL('overpass.xml')); + }, 2000); + setInterval(loop, 10); + </script> + </body> </html> |