Create a hexadecimal colour based on a string with Elm

Wed, Aug 22, 2018 in /web-programmer/

I had an html table of categorized items, and I wanted to give each category it’s own Color automatically. So I thought I’d hash the category ID String into an HTML Hexidecimal Color. A search will find this stack overflow post, but I was using elm and thought it would be a fun task to translate this function into a funcitonal style. Here’s how that went:

The Stack Overflow post provided the following solution in Javascript:

	function hashCode(str) { // java String#hashCode
	var hash = 0;
	for (var i = 0; i < str.length; i++) {
	hash = str.charCodeAt(i) + ((hash << 5) - hash);
	}
	return hash;
	}

	function intToRGB(i){
	var c = (i & 0x00FFFFFF)
	.toString(16)
	.toUpperCase();

	return "00000".substring(0, 6 - c.length) + c;
	}

view raw javascript-string-to-hexcolor-hash.js hosted with ❤ by GitHub

and I ended up with:

	import Hex {- from rtfeldman/elm-hex/1.0.0 -}
	import Bitwise
	import Char

	hashOpp : Char -> Int -> Int
	hashOpp char hash =
	(Char.toCode char) + ((Bitwise.shiftLeftBy 5 hash) - hash)


	stringToHexColor : String -> String
	stringToHexColor input =
	let
	hash =
	List.foldr hashOpp 0 (String.toList input)
	in
	Bitwise.and hash (Hex.fromString "FFFFFF" \|> Result.withDefault 16777215)
	\|> Hex.toString
	\|> String.toUpper
	\|> String.padLeft 6 '0'
	\|> (++) "#"

view raw elm-string-to-hexcolor-hash.elm hosted with ❤ by GitHub

then, in each table row’s first td, I could add I colour indicator as follows:

td [style[("border-left","10pt solid " ++ (stringToHexColor item_variable.id))] ] [ text "The Item Name"]

I haven’t been able to confirm that it does exactly as the javascript function, but it seems to do the job i need it to for now. I now have an itch to delve more into Bitwise and write about that as well.

#Elm #HashFunctions