Default image change for each device in the device list

Help
1

Hi Everyone,

I converted an Asset Tracker application template a bit into my own form. With this I want to test the tools and if it works well we will make a more detailed own application.

It has been pretty much redesigned for testing, but there would be two more details that I would like to solve, if not too complicated.

first I want to change the default image in the device list to a custom image for each device and add it from the file list.
Currently, all devices place the default image in the device list
device-list-image-container-be. I want to solve this where an image is assigned to the device instead of the default image.
Gmail, Hologram

Can anyone help me solve this? Where and how can I add an image to devices in the device list?

Thanks in advance.

2

I would store the path to the image on a device tag, and reference that tag when rendering out the src attribute on the image.

If you create a new application from the Industrial Equipment Monitor template](https://app.losant.com/applications/new?templateId=5e7cfa8b398d1205d5fcc42d), that exact implementation is in place there.

3

Thanks for the quick response.

could this be a little more detailed?

The current template should be redesigned, I just don’t know where to touch it.
Gmail, Hologram_2
I’m a beginner in Losant.

The proposed template could not be added to the application; it does not currently have the appropriate resources. I don’t want to go deep because it’s just a temporary test app.

There should be a simple solution that can be applied in the current template.

Thk.
Joe

4

Yes, it’s a very simple change.

  1. Add a tag to your devices - let’s call it “imagePath” - and set its value to the location of that device’s image in your application files. For example, to use the image that’s included in the template, you would set the value of that tag to “/asset-tracker.jpg”.
  2. In this file you found, on line 28 (what you highlighted), change the src attribute to “{{file this.tags.imagePath}}”.
  3. Save the file.

You’re just referencing a value on the device - the tag you added in the previous step - the same way you reference any other value on the device object, using that variable instead of the static value in the {{file}} helper.

5

Hi,

upp, somehow it doesn’t insert the picture, I think I missed something.
Do you agree? :slight_smile:
Gmail, Hologram

Gmail, Hologram_2

Gmail, Hologram_3

6

The code looks right; did you add an “imagePath” tag? Did you set its value the way I mentioned in my last reply? Did you upload a file of that name at the path you specified in the tag value?

Viewing the source of the outputted HTML, what is actually being rendered for each list item’s <img src> attribute?

7

Hi

yes i created the device tag and put the image file in the Files.

Gmail, Hologram
Gmail, Hologram1110Ă—488 56.2 KB

Gmail, Hologram_2

Where can I see this?

8

Depends on your browser - How to Read Website Source Code

9

Your “imagePath” value isn’t following the format from my example; you have in there “file/default_red.png”. It should begin with a slash (/) and, assuming that file is located in the root directory (which I can’t tell from your screenshot), it should be “/default_red.png”.

10

the HTML source doesn’t seem to open the image, I think I may have corrupted the file path.
Gmail, Hologram

Gmail, Hologram_5
Gmail, Hologram_5592Ă—521 9.34 KB

11

all you need here is: /default_red.png
and it works.

Thk! :slight_smile:

1 Like
12

i would have another image file question.

I would like to display this image in the pop-up text box by clicking on the map.

Gmail, Hologram_2
Gmail, Hologram_2963Ă—450 124 KB

can you help me with that too?

13

The popup supports Markdown; using the available variables and the Markdown syntax for rendering an image, you should be able to get the image to render inside of there along with the other variable values.

14

do I refer to the device label again?
Can I configure it in the control panel pop-up template?

Gmail, Hologram_4
Gmail, Hologram_4830Ă—478 61.5 KB

could you write an example code for this too?

15

Hi Dylan,

i looked it up and read through the forum but couldn’t find an example of this tool image display.
I tried the Markdown function, but the image from the link didn’t work either. I need to display the device image from imagePath, as with img src.
Would you write a line of code for this?
Somehow I didn’t make it.

Thk.
Joe

16

It seems the {{file}} helper only works in Experience Views; I’m going to file a ticket about getting that resolved.

In your case, you can get the image to display by writing out the front portion of the URL manually and referencing the tag within it:

![Image Alt Tag](https://files.onlosant.com/626962745d1e901caeb5f9c0{{deviceTags.imagePath}})

where 626962745d1e901caeb5f9c0 is the ID of the application where the file is stored.

17

yes super, it already works. I still need to add the scaling to display it in the specified size. :slight_smile:

can I also adjust the size of the popup window somewhere?

Thk.
Joe

18

Hi Joe,
Were you ever able to add scaling to the image using Markdown? I have tried this, and can’t find any method/syntax that works.
Thanks - Stephen

19

Hi Stephen,
unfortunately, I didn’t deal with the sizing any more, if you succeeded, please write something. :slight_smile:

Joe

20

Sorry - I did not find a solution. I ended up changing the original image size for the few images I needed.