Improved hints

This commit is contained in:
Devine Lu Linvega 2016-12-25 11:12:32 -07:00
parent f83068403a
commit 22d77e185d
7 changed files with 31 additions and 150 deletions

View File

@ -55,7 +55,7 @@
<div id='widget'>Loading..</div> <div id='widget'>Loading..</div>
<div id ='commander'> <div id ='commander'>
<div id='commander_hint'></div> <div id='commander_hint'></div>
<input id='commander_input' placeholder='~'/> <input id='commander_input'/>
</div> </div>
</div> </div>
<script type="text/javascript" src="scripts/core/init.js"></script> <script type="text/javascript" src="scripts/core/init.js"></script>

View File

@ -13,16 +13,18 @@ canvas:hover { cursor: crosshair;}
#commander { display:none; z-index: 2000; position:fixed; } #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:5px 15px; position:fixed; bottom:0; color:white; font-size:12px; left:0; border:0; width:calc(100vw); cursor:pointer; display:block;} #commander input { background:none; padding:10px; position:fixed; bottom:0; color:white; font-size:11px; left:0; border:0; width:calc(100vw); cursor:pointer; display:block; color:RGBA(0,0,0,0); height:35px;}
#commander input:before { content:"input"; color:red;} #commander input:before { content:"input"; color:red;}
#commander_hint { background: black;position: fixed;bottom: 27px;padding: 5px 15px 0 15px;line-height: 17px;font-size: 10px;width: 100vw;color: #999;} #commander_hint { background: #333;position: fixed;bottom: 0px;left:0px;padding: 10px;font-size: 11px;width: calc(100vw - 20px);color: #999; height:15px;}
#commander_hint .module { color:#ffffff; display:inline-block; margin-right:10px;} #commander_hint .rune { color:#72dec2; display:inline-block; margin-right:10px;}
#commander_hint .module { color:#ccc; display:inline-block; margin-right:10px;}
#commander_hint .command { color:#fff; display:inline-block; margin-right:10px;}
#commander_hint .param { font-style: italic;} #commander_hint .param { font-style: italic;}
#commander_hint .param:after { content:", "; } #commander_hint .param:after { content:" "; }
#commander_hint .param:last-child:after { content:"";} #commander_hint .param:last-child:after { content:"";}
#commander_hint .value { color:#ff0000;} #commander_hint .value { color:#ff0000;}
#commander_hint .value:after { content:", "; color:#999; } #commander_hint .value:after { content:" "; color:#999; }
#commander_hint .value:last-child:after { content:"";} #commander_hint .value:last-child:after { content:"";}
#commander_hint .variable_key { color:#ccc; font-weight:bold;} #commander_hint .variable_key { color:#aaa; font-weight:bold;}
#commander_hint .variable_value { color:#ccc;} #commander_hint .variable_value { color:#aaa;}

View File

