Custom widget "Hello, World!" Issue

[CHASEONHO]

hi, i'm practice custom widget

TW.IDE.Widgets.helloWorld = function () {
  this.widgetIconUrl = function() {
      return  "../Common/extensions/HelloWorld_ExtensionPackage/ui/helloWorld/helloWorld.ide.png";
  };
  this.widgetProperties = function () {
    return {
      "name": "Hello, World!",
      "description": "An example widget.",
      "category": ['Common'],
      "properties": {
      "Salutation": {
          "baseType": "STRING",
          "defaultValue": "Hello, World!",
          "isBindingTarget": true
        },
        "TextSize":{
        "baseType":"NUMBER",
        "defaultValue":22,
        "isBindingTarget":true     
        }      
        }
    };
  };
  this.renderHtml = function () {
    return "<div class=\"widget-content widget-helloWorld\">" +
             "<span style=font-size: "+ this.getProperty("TextSize") +"px;>" + this.getProperty("Salutation") + "</span>" +
           "</div>";
  };
  this.afterSetProperty = function (name, value) {
    return true;
  };
  this.widgetEvents = function () {
      return {
          'Updated': {}
      }
  };
};

Hello, World We tried to construct a user widget that adjusts the font size by moving the slider using the example.(29 line)

However, the font size does not change.

The content inside is also unchanged.

How do I show the values that are bound in the widget?

[dupatel]

seonho Cha​: Please confirm if this issue is still open and need suggestions.

-Durgesh

[CHASEONHO]

Hi, Durgesh Patel

I am trying to create reactive text.

We're still trying it now.

thank

[qngo]

Hello, could you make it works in IDE (Composer) ?

[CHASEONHO]

origin hello word extension working

modified hello word extension working but, text size can't change

.salutation {
  font-family: Impact, monospace;
  font-size: text-size // <- it defined properties in ide.js
  text-transform: uppercase;
}

I am weak in both span, style, and css.

After creating the responsive text, I want to create a thermometer widget.

I have a thermometer picture in the background and I plan to make it by adding Thingworx's vertical slider, but it's not possible at this time (because I do not know everything about span, style, css, value binding,

Is there any material that will help us to get direction in this situation?

thank

[qngo]

You can try with pure html to be sure that the css works.

Then in ThingWorx, on run time, can you see the css set in source code ?

[CHASEONHO]

ide and rue time have the same css.

.salutation {  
  font-family: Impact, monospace;  
  font-size: text-size // <- it defined properties in ide.js  
  text-transform: uppercase;  
}