Image corrupt or truncated

highplainsbubba · 2011-12-28 15:01

I am trying to toggle the visibility of a red led jpg on my web page when the Spinneret led is told to turn on and off. The The web page works correctly when I am not tied to the Spinneret and am just testing the web page. When I connect to the Spinneret and toggle the led on and off, a generic icon appears and the error console says " Image corrupt or truncated" and the pop up says "The image "view source:http://192.168.1.200:5000/red led.jpg cannot be displayed because it contains errors." I remembered that the html files had to have a 8.3 format, so I changed the red led. jpg to that format with no help. I googled the error and found that it has to do with the file being in the wrong format ie a jpg should be a ico or png or vice versa. . Is there a limitation on the type of file (jpg,png,ico) that I can have on the SD card?

Mike G · 2011-12-28 16:56

HPB, please post your source files so we can take a look.

However, it sounds like you want to toggle an image when a link or button is clicked. There's a few way s to do this. What I would do... Use javascipt to set the image src attribute and let the browser do the HTTP get. I used the technique on the Multi-Socket tutorial when you click a link and the image downloads.

highplainsbubba · 2011-12-28 17:14

I looked at the file on your MultiSocket Manual and noticed that all your images are pngs. I should have done that first, sorry. I know that in my code, there is probably a better way of coding all the buttons without listing them sepearately, but you have to crawl before you can walk.

<html>
 
<head>

<script
 language="javascript" type="text/javascript">
 
  
function DisplayLED (LedID)
{
  var state = document.getElementById(LedID).style.visibility 
  if(state == "hidden")
 {document.getElementById(LedID).style.visibility="visible";
 return getRequest('led/23/on', 'placeholder');
 }
 else
 {document.getElementById(LedID).style.visibility="hidden";
  return getRequest('led/23/off', 'placeholder');
 }

}  
</script>

<script language="javascript" type="application/javascript">
//Gets the browser specific XmlHttpRequest Object
 function getXmlHttpRequestObject() {
  if (window.XMLHttpRequest) {
   return new XMLHttpRequest();
  } else if (window.ActiveXObject) {
   return new ActiveXObject("Microsoft.XMLHTTP");
  } else {
   alert("Your Browser does not support AJAX!\nIt's about time to upgrade don't you think?");
  }
 }
 //XmlHttpRequest object
 var req = getXmlHttpRequestObject();
 var htmlTarget;

 function getRequest(resource, elementId) {
  
 // handle the case where a querystring is not detected
 var char = "&";
  if(resource.indexOf("?", 0) == -1) {
  char = "?";
 }
  
  if (req.readyState == 4 || req.readyState == 0) {
   req.open("GET", resource + char + 'ms=' + new Date().getTime(), true);
   req.onreadystatechange = handleResponse;
   htmlTarget = elementId;
   req.send(null);
   return false;
  }
 }
 function handleResponse() {
  if (req.readyState == 4) {
   var str = req.responseText;
   //alert(str);
   var placeholder = document.getElementById(htmlTarget);
   placeholder.innerHTML = str;
  }
 }
</script>

  
  <p>LED: <span id="placeholder">State</span></p> 
<title>Sanity Ridge Ranch Control Page</title>
 
</head>
<body>
<div style="width:720px;margin:auto;">
  <h1 style="text-align:center;color:blue;">Sanity Ridge Ranch</h1>
  <h2 style="text-align:center;color:blue;">Home Control Page</h2>
<div
style="
top: 0px;
left: 0px;
position: absolute;
z-index: 1;
visibility: show;">
      <div
  style="
       top: 200px;
 left: 0px;
      position: absolute;
       z-index: 1;
      visibility: show;">
 <form>
<input type="button" value="Light 1" id="Light1" onClick="DisplayLED ('Led1');" />
  <div
                id="Led1"
    style="
        top: 5px;
        left: 99px;
       position: absolute;
        z-index: 1;
       visibility: hidden;">
        
</form><img src="red led.jpg" alt="Red Led" width="20" height="20" />       
  </div>
        </div>
 
 
      <div
  style="
       top: 230;
 left: 0;
      position: absolute;
       z-index: 1;
      visibility: show;">
 <form>
<input type="button" value="Light 2" id="Light2" onClick="DisplayLED ('Led2');"/>
  <div 
                id="Led2"
    style="
        top: 5;
        left: 99;
       position: absolute;
        z-index: 1;
       visibility: hidden;">
        
</form><img src="red led.jpg" alt="Red Led" width="20" height="20" />       
  </div>
        </div>
        
        <div
  style="
       top: 260;
 left: 0;
      position: absolute;
       z-index: 1;
      visibility: show;">
 <form>
<input type="button" value="Light 3" id="Light3"  onClick="DisplayLED ('Led3');"/> 
  <div
                id="Led3"
    style="
        top: 5;
        left: 99;
       position: absolute;
        z-index: 1;
       visibility: hidden;">
        
