dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved design

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-01-16 21:01:27 -07:00
parent 215cbfdd29
commit 8b963e6283
14 changed files with 54 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -115,5 +115,5 @@ rate=10 ; variable: rate = 10
## Templates
### Watermark
```
# 1280x800 ; / ../assets/photo.jpg 1280x 0,0 ; / assets/logo.png 60x60 20,720
# 1280x720 ; / ../assets/photo.jpg 1280x 0,0 ; / ../assets/logo.png 60x60 20,660
```

11
sources/links/main.css
View File

@ -3,13 +3,14 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
canvas:hover { cursor: crosshair;}
#ronin { width:100%; height:100%; overflow:hidden; background:#ccc; background-image:url(../media/grid_20.png); background-position: center center; }
#surface { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:#efefef; border-radius:3px;}
#ronin { width:100%; height:100%; overflow:hidden; background:#111; background-image:url(../media/graphics/grid.svg); background-position: center center; }
#surface { width:50vw; height:50vh; overflow:hidden; position:fixed; left:50%; top:50%; background:none; border-radius:3px;}
#surface .layer { position:absolute; top:0px; left:0px; width:100%; height:100%;}
#overlay { position:absolute; z-index:1000;}
#widget { color:#fff; position:absolute; font-size:10px; padding-top:10px;}
#widget .module { float:left; margin-right:10px; }
#widget .module .highlight { color:#e7fff8; }
#widget { color:#fff; position:absolute; font-size:10px; padding-top:10px; border-top:1px solid #333; background-image:url(../media/graphics/logo.svg); background-repeat:no-repeat; background-size:80px 80px; height:100px; background-position: -10px 10px}
#widget .module:first-child { margin-left:80px; }
#widget .module { float:left; margin-right:10px; margin-top:5px }
#widget .module .highlight:after { content:"_"; color:red;}
#widget .cursor { float:right; text-align: right}
#widget .layer:hover { cursor:pointer;}

0
sources/media/graphics/Icon Normal file
View File

3
sources/media/graphics/grid.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20px" height="20px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1">
<circle cx="20" cy="20" r="1" fill="#444"></circle>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 161 B

0
sources/media/grid_20.png → sources/media/graphics/grid_20.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 105 B

After

Width:  |  Height:  |  Size: 105 B

8
sources/media/graphics/logo.svg Normal file
View File

@ -0,0 +1,8 @@
<svg class="vector" width="300px" height="300px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" style="width: 300px;height: 300px;stroke: #fff;stroke-width: 45px;fill: none;stroke-linecap: square;">
<path d="M150,53 A-96,97 0 0,0 246,150"></path>
<path d="M150,246 A97,-96 0 0,0 53,150"></path>
<path d="M53,101 A-48,-48 0 0,0 101,53"></path>
<path d="M246,101 A48,-48 0 0,1 198,53"></path>
<path d="M53,198 A-48,48 0 0,1 101,246"></path>
<path d="M246,198 A48,48 0 0,0 198,246"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 526 B

10
sources/scripts/core/init.js
View File

@ -25,7 +25,7 @@ document.onkeydown = function myFunction(){ keyboard.listen_onkeydown(event); };
// Canvas
var starting_canvas = new Rect();
starting_canvas.width = window.innerWidth - 200;
starting_canvas.height = window.innerHeight - 200;
starting_canvas.height = window.innerHeight - 400;
// Clamp
@ -35,8 +35,8 @@ starting_canvas.height = parseInt(starting_canvas.height/40) * 40;
commander.query("~ "+ronin.timestamp());
commander.query("# "+starting_canvas.render());
commander.query("# layer=background");
commander.query("# #efefef");
// commander.query("# #efefef");
commander.query("# layer=main");
commander.query("> 1 0,0 #000000");
commander.query("> 1 1,0 #000000");
commander.query("> 1 0,1 #000000");
commander.query("> 1 0,0 #ff0000");
commander.query("> 1 1,0 #ff0000");
commander.query("> 1 0,1 #ff0000");

8
sources/scripts/core/ronin.js
View File

