Improved commander hints.

This commit is contained in:
Devine Lu Linvega 2016-11-16 15:51:30 -08:00
parent e85193041d
commit 0cf12bc718
24 changed files with 184 additions and 110 deletions

View File

@ -83,6 +83,8 @@ $ ! ; Clear temporary storage
0..5 ; random: 0.0-5.0 0..5 ; random: 0.0-5.0
45' ; degree: 45/365 45' ; degree: 45/365
rate:10 ; variable: rate = 10 rate:10 ; variable: rate = 10
"foo" ; string: foo
{40w} ; dynamic: 120px, 40% canvas width
``` ```
#Presets #Presets

View File

@ -1,26 +1,32 @@
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="links/main.css"/> <script type="text/javascript" src="scripts/unit.js"></script>
<script type="text/javascript" src="scripts/units/rect.js"></script>
<script type="text/javascript" src="scripts/units/color.js"></script>
<script type="text/javascript" src="scripts/units/position.js"></script>
<script type="text/javascript" src="scripts/units/bang.js"></script>
<script type="text/javascript" src="scripts/units/angle.js"></script>
<script type="text/javascript" src="scripts/units/value.js"></script>
<script type="text/javascript" src="scripts/units/filepath.js"></script>
<script type="text/javascript" src="scripts/units/any.js"></script>
<script type="text/javascript" src="scripts/unit.rect.js"></script> <script type="text/javascript" src="scripts/module.js"></script>
<script type="text/javascript" src="scripts/unit.color.js"></script> <script type="text/javascript" src="scripts/modules/canvas.js"></script>
<script type="text/javascript" src="scripts/unit.position.js"></script> <script type="text/javascript" src="scripts/modules/filter.js"></script>
<script type="text/javascript" src="scripts/unit.command.js"></script> <script type="text/javascript" src="scripts/modules/stroke.js"></script>
<script type="text/javascript" src="scripts/modules/vector.js"></script>
<script type="text/javascript" src="scripts/ronin.module.js"></script> <script type="text/javascript" src="scripts/modules/overlay.js"></script>
<script type="text/javascript" src="scripts/ronin.canvas.js"></script> <script type="text/javascript" src="scripts/modules/brush.js"></script>
<script type="text/javascript" src="scripts/ronin.filter.js"></script> <script type="text/javascript" src="scripts/modules/brush.pointer.js"></script>
<script type="text/javascript" src="scripts/ronin.stroke.js"></script> <script type="text/javascript" src="scripts/modules/file.js"></script>
<script type="text/javascript" src="scripts/ronin.vector.js"></script> <script type="text/javascript" src="scripts/modules/hint.js"></script>
<script type="text/javascript" src="scripts/ronin.overlay.js"></script>
<script type="text/javascript" src="scripts/ronin.brush.js"></script>
<script type="text/javascript" src="scripts/ronin.brush.pointer.js"></script>
<script type="text/javascript" src="scripts/ronin.file.js"></script>
<script type="text/javascript" src="scripts/ronin.hint.js"></script>
<script type="text/javascript" src="scripts/keyboard.js"></script> <script type="text/javascript" src="scripts/keyboard.js"></script>
<script type="text/javascript" src="scripts/command.js"></script>
<script type="text/javascript" src="scripts/commander.js"></script> <script type="text/javascript" src="scripts/commander.js"></script>
<script type="text/javascript" src="scripts/ronin.js"></script> <script type="text/javascript" src="scripts/ronin.js"></script>
<link rel="stylesheet" type="text/css" href="links/main.css"/>
</head> </head>
<body> <body>
<div id='ronin'> <div id='ronin'>

View File

@ -5,9 +5,16 @@ canvas:hover { cursor: crosshair;}
#overlay { position:fixed; z-index:1000;} #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.visible { display:block; }
#commander.hidden { display:none; } #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;} #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:"";}

View File

