I am developing an application where i am capturing images from a camera and streaming them online. To capture images i am using an opencv code. It stores(rewrites) the image on the same image file on server. This image is then streamed online. However if the streaming and storing take place simultaneously then the image gets corrupt. So i have synchronized those processes using system locks. The html page that checks that reloads the image every 2 secs checks if the img file has a system lock. If yes then it doesn't reload the image. So to check whether the file is locked or not i have to put some php code in my html file. I believe that my code is sytactically correct. Yet it is not giving the desired output.
<html>
<head>
<!--to keep requesting the server new page without displaying the image from the cache pragma
is used -->
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<title>YOUR SITE TITLE GOES HERE</title>
<style type="text/css">
#imgJSselbox{
position: absolute;
margin: 0px;
padding: 0px;
visibility: hidden;
width: 0px;
height: 0px;
border: 1px solid #006;
color: #fff;
background-image: url(selection_area.gif);
z-index: 20;
}
</style>
<script type="text/javascript" src="globalvar.js"></script>
<script language="Javascript">
var x = 2;
var y = 1;
var now;
function startClock() {
x = x-y;
document.form1.clock.value = x;
<?php
$fp1=fopen("a.jpg","r");
$fp2=fopen("b.jpeg","r");
if(flock($fp1,LOCK_EX|LOCK_NB)==0 && flock($fp2,LOCK_EX|LOCK_NB)==0)
$x=1;
else
$x=0;
?>
var ch;
ch=<?php echo $x; ?>
if (x < 1 && ch==1) reload();
<?php
$fp1=fopen("a.jpg","r");
$fp2=fopen("b.jpeg","r");
flock($fp1,LOCK_UN);
flock($fp2,LOCK_UN);
?>
timerID = setTimeout("startClock()", 1000);
}
function reload()
{
now = new Date();
<!-- to pass the new image to the src -->
var camImg = "a.jpg" + "?" + now.getTime();
document.campicture.src = camImg;
var crpImg = "b.jpeg" + "?" + now.getTime();
document.croppic.src = crpImg;
x = 2;
document.form1.clock.value = x;
}
</script>
<script type="text/javascript" src="image_cropper.js">
document.form1.x-coord.value=x1;
document.write(x1);
</script>
<script>
function window.open('im','imgg')
{
window.open('im','imgg');
}
</script>
</head>
<body bgcolor="white" onLoad="startClock()">
<center>
<font size=-1>
<h1>AYS WEBCAM PAGE</h1>
<h2>This page loads images and refreshes them after every given interval of time keeping
the same name of the image file</h2><p><br />
<div id="imgJSselbox"></div>
</center>
<img name="campicture" src="a.jpg" id="testimage" border=1 width=640 height=480
alt="AYS
founder's IMAGE" onClick="getImageCropSelectionPoint
'testimage',event,document.form1);">
====>>ROI==>>
<img name="croppic" src="b.jpeg" width=320 height=240 alt="cropped_image">
<center>
<form NAME="form1"action="image_cropper.php" method="POST"><b><font size="-1"
face="Arial">AutoReload in :==> </font>
<input TYPE="text" NAME="clock" SIZE="2" VALUE="5"> <font size="-1"
face="Arial">seconds.</font></b><br />
<br><br><input type="button" value="Crop" onclick= setImageCropAreaSubmit
("image_cropper.php",'testimage')><br><br>
</center>
<!-- <input type="text" name="x-coord" value=""><br>
<input type="text" name="y-coord" value=""><br>
<input type="text" name="wid" value="" ><br>
<input type="text" name="hght" value="" ><br>
-->
</form>
</body>
</html>
Thank you
Your problem is in the code timerID = setTimeout("startClock()", 1000);.
Use
timerID = setTimeout(startClock, 1000); instead.
See window.setTimeout - MDN.
Related
I'm following through the PDF version on this URL: https://www.neodynamic.com/articles/Print-PDF-from-PHP-directly-to-default-printer-without-print-dialog/
I have managed to have it running. However, I noticed that it can only print one PDF file that is saved, using the $filePath = 'files/LoremIpsum.pdf'; under the PrintPDFController.php file. Is there a way of dynamically getting contents from a database that is output on say a table as follows:
<table id="WebClientPrint">
<tr><td>ONLY PRINT THIS PART AUTOMATICALLY</td></tr>
</table>
<input type="button" onclick="How to call Table ID i.e. WebClientPrint and the default printer" value="Print" />
This means that at button click, only the contents of the table should be printed out.
Hello I once used this type of printing and it helped me, only the window for choosing a printer will pop up.
function PrintDiv() {
var contents = document.getElementById("dvContents").innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
document.body.removeChild(frame1);
}, 500);
return false;
}
Use it like this
<body>
<form id="form1">
<span style="font-size: 10pt; font-weight: bold; font-family: Arial">Sample code</span>
<hr />
<div id="dvContents" style="border: 1px dotted black; padding: 5px; width: 300px">
<span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hello,
<br />
This is <span style="color: #18B5F0">Mateo</span>.<br />
Hoping that you are enjoying my articles!</span>
</div>
<br />
<input type="button" onclick="PrintDiv();" value="Print" />
</form>
</body>
I hope it helps you.
I am echoing records from the database which are wrapped with html tags and was trying to put some effect on the echoed data. When I click the edit link, the textfield should shake. It works on the first element but when I click the edit link of the next element, the first textfield still shakes and not the other one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wallpost</title>
<style>
.wallpost input[type="text"]{
width: 500px;
height: 20px;
}
.wallpost input[type="submit"]{
height: 26px;
}
.user{
font-weight: bold;
font-size: 20px;
}
.post{
font-family: Arial;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<?php
require_once 'dbconfig.php';
$user = $_SESSION['user'];;
echo '<form action="post.php" method="post" class="wallpost"><input
type="text" name="post" size="50"><input type="submit" name="wallpost"
value="Post"></form>';
$query = $con->query("SELECT * FROM statuspost ORDER BY id DESC");
while($i = $query->fetch_object()){
//echo $i->post.' '.$i->id.' <a href="wallpost.php?type=post&
id='.$i->id.'" >Remove</a>'.'<br/>';
echo '<span class="user">'.$i->user.'</span>'.'<br>'.'<span
class="post">'.$i->post.'</span>'.' <form action="editpost.php?type=post&
id='.$i->id.'" method="post"><span id="edit"><input type="text"
name="edit">
<br/><input type="submit" value="Edit"></span><a href="#"
onclick="showEdit();">Edit </a><a href="remove.php?type=post&
id='.$i->id.'" >Remove</a></form> '.'<br/><br/>';
//echo '<div id="post">'.$i->post.' '.$i->id.'<a href="#"
id="anchor" class="',$i->id,'" onclick="del();">Remove</a></div>
<br/>';
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0
/prototype.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0
/scriptaculous.js"></script>
<script>
function showEdit(){
Effect.Shake('edit');
}
</script>
</body>
</html>
Replace <span id="edit"> by something like <span id="edit'.$i->id.'"> to have different ids on each elements. Then of course, showEdit() must know which id it has to shake, so it has to take a parameter. Or even simpler: replace onclick="showEdit();" by onclick="Effect.Shake(\'edit'.$i->id.'\');"
Scriptaculous effects take either an ID or a JavaScript reference to a DOM element as their first argument, so if you add a classname to your multiple elements, you can shake all of them at once like this:
<span class="shake-me">...</span>
<span class="shake-me">...</span>
<span class="shake-me">...</span>
Inside an enumerator:
$$('.shake-me').each(function(elm){
Effect.Shake(elm);
});
I was redirecting to new page start.php and passing variable in this way:
window.location.href = 'start.php?&userid=+ userid;`
Can I do it in this way:
$.post('start.php',{userid: userid});
window.location.href = 'start.php';
I dont want to use GET and Form submit.
Because on same page there are other processes which already post data to other page.
I tested above but on start.php it says var is not defined
UPDATE
start.php
<?php
$user_id=$_GET['userid']; //When I use GET
?>
<?php
$user_id=$_POST['userid']; //When I use POST
?>
login.php
<html>
<head>
<title>ThenWat</title>
<link href="css/button.css" rel="stylesheet" type="text/css">
<link href="css/rateit.css" rel="stylesheet" type="text/css">
<script src="//connect.facebook.net/en_US/all.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.rateit.js" type="text/javascript"></script>
<style>
.header{
background-color:#0B6121;
border:2px solid #0B6121;
padding:10px 40px;
border-radius:5px;
}
.middle{
background-color:Yellow;
}
.left{
background-color:Green;
}
.url{
box-sizing: border-box;
display: block;
}
.url:hover {
box-shadow: 2px 2px 5px rgba(0,0,0,.2);
}
html, body { margin: 0; padding: 0; border: 0 }
</style>
</head>
<body>
<div class="header" style="">
<table style="">
<tr>
<td><img src= "3.png" height="50" width="310"/></td>
</tr>
</table>
</div>
<table border="0" width="100%">
<tr>
<div class="middle">
<td style="width:40%">
<input type="button" id="loginButton" class="button" onclick="authUser();" value="Login | ThanWat" style="display:none; left:500px; position:relative"/>
<lable id="lable1" style="display:none;" ><i> Please wait .. </i> </lable>
<div class="rateit bigstars" id="rateit99" data-rateit-starwidth="32" data-rateit-starheight="32" style=" position:relative; top:-30px; display:none; left:300px" >
</div>
</td>
</div>
</tr>
</table>
<div id="fb-root"></div>
<script type="text/javascript">
var userid;
FB.init({
appId: '1412066',
xfbml: true,
status: true,
cookie: true,
});
FB.getLoginStatus(checkLoginStatus);
function authUser()
{
FB.login(checkLoginStatus, {scope:'email'});
}
function checkLoginStatus(response)
{
document.getElementById('lable1').style.display = 'block';
if(response && response.status == 'connected')
{
FB.api('/me?fields=movies,email,name', function(mydata)
{
console.log(mydata.email);
console.log(mydata.id);
userid=mydata.id;
var name=mydata.name;
//alert(name);
var email=mydata.email;
var json = JSON.stringify(mydata.movies.data);
var a = JSON.parse(json);
var picture="https://graph.facebook.com/"+userid+"/picture?type=small";
// alert(picture);
$.post('user_record.php',{'myd':a, name: name, email: email, userid:userid, picture:picture}, function(data)
{
window.location.href = 'start.php?userid='+userid;
});
});
console.log('Access Token: ' + response.authResponse.accessToken);
}
else
{
document.getElementById('lable1').style.display = 'none';
document.getElementById('loginButton').style.display = 'block';
}
}
</script>
</body>
</html>
UPDATE2
$.post('user_record.php',{'myd':a, name: name, email: email, userid:userid, picture:picture}, function(data)
{
var $form = $("<form id='form1' method='post' action='start.php'></form>");
form.append('<input type="hidden" name="userid" value="'+userid+'" />');
$('body').append($form);
window.form1.submit();
});
start.php
<?php
$user_id=$_POST['userid'];
echo $user_id;
?>
Here is a solution that worked for me. You need to add a new form using jquery after your first ajax response and then submit this form using javascript.
<script>
$.post('user_record.php',{'myd':a, name: name, email: email, userid:userid, picture:picture}, function(data){
var $form = $("<form id='form1' method='post' action='start.php'></form>");
$form.append('<input type="hidden" name="userid" value="'+data+'" />');
$('body').append($form);
window.form1.submit();
});
</script>
Please modify it according to your requirement. Hope this helps
I'm using a datepicker it works well but I would like to get the data after the user submit the form. So far I didn't find the way to do it and I would like to use Post and not Get. I would like to stay in the same page after send it.
Here is my code:
<script type="text/javascript">
window.onload = function(){
g_globalObject = new JsDatePick({
useMode:1,
isStripped:true,
target:"div3_example"
});
g_globalObject.setOnSelectedDelegate(function(){
var obj = g_globalObject.getSelectedDay();
document.getElementById("div3_example_result").innerHTML = obj.day + "/" + obj.month + "/" + obj.year;
});
};
</script>
</head>
<body>
<div id="div3_example" style="margin:10px 0 30px 0; border:groove 1px red; width:205px; height:230px;">
</div>
<div id="div3_example_result" style="height:20px; width:205px; line-height:20px; margin:10px 0 0 0; border:groove 1px #666;"></div>
<form action="" method="post">
<input type="button" value="send"/>
</form>
i am new to php to developing simple content management system i have a field like menu, position, visible, img_des, content, information_id .. it almost all working correctly now i need to insert image field to that . i have a separate file for forms and new page creation
now the following code
if (isset($_POST['submit'])) {
$errors = array();
// clean up data before putting in the database
$information_id = mysql_prep($_GET['info']);
$menu = trim(mysql_prep($_POST['menu'])); // cut out whitespace for menu
$position = mysql_prep($_POST['position']);
$visible = mysql_prep($_POST['visible']);
$image = mysql_prep($_POST['image']);
$img_des = mysql_prep($_POST['img_des']);
$content = mysql_prep($_POST['content']);
if(empty($errors)){
$query = "INSERT INTO pages (
menu, position, visible, img_des, content, information_id
) VALUES (
'{$menu}', {$position}, {$visible},'{$img_des}', '{$content}', {$information_id}
)";
if ($result = mysql_query($query, $connection)) {
$message = "The new page was created successfully";
$new_page_id = mysql_insert_id();
redirect_to("content.php?page={$new_page_id}");
} else {
$message = "The page failed to create";
}
?>
before img_des i want to insert image. what type i have i have to use and what code i have to put to insert and retrieve image.
You shouldn't be storing images in the database. Save the image on the server and save a link to the files location in the database.
see this question for more information: What should I use to save a image in database
try this code.
<?php
$images_arr = array();
//This is the directory where images will be saved
$target_dir = "uploads/";
$target = $target_dir.$_FILES['photo']['name'];
//$target = $target . basename( $_FILES['photo']['name']);
//This gets all the other information from the form
$name=$_POST['nameMember'];
$bandMember=$_POST['bandMember'];
$pic=($_FILES['photo']['name']);
$about=$_POST['aboutMember'];
$bands=$_POST['otherBands'];
// Connects to your Database
mysql_connect("Localhost", "remote", "remote123") or die(mysql_error()) ;
mysql_select_db("test") or die(mysql_error()) ;
//Writes the information to the database
mysql_query("INSERT INTO dbProfiles (nameMember,bandMember,photo,aboutMember,otherBands)
VALUES ('$name', '$bandMember', '$pic', '$about', '$bands')") ;
//Writes the photo to the server
if(move_uploaded_file($_FILES['photo']['tmp_name'], $target)){
//Tells you if its all ok
echo "The file ". $target_dir.$_FILES['photo']['name']. " has been uploaded, and your information has been added to the directory";
$images_arr[] = $target;
}
else {
//Gives and error if its not
echo "Sorry, there was a problem uploading your file.";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="http://www.thesoftwareguy.in/favicon.ico" type="image/x-icon" />
<!--iOS/android/handheld specific -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Upload multiple images create thumbnails and save path to database with php and mysql">
<meta name="keywords" content="php, mysql, thumbnail,upload image, check mime type">
<meta name="author" content="Shahrukh Khan">
<title>Upload multiple images create thumbnails and save path to database with php and mysql </title>
<link rel="stylesheet" href="style.css" type="text/css" />
<style>
.files{height: 30px; margin: 10px 10px 0 0;width: 250px; }
.add{ font-size: 14px; color: #EB028F; border: none; }
.rem a{ font-size: 14px; color: #f00; border: none; }
.submit{width: 110px; height: 30px; background: #6D37B0; color: #fff;text-align: center;}
</style>
<script src="jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function() {
$(".add").click(function() {
$('<div><input class="files" name="user_files[]" type="file" ><span class="rem" ><a href="javascript:void(0);" >Remove</span></div>').appendTo(".contents");
});
$('.contents').on('click', '.rem', function() {
$(this).parent("div").remove();
});
});
</script>
</head>
<body>
<form name="f1" action="index.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="image_form_submit" value="1"/>
<div id="container">
<div id="body">
<div class="mainTitle" >Upload multiple images create thumbnails and save path to database with php and mysql</div>
<div class="height20"></div>
<article>
<div class="height20"></div>
<div style="width: 380px; margin: 0 auto;">
<h3 style="text-align: center;">Image will be resized to 100px X 100px </h3>
<p>Please Enter the Band Members Name.</p>
<p> Band Member or Affiliates Name:</p>
<input type="text" name="nameMember"/>
<p>
Please Enter the Band Members Position. Example:Drums.
</p>
<p>
Band Position:
</p>
<input type="text" name="bandMember"/>
<p>
Please Upload a Photo of the Member in gif or jpeg format. The file name should be named after the Members name. If the same file name is uploaded twice it will be overwritten! Maxium size of File is 35kb.
</p>
<p>
Photo:
</p>
<input type="hidden" name="size" value="350000">
<input type="file" name="photo">
<p>
Please Enter any other information about the band member here.
</p>
<p>
Other Member Information:
</p>
<textarea rows="10" cols="35" name="aboutMember">
</textarea>
<p>
Please Enter any other Bands the Member has been in.
</p>
<p>
Other Bands:
</p>
<input type="text" name="otherBands" size=30 />
<br/>
<br/>
<input TYPE="submit" name="upload" title="Add data to the Database" value="Add Member"/>
</div>
<table class="bordered">
<?php
// fetch all records
$sql = "SELECT * FROM dbProfiles WHERE 1 "; ?>
<?php
$sql="SELECT * FROM dbProfiles";
$result_set=mysql_query($sql);
while($row=mysql_fetch_array($result_set))
{
?>
<tr>
<td><p><?php echo $row['nameMember'] ?>"</p></td>
<td><img src="uploads/<?php echo $row['photo'] ?>" width="200px" height="200px;"/><p><?php echo $row['nameMember'] ?>"</p></td>
</tr>
<?php
}
?>
</table>
</article>
</div>
</div>
<div class="height10"></div>
</form>
</body>
</html>
<?php
function errorMessage($str) {
return '<div style="width:50%; margin:0 auto; border:2px solid #F00;padding:2px; color:#000; margin-top:10px; text-align:center;">' . $str . '</div>';
}
function successMessage($str) {
return '<div style="width:50%; margin:0 auto; border:2px solid #06C;padding:2px; color:#000; margin-top:10px; text-align:center;">' . $str . '</div>';
}
?>