Send a picture on a Website

Hello,

Thanks your help I can configure my Yun to take a picture. But I don’t succeed to send this image to a html page. :grin:

I want that the arduino takes a picture and when the picture is saved print the picture on the page and do this again.

Here is my code :

#include <Bridge.h>
#include <YunServer.h>
#include <YunClient.h> 
#include <Adafruit_VC0706.h>
#include <FileIO.h>
#include <SoftwareSerial.h> 


SoftwareSerial cameraconnection = SoftwareSerial(9, 8);// RX, TX
Adafruit_VC0706 cam = Adafruit_VC0706(&cameraconnection);

// Listen on default port 5555, the webserver on the Yun
// will forward there all the HTTP requests for us.
YunServer server;
String startString;





void takePicture() {
  
  cam.setImageSize(VC0706_640x480);
  delay(3000);  
  cam.takePicture();

  char filename[52];
  strcpy(filename, "/mnt/sda1/arduino/www/test_liaison_wifi_2/image.JPG");
   if (FileSystem.exists(filename)) {
      FileSystem.remove(filename);
    }

  File imgFile = FileSystem.open(filename, FILE_WRITE);
  uint16_t jpglen = cam.frameLength();
  byte wCount = 0; 
  while (jpglen > 0) {
    uint8_t *buffer;
    uint8_t bytesToRead = min(32, jpglen); 
    buffer = cam.readPicture(bytesToRead);
    imgFile.write(buffer, bytesToRead);
    if(++wCount >= 64) { 
      digitalWrite(13,HIGH);
      delay(100);
      digitalWrite(13,LOW);
      wCount = 0;      
    }
    jpglen -= bytesToRead;
  }
  
  imgFile.close();
       digitalWrite(13,HIGH);
      delay(2000);
      digitalWrite(13,LOW);
  
}











void setup() {
  Serial.begin(9600);

  // Bridge startup
  pinMode(13,OUTPUT);
  Bridge.begin();
  FileSystem.begin();
  cam.begin();



  // Listen for incoming connection only from localhost
  // (no one from the external network could connect)
  server.listenOnLocalhost();
  server.begin();

      digitalWrite(13,HIGH);
      delay(1000);
      digitalWrite(13,LOW);
}

void loop() {
  // Get clients coming from server
   YunClient client = server.accept();

 // There is a new client?
  if (client) {
      
      takePicture();
      client.print("<img src = \"image.JPG\" alt=\"image\" /> ");
      client.stop();
    
  }
  
  delay(50);
  
}

Here is the html page :

<!DOCTYPE html>
<head>
    <script type="text/javascript" src="zepto.min.js"></script>
    <script type="text/javascript">
        function refresh() {
            $('#content').load('/arduino/photo');
        }
    </script>
</head>
<body onload="setInterval(refresh, 1000);">
    <span id="content">Waiting for Arduino...</span>
</body

When I go to “http://arduino.local/sd/test_liaison_wifi_2/” the picture is taken and saved but when the picture was saved the arduino takes an other picture without print the first on the Website…

Thanks for your help :slight_smile:

I'm not a JavaScript expert, so I will let others comment on how to get the code working.

But one potential issue I note is that you are instructing the script to ask for a new photo once per second (every 1000 ms.) But in your other thread, you indicate that it takes almost 40 seconds to take a picture and store a file. I think you may run into issues if you don't slow down your request rate.

I think too that it is a problem of timing. But I don't understand one thing : if the page makes many requests when the Yun is working(taking picture in this case) the sketch must finish the loop before look if there is again a client.

I forgotten to say that time the loop "takePicture" is about 40 second.

Yes, the sketch will loop around and service one call at a time. However, the script that is running on the web page is running on the computer displaying the page, it will make about 40 requests for the picture data, most of which will fail. It’s not a good setup.

My first step would be to change the refresh interval to something like 60 seconds, just to make sure you aren’t getting overlapping requests. Get that working first, then try to optimize the timing. Perhaps you can come up with a scheme that makes a new request only after it gets a complete response from the previous request? (Again, I’m not the person to go to about JavaScript!)

Plan B:

ttl-serial-camera has VGA 640x480 and run 1/40 frame/second=0.025f/s

USB Webcam support:

VGA 640x480
720p 1280x720.
1080p 1920x1080

could run at 5 f/s -30 f/s.

Install USB webcam:

