Adding a color picker

xed

I would like to add a color picker for some rgb lights. I have some knowledge about html, css, and currently learning coffee… When I first saw the interface i could swear that is’t based on bootstrap. Can someone explain where I can edit the html’s and the css?

leader21

@xed
would be an awesome feature

maybe @sweetpi can explain.

Yves911

@xed if you manage to do that i will also answer to a feature request http://forum.pimatic.org/topic/179/colour-picker-rgb/3

Icesory

For the wifiRGB plugin i need a colorpicker too.

I have done some searches and found this tutorial.
Personal i would implement the Demo 4 with a bright slider to get black too.
http://www.script-tutorials.com/html5-color-picker-canvas/

xed

@Icesory hahahah ) I was looking this morning at the same thing and tough of demo 5. I think i`ll include all of them in the config somehow… I like demo 5 more because i could add a on/off button in the middle

Icesory

The demo5 is also really nice.

Icesory

I found some other interesting stuff.

The posted tutorial used pictures to generate the color wheel.
With this lib we can create it automatically.
https://github.com/benknight/kuler-colorwheel-with-d3

And there is a really impressive demo linked.
http://benknight.github.io/kuler-colorwheel-with-d3/

xed

@Icesory said:

h this lib we can create it automatically.

Imagine that the inner circles are different rgb stripes <3!

Icesory

I am not sure what you mean with this.

xed

in the demo, there is the color wheel and 5 more inner circles. Move those circles around. Imagine that every circle is a rgb controller and with 1 color wheel you can control multiple rgb light bulbs

Icesory

You are right but you can start it with only one colorpicker. I like the style.
I have no experience with html, css or js so i must learn and collect many of tutorials.

sweetpi

@xed said:

I would like to add a color picker for some rgb lights. I have some knowledge about html, css, and currently learning coffee… When I first saw the interface i could swear that is’t based on bootstrap. Can someone explain where I can edit the html’s and the css?

Hi,

it’s not bootstrap but jquery mobile You need to define a color-picking device first, then you can write a (frontend) template for it. The steps are descriped in: http://pimatic.org/guide/development/providing-devices/

If you want you can extends the main framework with a dummy color picker device directly. For adding the device see for example my timer addition:

https://github.com/pimatic/pimatic/commit/b8b4d966e4040ac3b863e05f38b3d9134ff2e128
(you can skip the action handler)

and for the frontend:
https://github.com/pimatic/pimatic-mobile-frontend/commit/553156088e39c7fb1194dc4479ce576d622e0078

If you have any questions, let me know.

xed

@sweetpi
So, i took the DimmerActuator and modified it to be something like a 3xDimmerActuator.

###
  RGBDimmerActuator
  -------------
  ###
  class RGBDimmerActuator extends SwitchActuator
    _rdimlevel: null
    _gdimlevel: null
    _bdimlevel: null

    actions:
      changeRDimlevelTo:
        description: "Sets the level of the Red dimmer"
        params:
          dimlevel:
            type: t.number
      changeGDimlevelTo:
        description: "Sets the level of the Green dimmer"
        params:
          dimlevel:
            type: t.number
      changeBDimlevelTo:
        description: "Sets the level of the Blue dimmer"
        params:
          dimlevel:
            type: t.number
      changeStateTo:
        description: "Changes the switch to on or off"
        params:
          state:
            type: t.boolean
      turnOn:
        description: "Turns RGB to White"
      turnOff:
        description: "Turns RGB to 0"

    attributes:
      rdimlevel:
        description: "The current Red dim level"
        type: t.number
        unit: ""
      gdimlevel:
        description: "The current Green dim level"
        type: t.number
        unit: ""
      bdimlevel:
        description: "The current Blue level"
        type: t.number
        unit: ""
      state:
        description: "The current state of the switch"
        type: t.boolean
        labels: ['on', 'off']
    #################################################################################################
    template: "colorpick"
#################################################################################################
    # Returns a promise
    turnOn: -> @changeRDimlevelTo 255
               @changeGDimlevelTo 255
               @changeBDimlevelTo 255

    # Retuns a promise
    turnOff: -> @changeRDimlevelTo 0
                @changeGDimlevelTo 0
                @changeBDimlevelTo 0

    # Retuns a promise that is fulfilled when done.
    changeDimlevelTo: (state) ->
      throw new Error "Function \"changeDimlevelTo\" is not implemented!"

    _setRDimlevel: (level) =>
      level = parseFloat(level)
      assert(not isNaN(level))
      cassert level >= 0
      cassert level <= 255
      if @_rdimlevel is level then return
      @_rdimlevel = level
      @emit "rdimlevel", level
      @_setState(level > 0)

    _setGDimlevel: (level) =>
      level = parseFloat(level)
      assert(not isNaN(level))
      cassert level >= 0
      cassert level <= 255
      if @_gdimlevel is level then return
      @_gdimlevel = level
      @emit "gdimlevel", level
      @_setState(level > 0)

    _setBDimlevel: (level) =>
      level = parseFloat(level)
      assert(not isNaN(level))
      cassert level >= 0
      cassert level <= 255
      if @_bdimlevel is level then return
      @_bdimlevel = level
      @emit "bdimlevel", level
      @_setState(level > 0)

    # Returns a promise that will be fulfilled with the dim level
    getRDimlevel: -> Promise.resolve(@_rdimlevel)
    getGDimlevel: -> Promise.resolve(@_gdimlevel)
    getBDimlevel: -> Promise.resolve(@_bdimlevel)

I don’t get what the template is for. I’m guessing is the name for the ui of the future colorpicker so I named it accordingly.

  class DummyRGBDimmer extends RGBDimmerActuator

    constructor: (@config, lastState) ->
      @name = config.name
      @id = config.id
      @_rdimlevel = lastState?.rdimlevel?.value or 0
      @_gdimlevel = lastState?.gdimlevel?.value or 0
      @_bdimlevel = lastState?.bdimlevel?.value or 0
      @_state = lastState?.state?.value or off
      super()

    # Retuns a promise that is fulfilled when done.
    changeRDimlevelTo: (level) ->
      @_setRDimlevel(level)
      return Promise.resolve()
    changeGDimlevelTo: (level) ->
      @_setGDimlevel(level)
      return Promise.resolve()
    changeBDimlevelTo: (level) ->
      @_setBDimlevel(level)
      return Promise.resolve()

 ################################################################################################

  return exports = {
    DeviceManager
    Device
    Actuator
    SwitchActuator
    PowerSwitch
    DimmerActuator
    RGBDimmerActuator
    ShutterController
    Sensor
    TemperatureSensor
    PresenceSensor
    ContactSensor
    HeatingThermostat
    ButtonsDevice
    VariablesDevice
    DummySwitch
    DummyDimmer
    DummyRGBDimmer
    DummyShutter
    DummyHeatingThermostat
    Timer
  }

I’m kind of lost in the actions.coffee

 ###
  The RGBDimmer Action Provider
  ###

  class RGBDimmerActionProvider extends ActionProvider

    constructor: (@framework) ->

    # ### parseAction()
    ###
    Parses the above actions.
    ###
    parseAction: (input, context) =>
      # The result the function will return:
      retVar = null

      rdimmers = _(@framework.deviceManager.devices).values().filter(
        (device) => device.hasAction("changeRDimlevelTo")
      ).value()
      gdimmers = _(@framework.deviceManager.devices).values().filter(
        (device) => device.hasAction("changeGDimlevelTo")
      ).value()
      bdimmers = _(@framework.deviceManager.devices).values().filter(
        (device) => device.hasAction("changeBDimlevelTo")
      ).value()

      if rdimmers.length is 0 or gdimmers.length is 0 or bdimmers.length is 0 then return

      device = null
      valueTokens = null
      match = null

      # Try to match the input string with:
      M(input, context)
        .match('dim ')
        .matchDevice(dimmers, (next, d) =>
          next.match(' to ')
            .matchNumericExpression( (next, ts) =>
              m = next.match('%', optional: yes)
              if device? and device.id isnt d.id
                context?.addError(""""#{input.trim()}" is ambiguous.""")
                return
              device = d
              valueTokens = ts
              match = m.getFullMatch()
            )
        )

      if match?
        if valueTokens.length is 1 and not isNaN(valueTokens[0])
          value = valueTokens[0]
          assert(not isNaN(value))
          value = parseFloat(value)
          if value < 0.0
            context?.addError("Can't dim to a negativ dimlevel.")
            return
          if value > 255.0
            context?.addError("Can't dim to greaer than 255.")
            return
        return {
          token: match
          nextInput: input.substring(match.length)
          actionHandler: new DimmerActionHandler(@framework, device, valueTokens)
        }
      else
        return null

  class RGBDimmerActionHandler extends ActionHandler

    constructor: (@framework, @device, @valueTokens) ->
      assert @device?
      assert @valueTokens?

    _clampVal: (value) ->
      assert(not isNaN(value))
      return (switch
        when value > 255 then 255
        when value < 0 then 0
        else value
      )

    ###
    Handles the above actions.
    ###
    _doExecuteAction: (simulate, value) =>
      return (
        if simulate
          __("would dim %s to %s%%", @device.name, value)
        else
          @device.changeDimlevelTo(value).then( => __("dimmed %s to %s%%", @device.name, value) )
      )

    # ### executeAction()
    executeAction: (simulate) =>
      @framework.variableManager.evaluateNumericExpression(@valueTokens).then( (value) =>
        value = @_clampVal value
        @lastValue = value
        return @_doExecuteAction(simulate, value)
      )

    # ### hasRestoreAction()
    hasRestoreAction: -> yes
    # ### executeRestoreAction()
    executeRestoreAction: (simulate) => Promise.resolve(@_doExecuteAction(simulate, @lastValue))

What does M(input, context) do?
Am I on the right track?

Icesory

Action- and predicatehandler are only for rules. It isn’t necessary. Try first to implement the gui element.
And it is better to push your changes to git and show the links.

sweetpi

@Icesory said:

Action- and predicatehandler are only for rules. It isn’t necessary. Try first to implement the gui element.
And it is better to push your changes to git and show the links.

correct.

Icesory

I have found a other really nice color picker.
http://www.vim.org/scripts/script.php?script_id=3224

This is exact the same like in the SVG tool “Incscape”