Back To Programming / Scripting / Coding Forum

IE9 doesnt update js globals from function

  • may
  • Proficient
  • Proficient
  • User avatar
  • Joined: Dec 25, 2004
  • Posts: 328
  • Loc: Holland [NL]
  • Status: Offline

Post June 7th, 2011, 1:24 pm

Hi Guys,

I have this little project going in which I use HTTPRequest to draw into an image using a PHP backend. In the Ajax frontend I use a select dropdown in conjunction with onchange="function" to update a JS global var. All is working as expected in Firefox without any errors, except in IE.

Here is the js.
JAVASCRIPT Code: [ Select ]
 
 
   // Are we IE
   var isIE = document.all?true:false;
   
   // Declare some vars
   var aDiv;
   var posX;            // This var is used to store the mouse X position
   var posY;            // This var is used to store the mouse Y position
   var Color = 'blue';     // Sets the filled eclipse color
   var Size = 10;       // Sets the eclipse size in px
   var xmlhttp;         // We use ajax to update the image remotely
   
   if(!e) var e = window.event;
   
   // initialize the AJAX http request object
   if(window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
   }else{
      if(isIE){
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
   }
   
   // Function that catches the mouse coords.
   function getCoords(e){
      if(!isIE){
         posX = e.offsetX?(e.offsetX):e.pageX-document.getElementById(aDiv).offsetLeft;
         posY = e.offsetY?(e.offsetY):e.pageY-document.getElementById(aDiv).offsetTop;
      }else{
         posX = event.offsetX + document.body.scrollLeft;
         posY = event.offsetY + document.body.scrollTop;
      }
      return true;
   }
   
   // Use the remote PHP lib to add a dot from the image
   function putDot(imgId, Id, color){
      var obj = document.getElementById(imgId);
      var url = 'rendering_engine.php?imgid='+Id+'&posx='+posX+'&posy='+posY+'&action=add&color='+Color+'&size='+Size+'&height='+obj.height+'&width='+obj.width;
      xmlhttp.open('GET',url,true);
      xmlhttp.send();
      xmlhttp.onreadystatechange=function(){
         if(xmlhttp.readyState==4 && xmlhttp.status==200){
            ldImage(imgId, Id);
         }
      }
   }
 
   function ldImage(imgId, Id){
      var obj = document.getElementById(imgId);
      var date = new Date();
      //alert('height:'+obj.height+'width:'+obj.width);
      var url = 'rendering_engine.php?imgid='+Id+'&action=show&posx='+posX+'&posy='+posY+'&height='+obj.height+'&width='+obj.width+'&'+date.getTime();
      obj.src = url;
   }
   
   function setColor(val){ Color = val; }
   
   function setSize(val){ Size = val; }
   
   function MouseCaptureLoc(activeDiv){ aDiv = activeDiv; }
   
   document.onmousemove = getCoords;
 
  1.  
  2.  
  3.    // Are we IE
  4.    var isIE = document.all?true:false;
  5.    
  6.    // Declare some vars
  7.    var aDiv;
  8.    var posX;            // This var is used to store the mouse X position
  9.    var posY;            // This var is used to store the mouse Y position
  10.    var Color = 'blue';     // Sets the filled eclipse color
  11.    var Size = 10;       // Sets the eclipse size in px
  12.    var xmlhttp;         // We use ajax to update the image remotely
  13.    
  14.    if(!e) var e = window.event;
  15.    
  16.    // initialize the AJAX http request object
  17.    if(window.XMLHttpRequest){
  18.       xmlhttp = new XMLHttpRequest();
  19.    }else{
  20.       if(isIE){
  21.          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  22.       }
  23.    }
  24.    
  25.    // Function that catches the mouse coords.
  26.    function getCoords(e){
  27.       if(!isIE){
  28.          posX = e.offsetX?(e.offsetX):e.pageX-document.getElementById(aDiv).offsetLeft;
  29.          posY = e.offsetY?(e.offsetY):e.pageY-document.getElementById(aDiv).offsetTop;
  30.       }else{
  31.          posX = event.offsetX + document.body.scrollLeft;
  32.          posY = event.offsetY + document.body.scrollTop;
  33.       }
  34.       return true;
  35.    }
  36.    
  37.    // Use the remote PHP lib to add a dot from the image
  38.    function putDot(imgId, Id, color){
  39.       var obj = document.getElementById(imgId);
  40.       var url = 'rendering_engine.php?imgid='+Id+'&posx='+posX+'&posy='+posY+'&action=add&color='+Color+'&size='+Size+'&height='+obj.height+'&width='+obj.width;
  41.       xmlhttp.open('GET',url,true);
  42.       xmlhttp.send();
  43.       xmlhttp.onreadystatechange=function(){
  44.          if(xmlhttp.readyState==4 && xmlhttp.status==200){
  45.             ldImage(imgId, Id);
  46.          }
  47.       }
  48.    }
  49.  
  50.    function ldImage(imgId, Id){
  51.       var obj = document.getElementById(imgId);
  52.       var date = new Date();
  53.       //alert('height:'+obj.height+'width:'+obj.width);
  54.       var url = 'rendering_engine.php?imgid='+Id+'&action=show&posx='+posX+'&posy='+posY+'&height='+obj.height+'&width='+obj.width+'&'+date.getTime();
  55.       obj.src = url;
  56.    }
  57.    
  58.    function setColor(val){ Color = val; }
  59.    
  60.    function setSize(val){ Size = val; }
  61.    
  62.    function MouseCaptureLoc(activeDiv){ aDiv = activeDiv; }
  63.    
  64.    document.onmousemove = getCoords;
  65.  


For some reason when the function setColor() is called, it results in an undefined js Global var. Anyone any clue on how i can solve this?

The function is called using the following HTML.
HTML Code: [ Select ]
<div>
<select onchange="setColor(value)">
      <option>blue</option>
      <option>green</option>
      <option>red</option>
      <option>gray</option>
      <option>white</option>
      <option>clean up</option>
</select>
<select onchange="setSize(value)">
      <option>10</option>
      <option>15</option>
      <option>20</option>
      <option>25</option>
      <option>30</option>
      <option>35</option>
</select>
</div>
 
  1. <div>
  2. <select onchange="setColor(value)">
  3.       <option>blue</option>
  4.       <option>green</option>
  5.       <option>red</option>
  6.       <option>gray</option>
  7.       <option>white</option>
  8.       <option>clean up</option>
  9. </select>
  10. <select onchange="setSize(value)">
  11.       <option>10</option>
  12.       <option>15</option>
  13.       <option>20</option>
  14.       <option>25</option>
  15.       <option>30</option>
  16.       <option>35</option>
  17. </select>
  18. </div>
  19.  


Any help is much appreciated.

TIA, May
1 + 1 = 10 + 1 = 11 + 11 = 110
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post June 7th, 2011, 1:24 pm

  • WritingBadCode
  • Graduate
  • Graduate
  • User avatar
  • Joined: Apr 28, 2011
  • Posts: 214
  • Loc: Sweden
  • Status: Offline

Post June 8th, 2011, 7:03 am

I don't know if this could have something to do with it but when testing the javascript you provided with this:
Code: [ Select ]
<select onchange="setColor(value)">
   <option>blue</option>
   <option>green</option>
   <option>red</option>
   <option>gray</option>
   <option>white</option>
   <option>clean up</option>
</select>
<select onchange="setSize(value)">
   <option>10</option>
   <option>15</option>
   <option>20</option>
   <option>25</option>
   <option>30</option>
   <option>35</option>
</select>
  1. <select onchange="setColor(value)">
  2.    <option>blue</option>
  3.    <option>green</option>
  4.    <option>red</option>
  5.    <option>gray</option>
  6.    <option>white</option>
  7.    <option>clean up</option>
  8. </select>
  9. <select onchange="setSize(value)">
  10.    <option>10</option>
  11.    <option>15</option>
  12.    <option>20</option>
  13.    <option>25</option>
  14.    <option>30</option>
  15.    <option>35</option>
  16. </select>


I noted that "value" or "val" as its renamed holds no value in IE.

I changed the functions to look like this just for testing purpose:

Code: [ Select ]
function setColor(val){ alert(val); }
function setSize(val){ alert(val); }
  1. function setColor(val){ alert(val); }
  2. function setSize(val){ alert(val); }


IE sent a EMPTY alert while Chrome and FireFox sent the value selected.

EDIT: I misread your post. I see you had that figured out. Lol. Sorry. :oops:

Here is some ugly looking code that will work in both IE and the others (just for color thing) to give you an idea :

Instead of
Code: [ Select ]
function setColor(val){ Color = val; }

Try:
Code: [ Select ]
function setColor()
{
var values = document.getElementById("colorChange");
var count = values.length;

for(var n = 0; n < count; n++)
    {
    if (values.options[n].selected)
        {
              Color = values.options[n].innerHTML;
            alert(Color);
        }
    }
}
  1. function setColor()
  2. {
  3. var values = document.getElementById("colorChange");
  4. var count = values.length;
  6. for(var n = 0; n < count; n++)
  7.     {
  8.     if (values.options[n].selected)
  9.         {
  10.               Color = values.options[n].innerHTML;
  11.             alert(Color);
  12.         }
  13.     }
  14. }


This assumes that you change the HTML code to this:
Code: [ Select ]
<select id="colorChange" onchange="setColor()">
   <option>blue</option>
   <option>green</option>
   <option>red</option>
   <option>gray</option>
   <option>white</option>
   <option>clean up</option>
</select>
<select onchange="setSize(value)">
   <option>10</option>
   <option>15</option>
   <option>20</option>
   <option>25</option>
   <option>30</option>
   <option>35</option>
</select>
  1. <select id="colorChange" onchange="setColor()">
  2.    <option>blue</option>
  3.    <option>green</option>
  4.    <option>red</option>
  5.    <option>gray</option>
  6.    <option>white</option>
  7.    <option>clean up</option>
  8. </select>
  9. <select onchange="setSize(value)">
  10.    <option>10</option>
  11.    <option>15</option>
  12.    <option>20</option>
  13.    <option>25</option>
  14.    <option>30</option>
  15.    <option>35</option>
  16. </select>

Making 2 changes, giving it a ID value and onchange won't pass any values.
  • may
  • Proficient
  • Proficient
  • User avatar
  • Joined: Dec 25, 2004
  • Posts: 328
  • Loc: Holland [NL]
  • Status: Offline

Post June 8th, 2011, 9:40 am

Yeah, I also noted that IE does not pass the value like mozilla like browser. Your solution 'ugly' as you name it :) looks rather lumbersum, but if it works ill go with that.

