Improved help

This commit is contained in:
Devine Lu Linvega 2016-12-26 16:59:45 -07:00
parent fc14a2dd2a
commit 2e2c2014ce
4 changed files with 68 additions and 54 deletions

View File

@ -4,35 +4,35 @@ function Ronin()
this.element = null;
this.widget = new Widget();
this.overlay = new Overlay("|");
this.brush = new Brush(">");
this.surface = new Surface("#");
this.fileload = new FileLoad("/");
this.filesave = new FileSave("$");
this.history = new History("^");
this.overlay = new Overlay("|");
this.brush = new Brush(">");
this.eraser = new Eraser(".");
this.eye = new Eye("*");
this.filter = new Filter("%");
this.stroke = new Stroke("_");
this.vector = new Vector("+");
this.help = new Help("?");
this.history = new History("^");
this.eraser = new Eraser(".");
this.surface = new Surface("#");
this.eye = new Eye("*");
this.typo = new Typographe("&");
this.cursor = new Cursor();
this.modules[this.overlay.rune] = this.overlay;
this.modules[this.brush.rune] = this.brush;
this.modules[this.surface.rune] = this.surface;
this.modules[this.fileload.rune] = this.fileload;
this.modules[this.filesave.rune] = this.filesave;
this.modules[this.filter.rune] = this.filter;
this.modules[this.stroke.rune] = this.stroke;
this.modules[this.vector.rune] = this.vector;
this.modules[this.help.rune] = this.help;
this.modules[this.history.rune] = this.history;
this.modules[this.eraser.rune] = this.eraser;
this.modules[this.surface.rune] = this.surface;
this.modules[this.eye.rune] = this.eye;
this.modules[this.typo.rune] = this.typo;
this.modules[this.history.rune] = this.history;
this.modules[this.overlay.rune] = this.overlay;
this.modules[this.filter.rune] = this.filter;
this.modules[this.brush.rune] = this.brush;
this.modules[this.eraser.rune] = this.eraser;
this.modules[this.eye.rune] = this.eye;
this.modules[this.typo.rune] = this.typo;
this.modules[this.stroke.rune] = this.stroke;
this.modules[this.vector.rune] = this.vector;
this.modules[this.help.rune] = this.help;
this.cursors = [];

View File

