Floorplan Legend Tips

Owned by Ricky Villa
Last updated: Oct 29, 2020 by Kimberly Cruz (Unlicensed)
4 min read

Below are some tips on how to change the configurations on the floorplan legend after the graphic has been created.

Gradient or Squared Legend

If the user wanted to change the legend to be based on gradient instead of squared or vice versa, they would either add or remove a simple tag called "square".

Gradient - remove the "square" marker tag on the legend component.

Squared - add the "square" marker tag to the legend component.

Min and Max Values

If the user wants to change the min and/or max values, they can do so through the advanced properties view.

The user would select the legend component and switch to the advanced properties view to find the "minVal" and "maxVal" properties. They would modify those to what they want.

Comparison Logic

If the user wants to use or not use the comparison logic, they would do the below.

Switching to comparison logic

If the user chose to only use room temp with no comparison point, but wanted to now change that to use the comparison logic, they would do the below.

  1. Bring in the corresponding temp setpoint point for each temp sensor point. We recommend to bring them in via the Equipment panel view and rename them accordingly one by one as you bring them in.

  2. Once all setpoints have been added, the user would right click on any virtualPoint in the Virtual Points panel and select "Apply Batch Tags" tool option.

  3. In the popup, the user would select all the setpoints only and hit apply.

  4. Then the tag to add to them is "comparePoint" marker tag.

  5. The user would they apply that.

  6. Last step is to then change the min and max values on the legend component. Look at the previous section above on how to do that, but it would be something like -5 for minVal and 5 for maxVal.

  7. Thats it, now all points should be comparing between the temp sensor and temp setpoint.

Removing the comparison logic

If the user chose to use the comparison logic, but now would only like to use the room temp sensor logic, they would do the below.

  1. The user can either remove all the setpoints or remove the "comparePoint" marker tag on each setpoint.

    1. To remove the "comparePoint" marker tag on the setpoints, the user can right click on any virtualPoint in the Virtual Points panel and select "Apply Batch Tags" tool option

    2. Then in the pop up select all the setpoints only and hit apply

    3. Then add the tag to remove, which in the case would be "comparePoint" tag. Remove it using the minus sign in front of it like below.

    4. The user would apply that

  2. Then last step is to then change the min and max values on the legend component. Look at the previous section above on how to do that, but it would be something like 65 for minVal and 85 for maxVal.

  3. Thats it, now its all based on room temp only logic not comparing against the setpoint.

Changing Legend Colors

If the user wants to change the colors of the legend from the standard blue and red, they can do so with the below steps.

  1. Copy this line of RGBA color codes and paste them on a notepad: rgba(8, 41, 229, 0.5), rgba(57, 83, 229, 0.5), rgba(255, 255, 255, 0.5), rgba(229, 90, 89, 0.5), rgba(229, 5, 0, 0.5)
    Note: The rgba colors are in this order: blue, light blue, white, light red, red.

  2. Next, go to some site that has a color picker that you can use to get the colors you want. What you need is the RGB color code. Example site is from w3schools.

  3. You'll want to pick two colors with a lighter and darker version of each and copy their rgb code. Or you can choose however you want to set it up.

  4. Once you have those four RGB color codes, you'll want to replace the values within each rgba respectively. Leave the "0.5" in each rgba there as the fourth value as its for the opacity. We're not changing the middle rgba color, but you can if you want to.

  5. For example we found our green colors to replace the blue: rgb(51, 204, 51) (darker) and rgb(102, 255, 102) (lighter).

  6. Then we found our orange colors to replace the red: rgb(255, 153, 51) (darker) and rgb(255, 153, 102) (lighter).

  7. The new RGBA color codes will look like this now: rgba(51, 204, 51, 0.5), rgba(102, 255, 102, 0.5), rgba(255, 255, 255, 0.5), rgba(255, 153, 102, 0.5), rgba(255, 153, 51, 0.5)

  8. Copy your new RGBA color codes.

  9. Select the floorplan legend component.

  10. In the properties of that component add a string tag called "colors" and the value being your RGBA color codes.

  11. Now view it in preview.