I am a bit worried about looping through each value, which might become a problem with large select lists and poor client performance, so i think ill make your code even uglier by testing the browser type ;-)

Any way, if it works...

Oh, yeah before I forget the most important part...

THX for the suggested solution :)
1 + 1 = 10 + 1 = 11 + 11 = 110
  • WritingBadCode
  • Graduate
  • Graduate
  • User avatar
  • Joined: Apr 28, 2011
  • Posts: 214
  • Loc: Sweden
  • Status: Offline

Post June 8th, 2011, 9:57 am

As you say there is probably better ways to do this especially if the list gets big.

If you find a better solution please don't feel bad for sharing. =)

One minor thing you can do if you don't like it looping through everything is adding a break;
Code: [ Select ]

function setColor()
{
var values = document.getElementById("colorChange");
var count = values.length;

for(var n = 0; n < count; n++)
  {
  if (values.options[n].selected)
    {
       Color = values.options[n].innerHTML;
       break;
    }
  }
}
  2. function setColor()
  3. {
  4. var values = document.getElementById("colorChange");
  5. var count = values.length;
  7. for(var n = 0; n < count; n++)
  8.   {
  9.   if (values.options[n].selected)
  10.     {
  11.        Color = values.options[n].innerHTML;
  12.        break;
  13.     }
  14.   }
  15. }


