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?
-
Adding a color picker
-
pimatic v0.9 has been released!
Support Pimatic and get some free stickers
Like us on Facebookmake it so !
-
@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
pimatic rocks!
-
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/pimatic rocks!!!
-
@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
-
The demo5 is also really nice.
pimatic rocks!!!
-
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-d3And there is a really impressive demo linked.
http://benknight.github.io/kuler-colorwheel-with-d3/pimatic rocks!!!
-
@Icesory said:
h this lib we can create it automatically.
Imagine that the inner circles are different rgb stripes <3!
-
I am not sure what you mean with this.
pimatic rocks!!!
-
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
-
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.pimatic rocks!!!
-
@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/553156088e39c7fb1194dc4479ce576d622e0078If you have any questions, let me know.
-
@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? -
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.pimatic rocks!!!
-
@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.
-
I have found a other really nice color picker.
http://www.vim.org/scripts/script.php?script_id=3224This is exact the same like in the SVG tool “Incscape”
pimatic rocks!!!