Hive Eye (Project 1)

This the first project in a series to explore the concept of augmented reality through pictures with mobile devices, IoT and sensors. The idea is to provide a real time window into what users are currently seeing. This could be used for security scenarios, as a way to find the “cool parties” at events, or any other situation where images can be used to make decisions.

This first project simply allows users to take a picture with their mobile device camera, upload it to the server, and then have a photo gallery stream be automatically created. There is no security built into this project so its used to show some basic tools, but would not be appropriate for real world applications unless security is offered another way, or security is not important.

This project is web app that uses HTML, CSS and PHP on a Linux server. With modern HTML you can access the device camera almost as easily with HTML as you can if you coded a native app. The value of using a web app is that users do not have to install anything on their device, and you do not have to go through the store experience to deploy an app.

For this project we use 3 scripts:

• hive-eye.php – is the landing page. This PHP script creates the gallery automatically and offers a link to the picture upload script
• hive-eye-form.html – This is the HTML form that is used to get a picture from the camera, adn then allows you to submit it to the PHP script that will save the picture on the server.
• hive-eye-process.php – Saves the picture to the server and then automatically directs the user back to the hive-eye.php landing page.

PHP Configuration:

Your php.ini file may have to be edited to be able to upload files. Within your php.ini file make sure file_uploads = On. Then check upload_max_size and see if it’s set appropriately. The php.ini file is usually located at /etc/php/7.x/apache2/php.ini . The 7.x is for the version of PHP you are using and this is for Apache. Once the changes have been made make sure to restart the Apache service with sudo service apache2 restart

Also make sure the folder you are uploading files to has the appropriate Linux level permissions. For these types of projects I recommend 777 so that you don’t have to troubleshoot permissions while you are learning PHP.

For this project I set the upload_max_filesize to 10M which is more than the standard picture size on iPhones which are generally between 6-7MB.

; Whether to allow HTTP file uploads.
file_uploads = On

; Temporary directory for HTTP uploaded files.
; Will use system default if not set.
;upload_tmp_dir = 

; Maximum allowed size for uploaded files.
upload_max_filesize = 10MCode language: JavaScript (javascript)

Code Explanation:

hive-eye.php

Line 1 – HTML code to make the page Responsive so that text increases in size on mobile devices

Line 3 – Title for page

Line 5 – Link to form to take a picture

Line 7 – Opens PHP script

Line 9 – glob() function takes all files with a jpeg,jpg,png file and puts the names into an array called $photos (You can add additional extensions. Just don’t put a space between the comma and the beginning of the extension.

Line 11 – var_dump() can be used for troubleshooting if needed

Line 13 – Reverse sorts the array so that first images are shown first.

Lines 15 – 18 – foreach() loops through $photos array to print out gallery page.

Line 20 – Closes PHP script

<meta name="viewport" content="width=device-width, initial-scale=1">

<h1>Hive Eye</h1>

<h2><a href="./hive-eye-form.html">Take Picture</a></h2>

<?php

$photos = glob("*.{jpeg,jpg,png}", GLOB_BRACE);

//echo var_dump($photos);

rsort($photos);

foreach($photos as $pic){
    echo "<img style='display:block; margin-left:auto; margin-right:auto; width:90%;' src='$pic'><br><br>";
    echo "</div>";
}

?>
Code language: HTML, XML (xml)

hive-eye-form.html

Line 1 – HTML code to make the page Responsive so that text increases in size on mobile devices

Line 3 – Title for form

Line 4 – Opens form tag, sends form data to hive-eye-process.php script with the method of post. enctype has to be set to multipart/form-data for uploading files.

Line 5 – Set input type to file, gives the name of image for the processing script to be able to access. Capture is set to environment which means the camera will default to main smartphone camera. accept is set to image for camera picture.

Lines 7-8 – Close the form and set a submit button.

Line 10 – Create a hyperlink to go back to the home page

<meta name="viewport" content="width=device-width, initial-scale=1.5">

<h1>Take Picture</h1>
<form action="hive-eye-process.php" method="post" enctype="multipart/form-data">
<input type="file" name ="image" capture="environment" accept="image/*">
<br>
<input type="submit">
</form>

<a href="./hive-eye.php">Go Back</a>
Code language: HTML, XML (xml)

hive-eye-process.php

Line 1 – Open PHP script

Line 3 – Create an $error variable to test for problems with file upload

Lines 5 – 9 – If there is an image create variables for file attributes and asign the values from the $_FILES array that is automatically created when the file is uploaded.

Line 11 – Create an array of extensions that are acceptable to script

Lines 15 – 18 – Tests if the file extension is acceptable

Lines 20 – 23 – Tests to make sure file is under 9MB in size. In the php.ini file we set the max upload size to 10MB. by having the script be 1MB lower it keeps errors from if the image file size might be bigger than the php.ini z=size, but lower than this conditional size.

Lines 25-32 – If there are no errors the file is saved.

Line 26 – The name for the file is created using a timestamp so that there are no identical names.

Line 27 – File is saved with new name

Line 28 – PHP changes the page back to the home page.

Lines 33 – 34 – Close isset() if statement, and closes PHP.

<?php

$error = 0;

if(isset($_FILES['image'])){
    $file_name = $_FILES['image']['name'];
    $file_size =$_FILES['image']['size'];
    $file_tmp =$_FILES['image']['tmp_name'];
    $file_ext=strtolower(end(explode('.',$_FILES['image']['name'])));

    $extensions= array("jpeg","jpg","png");

//echo var_dump($_FILES);

if(in_array($file_ext,$extensions)== false){
    echo "This app only accepts .jpeg .jpg and .png files<br>";
    $error = 1;
}
      
if($file_size > 9000000){
    echo "The image is too big. Must be below 2 MB<br>";
    $error = 1;
}
      
if($error != 1){
    $new_name = time().".".$file_ext;;
    move_uploaded_file($file_tmp,"./".$new_name);
    header('Location: hive-eye.php');    

}else {
    echo "There was a problem uploading the image.";
}
}
?>
Code language: HTML, XML (xml)