4.1 Making your brand

Refer to official documentation here: https://github.com/phetsims/brand

To know more about brand, See Introduction to Brand

To put your own organization's name in the logo and About dialog, follow these steps. For the sake of discussion, let's assume that your organization's name is named "Simulations 4 Knowledge"

• copy the adapted-from-phet directory to a new directory `simulations-4-knowledge'. Note that this directory name is lower-cased with hyphens and no spaces.
• Update the entries in simulations-4-knowledge/js/Brand.js with your organization's information. For instance, it may look like this:

  return {

    // Nickname for the brand, which should match the brand subdirectory name, 
    // grunt option for --brand as well as the
    // query parameter for ?brand.  
    // This is used in Joist to provide brand-specific logic, 
    // such as what to show in the 
    // About dialog, decorative text around the PhET button, 
    // and whether to check for updates.
    id: 'simulations-4-knowledge',

    // Optional string for the name of the brand.  If non-null, 
    // the brand name will appear in the top of the About dialog
    // {string} For example: "My Company"
    name: 'Simulations 4 Knowledge',

    // Optional string for the copyright statement.  
    // If non-null, it will appear in the About dialog
    // {string} For example: "Copyright © 2014, My Company"
    copyright: 'Copyright 2015, Simulations 4 Knowledge',

    /**
     * Return any links to appear in the About dialog.  
     * The sim name and locale can be used for customization if desired.
     * For example: { text: "My Company Support",
     * url: "https://www.mycompany.com/support" }
     * @param {string} simName - the name of the simulation, 
     * such as 'bending-light'
     * @param {string} locale - the locale, such as 'en'
     * @returns {Array.<string>} -
     */
    getLinks: function( simName, locale ) {
      return [ {
        text: 'Visit my Awesome Website :)',
        url: 'http://simulations4knowledge.com'
      } ];
    }
  };

• Copy your images over the existing images in brand/simulations-4-knowledge/images
• Test the simulation by launching it in the browser with the query parameter

?brand=simulations-4-knowledge

• Build the simulation with

grunt --brands=simulations-4-knowledge

• Test by launching the built simulation in the browser.

Citation: PhET Interactive Simulations. They can be found here at: https://github.com/phetsims
Available under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0).