Implemented dotgrid.
This commit is contained in:
Devine Lu Linvega
parent
6e793a9305
commit
0b1f1ab10c
2
BUILD.md
2
BUILD.md
@ -32,8 +32,10 @@ rm -r /xxiivv/Nataniev/public/public.projects/builds/Dotgrid-linux-x64/
|
||||
rm -r /xxiivv/Nataniev/public/public.projects/builds/Dotgrid-win32-x64/
|
||||
|
||||
~/butler status hundredrabbits/dotgrid
|
||||
|
||||
```
|
||||
|
||||
|
||||
### Build Linux64 / Darwin64 / Windows64(Local)
|
||||
```
|
||||
cd /Users/VillaMoirai/Desktop/
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
<script type="text/javascript" src="scripts/path_close.js"></script>
|
||||
<script type="text/javascript" src="scripts/dotgrid.js"></script>
|
||||
<script type="text/javascript" src="scripts/keyboard.js"></script>
|
||||
<script type="text/javascript" src="scripts/theme.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="links/reset.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="links/fonts.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="links/main.css"/>
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
body { background:#fff; padding:30px; font-family: 'input_mono_regular'; -webkit-user-select: none;-webkit-app-region: drag; overflow: hidden;}
|
||||
|
||||
#dotgrid { margin:0px auto; position:relative; border:0px solid white; background:white; overflow: hidden; padding:10px;-webkit-app-region: no-drag;}
|
||||
#dotgrid .marker { width:2px; height:2px; background:#ddd; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}
|
||||
#dotgrid .marker.block { background:black; }
|
||||
#dotgrid { margin:0px auto; position:relative; overflow: hidden; padding:10px;-webkit-app-region: no-drag;}
|
||||
#dotgrid .marker { width:2px; height:2px; position:absolute; margin-top:-1px; margin-left:-1px; border-radius:4px; z-index:50;}
|
||||
#dotgrid #cursor { width:8px; height:8px; margin-top:-5px; margin-left:-5px; position:absolute; z-index:25; border-radius:5px; border:1px solid black;}
|
||||
#dotgrid #cursor_from { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px;border:1px solid black;}
|
||||
#dotgrid #cursor_to { width:4px; height:4px; background:white; margin-top:-3px; margin-left:-3px; position:absolute; z-index:2500; border-radius:10px; left:-100px; border:1px solid black;}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
});
|
||||
|
||||
83
sources/scripts/theme.js
Normal file
83
sources/scripts/theme.js
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user