How do I re-size an individual widget icon?

3601
6
Jump to solution
05-19-2016 02:47 PM
MikeAndres1
New Contributor

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
MikeAndres1
New Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

KevinHibma
Esri Contributor

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");

      }

MikeAndres1
New Contributor

Robert,

This worked perfectly. Thanks for the help. I have to figure out a way to send you a virtual 6-pack.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Mike,

  Glad to help. Please mark this thread as answered by clicking on the "Correct Answer" link on the reply that answered your question.

0 Kudos