@ -33,6 +33,14 @@ function Ronin()
this.modules[this.stroke.rune] = this.stroke;
this.modules[this.vector.rune] = this.vector;
this.modules[this.help.rune] = this.help;
// Install
for(var key in this.modules){
this.modules[key].install();
}
//
this.cursors = [];

2
sources/scripts/core/widget.js
View File

@ -18,7 +18,7 @@ function Widget()
this.on_resize = function()
{
this.element.style.left = (window.innerWidth/2)-(ronin.surface.size.width/2);
this.element.style.top = (window.innerHeight/2)+(ronin.surface.size.height/2);
this.element.style.top = (window.innerHeight/2)+(ronin.surface.size.height/2)+20;
this.element.style.width = ronin.surface.size.width+"px";
this.update();

8
sources/scripts/filters/stencil.js
View File

@ -39,11 +39,11 @@ function Filter_Stencil()
this.circle(context,-w*0.4,h*0.25,w*0.05,0,0.5);
context.font = "5px Arial";
context.fillStyle = "#000000";
context.fillStyle = "#999";
context.fillText("GRID",(w*0.4)+10,10);
context.font = "5px Arial";
context.fillStyle = "#000000";
context.fillStyle = "#999";
context.fillText("GRID",(-w*0.4)-20,-10);
context.rotate(-angle*Math.PI/180);
@ -57,7 +57,7 @@ function Filter_Stencil()
context.lineTo(y1,y2);
context.lineCap="round";
context.lineWidth = 0.5;
context.strokeStyle = "#000";
context.strokeStyle = "#999";
context.stroke();
context.closePath();
}
@ -68,7 +68,7 @@ function Filter_Stencil()
context.arc(x,y,r,c1*Math.PI,c2*Math.PI);
context.lineCap="round";
context.lineWidth = 0.5;
context.strokeStyle = "#000";
context.strokeStyle = "#999";
context.stroke();
context.closePath();
}

21
sources/scripts/modules/file.save.js
View File

@ -3,19 +3,20 @@ function FileSave(rune)
Module.call(this,rune);
this.parameters = [Any];
this.variables = {"format" : "png"};
this.active = function(cmd)
{
var n = "Ronin Export";
var f = cmd.variable("format");
var d = ronin.surface.active_layer.element.toDataURL('image/png');
// // ronin.surface.layers["render"].clear();
var d = null;
if(cmd.variable("format").value == "jpg"){
var d = ronin.surface.active_layer.element.toDataURL('image/jpeg');
}
else{
var d = ronin.surface.active_layer.element.toDataURL('image/png');
}
var w = window.open('about:blank','image from canvas');
// w.document.write("hello")
w.document.write("<title>"+(n ? n : "Untitled")+"</title><body><img src='"+d+"' width='"+ronin.surface.size.width+"px' height='"+ronin.surface.size.height+"px'/></body>");
}
this.passive = function(cmd)
{
w.document.write("<title>Untitled</title><body><img src='"+d+"' width='"+ronin.surface.size.width+"px' height='"+ronin.surface.size.height+"px'/></body>");
}
}

5
sources/scripts/modules/module.js
View File

@ -7,6 +7,11 @@ function Module(rune)
this.docs = "Missing documentation.";
this.install = function()
{
console.log(this.rune);
}
this.active = function(cmd)
{
console.log("Nothing to do.");

1
sources/scripts/modules/surface.js
View File

@ -27,6 +27,7 @@ function Surface(rune)
}
if(cmd.bang() && Object.keys(ronin.surface.layers).length > 1){
// Remove element from DOM
delete this.layers[this.active_layer.name];
this.select_any_layer();
ronin.widget.update();

2
sources/scripts/modules/surface.layer.js
View File

@ -44,7 +44,7 @@ function Layer(name,host = "user")
this.widget = function()
{
return (ronin.surface.active_layer.name == this.name) ? "<span class='highlight'>- ("+this.name+")</span><br />" : "- "+this.name+"<br />";
return (ronin.surface.active_layer.name == this.name) ? "<span class='highlight'>- "+this.name+"</span><br />" : "- "+this.name+"<br />";
}
this.move_from = null;