Notretsam

well that was easy to do, thank you $stmtgetwrest = $connnewish->prepare("SELECT wreid, wretotmats, wrewins, wreloses, wrepoints, wrepercent FROM leagueDivisions WHERE leagueid=? AND leagueseason=? AND divisid=? ORDER BY wrepoints DESC , wreseed");

doesn't seem like it is by primary, I changed primary from unique id to seed, which seed is basically a number from 1 to 16. I changed some numbers around manually in phpmyadmin for seed, and it didn't change the order the items came out, same as always. I didn't know you could order by more than one column, that would be handy, have to look into that. thanks

I'll have to double check that. the primary key is a unique ID for each entry, so numeric value , could be that.

This isn't a bug or a how too inquiry, I know how to order items with mysql queries. What I am wondering though is, how does mysql determine what result goes first between 2 matching results? A quick example, I do a SQL Query ordering by "total wins", so a numeric value. 2 people have 7 wins each, how does the SQL Query determine the order for the 2 people? In my testing of leagues that am coding, I actually have two divisions of 8 people with 7 wins/ 7 losses each, always showing on leaderboard at same position. I am thinking its ordered by who was added first to database table? but am not sure if mysql has the capability to remember that? As I said, its not a bug or a big deal really, am just curious on this. I also figured I might get asked in future by someone playing my game.

tested this morning and using " worked it is amazing that something so simple to do , is all that was needed to fix it lol thank you for help Ingolme

ok thanks, its 8.46PM for me now, so shall be tomorrow before I can try. I do echo the text out due to there being a variety of different match lists and options person viewing can select on page. echo "<div class='contframeturn' onclick='matchshow(&quot;$matchID&quot;)'>"; Presume the &quot; won't work in the above echo line?

<div class='contframeturn' onclick='matchshow(151636871863316991)'> function is called in div opening tag, basically there is a mysql query that loops through database and outputs each match on a page, during that the above id for match is attached to the onclick event oh while I type this , am wondering if is it because I wrapped it with ' and not " ?

well javascript is just magically rounding the number up as you can clearly see by my original post, where I have shown the actual/showing numbers. I have already investigated why it occurring, I looked at view source and the form with the onclick event, I can clearly see the correct number in there. The number is correct before the function shown in my original post, then during the javascript function, or the window.location event changing you to match.php page, the number is rounded up. I have read about javascripts limitations with numbers, and a friend mentioned using string. I tried below and the onclick event wouldn't occur at all. <script type="text/javascript"> function matchshow(string($sids)) { var x=$sids; var cstyle = document.getElementById('fcstyle').value; window.location.href = "match.php?sid=" + x + "&cstyle=" + cstyle; } </script> I also tried var x = string($sids); I don't know javascript very well , so maybe am using it incorrectly? Also when I manually type the url into browser with the actual number id, the page works fine, so there no issues on match.php I really have exhausted every possible fix that I can think off, and already worked backwards, which is why I identified the actual number for match id being incorrect, and it appearing too being rounded up.

Am more familiar with PHP than Javascript, so not sure how to fix this strange bug. basically have a wrestling game where people can do matches against other people, naturally I have a match list that person can view there current active matches and click to go to match. I use a onclick event, which contains the $matchid, then the following javascript <script type="text/javascript"> function matchshow($sids) { var x=$sids; var cstyle = document.getElementById('fcstyle').value; window.location.href = "match.php?sid=" + x + "&cstyle=" + cstyle; } </script> Don't need to worry about the cstyle, that is the current tab the person is viewing in match. The var x=$sids is what contains the match id number. Now I just recently moved hosting companies, and the match list was working fine on old host and new host, but all of a sudden today it stopped working. I managed to figure out why, but just don't know how to fix it. actual=151636871863316991 showing=151636871863317000 actual=1516368718560392395 showing=1516368718560392400 The actual is the actual match id, the showing is what javascript is sending across in the window.location.href, its the last 4 digits that are wrong and appears it rounding the figure up. I have no idea why it all of a sudden doing this, is there a way to prevent it from rounding the number up? I did just have to increase the length of the match id today, due to another bug I run into, so presume that is related to why this suddenly happening.

