Processing 1.0 - Processing Discourse

polymonkey

copy for web tool
Apr 27^th, 2008, 2:51pm

I'm a big fan of copy for discourse. So I'm wondering if we could get a "Copy For Web" feature.

Here is some code that will convert a copied for discourse string array into a web friendly version.

This won't work out of the box because of the quote in brackets. You need to change the word quot to quote.

Quote:

String[] cfw = loadStrings("Untitled.txt");

for(int i = 0; i < cfw.length; i++){

if( cfw[i].indexOf("[quot]") != -1){

cfw[i] = cfw[i].replaceAll("\\[quot\\]", "<pre>");

}

if( cfw[i].indexOf("[/quot]") != -1){

cfw[i] = cfw[i].replaceAll("\\[/quot\\]", "</pre>");

}

if( cfw[i].indexOf(""[/color]) != -1){

cfw[i] = cfw[i].replaceAll("\\[/color\\]", "");

}

if( cfw[i].indexOf("[color=#") != -1){

cfw[i] = cfw[i].replaceAll("\\[color=", "");

}

}

println(cfw);

saveStrings("output.txt", cfw);

MattD

MattD(polymonkey)

polymonkey

Re: copy for web tool
Reply #1 - Apr 28^th, 2008, 2:32pm

I did some more work on this and this is what I've got so far.

This code checks for a String in the clipboard that is formated for discourse. If it finds it then it reformats it for the web and updates the clipboard. Only checked on OSX. I'll check it on Xp at work tomorrow. This is coming in very handy when writing example for the class blog.

Also you'll need to change quot- to quote in order to get the code to work.

**Update works fine on XP

MattD

Quote:

import java.awt.datatransfer.*;

void setup(){

String theClipboard = getClipboard();

if(theClipboard.startsWith("[quot-]") == true){

String[] cfw = split(theClipboard, '\n');

formatForWeb(cfw);

theClipboard = join(cfw, '\n');

setClipboard(theClipboard);

}

else{

println("Copy for discourse first");

}

exit();

}

void formatForWeb(String[] s){

for(int i = 0; i < s.length; i++){

if( s[i].indexOf("[quot-]") != -1){

s[i] = s[i].replaceAll("\\[quot-\\]", "<pre>");

}

if( s[i].indexOf([/quot-]"") != -1){

s[i] = s[i].replaceAll("\\[/quot-\\]", "</pre>");

}

if( s[i].indexOf(""[/color]) != -1){

s[i] = s[i].replaceAll("\\[/color\\]", "");

}

if( s[i].indexOf("[color=#") != -1){

s[i] = s[i].replaceAll("\\[color=", "");

}
}
}

//the below code is taken from
//http://exampledepot.com/egs/java.awt.datatransfer/ToClip.html
String getClipboard() {
Transferable t = Toolkit.getDefaultToolkit().getSystemClipboard().getContents(null);

try {
if (t != null && t.isDataFlavorSupported(DataFlavor.stringFlavor)) {

String text = (String)t.getTransferData(DataFlavor.stringFlavor);
return text;

}
}
catch (UnsupportedFlavorException e) {
}
catch (IOException e) {
}
return null;
}

// This method writes a string to the system clipboard.
// otherwise it returns null.
void setClipboard(String str) {

StringSelection ss = new StringSelection(str);

Toolkit.getDefaultToolkit().getSystemClipboard().setContents(ss, null);

}

« Last Edit: Apr 29^th, 2008, 6:49am by polymonkey »

MattD(polymonkey)

fry

Re: copy for web tool
Reply #2 - Apr 28^th, 2008, 3:16pm

we'd love to have a version of the tool that's been adapted for html output.. it could also be used to export .html versions of source for better web viewing, which i think a lot of people would like.

the "copy for discourse" tool is in the source, i'd give a shot at trying to modify it to output html instead of its current bbcode(?) output. sometime this summer, the tools menu will become plugin driven, and something like this could be added easily.

polymonkey Full Member Offline Posts: 137 Australia	Re: copy for web tool Reply #3 - Apr 28^th, 2008, 11:52pm Funny you should mention modifying the source. I'm doing a get as we speak. On the subject of the source, is there an etiquette for doing changes? mattD
	MattD(polymonkey)

PhiLho

Re: copy for web tool
Reply #4 - May 15^th, 2008, 4:35pm

A little advise: instead of doing , you can define the styles and use them. That's the method used by SciTE in HTML export:
Code:

