Improved Ronin help
This commit is contained in:
Devine Lu Linvega
parent
369e56bfac
commit
837f60ea0a
@ -29,6 +29,7 @@
|
||||
<script type="text/javascript" src="scripts/modules/eye.js"></script>
|
||||
<script type="text/javascript" src="scripts/modules/typographe.js"></script>
|
||||
<script type="text/javascript" src="scripts/modules/render.js"></script>
|
||||
<script type="text/javascript" src="scripts/modules/preset.js"></script>
|
||||
|
||||
<script type="text/javascript" src="scripts/filters/filter.js"></script>
|
||||
<script type="text/javascript" src="scripts/filters/stencil.js"></script>
|
||||
|
||||
@ -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;}
|
||||
#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}
|
||||
1
media/graphics/logo.black.svg
Normal file
1
media/graphics/logo.black.svg
Normal file
@ -0,0 +1 @@
|
||||
<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:#000000;stroke-width: 43px;fill: none;stroke-linecap: square;"><path d="M105,240 a-45,-45 0 0,0 -45,-45 M150,240 a-90,-90 0 0,0 -90,-90 M150,60 a90,90 0 0,0 90,90 M195,60 a45,45 0 0,0 45,45 M60,105 a45,-45 0 0,0 45,-45 M240,195 a-45,45 0 0,0 -45,45"></path></svg>
|
||||
|
After Width: | Height: | Size: 421 B |
@ -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;
|
||||
|
||||
@ -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 += "<img src='media/graphics/logo.black.svg' class='logo'/>";
|
||||
html += this.view_controls();
|
||||
html += this.view_modules();
|
||||
html += this.view_filters();
|
||||
html += this.view_units();
|
||||
html += this.view_presets();
|
||||
w.document.write("<title>Help</title><style>body { font-size:11px;background:#111; color:#fff; padding:20px; overflow-x:hidden} pre { font-family:Monaco,Courier} pre div{ border-left:5px solid #222; padding-left:20px;} pre div b { text-decoration:underline; color:#999; font-weight:normal} pre div i { font-style:normal; color:#72dec2}</style><pre>"+html+"</pre>");
|
||||
this.view.innerHTML = "<div class='wrapper'>"+html+"<hr/></div>";
|
||||
|
||||
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 += "<div>Ronin is a drawing application and visual language. \nLaunch Ronin and press <b>:</b> to display the command prompt.</div>\n";
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
this.view_controls = function()
|
||||
{
|
||||
html = "Controls\n\n";
|
||||
html += "<div>";
|
||||
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 += "</div>";
|
||||
html += "\n";
|
||||
return html;
|
||||
html = "<h1>Controls</h1>";
|
||||
html += "<ul>";
|
||||
html += "<li><b>ctrl</b> Draw Overlays</li>\n";
|
||||
html += "<li><b>alt</b> Drag Surface</li>\n";
|
||||
html += "<li><b>shift</b> Erase</li>\n";
|
||||
html += "<li><b>shift+ctrl</b> Eyedrop</li>\n";
|
||||
html += "<li><b>shift+alt</b> Move Layer</li>\n";
|
||||
html += "</ul>";
|
||||
return "<div class='cat'>"+html+"</div>";
|
||||
}
|
||||
|
||||
this.view_modules = function()
|
||||
{
|
||||
html = "Modules\n\n";
|
||||
html += "<div>";
|
||||
html = "<h1>Modules</h1>";
|
||||
html += "<ul>";
|
||||
Object.keys(ronin.modules).forEach(function (key) {
|
||||
var parameters = "";
|
||||
html += pad("<i>"+key+"</i> "+ronin.modules[key].constructor.name,27);
|
||||
html += "<li><i>"+key+"</i> "+ronin.modules[key].constructor.name+" ";
|
||||
for (i = 0; i < ronin.modules[key].parameters.length; i++) {
|
||||
html += "<b>"+ronin.modules[key].parameters[i].name+"</b> ";
|
||||
}
|
||||
html += "\n";
|
||||
html += "</li>\n";
|
||||
});
|
||||
html += "</div>";
|
||||
html += "</ul>";
|
||||
html += "\n";
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
this.view_filters = function()
|
||||
{
|
||||
html = "Filters\n\n";
|
||||
html += "<div>";
|
||||
for(var filter in ronin.modules["%"].collection){
|
||||
html += pad(filter,20);
|
||||
for (i = 0; i < ronin.modules["%"].collection[filter].parameters.length; i++) {
|
||||
html += "<b>"+ronin.modules["%"].collection[filter].parameters[i].name+"</b> ";
|
||||
}
|
||||
html += "\n";
|
||||
}
|
||||
html += "</div>";
|
||||
html += "\n";
|
||||
return html
|
||||
return "<div class='cat'>"+html+"</div>";
|
||||
}
|
||||
|
||||
this.view_units = function()
|
||||
{
|
||||
html = "Units\n\n";
|
||||
html += "<div>";
|
||||
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 += "</div>";
|
||||
html = "<h1>Units</h1>\n\n";
|
||||
html += "<ul>";
|
||||
html += "<li>5 value: 5</li>\n";
|
||||
html += "<li>5,7 position: 5x 7y</li>\n";
|
||||
html += "<li>7x9 rect: 5w 7h</li>\n";
|
||||
html += "<li>#ff0000 color: red</li>\n";
|
||||
html += "<li>45' degree: 45/365</li>\n";
|
||||
html += "<li>rate=10 variable: rate=10</li>\n";
|
||||
html += "</ul>";
|
||||
html += "\n";
|
||||
return html;
|
||||
html += "<h1>Filters</h1>\n\n";
|
||||
html += "<ul>";
|
||||
for(var filter in ronin.modules["%"].collection){
|
||||
html += "<li>"+filter+" ";
|
||||
for (i = 0; i < ronin.modules["%"].collection[filter].parameters.length; i++) {
|
||||
html += "<b>"+ronin.modules["%"].collection[filter].parameters[i].name+"</b> ";
|
||||
}
|
||||
html += "</li>\n";
|
||||
}
|
||||
html += "</ul>";
|
||||
html += "\n";
|
||||
return "<div class='cat'>"+html+"</div>";
|
||||
}
|
||||
|
||||
this.view_presets = function()
|
||||
{
|
||||
html = "Presets\n\n";
|
||||
html += "<div>";
|
||||
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 = "<h1>Presets</h1>\n\n";
|
||||
for(var key in ronin.modules["-"].collection){
|
||||
html += "<h2>"+key+"</h2><ul>";
|
||||
for(var name in ronin.modules["-"].collection[key]){
|
||||
html += "<li>"+name+"</li>"
|
||||
}
|
||||
html += "</ul>\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 += "</div>";
|
||||
return html;
|
||||
return "<div class='cat'>"+html+"</div>";
|
||||
}
|
||||
|
||||
|
||||
function pad(s,length)
|
||||
{
|
||||
|
||||
52
scripts/modules/preset.js
Normal file
52
scripts/modules/preset.js
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user