site is to big? as of right now, I can not see that being why, site is large but not a lot of images, css file is 27KB. Maybe I am missing something that is causing it on website but doubt it. I have cut back caching to just the image files and being waiting to see how it goes. Looks like it going be trial and error, just have to keep adding/removing a line and seeing how cache size is effected, was hoping not to take this long route.

well after some thinking decided to remove the following lines and see how that goes ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" was hoping people on here would tell me what they would do.

I presume the cache items related to specific type, image/jpg would cache jpg images and so on with the others. Since I only wanted to cache image files, presume the non image file extensions can be removed. ok so it resizes content and makes it smaller, handy to have. don't have answer to these questions , which is why am on this forum asking. just seems like a big jump in my chrome cache since i added this to my htaccess fille.

I know I do the cache via my .htaccess file but it seems like from my browser, that am caching to much. always have about 500MB+ , which seems a lot , only started to happen after I set cache for my website. I only want the images cached and below is what I have. ## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 week" ExpiresByType image/jpeg "access plus 1 week" ExpiresByType image/gif "access plus 1 week" ExpiresByType image/png "access plus 1 week" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" </IfModule> ## EXPIRES CACHING ## I presume the type lines for css, pdf, javascript , shockwave-flash and x-icon can be deleted? am wondering about the ExpiresDefault line is needed? I also have the below coding, which I can't remember what it is for lol I found it on the web, sure it was related to the internet cache. <IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html <FilesMatch "\.(js|css|xml|gz)$"> Header append Vary: Accept-Encoding </FilesMatch> </IfModule>

