Skip to content

Commit 3aff33d

Browse files
authoredMay 23, 2024
Merge pull request #93 from ffd8/dev-1.5.1
1.5.1 update
2 parents a031105 + 0b4dac3 commit 3aff33d

File tree

5 files changed

+220
-140
lines changed

5 files changed

+220
-140
lines changed
 

‎README.md

+7-10
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
11
# P5LIVE
2-
v 1.5.0
2+
v 1.5.1
33
cc [teddavis.org](http://teddavis.org) – 2019 - 2024
44
p5.js collaborative live-coding vj environment!
55

6-
## NEWS
7-
*Dear P5LIVE community, I'd love to showcase your documentation in an upcoming exhibition, Swiss Design Awards (May 25 – June 16), and therefore need documentation (videos + images) from performances / workshops / installations / streams / etc. that used this tool.
8-
See forms for details and many thanks in advance! Deadlines: May 20, 2024*
9-
10-
- 📋 [#P5LIVE in the #WILD](https://docs.google.com/forms/d/e/1FAIpQLScjC8VWb5W8eIpjv1hiQYFMKMG6IFnYMj1fyf43eg4fZjm7uQ/viewform?usp=sf_link), *share your videos/images documentation*
11-
- 📋 [#COCODING JAM](https://docs.google.com/forms/d/e/1FAIpQLSdywtibV6AEekbn14DHHhYZaH7Q7eotmf-ecVPcoAl1PVrVUA/viewform?usp=sf_link), *participate in the exhibition via COCODING!*
12-
136
## SHORTCUTS
147
### P5LIVE (default)
158
| | |
@@ -100,13 +93,14 @@ See `Settings Panel` » `Backup` to automatically export a P5LIVE backup file at
10093
- [x] Line Numbers, display code line numbers (and gutter features).
10194
- [x] Recompile Pulse, flash compiled section of code.
10295
- [ ] Auto Autocomplete, useful for learning, or use `CTRL + SPACE` on demand.
103-
- [x] Lock Code on Drag, locks code editor on mouse drag to prevent displacing code.
96+
<!--- [x] Lock Code on Drag, locks code editor on mouse drag to prevent displacing code. (temp remove)-->
10497
- [ ] Pass Editor Keys, keypresses from editor to p5 canvas (hide editor otherwise).
10598
- [x] Notifications, display notifications (shortcut settings + chat).
10699
- [x] Tooltips, displays extra info on hover.
107100
- [x] Multi-P5LIVE Warning, if opened multiple times can lose sync of sketches.
108101
- [x] Timestamp Exports, adds _YYYYMMDD_HHMMSS to filenames.
109-
- [x] Backup COCODING, autosave session code if server/internet lost.
102+
- [ ] COCODING Flags, show cursor flags or only with mouseover userlist.
103+
- [x] COCODING Autosave, autosave session code if server/internet lost.
110104
- [x] Check Updates, check Github for updates (offline-mode only).
111105
- Backup, [off], saves/downloads P5LIVE (sketches + settings) at intervals. `Now` - on demand. *Set `Daily` in offline-mode*.
112106
- Code Size, `15pt` adjust font size of editor.
@@ -342,6 +336,9 @@ By special request (P5LIVE for remote meditation sessions?!), there's a `view on
342336
- COCODING, `/?cc=*****&edit=0`
343337
- Solo, `/?edit=0`
344338

339+
Similarly you can also use `?readonly=1`, for a readonly editor.
340+
Incase of exhibit, use `?exhibit=1`, to disable links.
341+
345342
You can also load a sketch by URL (for media installation), just add `sketch=name_of_sketch` !
346343
Example: [\_meta\_P5LIVE](https://p5live.org/?sketch=_meta_P5LIVE)
347344

‎includes/utils/ace.recoding.js

+16-4
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ class Recoding{
171171
}
172172

173173
playCat(){
174-
if(this.session.eventsCur < this.session.history.length-1){
174+
if(this.session.eventsCur < this.session.history.length){
175175
this.clearEvents()
176176
this.createEvent(Date.now(), this.session.eventsCur)
177177
// this.session.eventsCur++
@@ -231,9 +231,13 @@ class Recoding{
231231
self.editorOut.session.doc.applyDelta(k.d)
232232
}else{
233233
self.editorOut.session.doc.applyDelta(k.d)
234+
self.editorOut.moveCursorTo(k.d.start.row, k.d.start.column)
235+
236+
self.editorOut.renderer.scrollCursorIntoView({row: k.d.end.row, column: k.d.end.column}, 0.5) // in view
237+
// self.editorOut.renderer.scrollToLine(k.d.end.row, true, true); // constant follow
234238
}
239+
235240

236-
self.session.eventsCur++
237241
if(self.session.compiles.indexOf(self.session.eventsCur) != -1){
238242
let rangeIndex = self.session.compiles.indexOf(self.session.eventsCur)
239243
if(self.elms.range){
@@ -244,6 +248,9 @@ class Recoding{
244248
self.elms.steps.innerHTML = (parseInt(rangeIndex) + 1) +'/'+ self.session.compiles.length
245249
}
246250
}
251+
252+
self.session.eventsCur++
253+
247254
if(self.session.eventsCur >= self.session.history.length && !self.catMode){
248255
self.playing = false
249256
self.recordLock(false)
@@ -258,10 +265,11 @@ class Recoding{
258265
}
259266
}
260267

261-
if (i == self.session.history.length - 1 && !self.catMode) {
262-
self.editorOut.setReadOnly(false)
268+
if (i == self.session.history.length - 1 && !self.catMode && !self.loop) {
269+
// self.editorOut.setReadOnly(false)
263270
}
264271

272+
265273
}, delayTimer / parseFloat(self.speed))
266274

267275
this.session.events.push(evt)
@@ -341,6 +349,10 @@ class Recoding{
341349
if(tempDeltas.length > 0){
342350
this.editorOut.setValue(tempdoc.getValue(), 1)
343351
this.editorOut.moveCursorTo(curPos.row, curPos.column)
352+
// console.log(curPos.row)
353+
// this.editorOut.scrollToLine(curPos.row);
354+
this.editorOut.renderer.scrollCursorIntoView({row: curPos.row, column: curPos.column}, 0.5)
355+
// this.editorOut.renderer.scrollToLine(curPos.row, true, true);
344356
}
345357

346358
this.recordLock(true)

‎index.html

+155-97
Large diffs are not rendered by default.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "p5live",
3-
"version": "1.5.0",
4-
"description": "Collaborative live-coding environment for p5.js",
3+
"version": "1.5.1",
4+
"description": "p5.js collaborative live-coding vj environment!",
55
"main": "server.js",
66
"scripts": {
77
"test": "echo \"Error: no test specified\" && exit 1",

‎style.css

+40-27
Original file line numberDiff line numberDiff line change
@@ -411,7 +411,7 @@ h2{
411411
position:relative;
412412
width:100%;
413413
height:25px;
414-
background:#222;
414+
background:rgba(34, 34, 34, .5);
415415
color:#fff;
416416
border:none;
417417
outline:none;
@@ -1071,7 +1071,7 @@ button[disabled]{
10711071
height:auto;
10721072
overflow:hidden;
10731073
display:block;
1074-
background:#333;
1074+
background:rgba(51, 51, 51, .75);
10751075
margin:0px;
10761076
padding:0px;
10771077
min-height:35px;
@@ -1242,24 +1242,24 @@ li{
12421242

12431243
/* custom scrollbar for sketches */
12441244
/* width */
1245-
*::-webkit-scrollbar, .menu-sketches-holder::-webkit-scrollbar, .menu-settings::-webkit-scrollbar {
1245+
*::-webkit-scrollbar, .menu-sketches-holder::-webkit-scrollbar, .menu-settings::-webkit-scrollbar, #refholder::-webkit-scrollbar {
12461246
width: 8px;
12471247
height: 10px;
12481248
}
12491249

12501250
/* Track */
1251-
*::-webkit-scrollbar-track, .menu-sketches-holder::-webkit-scrollbar-track, .menu-settings::-webkit-scrollbar-track {
1252-
background: #333;
1251+
*::-webkit-scrollbar-track, .menu-sketches-holder::-webkit-scrollbar-track, .menu-settings::-webkit-scrollbar-track, #refholder::-webkit-scrollbar-track {
1252+
background: #222;
12531253
}
12541254

12551255
/* Handle */
1256-
*::-webkit-scrollbar-thumb, .menu-sketches-holder::-webkit-scrollbar-thumb, .menu-settings::-webkit-scrollbar-thumb {
1257-
background: #aaa;
1256+
*::-webkit-scrollbar-thumb, .menu-sketches-holder::-webkit-scrollbar-thumb, .menu-settings::-webkit-scrollbar-thumb, #refholder::-webkit-scrollbar-thumb {
1257+
background: #555;
12581258
}
12591259

12601260
/* Handle on hover */
1261-
*::-webkit-scrollbar-thumb:hover, .menu-sketches-holder::-webkit-scrollbar-thumb:hover, .menu-settings::-webkit-scrollbar-thumb:hover {
1262-
background: #aaa;
1261+
*::-webkit-scrollbar-thumb:hover, .menu-sketches-holder::-webkit-scrollbar-thumb:hover, .menu-settings::-webkit-scrollbar-thumb:hover, #refholder::-webkit-scrollbar-thumb:hover {
1262+
background: #666;
12631263
}
12641264

12651265
/* hide main editor scrollbars */
@@ -1309,7 +1309,7 @@ li{
13091309
right:0;
13101310
color:#fff;
13111311
overflow:auto;
1312-
width:250px;
1312+
width:245px;
13131313
height:100vh;
13141314
font-size:8pt;
13151315
float:right;
@@ -1320,9 +1320,9 @@ li{
13201320
position:fixed;
13211321
width:100%;
13221322
height:100%;
1323-
background:#000 !important;
1323+
background:rgba(0, 0, 0, .3) !important;
13241324
opacity:.8;
1325-
z-index:-1;
1325+
z-index:-2;
13261326
}
13271327
#ref-search{
13281328
font-family: 'roboto_mono', 'Monaco', monospace;
@@ -1533,7 +1533,7 @@ li{
15331533
height:16pt;
15341534
stroke:#ff0000;
15351535
}
1536-
.vex-long{
1536+
.vex-long, .vex-about{
15371537
width:100%;
15381538
height:50vh;
15391539
border-bottom:1px solid #aaa;
@@ -1543,12 +1543,19 @@ li{
15431543
font-size:10pt;
15441544
background:none;
15451545
color:#fff;
1546-
padding:5px;
1546+
padding:10px;
15471547
box-sizing: border-box;
15481548
outline:none;
15491549
}
15501550
.vex-content{
1551-
1551+
padding:0px !important;
1552+
}
1553+
.vex-dialog-buttons{
1554+
padding:10px;
1555+
padding-top:0;
1556+
}
1557+
.vex-dialog-message{
1558+
/* padding:10px;*/
15521559
}
15531560
.vex.vex-theme-plain{
15541561
padding-top:8vh !important;
@@ -1560,6 +1567,12 @@ li{
15601567
width:450px;
15611568
margin: 0 auto;
15621569
}
1570+
.vex-small .vex-content{
1571+
padding:10px !important;
1572+
}
1573+
.vex-padding .vex-dialog-message{
1574+
padding:10px !important;
1575+
}
15631576
.vex .svg{
15641577
filter:invert();
15651578
}
@@ -1595,51 +1608,51 @@ li{
15951608
margin-top:5px;
15961609
background:#ff000088;
15971610
}
1598-
#about-alert{
1611+
.vex-about{
15991612
height:70vh;
16001613
font-size:10pt;
16011614
line-height:13pt;
16021615
}
1603-
#about-alert pre, #about-alert code{
1616+
.vex-about pre, .vex-about code{
16041617
font-family: 'roboto_mono', 'Monaco', monospace;
16051618
font-weight: 200;
16061619
}
1607-
#about-alert a{
1620+
.vex-about a{
16081621
color:#fff;
16091622
}
1610-
#about-alert ul{
1623+
.vex-about ul{
16111624
list-style-type: none;
16121625
margin-left: 15px;
16131626
padding-left: 0px;
16141627
}
1615-
#about-alert li:before {
1628+
.vex-about li:before {
16161629
content:"– ";
16171630
margin-left:-15px;
16181631
}
1619-
#about-alert h2{
1632+
.vex-about h2{
16201633
font-size:16pt;
16211634
margin-top:15px;
16221635
border-top:1px solid #aaa;
16231636
padding-top:15px;
16241637
}
1625-
#about-alert h3{
1638+
.vex-about h3{
16261639
margin-top:25px;
16271640
font-size:14pt;
16281641
}
1629-
#about-alert h4{
1642+
.vex-about h4{
16301643
font-size:12pt;
16311644
}
1632-
#about-alert img{
1645+
.vex-about img{
16331646

16341647
}
1635-
#about-alert tr:hover{
1648+
.vex-about tr:hover{
16361649
border:none;
16371650
background:#555;
16381651
}
1639-
#about-alert td{
1652+
.vex-about td{
16401653
padding:0 10px 0 10px;
16411654
}
1642-
#about-alert code{
1655+
.vex-about code{
16431656
padding:0 3px 0 3px;
16441657
}
16451658
#notify{

0 commit comments

Comments
 (0)
Please sign in to comment.