Commit 00a696a8 authored by Prakhar Agarwal's avatar Prakhar Agarwal 🎯
Browse files

Merge branch 'emscripten' into add_favicon

parents 4dcf5820 4a378539
......@@ -67,7 +67,7 @@ build: $(BUILD_PATH)
project: $(INSTALL_PATH)
cp -rf $(PD_PATH)/nw/dialog_*.html $</components/dialogs/
cp -rf $(PD_PATH)/nw/css/*.css $</css/
cd $< && npm install && npm run-script build && npm start
cd $< && npm install && npm run build && npm start
clean:
find $(PURR_DIR)/externals -name "*.wasm" -type f -delete
......
......@@ -66,7 +66,22 @@ cd purr-data
git checkout emscripten
make emscripten
```
### Setting up the project (Windows)
```
Method 1
- git clone https://git.purrdata.net/jwilkes/purr-data.git
- cd purr-data
- run command npm install.
- Change directory to purr-data/emscripten/project/purr-data.
- run command npm run build.
- run command npm start.
Method 2
- Follow the steps given in the link inorder to install Ubuntu LTS (https://docs.microsoft.com/en-us/windows/wsl/) .
- Then follow the steps mentioned in above sections for Linux.
```
### Running Purr Data in a web browser
- After the building is successfully completed, visit http://localhost:5000 in your browser.
- You can run `npm start` under `purr-data/emscripten/project/purr-data` to run the app again.
......@@ -88,9 +103,9 @@ make emscripten
- Fix or disable some of the global menu items not working.
- Fix graphical arrays being opened if the patch font size changes.
- Ask for saving the patch when the user closes an edited patch.
- Make the GUI (e.g. bang, toggle) property dialog window work.
- Make the dialog windows (e.g. property, text) appear in the right side of the patch instead of the left side bar.
- Merge patch menu into the global menu and make it work depending on the focus of patches.
- Make the GUI(e.g. bang, toggle) property dialog window work.
- Make the dialog windows(e.g. property, text) appear on the right side of the patch instead of the left sidebar.
- Merge the patch menu into the global menu and make it work depending on the focus of patches.
- Style the patch window menu bar so it can show the focus state and add some buttons (e.g. close) for convenience.
- Make the patch window resizable by dragging its border.
- Make the patch window rearrangeable by dragging its menu bar.
......
......@@ -28,11 +28,11 @@
<li id="edit-reselect"></li>
<li id="edit-tidyup"></li>
<li id="edit-font"></li>
<li id="edit-cordinspector"><input type="checkbox" id="cordinspector"></li>
<li id="edit-cordinspector"><input type="checkbox" class= "ml-2" id="cordinspector"></li>
<li id="edit-find"></li>
<li id="edit-findagain"></li>
<li id="edit-finderror"></li>
<li id="edit-editmode"><input type="checkbox" id="editmode"></li>
<li id="edit-editmode"><input type="checkbox" class= "ml-2" id="editmode"></li>
</ul>
</li>
......
......@@ -8,42 +8,42 @@
<label>
<li id="file-open">
</li>
<input id="uploadPatch" type="file" onchange="pdbundle.pdgui.upload_patch(this.files)" multiple>
<input id="uploadPatch" type="file" onchange="pdbundle.pdgui.upload_patch(this.files)" multiple>
</label>
<!-- Recent Files submenu -->
<li id="file-recent-files">
</li>
<!-- End canvas specific -->
<li id="file-message"></li>
<li id="file-close"></li>
<li id="file-quit"></li>
</ul>
</li>
<!-- Edit section -->
<li id="menu-edit">
<ul>
<li id="edit-copy"></li>
<li id="edit-selectall"></li>
<li id="edit-clear-console"></li>
<ul>
<li id="edit-copy"></li>
<li id="edit-selectall"></li>
<li id="edit-clear-console"></li>
<li id="edit-find"></li>
<li id="edit-preferences"></li>
</ul>
</li>
<!-- View Section -->
<li id="menu-view">
<ul>
<li id="view-zoomin"></li>
<li id="view-zoomout"></li>
<li id="view-zoomout"></li>
<li id="view-zoomreset"></li>
<li id="view-fullscreen"></li>
</ul>
</li>
<!-- Media section -->
<li id="menu-media">
<ul>
......@@ -54,7 +54,7 @@
<li id="media-loadmeter"></li>
</ul>
</li>
<!-- Window section -->
<li id="menu-window">
<ul>
......@@ -62,7 +62,7 @@
<li id="window-prevwin"></li>
</ul>
</li>
<!-- Help section -->
<li id="menu-help">
<ul>
......@@ -77,8 +77,5 @@
</ul>
</li>
</ul>
</nav>
</div>
\ No newline at end of file
</nav>
</div>
\ No newline at end of file
.console-webapp {
position: relative;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: scroll;
.console-webapp {
position: relative;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: scroll;
}
#console_bottom{
......@@ -12,8 +12,8 @@
top: 0px !important;
}
.console-find-webapp {
position: relative !important;
.console-find-webapp {
position: relative !important;
background-color: transparent !important;
right: 0px;
}
......@@ -21,19 +21,19 @@
margin-left: 10px;
}
#canvas_container{
display: flex !important;
background-color: red !important;
#canvas_container{
display: flex !important;
background-color: red !important;
}
#sidebar-files ul{
list-style-type: none;
padding-left: 30px;
cursor: pointer;
padding: 0;
}
#sidebar-files ul li{
padding-bottom: 15px;
padding-bottom: 10px;
}
......@@ -41,124 +41,119 @@
color: #007BFF;
}
#content {
position: absolute;
top: 24px;
}
.content-webapp {
height: 96%;
#content {
position: relative;
}
.content-webapp {
height: calc(100vh - 38px);
width: 100%;
}
#content-canvas {
position: relative;
}
/* Webapp Menu */
nav {
position: relative;
z-index: 999999;
width: 100%;
}
.clearfix:after {
content: '.';
display: block;
clear: both;
height: 0;
line-height: 0;
font-size: 0;
visibility: hidden;
overflow: hidden;
}
#patch-menu {
width: 100%;
}
.menu, .menu li ul, .patch-menu, .patch-menu li ul{
background-color: #EFF0F1;
margin: 0px;
padding: 0px;
list-style:none;
float:left;
font-size: 14px;
width: 100%;
margin-top: 10px;
}
#content-canvas {
position: relative;
}
/* Webapp Menu */
nav {
position: fixed;
top: 0px;
z-index: 999999;
width: 100%;
}
.clearfix:after {
content: '.';
display: block;
clear: both;
height: 0;
line-height: 0;
font-size: 0;
visibility: hidden;
overflow: hidden;
}
#patch-menu {
width: 100%;
}
.menu, .menu li ul, .patch-menu, .patch-menu li ul{
background-color: #EFF0F1;
margin: 0px;
padding: 0px;
list-style:none;
float:left;
font-size: 14px;
width: 100%;
border: 1px solid #C0C2C4;
border-radius: 3px;
z-index: 999999;
}
.menu li{
display: none;
position: relative;
padding: 7px 10px;
cursor: pointer;
}
.patch-menu li{
position: relative;
padding: 5px 10px;
cursor: pointer;
}
.menu > li, .patch-menu > li {
float: left;
}
.menu > li:hover, .patch-menu > li:hover {
float: left;
background-color: #6bd4e6;
}
.menu li ul, .patch-menu li ul{
display: none;
position: absolute;
min-width: 250px;
}
.menu li ul li:hover, .patch-menu li ul li:hover{
background-color: #6bd4e6;
}
.menu li ul li ul{
top: 0;
left: 100%;
}
.menu > li > ul > li span, .menu > li > ul > label > li span, .patch-menu > li > ul > li span {
float: right;
font-size: small;
color: #777;
}
/* Input file */
.menu label input[type="file"] {
display: none;
}
.menu label {
margin: 0px;
width: 100%;
text-align: left;
}
li .hr{
display: block !important;
margin: 0px;
padding: 0px;
width: 100%;
}
.hr > hr{
margin: 0px;
padding: 0px;
}
border-radius: 3px;
z-index: 999999;
}
.menu li{
display: none;
position: relative;
padding: 7px 10px;
cursor: pointer;
}
.patch-menu li{
position: relative;
padding: 5px 10px;
cursor: pointer;
}
.menu > li, .patch-menu > li {
float: left;
}
.menu > li:hover, .patch-menu > li:hover {
float: left;
background-color: #6bd4e6;
}
.menu li ul, .patch-menu li ul{
display: none;
position: absolute;
min-width: 250px;
}
.menu li ul li:hover, .patch-menu li ul li:hover{
background-color: #6bd4e6;
}
.menu li ul li ul{
top: 0;
left: 100%;
}
.menu > li > ul > li span, .menu > li > ul > label > li span, .patch-menu > li > ul > li span {
float: right;
font-size: small;
color: #777;
}
/* Input file */
.menu label input[type="file"] {
display: none;
}
.menu label {
margin: 0px;
width: 100%;
text-align: left;
}
li .hr{
display: block !important;
margin: 0px;
padding: 0px;
width: 100%;
}
.hr > hr{
margin: 0px;
padding: 0px;
}
#pd-info{
display: block;
}
......@@ -166,27 +161,27 @@ li .hr{
#pd-info img{
height: 50px;
}
/* Popup */
#popup{
background-color: #EFF0F1;
margin: 0px;
padding: 0px;
font-size: 12px;
border: 1px solid #C0C2C4;
z-index: 999999;
position: absolute;
list-style:none;
}
#popup li{
position: relative;
padding: 5px 10px;
cursor: pointer;
}
#popup > li:hover{
background-color: #6bd4e6;
/* Popup */
#popup{
background-color: #EFF0F1;
margin: 0px;
padding: 0px;
font-size: 12px;
border: 1px solid #C0C2C4;
z-index: 999999;
position: absolute;
list-style:none;
}
#popup li{
position: relative;
padding: 5px 10px;
cursor: pointer;
}
#popup > li:hover{
background-color: #6bd4e6;
}
.popup-disabled{
......@@ -195,11 +190,10 @@ li .hr{
.popup-disabled:hover{
background-color: transparent !important;
}
/* Webapp Index layout */
#sidebar{
background-color: transparent;
/* Webapp Index layout */
#sidebar{
background-color: transparent;
min-width: 200px;
max-width: 200px;
margin: 0px;
......@@ -209,30 +203,30 @@ li .hr{
#windows{
max-height: 100vh !important;
max-width: 90vw !important;
max-width: 100vw !important;
}
#canvas-content{
height: 70%;
#canvas-content{
height: 70%;
overflow-y: scroll;
overflow-x: auto;
border-top-width: 0ch;
}
#canvas-content > .card-body{
display: flex !important;
#canvas-content > .card-body{
display: flex !important;
}
#canvas-container{
min-height: 100%;
flex-direction: row;
}
}
#console_controls{
background-color: transparent;
}
#console-window{
#console-window{
background-color: transparent;
max-height: 30%;
}
......@@ -241,22 +235,22 @@ li .hr{
flex-basis: 100%;
background-color: #f6f6f6;
border-right: 2px solid #858688;
}
}
.patch_window_svg{
background-color: #f6f6f6;
min-height: 100%;
overflow: visible;
margin-top: 35px;
}
}
.patch_window_svg > svg{
min-height: 100%;
position: relative;
margin-top: -1px;
margin-left: -1px;
overflow: visible;
}
position: relative;
margin-top: -1px;
margin-left: -1px;
overflow: visible;
}
.patch-holder{
height: 100%;
......@@ -268,22 +262,19 @@ li .hr{
margin-bottom: 5px;
}
#div-svg-p{
position: relative;
z-index: 999999;
}
#div-svg-p{
position: relative;
z-index: 999999;
}
.dsp_toggle{
margin-left: 20px;
}
/* Bootstrap */
.container-fluid{
/* Bootstrap */
.container-fluid{
background-color: transparent;
padding: 0px !important;
overflow: scroll;
overflow: hidden;
padding: 0px !important;
}
.card-body{
......
This diff is collapsed.
......@@ -134,11 +134,11 @@ function add_shortcuts(cid){
document.onkeydown = function (e){
// Check modifiers
var shortcut = e.ctrlKey ? "ctrl+": "";
shortcut += e.shiftKey ? "shift+": "";
shortcut += e.altKey ? "alt+": "";
var shortcut = e.ctrlKey ? "Ctrl+": "";
shortcut += e.shiftKey ? "Shift+": "";
shortcut += e.altKey ? "Alt+": "";
// Add key
shortcut += e.key.toLowerCase();
shortcut += e.key.toUpperCase();
if(window.shortkeys[cid].hasOwnProperty(shortcut)){
window.shortkeys[cid][shortcut].click();
}
......