J (banana) wrote in fotobilder,
J
banana
fotobilder

Colour chooser

I had a go at the colour chooser that Brad asked for. I'm not sure what format to submit the result in, so I've added them here.
ColourChooser.html
<html>
  <head>
    <title>
      JavaScript colour chooser
    </title>
    <script type='text/javascript'>
      <!--
      function setColour ()
      {
        document.getElementById ( 'ColourChooserTarget' ).style.background
            = document.ColourChooser.RGB.value
      }

      function pickColour ()
      {
        var picker = window.open ( "ColourPicker.html", "ColourPicker",
              "height=200,width=500,screenX=100,screenY=100,top=100,left=100" )
        picker.parent = window
        //document.ColourChooser.RGB.value = "#" + HSVtoRGB ( 32, 23, 99 )
        //setColour ()
      }
      // -->
    </script>
  </head>
  <body style='background: white;'>
    <script type='text/javascript'>
      <!--
      document.write ( "<form name='ColourChooser'>" )
      document.write ( "<span id='ColourChooserTarget' style='background: red; border: 1px solid black;'>" )
      document.write ( "    " )
      document.write ( "</span>" )
      document.write ( "  <input name='RGB' type='text' value='#ff0000' onChange='setColour()' size='7'>" )
      document.write ( "  <input type='button' value='Pick...' onClick='pickColour()'>" )
      document.write ( "</form>" )
      // -->
    </script>
    <noscript>
      There should be a colour chooser here, but you don't have JavaScript enabled.
    </noscript>
  </body>
</html>

