hex colors instead of HTML color names

Hi,

We are building a site for customized gifts. We had a preview tool built for us that allows users to select alphabet letters, designs, and type their names.

We only discovered after the fact that the designer (now gone) did not use hex colors as we asked, but HTML color names instead. This cannot work becasue we have very precise color schemes that need to match. Too bad for us I guess.

Here is the website (the tool is in the blue section on the right):
http://www.sweetartsdesign.com.ws026.alentus.com/2007WebSite/indexb.html

Here are the exact colors we need.

1. Blue (#008ED8)
2. Green (#4FBA00)
3. Pink (#EA569F)
4. Yellow (#FACB00)
5. Teal (#009EBA)
6. Purple (#874DBF)
7. Orange (#F57D00)
8. Lime (#8FD400)
9. Navy (#00599C)
10. Dark Green (#0DB02B)
11. Red (#CF142B)


Can someone tell us how to modify the code so it uses the hex colors above? It would display the color names in the drop down menu but use the hex colors.

Thanks for your help!

Here is the code:


function AddName()
{
if (!(document.getElementById('alphabetLayer')))
alert('Alphabet should be added first');
else if (!(document.getElementById('designLayer')))
{
alert('Design should be added Second');
}
else
{
var text = document.getElementById('nameInput').value;
if (text == "")
{
alert("Enter Name");
}
else
{
var loadingImage = document.getElementById('loading');
loadingImage.style.visibility = 'visible';

//create new node for letter
var selectedFontFamily = document.getElementById('fontFamily');
//var selectedFontSize = document.getElementById('fontSize');
var selectedFontColor = document.getElementById('fontColor');

var fontFamily = selectedFontFamily[selectedFontFamily.selectedIndex].text;
//var fontSize = selectedFontSize[selectedFontSize.selectedIndex].text;
var fontSize = 17;
var fontColor = selectedFontColor[selectedFontColor.selectedIndex].text;

var xmlobj = false;
if (window.XMLHttpRequest)
xmlobj = new XMLHttpRequest();
else if (window.ActiveXObject)
xmlobj = new ActiveXObject("Microsoft.XMLHTTP");

xmlobj.open("GET","SweetDesignTool/Service.asmx/getTextImage?text="+encodeURIComponent(text)+"&fontName="+encodeURIComponent(fontFamily)+"&fontSize="+encodeURIComponent(fontSize)+"&fontColor="+encodeURIComponent(fontColor));
xmlobj.onreadystatechange = function()
{
if (xmlobj.readyState == 4){
if (xmlobj.status == 200){
loadingImage.style.visibility = 'hidden';
var returnString = xmlobj.responseXML.documentElement.
firstChild.nodeValue;
returnString = returnString.split(';');
if (!(document.getElementById('nameImage')))
{
var newElement = CreateElement();
newElement.divArea.id = 'nameLayer';
newElement.divArea.style.width = '150';
newElement.divArea.style.height = '40';
newElement.divArea.style.position = 'absolute';
//newElement.divArea.style.left = '50';
newElement.divArea.style.top = '60';
//newElement.divArea.style.filter = 'progidXImageTransform.Microsoft.AlphaImageLoader(src='+imagePath+', sizingMethod=’scale’);'
newElement.divArea.style.backgroundRepeat = 'no-repeat';
newElement.divArea.style.textAlign = 'center';
//newElement.divArea.style.backgroundImage = 'url('+imagePath+')';
newElement.previewArea.appendChild(newElement.divArea);

var imagePath = returnString[0];
var imageWidth = returnString[1];
var imageHeight = returnString[2];

var nameLayer = document.getElementById('nameLayer');
newElement = document.createElement('div');
newElement.id = 'nameImage';
newElement.style.width = imageWidth;
newElement.style.height = imageHeight;
newElement.style.filter = 'progidXImageTransform.Microsoft.AlphaImageLoader(src='+imagePath+', sizingMethod=’scale’);'
newElement.style.backgroundRepeat = 'no-repeat';
//newElement.src = imagePath;
nameLayer.appendChild(newElement);
}
else
{
var nameImage = document.getElementById('nameImage');
var imagePath = returnString[0];
var imageWidth = returnString[1];
var imageHeight = returnString[2];
nameImage.style.width = imageWidth;
nameImage.style.height = imageHeight;
nameImage.style.filter = 'progidXImageTransform.Microsoft.AlphaImageLoader(src='+imagePath+', sizingMethod=’scale’);'
}
}
else
alert("Error:"+xmlobj.status+" "+xmlobj.statusText);
}
}
xmlobj.send(null);
document.getElementById('nameAddButton').value = 'Update';
}
}
}

 

Change the <select> options in the HTML to:

						            <option value="#008ED8">Blue</option>
						            <option value="#0DB02B">Forest</option>
						            <option value="#4FBA00">Green</option>
						            <option value="#8FD400">Lime</option>
						            <option value="#00599C">Navy</option>
						            <option value="#F57D00">Orange</option>
						            <option value="#EA569F">Pink</option>
						            <option value="#874DBF">Purple</option>
						            <option value="#CF142B">Red</option>
						            <option value="#009EBA">Teal</option>
						            <option value="#FACB00">Yellow</option>

Code (markup):

And in the JS, change this line:

var fontColor = selectedFontColor[selectedFontColor.selectedIndex].text;

Code (markup):

To:

var fontColor = selectedFontColor[selectedFontColor.selectedIndex].value;

Code (markup):

 

krt,

Doesn't seem to work. The names are no longer being displayed. Any idea why? What info would you need?

http://www.sweetartsdesign.com.ws026.alentus.com/2007WebSite/indexb.html

Thanks for your time!

 

Which names? The colour names? Did you replace only the <option>s?

 

The names you type in are no longer displayed on the design preview area.

I changed the option values and the js code from "text" to "value" as you indicated.

You can see it: http://www.sweetartsdesign.com.ws026.alentus.com/2007WebSite/indexb.html

Any suggestion?

 

Can I see the source code for Service.asmx then? It seems the hex value is passed but the script must not think it is a valid value.

 

Certainly.

Service.asmx calls the following code:


using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.IO;
using System.Drawing;
using System.Drawing.Text;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Service : System.Web.Services.WebService
{
public Service () {

//Uncomment the following line if using designed components
//InitializeComponent();
}

[WebMethod]
public String getLetter(String letter, String color)
{
String path = "http://www.sweetartsdesign.com.ws026.alentus.com/2007WebSite/SweetDesignTool/Images/letters/" + letter[0] + "-" + color + ".jpg";

return path;
}

[WebMethod]
public String getDesign(String designName, String colorSet)
{
String path = "http://www.sweetartsdesign.com.ws026.alentus.com/2007WebSite/SweetDesignTool/Images/Designs/" + designName + "-" + colorSet + ".gif";

return path;
}

[WebMethod]
public String getTextImage(String text, String fontName, String fontSize, String fontColor)
{
if (fontName == "French Script MT")
fontSize = "26";
fontName = fontName + ".ttf";

Bitmap bitmap = new Bitmap(1, 1);
PrivateFontCollection fontFile = new PrivateFontCollection();
String fontDir = "http://www.sweetartsdesign.com.ws026.alentus.com/2007WebSite/SweetDesignTool/Fonts/";

fontFile.AddFontFile(Server.MapPath("Fonts/") + fontName);

FontFamily fontFamily = fontFile.Families[0];
Font font = new Font(fontFamily, Convert.ToInt32(fontSize));

Graphics graphics = Graphics.FromImage(bitmap);
int imageWidth = (int)graphics.MeasureString(text, font).Width;
int imageheight = (int)graphics.MeasureString(text, font).Height;

bitmap = new Bitmap(bitmap,new Size(imageWidth,imageheight));
graphics = Graphics.FromImage(bitmap);
graphics.Clear(Color.Transparent);
graphics.DrawString(text,font,new SolidBrush(Color.FromName(fontColor)),0,0);
graphics.Flush();
text = text.Trim();
text = text.Replace(" ","");
Random rand = new Random(1);
int num = rand.Next();
String imagePath = Server.MapPath("Images/Names/")+text+num+".png";
while (File.Exists(imagePath))
{
//File.Delete(imagePath);
num = rand.Next();
imagePath = Server.MapPath("Images/Names/") + text + num + ".png";
}
bitmap.Save(imagePath, System.Drawing.Imaging.ImageFormat.Png);

return "http://www.sweetartsdesign.com.ws026.alentus.com/2007WebSite/SweetDesignTool/Images/Names/"+text+num+".png;"+imageWidth+";"+imageheight;
}

}

 

Replace Color.FromName(fontColor) to:
ColorTranslator.FromHtml(fontColor)

 

It works! Thanks a lot!!