on 12-30-2014 2:43 AM
Hi,
I have a couple of questions about images:
Thanks.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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>' );
}
}
}
}
};
User | Count |
---|---|
81 | |
25 | |
12 | |
9 | |
7 | |
6 | |
5 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.