Pimatic Plugins with Custom Layout

---

Hi,

Is there any other docs for develop plugins with custom layout (outside standard layout)?
Because until now, somehow, the official development for this dont work with me.
I can successfully attach the custom layout, but somehow failed to attach it with my cusom device.
I already use the suggested howto in that link, but cant work.

Following my source code.

Very appreciate for any kind of help…

thanks you

Hi,

Could you describe more precisely what you want to do?

If you just want to display a message, there is no need to create a custom “layout” / device template. The generic device template can handle this quite well if you declare the message attribute:

  class MyHelloWorld extends env.devices.Device

    attributes:
      message:
        description: "The message to display"
        type: "string"

    constructor : (@config) ->
      env.logger.info(@config)
      @id = @config.id
      @name = @config.name
      @_message = @config.message
      super()
    getMessage: -> Promise.resolve(@_message)

It should display the message attribute automatically at the right of the device.

If you still need to create a custom template you can do it by setting the template attribute:

  class MyHelloWorld extends env.devices.Device

    attributes:
      message:
        description: "The message to display"
        type: "string"

    template: 'MyHelloWorld'

    constructor : (@config) ->
      env.logger.info(@config)
      @id = @config.id
      @name = @config.name
      @_message = @config.message
      super()
    getMessage: -> Promise.resolve(@_message)

You don’t need a template-getter function, the docs are out of date, I will update them. (The : in template: 'MyHelloWorld' is important, check the coffeescript docs for more details.) If you need more details let me know. Be sure to set the “mode” setting of the mobile-frontend to “development” and clear all caches.

Thanks @sweetpi for your reply.
I will try it. Anyway, do you mind to share how to change into development mode for mobile front-end plugins? I’ve checked in docs, but still can’t find it except statement debug = true in config.json

Thanks

To set the mobile-frontend into the development mode you must only add this line the config of the mobile-frontend.

"plugins":[
  {
    "plugin": "mobile-frontend", 
    "mode": "development" 
  } 
] 

@Icesory thanks…really appriciate it

@sweetpi First code working well now, i can easily add message to my plugin.
Then i want to customize it with my custom template, adding more radio buttons, and several html input. Apparently, it still the same. Still the same user interface like the first code.

Any special trick here?

@funky81 What happens if you set the template, like in the second example? Could you show the template you want to use (github)?

hi @sweetpi , finally I can develop it…one more question, how to debug line by line for coffeescript?
any tools?

In Browser you can use the dev tools directly, but without source map support, so you see the compiled javascript code, what should no differ much.

In node there is https://github.com/node-inspector/node-inspector . Don’t know if source maps are used without additional setup.