Commit 1929de08 authored by Jonathan Wilkes's avatar Jonathan Wilkes
Browse files

first attempt at properties dialog for tgl and bng

parent 7ab5f0bc
body {
margin: 0px;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#console_controls {
background-color: LightGray;
height: 50px;
}
#control_frame {
padding: 12px;
}
#printout {
margin: 8px;
}
#bottom {
position: absolute;
top: 50px;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: scroll;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<input style="display:none;" id="fileDialog" type="file" nwworkingdir multiple />
<div id="console_controls" class="noselect">
<div id="control_frame">
<label><input type="checkbox" id="dsp_control" name="dsp_control" value="on"/>Compute Audio</label>
</div>
</div>
<script>
'use strict';
var nw = require('nw.gui');
......@@ -32,7 +38,12 @@
console.log("tried to open something");
}, false);
document.getElementById("dsp_control").addEventListener("click",
function(evt) {
var dsp_state = this.checked ? 1 : 0;
pdgui.pdsend("pd dsp " + dsp_state);
}
);
// prompt("hey", "you");
......@@ -449,12 +460,13 @@ function nw_close_window(window) {
window.close(true);
}
function nw_create_window(cid, width, height, xpos, ypos, menu_flag, resize, topmost, cnv_color,
canvas_string, dir, dirty_flag, cargs) {
function nw_create_window(cid, type, width, height, xpos, ypos, menu_flag, resize, topmost, cnv_color,
canvas_string, dir, dirty_flag, cargs, attr_array) {
// todo: make a separate way to format the title for OSX
var my_title = pdgui.format_window_title(canvas_string, dirty_flag, cargs, dir);
var my_file = (type === 'pd-canvas' ? 'pdcanvas.html' : 'pdproperties.html');
var new_win = nw.Window.open('pdcanvas.html', {
var new_win = nw.Window.open(my_file, {
title: my_title,
position: "center",
toolbar: true,
......@@ -464,6 +476,14 @@ function nw_create_window(cid, width, height, xpos, ypos, menu_flag, resize, top
x: xpos,
y: ypos
});
var eval_string = "register_canvas_id('" + cid + "', [" + attr_array + "]);";
pdgui.gui_post("eval string is " + eval_string);
if (attr_array !== null) {
pdgui.gui_post("attr_array is " + attr_array.toString());
}
new_win.on("loaded", function() {
new_win.eval(null, eval_string);
});
return new_win;
}
......@@ -477,10 +497,12 @@ function canvasNew(args) {
</script>
<input style="display:none;" id="saveDialog" type="file" nwsaveas />
<pre id="p1" style="white-space: pre-wrap;">Welcome to Pd GUI using Node-Webkit
<script>document.write(process.versions['node-webkit'])</script><br/></pre>
<div id = "bottom">
<div id = "printout">
<pre id="p1" style="white-space: pre-wrap;">Welcome to Pd GUI using Node-Webkit
<script>document.write(process.versions['node-webkit'])</script><br/></pre>
</div>
</div>
<script>
......
<!DOCTYPE html>
<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="pdcanvas.css">
</head>
<body>
<input style="display:none;" id="fileDialog" type="file" multiple />
<input style="display:none;" id="saveDialog" type="file" nwsaveas nwworkingdir accept=".pd" />
<input style="display:none;" id="openpanel_dialog" type="file" />
<input style="display:none;" id="savepanel_dialog" type="file" nwsaveas nwworkingdir />
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="patchsvg" height="1000" width="1000" class="noselect">
<rect/>
</svg>
......@@ -14,7 +19,7 @@
var nw = require('nw.gui');
var pdgui = require('./pdgui.js');
var name = pdgui.last_loaded();
//var name = pdgui.last_loaded();
console.log("my working dire is " + pdgui.get_pwd());
document.getElementById("saveDialog").setAttribute("nwworkingdir", pdgui.get_pwd());
......@@ -23,8 +28,29 @@
document.getElementById("fileDialog").setAttribute("accept",
Object.keys(pdgui.pd_filetypes).toString());
var last_keydown = "";
// This gets called from the nw_create_window function in index.html
// It provides us with our canvas id from the C side. Once we have it
// we can create the menu and register event callbacks
function register_canvas_id(cid) {
console.log("fuck you");
create_popup_menu(cid);
add_events(cid);
nw_create_patch_window_menus(cid);
pdgui.canvas_map(cid);
}
// This could probably be in pdgui.js
function add_keymods(key, evt) {
var shift = evt.shiftKey ? "Shift" : "";
var ctrl = evt.ctrlKey ? "Ctrl" : "";
return shift + ctrl + key;
}
function create_popup_menu(name) {
// The right-click popup menu
var popup_menu = new nw.Menu();
pdgui.add_popup(name, popup_menu);
......@@ -47,7 +73,9 @@
pdgui.popup_action(name, 2);
}
}));
}
function add_events(name) {
document.querySelector("#saveDialog").addEventListener("change", function(evt) {
pdgui.saveas_callback(name, this.value);
console.log("tried to open something");
......@@ -62,6 +90,26 @@
console.log("tried to open something");
}, false);
document.querySelector("#openpanel_dialog").addEventListener("change",
function(evt) {
var file_string = this.value;
// reset value so that we can open the same file twice
this.value = null;
pdgui.file_dialog_callback(file_string);
console.log("tried to openpanel something");
}, false
);
document.querySelector("#savepanel_dialog").addEventListener("change",
function(evt) {
var file_string = this.value;
// reset value so that we can open the same file twice
this.value = null;
pdgui.file_dialog_callback(file_string);
console.log("tried to savepanel something");
}, false
);
document.addEventListener("mousemove", function(evt) {
//pdgui.gui_post("x: " + evt.pageX + " y: " + evt.pageY +
......@@ -73,15 +121,6 @@
return false;
});
var last_keydown = "";
function add_keymods(key, evt) {
var shift = evt.shiftKey ? "Shift" : "";
var ctrl = evt.ctrlKey ? "Ctrl" : "";
return shift + ctrl + key;
}
document.addEventListener("keydown", function(evt) {
var key_code = evt.keyCode;
var hack = null; // hack for unprintable ascii codes
......@@ -170,17 +209,16 @@
nw.Window.get().on("close", function() {
pdgui.pdsend(name + " menuclose 0");
});
// draw the objects in the patch once we've finished loading this boilerplate page
// We could probably use the window.onload here, which would make it standard javascript
this.onload = function() {
pdgui.canvas_map(name);
};
}
nw_create_patch_window_menus(name);
//nw_create_patch_window_menus(name);
function menu_generic () {
alert("Please implement this");
......@@ -259,7 +297,7 @@ nw_create_patch_window_menus(name);
}
// Menus for the Patch window
function nw_create_patch_window_menus () {
function nw_create_patch_window_menus (name) {
// Window menu
var windowMenu = new nw.Menu({
......@@ -287,7 +325,7 @@ function nw_create_patch_window_menus () {
label: 'Open',
key: 'o',
modifiers: "ctrl",
click: function (){
click: function() {
var chooser = document.querySelector('#fileDialog');
chooser.click();
}
......@@ -392,44 +430,60 @@ function nw_create_patch_window_menus () {
editMenu.append(new nw.MenuItem({
label: 'Cut',
click: menu_generic,
click: function () {
pdgui.pdsend(name + " cut");
},
key: 'c',
modifiers: "ctrl"
}));
editMenu.append(new nw.MenuItem({
label: 'Copy',
click: menu_generic,
key: 'c',
click: function () {
pdgui.pdsend(name + " copy");
},
key: 'x',
modifiers: "ctrl"
}));
editMenu.append(new nw.MenuItem({
label: 'Paste',
click: menu_generic,
key: 'c',
click: function () {
pdgui.pdsend(name + " paste");
},
key: 'v',
modifiers: "ctrl"
}));
editMenu.append(new nw.MenuItem({
label: 'Duplicate',
click: menu_generic,
key: 'c',
click: function () {
pdgui.pdsend(name + " duplicate");
},
key: 'd',
modifiers: "ctrl"
}));
editMenu.append(new nw.MenuItem({
label: 'Select All',
click: menu_generic,
click: function () {
pdgui.pdsend(name + " selectall");
},
key: 'a',
modifiers: "ctrl"
}));
editMenu.append(new nw.MenuItem({
label: 'Reselect',
click: menu_generic,
key: 'a',
// Unfortunately nw.js doesn't allow
// key: "Return" or key: "Enter", so we
// can't bind to ctrl-Enter here. (Even
// tried fromCharCode...)
click: function () {
pdgui.pdsend(name + " reselect");
},
key: String.fromCharCode(10),
modifiers: "ctrl"
}));
......
......@@ -15,6 +15,12 @@ exports.get_pwd = function() {
var fs = require('fs'); // for fs.existsSync
var path = require('path'); // for path.dirname path.extname
var flub = { flash_interrupt_label: "this thing does stuff" };
exports.tr = function(arg) {
return flub[arg];
}
var pd_window;
exports.pd_window;
......@@ -161,7 +167,9 @@ function gui_post(string, color) {
var text = pd_window.document.createTextNode(string + "\n");
span.appendChild(text);
myp.appendChild(span);
pd_window.window.scrollTo(0, pd_window.document.body.scrollHeight);
var printout = pd_window.document.getElementById("bottom");
printout.scrollTop = printout.scrollHeight;
// printout.scrollTo(0, pd_window.document.body.scrollHeight);
}
exports.gui_post = gui_post;
......@@ -838,12 +846,18 @@ var scroll = {},
loaded = {},
popup_menu = {};
var patchwin = {}; // Associative array of patch windows
var patchwin = {}; // object filled with cid: [Window object] pairs
var dialogwin = {}; // object filled with did: [Window object] pairs
exports.get_patchwin = function(name) {
return patchwin[name];
}
exports.remove_dialogwin = function(name) {
dialogwin[name] = null;
}
// stopgap...
pd_colors['canvas_color'] = "white";
......@@ -968,8 +982,8 @@ function gui_canvas_new(cid, width, height, geometry, editable, name, dir, dirty
}
last_loaded = cid;
// Not sure why resize and topmost are here-- but we'll pass them on for the time being...
patchwin[cid] = nw_create_window(cid, width, height, xpos, ypos, menu_flag,
resize[cid], topmost[cid], my_canvas_color, name, dir, dirty_flag, cargs);
patchwin[cid] = nw_create_window(cid, 'pd-canvas', width, height, xpos, ypos, menu_flag,
resize[cid], topmost[cid], my_canvas_color, name, dir, dirty_flag, cargs, null);
// initialize variable to reflect that this window has been opened
loaded[cid] = 1;
......@@ -1804,6 +1818,13 @@ function configure_item(item, attributes) {
}
}
// A bit of a stopgap. The GUI side probably shouldn't know about "items"
// on SVG.
function gui_configure_item(cid, tag, attributes) {
var item = get_item(cid, tag);
configure_item(item, attributes);
}
// Most of these map either to pd.tk procs, or in some cases Tk canvas subcommands
function gui_text_create_gobj(cid, tag, xpos, ypos) {
var svg = get_item(cid, "patchsvg"); // "patchsvg" is id for the svg in the DOM
......@@ -1845,6 +1866,7 @@ function gui_canvas_drawio(cid, parenttag, tag, x1, y1, x2, y2, basex, basey) {
height: y2 - y1,
x: x1 - basex,
y: y1 - basey,
id: tag,
class: 'xlet'
});
g.appendChild(rect);
......@@ -2000,6 +2022,7 @@ function gui_text_set (cid, tag, text) {
svg_text.textContent = text;
} else {
gui_post("gui_text_set: svg_text doesn't exist!");
console.log("gui_text_set: " + cid + " " + tag + " " + text + " :" + "svg_text doesn't exist!");
}
}
......@@ -2115,10 +2138,9 @@ function gui_create_bng(cid, tag, cx, cy, radius) {
g.appendChild(circle);
}
function gui_bng_update(cid, tag, flashed) {
function gui_bng_flash(cid, tag, color) {
var button = get_item(cid, tag + 'button');
var fill = flashed ? 'red' : 'none';
configure_item(button, { fill: fill });
configure_item(button, { fill: color });
}
function gui_create_toggle(cid, tag, color, width, p1,p2,p3,p4,p5,p6,p7,p8,basex,basey) {
......@@ -2150,15 +2172,36 @@ function gui_create_toggle(cid, tag, color, width, p1,p2,p3,p4,p5,p6,p7,p8,basex
g.appendChild(cross2);
}
function gui_toggle_update(cid, tag, state) {
function gui_toggle_resize_cross(cid,tag,w,p1,p2,p3,p4,p5,p6,p7,p8,basex,basey) {
var g = get_gobj(cid, tag);
var points_array = [p1 - basex, p2 - basey,
p3 - basex, p4 - basey
];
var cross1 = get_item(cid, tag + 'cross1');
configure_item(cross1, {
points: points_array.join(" "),
'stroke-width': w
});
points_array = [p5 - basex, p6 - basey,
p7 - basex, p8 - basey
];
var cross2 = get_item(cid, tag + 'cross2');
configure_item(cross2, {
points: points_array.join(" "),
'stroke-width': w
});
}
function gui_toggle_update(cid, tag, state, color) {
var cross1 = get_item(cid, tag + 'cross1');
var cross2 = get_item(cid, tag + 'cross2');
if (state) {
configure_item(cross1, { display: 'inline' });
configure_item(cross2, { display: 'inline' });
configure_item(cross1, { display: 'inline', stroke: color });
configure_item(cross2, { display: 'inline', stroke: color });
} else {
configure_item(cross1, { display: 'none' });
configure_item(cross2, { display: 'none' });
configure_item(cross1, { display: 'none', stroke: color });
configure_item(cross2, { display: 'none', stroke: color });
}
}
......@@ -2356,6 +2399,13 @@ function gui_iemgui_drawborder(cid, tag, bgcolor, x1, y1, x2, y2) {
g.appendChild(rect);
}
function gui_iemgui_redraw_border(cid, tag, x1, y1, x2, y2) {
var item = get_item(cid, tag + 'border');
configure_item(item, {
width: x2 - x1,
height: y2 - y1
});
}
function gui_create_mycanvas(cid,tag,color,x1,y1,x2_vis,y2_vis,x2,y2) {
var rect_vis = create_item(cid,'rect', {
......@@ -2693,3 +2743,47 @@ function gui_cord_inspector_flash(cid) {
function gui_raise_window(cid) {
patchwin[cid].focus();
}
// Openpanel and Savepanel
var file_dialog_target;
function file_dialog(cid, type, target, path) {
file_dialog_target = target;
var query_string = (type === 'open' ?
'openpanel_dialog' : 'savepanel_dialog');
var d = patchwin[cid].window.document.querySelector('#' + query_string);
gui_post("set path to " + path);
d.setAttribute("nwworkingdir", path);
d.click();
}
function gui_openpanel(cid, target, path) {
file_dialog(cid, "open", target, path);
}
function gui_savepanel(cid, target, path) {
file_dialog(cid, "save", target, path);
}
exports.file_dialog_callback = function(file_string) {
pdsend(file_dialog_target + " callback " + enquote(file_string));
}
function gui_iemgui_dialog(did, attr_array) {
gui_post("got a gfxstub " + did + "!!!");
for (var i = 0; i < attr_array.length; i++) {
attr_array[i] = '"' + attr_array[i] + '"';
}
dialogwin[did] = nw_create_window(did, 'pd-properties', 235, 430, 20, 20, 0,
0, 1, 'white', 'Properties', '', 0, null, attr_array);
}
function gui_remove_gfxstub(did) {
if (dialogwin[did] !== null) {
dialogwin[did].window.close(true);
dialogwin[did] = null;
}
}
@font-face {
font-family: "DejaVu Sans Mono";
src: url("DejaVuSansMono.ttf");
}
body {
margin: 0px;
font-family: "DejaVu Sans Mono";
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
text {
// fill: red;
cursor: default;
}
.selected_border {
stroke: blue;
stroke-dasharray: none;
stroke-width: 1;
}
.selected_line {
stroke: blue;
}
.broken_border {
fill: #f7f7f7;
stroke: red;
stroke-dasharray: 3 2;
}
.xlet {
stroke: black;
fill: gray;
stroke-width: 1;
shape-rendering: optimizeSpeed;
}
//.xlet:hover {
// stroke: red;
//}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="pdproperties.css">
<style>body{font-family:Verdana;}
fieldset{font-family:Georgia; background-color:#eeeeee;
border-radius:3px; border:2px solid black;
margin:5px; padding:8px; }
input[type="text"]{width:3em;}
.prop{display: none;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>size and behavior</legend>
<span class="size prop">
<label title="size of the iemgui">
size <input type="text" name="size"></label><br>
</span>
<span class="nonzero-value prop">
<label title="value to output when the toggle shows an 'x'">
nonzero value <input type="text" name="nonzero-value"></label><br>
</span>
<span class="flash-interrupt prop">
<label title="the amount of time (in milliseconds) that Pd will wait before interrupting the flashing of the button">
interrupt <input type="text" name="flash-interrupt"></label>
</span>
<span class="flash-hold prop">
<label title="the amount of time (in milliseconds) that Pd will display the flash animation">
hold <input type="text" name="flash-hold"></label> <br>