1. Brent Tubbs
  2. schmarticles

Commits

Brent Tubbs  committed fea0577

extensive restyling

  • Participants
  • Parent commits dd61115
  • Branches default

Comments (0)

Files changed (3)

File img/ajax-loader.gif

  • Ignore whitespace
Old
Old image
New
New image

File index.html

View file
  • Ignore whitespace
 <html>
 <head>
+    <link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&amp;subset=latin" rel="stylesheet" type="text/css"> 
     <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8">
-    <link rel="stylesheet" href="css/text.css" type="text/css" media="screen" charset="utf-8">
-    <link rel="stylesheet" href="css/960.css" type="text/css" media="screen" charset="utf-8">
     <link rel="stylesheet" href="ui/css/ui-darkness/jquery-ui-1.8.2.custom.css" type="text/css" /> 
     <link rel="stylesheet" href="colorpicker/css/colorpicker.css" media="screen" type="text/css" />
-    <link rel="stylesheet" href="css/sb.css" type="text/css" media="screen" charset="utf-8">
+    <link rel="stylesheet" href="css/schmarticles.css" type="text/css" media="screen" charset="utf-8">
     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript" src="ui/js/jquery-ui-1.8.2.custom.min.js"></script>     
     <script type="text/javascript" src="js/jquery.query-2.1.7.js"></script>
     <script type="text/javascript" src="js/schmarticles.js"></script>
 </head>
 <body>
-<div id="header" class="container_12">
-    <div class="grid_12">
-        <h1 id="heading">Schmarticle Board</h1>
+<div id="header">
+    <div >
+        <h2 id="heading">Schmarticles</h2>
     </div>
     <div class="clear"></div>
 </div>
-<div class="container_12" id="bottom">
-    <div class="grid_12">
-    <h2>Oh Noes</h2>
-    <p>So like two weeks after releasing this I learned that it only works in
-    Google Chrome, my browser of choice. Sad news!  I wonder how many IE and
-    Firefox users came here and wondered what all the fuss was about.  Anyway,
-    the controls below should do two things when you fiddle with them: 
-    <ol>
-        <li>Update the 'Code' box to show you the LSL code to make the
-        particles you've configured.</li>
-        <li>Send the settings to the prim inworld so you can see what your
-        particle settings actually look like.</li>
-    </ol>
-    If you'd like to try the magic of Schmarticles for yourself, why not
-    download Google Chrome?  You can get it at <a
-    href="http://www.google.com/chrome">http://www.google.com/chrome</a>.
-    </p>
-    <hr />
-    </div>
-    <div class="clear"></div>
-    <div id="left_column" class="grid_4">
+<div  id="bottom">
+
+    <div class="block_wrapper">        
         <h2>Info</h2>
-        <div class="gridbox">
-            <p id="priminfo"></p>
+        <div class="inset_block gridbox">
             <div id="errors"></div>
             <div id="result"></div>
+            <a href="#" id="reset">Reset Particles</a>
+            <p id="priminfo"></p>
         </div>
-        <button type="button" id="reset">Reset Particles</button>
-        <h2>Creation and Flow</h2>
-        <p>
+    </div>
+
+    <div class="block_wrapper wide">
+        <h2>Code</h2>
+        <div class="inset_block wide">
+            <pre id="code"></pre>
+        </div>
+    </div>
+    
+    <div class="clear"></div>
+    
+    <div class="block_wrapper">
+        <h2>Behavior</h2>
+        <div class="inset_block">
+        <h4>Misc Options</h4>
         Pattern: <select id="PSYS_SRC_PATTERN">
                     <option value="PSYS_SRC_PATTERN_DROP">Drop</option>
                     <option value="PSYS_SRC_PATTERN_EXPLODE">Explode</option>
                     <option value="PSYS_SRC_PATTERN_ANGLE_CONE">Angle (Cone)</option>
                     <option value="PSYS_SRC_PATTERN_ANGLE">Angle (Flat)</option>
