Implemented dotgrid.

sources/scripts/dotgrid.js

@@ -1,5 +1,7 @@
 function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,linecap = "round", color = "#000000")
 {
+  this.theme = new Theme();
+
   this.width = width;
   this.height = height;
   this.grid_x = grid_x;
@@ -50,7 +52,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     for (var x = this.grid_x; x >= 0; x--) {
       for (var y = this.grid_y; y >= 0; y--) {
         var marker = document.createElement("div");
-        marker.setAttribute("class",(x % this.block_x == 0 && y % this.block_y == 0 ? "marker block" : "marker"));
+        marker.setAttribute("class",(x % this.block_x == 0 && y % this.block_y == 0 ? "marker bm" : "marker bl"));
         marker.style.left = parseInt(x * this.grid_width + (this.grid_width/2)) +5;
         marker.style.top = parseInt(y * this.grid_height + (this.grid_height/2)) +5;
         this.element.appendChild(marker);
@@ -80,7 +82,7 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
 
     // Vector
     this.svg_el = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    this.svg_el.setAttribute("class","vector");
+    this.svg_el.setAttribute("class","vector fh");
     this.svg_el.setAttribute("width",this.width+"px");
     this.svg_el.setAttribute("height",this.height+"px");
     this.svg_el.setAttribute("xmlns","http://www.w3.org/2000/svg");
@@ -100,6 +102,8 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     this.mirror_el.appendChild(this.mirror_path);
 
     this.draw();
+
+    this.theme.start();
   }
 
   // Cursor
@@ -393,4 +397,34 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca
     y = parseInt(y/this.grid_height) * this.grid_height + (this.grid_height/2) +5;
     return [parseInt(x),parseInt(y)];
   }
+    
 }
+
+window.addEventListener('dragover',function(e)
+{
+  e.preventDefault();
+  e.stopPropagation();
+  e.dataTransfer.dropEffect = 'copy';
+});
+
+window.addEventListener('drop', function(e)
+{
+  e.preventDefault();
+  e.stopPropagation();
+
+  var files = e.dataTransfer.files;
+
+  for(file_id in files){
+    var file = files[file_id];
+    if(file.name.indexOf(".thm") == -1){ console.log("skipped",file); continue; }
+
+    var path = file.path;
+    var reader = new FileReader();
+    reader.onload = function(e){
+      var o = JSON.parse(e.target.result);
+      dotgrid.theme.install(o);
+    };
+    reader.readAsText(file);
+    return;
+  }
+});

sources/scripts/theme.js

@@ -0,0 +1,83 @@
+function Theme()
+{
+  this.el = document.createElement("style");
+  this.active = null;
+
+  this.collection = {};
+  this.collection.blanc = { background:"#eee",f_high:"#111",f_med:"#999",f_low:"#bbb",f_inv:"#fff",f_inv:"#000",b_high:"#000",b_med:"#999",b_low:"#ddd",b_inv:"#999",b_inv:"#72dec2" };
+
+  this.start = function()
+  {
+    document.body.appendChild(this.el);
+
+    if(localStorage.theme && is_json(localStorage.theme)){
+      console.log("Theme","Found in localStorage")
+      this.install(JSON.parse(localStorage.theme));  
+    }
+    else{
+      console.log("Theme","Creating new")
+      this.install(this.collection.blanc);
+    }
+  }
+
+  this.save = function()
+  {
+    localStorage.setItem("theme", JSON.stringify(this.active));
+    console.log("Theme","Saved");
+  }
+
+  this.load = function(theme_str)
+  {
+    if(is_json(theme_str)){
+      this.install(JSON.parse(theme_str));
+    }
+    else if(this.collection[theme_str]){
+      this.install(this.collection[theme_str]);
+    }
+    console.log("Theme","Loaded");
+  }
+
+  this.install = function(theme)
+  {
+    var html = "";
+
+    this.active = theme;
+
+    html += "body { background:"+theme.background+" !important }\n";
+    html += ".fh { color:"+theme.f_high+" !important; stroke:"+theme.f_high+" !important }\n";
+    html += ".fm { color:"+theme.f_med+" !important ; stroke:"+theme.f_med+" !important }\n";
+    html += ".fl { color:"+theme.f_low+" !important ; stroke:"+theme.f_low+" !important }\n";
+    html += ".f_inv { color:"+theme.f_inv+" !important ; stroke:"+theme.f_inv+" !important }\n";
+    html += ".f_inv { color:"+theme.f_inv+" !important ; stroke:"+theme.f_inv+" !important }\n";
+    html += ".bh { background:"+theme.b_high+" !important; fill:"+theme.b_high+" !important }\n";
+    html += ".bm { background:"+theme.b_med+" !important ; fill:"+theme.b_med+" !important }\n";
+    html += ".bl { background:"+theme.b_low+" !important ; fill:"+theme.b_low+" !important }\n";
+    html += ".b_inv { background:"+theme.b_inv+" !important ; fill:"+theme.b_inv+" !important }\n";
+
+    html += "#dotgrid #cursor { border-color:"+theme.f_med+"}\n";
+
+    html += "#dotgrid #cursor_from { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";
+    html += "#dotgrid #cursor_to { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";
+    html += "#dotgrid #cursor_end { background:"+theme.f_low+"; border-color:"+theme.f_low+"}\n";
+    
+    this.el.innerHTML = html;
+    this.save();
+  }
+
+  this.reset = function()
+  {
+    console.log("Theme","reset");
+    this.install(this.collection.blanc);
+  }
+
+  function is_json(text)
+  {
+    try{
+      JSON.parse(text);
+      return true;
+    }
+    catch (error){
+      return false;
+    }
+  }
+}