Source language: Translate to:

Mixing liquid calculator

Questions and information about using VBScript and JavaScript in NeoBook functions

Moderator: Neosoft Support

Mixing liquid calculator

Postby smartmedia » Mon Feb 27, 2012 10:27 am

Hi..

I need to make the same calculations as this example with NB if possible.
Code: Select all
http://fractalbit.gr/diy/

This example is made in java script.
Basically, is a DIY calculator for mixing liquids for e-cigarette.
Any ideas ???

Thanks
User avatar
smartmedia
 
Posts: 889
Joined: Fri Apr 01, 2005 6:50 am
Location: Hellas

Postby Gaev » Mon Feb 27, 2012 11:01 am

smartmedia:

I don't know Greek ... but I don't see what is difficult about accomplishing the same with NeoBook Objects ... it has Sliders and Event Triggers.

Or are you refering to the actual formulae used to produce the results ?
User avatar
Gaev
 
Posts: 3728
Joined: Fri Apr 01, 2005 7:48 am
Location: Toronto, Canada

Postby smartmedia » Wed Feb 29, 2012 1:56 am

Hi..

Gaev, i am talking about the formula. I am not so smart in mathematics.. :evil:
User avatar
smartmedia
 
Posts: 889
Joined: Fri Apr 01, 2005 6:50 am
Location: Hellas

Postby Gaev » Wed Feb 29, 2012 6:07 am

smartmedia:

If you can "translate/change all greek text" (like ΤΕΛΙΚΟ ΜΕΙΓΜΑ) in the code below to English words I can understand ... and then repost the result ... I will make an attempt to explain what it is doing.