-                </select>
-        </p>
-        <h4>Misc Options</h4>
+                </select><br />
         <label for="PSYS_PART_BOUNCE_MASK"><input type="checkbox" id="PSYS_PART_BOUNCE_MASK"/>Bounce</label> <br/ >
         <label for="PSYS_PART_FOLLOW_SRC_MASK"><input type="checkbox" id="PSYS_PART_FOLLOW_SRC_MASK" />Move With Emitter</label> <br/ >
         <label for="PSYS_PART_FOLLOW_VELOCITY_MASK"><input type="checkbox" id="PSYS_PART_FOLLOW_VELOCITY_MASK" />Point in Movement Direction</label> <br/ >
         <label for="PSYS_PART_WIND_MASK"><input type="checkbox" id="PSYS_PART_WIND_MASK" />Affected by Wind</label> <br/ >
-        <label for="PSYS_PART_TARGET_LINEAR_MASK"><input type="checkbox" id="PSYS_PART_TARGET_LINEAR_MASK" />Move straight to target (if set)</label> <br/ >
-
+        <label for="PSYS_PART_TARGET_LINEAR_MASK"><input type="checkbox" id="PSYS_PART_TARGET_LINEAR_MASK" />Move straight to target (if set)</label>
+        <br />
         Target:<br />
         <select id="PSYS_SRC_TARGET_KEY"></select>
-        <div class="control_box">
-            Burst Radius: <span id="PSYS_SRC_BURST_RADIUS">0.5m</span><div id="radius_slider"></div>
+
+        <div class="inner_inner"> 
+            <h4>Emitter</h4>
+            <div class="control_box">
+                Burst Radius: <span id="PSYS_SRC_BURST_RADIUS">0.5m</span><div id="radius_slider"></div>
+            </div>
+            <div class="control_box">
+                <div class="grid_2 alpha">
+                    Inside Angle: <span id="inner_angle_span">0</span><div id="angle_inner_slider"></div>
+                </div>
+                <div class="grid_2 omega">
+                    Outside Angle: <span id="outer_angle_span">180</span><div id="angle_outer_slider"></div>
+                </div>
+            </div>
+            <div class="clear"></div>
+            <div class="control_box">
+                Particle Lifetime: <span id="particle_lifetime">5 sec</span><div id="lifetime_slider"></div>
+            </div>
+            <div class="control_box">
+                <div class="grid_2 alpha">
+                    Burst Interval: <span id="burst_interval">Continuous</span><div id="interval_slider"></div>
+                </div>
+                <div class="grid_2 omega">
+                    Particles per Burst: <span id="count">1</span><div id="count_slider"></div>
+                </div>
+            </div>
+            <div class="clear"></div>
         </div>
-        <div class="control_box">
-            <div class="grid_2 alpha">
-                Inside Angle: <span id="inner_angle_span">0</span><div id="angle_inner_slider"></div>
+
+        <div class="inner_inner"> 
+            <h4>Motion</h4>
+            <div class="control_box">
+                <div class="grid_2 alpha">
+                    Gravity: <span id="gravity">0</span><div id="gravity_slider"></div>
+                </div>
+                <div class="grid_2 omega">
+                    Spin: <span id="spin">0</span><div id="spin_slider"></div>
+                </div>
             </div>
-            <div class="grid_2 omega">
-                Outside Angle: <span id="outer_angle_span">180</span><div id="angle_outer_slider"></div>
-            </div>
-        </div>
-        <div class="clear"></div>
-        <div class="control_box">
-            Particle Lifetime: <span id="particle_lifetime">5 sec</span><div id="lifetime_slider"></div>
-        </div>
-        <div class="control_box">
-            <div class="grid_2 alpha">
-                Burst Interval: <span id="burst_interval">Continuous</span><div id="interval_slider"></div>
-            </div>
-            <div class="grid_2 omega">
-                Particles per Burst: <span id="count">1</span><div id="count_slider"></div>
-            </div>
-        </div>
-        <div class="clear"></div>
-        <hr />
-        <h4>Particle Motion</h4>
-        <div class="control_box">
-            <div class="grid_2 alpha">
-                Gravity: <span id="gravity">0</span><div id="gravity_slider"></div>
-            </div>
-            <div class="grid_2 omega">
-                Spin: <span id="spin">0</span><div id="spin_slider"></div>
-            </div>
-        </div>
-        <div class="clear"></div>
-        <div class="control_box">
-            <div class="grid_2 alpha">
+
+            <div class="control_box">
                 Min Speed: <span id="min_speed">1 mps</span><div id="min_speed_slider"></div>
