I have a page that allows the user to draw an image using HTML5 canvas, convert it into text with JavaScript and post it to a PHP page.
http://dsiextensions.co.cc/chatdraw.php
The page is quite confusing, each text box is for each line of to 100px X 100px canvas. To put the data in the boxes, click "Finish" and then click "Submit" (Sorry that it's really slow).
I've tries making changes to the PHP code and occasionally the variable turns up but more often than not, it doesn't.
Here's the code: (note, only the data in the first box is used at the moment)
<?php
$dstring = $_POST['senddata1'];
$darray = str_split($dstring);
echo $dstring;
print_r($darray);
$x=1;
$y=1;
for ($a=0;$a<100;$a++)
{
if($a%100==0 && $a!=0){
echo '<br />'; //Checks if it is the 100th pixel and adds a new line (not needed at the moment)
$y++;
$x=1;}
//echo $x . ',' . $y . '(' . $a . ',' . $darray[$a] . ')|';
if($darray[$a]!=0){
echo "<input type='button' style='width:15;height:15;background-color:#000' />"; //Black button if it is a black pixel
}
else{
echo "<input type='button' style='width:15;height:15;background-color:#fff' />"; //White button if it is a white pixel
}
$x++;
}
?>
The codes supposed to check if the pixel is black or white and create a coloured button based on that (I'm going to use the image functions later), however $dstring is never echoed and therefore can't be converted to an array. Is there something I'm doing wrong here or is it a server problem?
Thanks
Note that the second PHP line should be spread out on to three lines
Seems to work by my side. Are you sure that data is well posted ? Try to make a print_r($_POST); in your script to see what has been posted
Related
I don't know if I'm doing it right, but I have a bunch of images I'm retrieving from the page and since I don't wan a page to have too many images of big sizes, I have displayed them with a much smaller size but I have attached each of them to a link so that when a user click on a picture it opens that image with its original size. The problem is that those images are really big and my client wants the ability to zoom in and out which I don't know how to do. The client thought about resizing the size of the window (in the browser) but sadly it resizes all other windows (for the application) and this is not ok because he needs to see the image and compare it with some information on the app. SO Below is the code of the images displayed and after the user have clicked on the image.
small images
$count = 0;
echo " <div class=\"row\">";
while($row = $result->fetch_assoc()) {
$ext = $row['Extension'];
$ImageID=$row['ImageID'];
if(($count%3) ==0){
echo "</div>";
echo " <div class=\"row\">";
echo " <div class=\"col-sm-2\">";
echo " <a href=\"viewimage.php?ImageID=$ImageID\" class=\"thumbnail\">";
echo '<img id=\"myImg\" src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'" style=\"width:130px;height:130px\"/>';
echo"</a></div>";
++$count;
}else{
echo " <div class=\"col-sm-2\">";
echo " <a href=\"viewimage.php?ImageID=$ImageID\" class=\"thumbnail\">";
echo '<img id=\"myImg\" src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'" style=\"width:130px;height:130px\"/>';
echo"</a></div>";
++$count;
}
}
echo "</div>" ;
Image after link is clicked
<?php
$ImageID = $_GET['ImageID'];
$query = "Select * from $dbname.Images where ImageID = $ImageID";
$result = mysqli_query($conn,$query);
$row = $result->fetch_assoc();
$ext = $row['Extension'];
echo '<img src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'"/>';
?>
I don't know what to do at this point, how can I provide that zoom in/out functionality?
First things first: Generally don't add base64 encoded images directly into your html. Link to them, and host them on your server. It is quite an expensive way of making images appear, both for the server, database, and for the client. It also makes it impossible for the client to cache the images, and it means that each repeated page visit causes the entire data to be sent.
Make two folders on your webservers:
images/
thumbnails/
Put your small images in "thumbnails" and large images in "images"
And if you need to, store the image-names in your database, so you can do something more like this:
echo '<img src="images/'+$imageName+'">'
If you want to, you can do an on-demand resizing of your images, using gd-lib.
The basic idea being, in pseudocode:
//Before the echo command, but after fetching the filename from database
if thumbnails/$imageName exists
then use gdlib to read images/$imageName and save a small version to thumbnails/$imageName
This approach is also applicable if you want to use client-side javascript to show larger versions on the same page. See my page finalkey.net for an example http://finalkey.net/gallery
I've got a a-tag dynamically populated which extracts data from a database and multiplies to the number of records existing. So this to be looked at more like an item in a list.
echo "<a class='Keylist ".$wecb_color."' id='myIDhere' href='index.php?idd=".$record['categoryid']."'><div>".$record['descriptor']."</div></a>";
I'm trying to keep one of the a-tags background set on a different color when a user clicks. Behavior I'm trying to achieve is when a user scrolls and clicked on one link, that a-tag to remain selected depicting a different background color.
I've written snippet trying to do that.
$wecb_color ='';
if(isset($_GET['idd'])){
$_SESSION['link'] = $_GET['idd'];
echo "<br><br><br><br><br>".$_SESSION['link'];
if($_GET['idd'] == $_SESSION ['link']) {
$wecb_color = 'changetogreen';
}
}
The issue is this makes all the a-tag's which are generated having a background color changed to green instead the one that user clicks.
Hard coded CSS script reads as :- .changetogreen{background-color: green;}
Any thoughts appreciated.
It'd change the background color of all links because you're changing the whole class style.
Try this:
echo "<a class='"Keylist " style=" '.$wecb_style.' ;" id='myIDhere' href='index.php?idd=".$record['categoryid']."'><div>".$record['descriptor']."</div></a>";
So you can change the style of particular tag.
And PHP would be:
$wecb_style ='';
if(isset($_GET['idd'])){
$_SESSION['link'] = $_GET['idd'];
echo "<br><br><br><br><br>".$_SESSION['link'];
if($_GET['idd'] == $_SESSION ['link']) {
$wecb_style = 'background: green';
}
}
i'm trying to echo this
echo $row['positionX'] . " " . $row['positionY'];
as polygone points in a svg graphic code snippet
<polyline points = "...HERE..." fill = "none" stroke = "blue" stroke-width = "3"/>
how do i that?
thanks
There are other ways, depending on requirements or coding style:-
$.getJSON(....) jQuery method where the server echo json_decode($row);, then dynamically draw the polyline from JSON data (eg: RaphaelJS or SnapSVG saves you a bit of coding)
echo "<polyline points=\"$row['positionX'],$row['positionX']\" \/>";
For Single Page Application, use #1 since it is an AJAX call.
For a one time page load, #2 coding is simple enough.
Note: too many <?php echo in a HTML is hard to debug, also recommend moustache templating to help readability and code simplification.
Something like this?
<polyline points = "<?php echo $row['positionX'] . " " . $row['positionY']; ?>" fill = "none" stroke = "blue" stroke-width = "3"/>
I have an image gallery displaying all photos from my file directory with php. I have defined what type of file to use etc but the main line of code is as below:
echo '<img src="'.$dir.'/'.$file.'" alt="'.$file.'" width="600px" />';
I know by changing the width=" " above I can alter how many images I have in a row but if i had a drop-down box, with options stating how many columns i want the photos displayed in and a button to refresh the page to show the columns option i have selected.
So for example: I select a drop down option "15 columns" and hit the refresh button, the page should then refresh and the images be redisplayed in columns of 15. How would i go about this?
You should be using HTML Tables for it. Anyhow here is how you should do it.
$allowed_per_line = $_GET['columns'];
$counter = 0;
while($image = fetch...) {
$counter++;
echo "<img src='{$dir}/{$file}' alt='{$file}' />";
if($counter==$allowed_per_line) {
echo '<br />';
$counter=0;
}
}
Php can detect IP, hostname, client agent etc. Can php detect client browser monitor size/resolution?
No, it cant. PHP runs on the server, so it cant detect client settings unless you take specific client-side steps to pass the info to the PHP scripts on the server.
Please do note that some of us like our browsers non-maximized. Perhaps you'd be better off trying to detect browser size rather than screen resolution. I assume that the JS to do either would be very similar, but I don't actually know that to be the case.
Also, what is the resolution of a blind man's screen reader?
You'll have to use PHP together with JavaScript, like in this example:
$url = $_SERVER['PHP_SELF'];
if( isset($HTTP_COOKIE_VARS["res"]) )
$res = $HTTP_COOKIE_VARS["res"];
else {
?>
<script language="javascript">
<!--
go();
function go()
{
var today = new Date();
var the_date = new Date("August 31, 2020");
var the_cookie_date = the_date.toGMTString();
var the_cookie = "res="+ screen.width +"x"+ screen.height;
var the_cookie = the_cookie + ";expires=" + the_cookie_date;
document.cookie=the_cookie
location = '<?echo "$url";?>';
}
//-->
</script>
<?php
}
//Let's "split" the resolution results into two variables
list($width, $height) = split('[x]', $res);
//Take the width and height minus 300
$tb_width = $width-300;
$tb_height = $height-300;
//Make the table
print("<table align=center border=1 width=" .$tb_width . " height=" . $tb_height . " >
<tr><td align=center>Your screen resolution is " . $width . " by " . $height . ".<br>
The width/height of this table is " . $tb_width . " by " . $tb_height . ".</td></tr>
</table>");
I was looking for this as well, but found none of these answers really answered the question! Indeed, there is no way for PHP to know the screen resolution since it is running on the server side. Since that information is not passed along in HTTP environment variables, we need another route. Javascript is one alternative.
The example below is a PHP page that checks for a resolution variable being passed in the HTTP request. If it does not find that resolution variable, then it creates a brief bit of JavaScript on the page that passes that variable and the height and width along in a redirect back to itself. Of course, when the page is loaded again after the redirect all the variables will be set and PHP will know the resolution.
<?php
if(!isset($_GET['resolution'])) {
echo "<script language=\"JavaScript\">
<!--
document.location=\"$PHP_SELF?resolution=1&width=\"+screen.width+\"&height=\"+screen.height;
//-->
</script>";
} else {
// Code to be displayed if resolution is detected
if(isset($_GET['width']) && isset($_GET['height'])) {
echo "Width: " . $_GET['width'] . " and Height: " . $_GET['height'] . "<br />";
} else {
echo "Resolution not detected.";
}
}
?>
In the end I found this a pretty unsatisfactory solution. It works, but it is ugly, adding cruft to the URL and requiring a redirect. Still, it may inspire someone to post a better answer. FYI, credit where credit is due, this answer was inspired by this post.
I know this is not the best answer so spare the downvote.
<script>
/*
JAVASCRIPT IS ON TELL THE DEVELOPER#
*/
// GET BROWSER WIDTH AND HEIGHT
var bh=screen.height;
var bw=screen.width;
window.location="?doSubmit=do&js=yes&bh="+bh+"&bw="+bw+"";
</script>
<noscript>
<!--
JAVASCRIPT IS OFF TELL THE DEVELOPER#
-->
<meta http-equiv='refresh' content='0;url=?doSubmit=do&js=off&bh=off&bw=off'>
</noscript>
<?
if($_GET["doSubmit"]=="do"){
// VARS
$bh=$_GET["bh"];
$bw=$_GET["bw"];
$js=$_GET["js"];
// PRINT HTML ?>
<table>
<tr><td><strong>Browser Width:</strong></td><td><?=$bw;?>px</tr>
<tr><td><strong>Browser Height:</strong></td><td><?=$bh;?>px</tr>
<tr><td><strong>JavaScript Detection (y/n):</strong></td><td><?=$js;?></tr>
</table>
Some people require browser size for mobile devoloping. This is essential information in some cases.
Using WURFL and WALL can get around this as most mobiles do not support JS.
Monitor size can't be obtained using JS, you have to make a poll :)
Note, that JS can check the window size of browser, but this size includes user toolbars, scrollbars etc... Real workspase area in browser depends on those toolbars size.