@@ -1,7 +1,16 @@ | |||
html { | |||
height: 100%; | |||
background-color: #666; | |||
background-image: -webkit-linear-gradient(-45deg, #999 24%, #666 26%, #666 49%, #999 51%, #999 74%, #666 76%, #666); | |||
background-image: -moz-linear-gradient(-45deg, #999 24%, #666 26%, #666 49%, #999 51%, #999 74%, #666 76%, #666); | |||
background-image: linear-gradient(-45deg, #999 24%, #666 26%, #666 49%, #999 51%, #999 74%, #666 76%, #666); | |||
background-size:20px 20px; | |||
} | |||
body | |||
{ | |||
background-image:url('img/background.png'); | |||
margin: 0px; | |||
padding: 0px; | |||
overflow: hidden; | |||
-webkit-user-select:none; | |||
-khtml-user-select:none; | |||
@@ -9,15 +18,21 @@ body | |||
-o-user-select:none; | |||
user-select:none; | |||
cursor:default; | |||
width: 100%; | |||
} | |||
.grab | |||
{ | |||
cursor:url(img/grab.png) 12 8,default; | |||
cursor:url('img/grab.png') 12 8,default; | |||
} | |||
.grabbing | |||
{ | |||
cursor:url(img/grabbing.png) 12 8,default; | |||
cursor:url('img/grabbing.png') 12 8,default; | |||
} | |||
.sprite | |||
{ | |||
background-image:url('img/sprites.png'); | |||
} | |||
#container | |||
@@ -27,7 +42,6 @@ body | |||
#page | |||
{ | |||
background-image:url('img/background.png'); | |||
width: 100%; | |||
height: 100%; | |||
} | |||
@@ -48,7 +62,6 @@ body | |||
height:50%; | |||
position:absolute; | |||
top:0px; | |||
background-image:url('img/sprites.png'); | |||
background-position:0px -27px; | |||
} | |||
@@ -63,7 +76,6 @@ body | |||
height:50%; | |||
position:absolute; | |||
bottom:0px; | |||
background-image:url('img/sprites.png'); | |||
background-position:-27px -27px; | |||
} | |||
@@ -79,7 +91,6 @@ body | |||
right:2px; | |||
width:27px; | |||
height:27px; | |||
background-image:url('img/sprites.png'); | |||
background-position:-54px -27px; | |||
cursor:pointer; | |||
} | |||
@@ -117,7 +128,6 @@ body | |||
#close_button | |||
{ | |||
float:right; | |||
background-image:url('img/sprites.png'); | |||
background-position:-54px -98px; | |||
width:17px; | |||
height:17px; | |||
@@ -132,7 +142,6 @@ body | |||
#pannellum_logo | |||
{ | |||
background-image:url('img/sprites.png'); | |||
background-position:0px 0px; | |||
position:absolute; | |||
top:2px; | |||
@@ -299,7 +308,6 @@ body | |||
#pannellum_logo_about | |||
{ | |||
position:relative; | |||
background-image:url('img/sprites.png'); | |||
background-position:0px 0px; | |||
width:81px; | |||
height:27px; | |||
@@ -347,7 +355,6 @@ body | |||
right:2px; | |||
width:27px; | |||
height:27px; | |||
background-image:url('img/sprites.png'); | |||
background-position:-27px -81px; | |||
cursor:pointer; | |||
} | |||
@@ -362,7 +369,6 @@ body | |||
right:2px; | |||
width:27px; | |||
height:27px; | |||
background-image:url('img/sprites.png'); | |||
background-position:0px -81px; | |||
cursor:pointer; | |||
} | |||
@@ -409,3 +409,36 @@ function toggleFullWindow() | |||
fullWindowActive = false; | |||
} | |||
} | |||
function zoomIn() { | |||
if( fov >= 40 ) { | |||
fov -= 5; | |||
camera.projectionMatrix = THREE.Matrix4.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 ); | |||
render(); | |||
} | |||
} | |||
function zoomOut() { | |||
if( fov <= 100 ) { | |||
fov += 5; | |||
camera.projectionMatrix = THREE.Matrix4.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 ); | |||
render(); | |||
} | |||
} | |||
function about() { | |||
if(about_box.style.display == 'inline') { | |||
about_box.style.display = 'none'; | |||
} else { | |||
about_box.style.display = 'inline'; | |||
} | |||
} | |||
function load() { | |||
var load_button = document.getElementById('load_button'); | |||
load_button.style.display = 'none'; | |||
var load_box = document.getElementById('load_box'); | |||
load_box.style.display = 'inline'; | |||
init(); | |||
animate(); | |||
} |
@@ -4,15 +4,12 @@ | |||
<title>pannellum</title> | |||
<meta charset="utf-8"> | |||
<link type="text/css" rel="Stylesheet" href="css/pannellum.css" /> | |||
<script type="text/javascript"> | |||
//window.onresize = function(){alert('hello')}; | |||
</script> | |||
</head> | |||
<body> | |||
<div id="page"> | |||
<div id="container"></div> | |||
<div id="container"></div> | |||
<noscript><div id="nojavascript"><p>Javascript is required to view this panorama.<br>(It could be worse; you could need a plugin.)</p></div></noscript> | |||
@@ -22,24 +19,23 @@ | |||
</div> | |||
<div id="zoomcontrols"> | |||
<div id="zoom_in" onclick="if( fov >= 40 ) {fov -= 5; camera.projectionMatrix = THREE.Matrix4.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 ); render();}"></div> | |||
<div id="zoom_out" onclick="if( fov <= 100 ) {fov += 5; camera.projectionMatrix = THREE.Matrix4.makePerspective( fov, window.innerWidth / window.innerHeight, 1, 1100 ); render();}"></div> | |||
<div id="zoom_in" onclick="zoomIn()" class="sprite"></div> | |||
<div id="zoom_out" onclick="zoomOut()" class="sprite"></div> | |||
</div> | |||
<div id="about_button" onclick="if(about_box.style.display == 'inline'){about_box.style.display = 'none';} else{about_box.style.display = 'inline';}"></div> | |||
<div id="about_button" onclick="about()" class="sprite"></div> | |||
<div id="pannellum_logo"><a href="http://pannellum.sf.net/" target="_blank"></a></div> | |||
<div id="pannellum_logo" class="sprite"><a href="http://pannellum.sf.net/" target="_blank"></a></div> | |||
<div id="fullwindowtoggle_button" onclick="toggleFullWindow();"></div> | |||
<div id="fullwindowtoggle_button" onclick="toggleFullWindow()" class="sprite"></div> | |||
<div id="load_box"><p>Loading...<div id="load_indicator"></div></div> | |||
<div id="load_button" onclick="var load_button = document.getElementById('load_button'); load_button.style.display = 'none'; | |||
var load_box = document.getElementById('load_box');load_box.style.display = 'inline';init();animate();"><p>Load<br>Panorama<p></div> | |||
<div id="load_button" onclick="load()"><p>Load<br>Panorama<p></div> | |||
<div id="nocanvas"><p>A browser supporting the canvas element is required to view this panorama.</p></div> | |||
<div id="nocanvas"><p>A browser supporting the canvas element (and WebGL) is required to view this panorama.</p></div> | |||
<div id="about_box"><div id="close_button" onclick="about_box.style.display = 'none';"></div><div id="pannellum_logo_about"></div><a href="http://pannellum.sf.net/" target="_blank">http://pannellum.sf.net/</a><p>Licensing:<br><a href="LICENSE.txt" target="_blank">GNU LGPL v2.1</a></div> | |||
<div id="about_box"><div id="close_button" class="sprite" onclick="about_box.style.display='none'"></div><div id="pannellum_logo_about" class="sprite"></div><a href="http://pannellum.sf.net/" target="_blank">http://pannellum.sf.net/</a><p>Licensing:<br><a href="LICENSE.txt" target="_blank">GNU LGPL v2.1</a></div> | |||
<script type="text/javascript" src="js/Three.js"></script> | |||
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script> | |||
@@ -0,0 +1 @@ | |||
python build.py |
@@ -0,0 +1,117 @@ | |||
#!/usr/bin/env python | |||
import os | |||
import tempfile | |||
import sys | |||
JS = [ | |||
'js/pannellum.js', | |||
'js/Three.js', | |||
'js/RequestAnimationFrame.js' | |||
] | |||
CSS = [ | |||
'css/pannellum.css' | |||
] | |||
HTML = [ | |||
'pannellum.htm' | |||
] | |||
def merge(files): | |||
buffer = [] | |||
for filename in files: | |||
with open(os.path.join('..', 'src', filename), 'r') as f: | |||
buffer.append(f.read()) | |||
return "".join(buffer) | |||
def read(filename): | |||
with open(os.path.join('..','src',filename), 'rb') as f: | |||
return f.read() | |||
def output(text, filename): | |||
with open(os.path.join('..', 'build', filename), 'w') as f: | |||
f.write(text) | |||
def JScompress(text): | |||
in_tuple = tempfile.mkstemp() | |||
with os.fdopen(in_tuple[0], 'w') as handle: | |||
handle.write(text) | |||
out_tuple = tempfile.mkstemp() | |||
os.system("java -jar compiler.jar --language_in=ECMASCRIPT5 --js %s --js_output_file %s" % (in_tuple[1], out_tuple[1])) | |||
with os.fdopen(out_tuple[0], 'r') as handle: | |||
compressed = handle.read() | |||
os.unlink(in_tuple[1]) | |||
os.unlink(out_tuple[1]) | |||
return compressed | |||
def cssCompress(text): | |||
in_tuple = tempfile.mkstemp() | |||
with os.fdopen(in_tuple[0], 'w') as handle: | |||
handle.write(text) | |||
out_tuple = tempfile.mkstemp() | |||
os.system("java -jar yuicompressor-2.4.7.jar %s --type css -o %s --charset utf-8 -v" % (in_tuple[1], out_tuple[1])) | |||
with os.fdopen(out_tuple[0], 'r') as handle: | |||
compressed = handle.read() | |||
os.unlink(in_tuple[1]) | |||
os.unlink(out_tuple[1]) | |||
return compressed | |||
def htmlCompress(text): | |||
in_tuple = tempfile.mkstemp() | |||
with os.fdopen(in_tuple[0], 'w') as handle: | |||
handle.write(text) | |||
out_tuple = tempfile.mkstemp() | |||
os.system("java -jar htmlcompressor-1.5.3.jar --remove-intertag-spaces --remove-quotes --compress-js --js-compressor closure -o %s %s" % (out_tuple[1], in_tuple[1])) | |||
with os.fdopen(out_tuple[0], 'r') as handle: | |||
compressed = handle.read() | |||
os.unlink(in_tuple[1]) | |||
os.unlink(out_tuple[1]) | |||
return compressed | |||
def addHeader(text): | |||
return '<!-- Pannellum, http://pannellum.sf.net/ -->\n' + text | |||
def build(files, css, html, filename): | |||
folder = '' | |||
cssfilename = filename + '.css' | |||
htmlfilename = filename + '.htm' | |||
filename = filename + '.js' | |||
print "=" * 40 | |||
print "Compiling", filename | |||
print "=" * 40 | |||
js = merge(files) | |||
js = JScompress(js) | |||
print "=" * 40 | |||
print "Compiling", cssfilename | |||
print "=" * 40 | |||
css = merge(css) | |||
css = css.replace("url('img/grab.png')","'data:image/png;base64," + read('css/img/grab.png').encode('base64').replace('\n', '') + "'") | |||
css = css.replace("url('img/grabbing.png')","'data:image/png;base64," + read('css/img/grabbing.png').encode('base64').replace('\n', '') + "'") | |||
css = css.replace("url('img/loading.svg')","'data:image/svg+xml;base64," + read('css/img/loading.svg').encode('base64').replace('\n', '') + "'") | |||
css = cssCompress(css) | |||
css = css.replace("url('img/sprites.png')","'data:image/png;base64," + read('css/img/sprites.png').encode('base64').replace('\n', '') + "'") | |||
print "=" * 40 | |||
print "Compiling", htmlfilename | |||
print "=" * 40 | |||
html = merge(html) | |||
html = html.replace('<link type="text/css" rel="Stylesheet" href="css/pannellum.css" />','<style type="text/css">' + css + '</style>') | |||
html = html.replace('<script type="text/javascript" src="js/Three.js"></script>','') | |||
html = html.replace('<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>','') | |||
html = html.replace('<script type="text/javascript" src="js/pannellum.js"></script>','<script type="text/javascript">' + js + '</script>') | |||
html = htmlCompress(html) | |||
output(addHeader(html), folder + htmlfilename) | |||
def main(): | |||
build(JS, CSS, HTML, 'pannellum') | |||
if __name__ == "__main__": | |||
main() |
@@ -0,0 +1,3 @@ | |||
#!/bin/sh | |||
python build.py |