-            </div>
-            <div class="grid_2 omega">
                 Max Speed: <span id="max_speed">1 mps</span><div id="max_speed_slider"></div>
             </div>
         </div>
     </div>
-    <div class="grid_8">
+    </div>
+
+
+    <div class="block_wrapper wide">
         <h2>Appearance</h2>
-    </div>
-    <div id="middle_column" class="grid_4">
-        <h4>Texture</h4>
-        <div class="grid_2 alpha">
+    <div class="inset_block wide">
+
+        <div class="inner_block">
+            <h4>Texture</h4>
             <select id="texture_select"></select>
-            <br /><label for="PSYS_PART_EMISSIVE_MASK"><input type="checkbox" id="PSYS_PART_EMISSIVE_MASK" />Full Bright</label> <br/ >
+            <div class="alpha_container"><img src="img/default_particle.png" id="img_preview"/></div>
+            <label for="PSYS_PART_EMISSIVE_MASK"><input type="checkbox" id="PSYS_PART_EMISSIVE_MASK" />Full Bright</label>
         </div>
-        <div class="grid_2 omega">
-            <div class="alpha_container"><img src="img/default_particle.png" id="img_preview"/></div>
+
+        <div class="inner_block"> 
+            <h4>Color</h4>
+
+            <div class="inner_inner">
+                <div id="PSYS_PART_START_COLOR" class="colorpick"><div style="background-color: rgb(0, 0, 0); "></div></div>
+                Start Color:<br />
+                <div id="start_color_label" class="color_label">&lt;1,1,1&gt;</div>
+            </div>
+
+            <div class="inner_inner">
+                <div id="PSYS_PART_END_COLOR" class="colorpick"><div style="background-color: rgb(0, 0, 0); "></div></div>
+                End Color:<br />
+                <div id="end_color_label" class="color_label">&lt;1,1,1&gt;</div>
+            </div>
+
         </div>
-        <div class="clear"></div>
-        <hr />
-        <h4>Color</h4>
-        <div class="grid_2 alpha">
-            Start Color
-            <div id="PSYS_PART_START_COLOR" class="colorpick"><div style="background-color: rgb(0, 0, 0); "></div></div>
-            <div class="clear"></div>
-            <div id="start_color_label" class="color_label">&lt;1,1,1&gt;</div>
-        </div>
-        <div class="grid_2 omega">End Color
-            <div id="PSYS_PART_END_COLOR" class="colorpick"><div style="background-color: rgb(0, 0, 0); "></div></div>
-            <div class="clear"></div>
-            <div id="end_color_label" class="color_label">&lt;1,1,1&gt;</div>
-        </div>
-        <div class="clear"></div>
-    </div>
-    <div id="right_column" class="grid_4">
-        <h4>Size</h4>
-        <div class="grid_2 alpha">
-            <div class="alpha_container">
-                <div id="start_resizeMe" class="resizable"><div id="start_resizeSE" class="resizeSE"></div></div>
+
+        <div class="inner_block" style="clear:left;">
+            <h4>Size</h4>
+            <div class="inner_inner first">
+                <div class="alpha_container">
+                    <div id="start_resizeMe" class="resizable"><div id="start_resizeSE" class="resizeSE"></div></div>
+                </div>
+                Start Size:<br /> <span id="start_size_span">0.5m x 0.5m</span>
             </div>
-            Start Size:<br /> <span id="start_size_span">0.5m x 0.5m</span>
-        </div>
-        <div class="grid_2 omega">
-            <div class="alpha_container">
-                <div id="end_resizeMe" class="resizable"><div id="end_resizeSE" class="resizeSE"></div></div>
+            <div class="inner_inner">
+                <div class="alpha_container">
+                    <div id="end_resizeMe" class="resizable"><div id="end_resizeSE" class="resizeSE"></div></div>
+                </div>
+                End Size:<br /> <span id="end_size_span">0.5m x 0.5m</span>
             </div>
