Updated visualizer, and made parameterized some more

b1616c40 · John · c363831d · b1616c40 · b1616c40 · b1616c40
Commit b1616c40 authored Aug 23, 2018 by John
Hide whitespace changes
Inline Side-by-side

Showing with 64 additions and 29 deletions

checkit.html checkit.html +56 -21

colors.json colors.json +4 -6

img2.jpg img2.jpg +0 -0

smalltest.jpg smalltest.jpg +0 -0

main.rs src/main.rs +4 -2

No files found.
--- a/checkit.html
+++ b/checkit.html
@@ -17,29 +17,64 @@
    <script>

    var colors = []
-    $.getJSON( "./colors.json",function( data ){
-          console.log(data);
-          for (var i = 0; i < data.length; i++) {
-            colors.push(data[i]);
-          }
+
+    function palette(){
+      console.log("palette");
+      var $myCanvas = $('#myCanvas');
+
+      for (var i = 0; i < colors.length; i++) {
+        $myCanvas.drawRect({
+          fillStyle: colors[i],
+          strokeStyle: 'black',
+          strokeWidth: 1,
+          x: (i*100)+200, y: 100,
+          fromCenter: false,
+          width: 100,
+          height: 100
        });

+      }
+    }
+
    function draw(){
-      console.log("Drawing");
-      
-        // console.log(json);
-        var $myCanvas = $('#myCanvas');
-        for (var i = 0; i < colors.length; i++) {
-          $myCanvas.drawRect({
-            fillStyle: "#"+colors[i],
-            strokeStyle: 'blue',
-            strokeWidth: 0,
-            x: (i*100)+200, y: 200,
-            fromCenter: false,
-            width: 100,
-            height: 100
-          });
-        }
+      colors = [];
+
+      $.ajax({ 
+        dataType: "json",
+        url: "colors.json",
+        mimeType: "application/json",
+        success:function( data ){
+          var img = new Image();
+          img.onload = function(){
+            var height = img.height;
+            var width = img.width;
+            var xpos = 0
+            if(width/2 < 50*data.colors.length/2){
+              xpos = ((width/2) + 200) + (50*data.colors.length/2)
+            }else{
+              xpos = ((width/2) + 200) - (50*data.colors.length/2)
+            }
+            
+            var $myCanvas = $('#myCanvas');
+            $myCanvas.drawImage({
+              source: img,
+              x: xpos , y: (img.height/2)+200,
+              load: palette
+            });
+            // code here to use the dimensions
+          }
+
+          img.src = data.image;
+          
+          
+          
+          console.log(data);
+          for (var i = 0; i < data.colors.length; i++) {
+            colors.push(data.colors[i]);
+          }
+          }});
+          palette();
+
    }
    $("document").ready(draw());
    </script>
@@ -47,7 +82,7 @@

 </head>
 <body>
-<canvas id="myCanvas" width="1000" height="1000">
+<canvas id="myCanvas" width="2000" height="5000" onclick="draw()">

 </canvas>
 </body>

--- a/colors.json
+++ b/colors.json
-["6b97c1",
-  "a3b5d2",
-  "2c2c3e",
-  "435c7f",
-  "517da7"
-]
\ No newline at end of file
+{
+  "image":"img.jpg",
+  "colors":["#6795c0", "#a4b5d3", "#282434", "#485471", "#4774a0"]
+}
\ No newline at end of file
--- a/img2.jpg
+++ b/img2.jpg
--- a/smalltest.jpg
+++ b/smalltest.jpg
--- a/src/main.rs
+++ b/src/main.rs
@@ -44,7 +44,9 @@ fn resize_image(img:&DynamicImage, maxpix: f64) -> DynamicImage{

 fn main() {
    let maxpix = 100000.0;
-    let orig_img = image::open("img.jpg").unwrap();
+    let clusters:usize = 5;
+
+    let orig_img = image::open("img2.jpg").unwrap();
    let orig_dimensions = orig_img.dimensions();
    let mut img = orig_img;

@@ -65,7 +67,7 @@ fn main() {
    println!("{:?} Total Pixels",(dimensions.0*dimensions.1) as usize);

    let a = Matrix::new((dimensions.0*dimensions.1) as usize,3,pixel_data);
-    let mut model = KMeansClassifier::new(5);
+    let mut model = KMeansClassifier::new(clusters);
    model.train(&a).unwrap();

    println!("{:?}",model);