@ -10,6 +10,10 @@ function Hint(element)
this.element.innerHTML = this.message(module,cmd); this.element.innerHTML = this.message(module,cmd);
this.element.style.display = "block"; this.element.style.display = "block";
} }
else if(commander && commander.element_input.value != ""){
this.element.innerHTML = commander.element_input.value;
this.element.style.display = "block";
}
else{ else{
this.element.innerHTML = this.default(); this.element.innerHTML = this.default();
this.element.style.display = "block"; this.element.style.display = "block";
@ -18,31 +22,26 @@ function Hint(element)
this.message = function(module,cmd) this.message = function(module,cmd)
{ {
var s = "<span class='module'>"+module.constructor.name+"</span>"; var s = "<span class='rune'>"+module.rune+"</span><span class='module'>"+module.constructor.name+"</span>";
s += cmd.content.join("") != "" ? "<span class='command'>"+cmd.content.join(" ")+"</span>" : "";
// Params
var e = 0; var e = 0;
while(e < 10){ while(e < 10){
if(!module.parameters[e]){ break; } if(!module.parameters[e]){ break; }
var param_name = module.parameters[e].name; 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>"; s += cmd[param_name.toLowerCase()]() ? "" : "<span class='param'>"+param_name+"</span>";
e += 1; e += 1;
} }
s += " "; // Variables
if(module.variables){
s += this.print_variables(module); for (var key in module.variables){
if(cmd.variable(key)){continue;}
return s; s += "<span class='variable_key'>"+key+"</span>=<span class='variable_value'>"+module.variables[key]+"</span> ";
} }
this.print_variables = function(module)
{
if(module.variables.length < 1){ return "";}
var s = "";
for (var key in module.variables){
s += "<span class='variable_key'>"+key+"</span>=<span class='variable_value'>"+module.variables[key]+"</span> ";
} }
return s; return s;

View File

@ -54,6 +54,7 @@ function Commander(element,element_input)
{ {
this.element.setAttribute('class','visible'); this.element.setAttribute('class','visible');
this.element_input.focus(); this.element_input.focus();
this.element_input.value = "";
} }
this.always = function() { this.always = function() {

View File

@ -1,120 +0,0 @@
Searching 62 files for "canvas.con"
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/brush.pointer.js:
26 this.distance += position.distance_to(this.position_prev);
27
28: ronin.canvas.context().beginPath();
29
30: ronin.canvas.context().globalCompositeOperation="source-over";
31: ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y);
32: ronin.canvas.context().lineTo(position.x,position.y);
33: ronin.canvas.context().lineCap="round";
34: ronin.canvas.context().lineWidth = this.thickness();
35: ronin.canvas.context().strokeStyle = ronin.brush.color.rgba();
36: ronin.canvas.context().stroke();
37: ronin.canvas.context().closePath();
38
39 this.position_prev = position;
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/eraser.js:
19 this.distance += position.distance_to(this.position_prev);
20
21: ronin.canvas.context().beginPath();
22: ronin.canvas.context().globalCompositeOperation="destination-out";
23: ronin.canvas.context().moveTo(this.position_prev.x,this.position_prev.y);
24: ronin.canvas.context().lineTo(position.x,position.y);
25: ronin.canvas.context().lineCap="round";
26: ronin.canvas.context().lineWidth = 10;
27: ronin.canvas.context().strokeStyle = new Color("#ff0000").rgba();
28: ronin.canvas.context().stroke();
29: ronin.canvas.context().closePath();
30
31 this.position_prev = position;
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/eye.js:
20 this.color_picker = function(position)
21 {
22: var imgData = ronin.canvas.context().getImageData(position.x, position.y, 1, 1).data;
23 var c = new Color();
24 commander.show();
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/file.load.js:
30 height = isNaN(height) && width > 0 ? (width*base_image.naturalHeight)/base_image.naturalWidth : height;
31
32: ronin.canvas.context().drawImage(base_image, position.x, position.y, width, height);
33 }
34 }
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.balance.js:
43
44 ronin.canvas.clear();
45: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
46 }
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.chromatic.js:
35 }
36 ronin.canvas.clear();
37: ronin.canvas.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height);
38 }
39
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.eval.js:
23
24 ronin.canvas.clear();
25: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
26 console.log("done.");
27 }
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.js:
69 this.pixels = function()
70 {
71: return ronin.canvas.context().getImageData(0,0,ronin.canvas.element.width,ronin.canvas.element.height);
72 }
73 }
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.offset.js:
16 }
17 ronin.canvas.clear();
18: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
19 }
20
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/filter.saturation.js:
12 }
13 ronin.canvas.clear();
14: ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
15 }
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/stroke.js:
49 this.draw = function(pos1,pos2)
50 {
51: ronin.canvas.context().beginPath();
52: ronin.canvas.context().moveTo(pos1.x,pos1.y);
53: ronin.canvas.context().lineTo(pos2.x,pos2.y);
54: ronin.canvas.context().lineCap="round";
55: ronin.canvas.context().lineWidth = 1;
56: ronin.canvas.context().strokeStyle = new Color("#ff0000").rgba();
57: ronin.canvas.context().stroke();
58: ronin.canvas.context().closePath();
59 }
60
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/surface.layer.js:
23
24 if(!position){ position = new Position("0,0");}
25: ronin.canvas.context().drawImage(base_image, -position.x, -position.y, pixels_rect.width, pixels_rect.height);
26: ronin.canvas.context().scale(2,2);
27 }
28 }
/Users/VillaMoirai/Github/Hundred Rabbits/Ronin/scripts/modules/vector.js:
19 {
20 ronin.overlay.clear();
21: ronin.canvas.context().lineCap="round";
22: ronin.canvas.context().lineWidth = ronin.brush.size;
23: ronin.canvas.context().strokeStyle = ronin.brush.color.rgba();
24: ronin.canvas.context().stroke(new Path2D(cmd.content.join(" ")));
25 }
26
40 matches across 13 files

View File

@ -119,7 +119,7 @@ function Overlay(rune)
this.clear = function() this.clear = function()
{ {
this.context().clearRect(0, 0, ronin.canvas.element.width, ronin.canvas.element.height); this.context().clearRect(0, 0, ronin.surface.size.width, ronin.surface.size.height);
} }
// Cursor // Cursor

View File

@ -3,7 +3,8 @@ function Surface(rune)
Module.call(this,rune); Module.call(this,rune);
this.element = null; this.element = null;
this.parameters = [Rect,Color,Any]; this.parameters = [Rect,Color];
this.variables = {"layer" : "main"};
this.layers = {}; this.layers = {};
this.active_layer = null; this.active_layer = null;
@ -39,8 +40,6 @@ function Surface(rune)
this.active_layer.resize(this.size); this.active_layer.resize(this.size);
} }
} }
} }
this.passive = function(cmd) this.passive = function(cmd)