@ -6,58 +6,65 @@ function Help(rune)
{
var w = window.open('about:blank','image from canvas');
var html = "";
html += this.view_intro();
html += this.view_modules();
html += this.view_cursors();
html += "<hr />"
w.document.write("<title>Help</title><style>body { font-size:11px;background:#555; color:#ccc; padding:50px} pre { width:300px; float:left} hr { clear:both}</style>"+html+"");
html += this.view_units();
html += this.view_presets();
w.document.write("<title>Help</title><style>body { font-size:11px;background:#fff; color:#000; padding:10px} pre {}</style><pre>"+html+"</pre>");
}
//
this.view_intro = function()
{
var html = "# Ronin\n## Basics\nRonin is a web based drawing application and visual language. Launch index.html and press **:**(colon) to display the command prompt. Input the commands below to interface with the different tools. \n```\n:\n```\n";
html += "### Loading/Saving\nRequires you to run Ronin through localhost. Navigate to the Ronin folder, and run the simple http server.\n";
html += "```\ncd /path/to/ronin/ ; Navigate to Ronin through the terminal\npython -m SimpleHTTPServer 8000 ; Start localhost\nhttp://localhost:8000/ ; Enjoy Ronin\n```\n";
html += "### Controls\n";
html += "```\nctrl ; Draw Overlays\nalt ; Drag Surface\nshift ; Erase\nshift+ctrl ; Eyedrop\nshift+alt ; Move Layer\n```\n";
return html;
}
this.view_modules = function()
{
html = " Modules\n\n";
html = "## Modules\n";
Object.keys(ronin.modules).forEach(function (key) {
html += key+" <b>"+ronin.modules[key].constructor.name+"</b>\n";
html += ""
html += "### "+key+" "+ronin.modules[key].constructor.name+"\n";
html += ronin.modules[key].docs+"\n";
html += "- Parameters: ";
for (i = 0; i < ronin.modules[key].parameters.length; i++) {
html += " "+pad(ronin.modules[key].parameters[i].name,14);
html += pad(new ronin.modules[key].parameters[i]().example,14)+" \n";
html += "`"+ronin.modules[key].parameters[i].name+"` ";
}
for (i = 0; i < ronin.modules[key].variables.length; i++) {
html += " "+pad(ronin.modules[key].variables[i].key,14)+"= ";
for (c = 0; c < ronin.modules[key].variables[i].candidates.length; c++) {
html += ronin.modules[key].variables[i].candidates[c]+" ";
}
html += "\n";
html += "\n";
html += "- Variables: ";
for (var key in ronin.modules[key].variables){
html += "`"+key+"` ";
}
html += "\n"
html += "\n\n";
});
return "<pre>"+html+"</pre>";
return html;
}
this.view_cursors = function()
this.view_units = function()
{
html = " Cursors\n\n";
// Object.keys(ronin.modules).forEach(function (key) {
// html += key+" <b>"+ronin.modules[key].constructor.name+"</b>\n";
// html += ""
// for (i = 0; i < ronin.modules[key].parameters.length; i++) {
// html += " "+pad(ronin.modules[key].parameters[i].name,14);
// html += pad(new ronin.modules[key].parameters[i]().example,14)+" \n";
// }
// for (i = 0; i < ronin.modules[key].variables.length; i++) {
// html += " "+pad(ronin.modules[key].variables[i].key,14)+"= ";
// for (c = 0; c < ronin.modules[key].variables[i].candidates.length; c++) {
// html += ronin.modules[key].variables[i].candidates[c]+" ";
// }
// html += "\n";
// }
// html += "\n"
// });
return "<pre>"+html+"</pre>";
html = "## Units\n";
html += "```\n5 ; value: 5\n5,7 ; position: 5x 7y\n7x9 ; rect: 7w 9h\n#ff0000 ; color: red\n0..5 ; random: 0.0-5.0\n45' ; degree: 45/365\nrate=10 ; variable: rate = 10\n```\n";
return html;
}
this.view_presets = function()
{
html = "## Presets\n";
html += "### Radial Brush\n";
html += "```\n# 8 strands\n> 600,400 45';> 600,400 90';> 600,400 135';> 600,400 180';> 600,400 225';> 600,400 270';> 600,400 315'\n# 6 strands\n> 600,400 60';> 600,400 120';> 600,400 180';> 600,400 240';> 600,400 300'\n```\n"
html += "### Symmetry Brush\n";
html += "```\n# XY\n> 400x 3\n# Angular brushes\n> 400x 1,1;> 400x 2,2;> 400x 3,3; > 1,1;> 2,2;> 3,3;\n```\n"
html += "### Angular Brush\n";
html += "```\n# Light\n> 1,1;> 2,2;> 3,3;> 4,4\n# Hard\n> 2,2;> 4,4;> 6,6;> 8,8\n# Symmetric Light\n> 1,1 600x;> 2,2 600x;> 3,3 600x;> 4,4 600x\n```\n";
return html;
}
function pad(s,length)

View File

@ -4,6 +4,8 @@ function Module(rune)
this.element = null;
this.parameters = [];
this.variables = {};
this.docs = "Missing documentation.";
this.active = function(cmd)
{

View File

@ -52,12 +52,15 @@ function Layer(name,host = "user")
this.mouse_down = function(position)
{
this.move_from = ronin.position_in_window(position);
ronin.stroke.new_stroke();
}
this.mouse_move = function(position)
{
if(this.move_from === null){ return; }
ronin.stroke.append_stroke(position); // Save to stroke
position = ronin.position_in_window(position);
var offset_x = this.move_from.x - position.x;
@ -68,10 +71,12 @@ function Layer(name,host = "user")
this.context().putImageData(imageData, -offset_x * 2, -offset_y * 2);
this.move_from = new Position(position.x,position.y);
}
this.mouse_up = function(event)
{
this.move_from = null;
ronin.stroke.save_stroke("move");
}
}