Got a completely working selecting color solution done on this test page https://wrestlestarz.c7.ixsecure.com/avatars/test5.php Am very happy with this, still a tonne of work to do on a avatar system, but this is a very nice start. thank you very much @dsonesuk , also appreciate your time @justsomeguy and @Ingolme here is full coding that I have for anyone who is curious, which works from a mysql database. <?php $image1 = "maletshirtred.png"; $image2 = "maletshirtredTrans.png"; $membid = "betatesting"; $conn = new mysqli($host, $user, $password, $database); /* create a prepared statement */ $stmtgetwrest = $conn->prepare("SELECT tshirtcolor FROM avatarColors WHERE membid=?"); /* bind parameters for markers */ $stmtgetwrest->bind_param("s", $membid); /* execute query */ $stmtgetwrest->execute(); $stmtgetwrest->bind_result($tshirtcolor); /* fetch value */ $stmtgetwrest->fetch(); /* close statement */ $stmtgetwrest->close(); $hex= "$tshirtcolor"; list($r, $g, $b) = sscanf($hex, "#%02x%02x%02x"); echo "$hex -> $r $g $b"; $tshirtcolred = "$r"; $tshirtcolgreen = "$g"; $tshirtcolblue = "$b"; ?> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>WrestleStarz - Account Panel for Member</title> <meta name="description" content="Members account panel that offers a variety of features for there account."> <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> <script type="text/javascript"> //Global variables var picWidth = 200; // width of the canvas var picHeight = 222; // height of the canvas var picLength = picWidth * picHeight; // number of chunks var myImage = new Image(); // Create a new blank image. var myImage2 = new Image(); // Create a new blank image. // Load the image and display it. function displayImage() { // Get the canvas element. canvas = document.getElementById("myCanvas"); // Make sure you got it. if (canvas.getContext) { // Specify 2d canvas type. ctx = canvas.getContext("2d"); // When the image is loaded, draw it. myImage.onload = function() { // Load the image into the context. ctx.drawImage(myImage, 0, 0); // Get and modify the image data. getColorData(); // Put the modified image back on the canvas. putColorData(); }; // Define the source of the image. // This file must be on your machine in the same folder as this web page. var mainimage = document.getElementById('mainimage').value; var maskimage = document.getElementById('maskimage').value; myImage.src = mainimage; myImage2.src = maskimage; } } function getColorData() { myImage = ctx.getImageData(0, 0, picWidth, picHeight); // Loop through data. Maskcolor = [255, 255, 255]; //white var tshirtcolred = document.getElementById('tshirtcolred').value; var tshirtcolgreen = document.getElementById('tshirtcolgreen').value; var tshirtcolblue = document.getElementById('tshirtcolblue').value; // newcolor = [0, 255, 0]; //lime // newcolor = [255, 0, 0]; // red newcolor = [tshirtcolred , tshirtcolgreen, tshirtcolblue]; // newcolor = [0, 0, 255];// navy // newcolor = [255, 255, 255]; for (var i = 0; i < myImage.data.length; i += 4) { myImage.data[i] = newcolor[0]; myImage.data[i + 1] = newcolor[1]; myImage.data[i + 2] = newcolor[2]; } } function putColorData() { ctx.putImageData(myImage, 0, 0); myImage2.onload = function() { ctx.drawImage(myImage2, 0, 0); }; } </script> </head> <style> #mask_shadow_wrap {position: relative;} #mask_shadow_wrap img:last-child {position: absolute; top:0; left:0;} </style> <body onLoad="displayImage()"> <form id="myformlarge" action="yourpathhere" enctype="multipart/form-data" method="post"> <input type="hidden" id="mainimage" name="mainimage" value="<?php echo "$image1"; ?>"> <input type="hidden" id="maskimage" name="maskimage" value="<?php echo "$image2"; ?>"> <input type="hidden" id="tshirtcolred" name="tshirtcolred" value="<?php echo "$tshirtcolred"; ?>"> <input type="hidden" id="tshirtcolblue" name="tshirtcolblue" value="<?php echo "$tshirtcolblue"; ?>"> <input type="hidden" id="tshirtcolgreen" name="tshirtcolgreen" value="<?php echo "$tshirtcolgreen"; ?>"> <input id="background-color" type="color" value="<?php echo "$hex"; ?>" onChange="javascript:document.getElementById('chosen-bgcolor').value = document.getElementById('background-color').value;"/> <input id="chosen-bgcolor" name="bodycolor" type="text" size="5" value="<?php echo "$hex"; ?>"/> <input type="Submit" class="button" value="Select Color"> <hr> </form> <div id="mask_shadow_wrap"> <img src="<?php echo "$image2"; ?>" alt=""> </div> <canvas id="myCanvas" width="200" height="222"> </canvas> </body> </html>

https://wrestlestarz.c7.ixsecure.com/avatars/test5.php This is testing page am working on, just need to figure out how to get the rgb value of the selected color now. Like this does but sadly couldn't get working today https://www.w3schools.com/colors/colors_converter.asp

