Add UIColor to RGB / HEX

src/index.html

@@ -42,6 +42,7 @@ <h4 class="text-center">UIColor is a website used to convert HEX & RGB colors to
 
                     <div class="btn-group">
                         <a class="btn btn-success" href="#/hex-to-ui" ng-class="{ active: isActive('/hex-to-ui') }">HEX</a>
+                        <a class="btn btn-success" href="#/ui-to-all" ng-class="{ active: isActive('/ui-to-all') }">UIColor</a>
                         <a class="btn btn-success" href="#/rgb-to-ui" ng-class="{ active: isActive('/rgb-to-ui') }">RGB</a>
                     </div>
 

src/js/app.js

@@ -37,7 +37,10 @@ app.config(['$routeProvider',
         templateUrl: 'templates/rgb-to-ui.html',
         controller: 'RgbToUICtrl',
     })
-
+    .when('/ui-to-all', {
+        templateUrl: 'templates/ui-to-all.html',
+        controller: 'UiToAllCtrl',
+    })
     .otherwise({
         redirectTo: '/hex-to-ui'
     });

src/js/controllers.js

@@ -4,5 +4,6 @@ angular.module('controllers', [
     'controllers.header',
     'controllers.hextoui',
     'controllers.rgbtoui',
+    'controllers.uitoall'
 
 ]);

src/js/controllers/ui-to-all.js

@@ -0,0 +1,67 @@
+var app = angular.module('controllers.uitoall', ['ngRoute', 'ui.bootstrap', 'colorpicker.module']);
+
+app.controller("UiToAllCtrl", function (appConfig, $scope, $filter, $rootScope) {
+
+    $scope.title = "UIColor to Hex & Rgb Converter";
+
+    // Roll Tide
+    $scope.uiColorValid = true;
+    $scope.uiColorString = "";
+
+    $scope.color = {
+        "r": "",
+        "g": "",
+        "b": "",
+        "hex": ""
+    };
+
+    function convertUiToRgbAndHex(r, g, b) {
+        $scope.color.r = Math.round(r * 255);
+        $scope.color.g = Math.round(g * 255);
+        $scope.color.b = Math.round(b * 255);
+
+        $scope.color.hex = componentToHex($scope.color.r) + componentToHex($scope.color.g) + componentToHex($scope.color.b);
+    }
+
+    function componentToHex(c) {
+        var hex = c.toString(16);
+        return hex.length == 1 ? "0" + hex : hex;
+      }
+
+    $scope.$watch('uiColorString', function (newVal, oldval) {
+        if (newVal !== "") {
+            var parseRegex = /[rR]ed: ?([\d.]*?)f?,? green: ?([\d.]*?)f?,? blue: ?([\d.]*?)f?,? /;
+            var parsedGroups = parseRegex.exec(newVal);
+
+            if (parsedGroups) {
+                var red = parseFloat(parsedGroups[1]);
+                var green = parseFloat(parsedGroups[2]);
+                var blue = parseFloat(parsedGroups[3]);
+
+                if (red <= 1 && green <= 1 && blue <= 1) {
+                    convertUiToRgbAndHex(red, green, blue);
+                    updateCopyText();
+                    $rootScope.$broadcast('ColorChanged', $scope.color.hex);
+                    $scope.uiColorValid = true;
+                } else {
+                    $rootScope.$broadcast('ColorChanged', appConfig.themePrimary);
+                    $scope.uiColorValid = false;
+                    console.log("Invalid UIColor.");
+                }
+            } else {
+                $rootScope.$broadcast('ColorChanged', appConfig.themePrimary);
+                $scope.uiColorValid = false;
+                console.log("Invalid UIColor.");
+            }
+        } else {
+            $rootScope.$broadcast('ColorChanged', appConfig.themePrimary);
+        }
+
+    }, true);
+
+    function updateCopyText() {
+        $scope.copyRgb = "rgb(" + $scope.color.r + ", " + $scope.color.g + ", " + $scope.color.b + ")";
+        $scope.copyHex = "#" + $scope.color.hex;
+    }
+
+});

src/templates/ui-to-all.html

@@ -0,0 +1,42 @@
+<h2 class="title">{{ title }}</h2>
+
+<div class="row converter ui-to-all">
+    <div class="col-xs-12 col-sm-12 col-md-offset-1 col-md-10">
+
+        <div class="col-sm-12 col-xs-12 col-md-12 form-group" ng-class="{false:'has-warning'}[uiColorValid]">
+            <div class="input-group">
+                <div class="input-group-addon">UIColor</div>
+                <input class="form-control input-lg" type="text"
+                    placeholder="UIColor(red: 0, green: 0, blue: 0, alpha: 1.0)"
+                    ng-class="{false:'has-warning'}[uiColorValid]" ng-model="uiColorString">
+            </div>
+        </div>
+
+        <div class="col-md-12 col-lg-12 form-group color-demo" ng-show="uiColorValid && uiColorString !== ''">
+            <svg width="100%" height="45" preserveAspectRatio="xMaxYMin meet">
+                <rect width="100%" height="100%" rx="5" ry="5" style="stroke-width:0;" ng-style="{'fill': '#' + color.hex}" />
+            </svg>
+        </div>
+
+        <div class="col-xs-12" ng-show="uiColorValid && uiColorString !== ''">
+            <div ng-show="!uiColorValid" class="alert alert-warning" role="alert">UIColor not valid</div>
+
+            <!-- RGB -->
+            <div ng-show="uiColorValid" class="code-block">
+                <h3 class="language">RGB</h3>
+                <span>{{ copyRgb }}</span>
+                <button type="button" class="btn btn-default hidden-xs hidden-sm" clip-copy="copyRgb"><i
+                        class="fa fa-files-o"></i></button>
+            </div>
+
+            <!-- HEX -->
+            <div ng-show="uiColorValid" class="code-block">
+                <h3 class="language">HEX</h3>
+                <span>{{ copyHex }}</span>
+                <button type="button" class="btn btn-default hidden-xs hidden-sm" clip-copy="copyHex"><i
+                        class="fa fa-files-o"></i></button>
+            </div>
+        </div>
+
+    </div>
+</div>