If you benefit from web2py hope you feel encouraged to pay it forward by contributing back to society in whatever form you choose!

Download mColorPicker archive from http://www.bertera.it/software/web2py/mColorPicker-w2p.tgz ad decompress in static/ folder of your application

Add the widget in db.py

import uuid
colorpicker_js = URL(r=request,c='static/mColorPicker', f='mColorPicker.min.js')
class ColorPickerWidget(object):  
    """
    Colorpicker widget based on  http://code.google.com/p/mcolorpicker/
    """ 
    def __init__ (self, js = colorpicker_js, button=True, style="", transparency=False):
        uid = str(uuid.uuid4())[:8]
        self._class = "_%s" % uid
        self.style = style
        if transparency == False:
            self.transparency = 'false'
        else:
            self.transparency = 'true'
        if button == True:
            self.data = 'hidden'
            if self.style ==  "":
                self.style = "height:20px;width:20px;"
        else:
            self.data = 'display'
        if not js in response.files:
            response.files.append(js)   
    def widget(self, f, v):
        wrapper = DIV()
        inp = SQLFORM.widgets.string.widget(f,v, _value=v, _type='color',\
            _data_text='hidden', _style=self.style, _hex='true', _class=self._class)
        scr = SCRIPT("$.fn.mColorPicker.init.replace = false;  \
             $.fn.mColorPicker.init.allowTransparency=%s; \
             $('input.%s').mColorPicker({'imageFolder': '/%s/static/mColorPicker/'});"\
              % (self.transparency, self._class, request.application))
        wrapper.components.append(inp)
        wrapper.components.append(scr)      
        return wrapper

color_widget = ColorPickerWidget()

create a test table and set the widget to our new colorpicker widget

db.define_table('house',  Field('color', widget = color_widget.widget))

create the form in your controller:

def index():
    form = SQLFORM(db.house)
    if form.accepts(request.vars, session):
        response.flash = T('New house inserted')
    return dict(form=form)

Comments (3)

  • Login to post



  • 0
    chris-guest-11449 9 years ago

    Pietro, you've done good work wrapping  mColorPicker.js as a web2py plugin. Thank for your efforts.

    Unfortunately, mColorPicker.js is from 2010 and now seems to now be abandonware.

    This plugin works, but I ran into strange behaviour when I had multiple color pickers on a form. This looks to me like a bug in mColorPicker.js . I have documented a simple reproducible case in this post:

    http://stackoverflow.com/questions/30836202/colour-picker-widget-for-web2py-displays-multiple
     


  • 0
    tobias 10 years ago

    Easy to set up, but doesn't store the value in the db - the field just remains empty. I tried setting a default value in the Field definition like piemaster suggested but that didn't help.


  • 0
    piemaster21 13 years ago
    Very nice! Almost too easy to use. I had one issue with it though: although the widget displayed correctly in my SQLFORMs, the first time I used it to pick a colour, the value wasn't sent back to the controller in the request. Every time after that worked fine. Setting a default value in the Field definition (default='#ff0000', for example) resolved this for some reason. It may have just been my code, but I'm not doing anything unusual, so I don't know.

Hosting graciously provided by:
Python Anywhere