opkg update
opkg install kmod-usb-core kmod-video-core kmod-input-core 
opkg install kmod-video-uvc

Install mjpg-streamer for static and video:

opkg update
opkg install mjpg-streamer
nano /etc/config/mjpg-streamer
...
option enabled		"1"
...
/etc/init.d/mjpg-streamer enable
/etc/init.d/mjpg-streamer stop
/etc/init.d/mjpg-streamer start

View static/stream/java/javascipt/videolan/control sample:

http://arduino.local:8080/

for Yun USB webcam win hands down either performance or price.

@sonnyyu : yes I’m thinking of this solution

@ShapeShifter : I tried to put 90 second to refresh the page but I still have the same problem.

I have no idea what I can do .

@UserYun7856,
try it just once. Use: setTimeout() instead of setInterval()

JavaScript Timing Events
http://www.w3schools.com/js/js_timing.asp

Jesse

Oh good! Reinforcements have arrived. 8)

I'm out of my element when it comes to JavaScript. Gotta find me some time to do some learning on that front... (Anybody know where I can buy a six-pack of extra hours? :grin: )

ShapeShifter: Oh good! Reinforcements have arrived. 8)

I'm out of my element when it comes to JavaScript. Gotta find me some time to do some learning on that front... (Anybody know where I can buy a six-pack of extra hours? :grin: )

LOL. I've been here the whole time. I spent the weekend at Launchfest hackathon. I'm still a bit beatup.

Jesse

jessemonroy650: @UserYun7856, try it just once. Use: setTimeout() instead of setInterval()

JavaScript Timing Events http://www.w3schools.com/js/js_timing.asp

Jesse

I tried this, but I still have the same problem...

Okay, There is problem with some browsers doing "pre-fetch". I recall this as a problem, but I don't have the incident indexed - so I don't have a solution. It happened mostly with the Apple Safari.

So forgive me, I do not remember which browser you are using. Please let me know.

In the meantime, I will look for that problem - which has a solution.

TIA Jesse

I'm using Opera 27.0

thank you for taking the time to help me :)

UserYun7856: I'm using Opera 27.0

thank you for taking the time to help me :)

@UserYun7856,

I've looked at your code again. It seems there are parts missing. Did you upload/post all the code? If did post all the code, then there are only two things left to check.

1) Try fetching the page (and image) with curl, and see if you can split the problem between Arduino and the webbrowser. 2) Try Plan B:

Jesse

Yes I posted all the code.

1)I don't understand what are you trying to say 2)I'm waiting for delivery of the webcam for tried the Plan B

@UserYun7856,

Curl is a tool that uses the Internet to grab (GET/POST/PUT/etc) web objects - like webpages, images, javascript files. Curl is widely used for REST development, because it gets the "raw" object.

http://curl.haxx.se/ - CURL homepage.

As an example, this would get you just the image.

curl http://arduino.local/sd/test_liaison_wifi_2/image.jpg

Or if you wanted to test the call to the sketch you would do:

curl http://arduino.local/arduino/photo

Does this make sense? Do you understand?

Jesse

I have tried the plan B and it works perfectly.

But, I want to succeed to upload my picture (even if the plan B is better ;) ). I wasn't understand the "curl", is it a ligne command for Linino, or a Javascript command ?

Sorry for the delay but I had a lots of work...

UserYun7856: I wasn't understand the "curl", is it a ligne command for Linino, or a Javascript command ?

Yes, it is. ;)

It is a Linux command, AND it is available as a callable function in many languages such as C, Python, JavaScript, etc.

UserYun7856: ::::SNIP:::: But, I want to succeed to upload my picture (even if the plan B is better ;) ). I wasn't understand the "curl", is it a ligne command for Linino, or a Javascript command ?

@UserYun7856,

Yes 'curl' is command line tool for Linux/Linino/Arduino Yun. They have many libraries for Python, C++, etc. 'curl' is NOT Javascript.

Jesse

jessemonroy650: 'curl' is NOT Javascript.

I stand corrected, thank you. 8)

I'm not a JavaScript programmer, I have a lot to learn in that regard. If not curl(), surely JavaScript has something similar that does the same thing?

sonnyyu: ...

View static/stream/java/javascipt/videolan/control sample:

http://arduino.local:8080/ ...

Has demo for static/stream/java/javascipt/videolan/control sample.