diff --git a/README.md b/README.md index 2b7fc4c..4c2a079 100644 --- a/README.md +++ b/README.md @@ -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 ``` \ No newline at end of file diff --git a/sources/links/main.css b/sources/links/main.css index cb22a84..93f28a0 100644 --- a/sources/links/main.css +++ b/sources/links/main.css @@ -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;} diff --git "a/sources/media/graphics/Icon\r" "b/sources/media/graphics/Icon\r" new file mode 100644 index 0000000..e69de29 diff --git a/sources/media/graphics/grid.svg b/sources/media/graphics/grid.svg new file mode 100644 index 0000000..c2d6f33 --- /dev/null +++ b/sources/media/graphics/grid.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/sources/media/grid_20.png b/sources/media/graphics/grid_20.png similarity index 100% rename from sources/media/grid_20.png rename to sources/media/graphics/grid_20.png diff --git a/sources/media/graphics/logo.svg b/sources/media/graphics/logo.svg new file mode 100644 index 0000000..299703f --- /dev/null +++ b/sources/media/graphics/logo.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/sources/scripts/core/init.js b/sources/scripts/core/init.js index 4dff0ae..5c9fff0 100644 --- a/sources/scripts/core/init.js +++ b/sources/scripts/core/init.js @@ -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"); \ No newline at end of file +commander.query("> 1 0,0 #ff0000"); +commander.query("> 1 1,0 #ff0000"); +commander.query("> 1 0,1 #ff0000"); \ No newline at end of file diff --git a/sources/scripts/core/ronin.js b/sources/scripts/core/ronin.js index 35cd75b..57152eb 100644 --- a/sources/scripts/core/ronin.js +++ b/sources/scripts/core/ronin.js @@ -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 = []; diff --git a/sources/scripts/core/widget.js b/sources/scripts/core/widget.js index e01c271..bcd5c8c 100644 --- a/sources/scripts/core/widget.js +++ b/sources/scripts/core/widget.js @@ -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(); diff --git a/sources/scripts/filters/stencil.js b/sources/scripts/filters/stencil.js index d1d9d25..aaaa56e 100644 --- a/sources/scripts/filters/stencil.js +++ b/sources/scripts/filters/stencil.js @@ -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(); } diff --git a/sources/scripts/modules/file.save.js b/sources/scripts/modules/file.save.js index fee8b52..3df86ca 100644 --- a/sources/scripts/modules/file.save.js +++ b/sources/scripts/modules/file.save.js @@ -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(""+(n ? n : "Untitled")+""); - } - - this.passive = function(cmd) - { + w.document.write("Untitled"); } } \ No newline at end of file diff --git a/sources/scripts/modules/module.js b/sources/scripts/modules/module.js index defa29e..328c23d 100644 --- a/sources/scripts/modules/module.js +++ b/sources/scripts/modules/module.js @@ -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."); diff --git a/sources/scripts/modules/surface.js b/sources/scripts/modules/surface.js index 8f2455f..27389cd 100644 --- a/sources/scripts/modules/surface.js +++ b/sources/scripts/modules/surface.js @@ -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(); diff --git a/sources/scripts/modules/surface.layer.js b/sources/scripts/modules/surface.layer.js index ee2d422..69e57a7 100644 --- a/sources/scripts/modules/surface.layer.js +++ b/sources/scripts/modules/surface.layer.js @@ -44,7 +44,7 @@ function Layer(name,host = "user") this.widget = function() { - return (ronin.surface.active_layer.name == this.name) ? "- ("+this.name+")
" : "- "+this.name+"
"; + return (ronin.surface.active_layer.name == this.name) ? "- "+this.name+"
" : "- "+this.name+"
"; } this.move_from = null;