Author Topic: Change text alignment and text color in static json  (Read 135 times)

Offline Deeps

  • Newbie
  • *
  • Posts: 16
  • Karma: +0/-0
Change text alignment and text color in static json
« on: July 03, 2018, 10:53:51 am »
Hi

Im using static json for my plugin. im using control type variable as follow
   {
            "ControlGroup": "1",
            "ControlType": "variable",
            "anchorX": 0,
            "text_color":"red",
            "Display": {
               "Color":"red",
               "TextColor":"red",
               "Service": "urn:upnp-org:serviceId:DEEPLEDPlugin",
               "serviceId": "urn:upnp-org:serviceId:DEEPLEDPlugin",
               "Variable": "Message"
            },
            "ControlCode": "message"
         }

i want this text to be displayed left aligned and color should red. But im not able to do both. can anybody please help

Offline rigpapa

  • Sr. Member
  • ****
  • Posts: 467
  • Karma: +66/-0
Re: Change text alignment and text color in static json
« Reply #1 on: July 03, 2018, 11:26:36 am »
AFAIK, there is no color control directly in static JSON for the variable control type in UI7 (I just checked their JS code--can't find anything). But, you can add a styled <span> to your Message value, and it should be honored. <span style="color:red">Danger Will Robinson!</span>

Also, for your service name, you should not use upnp-org. It would be preferable to use your own service domain, like deeps-com or something similar. Generally speaking, one should avoid creating any variables, actions, etc. in the upnp-org and micasaverde-com service domains, as these are defined externally and could change at any time in a way that creates a conflict with your plugin.
Author of Rachio, Deus Ex Machina II, Intesis WMP Gateway, SiteSensor, DelayLight, Auto Virtual Thermostat and VirtualSensor plugins. Vera Plus w/100+ Z-wave devices. Vera3 sandbox.

Offline Deeps

  • Newbie
  • *
  • Posts: 16
  • Karma: +0/-0
Re: Change text alignment and text color in static json
« Reply #2 on: July 03, 2018, 10:38:36 pm »
hey.. thank you for reply .. i will try span

what about left alignment of text

and now im curious.. if these easy facilities are not present in static JSON, how other ppl are creating UI? have I missed the easy way n trying old way of json?

im newbie so not sure if im on a right track

Offline rigpapa

  • Sr. Member
  • ****
  • Posts: 467
  • Karma: +66/-0
Re: Change text alignment and text color in static json
« Reply #3 on: July 03, 2018, 11:10:58 pm »
what about left alignment of text

That can be a bit more challenging, since alignment depends on the dimensions of the container, and you may not (well, probably don't) have a lot of control over that. And it's dangerous, IMO, because as Vera's UI evolves, your containers could change in every conceivable way, and you are again faced with a broken UI.

Quote
and now im curious.. if these easy facilities are not present in static JSON, how other ppl are creating UI? have I missed the easy way n trying old way of json?

I keep the static JSON to a minimum, personally. Just what's absolutely necessary for the dashboard and control panel. I use JavaScript tabs for the "heavy" stuff--most configuration in my plugins, where the relative simplicity of what you can do with static JSON makes too basic a UI to be user-friendly. This way, I can create the entire interface from a skeleton of HTML manipulated with jQuery, using the Vera JavaScript API to get access to data and actions. It's not perfect (the jQuery and Bootstrap CSS are old, and jQuery UI is old and missing now-common components), but it's far and away better than what you can do with static JSON. You set this up by configuring a tab (in the static JSON's Tabs array) with TabType=javascript, ScriptName=the name of the JavaScript file (often something along the lines of J_PluginName_UI7.js), and Function=the name of the module (defined by the JS file) and function in the module that UI7 should call to display the tab. When the user switches to that tab, UI7 just loads that JavaScript file and calls that function in the module, and the rest is up to your code. Vera's documentation for all of this, such as it is, is here: http://wiki.micasaverde.com/index.php/JavaScript_API
Author of Rachio, Deus Ex Machina II, Intesis WMP Gateway, SiteSensor, DelayLight, Auto Virtual Thermostat and VirtualSensor plugins. Vera Plus w/100+ Z-wave devices. Vera3 sandbox.