If the user choses one of the first values then the looping will stop there, saving some processing? IDK.
  • may
  • Proficient
  • Proficient
  • User avatar
  • Joined: Dec 25, 2004
  • Posts: 328
  • Loc: Holland [NL]
  • Status: Offline

Post June 8th, 2011, 9:58 am

Image

Thx it works like a charm :D
Attachments:
screenshot.png
  • may
  • Proficient
  • Proficient
  • User avatar
  • Joined: Dec 25, 2004
  • Posts: 328
  • Loc: Holland [NL]
  • Status: Offline

Post June 8th, 2011, 10:00 am

For anyone that likes to experiment with this, here is the full code ;)

DO NOTE THAT ITS NOT FIT (YET) FOR PRODUCTION PURPOSES. THE CODE NEEDS REFINEMENT AND OBVIOUS SECURITY CHECKS AND ESCAPES.

HTML Code: [ Select ]
<?php
// Fetch the patient_id and Image_id
?>
 
<html>
<head>
<!-- Enable IE8 Standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=8" >
 
<script language="JavaScript">
   // Are we IE
   var isIE = document.all?true:false;
   // Declare some vars
   var aDiv;
   var posX;            // This var is used to store the mouse X position
   var posY;            // This var is used to store the mouse Y position
   var Color = 'blue';     // Sets the filled eclipse color
   var Size = 10;       // Sets the eclipse size in px
   var xmlhttp;         // We use ajax to update the image remotely
   // Test if event is defined, else define it.
   if(!e) var e = window.event;
   // initialize the AJAX http request object
   if(window.XMLHttpRequest){
      xmlhttp = new XMLHttpRequest();
   }else{
      if(isIE){
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
   }
   // Function that catches the mouse coords and is called on document.mousemove.
   function getCoords(e){
      if(!isIE){
         posX = e.offsetX?(e.offsetX):e.pageX-document.getElementById(aDiv).offsetLeft;
         posY = e.offsetY?(e.offsetY):e.pageY-document.getElementById(aDiv).offsetTop;
      }else{
         posX = event.offsetX + document.body.scrollLeft;
         posY = event.offsetY + document.body.scrollTop;
      }
      return true;
   }
   // Function that instructs php to draw a dot with the given properties on the given coords.
   function putDot(imgId, Id, color){
      var obj = document.getElementById(imgId);
      var url = 'rendering_engine.php?imgid='+Id+'&posx='+posX+'&posy='+posY+'&action=add&color='+Color+'&size='+Size+'&height='+obj.height+'&width='+obj.width;
      xmlhttp.open('GET',url,true);
      xmlhttp.send();
      xmlhttp.onreadystatechange=function(){
         if(xmlhttp.readyState==4 && xmlhttp.status==200){
            ldImage(imgId, Id);
         }
      }
   }
   // Function that (re)loads the image on pageload and draw activity.
   function ldImage(imgId, Id){
      var obj = document.getElementById(imgId);
      var date = new Date();
      var url = 'rendering_engine.php?imgid='+Id+'&action=show&posx='+posX+'&posy='+posY+'&height='+obj.height+'&width='+obj.width+'&'+date.getTime();
      obj.src = url;
   }
   // Assign pattern that is supported by both IE and Mozilla.
   // IE does not pass obj.value onchange like mozilla does.
   // Thx to WritingBadCode on Ozzu.com
   function setColor(){
      var values = document.getElementById("brushColor");
      var count = values.length;
      for(var n = 0; n < count; n++){
         if (values.options[n].selected){
               Color = values.options[n].innerHTML;
         }
      }
   }
   // Assign pattern that is supported by both IE and Mozilla.
   // IE does not pass obj.value onchange like mozilla does.
   // Thx to WritingBadCode on Ozzu.com
   function setSize(){
      var values = document.getElementById("brushSize");
      var count = values.length;
      for(var n = 0; n < count; n++){
         if (values.options[n].selected){
               Size = values.options[n].innerHTML;
         }
      }
   }
   
   function MouseCaptureLoc(activeDiv){ aDiv = activeDiv; }
   
   document.onmousemove = getCoords;
</script>
</head>
<body style="margin-left:50px; width:100%;" onload="ldImage('img1', 1); ldImage('img2', 2);">
<div>
<form name="brushes" id="brushes">
<select id="brushColor" onchange="setColor()">
      <option>blue</option>
      <option>green</option>
      <option>red</option>
      <option>gray</option>
      <option>white</option>
      <option>clean up</option>
</select>
<select id="brushSize" onchange="setSize(value)">
      <option>10</option>
      <option>15</option>
      <option>20</option>
      <option>25</option>
      <option>30</option>
      <option>35</option>
</select>
</form>
</div>
<div>
<div style="float:left;">
<div onmouseover="MouseCaptureLoc('1')" id="1" style="float:left; border:1px solid black; background-image:url(./skeletalsystem.jpg); width:597px; height:741px;">
   <img onclick="putDot('img1', '1')"  id="img1" src="#" width="597" height="741">
</div>
<div onmouseover="MouseCaptureLoc('2')" id="2" style=" float:right; border:1px solid black; background-image:url(./human_organs.jpg); width:453px; height:477px;">
   <img onclick="putDot('img2', '2')"  id="img2" src="#" width="453" height="477" >
</div>
</div>
</body>
</html>
 
  1. <?php
  2. // Fetch the patient_id and Image_id
  3. ?>
  4.  
  5. <html>
  6. <head>
  7. <!-- Enable IE8 Standards mode -->
  8. <meta http-equiv="X-UA-Compatible" content="IE=8" >
  9.  
  10. <script language="JavaScript">
  11.    // Are we IE
  12.    var isIE = document.all?true:false;
  13.    // Declare some vars
  14.    var aDiv;
  15.    var posX;            // This var is used to store the mouse X position
  16.    var posY;            // This var is used to store the mouse Y position
  17.    var Color = 'blue';     // Sets the filled eclipse color
  18.    var Size = 10;       // Sets the eclipse size in px
  19.    var xmlhttp;         // We use ajax to update the image remotely
  20.    // Test if event is defined, else define it.
  21.    if(!e) var e = window.event;
  22.    // initialize the AJAX http request object
  23.    if(window.XMLHttpRequest){
  24.       xmlhttp = new XMLHttpRequest();
  25.    }else{
  26.       if(isIE){
  27.          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  28.       }
  29.    }
  30.    // Function that catches the mouse coords and is called on document.mousemove.
  31.    function getCoords(e){
  32.       if(!isIE){
  33.          posX = e.offsetX?(e.offsetX):e.pageX-document.getElementById(aDiv).offsetLeft;
  34.          posY = e.offsetY?(e.offsetY):e.pageY-document.getElementById(aDiv).offsetTop;
  35.       }else{
  36.          posX = event.offsetX + document.body.scrollLeft;
  37.          posY = event.offsetY + document.body.scrollTop;
  38.       }
  39.       return true;
  40.    }
  41.    // Function that instructs php to draw a dot with the given properties on the given coords.
  42.    function putDot(imgId, Id, color){
  43.       var obj = document.getElementById(imgId);
  44.       var url = 'rendering_engine.php?imgid='+Id+'&posx='+posX+'&posy='+posY+'&action=add&color='+Color+'&size='+Size+'&height='+obj.height+'&width='+obj.width;
  45.       xmlhttp.open('GET',url,true);
  46.       xmlhttp.send();
  47.       xmlhttp.onreadystatechange=function(){
  48.          if(xmlhttp.readyState==4 && xmlhttp.status==200){
  49.             ldImage(imgId, Id);
  50.          }
  51.       }
  52.    }
  53.    // Function that (re)loads the image on pageload and draw activity.
  54.    function ldImage(imgId, Id){
  55.       var obj = document.getElementById(imgId);
  56.       var date = new Date();
  57.       var url = 'rendering_engine.php?imgid='+Id+'&action=show&posx='+posX+'&posy='+posY+'&height='+obj.height+'&width='+obj.width+'&'+date.getTime();
  58.       obj.src = url;
  59.    }
  60.    // Assign pattern that is supported by both IE and Mozilla.
  61.    // IE does not pass obj.value onchange like mozilla does.
  62.    // Thx to WritingBadCode on Ozzu.com
  63.    function setColor(){
  64.       var values = document.getElementById("brushColor");
  65.       var count = values.length;
  66.       for(var n = 0; n < count; n++){
  67.          if (values.options[n].selected){
  68.                Color = values.options[n].innerHTML;
  69.          }
  70.       }
  71.    }
  72.    // Assign pattern that is supported by both IE and Mozilla.
  73.    // IE does not pass obj.value onchange like mozilla does.
  74.    // Thx to WritingBadCode on Ozzu.com
  75.    function setSize(){
  76.       var values = document.getElementById("brushSize");
  77.       var count = values.length;
  78.       for(var n = 0; n < count; n++){
  79.          if (values.options[n].selected){
  80.                Size = values.options[n].innerHTML;
  81.          }
  82.       }
  83.    }
  84.    
  85.    function MouseCaptureLoc(activeDiv){ aDiv = activeDiv; }
  86.    
  87.    document.onmousemove = getCoords;
  88. </script>
  89. </head>
  90. <body style="margin-left:50px; width:100%;" onload="ldImage('img1', 1); ldImage('img2', 2);">
  91. <div>
  92. <form name="brushes" id="brushes">
  93. <select id="brushColor" onchange="setColor()">
  94.       <option>blue</option>
  95.       <option>green</option>
  96.       <option>red</option>
  97.       <option>gray</option>
  98.       <option>white</option>
  99.       <option>clean up</option>
  100. </select>
  101. <select id="brushSize" onchange="setSize(value)">
  102.       <option>10</option>
  103.       <option>15</option>
  104.       <option>20</option>
  105.       <option>25</option>
  106.       <option>30</option>
  107.       <option>35</option>
  108. </select>
  109. </form>
  110. </div>
  111. <div>
  112. <div style="float:left;">
  113. <div onmouseover="MouseCaptureLoc('1')" id="1" style="float:left; border:1px solid black; background-image:url(./skeletalsystem.jpg); width:597px; height:741px;">
  114.    <img onclick="putDot('img1', '1')"  id="img1" src="#" width="597" height="741">
  115. </div>
  116. <div onmouseover="MouseCaptureLoc('2')" id="2" style=" float:right; border:1px solid black; background-image:url(./human_organs.jpg); width:453px; height:477px;">
  117.    <img onclick="putDot('img2', '2')"  id="img2" src="#" width="453" height="477" >
  118. </div>
  119. </div>
  120. </body>
  121. </html>
  122.  


PHP Code: [ Select ]
<?php
// Connect to the database
if($dblink = mysql_connect('127.0.0.1','root','password')){
   mysql_select_db('test', $dblink);
}else{
   exit;
}
 
 
// fetch all post/gets.
if(isset($_POST{'action'}) || isset($_GET{'action'})){
   if(isset($_POST{'action'})){
      foreach($_POST as $key => $value){
         $$key = $value;
      }
   }else{
      foreach($_GET as $key => $value){
         $$key = $value;
      }
   }
}else{
   exit;
}
// Determ what function to call //
if(isset($action)){
   if($action == 'add'){
      if(isset($imgid)){
         add_eclipse($posx, $posy, $imgid, $color, $size, $width, $height);
      }else{
         echo 'false';
      }
   }elseif($action == 'show'){
      if(isset($imgid)){
         show_image($posx, $posy, $imgid, $width, $height);
      }else{
         echo 'false';
      }
   }else{
      echo 'false';
   }
}
 
 
function add_eclipse($x, $y, $id, $color = false, $size = false, $width = false, $height = false){
   if(isset($id)){
      $sql = "select * from images where id = '$id'";
      $result = mysql_query($sql);
      $row = mysql_fetch_assoc($result);
      if($row){
         $img = imagecreatefromstring($row{'image_bin'});
         $new = false;
      }else{
         // New image //
         $img = imagecreatetruecolor($width, $height);
         $new = true;
      }
   }
   // Enable alpha blending (requires GD2.0)
   imageantialias($img, true);
   
   // Color Pallete
   $pallet{'black'}     = imagecolorallocate($img, 2, 2, 2);;
   $pallet{'transparent'}  = imagecolorallocate($img, 51, 80, 124);
   $pallet{'transparent'}  = ImageColorTransparent($img, $pallet{'transparant'});
   $pallet{'red'}          = imagecolorallocate($img, 255, 0, 0);
   $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
   $pallet{'blue'}      = imagecolorallocate($img, 50, 50, 200);
   $pallet{'white'}     = imagecolorallocate($img, 255, 255, 255);
   $pallet{'gray'}         = imagecolorallocate($img, 128, 128, 128);
   
   // BG
   ImageColorTransparent($img, $pallet{'transparant'});
   
   // Add the eclipse
   if(!isset($color)){ $color = 'red'; }
   if(!isset($size)){ $size = 20;}
   if($color != 'clean up'){
      imagefilledellipse($img, $x, $y, $size+3, $size+3, $pallet{'black'});
   }
   imagefilledellipse($img, $x, $y, $size, $size, $pallet{$color});
   //imagefilledellipse($img, $x-5, $y, 10, 10, $pallet{'transparent'});
   
   // Get the raw image using an output buffer (ob)
   ob_start();
   imagepng($img);
   $unsave = ob_get_contents();
   ob_end_clean();
   
   // Create a hex tring out of the raw stream
   $save = addslashes($unsave);
   
   if($new){
      $sql = "insert into images(image_ext, image_bin) values('png','".$save."')";
   }else{
      $sql = "update images set image_bin='".$save."' where id='$id'";
   }
   
   if(mysql_query($sql)){
      header("Content-type: image/png");
      echo $unsave;
   }else{
      echo mysql_error();
      echo 'false';
   }
}
 
 
function show_image($posx=false, $posy=false, $id, $width = false, $height = false){
   if(isset($id)){
      if($posx == 'undefined'){
         $posx = 'undef';
         $posy = 'undef';
      }
   
      $sql = "select * from images where id = '$id'";
      $result = mysql_query($sql);
      $row = mysql_fetch_assoc($result);
      if($row){
         // Create a image canvas
         $img = imagecreatefromstring($row{'image_bin'});
         // Create the debugging string
         $pos = "ID=$id,X=$posx,Y=$posy";
         $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
         imagestring($img, 3, 10, 2, 'Bestaande anamnese', $pallet{'green'});
         imagestring($img, 3, 10, 15, $pos, $pallet{'green'});
         header("Content-type: image/png");
         imagepng($img);
         //echo $row{'image_bin'};
      }else{
         $img = imagecreatetruecolor($width, $height);
         // Color Pallete
         $pallet{'transparent'}  = imagecolorallocate($img, 51, 80, 124);
         $pallet{'transparent'}  = ImageColorTransparent($img, $pallet{'transparant'});
         $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
         // BG
         ImageColorTransparent($img, $pallet{'transparant'});
         imagestring($img, 3, 10, 2, "nieuwe anamnese w:$width h:$height", $pallet{'green'});
         header("Content-type: image/png");
         imagepng($img);
      }
   }else{
      $img = imagecreatetruecolor(401, 844);
      // Color Pallete
      $pallet{'transparent'}  = imagecolorallocate($img, 51, 80, 124);
      $pallet{'transparent'}  = ImageColorTransparent($img, $pallet{'transparant'});
      $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
      // BG
      ImageColorTransparent($img, $pallet{'transparant'});
      imagestring($img, 3, 10, 2, 'nieuwe anamnese', $pallet{'green'});
      header("Content-type: image/png");
      imagepng($img);
   } 
}
?>
 
  1. <?php
  2. // Connect to the database
  3. if($dblink = mysql_connect('127.0.0.1','root','password')){
  4.    mysql_select_db('test', $dblink);
  5. }else{
  6.    exit;
  7. }
  8.  
  9.  
  10. // fetch all post/gets.
  11. if(isset($_POST{'action'}) || isset($_GET{'action'})){
  12.    if(isset($_POST{'action'})){
  13.       foreach($_POST as $key => $value){
  14.          $$key = $value;
  15.       }
  16.    }else{
  17.       foreach($_GET as $key => $value){
  18.          $$key = $value;
  19.       }
  20.    }
  21. }else{
  22.    exit;
  23. }
  24. // Determ what function to call //
  25. if(isset($action)){
  26.    if($action == 'add'){
  27.       if(isset($imgid)){
  28.          add_eclipse($posx, $posy, $imgid, $color, $size, $width, $height);
  29.       }else{
  30.          echo 'false';
  31.       }
  32.    }elseif($action == 'show'){
  33.       if(isset($imgid)){
  34.          show_image($posx, $posy, $imgid, $width, $height);
  35.       }else{
  36.          echo 'false';
  37.       }
  38.    }else{
  39.       echo 'false';
  40.    }
  41. }
  42.  
  43.  
  44. function add_eclipse($x, $y, $id, $color = false, $size = false, $width = false, $height = false){
  45.    if(isset($id)){
  46.       $sql = "select * from images where id = '$id'";
  47.       $result = mysql_query($sql);
  48.       $row = mysql_fetch_assoc($result);
  49.       if($row){
  50.          $img = imagecreatefromstring($row{'image_bin'});
  51.          $new = false;
  52.       }else{
  53.          // New image //
  54.          $img = imagecreatetruecolor($width, $height);
  55.          $new = true;
  56.       }
  57.    }
  58.    // Enable alpha blending (requires GD2.0)
  59.    imageantialias($img, true);
  60.    
  61.    // Color Pallete
  62.    $pallet{'black'}     = imagecolorallocate($img, 2, 2, 2);;
  63.    $pallet{'transparent'}  = imagecolorallocate($img, 51, 80, 124);
  64.    $pallet{'transparent'}  = ImageColorTransparent($img, $pallet{'transparant'});
  65.    $pallet{'red'}          = imagecolorallocate($img, 255, 0, 0);
  66.    $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
  67.    $pallet{'blue'}      = imagecolorallocate($img, 50, 50, 200);
  68.    $pallet{'white'}     = imagecolorallocate($img, 255, 255, 255);
  69.    $pallet{'gray'}         = imagecolorallocate($img, 128, 128, 128);
  70.    
  71.    // BG
  72.    ImageColorTransparent($img, $pallet{'transparant'});
  73.    
  74.    // Add the eclipse
  75.    if(!isset($color)){ $color = 'red'; }
  76.    if(!isset($size)){ $size = 20;}
  77.    if($color != 'clean up'){
  78.       imagefilledellipse($img, $x, $y, $size+3, $size+3, $pallet{'black'});
  79.    }
  80.    imagefilledellipse($img, $x, $y, $size, $size, $pallet{$color});
  81.    //imagefilledellipse($img, $x-5, $y, 10, 10, $pallet{'transparent'});
  82.    
  83.    // Get the raw image using an output buffer (ob)
  84.    ob_start();
  85.    imagepng($img);
  86.    $unsave = ob_get_contents();
  87.    ob_end_clean();
  88.    
  89.    // Create a hex tring out of the raw stream
  90.    $save = addslashes($unsave);
  91.    
  92.    if($new){
  93.       $sql = "insert into images(image_ext, image_bin) values('png','".$save."')";
  94.    }else{
  95.       $sql = "update images set image_bin='".$save."' where id='$id'";
  96.    }
  97.    
  98.    if(mysql_query($sql)){
  99.       header("Content-type: image/png");
  100.       echo $unsave;
  101.    }else{
  102.       echo mysql_error();
  103.       echo 'false';
  104.    }
  105. }
  106.  
  107.  
  108. function show_image($posx=false, $posy=false, $id, $width = false, $height = false){
  109.    if(isset($id)){
  110.       if($posx == 'undefined'){
  111.          $posx = 'undef';
  112.          $posy = 'undef';
  113.       }
  114.    
  115.       $sql = "select * from images where id = '$id'";
  116.       $result = mysql_query($sql);
  117.       $row = mysql_fetch_assoc($result);
  118.       if($row){
  119.          // Create a image canvas
  120.          $img = imagecreatefromstring($row{'image_bin'});
  121.          // Create the debugging string
  122.          $pos = "ID=$id,X=$posx,Y=$posy";
  123.          $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
  124.          imagestring($img, 3, 10, 2, 'Bestaande anamnese', $pallet{'green'});
  125.          imagestring($img, 3, 10, 15, $pos, $pallet{'green'});
  126.          header("Content-type: image/png");
  127.          imagepng($img);
  128.          //echo $row{'image_bin'};
  129.       }else{
  130.          $img = imagecreatetruecolor($width, $height);
  131.          // Color Pallete
  132.          $pallet{'transparent'}  = imagecolorallocate($img, 51, 80, 124);
  133.          $pallet{'transparent'}  = ImageColorTransparent($img, $pallet{'transparant'});
  134.          $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
  135.          // BG
  136.          ImageColorTransparent($img, $pallet{'transparant'});
  137.          imagestring($img, 3, 10, 2, "nieuwe anamnese w:$width h:$height", $pallet{'green'});
  138.          header("Content-type: image/png");
  139.          imagepng($img);
  140.       }
  141.    }else{
  142.       $img = imagecreatetruecolor(401, 844);
  143.       // Color Pallete
  144.       $pallet{'transparent'}  = imagecolorallocate($img, 51, 80, 124);
  145.       $pallet{'transparent'}  = ImageColorTransparent($img, $pallet{'transparant'});
  146.       $pallet{'green'}     = imagecolorallocate($img, 0, 255, 0);
  147.       // BG
  148.       ImageColorTransparent($img, $pallet{'transparant'});
  149.       imagestring($img, 3, 10, 2, 'nieuwe anamnese', $pallet{'green'});
  150.       header("Content-type: image/png");
  151.       imagepng($img);
  152.    } 
  153. }
  154. ?>
  155.  
1 + 1 = 10 + 1 = 11 + 11 = 110
  • WritingBadCode
  • Graduate
  • Graduate
  • User avatar
  • Joined: Apr 28, 2011
  • Posts: 214
  • Loc: Sweden
  • Status: Offline

Post June 8th, 2011, 10:03 am

Quote:
// Thx to WritingBadCode on Ozzu.com


:lol: LMAO no need to do that but thanks.
  • may
  • Proficient
  • Proficient
  • User avatar
  • Joined: Dec 25, 2004
  • Posts: 328
  • Loc: Holland [NL]
  • Status: Offline

Post June 8th, 2011, 10:27 am

LOL? why not, you invested some of your time in it, I learned a new trick so some credit is justified :)
1 + 1 = 10 + 1 = 11 + 11 = 110
  • WritingBadCode
  • Graduate
  • Graduate
  • User avatar
  • Joined: Apr 28, 2011
  • Posts: 214
  • Loc: Sweden
  • Status: Offline

Post June 8th, 2011, 2:06 pm

may wrote:
LOL? why not, you invested some of your time in it, I learned a new trick so some credit is justified :)


I said there was no need since I didn't provide that much IMO, actually I copy pasted code from one of my previous codings. :) But credit is of course welcome!

Page 1 of 1

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 117 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.