Menu
▾
▴
[Ogoglio-commits] SF.net SVN: ogoglio: [500] maven/trunk/ogoglio-server/src/main/resources/ siteTemplates/body.html
|
From: <tre...@us...> - 2007-10-15 19:10:21
|
Revision: 500
http://ogoglio.svn.sourceforge.net/ogoglio/?rev=500&view=rev
Author: trevorolio
Date: 2007-10-15 12:10:14 -0700 (Mon, 15 Oct 2007)
Log Message:
-----------
Switched the body editor applet to just show the 3D, with editing functions exposed to the page via LiveConnect.
Made body.html use the new functions to display morph controls, animation triggers, and a save button.
Hopefully we will avoid future use of applets for any 2D controls.
Modified Paths:
--------------
maven/trunk/ogoglio-server/src/main/resources/siteTemplates/body.html
Modified: maven/trunk/ogoglio-server/src/main/resources/siteTemplates/body.html
===================================================================
--- maven/trunk/ogoglio-server/src/main/resources/siteTemplates/body.html 2007-10-15 16:15:44 UTC (rev 499)
+++ maven/trunk/ogoglio-server/src/main/resources/siteTemplates/body.html 2007-10-15 19:10:14 UTC (rev 500)
@@ -8,8 +8,13 @@
<title>Ogoglio Example: body</title>
<style type="text/css">
#main {
+ margin: 10px;
+ position: relative;
+ top: 0px;
+ left: 0px;
+ height: 430px;
overflow: hidden;
- width: 750px;
+ width: 730px;
}
.section {
@@ -24,9 +29,43 @@
}
#appletDiv {
- width: 800px;
- height: 600px;
+ width: 300px;
+ height: 400px;
+ position: absolute;
+ top: 0px;
+ left: 205px;
}
+
+#leftControlDiv {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 200px;
+ height: 400px;
+ overflow: auto;
+}
+
+#rightControlDiv {
+ position: absolute;
+ top: 0px;
+ left: 510px;
+ width: 200px;
+ height: 400px;
+}
+
+#morphControls form {
+ display: inline;
+}
+
+#animationControls form input {
+ margin-bottom: 5px;
+ width: 75px;
+}
+
+#textureForm {
+ margin-top: 25px;
+}
+
</style>
<script type="text/javascript">
@@ -36,8 +75,12 @@
var mainElement = null;
var titleElement = null;
var appletDiv = null;
-var textureDiv = null;
+var leftControlDiv = null;
+var rightControlDiv = null;
+var bottomControlDiv = null;
var textureForm = null;
+var morphControls = null;
+var animationControls = null;
var bodyXML = null;
@@ -57,7 +100,7 @@
function handleBodyConfiguration(xml){
if(xml == null){
- textureDiv.innerHTML = "";
+ bottomControlDiv.innerHTML = "";
return;
}
bodyXML = xml;
@@ -65,15 +108,69 @@
var ownerUsername = bodyXML.getAttribute("ownerusername");
textureForm.action = appPath + "/account/" + ownerUsername + "/body/" + bodyConfigurationID + "/texture";
+
+ setTimeout("awaitInitialLoad();", 1000);
}
+function awaitInitialLoad(){
+ var editor = document.getElementById("viewer");
+ if(editor != null && editor.completedInitialLoad()){
+ initControls();
+ return;
+ }
+ setTimeout("awaitInitialLoad();", 500);
+}
+
+function initControls(){
+ var editor = document.getElementById("viewer");
+ var morphNames = editor.getMorphNames();
+ var morphHTML = "";
+ for(var i = morphNames.length - 1; i >= 0; i--){
+ var settingValue = editor.getMorphSetting(morphNames[i]);
+ morphHTML += "<h4>" + morphNames[i] + ":</h4>";
+ morphHTML += "<form onsubmit='changeMorph(\"" + morphNames[i] + "\", 0.1);return false;'><input type='submit' value='+' name='" + morphNames[i] + "'></form>";
+ morphHTML += " <span id='" + morphNames[i] + " setting'>" + formatSettingValue(settingValue) + "</span> ";
+ morphHTML += "<form onsubmit='changeMorph(\"" + morphNames[i] + "\", -0.1);return false;'><input type='submit' value='-' name='" + morphNames[i] + "'></form>";
+ }
+ morphControls.innerHTML = morphHTML;
+
+ var animationNames = editor.getAnimationNames();
+ var animationHTML = "";
+ for(var i = 0; i < animationNames.length; i++){
+ if(animationNames[i] == "default"){
+ continue;
+ }
+ animationHTML += "<form onsubmit='playAnimation(\"" + animationNames[i] + "\"); return false;'><input type='submit' value='" + animationNames[i] + "'/></form>";
+ }
+ animationControls.innerHTML = animationHTML;
+}
+
+function playAnimation(animationName){
+ var editor = document.getElementById("viewer");
+ editor.playAnimation(animationName);
+}
+
+function changeMorph(morphName, delta){
+ var editor = document.getElementById("viewer");
+ var settingValue = editor.getMorphSetting(morphName) + delta;
+ if(settingValue < 0) settingValue = 0;
+ if(settingValue > 1) settingValue = 1;
+ editor.setMorphSetting(morphName, settingValue);
+ var settingSpan = document.getElementById(morphName + " setting");
+ settingSpan.innerHTML = formatSettingValue(settingValue);
+}
+
+function formatSettingValue(settingValue){
+ return settingValue.toPrecision(2);
+}
+
function writeApplet(){
if(loginCookie == null){
appletDiv.innerHTML = "No cookie. Please sign in or register as a guest.";
return;
}
var serviceURI = getServiceURI();
- var html = "<applet id='viewer' codebase='" + serviceURI + "' code='com.ogoglio.bodyeditor.BodyEditorApplet' archive='ogoglio-common.jar,ogoglio-body-editor-applet.jar' width='800' height='600' mayscript='true'>";
+ var html = "<applet id='viewer' codebase='" + serviceURI + "' code='com.ogoglio.bodyeditor.BodyEditorApplet' archive='ogoglio-common.jar,ogoglio-body-editor-applet.jar' width='300' height='400' mayscript='true'>";
html += "<param name='loginCookie' value='" + loginCookie + "' />";
html += "<param name='serviceURI' value='" + getServiceURI() + "' />";
html += "<param name='image' value='" + appPath + "/icons/32x32/face-monkey.png' />";
@@ -92,14 +189,26 @@
ogViewer.updateTextures();
}
+function doSave(){
+ var editor = document.getElementById("viewer");
+ if(editor == null){
+ return;
+ }
+ editor.saveBodyConfiguration();
+}
+
function init(){
populateMemberMenuItem();
titleElement = document.getElementById("title");
mainElement = document.getElementById("main");
appletDiv = document.getElementById("appletDiv");
- textureDiv = document.getElementById("textureDiv");
+ leftControlDiv = document.getElementById("leftControlDiv");
+ rightControlDiv = document.getElementById("rightControlDiv");
+ bottomControlDiv = document.getElementById("bottomControlDiv");
textureForm = document.getElementById("textureForm");
+ morphControls = document.getElementById("morphControls");
+ animationControls = document.getElementById("animationControls");
addAuthListeners(handleAuth, handleAuth);
}
@@ -109,13 +218,6 @@
<div id="header">
<strong><a href="index.html">Ogoglio Example</a></strong>
- <span id="search">
- <!-- <form style="margin: 0px;" method="get" action="http://www.google.com/search">
- <input type="text" size="20" name="q"/>
- <input type="hidden" name="q" value="site:example.com"/>
- <input type="submit" value="find"/>
- </form> -->
- </span>
</div> <!-- end header -->
<div id="headerMenu">
@@ -123,18 +225,27 @@
<span id="memberMenuItem"> </span>
</div> <!-- end header menu -->
+ <h2 id="title">Body Editor:</h2>
<div id="main">
- <h2 id="title">Body Editor:</h2>
+ <div id="leftControlDiv">
+ <div id="morphControls"> </div>
+ </div>
+ <div id="rightControlDiv">
+ <div id="animationControls"> </div>
+
+ <form id="textureForm" onsubmit="handleTextureForm();" target="textureTargetFrame" action="" enctype="multipart/form-data" method="post">
+ <input type="file" size="7" name="textureData" />
+ <input type="submit" value="upload custom skin" />
+ </form>
+ <iframe id="textureTargetFrame" name="textureTargetFrame" style="width: 1px; height: 1px;"></iframe>
+
+ </div>
<div id="appletDiv"> </div>
</div> <!-- end main -->
-<div id="textureDiv" style="text-align: center;">
- <form id="textureForm" onsubmit="handleTextureForm();" target="textureTargetFrame" action="" enctype="multipart/form-data" method="post">
- <input type="file" name="textureData" />
- <input type="submit" value="upload custom skin" />
- </form>
- <iframe id="textureTargetFrame" name="textureTargetFrame" style="width: 1px; height: 1px;"></iframe>
+<div id="bottomControlDiv" style="text-align: center;">
+ <form onsubmit="doSave(); return false"><input type="submit" value="save" /></form>
</div>
<div id="footer">
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
