diff --git a/index.html b/index.html index c024e4f..137fcbe 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,7 @@ + diff --git a/links/main.css b/links/main.css index 3739c2e..e360ec5 100644 --- a/links/main.css +++ b/links/main.css @@ -15,7 +15,7 @@ canvas:hover { cursor: none;} #widget .module .highlight.managed { background:red; color:black; } #widget .cursor { text-align: right;margin-top: 5px;position: absolute;right:0px} #widget .layer:hover { cursor:pointer;} -#cursor { width:10px; height:10px; position:fixed;border:1px solid red; border-radius:10px; z-index:10000; pointer-events: none} +#cursor { width:10px; height:10px; position:fixed;border:1px solid red; border-radius:10px; z-index:8000; pointer-events: none} #commander { display:none; z-index: 2000; position:fixed; } #commander.visible { display:block; } @@ -34,4 +34,17 @@ canvas:hover { cursor: none;} #commander_hint .value:after { content:" "; color:#999; } #commander_hint .value:last-child:after { content:"";} #commander_hint .variable_key { color:#aaa; font-weight:bold;} -#commander_hint .variable_value { color:#aaa;} \ No newline at end of file +#commander_hint .variable_value { color:#aaa;} + +#help_view { background:white; position:fixed; top:0px; left:0px; height:100vh; width:100vw; display:none; font-size:11px; line-height:20px; z-index:9000;} +#help_view .wrapper { padding:60px } +#help_view .logo { width:90px; height:90px; display: block; margin-left:-10px; margin-bottom:40px;} +#help_view h1 { font-family:"input_mono_regular",courier,monospace; font-size:20px; margin-bottom:20px; line-height:20px;} +#help_view h2 { font-family:"input_mono_regular",courier,monospace; font-size:11px; line-height:20px; text-transform: uppercase;} +#help_view b { display: inline-block; font-family:"input_mono_regular",courier,monospace; } +#help_view a { text-decoration: underline; } +#help_view div.cat { float:left; margin-right:40px; } +#help_view div.cat ul { margin-bottom:20px; } +#help_view ul li { line-height:20px; } +#help_view a:hover { text-decoration: none; cursor: pointer } +#help_view:hover { cursor: none; pointer-events: none} \ No newline at end of file diff --git a/media/graphics/logo.black.svg b/media/graphics/logo.black.svg new file mode 100644 index 0000000..d2cc3e1 --- /dev/null +++ b/media/graphics/logo.black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scripts/core/ronin.js b/scripts/core/ronin.js index ce6c49e..0c0e50b 100644 --- a/scripts/core/ronin.js +++ b/scripts/core/ronin.js @@ -16,7 +16,7 @@ function Ronin() this.vector = new Vector("+"); this.help = new Help("?"); this.typo = new Typographe("&"); - + this.preset = new Preset("-"); this.cursor = new Cursor("."); this.modules[this.surface.rune] = this.surface; @@ -30,6 +30,7 @@ function Ronin() this.modules[this.typo.rune] = this.typo; this.modules[this.stroke.rune] = this.stroke; this.modules[this.vector.rune] = this.vector; + this.modules[this.preset.rune] = this.preset; this.modules[this.help.rune] = this.help; this.modules[this.cursor.rune] = this.cursor; diff --git a/scripts/modules/help.js b/scripts/modules/help.js index 52e26d1..77ca8a5 100644 --- a/scripts/modules/help.js +++ b/scripts/modules/help.js @@ -1,120 +1,115 @@ function Help(rune) { Module.call(this,rune); + + this.view = document.createElement("div"); - this.active = function(cmd) + this.install = function(cmd) { - var w = window.open('about:blank','image from canvas'); + console.log("Installing "+ronin.modules[this.rune].constructor.name); + + this.view.setAttribute("id","help_view"); var html = ""; - html += this.view_intro(); + html += ""; html += this.view_controls(); html += this.view_modules(); - html += this.view_filters(); html += this.view_units(); html += this.view_presets(); - w.document.write("Help
"+html+"
"); + this.view.innerHTML = "
"+html+"
"; + + ronin.element.appendChild(this.view); + } + + this.on_resize = function() + { + this.view.style.left = (window.innerWidth/2)-(ronin.surface.size.width/2); + this.view.style.top = (window.innerHeight/2)+(ronin.surface.size.height/2)+20; + } + + this.passive = function(cmd) + { + this.view.style.display = "block"; + ronin.cursor.element.style.display = "none"; + } + + this.key_escape = function() + { + this.view.style.display = "none"; } // - this.view_intro = function() - { - var html = "Ronin\n\n"; - html += "
Ronin is a drawing application and visual language. \nLaunch Ronin and press : to display the command prompt.
\n"; - - return html; - } - this.view_controls = function() { - html = "Controls\n\n"; - html += "
"; - html += pad("ctrl",20)+"Draw Overlays\n"; - html += pad("alt",20)+"Drag Surface\n"; - html += pad("shift",20)+"Erase\n"; - html += pad("shift+ctrl",20)+"Eyedrop\n"; - html += pad("shift+alt",20)+"Move Layer\n"; - html += "
"; - html += "\n"; - return html; + html = "

Controls

"; + html += ""; + return "
"+html+"
"; } this.view_modules = function() { - html = "Modules\n\n"; - html += "
"; + html = "

Modules