yup starting to see how to do this , its pretty much "layers" , like you would use in image making program (photoshop etc) You apply the color selection on the main layer , then apply layer effects images on top. Been playing around with the code today and now got PHP added into the code you did, which now means I can get the color values from a mysql database now. Its not finished and still to tidy up the code I think, change how the displayImage(); function is called as well. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <?php $image1 = "maletshirtred.png"; $image2 = "maletshirtredTrans.png"; $tshirtcolred = "0"; $tshirtcolgreen = "0"; $tshirtcolblue = "255"; ?> <form> <input type="hidden" id="mainimage" name="mainimage" value="<?php echo "$image1"; ?>"> <input type="hidden" id="maskimage" name="maskimage" value="<?php echo "$image2"; ?>"> <input type="hidden" id="tshirtcolred" name="tshirtcolred" value="<?php echo "$tshirtcolred"; ?>"> <input type="hidden" id="tshirtcolblue" name="tshirtcolblue" value="<?php echo "$tshirtcolblue"; ?>"> <input type="hidden" id="tshirtcolgreen" name="tshirtcolgreen" value="<?php echo "$tshirtcolgreen"; ?>"> </form> <script type="text/javascript"> //Global variables var picWidth = 200; // width of the canvas var picHeight = 222; // height of the canvas var picLength = picWidth * picHeight; // number of chunks var myImage = new Image(); // Create a new blank image. var myImage2 = new Image(); // Create a new blank image. // Load the image and display it. function displayImage() { // Get the canvas element. canvas = document.getElementById("myCanvas"); // Make sure you got it. if (canvas.getContext) { // Specify 2d canvas type. ctx = canvas.getContext("2d"); // When the image is loaded, draw it. myImage.onload = function() { // Load the image into the context. ctx.drawImage(myImage, 0, 0); // Get and modify the image data. getColorData(); // Put the modified image back on the canvas. putColorData(); }; // Define the source of the image. // This file must be on your machine in the same folder as this web page. var mainimage = document.getElementById('mainimage').value; var maskimage = document.getElementById('maskimage').value; myImage.src = mainimage; myImage2.src = maskimage; } } function getColorData() { myImage = ctx.getImageData(0, 0, picWidth, picHeight); // Loop through data. Maskcolor = [255, 255, 255]; //white var tshirtcolred = document.getElementById('tshirtcolred').value; var tshirtcolgreen = document.getElementById('tshirtcolgreen').value; var tshirtcolblue = document.getElementById('tshirtcolblue').value; newcolor = [tshirtcolred , tshirtcolgreen, tshirtcolblue]; for (var i = 0; i < myImage.data.length; i += 4) { myImage.data[i] = newcolor[0]; myImage.data[i + 1] = newcolor[1]; myImage.data[i + 2] = newcolor[2]; } } function putColorData() { ctx.putImageData(myImage, 0, 0); myImage2.onload = function() { ctx.drawImage(myImage2, 0, 0); }; } </script> <style> #mask_shadow_wrap {position: relative;} #mask_shadow_wrap img:last-child {position: absolute; top:0; left:0;} .mphotozz img { display:none; } </style> </head> <body onLoad="displayImage()"> <div id="mask_shadow_wrap"> <img src="<?php echo "$image2"; ?>" alt=""> </div> <canvas id="myCanvas" width="200" height="222"> </canvas> </body>

OK here is your code and got the trans image from your previous post dsonesuk https://wrestlestarz.c7.ixsecure.com/avatars/test4.php

yeah I was wondering about a saved layer image with the shading , collar and stitching. Need to speak to my business partner, its his friends daughter that drawing the images for us. It just clicked with me that myimage2src is most likely the trans.png image you talking about?

OK so the code I showed in original post, have two tests I did. First test is here https://wrestlestarz.c7.ixsecure.com/avatars/test.php function getColorData() { myImage = ctx.getImageData(0, 0, 200, 222); // Loop through data. for (var i = 0; i < picLength * 4; i += 4) { // First bytes are red bytes. // Remove all red. myImage.data[i] = 2; // Second bytes are green bytes. // Third bytes are blue bytes. // Fourth bytes are alpha bytes } } Second test is taken a bit of code from dsonesuk code and combining small part off it into code I had. (Thanks justsomeguy for color code information) This code works but as you can see, it doesn't retain the shirt collar area or any shading. https://wrestlestarz.c7.ixsecure.com/avatars/test2.php function getColorData() { myImage = ctx.getImageData(0, 0, 200, 222); // Loop through data. for (var i = 0; i < picLength * 4; i += 4) { // First bytes are red bytes. // Remove all red. myImage.data[i] = 0x00; myImage.data[i + 1] = 0x00; myImage.data[i + 2] = 0xFF; // Second bytes are green bytes. // Third bytes are blue bytes. // Fourth bytes are alpha bytes } } starting to think there is no way to change just one color in a image while retaining all other original colors. So say Blue/Red , change blue to green but keep the red. yet again, replies are much appreciated.

looks like that code pretty much works @dsonesuk thanks a heap for that https://wrestlestarz.c7.ixsecure.com/avatars/test4.php can see the exact code you showed here on webpage with navy. sadly it applies the mask to the full image, even the collar area of the t-shirt and any shading color used is also replaced, which I think @Ingolme is talking about.

am really sorry Ingolme but that post has completely lost me I think maybe you think I coded the code I shown above, its actually code I found online, all I understand is what I shown in my last post. An that is the red value is being changed, but the green and blue isn't , so therefore am not seeing the color am hoping to. Am starting to think there isn't a way to do exactly what I want to do and might just have to have different images for each color, but I would like to keep exploring this, an see where it takes me.

personally prefer the old design myself but I wouldn't say the new design is untidy. its clean and easy enough to use, I might just be used to the old design and why I prefer it.

OK correct me if am wrong here but I believe the below coding equates to $rgb(0,0,0,0) , its basically looping through and changing the number to 0 function getColorData() { myImage = ctx.getImageData(0, 0, 200, 222); // Loop through data. for (var i = 0; i < picLength * 4; i += 4) { // First bytes are red bytes. // Remove all red. myImage.data[i] = 0; // Second bytes are green bytes. // Third bytes are blue bytes. // Fourth bytes are alpha bytes } } So for me to change the red, green and blue I need to detect the first loop to change the red value, then detect the second loop to change the green value and a third loop for changing the blue value? ignore the $rgb var, that just me showing its $rgb color code.

@justsomeguyyeah I was planning to have a look into getimagedata specific tag today. would be great if you can use the same #colorcode format as you do in css but sadly as you say, its specific alpha values which I don't know much about. @Ingolme interesting did see a tint question and answer on stackoverflow yesterday I figure there got to be a way to detect a specific #colorcode and change to another #colorcode Some sort of code like $colorchange = changecol("#000000"); I think would do the change of color Am still trying to work out the coding steps but believe I would need to change the T-Shirt image first, then use Canvas to construct the avatar, sorta like a jigsaw puzzle. head + neck, body + hands, legs + feet Its a big project and tricky for me to work out, since am self taught , so any advice I can get will be greatly appreciated.

I believe with HTML 5 Canvas and Javascript, you can now detect a specific color on a image and change it. Am basically looking to build an avatar system for a game, so am thinking before I construct the avatar image (html5 canvas) , I can change the color of the t-shirt image. I found the below code on the web and can see it at this link: https://wrestlestarz.c7.ixsecure.com/avatars/test.php <!DOCTYPE html> <html> <head> <script type="text/javascript"> //Global variables var picWidth = 200; // width of the canvas var picHeight = 222; // height of the canvas var picLength = picWidth * picHeight; // number of chunks var myImage = new Image(); // Create a new blank image. // Load the image and display it. function displayImage() { // Get the canvas element. canvas = document.getElementById("myCanvas"); // Make sure you got it. if (canvas.getContext) { // Specify 2d canvas type. ctx = canvas.getContext("2d"); // When the image is loaded, draw it. myImage.onload = function() { // Load the image into the context. ctx.drawImage(myImage, 0, 0); // Get and modify the image data. getColorData(); // Put the modified image back on the canvas. putColorData(); } // Define the source of the image. // This file must be on your machine in the same folder as this web page. myImage.src = "maletshirtred.png"; } } function getColorData() { myImage = ctx.getImageData(0, 0, 200, 222); // Loop through data. for (var i = 0; i < picLength * 4; i += 4) { // First bytes are red bytes. // Remove all red. myImage.data[i] = 2; // Second bytes are green bytes. // Third bytes are blue bytes. // Fourth bytes are alpha bytes } } function putColorData() { ctx.putImageData(myImage, 0, 0); } </script> </head> <body onLoad="displayImage()"> <img id="myPhoto" src="maletshirtred.png"><br> <canvas id="myCanvas" width="200" height="222"> </canvas> </body> </html> </body> </html> it seems like that the myImage.data = 2; part is where the color change happens, but sadly, it appears like the #colorcodes don't work so can someone fix the above code or point me in right direction on how to do this? Am basically looking to change one color to any color that a member wants, not 100% sure its possible to do this.