-            End Size:<br /> <span id="end_size_span">0.5m x 0.5m</span>
-        </div>
-        <div class="clear"></div>
-        <hr />
-    <div class="clear"></div>
-        <h4>Alpha</h4>
-        <div class="grid_2 alpha">
-            <div id="start_alpha_slider"></div>
-            <div class="alpha_label">
-                Start: <span id="start_alpha_span">1</span>
+        </div> 
+        
+        <div class="inner_block">
+            <h4>Alpha</h4>
+            <div class="inner_inner">
+                <div id="start_alpha_slider"></div>
+                <div class="alpha_preview" >
+                    <div id="start_alpha_under" class="control_box">
+                        <div id="start_alpha_over"></div>
+                    </div>
+                </div>
+                <div class="alpha_label">
+                    Start: <span id="start_alpha_span">1</span>
+                </div>
             </div>
-            <div class="alpha_preview" >
-                <div id="start_alpha_under" class="control_box">
-                    <div id="start_alpha_over"></div>
+            <div class="inner_inner">
+                <div id="end_alpha_slider"></div>
+                <div class="alpha_preview" >
+                    <div id="end_alpha_under" class="control_box">
+                        <div id="end_alpha_over"></div>
+                    </div>
+                </div>
+                <div class="alpha_label">
+                    End: <span id="end_alpha_span">1</span>
                 </div>
             </div>
         </div>
-        <div class="grid_2 omega">
-            <div id="end_alpha_slider"></div>
-            <div class="alpha_label">
-                End: <span id="end_alpha_span">1</span>
-            </div>
-            <div class="alpha_preview" >
-                <div id="end_alpha_under" class="control_box">
-                    <div id="end_alpha_over"></div>
-                </div>
-            </div>
-            <div class="clear"></div>
-        </div>
-        <div class="clear"></div>
+
     </div>
-    <!--<div class="clear"></div>-->
-    <div class="grid_8">
-        <h2>Code</h2>
-        <pre id="code" class="brush: lsl;"></pre>
     </div>
-    <div class="clear"></div>
+
 </div>
 <div id="bottombanner"></div>
 </body>

File js/schmarticles.js

View file
  • Ignore whitespace
 //
 //TODO: use hasownpropert In my object property for loops
 
-//var working = '<img src="/img/ajax-loader.gif" />';
-var working = '<img src="img/loading-squares.gif" />';
+var working = '<img src="img/ajax-loader.gif" />';
+//var working = '<img src="img/loading-squares.gif" />';
 var success = '<img src="img/thumbs_up.png" />';
 var failure = '<img src="img/thumbs_down.png" />';
 var schmarticleVersion = 0.7;
             }
         }
         out = out.replace(/</g, '').replace(/>/g, '').replace(/ /g,'');
-        console.debug(this);
         return out;
     }
 
         }
     });
 
-    sizeable_size = 140;
+    sizeable_size = 100;
     $('#start_resizeMe').Resizable({
         minWidth: 1,
         minHeight: 1,
             width = parseFloat(width.substring(0, width.length - 2));
             height = parseFloat(height.substring(0, height.length - 2));
             //scale down to valid particle size
-            width = width / 140 * 4.0;
-            height = height / 140 * 4.0;
+            width = width / 100 * 4.0;
+            height = height / 100 * 4.0;
             //trim to a reasonable number of digits
             width = width.toString().substring(0, 4);
             height = height.toString().substring(0, 4);
             width = parseFloat(width.substring(0, width.length - 2));
             height = parseFloat(height.substring(0, height.length - 2));
             //scale down to valid particle size
-            width = width / 140 * 4.0;
-            height = height / 140 * 4.0;
+            width = width / 100 * 4.0;
+            height = height / 100 * 4.0;
             //trim to a reasonable number of digits
             width = width.toString().substring(0, 4);
             height = height.toString().substring(0, 4);