Note that the author is exploiting the power of jQuery for doing the calculations on the set of values ... one of the buttons dynamically creates a new set of widgets for the user to enter its values ... of course, NeoBook does not facilitate dynamic creation of Objects ... so you will have to settle for some kind of fixed maximum number ... then setup objects for the maximum set ... and Hide/Show as necessary.
Code: Select all
<!DOCTYPE HTML>
<html lang="en-US">
<head>
   <meta charset="UTF-8">
   <title>fractalbit's diy calculator</title>

   <style type="text/css">
      
      body {
         background: #AEB6C6;
         background-attachment: fixed;
         background-image: url(bg.jpg);
         background-repeat: no-repeat;
         background-position: bottom right;

         font-family: Helvetica;
      }

      a, a:visited {
         text-decoration: underline;
         color: #6464A2;
      }


      #diyapp {
         width: 960px;
         margin: 150px auto;
         text-shadow: 1px 1px 12px rgba(255,255,255,1);         
      }

      .ingredient {
         overflow: hidden;
         clear: both;
      }


      .labels > div, .ingredient > div{
         float: left;
         margin: 25px 15px;   
         text-align: center;   
      }

      .labels div div {
         padding: 5px 8px;
         background: #C3C8D6;
         border: 1px solid #8591A9;
         border-radius: 5px;
         width: 100%;
      }

      #totals div div {
         background: #A2AABD;
         border: 1px solid #D8DBE4;
      }

      div {
         border: 0px solid red;
      }

      div.col1{
         width: 215px;
      }

      div.col2{
         width: 250px;         
      }

      div.col3 {            
         width: 250px;
      }

      div.col4 {
         width: 100px;
      }

      #ingredients input {
         position: relative;
         top: -5px;
      }

      #ingredients input[type="text"] {
         position: relative;
         top: -5px;
         background: #AEB6C6;
         border: 1px solid #666;
         height: 20px;
         line-height: 20px;
         padding-left: 5px;
         width: 185px;
         display: inline-block;
      }

      #ingredients input:hover {
         border: 1px solid #fff;
      }


      .ingredient {
         padding: 0;
         position: relative;
      }

      .labels {
         clear: both;
         overflow: hidden;
      }

      span.nic {
         position: absolute;
         top: 0px;
         left: 645px;
      }

      span.vol {
         position: absolute;
         top: 0px;
         left: 370px;
      }

      .nicotine.ui-slider .ui-slider-range { background: #FFE980; border: 1px solid #d69320}
      .nicotine.ui-slider .ui-slider-handle { border-color: #d69320;}
      .volume.ui-slider .ui-slider-range { background: #A3D97B; border: 1px solid #62A530}
      .volume.ui-slider .ui-slider-handle { border-color: #62A530; }


      a#add {
         display: block;
         padding: 12px 25px;
         width: 300px;
         margin: 20px auto;
         font-size: 18px;
         font-weight: normal;
         color: #333;
         background: #A3D97B;
         border: 1px solid #62A530;
         float: none;
         border-radius: 10px;
         text-shadow: none;
         text-align: center;

         text-decoration: none;
      }
      a#add:hover{
         background: #86CD53;
         color: #000;
      }

      #footer{
         position: fixed;
         bottom: 0;
         left: 47%;
         width: 120px;
         padding-bottom: 4px;
         font-size: 12px;
         color: #666;
      }

      #share_text {
         width: 350px;
         padding: 10px;
         background: #C3C8D6;
         border: 1px solid #8591A9;
         border-radius: 5px;
         margin: 0 auto;
         margin-bottom: 50px;
      }


   </style>

   
   <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" type="text/css" media="all" />

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

   <script type="text/javascript">
         

         $(function() {   

            
            function share(data, vol, nic){
               var txt = "";
               
               for(var i=0, len=data.length; i<len; i++){
                  var sistatiko = data[i];
                  var num = i+1;
                  sistatiko.name == '' ? tmp = 'Συστατικό ' + num : tmp = sistatiko.name;               
                  txt += tmp + ", "+sistatiko.percent+" (" + sistatiko.volume + " ml, " + sistatiko.nicotine + " mg)
";   
               }               

               txt += "ΤΕΛΙΚΟ ΜΕΙΓΜΑ, " + vol + ", " + nic;
               txt += '<hr /><span style="font-size: 11px">Δημιουργήθηκε με το <a href="http://fractalbit.gr/diy">fractalbit\'s diy calculator</a></span>';
               $("#share_text").html(txt);

            }

            function add_sliders(obj){   
            
               
               $(obj).find(".nicotine").bind( "slide slidecreate slidechange", function(event, ui) {
                  sistatika = [];   

                  var curVal;
                  var curID = $(this).attr('id');

                  ui.value == undefined ? curVal = $(this).slider("value") : curVal = ui.value;

                  $(this).next("span").html(curVal+" mg");
                                    
                  totalVolume = totalNIC = 0;

                  $(".volume").each(function(index) {
                     totalVolume += $(this).slider("value") + 0;
                  });
                        
                  if(totalVolume > 0) totalVolume = totalVolume.toFixed(2);
                  
                  $(".nicotine").each(function(index) {
                     
                     var curVol = $(this).parent().find(".volume").slider("value");
                     
                     var percent = curVol / totalVolume;                     

                     if(curID == $(this).attr('id')){
                        var curNIC = percent * curVal;
                        var tempNIC = curVal;
                     }else{
                        var curNIC = percent * $(this).slider("value");                                       
                        var tempNIC = $(this).slider("value");                                       
                     }                        
                     
                     totalNIC += curNIC;
                     $(this).parent().find(".percent").html((percent*100).toFixed(1)+'%');
                     
                     var name = $(this).parent().find(".sistatiko").val();
                     var sistatiko = {
                        volume: curVol,
                        percent: (percent*100).toFixed(1)+'%',
                        nicotine: tempNIC,
                        name: name
                     };

                     sistatika.push(sistatiko);
                  })

                  share(sistatika, totalVolume+" ml", totalNIC.toFixed(1) + " mg");                  
                                 
                  $("#volume_final div").html(totalVolume+" ml");
                  $("#nicotine_final div").html(totalNIC.toFixed(1) + " mg");
               });

               $(obj).find(".volume").bind( "slide slidecreate slidechange", function(event, ui) {

                  sistatika = [];   

                  var curVal;
                  var curID = $(this).attr('id');

                  ui.value == undefined ? curVal = $(this).slider("value") : curVal = ui.value;

                  $(this).next("span").html(curVal+" ml");

                  totalVolume = totalNIC = 0;

                  $(".volume").each(function(index) {
                     if(curID == $(this).attr('id')){
                        totalVolume += curVal;
                     }else{
                        totalVolume += $(this).slider("value");                                       
                     }
                  })

                  if(totalVolume > 0) totalVolume = totalVolume.toFixed(2);
                  
                  $(".nicotine").each(function(index) {
                     var volID = $(this).parent().find(".volume").attr('ID');
                     if(volID == curID){
                        var curVol = curVal;
                     }else{
                        var curVol = $(this).parent().find(".volume").slider("value");
                     }
                     
                     var percent = curVol / totalVolume;                     

                     var curNIC = percent * $(this).slider("value");
                     totalNIC += curNIC;

                     $(this).parent().find(".percent").html((percent*100).toFixed(1)+'%');


                     var name = $(this).parent().find(".sistatiko").val();
                     var sistatiko = {
                        volume: curVol,
                        percent: (percent*100).toFixed(1)+'%',
                        nicotine: $(this).slider("value"),
                        name: name
                     };

                     sistatika.push(sistatiko);
                  })

                  share(sistatika, totalVolume+" ml", totalNIC.toFixed(1) + " mg");      
                                 
                  $("#volume_final div").html(totalVolume+" ml");
                  $("#nicotine_final div").html(totalNIC.toFixed(1) + " mg");
               });

               $(obj).find(".nicotine").slider({
                  orientation: "horizontal",
                  range: "min",
                  max: 50,
                  value: 24
               });

               $(obj).find(".volume").slider({
                  orientation: "horizontal",
                  range: "min",
                  max: 50,
                  step: 0.5,
                  value: 10
               });


               var availableTags = [
                        "PG (προπυλενογλυκόλη",
                        "VG (γλυκερίνη)",
                        "WFI (ενέσιμο/απιονισμένο νερό)"
                     ];         

               $(obj).find(".sistatiko").autocomplete({
                        source: availableTags,
                        autoFocus: true
                     });            
            }         

            add_sliders("#ingredients");


            $("#add").click(function(event){
               event.preventDefault();
               var num = $(".ingredient").length + 1;
               //alert(num);
               var sistatiko = '<div id="ingredient'+num+'" class="ingredient"><div id="type'+num+'" class="type col1"><input type="checkbox" class="flavor" /><input type="text" name="ing'+num+'" class="sistatiko" title="Τσεκάρετε το κουτάκι αριστερά αν πρόκειται για άρωμα" /></div><div id="vol'+num+'" class="volume col2"></div><span class="vol"></span><div id="nic'+num+'" class="nicotine col3"></div><span class="nic"></span><div id="per'+num+'" class="percent col4"></div></div>';

               $('#ingredients').append(sistatiko);
               add_sliders('#ingredient'+num);               
               $('#ingredient'+num+' input').focus();
            });

            $(".flavor").live('click', function(){
               var parent = $(this).parents(".ingredient");

               if($(this).is(':checked')){

                  $(parent).find(".nicotine").slider("value", 0);
                  

                  $(parent).find(".volume").slider({
                     orientation: "horizontal",
                     range: "min",
                     max: 5,
                     step: 0.05
                  });   
                  $(parent).find(".volume").slider("value", 1);
               }else{
                  add_sliders(parent);
               }

               
            })
         });


   </script>


   <script type="text/javascript">
   // Google Analytics tracking code
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-395935-8']);
     _gaq.push(['_trackPageview']);

     (function() {
       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();

   </script>
</head>
<body>

<div id="diyapp">

   <div id="header" class="labels">
      <div class="col1"><div>Συστατικό</div></div>
      <div class="col2"><div>Ποσότητα</div></div>
      <div class="col3"><div>Νικοτίνη</div></div>
      <div class="col4"><div>Ποσοστό</div></div>
   </div>

   <div id="ingredients">
      <div id="ingredient1" class="ingredient">
         <div id="type1" class="type col1"><input type="checkbox" class="flavor" /><input type="text" name="ing1" class="sistatiko" title="Τσεκάρετε το κουτάκι αριστερά αν πρόκειται για άρωμα" /></div>
         <div id="vol1" class="volume col2"></div><span class="vol"></span>
         <div id="nic1" class="nicotine col3"></div><span class="nic"></span>
         <div id="per1" class="percent col4"></div>      
      </div>
   </div>

   <div id="totals" class="labels">

      <div class="col1"><div>Σύνολα</div></div>
      <div id="volume_final" class="col2"><div></div></div>
      <div id="nicotine_final" class="col3"><div></div></div>
      <div id="result" class="col4"><div>100%</div></div>
   </div>

   <a href="" id="add">Προσθήκη Συστατικού</a>

   <div id="share_text"></div>
</div>

<div id="footer">
   © 2012, <a href="http://fractalbit.gr">fractalbit.gr</a>
</div>

</body>
</html>
User avatar
Gaev
 
Posts: 3728
Joined: Fri Apr 01, 2005 7:48 am
Location: Toronto, Canada

Postby Gaev » Wed Feb 29, 2012 6:42 am

smartmedia:

I did a Google Translate of the page in question ... all the text does not get translated because some of it is created dynamically (via Javascript after the document is rendered by the Browser which Google can not control) ... but I got the gist of it ...

1) the first column is Component ... just a check box that resets the values in column 2 and 3

2) the second column is Quantity (in ml.)

