From 0cf12bc718ff4b46637b44b6113e065f923f5a01 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 16 Nov 2016 15:51:30 -0800 Subject: [PATCH] Improved commander hints. --- README.md | 2 + index.html | 38 +++++++++++-------- links/main.css | 13 +++++-- scripts/{unit.command.js => command.js} | 22 +++++++---- scripts/{ronin.module.js => module.js} | 2 + scripts/{ronin.brush.js => modules/brush.js} | 16 +------- .../brush.pointer.js} | 2 +- .../{ronin.canvas.js => modules/canvas.js} | 13 +------ scripts/{ronin.file.js => modules/file.js} | 20 +++------- .../{ronin.filter.js => modules/filter.js} | 7 +--- scripts/modules/hint.js | 32 ++++++++++++++++ .../{ronin.overlay.js => modules/overlay.js} | 10 ----- .../{ronin.stroke.js => modules/stroke.js} | 6 +-- .../{ronin.vector.js => modules/vector.js} | 11 ++---- scripts/ronin.hint.js | 17 --------- scripts/unit.js | 7 ++++ scripts/units/angle.js | 11 ++++++ scripts/units/any.js | 11 ++++++ scripts/units/bang.js | 9 +++++ scripts/{unit.color.js => units/color.js} | 7 ++++ scripts/units/filepath.js | 11 ++++++ .../{unit.position.js => units/position.js} | 7 ++++ scripts/{unit.rect.js => units/rect.js} | 7 ++++ scripts/units/value.js | 13 +++++++ 24 files changed, 184 insertions(+), 110 deletions(-) rename scripts/{unit.command.js => command.js} (66%) rename scripts/{ronin.module.js => module.js} (89%) rename scripts/{ronin.brush.js => modules/brush.js} (75%) rename scripts/{ronin.brush.pointer.js => modules/brush.pointer.js} (97%) rename scripts/{ronin.canvas.js => modules/canvas.js} (74%) rename scripts/{ronin.file.js => modules/file.js} (70%) rename scripts/{ronin.filter.js => modules/filter.js} (94%) create mode 100644 scripts/modules/hint.js rename scripts/{ronin.overlay.js => modules/overlay.js} (90%) rename scripts/{ronin.stroke.js => modules/stroke.js} (93%) rename scripts/{ronin.vector.js => modules/vector.js} (95%) delete mode 100644 scripts/ronin.hint.js create mode 100644 scripts/unit.js create mode 100644 scripts/units/angle.js create mode 100644 scripts/units/any.js create mode 100644 scripts/units/bang.js rename scripts/{unit.color.js => units/color.js} (83%) create mode 100644 scripts/units/filepath.js rename scripts/{unit.position.js => units/position.js} (85%) rename scripts/{unit.rect.js => units/rect.js} (52%) create mode 100644 scripts/units/value.js diff --git a/README.md b/README.md index acccc91..b56edd5 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,8 @@ $ ! ; Clear temporary storage 0..5 ; random: 0.0-5.0 45' ; degree: 45/365 rate:10 ; variable: rate = 10 +"foo" ; string: foo +{40w} ; dynamic: 120px, 40% canvas width ``` #Presets diff --git a/index.html b/index.html index 63f3508..d0c950c 100644 --- a/index.html +++ b/index.html @@ -1,26 +1,32 @@ - + + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + + + + + + +
diff --git a/links/main.css b/links/main.css index fea6a2e..76ddfe1 100644 --- a/links/main.css +++ b/links/main.css @@ -5,9 +5,16 @@ canvas:hover { cursor: crosshair;} #overlay { position:fixed; z-index:1000;} -#commander { display:none; z-index: 2000; } +#commander { display:none; z-index: 2000; position:fixed; } #commander.visible { display:block; } #commander.hidden { display:none; } -#commander input { background:black; padding:15px; position:fixed; bottom:0; color:white; font-size:14px; left:0; border:0; width:calc(100vw); font-family:courier; cursor:pointer; display:block;} +#commander input { background:black; padding:5px 15px; position:fixed; bottom:0; color:white; font-size:14px; left:0; border:0; width:calc(100vw); font-family:courier; cursor:pointer; display:block;} -#commander_hint { background: black;position: absolute;bottom: 47px;padding: 15px 15px 0 15px;line-height: 17px;font-family: courier;font-size: 14px;width: 100vw;color: #999;} \ No newline at end of file +#commander_hint { background: black;position: fixed;bottom: 27px;padding: 5px 15px 0 15px;line-height: 17px;font-family: courier;font-size: 14px;width: 100vw;color: #999;} +#commander_hint .module { color:#ffffff; display:inline-block; margin-right:10px;} +#commander_hint .param { font-style: italic;} +#commander_hint .param:after { content:", "; } +#commander_hint .param:last-child:after { content:"";} +#commander_hint .value { color:#ff0000;} +#commander_hint .value:after { content:", "; color:#999; } +#commander_hint .value:last-child:after { content:"";} \ No newline at end of file diff --git a/scripts/unit.command.js b/scripts/command.js similarity index 66% rename from scripts/unit.command.js rename to scripts/command.js index 6c1b2f2..8dbebcb 100644 --- a/scripts/unit.command.js +++ b/scripts/command.js @@ -2,6 +2,12 @@ function Command(content) { this.content = content; + this.any = function() + { + if(this.content.join() === ""){ return null; } + return new Any(this.content); + } + this.rect = function() { for (i = 0; i < this.content.length; i++) { @@ -26,10 +32,10 @@ function Command(content) return null; } - this.path = function() + this.filepath = function() { for (i = 0; i < this.content.length; i++) { - if(this.content[i].indexOf("/") >= 0){ return this.content[i]; } + if(this.content[i].indexOf("/") >= 0){ return new Filepath(this.content[i]); } } return null; } @@ -38,15 +44,15 @@ function Command(content) { for (i = 0; i < this.content.length; i++) { var test = /[^$\-\d]/.test(this.content[i]); - if(!test){ return parseFloat(this.content[i]); } + if(!test && this.content[i] !== ""){ return new Value(this.content[i]); } } return null; } - this.random = function() + this.range = function() { for (i = 0; i < this.content.length; i++) { - if(this.content[i].indexOf("..") >= 0){ (Math.random() * this.content[i].split("..")[1]) + this.content[i].split("..")[0]; } + if(this.content[i].indexOf("..") >= 0){ return new Range(this.content[i]); } } return null; } @@ -54,7 +60,7 @@ function Command(content) this.bang = function() { for (i = 0; i < this.content.length; i++) { - if(this.content[i].indexOf("!") >= 0){ return true; } + if(this.content[i].indexOf("!") >= 0){ return new Bang(); } } return null; } @@ -62,7 +68,7 @@ function Command(content) this.angle = function() { for (i = 0; i < this.content.length; i++) { - if(this.content[i].indexOf("'") >= 0){ return parseFloat(this.content[i].replace('\'','')); } + if(this.content[i].indexOf("'") >= 0){ return new Angle(this.content[i]); } } return null; } @@ -70,7 +76,7 @@ function Command(content) this.variable = function(name) { for (i = 0; i < this.content.length; i++) { - if(this.content[i].indexOf(name+":") >= 0){ return this.content[i].split(":")[1]; } + if(this.content[i].indexOf(name+":") >= 0){ return Variable(this.content[i]); } } return null; } diff --git a/scripts/ronin.module.js b/scripts/module.js similarity index 89% rename from scripts/ronin.module.js rename to scripts/module.js index 41e092f..d9b3496 100644 --- a/scripts/ronin.module.js +++ b/scripts/module.js @@ -1,5 +1,7 @@ function Module() { + this.parameters = []; + this.active = function(cmd) { console.log("Nothing to do."); diff --git a/scripts/ronin.brush.js b/scripts/modules/brush.js similarity index 75% rename from scripts/ronin.brush.js rename to scripts/modules/brush.js index e1065c4..43d6646 100644 --- a/scripts/ronin.brush.js +++ b/scripts/modules/brush.js @@ -2,6 +2,7 @@ function Brush() { Module.call(this); + this.parameters = [Position,Rect,Angle,Color,Value,Bang]; this.pointers = [new Pointer(new Position())]; this.position = new Position(); @@ -38,7 +39,7 @@ function Brush() this.color = cmd.color(); } if(cmd.value()){ - this.size = cmd.value(); + this.size = cmd.value().float; } } @@ -55,19 +56,6 @@ function Brush() } } - this.hint = function(cmd) - { - if(cmd.bang()){ return "Brush: Erase all pointers"; } - - var hint_value = (cmd.value() ? "Size "+cmd.value()+" " : ""); - var hint_position = (cmd.position() ? "Position "+cmd.position().x+","+cmd.position().y+" " : ""); - var hint_color = (cmd.color() ? "Color "+cmd.color().hex+" " : ""); - var hint_rect = (cmd.rect() ? "Mirror "+cmd.rect().width+"/"+cmd.rect().height+" " : ""); - var hint_random = (cmd.random() ? "Random 0.."+cmd.random()+" " : ""); - - return "Brush: "+hint_value+hint_position+hint_color+hint_rect+hint_random; - } - this.add_pointer = function(pointer) { this.pointers.push(pointer); diff --git a/scripts/ronin.brush.pointer.js b/scripts/modules/brush.pointer.js similarity index 97% rename from scripts/ronin.brush.pointer.js rename to scripts/modules/brush.pointer.js index 494eae8..bb1302b 100644 --- a/scripts/ronin.brush.pointer.js +++ b/scripts/modules/brush.pointer.js @@ -51,7 +51,7 @@ function Pointer(offset = new Position(), color = new Color('000000')) this.position = function() { if(this.angle){ - var angle_radian = this.angle * Math.PI / 180; + var angle_radian = this.angle.degrees * Math.PI / 180; var deltaX = ronin.brush.position.x - this.offset.x; var deltaY = ronin.brush.position.y - this.offset.y; var t = Math.atan2(deltaY, deltaX) + angle_radian; diff --git a/scripts/ronin.canvas.js b/scripts/modules/canvas.js similarity index 74% rename from scripts/ronin.canvas.js rename to scripts/modules/canvas.js index 3ba07d0..de5d546 100644 --- a/scripts/ronin.canvas.js +++ b/scripts/modules/canvas.js @@ -1,7 +1,8 @@ function Canvas(element) { Module.call(this); - + + this.parameters = [Rect,Color,Bang]; this.element = element; this.active = function(cmd) @@ -28,16 +29,6 @@ function Canvas(element) } } - this.hint = function(cmd) - { - if(cmd.bang()){ return "Canvas: Clear"; } - - var hint_rect = (cmd.rect() ? "Resize to "+cmd.rect().width+"px by "+cmd.rect().height+"px " : ""); - var hint_color = (cmd.color() ? "Fill with color "+cmd.color().hex+" " : ""); - - return "Canvas: "+hint_rect+hint_color; - } - // this.resize = function(rect) diff --git a/scripts/ronin.file.js b/scripts/modules/file.js similarity index 70% rename from scripts/ronin.file.js rename to scripts/modules/file.js index c9583f6..6eea27d 100644 --- a/scripts/ronin.file.js +++ b/scripts/modules/file.js @@ -2,6 +2,7 @@ function File() { Module.call(this); + this.parameters = [Filepath,Position,Rect,Bang]; this.storage = []; this.active = function(cmd) @@ -10,12 +11,12 @@ function File() ronin.overlay.clear(); - if(!cmd.path() && !cmd.value()){ return; } + if(!cmd.filepath() && !cmd.value()){ return; } var position = cmd.position() ? cmd.position() : new Position(); base_image = new Image(); - base_image.src = cmd.value() && this.storage[cmd.value()] ? this.storage[cmd.value()] : cmd.path(); + base_image.src = cmd.value() && this.storage[cmd.value().int] ? this.storage[cmd.value().int] : cmd.filepath().path; base_image.src += '?' + new Date().getTime(); base_image.crossOrigin = "Anonymous"; @@ -37,7 +38,7 @@ function File() this.passive = function(cmd) { - if(!cmd.path() && !cmd.value()){ return; } + if(!cmd.filepath() && !cmd.value()){ return; } var position = cmd.position() ? cmd.position() : new Position(); @@ -49,19 +50,10 @@ function File() } } - this.hint = function(cmd) - { - var hint_path = (cmd.path() ? "Path "+cmd.path()+" " : ""); - var hint_position = (cmd.position() ? "Position "+cmd.position().x+","+cmd.position().y+" " : ""); - var hint_rect = (cmd.rect() ? "Size "+cmd.rect().width+" by "+cmd.rect().height+" " : ""); - - return "File: "+hint_path+hint_position+hint_rect; - } - this.save = function(cmd) { - if(cmd.value() > 0){ - this.storage[cmd.value()] = ronin.canvas.element.toDataURL("image/png"); + if(cmd.value() && cmd.value().int > 0){ + this.storage[cmd.value().int] = ronin.canvas.element.toDataURL("image/png"); } else{ var d = ronin.canvas.element.toDataURL("image/png"); diff --git a/scripts/ronin.filter.js b/scripts/modules/filter.js similarity index 94% rename from scripts/ronin.filter.js rename to scripts/modules/filter.js index 086928c..a462655 100644 --- a/scripts/ronin.filter.js +++ b/scripts/modules/filter.js @@ -2,6 +2,8 @@ function Filter(element) { Module.call(this); + this.parameters = [Text,Value]; + this.active = function(cmd) { if(cmd.content.length < 1){ return; } @@ -21,11 +23,6 @@ function Filter(element) { } - this.hint = function(cmd) - { - return "Filter: "; - } - // Filters this.filter_saturation = function(pixels = this.pixels(),p = null) diff --git a/scripts/modules/hint.js b/scripts/modules/hint.js new file mode 100644 index 0000000..13be6eb --- /dev/null +++ b/scripts/modules/hint.js @@ -0,0 +1,32 @@ +function Hint(element) +{ + Module.call(this); + + this.element = element; + + this.update = function() + { + if(ronin.module){ + this.element.innerHTML = this.message(ronin.module,commander.cmd); + this.element.style.display = "block"; + } + else{ + this.element.style.display = "none"; + } + } + + this.message = function(module,cmd) + { + var s = ""+module.constructor.name+""; + + var e = 0; + while(e < 10){ + if(!module.parameters[e]){ break; } + var param_name = module.parameters[e].name; + s += cmd[param_name.toLowerCase()]() ? ""+cmd[param_name.toLowerCase()]().render()+"" : ""+param_name+""; + e += 1; + } + + return s; + } +} \ No newline at end of file diff --git a/scripts/ronin.overlay.js b/scripts/modules/overlay.js similarity index 90% rename from scripts/ronin.overlay.js rename to scripts/modules/overlay.js index 0a562d8..f3f02f4 100644 --- a/scripts/ronin.overlay.js +++ b/scripts/modules/overlay.js @@ -16,16 +16,6 @@ function Overlay(element) if(cmd.bang()){ this.guides = []; } } - this.hint = function(cmd) - { - if(cmd.bang()){ return "Overlay: Erase all guides"; } - - var hint_position = (cmd.position() ? "Position "+cmd.position().x+","+cmd.position().y+" " : ""); - var hint_rect = (cmd.rect() ? "Size "+cmd.rect().width+"px by "+cmd.rect().height+"px " : ""); - - return "Overlay: "+hint_position+hint_rect; - } - // draw this.draw = function(position,rect) diff --git a/scripts/ronin.stroke.js b/scripts/modules/stroke.js similarity index 93% rename from scripts/ronin.stroke.js rename to scripts/modules/stroke.js index 5a9b9f4..4a87cf0 100644 --- a/scripts/ronin.stroke.js +++ b/scripts/modules/stroke.js @@ -2,6 +2,8 @@ function Stroke(element) { Module.call(this); + this.parameters = [Any]; + // Module this.passive = function(cmd) @@ -29,8 +31,4 @@ function Stroke(element) ronin.brush.is_drawing = false; } - this.hint = function(cmd) - { - } - } \ No newline at end of file diff --git a/scripts/ronin.vector.js b/scripts/modules/vector.js similarity index 95% rename from scripts/ronin.vector.js rename to scripts/modules/vector.js index 302b51e..d1912cd 100644 --- a/scripts/ronin.vector.js +++ b/scripts/modules/vector.js @@ -2,6 +2,8 @@ function Vector() { Module.call(this); + this.parameters = [Any,Position]; + // Module this.passive = function(cmd) @@ -22,16 +24,11 @@ function Vector() ronin.canvas.context().stroke(new Path2D(cmd.content.join(" "))); } - this.hint = function(cmd) - { - return "Vector: "; - } - // + M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0 ; Draw a circle // M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z - // Large + // Large 128 // @ 128x128;> 2 #ffffff;+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -25, 0 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -15, 0 a 15,15 0 1,0 30,0 a 15,15 0 1,0 -30,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;+ M 64, 64 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0;$ logo - // Icon + // Icon 128 // @ 128x128;> 4 #ffffff;+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;$ logo } \ No newline at end of file diff --git a/scripts/ronin.hint.js b/scripts/ronin.hint.js deleted file mode 100644 index 46f4e78..0000000 --- a/scripts/ronin.hint.js +++ /dev/null @@ -1,17 +0,0 @@ -function Hint(element) -{ - Module.call(this); - - this.element = element; - - this.update = function() - { - if(ronin.module){ - this.element.innerHTML = ronin.module.hint(commander.cmd); - this.element.style.display = "block"; - } - else{ - this.element.style.display = "none"; - } - } -} \ No newline at end of file diff --git a/scripts/unit.js b/scripts/unit.js new file mode 100644 index 0000000..ace87e1 --- /dev/null +++ b/scripts/unit.js @@ -0,0 +1,7 @@ +function Unit() +{ + this.render = function() + { + return "HEY!"; + } +} \ No newline at end of file diff --git a/scripts/units/angle.js b/scripts/units/angle.js new file mode 100644 index 0000000..d15345a --- /dev/null +++ b/scripts/units/angle.js @@ -0,0 +1,11 @@ +function Angle(angle_str) +{ + Unit.call(this); + + this.degrees = parseFloat(angle_str.replace('\'','')); + + this.render = function() + { + return this.degrees+"'"; + } +} \ No newline at end of file diff --git a/scripts/units/any.js b/scripts/units/any.js new file mode 100644 index 0000000..0c8725d --- /dev/null +++ b/scripts/units/any.js @@ -0,0 +1,11 @@ +function Any(str) +{ + Unit.call(this); + + this.string = str; + + this.render = function() + { + return this.string; + } +} \ No newline at end of file diff --git a/scripts/units/bang.js b/scripts/units/bang.js new file mode 100644 index 0000000..6671eae --- /dev/null +++ b/scripts/units/bang.js @@ -0,0 +1,9 @@ +function Bang() +{ + Unit.call(this); + + this.render = function() + { + return "BANG"; + } +} \ No newline at end of file diff --git a/scripts/unit.color.js b/scripts/units/color.js similarity index 83% rename from scripts/unit.color.js rename to scripts/units/color.js index 13468c9..b2fe1a1 100644 --- a/scripts/unit.color.js +++ b/scripts/units/color.js @@ -1,5 +1,7 @@ function Color(hex = '#000000') { + Unit.call(this); + this.hex = hex; this.rgb = function() @@ -16,4 +18,9 @@ function Color(hex = '#000000') { return "rgba("+this.rgb().r+","+this.rgb().g+","+this.rgb().b+",1)"; } + + this.render = function() + { + return this.hex; + } } \ No newline at end of file diff --git a/scripts/units/filepath.js b/scripts/units/filepath.js new file mode 100644 index 0000000..3aca1dc --- /dev/null +++ b/scripts/units/filepath.js @@ -0,0 +1,11 @@ +function Filepath(path_str) +{ + Unit.call(this); + + this.path = path_str; + + this.render = function() + { + return this.path; + } +} \ No newline at end of file diff --git a/scripts/unit.position.js b/scripts/units/position.js similarity index 85% rename from scripts/unit.position.js rename to scripts/units/position.js index 4912246..9cd7606 100644 --- a/scripts/unit.position.js +++ b/scripts/units/position.js @@ -1,5 +1,7 @@ function Position(position_str = "0,0",y = null) { + Unit.call(this); + this.position_str = position_str; this.x = y ? position_str : parseFloat(this.position_str.split(",")[0]); @@ -26,4 +28,9 @@ function Position(position_str = "0,0",y = null) this.y = ronin.canvas.element.height - rect.height - Math.abs(this.y); } } + + this.render = function() + { + return (isNaN(this.x) ? 0 : this.x)+","+(isNaN(this.y) ? 0 : this.y); + } } \ No newline at end of file diff --git a/scripts/unit.rect.js b/scripts/units/rect.js similarity index 52% rename from scripts/unit.rect.js rename to scripts/units/rect.js index 5357c57..27daeba 100644 --- a/scripts/unit.rect.js +++ b/scripts/units/rect.js @@ -1,7 +1,14 @@ function Rect(rect_str) { + Unit.call(this); + this.rect_str = rect_str; this.width = parseFloat(this.rect_str.split("x")[0]); this.height = parseFloat(this.rect_str.split("x")[1]); + + this.render = function() + { + return (isNaN(this.width) ? 0 : this.width)+"x"+(isNaN(this.height) ? 0 : this.height); + } } \ No newline at end of file diff --git a/scripts/units/value.js b/scripts/units/value.js new file mode 100644 index 0000000..a6b98e5 --- /dev/null +++ b/scripts/units/value.js @@ -0,0 +1,13 @@ +function Value(value_str) +{ + Unit.call(this); + + this.value = value_str; + this.float = parseFloat(this.value); + this.int = parseInt(this.value); + + this.render = function() + { + return this.value; + } +} \ No newline at end of file