@ -2,6 +2,12 @@ function Command(content)
{ {
this.content = content; this.content = content;
this.any = function()
{
if(this.content.join() === ""){ return null; }
return new Any(this.content);
}
this.rect = function() this.rect = function()
{ {
for (i = 0; i < this.content.length; i++) { for (i = 0; i < this.content.length; i++) {
@ -26,10 +32,10 @@ function Command(content)
return null; return null;
} }
this.path = function() this.filepath = function()
{ {
for (i = 0; i < this.content.length; i++) { 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; return null;
} }
@ -38,15 +44,15 @@ function Command(content)
{ {
for (i = 0; i < this.content.length; i++) { for (i = 0; i < this.content.length; i++) {
var test = /[^$\-\d]/.test(this.content[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; return null;
} }
this.random = function() this.range = function()
{ {
for (i = 0; i < this.content.length; i++) { 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; return null;
} }
@ -54,7 +60,7 @@ function Command(content)
this.bang = function() this.bang = function()
{ {
for (i = 0; i < this.content.length; i++) { 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; return null;
} }
@ -62,7 +68,7 @@ function Command(content)
this.angle = function() this.angle = function()
{ {
for (i = 0; i < this.content.length; i++) { 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; return null;
} }
@ -70,7 +76,7 @@ function Command(content)
this.variable = function(name) this.variable = function(name)
{ {
for (i = 0; i < this.content.length; i++) { 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; return null;
} }

View File

@ -1,5 +1,7 @@
function Module() function Module()
{ {
this.parameters = [];
this.active = function(cmd) this.active = function(cmd)
{ {
console.log("Nothing to do."); console.log("Nothing to do.");

View File

@ -2,6 +2,7 @@ function Brush()
{ {
Module.call(this); Module.call(this);
this.parameters = [Position,Rect,Angle,Color,Value,Bang];
this.pointers = [new Pointer(new Position())]; this.pointers = [new Pointer(new Position())];
this.position = new Position(); this.position = new Position();
@ -38,7 +39,7 @@ function Brush()
this.color = cmd.color(); this.color = cmd.color();
} }
if(cmd.value()){ 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.add_pointer = function(pointer)
{ {
this.pointers.push(pointer); this.pointers.push(pointer);

View File

@ -51,7 +51,7 @@ function Pointer(offset = new Position(), color = new Color('000000'))
this.position = function() this.position = function()
{ {
if(this.angle){ 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 deltaX = ronin.brush.position.x - this.offset.x;
var deltaY = ronin.brush.position.y - this.offset.y; var deltaY = ronin.brush.position.y - this.offset.y;
var t = Math.atan2(deltaY, deltaX) + angle_radian; var t = Math.atan2(deltaY, deltaX) + angle_radian;

View File

@ -1,7 +1,8 @@
function Canvas(element) function Canvas(element)
{ {
Module.call(this); Module.call(this);
this.parameters = [Rect,Color,Bang];
this.element = element; this.element = element;
this.active = function(cmd) 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) this.resize = function(rect)

View File

@ -2,6 +2,7 @@ function File()
{ {
Module.call(this); Module.call(this);
this.parameters = [Filepath,Position,Rect,Bang];
this.storage = []; this.storage = [];
this.active = function(cmd) this.active = function(cmd)
@ -10,12 +11,12 @@ function File()
ronin.overlay.clear(); ronin.overlay.clear();
if(!cmd.path() && !cmd.value()){ return; } if(!cmd.filepath() && !cmd.value()){ return; }
var position = cmd.position() ? cmd.position() : new Position(); var position = cmd.position() ? cmd.position() : new Position();
base_image = new Image(); 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.src += '?' + new Date().getTime();
base_image.crossOrigin = "Anonymous"; base_image.crossOrigin = "Anonymous";
@ -37,7 +38,7 @@ function File()
this.passive = function(cmd) this.passive = function(cmd)
{ {
if(!cmd.path() && !cmd.value()){ return; } if(!cmd.filepath() && !cmd.value()){ return; }
var position = cmd.position() ? cmd.position() : new Position(); 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) this.save = function(cmd)
{ {
if(cmd.value() > 0){ if(cmd.value() && cmd.value().int > 0){
this.storage[cmd.value()] = ronin.canvas.element.toDataURL("image/png"); this.storage[cmd.value().int] = ronin.canvas.element.toDataURL("image/png");
} }
else{ else{
var d = ronin.canvas.element.toDataURL("image/png"); var d = ronin.canvas.element.toDataURL("image/png");

View File

@ -2,6 +2,8 @@ function Filter(element)
{ {
Module.call(this); Module.call(this);
this.parameters = [Text,Value];
this.active = function(cmd) this.active = function(cmd)
{ {
if(cmd.content.length < 1){ return; } if(cmd.content.length < 1){ return; }
@ -21,11 +23,6 @@ function Filter(element)
{ {
} }
this.hint = function(cmd)
{
return "Filter: ";
}
// Filters // Filters
this.filter_saturation = function(pixels = this.pixels(),p = null) this.filter_saturation = function(pixels = this.pixels(),p = null)

32
scripts/modules/hint.js Normal file
View File

@ -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 = "<span class='module'>"+module.constructor.name+"</span>";
var e = 0;
while(e < 10){
if(!module.parameters[e]){ break; }
var param_name = module.parameters[e].name;
s += cmd[param_name.toLowerCase()]() ? "<span class='value'>"+cmd[param_name.toLowerCase()]().render()+"</span>" : "<span class='param'>"+param_name+"</span>";
e += 1;
}
return s;
}
}

View File

@ -16,16 +16,6 @@ function Overlay(element)
if(cmd.bang()){ this.guides = []; } 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 // draw
this.draw = function(position,rect) this.draw = function(position,rect)

View File

@ -2,6 +2,8 @@ function Stroke(element)
{ {
Module.call(this); Module.call(this);
this.parameters = [Any];
// Module // Module
this.passive = function(cmd) this.passive = function(cmd)
@ -29,8 +31,4 @@ function Stroke(element)
ronin.brush.is_drawing = false; ronin.brush.is_drawing = false;
} }
this.hint = function(cmd)
{
}
} }

View File

@ -2,6 +2,8 @@ function Vector()
{ {
Module.call(this); Module.call(this);
this.parameters = [Any,Position];
// Module // Module
this.passive = function(cmd) this.passive = function(cmd)
@ -22,16 +24,11 @@ function Vector()
ronin.canvas.context().stroke(new Path2D(cmd.content.join(" "))); 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 // + 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 // 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 // @ 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 // @ 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
} }

View File

@ -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";
}
}
}

7
scripts/unit.js Normal file
View File

@ -0,0 +1,7 @@
function Unit()
{
this.render = function()
{
return "HEY!";
}
}

11
scripts/units/angle.js Normal file
View File

@ -0,0 +1,11 @@
function Angle(angle_str)
{
Unit.call(this);
this.degrees = parseFloat(angle_str.replace('\'',''));
this.render = function()
{
return this.degrees+"'";
}
}

11
scripts/units/any.js Normal file
View File

@ -0,0 +1,11 @@
function Any(str)
{
Unit.call(this);
this.string = str;
this.render = function()
{
return this.string;
}
}

9
scripts/units/bang.js Normal file
View File

@ -0,0 +1,9 @@
function Bang()
{
Unit.call(this);
this.render = function()
{
return "BANG";
}
}

View File

@ -1,5 +1,7 @@
function Color(hex = '#000000') function Color(hex = '#000000')
{ {
Unit.call(this);
this.hex = hex; this.hex = hex;
this.rgb = function() this.rgb = function()
@ -16,4 +18,9 @@ function Color(hex = '#000000')
{ {
return "rgba("+this.rgb().r+","+this.rgb().g+","+this.rgb().b+",1)"; return "rgba("+this.rgb().r+","+this.rgb().g+","+this.rgb().b+",1)";
} }
this.render = function()
{
return this.hex;
}
} }

11
scripts/units/filepath.js Normal file
View File

@ -0,0 +1,11 @@
function Filepath(path_str)
{
Unit.call(this);
this.path = path_str;
this.render = function()
{
return this.path;
}
}

View File

@ -1,5 +1,7 @@
function Position(position_str = "0,0",y = null) function Position(position_str = "0,0",y = null)
{ {
Unit.call(this);
this.position_str = position_str; this.position_str = position_str;
this.x = y ? position_str : parseFloat(this.position_str.split(",")[0]); 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.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);
}
} }

View File

@ -1,7 +1,14 @@
function Rect(rect_str) function Rect(rect_str)
{ {
Unit.call(this);
this.rect_str = rect_str; this.rect_str = rect_str;
this.width = parseFloat(this.rect_str.split("x")[0]); this.width = parseFloat(this.rect_str.split("x")[0]);
this.height = parseFloat(this.rect_str.split("x")[1]); 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);
}
} }

13
scripts/units/value.js Normal file
View File

@ -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;
}
}