Match multiple attributes for custom image

Help
1

Hi guys! Love the forum. Thanks in advance for the help! I could not find an example of how change the icon in the position chart based on multiple attributes. I was able to change the color based on one attribute. By doing the following:

{{#gt data.occupied_count 0}}
{{colorMarker ‘#b4002c’}}
{{else}}
{{colorMarker ‘#269a00’}}
{{/gt}}

I’m looking to have 4 different icons on the map make it easy to depict the space type and occupancy.

I am looking to give a custom image when these attributes are met:

  • If data.type is desk and data.occupied_count is less than 1— use image1.png
  • If data.type is desk and data.occupied_count is greater than 1— use image2.png
  • If data.type is conference_room and data.occupied_count is less than 1— use image3.png
  • If data.type is conference_room and data.occupied_count is greater than 1— use image4.png
2

Hey @Sean_Rynearson,

We’re happy to hear that you are enjoying the forums!

In this case, you will likely want to use Conditional Block Helpers to help you conditionally render images.

To use an image, you just need to put a URL to an image (Note: The template must resolve to a JPG, GIF, PNG or SVG image). Here’s an example from our Indoor Asset Tracker (which also has a great Deeper Dive that covers this template) that shows how to do this sort of thing based on a Device Tag.

{{#if isLastPoint}}
{{#eq deviceTags.type.[0] 'resident'}}
https://files.onlosant.com/622137f12f54bc260568d394/residents/{{deviceTags.uniqueId.[0]}}@2x.png
{{else}}
https://files.onlosant.com/622137f12f54bc260568d394/images/{{deviceTags.type.[0]}}@2x.png
{{/eq}}
{{/if}}

In this example, we’re hosting the imagines in Application Files and referencing them here where /{{deviceTags.uniqueId.[0]}} represents a unique file name that is stored as a Device Tag.

Let me know if this works for you or if you need any further explanation.

Thank you,
Heath

3

Thanks @Heath for the quick response. I am not sure I follow but will see if I can understand.

For 1, this is just a demo so the logic doesn’t have to be perfect.

We have over 200 desks and 20 conference rooms. I am able to show on a map all of them by color based on if they are occupied or not using this:

{{#gt data.occupied_count 0}}
{{colorMarker ‘#b4002c’}}
{{else}}
{{colorMarker ‘#269a00’}}
{{/gt}}

But instead of having all occupied/ unoccupied desks and conference rooms looking the same on the map, I have made 4 different icons to represent the different types and states. They do have device tags already based on the type (desk or conference room).

Each type desk or conference room will have two different icons representing the occupancy state. So 4 Icons in total based on the logic in my first message.

If you still think your solution fits what I am trying to do I will give it a try. But I do not fully understand.

Thank you again!

4

Here is what it currently looks like:
example1

and I would like to replace the icons with these 4.
I know how to upload them and reference them

example3.PNG
example3.PNG1506×859 224 KB

example2.PNG
example2.PNG1389×770 150 KB

I just do not know how to write the logic to choose the correct image based on my verbal logic in the first message.

5

I fixed it by naming my images just right and by using this code:

{{#if isLastPoint}}
https://files.onlosant.com/APPLICATION_ID/{{{data.type}}}{{{data.occupied}}}.png
{{/if}}

image

1 Like
6

Mods, can you obscure my URL in the above message? I do not see how to edit the message. Thank you.

7

I’ve removed your application ID from the URL. But since you asked, I should note that file URLs are publicly accessible. We do not typically think of application IDs as sensitive information.

1 Like