"; + html += "
"; + html += ""; html += "\n"; - return html; - } - - this.view_filters = function() - { - html = "Filters\n\n"; - html += "
"; - for(var filter in ronin.modules["%"].collection){ - html += pad(filter,20); - for (i = 0; i < ronin.modules["%"].collection[filter].parameters.length; i++) { - html += ""+ronin.modules["%"].collection[filter].parameters[i].name+" "; - } - html += "\n"; - } - html += "
"; - html += "\n"; - return html + return "
"+html+"
"; } this.view_units = function() { - html = "Units\n\n"; - html += "
"; - html += pad("5",20)+"value: 5\n"; - html += pad("5,7",20)+"position: 5x 7y\n"; - html += pad("7x9",20)+"rect: 5w 7h\n"; - html += pad("#ff0000",20)+"color: red\n"; - html += pad("45'",20)+"degree: 45/365\n"; - html += pad("rate=10",20)+"variable: rate=10\n"; - html += "
"; + html = "

Units

\n\n"; + html += ""; html += "\n"; - return html; + html += "

Filters

\n\n"; + html += ""; + html += "\n"; + return "
"+html+"
"; } this.view_presets = function() { - html = "Presets\n\n"; - html += "
"; - html += "Brushes\n"; - html += pad("Radial Brush(8)",20)+"> 600,400 45';> 600,400 90';> 600,400 135';> 600,400 180';> 600,400 225';> 600,400 270';> 600,400 315'\n"; - html += pad("Radial Brush(6)",20)+"> 600,400 60';> 600,400 120';> 600,400 180';> 600,400 240';> 600,400 300'\n"; - html += pad("Symmetric Brush(XY)",20)+"> 400x 3\n"; - html += pad("Angular brush",20)+"> 400x 1,1;> 400x 2,2;> 400x 3,3; > 1,1;> 2,2;> 3,3;\n"; + html = "

Presets

\n\n"; + for(var key in ronin.modules["-"].collection){ + html += "

"+key+"

\n"; + } - html += "\nGraphics\n"; - html += pad("Watermark",20)+"@ 720x405 ; / ../assets/todo.jpg 720x 0,0 ; % chromatic 5 ; / ../assets/logo.png 35x35 15,355\n"; - html += pad("Ronin Logo",20)+"+ M150,53 A-96,97 0 0,0 246,150 M150,246 A97,-96 0 0,0 53,150 M53,101 A-48,-48 0 0,0 101,53 M246,101 A48,-48 0 0,1 198,53 M53,198 A-48,48 0 0,1 101,246 M246,198 A48,48 0 0,0 198,246 stroke_width=45 line_cap=square stroke_color=black\n"; - html += pad("Circle",20)+"+ M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0\n"; - html += pad("Multiple Circles",20)+"+ 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\n"; - - html += "\nFilters\n"; - html += pad("Darken",20)+"@ 640x360 ; / ../assets/photo.jpg 640x 0,0 ; % balance #333333\n"; - html += pad("Desaturate",20)+"@ 640x360 ; / ../assets/photo.jpg 640x 0,0 ; % saturation #333333\n"; - - html += "\nCanvas\n"; - html += pad("Dot-Grid",20)+"@ 300x300; @ layer=background ; @ #A1A1A1 ; . 15x15 4,4 ; @ layer=main\n"; - html += pad("Dot-Grid Icon",20)+"@ 360x360; @ layer=background ; @ #000000 ; . 15x15 4,4 ; @ layer=main\n"; - - html += "
"; - return html; + return "
"+html+"
"; } + function pad(s,length) { diff --git a/scripts/modules/preset.js b/scripts/modules/preset.js new file mode 100644 index 0000000..2f1f851 --- /dev/null +++ b/scripts/modules/preset.js @@ -0,0 +1,52 @@ +function Preset(rune) +{ + Module.call(this,rune); + + this.collection = {}; + this.collection["grid"] = {}; + this.collection["grid"]["glyph"] = "@ 300x300; @ layer=background ; @ #A1A1A1 ; . 15x15 4,4 ; @ layer=main"; + this.collection["grid"]["icon"] = "@ 360x360; @ layer=background ; @ #000000 ; . 15x15 4,4 ; @ layer=main"; + + this.collection["watermark"] = {}; + this.collection["watermark"]["default"] = "@ 720x405 ; / ../assets/todo.jpg 720x 0,0 ; % chromatic 5 ; / ../assets/logo.png 35x35 15,355"; + + this.collection["brush"] = {}; + this.collection["brush"]["radial6"] = "> 600,400 60';> 600,400 120';> 600,400 180';> 600,400 240';> 600,400 300'"; + this.collection["brush"]["radial8"] = "> 600,400 45';> 600,400 90';> 600,400 135';> 600,400 180';> 600,400 225';> 600,400 270';> 600,400 315'"; + + this.collection["vector"] = {}; + this.collection["vector"]["ronin"] = "+ M150,53 A-96,97 0 0,0 246,150 M150,246 A97,-96 0 0,0 53,150 M53,101 A-48,-48 0 0,0 101,53 M246,101 A48,-48 0 0,1 198,53 M53,198 A-48,48 0 0,1 101,246 M246,198 A48,48 0 0,0 198,246 stroke_width=45 line_cap=square stroke_color=black"; + this.collection["vector"]["circle"] = "+ M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0"; + + this.active = function(cmd) + { + var input = cmd.content.join(" ").trim().split(" ")[0]; + var name = cmd.content.join(" ").trim().split(" ")[1]; + + if(this.collection[input] && this.collection[input][name]){ + commander.query(this.collection[input][name]); + } + } + + this.hint = function(cmd) + { + var input = cmd.content.join(" ").trim().split(" ")[0]; + var name = cmd.content.join(" ").trim().split(" ")[1]; + var s = this.pad(cmd.content.join(" ")); + + if(this.collection[input] && this.collection[input][name]){ + s += this.collection[input][name]; + } + else if(this.collection[input]){ + for(key in this.collection[input]) { + s += key+" "; + } + } + else{ + for(key in this.collection) { + s += key+" "; + } + } + return s; + } +} \ No newline at end of file