Paint Solution
Printed From: Web Wiz Forums
Category: General Discussion
Forum Name: General Discussion
Forum Description: General discussion and chat on any topic.
URL: https://forums.webwiz.net/forum_posts.asp?TID=14926
Printed Date: 01 April 2026 at 2:32am
Software Version: Web Wiz Forums 12.08 - https://www.webwizforums.com
Topic: Paint Solution
Posted By: Gullanian
Subject: Paint Solution
Date 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?
|
Replies:
Posted By: Mart
Date Posted: 03 May 2005 at 2:40am
|
have you looked into Microsoft Ink or Flash?
|
Posted By: huwnet
Date 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?
|
Posted By: Gullanian
Date 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.
|
Posted By: Mart
Date 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.
|
Posted By: Gullanian
Date 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.
|
Posted By: Gullanian
Date 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.
|
Posted By: Gullanian
Date 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>
|
|
|