Visualization - Pictographs - Single Icon
(Redirected from Visualization - Pictograph - Single Icon)
Jump to navigation
Jump to search
The Single Icon Pictograph visually portrays a number or proportion with a single icon.
Example
The following example is a single icon pictograph showing the percentage of men in a survey.
Create a Single Icon Pictograph in Displayr
- 1. Go to Insert > Visualization > Pictograph > Single Icon
- 2. Under Inputs > DATA SOURCE > Data Source, select the type of your data source
- 3. Under Inputs > DATA SOURCE > Input data, type in your number or specify the location of the number
Object Inspector Options
See Visualization - Number Options
More Information
Acknowledgements
Icons used in Pictographs were obtained from http://www.iconsdb.com and https://www.iconfinder.com.
Code
// VERSION 2.4.0
var displayr = Q.isOnTheWeb();
function isEmpty(x) { return (x == undefined || x.getValue() == null && (x.getValues() == null || x.getValues().length == 0)) }
function isEmptyString(x) { return (x == undefined || x == null || x == "") }
var allow_control_groups = Q.fileFormatVersion() > 10.9;
var font_list = !!Q.GetAvailableFontNames ? Q.GetAvailableFontNames() : ["Arial", "Arial Black", "Century Gothic", "Comic Sans MS", "Courier New", "Georgia", "Impact", "Open Sans", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana"];
var default_font_color = "#2C2C2C";
var controls = [];
if (allow_control_groups);
form.group("OUTPUT");
var template_prompt = "Create a template to control settings for all visualizations in the document by inserting 'Visualization > Template'";
var qDisplayOpt = form.comboBox({name: "formDisplay", label: "Display", visible: displayr ? false : true, alternatives: ["Number", "Number in an oval", "Number in a rectangle", "Number in a donut", "Number on a gauge", "Number on a bar", "Number on an icon", "Pictograph (single icon)", "Pictograph (repeated icons)"], default_value: "Pictograph (single icon)"});
controls.push(qDisplayOpt);
var displayOpt = qDisplayOpt.getValue();
var show_icons = ["Number on an icon", "Pictograph (single icon)", "Pictograph (repeated icons)"].indexOf(displayOpt) != -1;
var show_shapes = !show_icons && displayOpt != "Number";
var min_vpad = show_icons ? 0 : -1000;
var inputpromptextra = "";
if (displayOpt == "Pictograph (single icon)" || displayOpt == "Number in a donut" || displayOpt == "Number on a bar")
{
controls.push(form.textBox({name: "formDenominator", label: "Maximum value", required: true, default_value: "100", prompt: "Denominator which the input value will be shown as a proportion of"}));
inputpromptextra = " Increase maximum value for values greater than 100%.";
}
if (["Number on a gauge", "Number on a bar", "Pictograph (single icon)"].indexOf(displayOpt) != -1)
{
controls.push(form.textBox({name: "formMinimumValue", label: "Minimum value", required: true, default_value: 0, prompt: "Lower bound of the gauge"}));
}
if (displayOpt == "Number on a gauge")
{
controls.push(form.textBox({name: "formDenominator", label: "Maximum value", required: true, default_value: "100%", prompt: "Upper bound of the gauge"}));
inputpromptextra = " Increase maximum value for values greater than 100%.";
}
if (displayOpt == "Pictograph (repeated icons)")
{
controls.push(form.textBox({label: "Total icons", name:"formTotalIcons", type:"number", required:false, prompt:"Leave blank to determine from Input data"}));
controls.push(form.textBox({label: "Scale", name:"formScale", default_value: "1", prompt: "The value that one icon represents"}));
}
form.setHeading("Visualization - " + displayOpt);
if (allow_control_groups);
form.group("DATA SOURCE");
var qDatOpt = form.comboBox({name: "formDataSource", label: "Data source", alternatives: ["Type or paste value", "Use an existing R output", "Table", "Variable - Average", "Variable - Sum", "Variable - Percentage"], default_value: "Table"});
controls.push(qDatOpt);
var datOpt = qDatOpt.getValue();
var showPercent = false;
if (datOpt == "Type or paste value")
{
controls.push(form.textBox({name: "formInputText", label: "Input data", prompt: "Enter a numeric value, e.g. 45% or 0.45." + inputpromptextra, required: true})) // for shapes, this can be text
} else if (datOpt == "Use an existing R output" || datOpt == "Table")
{
if (datOpt == "Use an existing R output")
{
var inputR = form.dropBox({name: "formInputR", label: "Input data", types: ["RItem:integer,numeric,character"], required: true});
controls.push(inputR);
}
else
{
var inputTable = form.dropBox({name: "formInputTable", label: "Input data", types: ["Table", "RItem:matrix,array,data.frame,table,integer,numeric,character"]});
controls.push(inputTable);
}
if ((datOpt == "Use an existing R output" && inputR.getValue() != null) ||
(datOpt == "Table" && inputTable.getValue() != null))
{
var rowOpts = ["Typing row names or indices", "Choosing from Combo Box or List Box control"]
var columnOpts = ["Typing column names or indices", "Choosing from Combo Box or List Box control"]
var qSelectRowsOpt;
if (displayr)
{
qSelectRowsOpt = form.comboBox({label: "Select rows to show by", name: "formSelectRowsOpt", alternatives: rowOpts, default_value: rowOpts[0]});
controls.push(qSelectRowsOpt);
}
var qSelectRowsCtrl = form.dropBox({label: "Row", name: "formTableRowCtrl", types: ["Control: listbox,combobox"], required: datOpt == "Table"});
var qSelectRowsText = form.textBox({name: "formTableRow", label: "Row", prompt: "Enter name or index of row of the entry you want to display", required: datOpt == "Table", default_value: 1});
if (!!qSelectRowsOpt && qSelectRowsOpt.getValue() != rowOpts[0])
controls.push(qSelectRowsCtrl);
else
controls.push(qSelectRowsText);
var qSelectColumnsOpt;
if (displayr)
{
qSelectColumnsOpt = form.comboBox({label: "Select columns to show by", name: "formSelectColumnsOpt", alternatives: columnOpts, default_value: columnOpts[0]});
controls.push(qSelectColumnsOpt);
}
var qSelectColumnsCtrl = form.dropBox({label: "Column", name: "formTableColumnCtrl", types: ["Control: listbox,combobox"], required: false});
var qSelectColumnsText = form.textBox({name: "formTableColumn", label: "Column", prompt: "Enter name or index of column of the entry you want to display.", required: false, default_value: 1});
if (!!qSelectColumnsOpt && qSelectColumnsOpt.getValue() != columnOpts[0])
controls.push(qSelectColumnsCtrl);
else
controls.push(qSelectColumnsText);
}
} else if (datOpt == "Variable - Percentage")
{
showPercent = true;
var percentVar = form.dropBox({name: "formInputVariable", label: "Input data", types: ["Variable: Numeric, Date/Time, Money, Text, Categorical, OrderedCategorical"]});
controls.push(percentVar);
if (percentVar.getValue() != null)
controls.push(form.textBox({name: "formCategory", label: "Category", required: false, prompt: "Enter name of category you want to display. For categorical variables, names can be separated by commas to show the total percentage; for numeric variables, use a dash to specify a range."}));
} else
controls.push(form.dropBox({name: "formInputVariable", label: "Input data", types: ["Variable: Numeric, Date/Time, Money, Text, Categorical, OrderedCategorical"]}));
if (allow_control_groups)
form.page("Format")
var qTemplate = form.dropBox({name: "formTemplate", label: "Use template", types: ["RItem:AppearanceTemplate"], required: false, prompt: template_prompt});
controls.push(qTemplate);
var use_default_fonts = !isEmpty(qTemplate);
if (show_shapes)
{
if (allow_control_groups)
form.group("Shape");
controls.push(form.numericUpDown({name: "formFillOpacity", label: "Fill opacity", minimum: 0.0, maximum: 1.0, increment: 0.1, default_value: 1.0}));
if (displayOpt != "Number in a donut" && displayOpt != "Number on a bar")
{
var qBorderWd = form.numericUpDown({name: "formBorderWidth", label: "Border width", default_value: 0.0, minimum: 0.0, maximum: 0.5, increment: 0.005, prompt: "Width of border as a proportion of the graphic width"});
controls.push(qBorderWd);
var borderWd = qBorderWd.getValue();
if (borderWd > 0.0)
{
controls.push(form.colorPicker({name: "formBorderColor", label: "Border color", default_value: "#FFFFFF"}));
controls.push(form.numericUpDown({name: "formBorderOpacity", label: "Border opacity", minimum: 0.0, maximum: 1.0, increment: 0.1, default_value: 0.5}));
}
}
}
if (displayOpt == "Number in a donut" || displayOpt == "Number on a gauge")
{
controls.push(form.colorPicker({name: "formBaseColor", label: "Base color", default_value: "#E5E8EE"}));
controls.push(form.numericUpDown({name: "formHoleSize", label: "Hole radius %", default_value: 0.65, minimum: 0.0, maximum: 1.0, increment: 0.05}));
}
var is_custom_icon = false;
if (show_icons)
{
if (allow_control_groups)
form.group("ICONS");
var custom_label = "(Custom icon)";
var icon = form.comboBox({name: "formIcon", label: "Icon", alternatives: [
custom_label, "Apple","Baby", "Beer", "Bread","Cake", "Car", "Chicken", "Circle", "Cross", "Elephant", "Face - Happy", "Face - Neutral", "Face - Sad", "Globe", "Gun", "Heart", "House", "Money", "Soldier", "Square", "Star", "Sick person", "Stick man", "Stick woman", "Thumbs up", "Thumbs down", "Tick", "Trolley", "Truck", "User", "Water drop", "Weight", "Wine"], default_value: "Stick man"});
controls.push(icon);
is_custom_icon = icon.getValue() == custom_label;
if (is_custom_icon)
{
controls.push(form.textBox({name: "formCustomUrl", label: "Icon URL", type: "text", required: true}));
controls.push(form.textBox({name: "formCustomBaseUrl", label: "Base icon URL", type: "text", required: false, prompt: "Leave blank to hide unfilled icons"}));
}
if (displayOpt == "Pictograph (repeated icons)")
{
var layoutOpt = form.comboBox({label: "Layout constrained by", name: "formLayout", alternatives: ["Number of rows", "Number of columns", "Width-to-height ratio"], default_value: "Width-to-height ratio"});
controls.push(layoutOpt);
if (layoutOpt.getValue() == "Number of rows")
controls.push(form.numericUpDown({label: "Number of rows", name:"formIconRows", minimum: 1, default_value: 1}));
if (layoutOpt.getValue() == "Number of columns")
controls.push(form.numericUpDown({label: "Number of columns", name:"formIconCols", minimum: 1, default_value: 1}));
if (layoutOpt.getValue() == "Width-to-height ratio")
controls.push(form.textBox({label: "Width-to-height ratio", name:"formWHRatio", type:"number", required:false, prompt:"Leave blank to use RObject dimensions"}));
controls.push(form.numericUpDown({label: "Row padding", name:"formPadRow", minimum: 0, maximum: 0.99, default_value: 0, increment:0.01, prompt: "Specify padding between rows as a proportion (0 to 0.99) of the total height"}));
controls.push(form.numericUpDown({label: "Column padding", name:"formPadCol", minimum: 0, maximum: 0.99, default_value: 0, increment:0.01, prompt: "Specify padding between columns as a proportion (0 to 0.99) of the total width"}));
}
controls.push(form.comboBox({label: "Direction of fill", name: "formFillDirection", alternatives: ["From left", "From right", "From bottom", "From top", "Radial"], default_value: "From left"}));
var sizeOpt = form.checkBox({label: "Autosize", name: "formAutosize", default_value:1});
controls.push(sizeOpt);
if (!sizeOpt.getValue())
controls.push(form.numericUpDown({label: "Icon width", name:"formIconWidth", minimum: 1, default_value: 50, increment:10, maximum:10000}));
if (!is_custom_icon)
{
var baseOpt = form.checkBox({label: "Hide base image", name:"formHideBase", default_value: displayOpt == "Pictograph (repeated icons)"});
controls.push(baseOpt);
if (!baseOpt.getValue())
controls.push(form.colorPicker({label: "Icon base color", name: "formBaseColor", default_value:"#E5E8EE"}));
}
}
if (!is_custom_icon)
{
if (allow_control_groups)
{
if (displayOpt == "Number")
form.group({label:"NUMBER FILL COLOR", expanded:true});
else
form.group("FILL COLOR");
}
controls.push(form.colorPicker({name: "formColor0", label: "Default fill color", default_value: "#3E7DCC", prompt: "Color used if input value is smaller than any of the thresholds below"}));
var ci = 1;
var thres = "";
while (ci == 1 || thres != "")
{
var qThres = form.textBox({name: "formThres" + ci, label: "Threshold " + ci, required: false, prompt: "Value" + (thres == "" ? "" : " (greater than or equal to " + thres + ")") + " above which fill color " + ci + " is used."});
controls.push(qThres);
var thres = qThres.getValue();
if (thres != "")
controls.push(form.colorPicker({name: "formColor" + ci, label: "Fill color " + ci, default_value: "#3E7DCC", prompt: "Color used if input value is greater than or equal to " + thres}));
ci = ci + 1;
}
}
var qGlobalFontFamily = "Arial";
var qGlobalFontColor = "#808080";
var qGlobalFontUnits = "pt";
if (allow_control_groups)
form.group("FONT");
var qUseDefaultFonts = form.checkBox({name: "formGlobalFontDefault", label: "Use default or template font settings", default_value: use_default_fonts, prompt: template_prompt});
controls.push(qUseDefaultFonts);
var use_default_fonts = qUseDefaultFonts.getValue();
if (!use_default_fonts)
{
var globalFontFamily = form.comboBox({name: "formGlobalFontFamily", label: "Global font family", alternatives: font_list, default_value: "Arial", editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."});
controls.push(globalFontFamily);
var qGlobalFontFamily = globalFontFamily.getValue();
var globalFontColor = form.colorPicker({name: "formGlobalFontColor", label: "Global font color", default_value: "#808080"});
controls.push(globalFontColor);
var qGlobalFontColor = globalFontColor.getValue();
controls.push(form.comboBox({name: "formFontUnits", label: "Font units", alternatives: ["pt", "px"], default_value: "pt", prompt: "Are font sizes specified in terms of points or pixels?"}));
}
if (allow_control_groups)
form.group("DATA LABEL");
var datalabOpt = "Overlayed on icon";
var dataVAlign = "Middle";
if (show_icons)
{
var qDatalabOpt = form.comboBox({name:"dLabPos", label: "Show data label", alternatives: ["None", "Overlayed on icon", "Above icons", "Below icons"], default_value: "Below icons"});
controls.push(qDatalabOpt);
datalabOpt = qDatalabOpt.getValue();
}
if (datalabOpt != "None")
{
controls.push(form.textBox({name:"dLabPrefix", label:"Prefix", type:"text", required:false}));
controls.push(form.textBox({name:"dLabSuffix", label:" Suffix", type:"text", required:false}));
controls.push(form.checkBox({name: "dPercentSuffix", label: "Automatically append % sign to percentages", default_value: true, prompt: "A percentage sign is automatically appended if the input data appears to be a percentage. If the value does not contain data indicating its number type, then manully enter a % sign in the suffix textbox above."}));
controls.push(form.numericUpDown({name:"dLabDigits", label: "Decimals shown", minimum: 0, maximum: 6}));
controls.push(form.comboBox({name:"dLabHAlign", label:"Horizontal alignment", alternatives: ["Left", "Center", "Right"], default_value: displayOpt == "Number on a bar" ? "Left" : "Center"}));
if (datalabOpt == "Overlayed on icon" && !show_icons)
{
var qDataVAlign = form.comboBox({name:"dLabVAlign", label:"Vertical alignment", alternatives: ["Top", "Middle", "Bottom"], default_value: displayOpt == "Number on a gauge" ? "Bottom" : "Middle"});
controls.push(qDataVAlign);
var dataVAlign = qDataVAlign.getValue();
}
if (!(show_icons && datalabOpt == "Overlayed on icon"))
{
controls.push(form.numericUpDown({name:"dLabPad", label: "Vertical padding", maximum: 1000, minimum: min_vpad, default_value: 0.0, prompt: "Increase to move data label away from center"}));
controls.push(form.numericUpDown({name:"dLabXPad", label: "Horizontal padding", maximum: 1000, minimum: -1000, default_value: 0.0, prompt: "Move data labels left (negative) or right (positive)"}));
}
var labFontDefault = form.checkBox({name: "dLabFontDefault", label: "Use default or template font settings", default_value: use_default_fonts, prompt: template_prompt});
controls.push(labFontDefault);
var dLabFontDefault = labFontDefault.getValue();
if (!dLabFontDefault)
{
controls.push(form.comboBox({name: "dLabFont", label: "Font family", alternatives: font_list, default_value: qGlobalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."}));
if (displayOpt != "Number")
controls.push(form.colorPicker({name: "dLabColor", label: "Color", default_value: qGlobalFontColor}));
controls.push(form.numericUpDown({name:"dLabSize", label: "Font size", minimum: 5, maximum: 100, default_value: 24}));
controls.push(form.comboBox({name: "dLabWeight", label: "Font weight", alternatives: ["Normal", "Bold"], default_value: "Normal"}));
}
}
if (displayOpt == "Number on a gauge")
{
if (allow_control_groups)
form.group("GAUGE LABELS")
var qTickOpt = form.checkBox({name: "formTickShow", label: "Show minimum and maximum values", default_value: true, prompt: "Show minimum and maximum values on the gauge"});
controls.push(qTickOpt);
var tickOpt = qTickOpt.getValue();
if (tickOpt)
{
controls.push(form.checkBox({name: "formTickInside", label: "Labels inside gauge", default_value: false}));
controls.push(form.textBox({name:"formTickPrefix", label:"Prefix", type:"text", required:false}));
controls.push(form.textBox({name:"formTickSuffix", label:" Suffix", type:"text", required:false}));
//controls.push(form.comboBox({name:"formTickNumType", label:" Number type", alternatives: ["Automatic", "Number", "Percentage", "Percentage (no sign)", "Scientific"], default_value: numTypeOpt}));
controls.push(form.numericUpDown({name:"formTickDigits", label: "Decimals shown", minimum: 0, maximum: 6, default_value: 0}));
var qTickFontDefault = form.checkBox({name: "formTickFontDefault", label: "Use default or template font settings", default_value: use_default_fonts, prompt: template_prompt});
controls.push(qTickFontDefault);
var tickFontDefault = qTickFontDefault.getValue();
if (!tickFontDefault)
{
controls.push(form.numericUpDown({name:"formTickFontSize", label: "Font size", minimum: 5, maximum: 100, default_value: 9}));
controls.push(form.comboBox({name: "formTickFontFamily", label: "Font family", alternatives: font_list, default_value: qGlobalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."}));
controls.push(form.colorPicker({name: "formTickFontColor", label: "Color", default_value: "#B3B3B3"}));
}
}
}
if (allow_control_groups)
form.group("TEXT ABOVE")
if (datalabOpt != "Above icons")
{
var qTextAbove = form.textBox({name:"formTextAbove", label: "Text above", required: false});
controls.push(qTextAbove);
var textAbove = qTextAbove.getValue();
if (!isEmptyString(textAbove))
{
if (show_shapes && dataVAlign != "Top")
controls.push(form.checkBox({name: "formTextAboveInside", label: "Text inside shape", default_value: false}));
controls.push(form.comboBox({name:"formTextAboveHAlign", label:"Horizontal alignment", alternatives: ["Left", "Center", "Right"], default_value: "Center"}));
controls.push(form.numericUpDown({name:"formTextAbovePad", label: "Vertical padding", maximum: 1000, minimum: min_vpad, default_value: 0.0, prompt: "Increase to move text away from center"}));
controls.push(form.numericUpDown({name:"formTextAboveXPad", label: "Horizontal padding", maximum: 1000, minimum: -1000, default_value: 0.0, prompt: "Move text left (negative) or right (positive)"}));
var qTextAboveFontDefault = form.checkBox({name: "formTextAboveFontDefault", label: "Use default or template font settings", default_value: use_default_fonts, prompt: template_prompt});
controls.push(qTextAboveFontDefault);
var textAboveFontDefault = qTextAboveFontDefault.getValue();
if (!textAboveFontDefault)
{
controls.push(form.numericUpDown({name:"formTextAboveSize", label: "Font size", minimum: 5, maximum: 100, default_value: 10}));
controls.push(form.comboBox({name: "formTextAboveWeight", label: "Font weight", alternatives: ["Normal", "Bold"], default_value: "Normal"}));
controls.push(form.comboBox({name: "formTextAboveFont", label: "Font family", alternatives: font_list, default_value: qGlobalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."}));
controls.push(form.colorPicker({name: "formTextAboveColor", label: "Color", default_value: qGlobalFontColor}));
}
}
}
if (allow_control_groups)
form.group("TEXT BELOW")
if (datalabOpt != "Below icons")
{
var qTextBelow = form.textBox({name:"formTextBelow", label: "Text below", required: false});
controls.push(qTextBelow);
var textBelow = qTextBelow.getValue();
if (!isEmptyString(textBelow))
{
if (show_shapes && dataVAlign != "Bottom")
controls.push(form.checkBox({name: "formTextBelowInside", label: "Text inside shape", default_value: false}));
controls.push(form.comboBox({name:"formTextBelowHAlign", label:"Horizontal alignment", alternatives: ["Left", "Center", "Right"], default_value: "Center"}));
controls.push(form.numericUpDown({name:"formTextBelowPad", label: "Vertical padding", maximum: 1000, minimum: min_vpad, default_value: 0.0, prompt: "Increase to move text away from center"}));
controls.push(form.numericUpDown({name:"formTextBelowXPad", label: "Horizontal padding", maximum: 1000, minimum: -1000, default_value: 0.0, prompt: "Move text left (negative) or right (positive)"}));
var qTextBelowFontDefault = form.checkBox({name: "formTextBelowFontDefault", label: "Use default or template font settings", default_value: use_default_fonts, prompt: template_prompt});
controls.push(qTextBelowFontDefault);
var textBelowFontDefault = qTextBelowFontDefault.getValue();
if (!textBelowFontDefault)
{
controls.push(form.numericUpDown({name:"formTextBelowSize", label: "Font size", minimum: 5, maximum: 100, default_value: 10}));
controls.push(form.comboBox({name: "formTextBelowWeight", label: "Font weight", alternatives: ["Normal", "Bold"], default_value: "Normal"}));
controls.push(form.comboBox({name: "formTextBelowFont", label: "Font family", alternatives: font_list, default_value: qGlobalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."}));
controls.push(form.colorPicker({name: "formTextBelowColor", label: "Color", default_value: qGlobalFontColor}));
}
}
}
if (!show_icons)
{
if (allow_control_groups)
form.group("HOVERTEXT")
var qHoverText = form.textBox({name: "formHoverText", label: "Hover text", required: false, prompt: "Optional text to show on hover"});
controls.push(qHoverText);
var hoverText = qHoverText.getValue();
if (!isEmptyString(hoverText))
{
var qHoverFontDefault = form.checkBox({name: "formHoverFontDefault", label: "Use default or template font settings", default_value: use_default_fonts, prompt: template_prompt});
controls.push(qHoverFontDefault);
var hoverFontDefault = qHoverFontDefault.getValue();
if (!hoverFontDefault)
{
controls.push(form.colorPicker({name: "formHoverBgColor", label: "Hover background color", default_value: "#808080"}));
controls.push(form.numericUpDown({name:"formHoverFontSize", label: "Font size", minimum: 5, maximum: 100, default_value: 11}));
controls.push(form.comboBox({name: "formHoverFontFamily", label: "Font family", alternatives: font_list, default_value: qGlobalFontFamily, editable: true, prompt: "Select the font to use. You can also type the name of a font directly (including custom fonts)."}));
controls.push(form.colorPicker({name: "formHoverFontColor", label: "Color", default_value: "#FFFFFF"}));
}
}
}
if (allow_control_groups)
form.group("BACKGROUND")
var qBgOpt = form.checkBox({name: "formTransparent", label: "Transparent background", default_value: true});
controls.push(qBgOpt);
var bgOpt = qBgOpt.getValue();
if (!bgOpt)
{
controls.push(form.colorPicker({name: "formBgColor", label: "Background color", default_value: "#FFFFFF"}));
if (!show_icons)
controls.push(form.numericUpDown({name: "formBgOpacity", label: "Background opacity", minimum: 0.0, maximum: 1.0, increment: 0.1, default_value: 1.0}));
}
controls.push(form.numericUpDown({name: "formMarginRight", label: "Right margin", maximum: 1000, default_value: 0}));
controls.push(form.numericUpDown({name: "formMarginLeft", label: "Left margin", maximum: 1000, default_value: 0}));
controls.push(form.numericUpDown({name: "formMarginTop", label: "Top margin", maximum: 1000, default_value: 0}));
controls.push(form.numericUpDown({name: "formMarginBottom", label: "Bottom margin", maximum: 1000, default_value: 0}));
form.setInputControls(controls);
{
"formDisplay": "Pictograph (single icon)"
}