I need to re-size the icon of an individual widget. By default, the size is 40px by 40px, but I need it to be 150px by 75px. I would like all of the remaining widget icons to be 40px by 40px.
Thanks
Solved! Go to Solution.
Mike,
Well this will take some effort. I will outline the step below:
1. Add the about widget to one of the widget place holders
2. Modify the apps main config.json to use bottom parameter instead of top:
{
"position": {
"left": 55,
"bottom": 45,
"relativeTo": "map"
},
"id": "About_24",
"name": "About",
"label": "About",
"version": "2.0.1",
"uri": "widgets/About/Widget",
"config": "configs/About/config_About.json",
"icon": "configs/About/icon_About.jpeg"
},
3. go into the configs/About/ folder and replace the small resized icon image with your desired size image (icon_About.jpeg in my case).
4. Next go to the [install dir]\server\apps\[app#]\jimu.js\OnScreenWidgetIcon.js and add this bold code to the postCreate function:
postCreate: function(){
this.inherited(arguments);
this.iconNode = html.create('img', {
src: this.widgetConfig.icon
}, this.domNode);
html.setAttr(this.domNode, 'title', this.widgetConfig.label);
html.setAttr(this.domNode, 'data-widget-name', this.widgetConfig.name);
this.own(on(this.domNode, 'click', lang.hitch(this, function(){
this.onClick();
})));
if(this.widgetConfig.label === "About"){
html.addClass(this.domNode, "myAbout");
}
5. Now open the [install dir]\server\apps\[app#]\jimu.js\css\jimu.css and add these new css rules bolded below to the
/*css for PreloadWidgetIcon dijit*/ section:
/*css for PreloadWidgetIcon dijit*/
.jimu-widget-onscreen-icon{
position: absolute;
cursor: pointer;
border-radius: 4px;
}
.jimu-widget-onscreen-icon img{
width: 20px;
height: 20px;
margin: 10px;
}
.jimu-widget-onscreen-icon.myAbout{
position: absolute;
cursor: pointer;
border-radius: 0;
width:150px!important;
height:75px!important;
}
.jimu-widget-onscreen-icon.myAbout img{
width: 150px;
height: 75px;
margin: 1px;
}
That should take care of it.
Mike,
This is going to a difficult task either way but I need to know what theme you are using before I even know where to begin.
Robert,
Thanks for the response. I am using the jewelry box theme. My goal is to place the about widget in the bottom-left corner of the screen and have the icon of that widget be an image that is 150px by 75px. So far I have inserted and placed the widget in the config.js file.
Mike,
Well this will take some effort. I will outline the step below:
1. Add the about widget to one of the widget place holders
2. Modify the apps main config.json to use bottom parameter instead of top:
{
"position": {
"left": 55,
"bottom": 45,
"relativeTo": "map"
},
"id": "About_24",
"name": "About",
"label": "About",
"version": "2.0.1",
"uri": "widgets/About/Widget",
"config": "configs/About/config_About.json",
"icon": "configs/About/icon_About.jpeg"
},
3. go into the configs/About/ folder and replace the small resized icon image with your desired size image (icon_About.jpeg in my case).
4. Next go to the [install dir]\server\apps\[app#]\jimu.js\OnScreenWidgetIcon.js and add this bold code to the postCreate function:
postCreate: function(){
this.inherited(arguments);
this.iconNode = html.create('img', {
src: this.widgetConfig.icon
}, this.domNode);
html.setAttr(this.domNode, 'title', this.widgetConfig.label);
html.setAttr(this.domNode, 'data-widget-name', this.widgetConfig.name);
this.own(on(this.domNode, 'click', lang.hitch(this, function(){
this.onClick();
})));
if(this.widgetConfig.label === "About"){
html.addClass(this.domNode, "myAbout");
}
5. Now open the [install dir]\server\apps\[app#]\jimu.js\css\jimu.css and add these new css rules bolded below to the
/*css for PreloadWidgetIcon dijit*/ section:
/*css for PreloadWidgetIcon dijit*/
.jimu-widget-onscreen-icon{
position: absolute;
cursor: pointer;
border-radius: 4px;
}
.jimu-widget-onscreen-icon img{
width: 20px;
height: 20px;
margin: 10px;
}
.jimu-widget-onscreen-icon.myAbout{
position: absolute;
cursor: pointer;
border-radius: 0;
width:150px!important;
height:75px!important;
}
.jimu-widget-onscreen-icon.myAbout img{
width: 150px;
height: 75px;
margin: 1px;
}
That should take care of it.
Thanks for this, Robert. This was helpful.
I just want to point out that if you're localizing in your widget, you'll need to make sure you trap for the different widgetConfig.label languages. I got caught on this.
if(this.widgetConfig.label === "About" || this.widgetConfig.label === "AboutInDifferentLang"){
html.addClass(this.domNode, "myAbout");
}
Robert,
This worked perfectly. Thanks for the help. I have to figure out a way to send you a virtual 6-pack.
Mike,
Glad to help. Please mark this thread as answered by clicking on the "Correct Answer" link on the reply that answered your question.