Note: The MicroTiles online calculator can be used for displays up to 32 tiles wide and high. To configure larger displays, please download the MicroTiles Designer software. Select tiles to remove them from the display.
†The Maximum Combined Source Resolution is based on the aggregate bandwidth of all ECUs in the canvas, using a 60Hz video refresh rate. The calculation is an estimate only, and does not consider cabling layout.
').replace(/__UID__/g, unique_id.toString());
}
$(document).ready(function() {
$.fn.tooltip = function(contents) {
var tooltip = $('', {
'class': 'tooltip',
css: {
'width': '17em'
}
});
$('', {
'class': 'tooltip-content',
css: {
'background-color': '#ffffff',
'color': '#000000',
'width': '15em',
'padding': '0.5em',
'border': '6px solid #a2a2a2',
'-moz-border-radius': '5px',
'-webkit-border-radius': '5px',
'border-radius': '5px'
}
}).appendTo(tooltip);
$(this).hover(function() {
tooltip.appendTo(document.body).hide();
tooltip.find('.tooltip-content').html(contents);
var pos = $(this).offset();
var style = {
'left': (pos.left),
'top': (pos.top - (tooltip.height())),
'position': 'absolute',
'z-index': '1000'
};
tooltip.css(style);
tooltip.show(200);
}, function() {
tooltip.hide(200, function() {
$(this).remove();
});
});
}
$.fx.off = true;
$('.mtdesigner').each(function(index, element) {
var UID = index;
var designer = $(element);
designer.empty().append(GetDesignerSource(UID));
var settings = {
units: 'metric',
ecus: 1,
ecuRatio: 16,
brightness: 100,
canvas: {
width: 4,
height: 4,
occupied: 16,
included: []
},
constants: {
tileResolutionX: 720,
tileResolutionY: 540,
videoRefreshRate: 60,
blankingInterval: 0.05,
ecuBandwidth: 165,
contentWidthMinimum: 32,
metric: {
tileWidth: 0.408,
tileHeight: 0.306,
tileWeight: 9.2,
tileWeightLarge: 0.0092
},
imperial: {
tileWidth: 1.33858,
tileHeight: 1.00393,
tileWeight: 20.2825281,
tileWeightLarge: 0.0101412641
}
}
};
for (var i = 0; i < 1024; ++i) {
settings.canvas.included[i] = true;
}
designer.data('settings', settings);
var findCached = function(e, name) {
var cacheName = '__cache__' + name;
var found = e.data(cacheName);
if (!found) {
found = e.find(name);
e.data(cacheName, found);
}
return found;
}
var formatNumber = function(val, precision) {
val = new Number(val);
val = val.toFixed(precision);
str = val.toString();
while (str.match(/\d+\d{3}/)) {
str = str.replace(/(\d+)(\d{3})/, '$1,$2');
}
return str;
}
var unformatNumber = function(str) {
while (str.match(/\d+,\d{3}/)) {
str = str.replace(/(\d+),(\d{3})(\.\d*)?/, "$1$2$3");
}
var val = new Number(str);
val = val.toFixed(3).valueOf();
return val;
}
var getTooltipContents = function(infoname) {
var format = function(info) {
var formatList = function(list) {
var r = '';
for (var i = 0; i < list.length; ++i) {
r += '
' + list[i] + '
';
}
return r;
};
var description = '
' + info.description + '
';
var includes = '
Includes:' + formatList(info.includes) + '
';
var image = '';
if (info.image != undefined) {
image = '
';
}
return (image + description + includes);
};
switch (infoname) {
case 'display-unit':
return format({
description: 'Each display unit includes a 1m Display Port cable.',
includes: [
'1 Display Unit',
'1 Display Port cable (1m)'
],
image: {
alt: 'Display Unit',
src: 'images/designer/screen-off.png'
}
});
case 'screen':
return format({
description: 'Screen ordered separately to the display units.',
includes: [
'1 Screen'
],
image: {
alt: 'Screen',
src: 'images/designer/screen.png'
}
});
case 'ecu':
return format({
description: 'Each ECU includes a 3m Display Port cable, Y power cord and line cord.',
includes: [
'1 ECU',
'1 Y Power Cord',
'1 Display Port Cable (3m)',
'1 Line Cord'
],
image: {
alt: 'ECU',
src: 'images/designer/ecu.png'
}
});
case 'user-kit':
return format({
description: 'Each kit includes a remote control, screen removal tool and cleaning cloth, and system documentation.',
includes: [
'1 Remote Control',
'1 Screen Removal Tool',
'1 Cleaning Cloth',
'1 System Document'
]
});
case 'setup-kit':
return format({
description: 'One kit supports up to 9 tiles. Each kit includes 9 Y power cords, a line cord, roll of light seal trim, and screws for fine optimization of screen gaps.',
includes: [
'9 Y Power Cords',
'1 Line Cord',
'1 Light Seal Trim',
'1pck Screws'
]
});
case 'foot-ends':
return format({
description: 'Levelling feet are recommended to help level the bottom row when building on a supporting structure. Order one end foot kit per row (includes left and right end feet).',
includes: [
'1 End Foot'
],
image: {
alt: 'End Feet',
src: 'images/designer/floorbracket.png'
}
});
case 'foot-center':
return format({
description: 'Order one center foot in between each column. Center feet shipped in quantities of 3.',
includes: [
'3 Center Feet'
],
image: {
alt: 'End Feet',
src: 'images/designer/floorbracket.png'
}
});
case 'mount-bracket':
return format({
description: 'One required for every tile above 5 high. Shipped in quantities of 2.',
includes: [
'2 Mount Brackets'
],
image: {
alt: 'Mount Bracket',
src: 'images/designer/wallmount.png'
}
});
}
}
var setWarning = function(message, tip) {
var warning = findCached(designer, '#warning' + UID);
var oldMessage = designer.data('current-warning');
if (oldMessage != message) {
designer.data('current-warning', message);
warning.empty();
if (message) {
warning.append('
' + message + ' ' + tip + '
');
}
else {
warning.append('
' + tip + '
');
}
}
}
var updateDimensions = function() {
var settings = designer.data('settings');
var constants = settings.constants;
var dimensions;
if (settings.units == 'metric') {
dimensions = constants.metric;
}
else {
dimensions = constants.imperial;
}
var tileSelector = findCached(designer, '#tile-selector' + UID);
tileSelector.data('draw')(settings.canvas.width, settings.canvas.height);
var area = settings.canvas.width * settings.canvas.height;
settings.canvas.occupied = 0;
for (var y = 0; y < settings.canvas.height; ++y) {
for (var x = 0; x < settings.canvas.width; ++x) {
if (settings.canvas.included[y * 32 + x]) {
++settings.canvas.occupied;
}
}
}
var warningMessage = false;
var warningTip = 'Add external controllers to increase content resolution and reduce upscaling';
updateWeight();
updateBrightness();
updateEcus();
updateBOM();
var physicalWidth = settings.canvas.width * dimensions.tileWidth;
var physicalHeight = settings.canvas.height * dimensions.tileHeight;
var physicalArea = physicalWidth * physicalHeight;
var resolutionWidth = settings.canvas.width * constants.tileResolutionX;
var resolutionHeight = settings.canvas.height * constants.tileResolutionY;
var resolutionArea = constants.tileResolutionX * constants.tileResolutionY * settings.canvas.occupied;
var resolutionPitch = (Math.sqrt((settings.canvas.width * constants.metric.tileWidth) * (settings.canvas.height * constants.metric.tileHeight)) * 1000000) / (Math.sqrt(resolutionArea * 1000000));
var contentWidth;
var contentHeight;
if (settings.canvas.occupied < 5) {
contentWidth = resolutionWidth;
contentHeight = resolutionHeight;
}
else {
contentWidth = Math.max(Math.min(settings.canvas.width * 4 * Math.sqrt((constants.ecuBandwidth * 1000000 * settings.ecus) / ((1 + constants.blankingInterval) * (constants.videoRefreshRate * settings.canvas.width * 4 * settings.canvas.height * 3))), resolutionArea), settings.canvas.width * constants.contentWidthMinimum);
contentHeight = contentWidth * settings.canvas.height / settings.canvas.width * 0.75;
if (contentWidth > resolutionWidth || contentHeight > resolutionHeight) {
contentWidth = Math.min(contentWidth, resolutionWidth);
contentHeight = Math.min(contentHeight, resolutionHeight);
warningMessage = 'The physical resolution of the tiles is the highest resolution that can be achieved.';
warningTip = '';
}
}
var contentArea = contentWidth * contentHeight;
var contentPitch = (constants.metric.tileWidth * 1000 * settings.canvas.width) / contentWidth;
var scalingWidth = resolutionWidth / contentWidth;
var scalingHeight = resolutionHeight / contentHeight;
var scalingArea = resolutionArea / contentArea;
if (scalingWidth > 3 || scalingHeight > 3) {
warningMessage = 'The achievable resolution for content appears low and may not look crisp when viewed up close.';
warningTip = 'Increase the number of ECUs to increase the maximum content resolution.';
}
setWarning(warningMessage, warningTip);
findCached(designer, '#microtiles-horizontal-slider' + UID).slider('option', { value: settings.canvas.width });
findCached(designer, '#microtiles-vertical-slider' + UID).slider('option', { value: (33 - settings.canvas.height) });
findCached(designer, '#quantity-width' + UID).attr('value', formatNumber(settings.canvas.width, 0));
findCached(designer, '#quantity-height' + UID).attr('value', formatNumber(settings.canvas.height, 0));
findCached(designer, '#quantity-area' + UID).attr('value', formatNumber(area, 0));
findCached(designer, '#quantity-occupied' + UID).attr('value', formatNumber(settings.canvas.occupied, 0));
findCached(designer, '#physical-width' + UID).attr('value', formatNumber(physicalWidth, 3));
findCached(designer, '#physical-height' + UID).attr('value', formatNumber(physicalHeight, 3));
findCached(designer, '#physical-area' + UID).attr('value', formatNumber(physicalArea, 3));
findCached(designer, '#resolution-width' + UID).attr('value', formatNumber(resolutionWidth, 0));
findCached(designer, '#resolution-height' + UID).attr('value', formatNumber(resolutionHeight, 0));
findCached(designer, '#resolution-area' + UID).attr('value', formatNumber(resolutionArea, 0));
findCached(designer, '#resolution-pitch' + UID).attr('value', formatNumber(resolutionPitch, 3));
findCached(designer, '#content-width' + UID).attr('value', formatNumber(Math.round(contentWidth), 0));
findCached(designer, '#content-height' + UID).attr('value', formatNumber(Math.round(contentHeight), 0));
findCached(designer, '#content-area' + UID).attr('value', formatNumber(Math.floor(contentArea), 0));
findCached(designer, '#content-pitch' + UID).attr('value', formatNumber(contentPitch, 3));
findCached(designer, '#scaling-width' + UID).attr('value', formatNumber(scalingWidth, 3));
findCached(designer, '#scaling-height' + UID).attr('value', formatNumber(scalingHeight, 3));
findCached(designer, '#scaling-area' + UID).attr('value', formatNumber(scalingArea, 3));
}
var updateWeight = function() {
var settings = designer.data('settings');
var constants = settings.constants;
var dimensions;
if (settings.units == 'metric') {
dimensions = constants.metric;
}
else {
dimensions = constants.imperial;
}
var totalWeight = settings.canvas.occupied * dimensions.tileWeight;
var totalWeightLarge = settings.canvas.occupied * dimensions.tileWeightLarge;
findCached(designer, '#weight-tile' + UID).attr('value', formatNumber(dimensions.tileWeight, 2));
findCached(designer, '#weight-total' + UID).attr('value', formatNumber(totalWeight, 2));
findCached(designer, '#weight-total-large' + UID).attr('value', formatNumber(totalWeightLarge, 2));
}
var updateBrightness = function() {
var settings = designer.data('settings');
var tileEnergy = Math.floor((0.0915 * (800 * (settings.brightness / 100)) - 3.2649) + 0.5);
var totalEnergy = tileEnergy * settings.canvas.occupied;
var totalEnergyLarge = totalEnergy / 1000;
var totalBTUs = totalEnergy * 3.413;
findCached(designer, '#energy-tile' + UID).attr('value', formatNumber(tileEnergy, 0));
findCached(designer, '#energy-total' + UID).attr('value', formatNumber(totalEnergy, 0));
findCached(designer, '#energy-total-large' + UID).attr('value', formatNumber(totalEnergyLarge, 2));
findCached(designer, '#thermal-total' + UID).attr('value', formatNumber(totalBTUs, 2));
}
var updateEcus = function() {
var settings = designer.data('settings');
settings.ecus = Math.ceil(settings.canvas.occupied / settings.ecuRatio);
findCached(designer, '#ecu-count' + UID).attr('value', formatNumber(settings.ecus, 0));
findCached(designer, '#ecu-ratio' + UID).attr('value', formatNumber(settings.ecuRatio, 0));
}
var updateUnits = function() {
var settings = designer.data('settings');
if (settings.units == 'imperial') {
findCached(designer, 'span.unit-area').empty().append('sq. feet');
findCached(designer, 'span.unit-weight').empty().append('lbs');
findCached(designer, 'span.unit-weight-large').empty().append('tons');
}
else {
findCached(designer, 'span.unit-area').empty().append('m2');
findCached(designer, 'span.unit-weight').empty().append('kg');
findCached(designer, 'span.unit-weight-large').empty().append('tonnes');
}
updateDimensions();
}
var updateBOM = function() {
var settings = designer.data('settings');
var display_unit_quantity = settings.canvas.occupied;
var screen_quantity = settings.canvas.occupied;
var ecu_quantity = settings.ecus;
var user_kit_quantity = settings.canvas.occupied > 0 ? 1 : 0;
var setup_kit_quantity = Math.ceil(settings.canvas.occupied / 9);
var foot_ends_quantity = settings.canvas.occupied > 0 ? 1 : 0;
var foot_center_quantity = 0;
var mount_bracket_quantity = 0;
if (settings.canvas.height > 1) {
var tiles = 0;
var y = settings.canvas.height - 1;
for (var x = 0; x < settings.canvas.width; ++x) {
if (settings.canvas.included[y * 32 + x]) {
++tiles;
}
}
if (tiles > 1) {
foot_center_quantity = Math.ceil((tiles - 1) / 3);
}
}
if (settings.canvas.width > 5) {
mount_bracket_quantity = Math.ceil((settings.canvas.occupied - (5 * settings.canvas.width)) / 2);
if (mount_bracket_quantity < 0) {
mount_bracket_quantity = 0;
}
}
var pairs = [['#bom-display-unit', display_unit_quantity],
['#bom-screen', screen_quantity],
['#bom-ecu', ecu_quantity],
['#bom-user-kit', user_kit_quantity],
['#bom-setup-kit', setup_kit_quantity],
['#bom-foot-ends', foot_ends_quantity],
['#bom-foot-center', foot_center_quantity],
['#bom-mount-bracket', mount_bracket_quantity]];
for (var i = 0; i < pairs.length; ++i) {
var cb = findCached(designer, pairs[i][0] + UID);
var tb = findCached(designer, pairs[i][0] + '-quantity' + UID);
var changed = (tb.data('secret-value') != formatNumber(pairs[i][1], 0));
tb.data('secret-value', formatNumber(pairs[i][1], 0));
if (pairs[i][1] > 0 && (changed || cb.attr('checked'))) {
cb.attr('checked', true);
}
else if (changed) {
cb.attr('checked', false);
}
if (cb.attr('checked')) {
tb.attr('value', formatNumber(pairs[i][1], 0));
}
else {
tb.attr('value', '');
}
}
}
var setDefaults = function() {
updateUnits();
updateDimensions();
}
var toggleTile = function(e) {
var settings = designer.data('settings');
var x = e.data('x');
var y = e.data('y');
var i = y * 32 + x;
if (settings.canvas.included[i]) {
settings.canvas.included[i] = false;
e.removeClass('tile-visible');
e.addClass('tile-hidden');
}
else {
settings.canvas.included[i] = true;
e.removeClass('tile-hidden');
e.addClass('tile-visible');
}
updateDimensions();
}
var tileSelector = findCached(designer, '#tile-selector' + UID);
tileSelector.data('draw', function(w, h) {
var settings = tileSelector.data('settings');
if (settings == null) {
settings = { width: 0, height: 0 };
tileSelector.data('settings', settings);
settings = tileSelector.data('settings');
}
else if (settings.width == w && settings.height == h) {
return;
}
w = new Number(w);
h = new Number(h);
settings.width = w;
settings.height = h;
tileSelector.empty();
var tileSize;
var tileWidth;
var tileHeight;
var xOffset;
var yOffset;
var tileArray;
if (w >= h) {
tileSize = 100 / w;
}
else {
tileSize = 100 / h;
}
xOffset = (100 - (w * tileSize)) / 2;
yOffset = (100 - (h * tileSize)) / 2;
tileWidth = 100 / w;
tileHeight = 100 / h;
tileArray = $('', {
'class': 'tile-array',
css: {
'left': (xOffset + '%'),
'top': (yOffset + '%'),
'width': ((tileSize * w) + '%'),
'height': ((tileSize * h) + '%')
}
}).appendTo(tileSelector);
$('').appendTo(
$('', {
'class': 'tile-background'
}).appendTo(tileArray)
);
tileArray.click(function(e) {
var tile = $(e.target);
if (tile.attr('id').match(/tile-\d+-\d+-\d+/)) {
toggleTile(tile);
}
});
for (var y = 0; y < h; ++y) {
for (var x = 0; x < w; ++x) {
var tile = $('', {
'class': 'tile tile-visible',
'id': ('tile-' + x + '-' + y + '-' + UID),
css: {
'width': (tileWidth + '%'),
'height': (tileHeight + '%'),
'top': ((tileHeight * y) + '%'),
'left': ((tileWidth * x) + '%')
},
data: {
'x': x,
'y': y
}
});
tile.appendTo(tileArray);
if (designer.data('settings').canvas.included[y * 32 + x]) {
tile.removeClass('tile-hidden');
tile.addClass('tile-visible');
}
else {
tile.removeClass('tile-visible');
tile.addClass('tile-hidden');
}
}
$('', {
css: {
'clear': 'both'
}
}).appendTo(tileArray);
}
});
designer.find('#brightness-slider' + UID).slider({
range: 'min',
value: 100,
min: 67,
max: 100,
step: 1,
slide: function(e, ui) {
findCached(designer, '#brightness-value' + UID).empty().append(ui.value);
designer.data('settings').brightness = ui.value;
updateBrightness();
}
});
designer.find('#microtiles-horizontal-slider' + UID).slider({
range: 'min',
value: 4,
min: 1,
max: 32,
step: 1,
slide: function(e, ui) {
designer.data('settings').canvas.width = ui.value;
updateDimensions();
}
});
designer.find('#microtiles-vertical-slider' + UID).slider({
orientation: 'vertical',
range: 'max',
value: 4,
min: 1,
max: 32,
step: 1,
slide: function(e, ui) {
designer.data('settings').canvas.height = 33 - ui.value;
updateDimensions();
}
});
designer.find('#quantity-width' + UID).change(function(e) {
var settings = designer.data('settings');
var width = (new Number($(this).val())).toFixed(0);
if (isNaN(width)) {
width = settings.canvas.width;
$(this).val(settings.canvas.width);
}
else if (width < 1) {
width = 1;
}
else if (width > 32) {
width = 32;
}
settings.canvas.width = width;
updateDimensions();
});
designer.find('#quantity-height' + UID).change(function(e) {
var settings = designer.data('settings');
var height = (new Number($(this).val())).toFixed(0);
if (isNaN(height)) {
height = settings.canvas.height;
}
else if (height < 1) {
height = 1;
}
else if (height > 32) {
height = 32;
}
settings.canvas.height = height;
updateDimensions();
});
designer.find('#physical-width' + UID).change(function(e) {
var settings = designer.data('settings');
var constants = settings.constants;
var dimensions;
if (settings.units == 'metric') {
dimensions = constants.metric;
}
else {
dimensions = constants.imperial;
}
var physical_width = unformatNumber($(this).val());
var width;
if (isNaN(physical_width)) {
width = settings.canvas.width;
}
else {
width = Math.round(physical_width / dimensions.tileWidth);
if (width < 1) {
width = 1;
}
else if (width > 32) {
width = 32;
}
}
settings.canvas.width = width;
updateDimensions();
});
designer.find('#physical-height' + UID).change(function(e) {
var settings = designer.data('settings');
var constants = settings.constants;
var dimensions;
if (settings.units == 'metric') {
dimensions = constants.metric;
}
else {
dimensions = constants.imperial;
}
var physical_height = unformatNumber($(this).val());
var height;
if (isNaN(physical_height)) {
height = settings.canvas.height;
}
else {
height = Math.round(physical_height / dimensions.tileHeight);
if (height < 1) {
height = 1;
}
else if (height > 32) {
height = 32;
}
}
settings.canvas.height = height;
updateDimensions();
});
designer.find('#resolution-width' + UID).change(function(e) {
var settings = designer.data('settings');
var resolution_width = unformatNumber($(this).val());
var width;
if (isNaN(resolution_width)) {
width = settings.canvas.width;
}
else {
width = Math.floor(resolution_width / settings.constants.tileResolutionX)
if (width < 1) {
width = 1;
}
else if (width > 32) {
width = 32;
}
}
settings.canvas.width = width;
updateDimensions();
});
designer.find('#resolution-height' + UID).change(function(e) {
var settings = designer.data('settings');
var resolution_height = unformatNumber($(this).val());
var height;
if (isNaN(resolution_height)) {
height = settings.canvas.height;
}
else {
height = Math.floor(resolution_height / settings.constants.tileResolutionY)
if (height < 1) {
height = 1;
}
else if (height > 32) {
height = 32;
}
}
settings.canvas.height = height;
updateDimensions();
});
designer.find('#dimensions-quantity' + UID + ', #dimensions-physical' + UID + ',#dimensions-resolution' + UID).change(function(e) {
var settings = designer.data('settings');
if (findCached(designer, '#dimensions-quantity' + UID).attr('checked')) {
findCached(designer, '#quantity-width' + UID + ', #quantity-height' + UID).attr('readonly', false);
findCached(designer, '#physical-width' + UID + ', #physical-height' + UID).attr('readonly', true);
findCached(designer, '#resolution-width' + UID + ', #resolution-height' + UID).attr('readonly', true);
}
else if (findCached(designer, '#dimensions-physical' + UID).attr('checked')) {
findCached(designer, '#quantity-width' + UID + ', #quantity-height' + UID).attr('readonly', true);
findCached(designer, '#physical-width' + UID + ', #physical-height' + UID).attr('readonly', false);
findCached(designer, '#resolution-width' + UID + ', #resolution-height' + UID).attr('readonly', true);
}
else if (findCached(designer, '#dimensions-resolution' + UID).attr('checked')) {
findCached(designer, '#quantity-width' + UID + ', #quantity-height' + UID).attr('readonly', true);
findCached(designer, '#physical-width' + UID + ', #physical-height' + UID).attr('readonly', true);
findCached(designer, '#resolution-width' + UID + ', #resolution-height' + UID).attr('readonly', false);
}
});
designer.find('#ecu-count' + UID).change(function(e) {
var settings = designer.data('settings');
var ecus = (new Number($(this).val())).toFixed(0);
if (isNaN(ecus)) {
ecus = settings.ecus;
}
else if (ecus < 1) {
if (settings.canvas.occupied < 1) {
ecus = 0;
}
else {
ecus = 1;
}
}
else if (ecus > settings.canvas.occupied) {
ecus = settings.canvas.occupied;
}
settings.ecuRatio = Math.ceil(settings.canvas.occupied / ecus);
updateDimensions();
});
designer.find('#ecu-ratio' + UID).change(function(e) {
var settings = designer.data('settings');
var ecuRatio = (new Number($(this).val())).toFixed(0);
if (isNaN(ecuRatio)) {
ecuRatio = settings.ecuRatio;
}
else if (ecuRatio < 1) {
ecuRatio = 1;
}
else if (ecuRatio > 1024) {
ecuRatio = 1024;
}
settings.ecuRatio = ecuRatio;
updateDimensions();
});
designer.find('#unit-selector' + UID).buttonset();
designer.find('#unit-metric-radio' + UID + ', #unit-imperial-radio' + UID).change(function(e) {
var settings = designer.data('settings');
if (settings.units == 'metric') {
settings.units = 'imperial';
}
else {
settings.units = 'metric';
}
updateUnits();
});
designer.find('#bom-display-unit' + UID + ', #bom-screen' + UID + ', #bom-ecu' + UID + ', #bom-user-kit' + UID + ', #bom-setup-kit' + UID + ', #bom-foot-ends' + UID + ', #bom-foot-center' + UID + ', #bom-mount-bracket' + UID).change(function(e) {
updateBOM();
});
designer.find('.panel').accordion({
collapsible: true,
clearStyle: true,
autoHeight: false
});
designer.find('#maximum-resolution' + UID).tooltip('
The Maximum Combined Source Resolution is based on the aggregate bandwidth of all ECUs in the canvas, using a 60Hz video refresh rate. The calculation is an estimate only, and does not consider cabling layout.
').appendTo(
$('', {
'class': 'tile-background'
}).appendTo(tileArray)
);
tileArray.click(function(e) {
var tile = $(e.target);
if (tile.attr('id').match(/tile-\d+-\d+-\d+/)) {
toggleTile(tile);
}
});
for (var y = 0; y < h; ++y) {
for (var x = 0; x < w; ++x) {
var tile = $('', {
'class': 'tile tile-visible',
'id': ('tile-' + x + '-' + y + '-' + UID),
css: {
'width': (tileWidth + '%'),
'height': (tileHeight + '%'),
'top': ((tileHeight * y) + '%'),
'left': ((tileWidth * x) + '%')
},
data: {
'x': x,
'y': y
}
});
tile.appendTo(tileArray);
if (designer.data('settings').canvas.included[y * 32 + x]) {
tile.removeClass('tile-hidden');
tile.addClass('tile-visible');
}
else {
tile.removeClass('tile-visible');
tile.addClass('tile-hidden');
}
}
$('', {
css: {
'clear': 'both'
}
}).appendTo(tileArray);
}
});
designer.find('#brightness-slider' + UID).slider({
range: 'min',
value: 100,
min: 67,
max: 100,
step: 1,
slide: function(e, ui) {
findCached(designer, '#brightness-value' + UID).empty().append(ui.value);
designer.data('settings').brightness = ui.value;
updateBrightness();
}
});
designer.find('#microtiles-horizontal-slider' + UID).slider({
range: 'min',
value: 4,
min: 1,
max: 32,
step: 1,
slide: function(e, ui) {
designer.data('settings').canvas.width = ui.value;
updateDimensions();
}
});
designer.find('#microtiles-vertical-slider' + UID).slider({
orientation: 'vertical',
range: 'max',
value: 4,
min: 1,
max: 32,
step: 1,
slide: function(e, ui) {
designer.data('settings').canvas.height = 33 - ui.value;
updateDimensions();
}
});
designer.find('#quantity-width' + UID).change(function(e) {
var settings = designer.data('settings');
var width = (new Number($(this).val())).toFixed(0);
if (isNaN(width)) {
width = settings.canvas.width;
$(this).val(settings.canvas.width);
}
else if (width < 1) {
width = 1;
}
else if (width > 32) {
width = 32;
}
settings.canvas.width = width;
updateDimensions();
});
designer.find('#quantity-height' + UID).change(function(e) {
var settings = designer.data('settings');
var height = (new Number($(this).val())).toFixed(0);
if (isNaN(height)) {
height = settings.canvas.height;
}
else if (height < 1) {
height = 1;
}
else if (height > 32) {
height = 32;
}
settings.canvas.height = height;
updateDimensions();
});
designer.find('#physical-width' + UID).change(function(e) {
var settings = designer.data('settings');
var constants = settings.constants;
var dimensions;
if (settings.units == 'metric') {
dimensions = constants.metric;
}
else {
dimensions = constants.imperial;
}
var physical_width = unformatNumber($(this).val());
var width;
if (isNaN(physical_width)) {
width = settings.canvas.width;
}
else {
width = Math.round(physical_width / dimensions.tileWidth);
if (width < 1) {
width = 1;
}
else if (width > 32) {
width = 32;
}
}
settings.canvas.width = width;
updateDimensions();
});
designer.find('#physical-height' + UID).change(function(e) {
var settings = designer.data('settings');
var constants = settings.constants;
var dimensions;
if (settings.units == 'metric') {
dimensions = constants.metric;
}
else {
dimensions = constants.imperial;
}
var physical_height = unformatNumber($(this).val());
var height;
if (isNaN(physical_height)) {
height = settings.canvas.height;
}
else {
height = Math.round(physical_height / dimensions.tileHeight);
if (height < 1) {
height = 1;
}
else if (height > 32) {
height = 32;
}
}
settings.canvas.height = height;
updateDimensions();
});
designer.find('#resolution-width' + UID).change(function(e) {
var settings = designer.data('settings');
var resolution_width = unformatNumber($(this).val());
var width;
if (isNaN(resolution_width)) {
width = settings.canvas.width;
}
else {
width = Math.floor(resolution_width / settings.constants.tileResolutionX)
if (width < 1) {
width = 1;
}
else if (width > 32) {
width = 32;
}
}
settings.canvas.width = width;
updateDimensions();
});
designer.find('#resolution-height' + UID).change(function(e) {
var settings = designer.data('settings');
var resolution_height = unformatNumber($(this).val());
var height;
if (isNaN(resolution_height)) {
height = settings.canvas.height;
}
else {
height = Math.floor(resolution_height / settings.constants.tileResolutionY)
if (height < 1) {
height = 1;
}
else if (height > 32) {
height = 32;
}
}
settings.canvas.height = height;
updateDimensions();
});
designer.find('#dimensions-quantity' + UID + ', #dimensions-physical' + UID + ',#dimensions-resolution' + UID).change(function(e) {
var settings = designer.data('settings');
if (findCached(designer, '#dimensions-quantity' + UID).attr('checked')) {
findCached(designer, '#quantity-width' + UID + ', #quantity-height' + UID).attr('readonly', false);
findCached(designer, '#physical-width' + UID + ', #physical-height' + UID).attr('readonly', true);
findCached(designer, '#resolution-width' + UID + ', #resolution-height' + UID).attr('readonly', true);
}
else if (findCached(designer, '#dimensions-physical' + UID).attr('checked')) {
findCached(designer, '#quantity-width' + UID + ', #quantity-height' + UID).attr('readonly', true);
findCached(designer, '#physical-width' + UID + ', #physical-height' + UID).attr('readonly', false);
findCached(designer, '#resolution-width' + UID + ', #resolution-height' + UID).attr('readonly', true);
}
else if (findCached(designer, '#dimensions-resolution' + UID).attr('checked')) {
findCached(designer, '#quantity-width' + UID + ', #quantity-height' + UID).attr('readonly', true);
findCached(designer, '#physical-width' + UID + ', #physical-height' + UID).attr('readonly', true);
findCached(designer, '#resolution-width' + UID + ', #resolution-height' + UID).attr('readonly', false);
}
});
designer.find('#ecu-count' + UID).change(function(e) {
var settings = designer.data('settings');
var ecus = (new Number($(this).val())).toFixed(0);
if (isNaN(ecus)) {
ecus = settings.ecus;
}
else if (ecus < 1) {
if (settings.canvas.occupied < 1) {
ecus = 0;
}
else {
ecus = 1;
}
}
else if (ecus > settings.canvas.occupied) {
ecus = settings.canvas.occupied;
}
settings.ecuRatio = Math.ceil(settings.canvas.occupied / ecus);
updateDimensions();
});
designer.find('#ecu-ratio' + UID).change(function(e) {
var settings = designer.data('settings');
var ecuRatio = (new Number($(this).val())).toFixed(0);
if (isNaN(ecuRatio)) {
ecuRatio = settings.ecuRatio;
}
else if (ecuRatio < 1) {
ecuRatio = 1;
}
else if (ecuRatio > 1024) {
ecuRatio = 1024;
}
settings.ecuRatio = ecuRatio;
updateDimensions();
});
designer.find('#unit-selector' + UID).buttonset();
designer.find('#unit-metric-radio' + UID + ', #unit-imperial-radio' + UID).change(function(e) {
var settings = designer.data('settings');
if (settings.units == 'metric') {
settings.units = 'imperial';
}
else {
settings.units = 'metric';
}
updateUnits();
});
designer.find('#bom-display-unit' + UID + ', #bom-screen' + UID + ', #bom-ecu' + UID + ', #bom-user-kit' + UID + ', #bom-setup-kit' + UID + ', #bom-foot-ends' + UID + ', #bom-foot-center' + UID + ', #bom-mount-bracket' + UID).change(function(e) {
updateBOM();
});
designer.find('.panel').accordion({
collapsible: true,
clearStyle: true,
autoHeight: false
});
designer.find('#maximum-resolution' + UID).tooltip('