How do I add a custom palette to OrgVue (detailed version)

This document is split into three parts, showing the operational aspect of adding and applying pallets, then providing a greater level of detail to understand the scripts which are the root of what is being added as palettes.

 

As a worked example, and to promote understanding the effect of a pallet change the sequence here reverses the reality of the ordering of what would be implemented i.e. the sequence should be:

 

  • Build the new palette in a script
  • Add the palette to OrgVue
  • Apply the palette

 

Applying a Palette

 

Within an appropriate view from inside a dataset, select (click) the sidebar icon to expand it, then select (click) the pencil icon against the Color area to edit:

 

 

From the dialogue displayed:

 

Change the radio button at the top to select Dimension, and from the top most dropdown list chose the names dimension to which you wish to apply the palette

 

 

Then from the second dropdown list in the same dialogue, choose the palette named from the list and select Apply:

 

Then the palette will be applied to the selected dimension.

 

 

Adding a Palette

 

Having already scripted your palettes (see next section), to paste in the script you will need to open the dataset where you wants to register (add) the palette, hold

 

and click on the OrgVue logo in the top-left corner of the window.

 

 

This will cause the Admin panel to be displayed:

Click on the + in the Scripts area at the end of the panel:

To reveal the New Script sub-dialogue

 

Go to the Palettes script in the text editor or similar where you created it, select CNTRL + C to copy it, and within OrgVue select CNTRL + V to copy it


 

There should be a new entry i.e "Script 1" in the Scripts area to validate your new Palettes have been added successfully

Do not press Clear as that will remove your entries

Now close the dialogue using X and in turn close the Admin dialogue using X

Select Refresh from the top menu bar to enable the new colours:

Assuming I added a new palate called Acme, this will now be available in the Color dialogue referred to in the previous section:

 

 

 

 

Building a Palette script

 

The default system-wide palette script appears in the section at the end. As a matter of Best Practice it is recommended that when adding a palette, you should retain the entire script and add a new section of the form:

api.register({
   type: "palette",
   name: "Palette Name",
   items: [
      
   ]
});

In the items property goes an array (a comma separated list within square brackets) of your chosen colours. Colours are specified in the hexadecimal format, either the string form ("#d62728") or the literal equivalent 0xD62728.

In the preceding example, the Acme palette was generated by adding the following section:

api.register({
    type: "palette",
    name: "Acme",
    items: [
        ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5", "#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],
        ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"]
    ]
});

For each colour array in the items array a palette will be generated, named “Palette Name {length of colour array}”.

Using the above example, two new palettes Acme 10 and Acme 20 were created.

An alternate form would be to add two sections with single arrays:

api.register({
    type: "palette",
    name: "Acme Primary",
    items: [
        ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5",#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"]
       
    ]
});

api.register({
    type: "palette",
    name: "Acme Secondary",
    items: [
        ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"]
    ]
});

Which in turn makes available:

 

 (To convert colour codes from RGB into HEX you can use a website translator e.g. http://www.colorschemer.com/colorpix_info.php)

 

Default System Palettes at time of writing

 

/** {"name":"Palettes"} */
api.register({
    type: "palette",
    name: "Bright",
    items: [
        [0x2983B8, 0xA9C5E6, 0xEC7E21, 0xEFA672, 0x07AD49, 0xA8D596, 0xCD4A46, 0xF1A3A2, 0x945FA8, 0xC3A4CE, 0x93574D, 0xC09E99,0xDC83B4, 0xF6BCD3, 0x868487, 0xC2C2BA, 0xC1C241, 0xDCDF99, 0x45C0C9, 0xA8DBE3],
        [0x2983B8, 0xEC7E21, 0x07AD49, 0xCD4A46, 0x945FA8, 0x93574D, 0xDC83B4, 0x868487, 0xC1C241, 0x45C0C9]
    ],
    defaultItem: "Bright 20",
    defaultColor: 0xFF7F3F
});

api.register({
    type: "palette",
    name: "Category",
    items: [
        ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5", "#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],
        ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"]
    ]
});

api.register({
    type: "palette",
    name: "Category",
    items: [
        ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5", "#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],
        ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"],
        ["#393b79","#5254a3","#6b6ecf","#9c9ede","#637939","#8ca252","#b5cf6b","#cedb9c","#8c6d31","#bd9e39", "#e7ba52","#e7cb94","#843c39","#ad494a","#d6616b","#e7969c","#7b4173","#a55194","#ce6dbd","#de9ed6"],
        ["#3182bd","#6baed6","#9ecae1","#c6dbef","#e6550d","#fd8d3c","#fdae6b","#fdd0a2","#31a354","#74c476", "#a1d99b","#c7e9c0","#756bb1","#9e9ac8","#bcbddc","#dadaeb","#636363","#969696","#bdbdbd","#d9d9d9"]
    ]
});

api.register({
    type: "palette",
    name: "Concentra",
    items: [
        [0x274B8D, 0x6587AB, 0xF8E164, 0xEFE89C, 0x548985, 0x76C8C9, 0xF9A111, 0xF7D292, 0x894C88, 0xCB8FC1, 0x877864, 0xC5B9A5, 0xC62D7D, 0xF58FBD, 0x5A6B6B, 0x9DB9BB, 0xAFCF4D, 0xC5D58E, 0x4D7BC0, 0x89AFDC],
        [0x274B8D, 0xF8E164, 0x548985, 0xF9A111, 0x894C88, 0x877864, 0xC62D7D, 0x5A6B6B, 0xAFCF4D, 0x4D7BC0]
    ]
});

api.register({
    type: "palette",
    name: "Natural",
    items: [
        [0x4A628E, 0x7494CE, 0xD5B34F, 0xFBD978, 0x00B19D, 0x70C8C8, 0x804022, 0xD76A4D, 0x6A456E, 0x9B839E, 0x844E04, 0xCB9052, 0xDE8785, 0xE6BCAC, 0xA19F90, 0xCBC8BC, 0xCBC8BC, 0x6BA150, 0x499DBD, 0x88D1F4],
        [0x4A628E, 0xD5B34F, 0x00B19D, 0x804022, 0x6A456E, 0x844E04, 0xDE8785, 0xA19F90, 0xCBC8BC, 0x499DBD]
    ]
});

api.register({
    type: "palette",
    name: "OrgVue",
    items: [
        ["#F4972E","#FDAC42","#FEC16D","#FED59D","#FEEBCE","#4F81BE","#749BC9","#96B4D6","#BACDE4","#DCE6F1", "#627070","#818D8D","#A1A9A9","#C0C6C6","#E0E2E2","#82C4CD","#9DD0D6","#B5DCE0","#CEE7EB","#E6F3F5", "#94B762","#AAC484","#BFD3A3","#D4E1C1","#EAF1E1","#88508B","#9F74A1","#B797B8","#CFBAD0","#E7DCE8"],
        ["#F4972E","#FEC16D","#FEEBCE","#4F81BE","#96B4D6","#DCE6F1","#627070","#A1A9A9","#E0E2E2","#82C4CD", "#B5DCE0","#E6F3F5","#94B762","#BFD3A3","#EAF1E1","#88508B","#B797B8","#E7DCE8"],
        [0xf4972e, 0xfdc894, 0x4f81be, 0x9fb4dd, 0x627070, 0xa5a9aa, 0x82c4cd, 0xbfe0e5, 0x94b762, 0xc5d8aa, 0x88508b, 0xb99bbb],
        [0xf4972e, 0x4f81be, 0x627070, 0x82c4cd, 0x94b762, 0x88508b]
    ]
});
Have more questions? Submit a request

Comments