I don’t seem to be able to get
working in my ionic app.
It seems the page is constantly reloading when I try to add ‘farbtastic’ to the modules.
Any advice?
I can get the color picker it is based on to show but it won’t register “clicks”.f
I would either want to get this colorpicker running or am interested in alternatives.
This could work for you https://github.com/schartier/angular-farbtastic. It’s based on the farbtastic color picker plugin.
Tested on emulator, works and looks ugly. The clicks, which are transformed to touch events (maybe?), work.
Can you tell me how you did it / paste the source? I already tried it with schartiers code but as stated … I can’t get it to work.
First run:
bower install -S angular-farbtastic
bower install -S jquery#1.9.1
Then, edit line 463 on bower_components/angular-farbtastic/angular-farbtastic.js
farbtastic = new Farbtastic($element, function(color) {
// to
farbtastic = new Farbtastic($($element), function(color) {
Insert ‘farbtastic’ as a module dependency and insert the directive:
<ng-farbtastic ng-model="color"></ng-farbtastic>
thanks so far, joseadrian.
I can get it to show in my emulator (the rectangle is grey though - which it shouldnt) and
it won’t react to “clicks”.
Might be conflicting with some other code in the app though.
I will try again with a blank app.
Try adding
data-tap-disabled=“true”
To the container of the directive. I just tested on a real device (Android 4.1.2) and the touch / tap works. I can scroll (?) on the wheel without problems. But the same thing happened as in the emulator, it looks ugly 
I can’t replicate the “looking ugly” problem. Thanks to your help it works in my emulator as on my device in a blank app.
I now need to figure out what the problem is including it in the app im working on (controlling some rgb leds in my living room hooked up to an ESP8266).
I just noticed in firefox it says “The Web Console logging API (console.log, console.info, console.warn, console.error) has been disabled by a script on this page.” but I can’t find anything console related in the farbtastic code so that may not be related?
Also - where would I best pass options e.g. width and height?
Well, that’s up to you unless you share all your project.
I don’t use Firefox and doing a google search: you may have firebug installed so that could be.
“where would I best pass options…” I don’t know what are you trying to do. width and height to what?
The code will go on github in the rgbcubes repository since all those educational projects should also help others get stuff done quicker.
Regarding console.logging - thanks - I also tried googling it 
It’s not a priority atm though.
Setting width and height doesn’t seem to be exposed to the angular module so it defaults to 300px.
It should of course adjust to the available space inside the app - so I need to extend the angualar part
of the farbtastic script, right?
The only thing that is exposed to angular is the setcolor function.
Since I can’t figure out how to use that function - how would I set e.g. the initial color different to 808080 with setcolor?
About the width and height… I’m going to look at it later. About the color, if you check the directive to add the color picker
<ng-farbtastic ng-model="color"></ng-farbtastic>`
there is a ng-model attribute with a color value (change it if you want. Add it directly as a string
ng-model=“‘#COLOR’”
or set it on the controller
$scope.color = ‘#COLOR’;
I’ve been trying to modify the entire plugin so it doesn’t depend on jquery but it’s going to take some time. So… you better fork that repo and apply the changes we are making to angular-farbtastic. Then install it using bower and load it on your html file, instead of the original module.
bower install -S your-fork-of-angular-fabstactic
Modify ng-farbtastic template:
<ng-farbtastic ng-model="color" width="200"></ng-farbtastic>
And after line 468 on bower_components/angular-farbtastic/angular-farbtastic.js, add:
, width: $attrs.width
Or… just change the values of width in lines 14 and 15
I made a mistake here Looking for an ionic color wheel (module) - #10 by joseadrian
You can’t do that. You will get an error saying that the value is non-assignable.
Thank you so much. At some point I will need to buy you a beer.
So it’s almost rady for use. Can it be made to react to touch better (not just on click but dragging) easy?
That would be great 
haha.
It does work when you drag, inside the color picker and wheel. Not only in the emulator but also on a real device and web browser. Again, on my device it looks ugly and maybe it’s because the model (?)
Funny. On my Android 5.0.2 device it does only work with data-tap-disabled=“true” and I need to click to set a color.
I will also try in a 4.x emulator.
@exco, did you make the pallete works dragging instead of clicking? I’m trying to make the dragging effect in plugin but until now it is not working =(
@vinimendes3 “long long time ago” - fortunately very little on the internet ever gets lost
https://jsfiddle.net/exco/2hxhfcLz/
^^ didn’t get the farbtastic to work like I wanted and rather drew my own color wheel on a canvas.