www.webdeveloper.com
Results 1 to 12 of 12

Thread: Dilution calculator (really ugly)

  1. #1
    Join Date
    Aug 2014
    Posts
    7

    Dilution calculator (really ugly)

    Hi.

    I have coded a small dilution calculator to calculate the amount of detergent needed for a correct mixing ratio trough two steps of dilution. First in a bottle with given volume and then through a foam lance. A foam lance is used to foam schampoo when you wash your car.

    So to my problem. I have used two different scripts so it's actually two calculators in one. The first one is very simple just to dilute detergent with water or mix oil in gas for two stroke engines..

    The second one is the serial dilution calculator for the foam lance.

    Both scripts works and validates fine, but is not coded by the same "artist" so it looks a little bit sloppy. I have used and edited "free to use scripts"

    Now I need help with two things that I can't figure out myself. (you can se the working but really ugly app here!) but please read through the post...

    In the code below I edited the recalculation to fl. oz to measure in milliliters instead (from 128 to 1000. Does this apply the right way?

    Code:
    function pwCalc()
            {
              var C = document.getElementById("fin_mr_num").value / (document.getElementById("fin_mr_den").value * 1.0 + document.getElementById("fin_mr_num").value * 1.0) * (document.getElementById("pw_mr_den").value * 1.0 + document.getElementById("pw_mr_num").value * 1.0) / document.getElementById("pw_mr_num").value;
              document.getElementById("premixConcentration").value = (C * 100).toFixed(2);
              document.getElementById("detergent_vol").value = (C * document.getElementById("premix_vol").value).toFixed(3);
              document.getElementById("detergent_vol_oz").value = (C * document.getElementById("premix_vol").value * 1000).toFixed(1);
              document.getElementById("water_vol").value = ((1-C) * document.getElementById("premix_vol").value).toFixed(3);
              document.getElementById("water_vol_oz").value = ((1-C) * document.getElementById("premix_vol").value * 1000).toFixed(1);
            }
    This second script is for the simpel mix ratio calculator:

    Code:
        function clear_field(field) {
            if (field.value == field.defaultValue) {
                field.value = ''
            }
        }
    
        function calcOil() {
            var gastm = document.gasoil.gasm.value; //get liters
            var gomrtm = document.gasoil.gomrm.value; //get mixture ratio
            var gasom = (gastm * 10); //convert petrol to dl
            var oilom = ((gasom) / gomrtm); //divide by ratio
            document.gasoil.oilqtym.value = (oilom); //required oil
            document.gasoil.gomr.value = (document.gasoil.gomrm.value); //mixture ratio
            document.gasoil.oilqty.value = (oilom * 0.033814022701843); //required oil converted to ounces
        }
    Is there a way to combine the two scripts to one

    My second problem is to wrap the calculators in a good locking way so it is easy to use for the end user.

    Below is my sorry ass try to write some html. I have used a few wysiwyg editors which made the code even more messy.

    HTML Code:
    <meta charset="UTF-8" />
    <title></title>
    <center>&nbsp;</center>
    
    <p align="center">&nbsp;</p>
    
    <div align="center">
    <center>
    <table border="1" bordercolor="#C0C0C0" cellpadding="10" cellspacing="1" cols="1" style="background-color: #FFFFFF; width: 550px;">
    	<tbody>
    		<tr>
    			<td style="width: 500px;">
    			<p align="center" style="background-color: #FFFFFF;"><span style="color:#000000;"><b><img height="62" src="bbv_logo_color.png" width="456" /></b></span></p>
    
    			<hr />
    			<p><span style="color:#000000;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation</span></p>
    
    			<p>&nbsp;</p>
    
    			<form name="gasoil">
    			<center>
    			<table border="1" bordercolordark="#999999" cellpadding="10" cellspacing="1" cols="1" width="350">
    				<tbody>
    					<tr>
    						<td>
    						<p align="right"><span style="color:#000000;">Ammount of final dilution (in Liters):</span></p>
    						</td>
    						<td><span style="color:#000000;"><input name="gasm" onfocus="clear_field(this)" size="6" type="text" value="1" /></span></td>
    					</tr>
    					<tr>
    						<td>
    						<p align="right"><span style="color:#000000;">Desired dilution ratio:</span></p>
    						</td>
    						<td><span style="color:#000000;"><input name="gomrm" onfocus="clear_field(this)" size="6" type="text" value="50" />:1</span></td>
    					</tr>
    					<tr>
    						<td colspan="2">
    						<center><span style="color:#000000;"><input onclick="calcOil()" type="button" value="Beräkna" />&nbsp;&nbsp;&nbsp; <input type="reset" value="Nollställ" /></span></center>
    						</td>
    					</tr>
    					<tr>
    						<td colspan="2">
    						<center><span style="color:#000000;">You need<input name="oilqtym" readonly="readonly" size="14" type="text" value="Klicka beräkna!" />dl concentrate</span></center>
    						</td>
    					</tr>
    				</tbody>
    			</table>
    			</center>
    			</form>
    
    			<hr />
    			<p>&nbsp;</p>
    			</td>
    		</tr>
    	</tbody>
    </table>
    </center>
    </div>
    
    <p><span style="color:#000000;">This calculator computes the amount of detergent needed in the pre-mix jug, using the given mixing ratios.</span></p>
    
    <table>
    	<tbody>
    		<tr>
    			<td>
    			<table class="calc">
    				<tbody>
    					<tr style="font-size:small">
    						<th>&nbsp;</th>
    						<th><span style="color:#000000;">Detergent</span></th>
    						<th><span style="color:#000000;">Water</span></th>
    					</tr>
    					<tr>
    						<td><span style="color:#000000;">Final Mixing Ratio:</span></td>
    						<td><span style="color:#000000;"><input id="fin_mr_num" size="3" value="1" />:</span></td>
    						<td><span style="color:#000000;"><input id="fin_mr_den" size="3" value="20" /></span></td>
    					</tr>
    					<tr>
    						<td><span style="color:#000000;">Pressure Washer Mixing Ratio:</span></td>
    						<td><span style="color:#000000;"><input id="pw_mr_num" size="3" value="1" />:</span></td>
    						<td><span style="color:#000000;"><input id="pw_mr_den" size="3" value="7" /></span></td>
    					</tr>
    				</tbody>
    			</table>
    			</td>
    			<td><span style="color:#000000;"><span class="small" style="position:relative; top:2em">Tip: Set to 1:0 for a general mixing calculation.</span></span></td>
    		</tr>
    	</tbody>
    </table>
    
    <p><span style="color:#000000;">Desired Volume of Pre-mix:&nbsp;<input id="premix_vol" size="3" value="1" />&nbsp;Liters<br />
    <br />
    <input name="pwButton" onclick="pwCalc()" type="button" value="Calculate..." /></span></p>
    
    <table class="calc">
    	<tbody>
    		<tr>
    			<td><span style="color:#000000;">Pre-mix Concentration:</span></td>
    			<td><span style="color:#000000;"><input id="premixConcentration" size="5" />%</span></td>
    			<td>&nbsp;</td>
    		</tr>
    		<tr>
    			<td><span style="color:#000000;">Detergent:</span></td>
    			<td><span style="color:#000000;"><input id="detergent_vol" size="5" />L=</span></td>
    			<td><span style="color:#000000;"><input id="detergent_vol_oz" size="5" /> ml</span></td>
    		</tr>
    		<tr>
    			<td><span style="color:#000000;">Water:</span></td>
    			<td><span style="color:#000000;"><input id="water_vol" size="5" />L=</span></td>
    			<td><span style="color:#000000;"><input id="water_vol_oz" size="5" /> ml</span></td>
    		</tr>
    	</tbody>
    </table>
    
    <p><span style="color:#000000;">The water volume needs typically not be measured since we can just top up the jug with water.</span></p>
    I really need help to clean up this little web-app so it looks nice.

    This project is for a small detailing forum and is totally bro bono and noncommercial!!

  2. #2
    Join Date
    Aug 2014
    Posts
    7
    Anyone, really?

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,414
    I would need more specific information...

    1. Is the layout how you want the final project to look?
    2. Can you give some specific inputs that result in specific outputs you expect to see from the calculations? More than one would be nice.
    3. Which elements are for user specific entry and which are output elements that are displayed after calculations?

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,413
    You can create a new function, eg

    Code:
    function mynewFunc( f, act ){
    
    	switch( act ){
    	
    		case "pwButton": pwCalc( f ); break;
    		
    		case "gas": calcOil( f ); 	break;
    	
    	}
    
    }
    Then remove the </form> tag from the first form, remove the <form for the beginning of the second form so you create one large form.

    rename the calculate buttons to

    <input name="gas" type="submit" value="calculate" onclick="mynewFunc(document.forms.myform, this.name);" />

    and

    <input name="pwButton" onclick="mynewFunc(document.forms.myform ,this.name)" type="button" value="Calculate..." />

    Then you should be getting somewhere with an all in one form.

    your passing a form object to the new function that then gets passed to the functions so your functions code changes to

    Code:
    function pwCalc( f ){
    var C = f.fin_mr_num.value / (f.fin_mr_den.value * 1.0 + f.fin_mr_num.value * 1.0) * (f.pw_mr_den.value * 1.0 + f.pw_mr_num.value * 1.0) / f.pw_mr_num.value;
    f.premixConcentration.value = (C * 100).toFixed(2);
    f.detergent_vol.value = (C * f.premix_vol.value).toFixed(3);
    f.detergent_vol_oz.value = (C * f.premix_vol.value * 1000).toFixed(1);
    f.water_vol.value = ((1-C) * f.premix_vol.value).toFixed(3);
    f.water_vol_oz.value = ((1-C) * f.premix_vol.value * 1000).toFixed(1);
    }
    		
    		
    function clear_field(field) {
            if (field.value == field.defaultValue) {
                field.value = ''
            }
        }
    
        function calcOil(g) {
            var gastm = g.gasm.value; //get liters
            var gomrtm = g.gomrm.value; //get mixture ratio
            var gasom = (gastm * 10); //convert petrol to dl
            var oilom = ((gasom) / gomrtm); //divide by ratio
            g.oilqtym.value = (oilom); //required oil
            //g.gomr.value = (g.gomrm.value); //mixture ratio
            //g.oilqty.value = (oilom * 0.033814022701843); //required oil converted to ounces
        }
    make sure you rename this <form name="gasoil"> to <form name="myform" action="javascript:;" > and move it outside of the table, you never start a form inside a tables <TD> unless the closing </form tag is in the same <TD tag.

    Much less code modding to be done and you can amend the functions as needed.
    Last edited by \\.\; 08-27-2014 at 01:32 PM.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  5. #5
    Join Date
    Aug 2014
    Posts
    7
    Thank you, I got it to work and testing it on jsfiddle.net http://jsfiddle.net/7959r33r/13/

    The problem now is that I am all lost in the html <td><tr><table>. The layout looks like ****!

    I want it to be two calculators obviously first the easier calcOil and then the foamLance calculator.

    I want them to be a little more boxed in than what they are today look here

    I will create an image of what I want it to look like so you guys can hint me on the coding..

  6. #6
    Join Date
    Aug 2014
    Posts
    7
    This is how I want it to look like. Link to mockup picture

    The javascript works (Thank you)

    But the html is a big mess.. You can see the calculator here

  7. #7
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,270
    Use CSS style with class to avoid mixing code and format.
    See w3scholls.com CSS tutorial with, for example, this demo page
    Last edited by 007Julien; 08-28-2014 at 07:40 AM. Reason: complements

  8. #8
    Join Date
    Aug 2014
    Posts
    7
    CSS would be nice. But my knowledge of CSS is fairly limited, it would take time. As long as not one of you guys maby get me started by setting up the framework?

    That would be a flying start..

    Best regards

  9. #9
    Join Date
    Aug 2014
    Posts
    7
    Does anyone know where I can pay for some attention and help with my problem?

  10. #10
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,413
    What you need is a WYSIWYG editor that like Serif WebPage Plus will allow your to design web pages in a graphical format, then add in your page elements and scripting and then render to a web page / site.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  11. #11
    Join Date
    Aug 2014
    Posts
    7
    Ok.

    I don't know where to find a wysiwyg that does that..

  12. #12
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,413
    I just mentioned one in my comment, Serif Web Page Plus, you also have Macromedia Fireworks which is a bit old and possibly superseded by an Adobe product, it all depends on what you are after.

    Your quickest option is to extend the existing table and put the new elements in the extended area, chop out some images from the example you gave and have them placed in the table along with changing background colours of the table you have.

    Its dirty but quick and you will find plenty of objection to using tables for layout, personally I see nothing wrong, if it work use it is my philosophy.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles