| Author |
 Topic Search  Topic Options
|
Gullanian 
Senior Member
Joined: 04 January 2002
Location: England
Status: Offline
Points: 4373
|
 Post Options
 Thanks(0)
 Quote  Reply
 Topic: Paint Solution
Posted: 03 May 2005 at 2:12am |
|
Does anyone know how I can achieve a way to allow visitors to paint on
a small square, less than 100x100 pixels, each pixel either only being
black or white, then saving it to the server?
Apart from java, is there any other way to do this?
|
 |
Mart
Senior Member
Joined: 30 November 2002
Status: Offline
Points: 2304
|
Post Options
Thanks(0)
Quote Reply
Posted: 03 May 2005 at 2:40am |
|
have you looked into Microsoft Ink or Flash?
|
|
huwnet
Senior Member
Joined: 30 May 2003
Location: England
Status: Offline
Points: 1375
|
Post Options
Thanks(0)
Quote Reply
Posted: 03 May 2005 at 11:59am |
|
Surely it would be possible to do it with javascript.
Maybe using table cells the size of pixels that you can fill.
Is this for mobile phone operator logos?
|
|
Gullanian
Senior Member
Joined: 04 January 2002
Location: England
Status: Offline
Points: 4373
|
Post Options
Thanks(0)
Quote Reply
Posted: 03 May 2005 at 12:00pm |
Well guessed 
I'm going to try and make a 'design your own logo' and text it to your phone for like 20p or something.
|
|
Mart
Senior Member
Joined: 30 November 2002
Status: Offline
Points: 2304
|
Post Options
Thanks(0)
Quote Reply
Posted: 03 May 2005 at 12:04pm |
|
Ah, maybe not MS Ink for that then, you could use a hosted .net control to do that, but that would only work in IE.
|
|
Gullanian
Senior Member
Joined: 04 January 2002
Location: England
Status: Offline
Points: 4373
|
Post Options
Thanks(0)
Quote Reply
Posted: 03 May 2005 at 12:18pm |
Here the JS to make the paint pad:
<%
Dim intRows
Dim intColumns
Dim intLooper1
Dim intLooper2
intLooper2 = 0
intLooper1 = 0
intRows = 25
intColumns = 80
%>
<table border="0" cellspacing="1" cellpadding="1" bgcolor="#c0c0c0">
<tr>
<td bgcolor="#ffffff">
<table border="0" cellspacing="0" cellpadding="0">
<%
Do until intLooper1 = intRows
Response.write("<tr height=""2"" bgcolor=""#ffffff"">")
Do until intLooper2 = intColumns
Response.write("<td onClick=""this.bgColor =
setBG(this.bgColor);"" class=""box""></td>")
intLooper2 = intLooper2 + 1
Loop
intLooper2 = 0
Response.write("</tr>")
intLooper1 = intLooper1 + 1
Loop
%>
</table>
</td>
</tr>
</table>
|
However I am stuck as to how to save this as a file! I'm guessing
it would be possible to save it as a BMP if I can figure out how
exactly BMP files are saved... Then I can use a component to
convert it into a JPG.
|
|
Gullanian
Senior Member
Joined: 04 January 2002
Location: England
Status: Offline
Points: 4373
|
Post Options
Thanks(0)
Quote Reply
Posted: 03 May 2005 at 12:23pm |
|
Ok I think I know how to achieve this now...
User does his doodles
Javascript creates BMP file (http://astronomy.swin.edu.au/~pbourke/dataformats/bmp/) and stores it in a cookie
ASP page saves it into a database
I've improved the pain box now so click and drag works properly.
Edited by Gullanian - 03 May 2005 at 12:58pm
|
|
Gullanian
Senior Member
Joined: 04 January 2002
Location: England
Status: Offline
Points: 4373
|
Post Options
Thanks(0)
Quote Reply
Posted: 03 May 2005 at 1:16pm |
Ok, that file above is over 170kb! Here is a 2kb version, I am very proud of it! Whatcha all think?
<!--
All code is copyright C4sms.com
This code cannot be reproduced without containing
a direct visible link to www.c4sms.com on all the
pages this code, or part of the code exists on.
-->
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>C4 SMS Operator Logo Creator</title>
<LINK rel="stylesheet" type="text/css" href="style.css">
<style>
td.box
{
height:10px;
width:10px;
}
</style>
<SCRIPT LANGUAGE = "JavaScript">
var currSwitch = 0;
var changeColour;
function newCol(aNewColour)
{
changeColour = aNewColour;
}
function oppColour(inputColour)
{
if(inputColour == "#ffffff")
{
return "#000000";
}
else
{
return "#ffffff";
}
}
function switchIt(newSwitch,dragNew)
{
currSwitch = newSwitch;
}
function setBG(currentBG)
{
if(currSwitch == 1)
{
return changeColour;
}else{
return currentBG;
}
}
</script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
<table border="0" cellspacing="0" cellpadding="8">
<tr>
<td>
<table border="0" cellspacing="1" cellpadding="1" bgcolor="#c0c0c0">
<tr>
<td bgcolor="#ff8000" class="mHead" align="center">
Custom Operator Logo
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table border="0" cellspacing="0" cellpadding="0">
<script language="Javascript">
var intLooper1 = 0;
var intLooper2 = 0;
while(intLooper1 < 14)
{
document.write("<tr>");
while(intLooper2 < 72)
{
document.write("<td onMouseOver=\"this.bgColor =
setBG(this.bgColor);\" class=\"box\"
onMouseDown=\"switchIt(1);newCol(oppColour(this.bgColor));\"
onMouseUp=\"switchIt(0) \" bgcolor=\"#ffffff\"></td>")
intLooper2++;
}
intLooper2 = 0;
document.write("</tr>");
intLooper1++;
}
</script>
</table>
</td>
</tr>
</table>
<div align="center"><span class="tiny"><BR><BR></span>
<input type="button" value="Save Logo">
</div>
</td>
</tr>
</table>
</body>
</html>
|
|
|
