cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Did you get an answer that solved your problem? Please mark it as an Accepted Solution so others with the same problem can find the answer easily. X

ThingWorx 9 - Mashup - Image as interactive background

otluk
14-Alexandrite

ThingWorx 9 - Mashup - Image as interactive background

Trying to follow the Mars Project with the interactive Dashboard where an image is background, seems only be possible with the legacy responsive Design. Has anyone a tutorial / example - how to set images in a layer behind other widgets like labels and gauges.

When I am setting the image as background it is not responsive anymore and gets stripped away when the size of the window changes.

 

Goal: Set the image and add other widgets on top that has fixed positions like in the Mars Project example (where the passengers and weather warnings are displayed as labels on top of the image).

 

Looking for a way how this is done in ThingWorx 9 (in 8 it is quite straight foward) -

Currently running on ThingWorx 9.0.2-b136. - Thank you!

ACCEPTED SOLUTION

Accepted Solutions
Ashritha
15-Moonstone
(To:otluk)

  1. Add a container
    1. Set the fixed height
  2. Add a container within the above mentioned container
    1. Fix the width of the container
    2. Get the image of above specified height and width .Set the Image to the style definition of container
  3. Add gadget to the container
    1. Make gadget background transparent
      test.PNG

 

View solution in original post

5 REPLIES 5
GabrielB
12-Amethyst
(To:otluk)

Hi @otluk,

On each of the new flex panels in the new mashups, there is a property called SourceURL on which you can add a background. The way you could interact with that in previous layout widget mashup, was from a property which could modify it's behavior.

 

Now it is a bit more technical, but not that hard.

 

Set the image on the SourceURL of the container you want the background on. Add a custom class, like backgroundCover.

 

Go to the CSS tab, and add this code that would basically do what the dropdown did in the layout widget.

 

.backgroundCover > div {
background-size: cover;
}

 

There might also be the case where you need background-size: contain; if you want your image to be shown and not cut no matter the ratio of the container.

 

Hope this helps!

 

BR,

Gabriel

otluk
14-Alexandrite
(To:GabrielB)

Thanks that helped a little but did not yet solve the whole thing I was aiming for.

Still not able to put a Gauge or Label on top of the image.

-> tried the CSS and we were able to create Gauges on Top of a Background embedded in a container but then the image does not scale correctly like with the image widget

( Like in the Mars Rover Project)

Is this functionality not foreseen anymore?

slangley
23-Emerald II
(To:otluk)

Hi @otluk.

 

It sounds that you want a static size container that doesn't change when you move between different resolutions.  Can you confirm?  If so, you can add additional containers to the mashup as static containers to ensure the width of the container does not change and the positioning of the elements in that container remain fixed.  All of these properties can be set from the layout tab for any container object.

 

Please let us know if this might work for you.

 

Regards.

 

--Sharon

otluk
14-Alexandrite
(To:slangley)

Yes I can confirm that never the less how can I set Gauges on Top of the image and the relation of the Gauges stay the same when the resolution changes (like in the mars rover example where we have a static image and labels on top in specified places)

Ashritha
15-Moonstone
(To:otluk)

  1. Add a container
    1. Set the fixed height
  2. Add a container within the above mentioned container
    1. Fix the width of the container
    2. Get the image of above specified height and width .Set the Image to the style definition of container
  3. Add gadget to the container
    1. Make gadget background transparent
      test.PNG

 

Announcements


Top Tags