.S0 { color: #FF0080; }
.S1 { color: #7070A0; }
.S2 { color: #8080A0; }
[...]
span { font-family: 'Andale Mono', "Bitstream Vera Sans Mono', 'Courier New', 'Monaco', fixed;
color: #000000; background: #FFFFFF; font-size: 8pt;
}
<span class="S5">abstract</span><span class="S0"> </span><span class="S5">class</span><span class="S0"> </span>Segment

There is actually more in the styles (font family, style, background, etc.) but for Processing, just the color can be enough. Although after generating this code, one can easily change the settings without using search/replace. And it is a bit more compact.

polymonkey

Re: copy for web tool
Reply #5 - May 15^th, 2008, 11:03pm

Unfortunately I'm quite ignorant of CSS. So I've got a couple of questions.

Is there an issue with setting up the styles anywhere but at the top of the page? And is there an issue with setting the same style twice within the one page. For example say you have one body of code where you paste in the code

.S0 { color: #FF0080; } etc...

and then further down the page you do it again

.S0 { color: #FF0080; } etc...

is that going to break anything?

MattD(polymonkey)

PhiLho

Re: copy for web tool
Reply #6 - May 16^th, 2008, 4:21pm

A good way to know for sure is to test...
I took a base page and I pasted the lines:
Code:

<style type="text/css">
.S0 { color: #800080; }
.S1 { color: #FF2020; font-weight: bold; }
.S5 { color: #8080A0; }
.C { font-family: 'Andale Mono', "Bitstream Vera Sans Mono', 'Courier New', 'Monaco', monospace;
color: #000000; background: #FFFFFF; font-size: 8pt;
}
</style>
<span class="C S5">abstract</span> <span class="C S5">class</span> <span class="C S0">Segment</span> <span class="C S1">{</span><br />

in two different places of the page.
Note I changed it a bit: the generic family is 'monospace', not 'fixed', and I made another class to avoid changing the style of the generic span tag (not a problem when the page with the source code is standalone, annoying in a bigger context).
[EDIT] Stupid me, one just have to change the .span rule to something like div.Code .span and enclose the code in a div with class Code, for example. No need for double class here.

It worked fine. Note that if the second batch of styles is changed, it is this one which is taken in account (cascading rule).

Tested in Firefox 2, IE6 and Opera 9.

« Last Edit: May 26^th, 2008, 3:39pm by PhiLho »

msinan

Re: copy for web tool
Reply #7 - May 25^th, 2008, 2:09am

coming from the topic:
http://processing.org/discourse/yabb_beta/YaBB.cgi?board=Syntax;action=display;num=1211667433

I have the same need for OpenProcessing website. I am showing the uploaded sketch's code on the webpage:
http://www.openprocessing.org/visuals/forProcessing.php?visualID=78

since they are native .pde files, I am looking for colorify that code. Since there is some java function in the source code of Processing (I don't know where it is) that does this in Java, I would be happy to work on that to make it on php. I guess it includes some regular expressions, which can easily be imported to php.

Also, I did some manual color coding for OpenVisuals reference page, http://www.openvisuals.org/framework/reference/
. You might want to look at the source code of the page, which includes meaningful CSS like 'processingComment', 'processingCode', etc.. Having that CSS, all we need is that Regular Expressions.

polymonkey Full Member Offline Posts: 137 Australia	Re: copy for web tool Reply #8 - May 25^th, 2008, 3:07am Is the idea that the page directly loads a .pde file, parses it, adds the color, then adds it into the html? Or is the idea to provide already colored html?
	MattD(polymonkey)

msinan

Re: copy for web tool
Reply #9 - May 25^th, 2008, 3:31am

First option you mentioned is what I am trying to do.
Once we find a solution to convert a code like:

Quote:

void setup(){
int test = 123;
//...
}

void draw() {
//...
}

to

Quote:

void setup(){
int test = 123;
//...
}

void draw(){
//...
}

we are good to go!

msinan

Re: copy for web tool
Reply #10 - May 25^th, 2008, 3:49am

check this out:
http://dev.processing.org/source/index.cgi/tags/processing-0135/app/src/processing/app/syntax/PdeKeywords.java?rev=3705&view=markup

this is the file in Processing, that takes plain code, and colors it in the Processing Environment. It looks for keywords.txt, which would include the list of all the functions and words to be colored. If I can find that keywords.txt, I guess I can do the same in php using regular expressions.

polymonkey Full Member Offline Posts: 137 Australia	Re: copy for web tool Reply #11 - May 25^th, 2008, 10:07am The keywords.txt file can be found under the lib folder in the processing install directory. (same spot where the preferences.txt file lives) hope that helps MattD
	MattD(polymonkey)

fjen

Re: copy for web tool
Reply #12 - May 25^th, 2008, 1:04pm

i have an old version of that in php that's somewhat working:
http://bezier.de/pcc/colorizer.beta.php

source:
http://bezier.de/pcc/colorizer.beta.phps

as you can see it reads the keywords and preferences.

the biggest problem in general with this approach (regular expressions) to syntax highlighting is that it's not context sensitive. same problem that occures with highlighting in processing: keywords are highlighted although they are used in a different context. for example adding a draw() function to a class will highlight it in the same color as the PApplet.draw(). .. another example is mousePressed / mouseReleased being both a variable and a function (highlighted either or).

there is a nice library named geshi that is context sensitive (in the new version >1), but it's php:
http://geshi.org/

i adopted that for syntax highlighting on builtwithprocessing.org (not public at the moment). i have it parse the code and then generate an xml (tree) that can be used for highlighting (and other things like collapsing code-blocks).

this is geshi too (for javascript):
http://appletobject.org/index.php?q=source

here's another highlighter that could be used in the exported html directly since it's javascript:
http://code.google.com/p/syntaxhighlighter/

i think antlr (built into processing, "the preprocessor") is able to parse code into a tree, that then can be correctly highlighted. but antlr is not really trivial to work with ...

best
F

msinan YaBB Newbies Offline Posts: 25 USA	Re: copy for web tool Reply #13 - May 25^th, 2008, 7:20pm Hey these are amazing and definitely what we were looking for! I guess coloring gives enough clarity to the code that such issues with color you mention on the page can definitely be ignored.. I will keep you updated to see what I can do upon those.

PhiLho

Re: copy for web tool
Reply #14 - May 26^th, 2008, 3:37pm

Styling with regular expressions is prone to be failing (highlighting keywords in strings and comments) or to be quite complex.
I like the approach taken by Scintilla (the engine behind SciTE) to scan the source character by character (with occasional lookahead/behind), maintaining a simple context by using an automaton.
Another approach is to use PEG (parsing expression grammar) with the problem to find a good Java (or PHP, depending on intent) implementation. I think latest version of Antlr integrates PEG parsing.

Unless you want to paste a source in a textarea and let PHP do the work, the PHP way might be inefficient, unless using a form of cache. Offline exporter might be a good solution.