window.addEventListener("load", eventWindowLoaded, false); function eventWindowLoaded() {
canvasApp(); }
function canvasSupport () { return Modernizr.canvas; }
function eventWindowLoaded() { var pattern = new Image(); pattern.src = "https://images.unsplash.com/photo-1533628635777-112b2239b1c7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dGV4dHVyZSUyMHdhbGx8ZW58MHx8MHx8&w=1000&q=80"; pattern.onload = eventAssetsLoaded; }
function eventAssetsLoaded() {
canvasApp(); }
function canvasApp() {
var $ = jQuery;
var message = "Your Text"; var fontSize = "100"; var fontFace = "Alexa"; //$('#textFont').css('font-family', fontFace); var textFillColor = "#25d366"; var textAlpha = 1; var shadowX = 1; var shadowY = 1; var shadowBlur = 50; var shadowColor = "#25d366"; //$('#texColour').css('color', "#25d366"); var textBaseline = "middle"; var textAlign = "center"; var fillOrStroke ="fill"; var fontWeight = "normal"; var fontStyle = "normal"; var fillType = "colorFill"; var currentLineHeight = parseInt($('#textFont').css('height')); console.log(currentLineHeight); var lineheight = currentLineHeight * 3; var name = ''; var email = ''; var mobileNumber = ''; var specialInstructions = ''; var boardShape = 'Cut to Shape'; var pattern = new Image();
if (!canvasSupport()) { return; }
var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d");
var formElement = document.getElementById("textBox"); formElement.addEventListener("keyup", textBoxChanged, false);
/* var formElements = document.getElementsByName("textSize");
for (var i = 0; i < formElements.length; i++)
{
formElements[i].addEventListener("change", textSizeChanged, false);
} */
formElement = document.getElementById("textSize");
formElement.addEventListener("change", textSizeChanged, false);
formElement = document.getElementById("textFont");
formElement.addEventListener("change", textFontChanged, false);
formElement = document.getElementById("fontStyle");
formElement.addEventListener("change", fontStyleChanged, false);
//formElement = document.getElementById("lineSize");
//formElement.addEventListener("change", lineSizeChanged, false);
formElement = document.getElementById("texColour");
formElement.addEventListener("change", textColourChanged, false);
formElement = document.getElementById("cutShape");
formElement.addEventListener("change", cutShapeChanged, false);
formElement = document.getElementById("name");
formElement.addEventListener("keyup", nameChanged, false);
formElement = document.getElementById("email");
formElement.addEventListener("keyup", emailChanged, false);
formElement = document.getElementById("mobile");
formElement.addEventListener("keyup", mobileChanged, false);
formElement = document.getElementById("special");
formElement.addEventListener("keyup", specialChanged, false);
formElement = document.getElementById("getQuote");
formElement.addEventListener("click", getQuotePressed, false);
pattern.src = "https://images.unsplash.com/photo-1533628635777-112b2239b1c7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dGV4dHVyZSUyMHdhbGx8ZW58MHx8MHx8&w=1000&q=80";
drawScreen();
function drawScreen() {
context.clearRect(0, 0, theCanvas.width, theCanvas.height);
//Background
context.globalAlpha = 1;
context.shadowColor = "transparent";
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 100;
context.fillStyle = "transparent";
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Box
//context.strokeStyle = "#000000";
//context.strokeRect(5, 5, theCanvas.width-10, theCanvas.height-10);
//Text
context.textBaseline = textBaseline;
context.textAlign = textAlign;
context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;
context.shadowColor = shadowColor;
context.shadowOffsetX = shadowX;
context.shadowOffsetY = shadowY;
context.shadowBlur = shadowBlur;
context.globalAlpha = textAlpha;
var xPosition = (theCanvas.width/2);
var yPosition = 100;
switch(fontSize) {
case "50":
yPosition = 80;
break;
case "100":
yPosition = 100;
break;
case "150":
yPosition = 150;
break;
}
let metrics = context.measureText(message);
let fontHeight = Math.ceil((metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent) * 0.28);
let actualHeight = 0; //= Math.ceil((metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent) * 0.28);
let fontWidth = Math.ceil((metrics.width) * 0.28);
let actualWidth = 0; //= Math.ceil((metrics.actualBoundingBoxRight + metrics.actualBoundingBoxLeft) * 0.28);
$("#checkLineHeight").css({"font": context.font, "display" : "none"});
$("#checkLineHeight").append("Testing");
lineheight = parseInt($('#checkLineHeight').css('height'));
//console.log('Height: ' + fontHeight + ' CM');
//console.log('Height: ' + actualHeight + ' CM');
//console.log('Width: ' + actualWidth + ' CM');
//var metrics = context.measureText(message);
var textWidth = metrics.width;
var squareHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
context.fillStyle = textFillColor;
//context.fillText (message, xPosition,yPosition);
var lines = message.split('\n');
let widthYPosition;
let heightPixels = 0;
let widthPixels = 0;
let metricsWidth = 0;
for (var i = 0; i
$('#output').html('
The width of the sign is approximately: ' + width * cmPerLetter + 'CM
The height of the sign is approximately: ' + cmPerLetter * lines.length + 'CM
Please note the size is calculated approximately based on the number of charecters entered. The calculation does not take line spacing or different fonts into account. We will consider all this and let you know what the actual size of the sign would be when we send over the quote to you.
'); $('#small').html('Small - Width:' + width * cmSmall + 'CM Height:' + cmSmall * lines.length + 'CM'); $('#medium').html('Medium - Width:' + width * cmMedium + 'CM Height:' + cmMedium * lines.length + 'CM'); $('#large').html('Large - Width:' + width * cmLarge + 'CM Height:' + cmLarge * lines.length + 'CM'); }
}
function getQuotePressed(e) {
e.preventDefault();
$('#outputForm').html(''); // clearing previous errors
if (validateData()) {
var imageData = theCanvas.toDataURL();
var urlToSendEmail = 'https://www.signhubuk.com/customNeon/email.php';
$.ajax({
url : urlToSendEmail,
type : 'POST',
data: {
text: message.replace("\n","
"),
font: fontFace,
fontStyle: fontStyle,
textSize: fontSize,
boardShape: boardShape,
textColor: textFillColor,
name: name,
emailAddress: email,
mobileNumber: mobileNumber,
specialInstructions: specialInstructions,
imageData: imageData
},
success : function (result) {
console.log ('success');
$('#outputForm').html('
We have recieved your email, We will send you an email with a quote within the next 24 hours
'); }, error : function () { console.log ('error'); $('#outputForm').html('
Something went wrong with sending the email
'); } }); }
}
function validateData() { var isValid = true; if (message == '' || message == 'Your Text'){ isValid = false; document.getElementById("outputForm").innerHTML += ('
Please enter a valid text for your sign
'); }
if (name == ''){ isValid = false; document.getElementById("outputForm").innerHTML += ('
Please enter a valid name
'); }
if (email == '' || !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)){ isValid = false; document.getElementById("outputForm").innerHTML += ('
Please enter a valid email address so we can contact you with the quote
'); }
if (mobileNumber == '' || !/^(?:\W*\d){11}\W*$/.test(mobileNumber)){ isValid = false; document.getElementById("outputForm").innerHTML += ('
Please enter a valid mobile number so we can contact you with the quote
'); }
return isValid; }
}
How it works
Design
Create your design and we will get back to you with a quotation within 24 hours.
Manufacturing
Once the design is approved we can get the sign ready in as little as 5 working days.
Pick-up
Once the sign goes through rigorous testing it is ready for pickup or dispatch.