# Setting Up For HTML/JS/CSS Instruments<no value>
In this short tutorial we'll quickly go over the basics required from you to create a new glass-cockpit package that can be used in a game. We'll be showing how to do this in two distinct ways:

-   By replacing an already existing glass-cockpit used by default in some aircraft
-   By creating a custom glass-cockpit gauge for your own aircraft package

 

Both will require many of the same steps and procedures and we'll outline them all in the guide below, which covers:

-   Creating a glass-cockpit package.
-   Creating the required HTML, JS and CSS files.
-   Setting up the architecture for your own aircraft
-   Setting up the architecture for replacing an existing glass-cockpit
-   Revising some important JavaScript from the SDK (BaseInstrument and other useful functions)
-   Using the Coherent Debugger for debugging

 

Before continuing it is worth understanding the basics behind what we will be doing: essentially, glasscockpits are rendered by an HTML file which is the entry-point for the simulation. This HTML file itself is referenced inside the `panel.cfg` of the target aircraft so Microsoft Flight Simulator 2024 knows where to look for it. The contents of the HTML will depend on the glass-cockpit being created, but it will reference some JavaScript - which is required to control the behaviour and functionality of the display - and it will reference some CSS - which is used to style the display.

 

The JavaScript, HTML, and CSS, are usually supplied as files that are part of an independent glass-cockpit package, and within the aircraft package that is going to use the instrument, you would reference it in the `panel.cfg`. You may also include an optional `panel.xml` file which is used to trigger certain things automatically (like vocal alerts, text warnings, etc...), as well as customise certain features of the instrument - on an aircraft-by-aircraft basis - permitting you to modify a single gauge shared by multiple different aicraft.

 

However, before we get to any of the above, we need to quickly setup and create a project. The process outlined below will be used for both the examples we are going to create.

 

 

### Project Setup

The first thing you'll need to do is create a new project which we'll use to contain the glass-cockpit package. This is done by going to the [\[DevMode\]](../../../2_DevMode/Developer_Mode.htm) menu and selecting **New Project**. This will open the project wizard where you should give the basic details:

{{< image-center
    src="images/6_Programming/JS/html_tutorial/tutorial_1_newproject.png"
    alt="Creating A New Project" >}}

 

After clicking `Create New Project`, you will be asked what kind of publishing item you want to create first, and in this case you should select **Package**:

{{< image-center
    src="images/6_Programming/JS/html_tutorial/tutorial_2_package.png"
    alt="Selecting The Publishing Item For The Project" >}}

 

Now you will need to select what *kind* of package you wish to create. For our purposes, it should be **Custom** and when you give the package details, you should ensure that the **Content-Type** is set to **INSTRUMENTS**:

{{< image-center
    src="images/6_Programming/JS/html_tutorial/tutorial_3_packagetype.png"
    alt="Setting The Package Type To Instruments" >}}

 

Once you have completed these details, you need to click the {{< button "Next" />}} button. This will take you to the final window of the setup wizard where you need to define the first **Asset Group** to be used in the package. The name of this package will depend on what you want to do with it:

-   if you want to create a **new** instrument, then you should name the asset group after the instrument that you will be creating. For example, for the tutorial [Creating An HTML/JS/CSS Instrument](creating-js-instrument/) you should call it "***HelloWorldDisplay***".
-   if you want to **replace** an existing instrument then the asset group should be named after the instrument it is replacing. For example, for the tutorial [Replacing An HTML/JS/CSS Instrument](replacing-js-instrument/) you should call it "***BackupSpeedDisplay***"

 

Once you have given the name of the asset group you need to set the **Type** to **Copy**:

{{< image-center
    src="images/6_Programming/JS/html_tutorial/tutorial_4_assettype.png"
    alt="The Asset Group Type For the Gauge" >}}

 

When you click {{< button "Create" />}}, the project will be created and if you navigate to the location you saved the project to, you should see something like this:

{{< image-center
    src="images/6_Programming/JS/html_tutorial/tutorial_5_basefolders.png"
    alt="The Folder Structure For The Test Gauge" >}}

 

There are really only two folders we're interested here:

-   **PackageSources**: This folder will contain the source information for the package, and will be where you add your code for the gauges you create.
-   **Packages**: This folder will contain your package after it is build.

 

You can now open this folder in your programming IDE of choice. We recommend Visual Studio:

{{< image-center
    src="images/6_Programming/JS/html_tutorial/tutorial_6_visualstudio.png"
    alt="The Test Gauge Project In Visual Studio" >}}

 

With the project created and ready to edit, you can now continue on to the appropriate tutorial that you wish to do:

-   [Replacing An HTML/JS/CSS Instrument](replacing-js-instrument/)
-   [Creating An HTML/JS/CSS Instrument](creating-js-instrument/)