cancel
Showing results for 
Search instead for 
Did you mean: 

SDK and Images

0 Kudos

Hi,

I have a couple of questions about images:

  1. I have an image in the res folder, but when I refer to it in code SRC = "res/image.png", it shows as a broken link. When I test it in Chrome and use Google tools, it shows that it is looking for the image in the images folder.
  2. When we use the image component, we are able to upload an image using a dialog. How can I use this dialog to upload images to my control at runtime?

Thanks.

Accepted Solutions (1)

Accepted Solutions (1)

MustafaBensan
Active Contributor
0 Kudos

Hi Robert,

You may find the following posts relevant to your questions:

1)  SDK Tips and Tricks: Resources and Images by Reiner Hille-Doering for how to reference embedded images in SDK Components;

2)  Design Studio SDK 1.2 - An Image Component Free of MIME Repository Worries by Mike Howles for a technique to upload images to an SDK Component.  By "uploading images at run-time" I assume you actually meant at design-time.

Regards,

Mustafa.

0 Kudos

Hi,

I placed the image within the css folder and used the following css file:

div.imgConUA{

  float: left;

  display: inline-block;

  background-repeat: no-repeat;

  background-image: url('img/ua_man.png');

  height: 30px;

  width: 30px;

  background-size: 30px 30px !important;

}

div.imgConA{

  float: left;

  display: inline-block;

  background-repeat: no-repeat;

  background-image: url('img/a_man.png');

  height: 30px;

  width: 30px;

  background-size: 30px 30px !important;

}

I then have the following function in my component.js file:

this.afterUpdate = function() {

   $(".imgCon").remove();

   if(numcols_val != 0){

      // remove former div's

      // Needed for DS Environment

      $(".imgConA").remove();

      $(".imgConUA").remove();

      // Calculate new div height and width

      numcols_val and num_rows_val are global variables

      divWidth = Math.round(that.$().width()/numcols_val);

      divHeight = Math.round(that.$().height()/numrows_val)-2;

     

      // Create grid of div's (numrow_val x numcols_val)

      for(i=1; i<=numrows_val; i++){

         for(j=1; j<=numcols_val; j++){

            varTemp = (((i-1)*numcols_val)+j);

            if(varTemp & 1){

               this.$().append('<div class="imgCon imgConA">a</Div>' );

            }

            else{

               this.$().append('<div class="imgCon imgConUA">b</Div>' );

            }

         }

        

         // Set Div height and width

         varStrTemp = divHeight +'px';

         $(".imgCon").css("height", varStrTemp);

         varStrTemp = divWidth +'px';

         $(".imgCon").css("width", varStrTemp);

         // set background size (image from css)

         // Works is IE, but not in Chrome

         varStrTemp = divWidth +'px ' + divHeight +'px !important';

         $(".imgConA").css("background-size", varStrTemp);

         $(".imgConUA").css("background-size", varStrTemp);

      }

};

The code in Red works in the Design Studio environment and in IE. However, it does not resize the images in Chrome. Chrome and IE are the latest versions. Can you recommend how to make the code compatible with Chrome or suggest a better way to do it. I have to use CSS, because it is the only way that I know to get the image to work using the EventHandler - Div.

Thanks,

Robert

0 Kudos

I fixed it using the an image element and inline encoding:

(The image element is easier to control)

div.imgConUA{

  float: left;

  display: inline-block;

}

div.imgConA{

  float: left;

  display: inline-block;

}

var imgAString = 'iVBORw0KGgoAAAANSUhEUgAA...';

var imgUAString = 'iVBORw0KGgoAAAANSUhEUgAAA...';

this.afterUpdate = function() {

   $(".imgCon").remove();

   if(numcols_val != 0){

      $(".imgConA").remove();

      $(".imgConUA").remove();

      divWidth = Math.round(that.$().width()/numcols_val);

      divHeight = Math.round(that.$().height()/numrows_val)-2;

      for(i=1; i<=numrows_val; i++){

         for(j=1; j<=numcols_val; j++){

            varTemp = (((i-1)*numcols_val)+j);

            if(varTemp & 1){

               srcAStr = "<img width='" + divWidth + "' height='" + divHeight + "' title='' alt='' src='data:image/png;base64," + imgAString + "'>";

               this.$().append('<div class="imgCon imgConA">' + srcAStr + '</Div>' );

            }

            else{

               srcUAStr = "<img width='" + divWidth + "' height='" + divHeight + "' title='' alt='' src='data:image/png;base64," + imgUAString + "'>";

               this.$().append('<div class="imgCon imgConA">' + srcUAStr + '</Div>' );

            }

         }

      }

   }

};

Answers (0)