DIR : /home/kozerus/public_html/jaxgrid_best.html
/home/kozerus/public_html
<html>
<head>
<title>jaxgrid 20200503_1630 </title>
<!--
<title>jaxgrid 20200503_1615 </title>
-->
<!-- <link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/> -->
<style id="style_jaxgrid">
body {
margin: 3em auto;
padding: 0;
background-color: #eaebee;
font-family: Arial, Verdana, sans-serif;
font-size: 14px;
font-weight: normal;
color: #333;
line-height: 1.4em;
}
a:link, a:visited {
color: #39f;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1, h2 {
color: #FFF;
font-size: 1.6em;
margin-bottom: 0;
padding: 1.5em;
padding-bottom: 1.2em;
background: #374252;
text-transform: uppercase;
}
h1::after {
display: block;
content: "";
background: url('../art/logo_createjs.svg') no-repeat;
height:1.5em;
width: 6em;
margin-top: -0.3em;
float: right;
}
h1 em {
font-weight: 200;
font-style: normal;
}
h2 {
font-size: 1.3em;
padding: 1em;
padding-bottom: 0.8em;
}
h3 {
background: #e0e1e5;
color: #374252;
font-size: 1.25em;
padding: 0.5em;
margin-top: 1.25em;
margin-bottom: -0.5em;
position: relative;
}
code {
color: black;
background-color: rgba(255, 230, 0, 0.33);
padding: 1px 3px;
font-family: Courier New, Courier, serif;
font-weight: bold;
}
<!-- <link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/> -->
<style id="style_jaxgrid_examples">
body {
width: 960px;
}
header {
margin-bottom: 1rem;
width: 960px;
}
h1 {
font-weight: 200;
margin-bottom: 1rem;
}
h1:before {
content:"PRELOADJS ";
font-weight: bold;
}
header p {
margin: 0;
padding: 1em;
background: rgba(250, 252, 255, 0.7);
}
.content, canvas {
background: white;
}
.content {
width: 960px;
height: 400px;
overflow: hidden;
padding: 1em;
box-sizing: border-box;
}
.loading {
position: relative;
}
.loading:after {
content: url("../art/loading.gif");
position: absolute;
left: 50%;
top: 50%;
margin: -13px 0 0 -51px;
opacity: 0.8;
}
#error, #mobile {
width: 960px;
height: 400px;
display:none;
text-align: left;
padding: 1em;
}
body.embedded header {
display: none;
}
body.embedded {
margin: 0;
}
</style>
<!-- <script src="../_assets/js/examples.js"></script> -->
<script id="script_jaxgrid" >
/**
* Very minimal shared code for examples.
*/
(function() {
if (document.body) { setupEmbed(); }
else { document.addEventListener("DOMContentLoaded", setupEmbed); }
function setupEmbed() {
if (window.top != window) {
document.body.className += " embedded";
}
}
var o = window.examples = {};
o.showDistractor = function(id) {
var div = id ? document.getElementById(id) : document.querySelector("div canvas").parentNode;
div.className += " loading";
};
o.hideDistractor = function() {
var div = document.querySelector(".loading");
div.className = div.className.replace(/\bloading\b/);
};
})();
</script>
<style id="style_jaxgrid_box" >
.gridBox {
float: left;
width: 150px;
height: 112px;
background-color: #363535;
border-width: thin;
color: #FFF0EE;
margin: 1px;
overflow: hidden;
}
.gridBox:hover {
background-color: #111111;
}
.gridBox.error {
background-color: #992222;
}
.gridBox.error LABEL {
color: #ffffff !important;
}
#imageGrid {
width: 960px;
}
#controls {
height: 25px;
padding: 5px;
background-color: rgba(255, 255, 255, 0.2);
}
LABEL {
position: relative;
top: 10px;
left: 10px;
font-family: sans-serif;
font-size: 12px;
word-wrap: break-word;
}
XMP {
color: #ffffff;
font-size: 10px;
}
</style>
</head>
<body onload="init_jaxgrid()">
<header class="PreloadJS">
<h1>Example: Media Grid</h1>
<p>PreloadJS can load a variety of media. In this example, click each
example to load its related item.
Once the item is loaded, it will display (image, svg), play (sound),
apply to the document (css), or display
an alert (script). Note that when loading images, sounds, css, scripts,
or svg locally, you need to ensure
that PreloadJS uses tag loading to avoid cross-origin errors. Other
media types will not load locally.</p>
</header>
<div id="controls">
Click an item to load it. <input type="button"
value="Load the entire manifest"
onclick="loadManifest()">
</div>
<div id="imageGrid">
<div id="/jkwii/js/jsdoit/preload/_assets/art/Texas.jpg" onclick="loadAsset(this)" class="gridBox"
style="width: 300px; height: 375px;">
<label>Image</label>
</div>
<div id="/jkwii/js/jsdoit/preload/_assets/static/bg.css" onclick="loadAsset(this)" class="gridBox">
<label>CSS - Background</label>
</div>
<div id="/jkwii/js/jsdoit/preload/_assets/static/alert1.js" onclick="loadAsset(this)" class="gridBox">
<label>JavaScript</label>
</div>
<div id="/jkwii/js/jsdoit/preload/_assets/static/grant.xml" onclick="loadAsset(this)" class="gridBox">
<label>XML</label>
</div>
<div id="/jkwii/js/jsdoit/preload/_assets/art/gbot.svg" onclick="loadAsset(this)" class="gridBox"
style="width:200px; height:226px; float: right; overflow:hidden">
<label>SVG</label>
</div>
<div id="/jkwii/js/jsdoit/preload/_assets/static/grant.json" onclick="loadAsset(this)" class="gridBox">
<label>JSON</label>
</div>
<div id="/jkwii/js/jsdoit/preload/_assets/static/font.css" onclick="loadAsset(this)" class="gridBox">
<label>CSS - Font Color</label>
</div>
<div id="/jkwii/js/jsdoit/preload/_assets/audio/Thunder.mp3" onclick="loadAsset(this)"
class="gridBox">
<label>Audio</label>
</div>
<!--
<div id="//gskinner.com/assets/createjs/mapsJSONP.json" type="jsonp"
onclick="loadAsset(this)" class="gridBox"
style="width:200px; height:73px; float: right; overflow:hidden">
<label>JSONP<br/>(loaded from gskinner.com)</label>
-->
<div id="ko2.us/tl/json/tl.json" type="jsonp"
onclick="loadAsset(this)" class="gridBox"
style="width:200px; height:73px; float: right; overflow:hidden">
<label>JSONP<br/>(ko2.us/tl/json/tl.json)</label>
</div>
<div id="/jkwii/js/jsdoit/preload/_assets/art/Autumn.png" onclick="loadAsset(this)" class="gridBox"
style="width:454px; height:147px">
<label>Image</label>
</div>
<div id="NoFileHere.png" onclick="loadAsset(this)" class="gridBox"
style="width:200px; height:72px;">
<label>Intentionally missing file<br/>to generate error.</label>
</div>
</div>
<!-- <script type="text/javascript" src="../_assets/libs/soundjs-NEXT.min.js"></script> -->
<script type="text/javascript" src="/jkwii/js/jsdoit/preload/_assets/libs/soundjs-NEXT.min.js"></script>
<script id="script_soundjs_next_min_js" >
</script>
<!-- <script type="text/javascript" src="../lib/preloadjs-NEXT.combined.js"></script> -->
<script type="text/javascript" src="/jkwii/js/jsdoit/preload/lib/preloadjs-NEXT.combined.js"></script>
<script id="script_soundjs_next_min_js" >
</script>
<!-- <script type="text/javascript" src="../src/preloadjs/loaders/ManifestLoader.js"></script> -->
<script type="text/javascript" src="/jkwii/js/jsdoit/preload/src/preloadjs/loaders/ManifestLoader.js"></script>
<script id="script_soundjs_next_min_js" >
</script>
<!-- We also provide hosted minified versions of all CreateJS libraries. http://code.createjs.com -->
<script id="editable">
var preload;
// Create a new queue.
//preload = new createjs.LoadQueue(true, "assets/");
// Use this instead to favor tag loading
function init_jaxgrid() {
preload = new createjs.LoadQueue(true);
createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin]); // need this so it doesn't default to Web Audio
preload.installPlugin(createjs.Sound);
preload.on("fileload", handleFileLoaded);
preload.on("error", handleError);
}
function loadManifest() {
preload.loadManifest({src: "../_assets/static/MediaGridManifest.json", callback: "loadMediaGrid", type: "manifest"}, true, "../_assets/");
}
function stop() {
if (preload != null) {
preload.close();
}
}
// Load a single asset.
function loadAsset(target) {
var div = document.getElementById(target.id);
div.innerHTML = "<label>Loading...</label>";
var type = target.attributes.getNamedItem("type");
var item = {
src: target.id,
id: target.id
};
if (!type) {
preload.loadManifest({path: "../_assets/", manifest: [item]});
}
else {
item.type = type.value;
item.callback = "maps";
preload.loadFile(item, true);
}
}
// Once each file is loaded, show it. Each ID corresponds to the related DIV.
function handleFileLoaded(event) {
var item = event.item;
var id = item.id;
var result = event.result;
var div = document.getElementById(id);
if (div == null) {
console.log("Could not find DIV:", id, event);
return;
}
switch (item.type) {
case createjs.AbstractLoader.CSS:
(document.head || document.getElementsByTagName("head")[0]).appendChild(result);
div.innerHTML = "<label>CSS is complete :)</label>";
break;
case createjs.AbstractLoader.IMAGE:
div.innerText = "";
result.width = div.clientWidth;
result.height = div.clientHeight;
div.appendChild(result);
break;
case createjs.AbstractLoader.JAVASCRIPT:
document.body.appendChild(result);
div.innerHTML = "<label>Javascript is complete :)</label>";
break;
case createjs.AbstractLoader.JSON:
case createjs.AbstractLoader.XML:
div.innerHTML = "<label>" +
item.type +
" loaded: <br /><xmp>" +
(event.rawResult ? event.rawResult : '') +
"</xmp></label>";
break;
case createjs.AbstractLoader.JSONP:
div.innerHTML = "<label>JSONP is complete :)</label>";
break;
case createjs.AbstractLoader.SOUND:
document.body.appendChild(result);
result.play();
div.innerHTML = "<label>Sound is complete :)</label>";
break;
case createjs.AbstractLoader.SVG:
div.innerHTML = "";
div.appendChild(result);
break
}
div.style.backgroundColor = "#222222";
}
// A file failed to load.
function handleError(event) {
var item = event.data;
var div = document.getElementById(item.id);
if (div != null) {
div.innerHTML = "<label>Error " + (item.id == "NoFileHere.png"?":)":":(")+"</label>";
div.className = "gridBox error";
}
}
</script>
</body>
</html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer