Skip to main content
O
otluk1-Visitor
1-Visitor
November 13, 2020
Solved

ThingWorx 9 - Mashup - Image as interactive background

  • November 13, 2020
  • 2 replies
  • 4018 views

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!

    Best answer by Ashritha
    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

     

    2 replies

    G
    GabrielB12-Amethyst
    12-Amethyst
    November 16, 2020

    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

      O
      otluk1-VisitorAuthor
      1-Visitor
      November 20, 2020

      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?

      S
      slangleyCommunity Manager
      Community Manager
      December 17, 2020

      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

        O
        otluk1-VisitorAuthor
        1-Visitor
        December 18, 2020

        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)

        A
        Ashritha15-MoonstoneAnswer
        15-Moonstone
        December 21, 2020
        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

         

          Terms & ConditionsCookie settingsAccessibility statement