Looks like the only way to control the background color in a block with an image is with an indicator block.
But I don’t see a way of controling the image size.
I know there is an image block, but I’m not aware of a way I can change the background color in it?
Hi Lars,
It looks as though Markdown does not have a way to change the image size that is supported by our platform. The image will have to be exist as the size you are looking to see. There is also not yet a way to select a background color on an image block.
These are both excellent ideas, I will create tickets for them and keep you updated as to if they are implemented!
Thanks,
Julia
I would like an option to scale the image to the size of the dashboard block.
What is the default size in pixels of an image which won’t require the little scroll bars on the window?
As it is now, it’s difficult to get a clean dashboard display. I resized this image and now it has little dots in it, I suspect from the scaling. A different image is shown depending upon orientation.
Is there a better way to get small images cleanly displayed?
Thanks.
That is interesting. The Image Block is designed for “scale to fit”, which means the image should always fit without scrolling. Here’s a quick screen capture I grabbed from one of my dashboards:
It could be something with the browser. I’m using Firefox. What browser and version are you using?
Oh, I just realized this thread is in the context of an Indicator Block. In that case, yes, the image will be displayed at its native resolution with no scaling applied.
As for the dots, that certainly looks like an artifact of your resizing process, and nothing to do with the dashboard itself. A quick way to verify would be to enter the URL of the image into your browser address bar to view it directly.
Ah you’re right on the dots. My image got scaled somehow and the dots appeared. That was a red herring. I think because it’s a gif, my paint program messed with it. If I save as JPG it’s better.
But regarding the size and scaling, Chrome looks different from Firefox, and those little scrollbars appear. I do see that if I put a smaller picture in it gets smaller. I cannot have the little scrollbars, regardless of picture native size
But can I get a box which let’s me choose “Scale to whatever size needed so that the little scrollbars never appear?” That’s what I really want. The IMAGE block seems to have it.
I want the image to change based on a device field, which I don’t think the IMAGE block can do, can it?
The Image Block cannot change on attribute values, but it can change on tag values, provided the device is passed to the dashboard using Context Variables.
In most production dashboards, the device to view is usually passed in via context. This allows you to create a single dashboard to view any number of devices.
The example gif I posted is using context variables and the image to show is stored on an image device tag:
Another workaround, and probably the correct choice, is to use the Custom HTML Block. The HTML/CSS required to display and scale an image to fit the frame is pretty minimal. With this, everything can be done using attribute values, since they are passed into your block.
@Brandon_Cannaday, could you go a bit more on the ‘Image Block…but it can change on tag values’… Do I have this correct: I’ve added a ‘key’ tag to the sensor for the picture I want to be representative of it, the ctx used instead of ‘deviceID’ is ‘hexID’ in the experience dashboard:
That’s not working for me, so I’m definitely missing/confusing something here.
Thanks, j
Hello! I think the part you’re missing is the “Include full context” option for the device context variable:
That option allows the rest of the device info ( like tags ) to be available in templating.
Hey @Jose_Cruz,
You’ll want to remove the onlosant.com files domain from the device tag and keep only the path. This is because you’re also adding the domain to the Image Block URL, which means it’ll be there twice.
Device Tag:
sensPic = imageX.png
Image Block:
https://files.onlosant.com/<app-id>/{{ctx.hexID-0.tags.sensPic.[0]}}
This exact use case is covered in my Industrial Equipment Monitor Deeper Dive, which you can watch here:
I misread your original message and thought you were using the Device ID context variable.
But here, you’re using the Device Tag Context Variable. So, I recommend Brandon’s solution:
@anaptfox, yes, I too got confused. I’m reverting to Device ID ctx, ‘clicking’ the option to carry all tag info, I’m in the process of doing that - the dashboard values are showing up. I’ll go with you guys’ option and let you know the ‘outcome’. So far so good. Thx, 
UPDATE: @anaptfox @Brandon_Cannaday Device ID ctx did the trick.
Thanks!