3) the third column is Nicotine (in mg.)

4) the fourth column is Percentage

5) the green button says Add Component ... what I previously refered to as "a set"

The way it is doing the calculations is ...

a) all the values of the Quantity are added to get Total Quantity

b) the Percentage in each row is Quantity in that row as a percentage of Total Quantity

c) when calculating the Total Nicotine, it adds from each row ...

Nicotine for that row * Percent for that row

That is all ... if you use Objects/Variables in NeoBook like Qty1, Qty2 etc. ... then you should be able to use NeoBook's Array Variable facilities to accomplish this easily ... just have to Hide/Show sets of row-objects as required.
User avatar
Gaev
 
Posts: 3728
Joined: Fri Apr 01, 2005 7:48 am
Location: Toronto, Canada

Re: Mixing liquid calculator

Postby dpayer » Wed Feb 29, 2012 9:24 am

smartmedia wrote:Hi..

I need to make the same calculations as this example with NB if possible.
Code: Select all
http://fractalbit.gr/diy/

This example is made in java script.
Basically, is a DIY calculator for mixing liquids for e-cigarette.
Any ideas ???

Thanks




This is not a technical response!

Here is an interesting story on how an e-cig battery exploded and disfigured a man:
http://www.weartv.com/newsroom/top_stor ... 0551.shtml

now, back to programming! :)

David P.
User avatar
dpayer
 
Posts: 1382
Joined: Mon Apr 11, 2005 5:55 am
Location: Iowa - USA


Return to NeoBook Functions - VBScript & JavaScript

Who is online

Users browsing this forum: No registered users and 1 guest

cron