</form><img src="red led.jpg" alt="Red Led" width="20" height="20" />       
  </div>
        </div>

        <div
  style="
       top: 200;
 left: 200;
      position: absolute;
       z-index: 1;
      visibility: show;">
 <form>
<input type="button" value="Light 4"id="Light4" onClick="DisplayLED ('Led4');" />
  <div
                id=Led4
    style="
        top: 5;
        left: 99;
       position: absolute;
        z-index: 1;
       visibility: hidden;">
        
</form><img src="red led.jpg" alt="Red Led" width="20" height="20" />       
  </div>
        </div>
        <div
  style="
       top: 230;
 left: 200;
      position: absolute;
       z-index: 1;
      visibility: show;">
 <form>
<input type="button" value="Light 5" id="Light5" onClick="DisplayLED ('Led5');" />
  <div
                id=Led5
    style="
        top: 5;
        left: 99;
       position: absolute;
        z-index: 1;
       visibility: hidden;">
        
</form><img src="red led.jpg" alt="Red Led" width="20" height="20" />       
  </div>
        </div>
        <div
  style="
       top: 260;
 left: 200;
      position: absolute;
       z-index: 1;
      visibility: show;">
 <form>
<input type="button" value="Light 6" id="Light6" onClick="DisplayLED ('Led6');" />
  <div
                id=Led6
    style="
        top: 5;
        left: 99;
       position: absolute;
        z-index: 1;
       visibility: hidden;">
        
</form><img src="red led.jpg" alt="Red Led" width="20" height="20" />       
  </div>
         </div>
        <div
  style="
       top: 200;
 left: 400;
      position: absolute;
       z-index: 1;
      visibility: show;">
 <form>
<input type="button" value="Light 7" id="Light7" onClick="DisplayLED ('Led7');" />
  <div
                id=Led7
    style="
        top: 5;
        left: 99;
       position: absolute;
        z-index: 1;
       visibility: hidden;">
        
</form><img src="red led.jpg" alt="Red Led" width="20" height="20" />       
  </div>
        </div>
        <div
  style="
       top: 230;
 left: 400;
      position: absolute;
       z-index: 1;
      visibility: show;">
 <form>
<input type="button" value="Light 8" id="Light8" onClick="DisplayLED ('Led8');"/>
  <div
                id=Led8
    style="
        top: 5;
        left: 99;
       position: absolute;
        z-index: 1;
       visibility: hidden;">
        
</form><img src="red led.jpg" alt="Red Led" width="20" height="20" />       
  </div>
        </div> 
        
        <div
  style="
       top: 260;
 left: 400;
      position: absolute;
       z-index: 1;
      visibility: show;">
 <form>
<input type="button" value="Light 9" id="Light9" onClick="DisplayLED ('Led9');" />
  <div
                id=Led9
    style="
        top: 5;
        left: 99;
       position: absolute;
        z-index: 1;
       visibility: hidden;">
        
</form><img src="red led.jpg" alt="Red Led" width="20" height="20" />       
  </div>
         </div>
</div>
</body>
</html>

jvrproductions · 2011-12-29 05:46

Hello highplainsbubba. I don't know if this will help you. I am pretty new here too but I work a lot on websites and we normally try to avoid spaces on the names. Your file name in the code is red led.jpg went you run this on the server it's transfer to red%led.jpg. I think you can try to change the space for _. Hope this help.....

Mike G · 2011-12-29 06:22

hpb,
jvrproductions is right the error is coming from the browser html encoding the space in red leg.jpg. The error message is

The image http://blah/red%20led.jpg cannot be displayed because it contains errors.

The Spinneret receives the following resource request.

red%20led.jpg

I did not HTML decode the resource request. Do not put spaces in the file name.

I'll look into decoding the whole request header line if you really need to have a space. I'm not sure how the SD card driver will react as I have never tried to open a file that contains a space.

Secondly, you HTML is not valid. It has to do with the opening and closing of the < div > tags.When I open your page the buttons shoot over to the upper left corner, one button on top of the other.

highplainsbubba · 2011-12-29 12:46

Thanks for the help guys. I will tuck that nugget (no spaces in file names) away for further use. I tried what you suggested and it didn't work any better. I decided to download the red_led.jpg again and see if it really was corrupt. I noticed that I could only find png icons, so I surmised that previously, I downloaded a png file and saved it as a jpg thinking the format would be changed and not just the name. I was apparently wrong. Bottom line is, it is working correctly and I wanted to thank the both of you for your help. Mike, I don't need file names with spaces but thanks for the offer of trying to code them. I guess I must have fat fingered the file I posted on the forum because my buttons all lay out correctly. Thanks again.

Mike G · 2011-12-29 13:02

hpb, glad you got it working. Your HTML markup is definitely incorrect. Your browser is probably in quirks mode.

Image corrupt or truncated

Comments