ColourPicker.html
<html>
  <head>
    <title>
      Colour Picker
    </title>
    <script type='text/javascript'>
      <!--
      var parent

      function grabCoords ()
      {
        var search = location.href.substring ( location.href.indexOf ( "?" ), location.href.length )
        // Can't just use location.search - doesn't work properly in NS6

        if ( search != "" )
        {
          var commaPos = search.indexOf ( "," )
          document.ColourPicker.H.value = search.substring ( 1, commaPos )
          document.ColourPicker.S.value = 100 - search.substring ( commaPos + 1, search.length )
        }
        form.hex.value = "#" + HSVtoRGB ( form.H.value, form.S.value, form.V.value )
        setColour ()
      }

      function grabBrightness ()
      {
        var search = location.href.substring ( location.href.indexOf ( "?" ), location.href.length )
        // Can't just use location.search - doesn't work properly in NS6

        if ( search != "" )
        {
          var commaPos = search.indexOf ( "," )
          document.ColourPicker.V.value = 100 - search.substring ( commaPos + 1, search.length )
        }
        document.ColourPicker.hex.value = "#" + HSVtoRGB ( form.H.value, form.S.value, form.V.value )
        setColour ()
      }

      function HSVtoRGB ( h, s, v )
      {
        // Cribbed from http://www.cs.bham.ac.uk/~mer/colour/hsv.html
        // Fixed up to accept 
        var i, f, p, q, t, r, g, b

        if ( s == 0 )
        {
          // achromatic (grey)
          r = g = b = v
        }
        else
        {
          s /= 100
          v /= 100
          h /= 60 // sector 0 to 5
          i = Math.floor ( h )
          f = h - i // factorial part of h
          p = v * ( 1 - s )
          q = v * ( 1 - s * f )
          t = v * ( 1 - s * ( 1 - f ) )

          switch ( i )
          {
            case 0:
              r = v
              g = t
              b = p
              break
            case 1:
              r = q
              g = v
              b = p
              break
            case 2:
              r = p
              g = v
              b = t
              break
            case 3:
              r = p
              g = q
              b = v
              break
            case 4:
              r = t
              g = p
              b = v
              break
            default: // case 5:
              r = v
              g = p
              b = q
              break
          }
        }

        r = Math.floor ( 255 * r )
        g = Math.floor ( 255 * g )
        b = Math.floor ( 255 * b )
        return hex6 ( r * 65536 + g * 256 + b, 6 )
      }

      function hex6 ( i )
      {
        // Cribbed from some web page - could be done more neatly?
        // Assume i is positive integer
        var r = ''
        var h = new Array ( '0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F' )

        for ( x = 0; x < 32; x++ )
        {
          if ( Math.pow ( 16, x + 1 ) > i )
            break
        }

        for ( y = x; y >= 0; y-- )
        {
          var z = Math.pow ( 16, y )
          r += h [ Math.floor ( i / z ) ]
          i = i % z
        }

        r = ( r.length == 0 ) ? '0' : r
        while ( r.length < 6 )
        {
          r = '0' + r
        }
        return r
      }

      function updateParent ()
      {
        if ( parent == undefined )
        {
          alert ( "Can't find parent window!" )
        }
        else
        {
          parent.document.ColourChooser.RGB.value = form.hex.value
          parent.setColour ()
          window.close ()
        }
      }

      function setColour ()
      {
        document.getElementById ( 'ColourPickerTarget' ).style.background = document.ColourPicker.hex.value
      }

      function resetColour ()
      {
        form.H.value = ''
        form.S.value = ''
        form.V.value = ''
        setColour ()
      }
      //-->
    </script>
  </head>
  <body>
    <a href='#'><img src="http://www.livejournal.com/img/dys/bg_top.gif" border="0"
        ismap width='360' height='100' onClick='setTimeout("grabCoords()", 125)'></a>
     
    <a href='#'><img src="http://www.livejournal.com/img/dys/bg_top.gif" border="0"
        ismap width='10' height='100' onClick='setTimeout("grabBrightness()", 125)'></a>
    <center>
      <form name='ColourPicker'>
        Hue: <input type='text' name='H' value='180' size='3'>
        Sat: <input type='text' name='S' value='50' size='3'>
        Bri: <input type='text' name='V' value='50' size='3'>
        <br>
        Colour:<span id='ColourPickerTarget' style='border: 1px solid black;'>
            
        </span>
         
        HTML:
        <input type='text' name='hex' value='' size='7' onChange='resetColour()'>
        <input type='button' value='OK' onClick='updateParent ()'>
      </form>
    </center>
    <script type='text/javascript'>
      var form = document.ColourPicker
      form.hex.value = "#" + HSVtoRGB ( form.H.value, form.S.value, form.V.value )
      setColour ()
    </script>
  </body>
</html>


Sadly, there are some problems.
  1. It only works properly in IE: I can't persuade NS6 to send anything back from a pop-up back to the parent browser window, despite trying umpteen variations.
  2. It doesn't work in Opera at all - Opera's javascript support sucks.
  3. Javascript sucks
  4. I don't have any handy graphics to link - it needs a Hue/Saturation picture and a Value (Brightness) gradient - I'm sure they can be snagged from somewhere or generated easily enough.
  5. The HSV to RGB calcs are a little out (I was comparing with GIMP's translations), but I don't think that's a huge problem because (a) the differences aren't so big, and (b) you can see the colour you're going to get, not the "correct" HSV colour - if this really is a problem, someone could look at the rounding in the HSV translation.
  6. Javascript sucks
  7. The file names and some of the variable names are of dubious quality, and I'm English so I spell colour with a U.


I would have resolved some of these issues before submitting this, but I'm away from a computer for a while now.
Subscribe

  • 302: lj_dev

    In the interests of consolidating all FotoBilder development-related discussion, we're going to be closing down this community. The same…

  • Development stalled?

    Is the development of Fotobilder held? Stalled? I am asking because there is no activity on the community and there is no link to the Fotobilder…

  • (no subject)

    Does FotoBilder works with Apache2? I installed all the required modules on my debian sarge, and when I restart my apache server, it dies horribly…

  • Post a new comment

    Error

    Comments allowed for members only

    Anonymous comments are disabled in this journal

    default userpic
  • 6 comments