Page 1 of 1

Mixing liquid calculator

PostPosted: Mon Feb 27, 2012 10:27 am
by smartmedia
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

PostPosted: Mon Feb 27, 2012 11:01 am
by Gaev
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 ?

PostPosted: Wed Feb 29, 2012 1:56 am
by smartmedia
Hi..

Gaev, i am talking about the formula. I am not so smart in mathematics.. :evil:

PostPosted: Wed Feb 29, 2012 6:07 am
by Gaev
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>

PostPosted: Wed Feb 29, 2012 6:42 am
by Gaev
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.

Re: Mixing liquid calculator

PostPosted: Wed Feb 29, 2012 9:24 am
by dpayer
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.