Javascript to format Arduino code

This site is best viewed in a modern browser with JavaScript enabled.

pedro147

I am trying to implement some keyword colour formatting used in Arduino micro controller code. I used Javascript’s to apply the relevant classes to the keywords but as you can see here http://jsfiddle.net/5xuER/embedded/result/ the scripts obviously enough changed the text colour of all of the full or partial keywords on the page which I do not want. I have tailored the modifiers to suit the case of the keywords as required, so they do not affect the text in the code comments. How can I target only the code in the five scroll boxes here http://www.pedroduino.com/7Seg%20LED%20circuits.php I was thinking that I could put each scroll box in it’s own div and hopefully target the Javascript to affect only these divs. Any help or advice would be greatly appreciated thanks Pedro.

<html>
<head>
<title>pedroduino.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="image/x-icon" href="/custom pd/images/arduino.ico" rel="shortcut icon">
<link media="screen" type="text/css" href="style.css" rel="stylesheet">
<style type="text/css" media="all">

.theword1, .theword6, .theword8{
color:#006699;
}

.theword, .theword2, .theword3, .theword4, .theword5, .theword7, .theword9, .theword10, .theword11, .theword12, .theword13{
color:#CC6600;
}

.text {
position:absolute;
top:140px;
left:140px;
}

</style>
</head>
<body>
<div id="content" style="height:1000px;"><!--CONTENT GOES HERE-->
<div class="text">
<br><br>This is some text int that may contain void loop some full or partial void keywords that I do not want the js replace script to change</p>
<br><br><pre>int char void setup pinMode void loop for digitalWrite else delay HIGH LOW OUTPUT</div>

</pre>
</p>
<!--POSITION SCROLL BOX--><div style="position:absolute;top:250px;left:92px;border:1px solid #33CC33;background-color:#F6F6E3;width:850px;height:480px;padding:0 30px;overflow-y:scroll;overflow-x:scroll;">
<p style="width:250%;">

<pre><!--ARDUINO CODE-->
// Thanks to Grumpy Mike <span style="color: blue"><u>http://www.thebox.myzen.co.uk/Tutorial/Arrays.html</u></span>
// LED Segment allocation within byte = {DP ABCDEFG }
int pins [] = {2, 3, 4, 5, 6, 7, 8, 9 }; // PIN 9 ALLOCATED TO DP BUT NOT USED (FIRST ELEMENT OF BINARY ARRAY IN CHAR TENCODE)
int digit[] = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
int counter = 0; // INITIALISE COUNTER AS ZERO
int timer = 1000; // DELAY TIMER INTERVAL
char tenCode[] = {B01111110, B00110000, B01101101, B01111001, B00110011, B01011011, B01011111, B01110000, B01111111, B01111011 };
void setup()
{

for(int i = 0; i < 8; i++) // SET DIGITAL PINS AS outputs
pinMode(pins[i], OUTPUT);
}

void loop()
{

for(int j = 0; j < 10; j++)
{

displayEleven(digit[j]);
delay(timer);
}

}

void displayEleven(int num)
{

int mask = 1;
for(int i = 0; i < 8; i++)
{

if((mask & tenCode[num]) == 0)
digitalWrite(pins[i], LOW);
else digitalWrite(pins[i], HIGH);
mask = mask << 1;
}

}

</pre>
</p>
</div><!--CLOSE STYLE DIV FOR SCROLL BOX-->

<!--char, low, delay, output & int do not have the 'i' modifier because these words appear in the comments as well as being keywords (to be colour-coded)-->
<script type="text/javascript">
var word = 'int';
var replacement = '<span class="theword">' + word + '</span>';
var re = new RegExp(word, 'g');
document.body.innerHTML = document.body.innerHTML.replace(re, replacement);

var word = 'OUTPUT';
var replacement = '<span class="theword1">' + word + '</span>';
var re = new RegExp(word, 'g');
document.body.innerHTML = document.body.innerHTML.replace(re, replacement);

var word = 'void setup';
var replacement = '<span class="theword2">' + word + '</span>';
var re = new RegExp(word, 'ig');
document.body.innerHTML = document.body.innerHTML.replace(re, replacement);

var word = 'pinMode';
var replacement = '<span class="theword3">' + word + '</span>';
var re = new RegExp(word, 'ig');
document.body.innerHTML = document.body.innerHTML.replace(re, replacement);

var word = 'void loop';
var replacement = '<span class="theword4">' + word + '</span>';
var re = new RegExp(word, 'ig');
document.body.innerHTML = document.body.innerHTML.replace(re, replacement);

var word = 'digitalWrite';
var replacement = '<span class="theword5">' + word + '</span>';
var re = new RegExp(word, 'ig');
document.body.innerHTML = document.body.innerHTML.replace(re, replacement);

var word = 'HIGH';
var replacement = '<span class="theword6">' + word + '</span>';
var re = new RegExp(word, 'ig');
document.body.innerHTML = document.body.innerHTML.replace(re, replacement);

var word = 'delay';
var replacement = '<span class="theword7">' + word + '</span>';
var re = new RegExp(word, 'g');
document.body.innerHTML = document.body.innerHTML.replace(re, replacement);

var word = 'LOW';
var replacement = '<span class="theword8">' + word + '</span>';
var re = new RegExp(word, 'g');
document.body.innerHTML = document.body.innerHTML.replace(re, replacement);

var word = 'char';
var replacement = '<span class="theword9">' + word + '</span>';
var re = new RegExp(word, 'g');
document.body.innerHTML = document.body.innerHTML.replace(re, replacement);

var word = 'for';
var replacement = '<span class="theword10">' + word + '</span>';
var re = new RegExp(word, 'ig');
document.body.innerHTML = document.body.innerHTML.replace(re, replacement);

var word = 'void';
var replacement = '<span class="theword11">' + word + '</span>';
var re = new RegExp(word, 'ig');
document.body.innerHTML = document.body.innerHTML.replace(re, replacement);

var word = 'if';
var replacement = '<span class="theword12">' + word + '</span>';
var re = new RegExp(word, 'ig');
document.body.innerHTML = document.body.innerHTML.replace(re, replacement);

var word = 'else';
var replacement = '<span class="theword13">' + word + '</span>';
var re = new RegExp(word, 'ig');
document.body.innerHTML = document.body.innerHTML.replace(re, replacement);
</script>

</div> <!-- CONTENT ENDS HERE -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>

omnicity

Firstly, I would probably put an ID on each of the PRE elements, then remove

document.body.innerHTML

and replace it with

document.getElementById("whateverIDyouUsed")

You have quite a bit more re-factoring to do, but let us know if that sorts out the main problem.

root

Arduino sketches are limited in the highlighting.

in the site link you provide, if you look at the HTML it will give you a clue as to how to format the text

<!--ARDUINO CODE--><pre>
<span style="color: #7E7E7E;">//&nbsp;Thanks&nbsp;to&nbsp;Grumpy&nbsp;Mike&nbsp;&nbsp;http://www.thebox.myzen.co.uk/Tutorial/Arrays.html</span>
<span style="color: #7E7E7E;">//&nbsp;LED&nbsp;Segment&nbsp;allocation&nbsp;within&nbsp;byte&nbsp;=&nbsp;{DP&nbsp;ABCDEFG&nbsp;}</span>
<span style="color: #CC6600;">int</span> pins [] = {
&nbsp;&nbsp;2,&nbsp;3,&nbsp;4,&nbsp;5,&nbsp;6,&nbsp;7,&nbsp;8,&nbsp;9&nbsp;};&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #7E7E7E;">// pin 9 allocated to DP but not used (first element of binary array in char tenCode)</span>
<span style="color: #CC6600;">int</span> digit[] = {
&nbsp;&nbsp;0,&nbsp;1,&nbsp;2,&nbsp;3,&nbsp;4,&nbsp;5,&nbsp;6,&nbsp;7,&nbsp;8,&nbsp;9,&nbsp;10&nbsp;};
<span style="color: #CC6600;">int</span> counter = 0;                              <span style="color: #7E7E7E;">// initialise counter as zero</span>
<span style="color: #CC6600;">int</span> timer = 1000;                             <span style="color: #7E7E7E;">// delay timer interval</span>
<span style="color: #CC6600;">char</span> tenCode[] = {
&nbsp;&nbsp;B01111110,&nbsp;B00110000,&nbsp;B01101101,&nbsp;B01111001,&nbsp;B00110011,&nbsp;B01011011,&nbsp;B01011111,&nbsp;B01110000,&nbsp;B01111111,&nbsp;B01111011&nbsp;};
<span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>setup</b></span>()
{
&nbsp;&nbsp;<span style="color: #CC6600;">for</span>(<span style="color: #CC6600;">int</span> i = 0; i &lt; 8; i++)                  <span style="color: #7E7E7E;">// set digital pins as OUTPUTS</span>
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #CC6600;">pinMode</span>(pins[i], <span style="color: #006699;">OUTPUT</span>);
}
<span style="color: #CC6600;">void</span> <span style="color: #CC6600;"><b>loop</b></span>()
{
&nbsp;&nbsp;<span style="color: #CC6600;">for</span>(<span style="color: #CC6600;">int</span> j = 0; j &lt; 10; j++)
&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;displayEleven(digit[j]);
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #CC6600;">delay</span>(timer);
&nbsp;&nbsp;}
}
<span style="color: #CC6600;">void</span> displayEleven(<span style="color: #CC6600;">int</span> num)
{
&nbsp;&nbsp;<span style="color: #CC6600;">int</span> mask = 1;
&nbsp;&nbsp;<span style="color: #CC6600;">for</span>(<span style="color: #CC6600;">int</span> i = 0; i &lt; 8; i++)
&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #CC6600;">if</span>((mask &amp; tenCode[num]) == 0)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #CC6600;">digitalWrite</span>(pins[i], <span style="color: #006699;">LOW</span>);
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #CC6600;">else</span> <span style="color: #CC6600;">digitalWrite</span>(pins[i], <span style="color: #006699;">HIGH</span>);
&nbsp;&nbsp;&nbsp;&nbsp;mask&nbsp;=&nbsp;mask&nbsp;&lt;&lt;&nbsp;1;
&nbsp;&nbsp;}
}
</pre>
      </p>
         </div><!--CLOSE STYLE DIV FOR SCROLL BOX-->

What you need to do is ti use RegExp and replace keywords with an element wrapped around the keyword that applies the specific formatting to get the effect you need.

pedro147

Thank you for your help omnicity but as you can see I am out of my depth here. I tried to do what you have suggested but obviously I am not doing it correctly. I tried to implement your suggestions into a small section of code of the actual page that I wish to use it on.

http://jsfiddle.net/XZbca/embedded/result/

I could not post the full code as well as it is too long. Thanks Pedro.

pedro147

http:\127.0.0.1 Thank you. Yes the link I provived is to a page on my site and the formatting is from a facility within the Arduino IDE. As you can see it is not a very "elegant" solution so I was trying to do it by using the RegExp but being a rank amatuer at all this I am out of my depth and asking for some help. I thought that I had made some progress with what I had done so far but as explained I just want to limit the action of the code formatting javascript to the code within the pre tags.

pedro147

http://jsfiddle.net/XZbca/embedded/result/

I could not post the full code as well because it is too long. Thanks Pedro.

JMRKER

This may not be a solution to your problem as I don't know much about Arduino code.
I have compressed your code of post #1 to remove some of the redundancy.
It may require some more tweeking, but when your code is not so spread out I find it much easier to read (and debug).

<!DOCTYPE HTML>
<html>
<head>
<title>pedroduino.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="image/x-icon" href="/custom pd/images/arduino.ico" rel="shortcut icon">
<link media="screen" type="text/css" href="style.css" rel="stylesheet">

<style type="text/css" media="all">
 .thewordBlue { color:#006699; }
 .thewordRed { color:#CC6600; }

 .textInfo { position:absolute; top:40px; left:140px; }
 .scrollBox {
  position:absolute; top:150px; left:92px; border:1px solid #33CC33;
  background-color:#F6F6E3; width:850px; height:480px; padding:0 30px;
  overflow-y:scroll; overflow-x:scroll;
 }
</style>

</head>
<body>
<div id="content" style="height:1000px;">
<!--CONTENT GOES HERE-->
 <div class="textInfo">
  <br>This is some text int that may contain void loop some full or partial void keywords that I do not want the js replace script to change
  <p><pre>int char void setup pinMode void loop for digitalWrite else delay HIGH LOW OUTPUT</pre>
 </div>

<!--POSITION SCROLL BOX-->
 <div class="scrollBox">
  <p style="width:250%;">
   <pre id="preText">  <!-- ARDUINO CODE -->
// Thanks to Grumpy Mike <span style="color: blue"><u>http://www.thebox.myzen.co.uk/Tutorial/Arrays.html</u></span>
// LED Segment allocation within byte = {DP ABCDEFG }
int pins [] = {2, 3, 4, 5, 6, 7, 8, 9 }; // PIN 9 ALLOCATED TO DP BUT NOT USED (FIRST ELEMENT OF BINARY ARRAY IN CHAR TENCODE)
int digit[] = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
int counter = 0; // INITIALISE COUNTER AS ZERO
int timer = 1000; // DELAY TIMER INTERVAL
char tenCode[] = {B01111110, B00110000, B01101101, B01111001, B00110011, B01011011, B01011111, B01110000, B01111111, B01111011 };
void setup() {
  for(int i = 0; i < 8; i++) // SET DIGITAL PINS AS outputs
  pinMode(pins[i], OUTPUT);
}
void loop() {
  for(int j = 0; j < 10; j++) {
    displayEleven(digit[j]);
    delay(timer);
  }
}
void displayEleven(int num) {
  int mask = 1;
  for(int i = 0; i < 8; i++) {
    if((mask & tenCode[num]) == 0) digitalWrite(pins[i], LOW)
    else digitalWrite(pins[i], HIGH);
    mask = mask << 1;
  }
}
   </pre>
  </p>
 </div>
<!--CLOSE STYLE DIV FOR SCROLL BOX-->

<!--char, low, delay, output & int do not have the 'i' modifier because these words appear in the comments as well as being keywords (to be colour-coded)-->
<script type="text/javascript">
var preText = document.getElementById('preText').innerHTML;
var redWords = ['int','char','void','setup','pinMode','void','loop','for','digitalWrite','else','delay']; 
var blueWords = ['HIGH','LOW','OUTPUT'];
var re, word, replacement;

for (var i=0; i<redWords.length; i++) {
 word = redWords[i];
 replacement = '<span class="thewordRed">' + word + '</span>';
 re = new RegExp(word, 'g');
 preText = preText.replace(re, replacement);
}

for (var i=0; i<blueWords.length; i++) {
 word = blueWords[i];
 replacement = '<span class="thewordBlue">' + word + '</span>';
 re = new RegExp(word, 'g');
 preText = preText.replace(re, replacement);
}

document.getElementById('preText').innerHTML = preText;
</script>

</div> <!-- CONTENT ENDS HERE -->
</body>
</html>

Good Luck!

pedro147

Thank you so much JMRKER that is really generous of you to show me how to resolve my problem. As stated I am very new at any type of coding but now I will be looking through your approach to see how you tackled it. From an initial cursory glance, and using my possibly quite inept descriptive skills, I can see that you have specified the two text colours with css classes and then used the two classes as variables in the javascript to apply the relevant styling to the words specified in the variables. There is obviously more to your rewrite but that to me appears to be the gist of it. Thanks again Pedro.

JMRKER

pedro147;1346689 wrote:
Thank you so much JMRKER that is really generous of you to show me how to resolve my problem. As stated I am very new at any type of coding but now I will be looking through your approach to see how you tackled it. From an initial cursory glance, and using my possibly quite inept descriptive skills, I can see that you have specified the two text colours with css classes and then used the two classes as variables in the javascript to apply the relevant styling to the words specified in the variables. There is obviously more to your rewrite but that to me appears to be the gist of it. Thanks again Pedro.

That is a correct analysis and the basic idea behind the post. You are most welcome.

What I did not address is the conditions where the "reserved words" are part of any comment lines.

Good Luck!

pedro147

JMRKER - I got your script to work on my site page at http://www.pedrosdigitalsolutions.com/Webdeveloper%20Arduino.html
but I am trying to replace only whole words. However the script is affecting the 'if' in the word 'shiftIt'. How might I modify the script to stop this please. Fiddle http://jsfiddle.net/MVpyb/embedded/result/

var preText = document.getElementById('preText').innerHTML;
var redWords = ['int','char','void','setup','pinMode','void','loop','for','digitalWrite','else','delay','byte','if', 'const']; 
var blueWords = ['HIGH','LOW','OUTPUT'];
var re, word, replacement;

for (var i=0; i<redWords.length; i++) {
word = redWords[i];
replacement = '<span class="thewordRed">' + word + '</span>';
re = new RegExp(word, 'g');
preText = preText.replace(re, replacement);
}

for (var i=0; i<blueWords.length; i++) {
word = blueWords[i];
replacement = '<span class="thewordBlue">' + word + '</span>';
re = new RegExp(word, 'g');
preText = preText.replace(re, replacement);
}

document.getElementById('preText').innerHTML = preText;

***************************************************************************

.thewordBlue { color:#006699; }
.thewordRed { color:#CC6600; }
.scrollBox {
position:absolute; top:1500px; left:160px; border:1px solid #33CC33;
background-color:#F6F6E3; width:850px; height:480px; padding:0 30px;
overflow-y:scroll; overflow-x:scroll;
}

***************************************************************************

// 7-SEGMENT LED COUNTER, MULTIPLEXING USING 74HC595 8-BIT SHIFT REGISTER, INCREMENT COUNTER ZERO TO NINE TO ZERO VIA POTENTIOMETER
// Code mangled together from these sources - thanks fellas
// http://www.sweeting.org/mark/blog/20...nt-led-display
// http://thecustomgeek.com/2011/06/29/...-a-7-year-old/
// http://nootropicdesign.com/projectla.../25/led-clock/
const int latchPin = 5; // PIN CONNECTED TO PIN 12 OF 74HC595 (LATCH)
const int dataPin = 6; // PIN CONNECTED TO PIN 14 OF 74HC595 (DATA)
const int clockPin = 7; // PIN CONNECTED TO PIN 11 OF 74HC595 (CLOCK)
int counter = 0; // INITIALISE COUNTER AS ZERO
int potReading = 0;
const byte numbers[10] = // DESCRIBE EACH DIGIT IN TERMS OF DISPLAY SEGMENTS 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
{
B11111100,
B01100000,
B11011010,
B11110010,
B01100110,
B10110110,
B10111110,
B11100000,
B11111110,
B11100110,
};
void setup()
{
pinMode(latchPin, OUTPUT); // SET SR PINS TO output
pinMode(clockPin, OUTPUT);
pinMode(dataPin, OUTPUT);
}
void loop()
{
potReading = analogRead (A0);
potReading = map(potReading, 0, 1023, 0, 8);
{
if(potReading > 8)
potReading --;
show(numbers[potReading]);
}
{
if(potReading < 0)
potReading ++;
show(numbers[potReading]);
}
}
void show( byte number)
{
// USE A LOOP AND A BITWISE AND TO MOVE OVER EACH BIT THAT MAKES UP
// THE SEVEN SEGMENT DISPLAY (FROM LEFT TO RIGHT, A => G), AND CHECK
// TO SEE IF IT SHOULD BE ON OR NOT
for(int j = 0; j <= 7; j++)
{
byte toWrite = number & (B10000000 >> j);
if(!toWrite) {
continue;
} // IF ALL BITS ARE 0 THEN NO POINT WRITING IT TO THE SHIFT REGISTER,SO BREAK OUT AND MOVE ON TO NEXT SEGMENT.
shiftIt(toWrite); // OTHERWISE SHIFT IT INTO THE REGISTER
}
}
void shiftIt (byte data)
{
digitalWrite(latchPin, LOW); // SET latchPin Low WHILE CLOCKING THESE 8 BITS IN TO THE REGISTER
for (int k=0; k <= 7; k++)
{
digitalWrite(clockPin, LOW); // CLOCKPIN Low PRIOR TO SENDING A BIT
// NOTE THAT IN OUR CASE, WE NEED TO SET PINSTATE TO 0 (Low) FOR
// &#8220;ON&#8221; AS THE 74HC595 IS SINKING CURRENT WHEN USING A COMMON
// ANODE DISPLAY. IF YOU WANT TO USE A COMMON CATHODE DISPLAY THEN
// SWITCH THIS AROUND.

if ( data & (1 << k) )
{
digitalWrite(dataPin, HIGH); // TURN"ON"
}
else
{
digitalWrite(dataPin, LOW); // TURN "OFF"
}
digitalWrite(clockPin, HIGH); // AND CLOCK THE BIT IN
}
digitalWrite(clockPin, LOW); // STOP SHIFTING OUT DATA
digitalWrite(latchPin, HIGH); // SET latchPin TO High TO LOCK AND SEND DATA
}

pedro147

"correcting" post - Sorry I forgot the code tags - I should know better.

var preText = document.getElementById('preText').innerHTML;
var redWords = ['int','char','void','setup','pinMode','void','loop','for','digitalWrite','else','delay','byte','if', 'const']; 
var blueWords = ['HIGH','LOW','OUTPUT'];
var re, word, replacement;

for (var i=0; i<redWords.length; i++) {
word = redWords[i];
replacement = '<span class="thewordRed">' + word + '</span>';
re = new RegExp(word, 'g');
preText = preText.replace(re, replacement);
}

for (var i=0; i<blueWords.length; i++) {
word = blueWords[i];
replacement = '<span class="thewordBlue">' + word + '</span>';
re = new RegExp(word, 'g');
preText = preText.replace(re, replacement);
}

document.getElementById('preText').innerHTML = preText;

***************************************************************************

.thewordBlue { color:#006699; }
.thewordRed { color:#CC6600; }
.scrollBox {
position:absolute; top:1500px; left:160px; border:1px solid #33CC33;
background-color:#F6F6E3; width:850px; height:480px; padding:0 30px;
overflow-y:scroll; overflow-x:scroll;
}

***************************************************************************

// 7-SEGMENT LED COUNTER, MULTIPLEXING USING 74HC595 8-BIT SHIFT REGISTER, INCREMENT COUNTER ZERO TO NINE TO ZERO VIA POTENTIOMETER
// Code mangled together from these sources - thanks fellas
// http://www.sweeting.org/mark/blog/20...nt-led-display
// http://thecustomgeek.com/2011/06/29/...-a-7-year-old/
// http://nootropicdesign.com/projectla.../25/led-clock/
const int latchPin = 5; // PIN CONNECTED TO PIN 12 OF 74HC595 (LATCH)
const int dataPin = 6; // PIN CONNECTED TO PIN 14 OF 74HC595 (DATA)
const int clockPin = 7; // PIN CONNECTED TO PIN 11 OF 74HC595 (CLOCK)
int counter = 0; // INITIALISE COUNTER AS ZERO
int potReading = 0;
const byte numbers[10] = // DESCRIBE EACH DIGIT IN TERMS OF DISPLAY SEGMENTS 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
{
B11111100,
B01100000,
B11011010,
B11110010,
B01100110,
B10110110,
B10111110,
B11100000,
B11111110,
B11100110,
};
void setup()
{
pinMode(latchPin, OUTPUT); // SET SR PINS TO output
pinMode(clockPin, OUTPUT);
pinMode(dataPin, OUTPUT);
}
void loop()
{
potReading = analogRead (A0);
potReading = map(potReading, 0, 1023, 0, 8);
{
if(potReading > 8)
potReading --;
show(numbers[potReading]);
}
{
if(potReading < 0)
potReading ++;
show(numbers[potReading]);
}
}
void show( byte number)
{
// USE A LOOP AND A BITWISE AND TO MOVE OVER EACH BIT THAT MAKES UP
// THE SEVEN SEGMENT DISPLAY (FROM LEFT TO RIGHT, A => G), AND CHECK
// TO SEE IF IT SHOULD BE ON OR NOT
for(int j = 0; j <= 7; j++)
{
byte toWrite = number & (B10000000 >> j);
if(!toWrite) {
continue;
} // IF ALL BITS ARE 0 THEN NO POINT WRITING IT TO THE SHIFT REGISTER,SO BREAK OUT AND MOVE ON TO NEXT SEGMENT.
shiftIt(toWrite); // OTHERWISE SHIFT IT INTO THE REGISTER
}
}
void shiftIt (byte data)
{
digitalWrite(latchPin, LOW); // SET latchPin Low WHILE CLOCKING THESE 8 BITS IN TO THE REGISTER
for (int k=0; k <= 7; k++)
{
digitalWrite(clockPin, LOW); // CLOCKPIN Low PRIOR TO SENDING A BIT
// NOTE THAT IN OUR CASE, WE NEED TO SET PINSTATE TO 0 (Low) FOR
// “ON” AS THE 74HC595 IS SINKING CURRENT WHEN USING A COMMON
// ANODE DISPLAY. IF YOU WANT TO USE A COMMON CATHODE DISPLAY THEN
// SWITCH THIS AROUND.

if ( data & (1 << k) )
{
digitalWrite(dataPin, HIGH); // TURN"ON"
}
else
{
digitalWrite(dataPin, LOW); // TURN "OFF"
}
digitalWrite(clockPin, HIGH); // AND CLOCK THE BIT IN
}
digitalWrite(clockPin, LOW); // STOP SHIFTING OUT DATA
digitalWrite(latchPin, HIGH); // SET latchPin TO High TO LOCK AND SEND DATA
}

deathshadow

Here, try mine:

http://www.cutcodedown.com/for_others/pedro147/template.html

Only thing it doesn't handle is strings... really the pecking order of strings vs. comments is when you have to break down and brute force it byte-by-byte, something I wouldn't be fond of doing in JS.

as with all my examples the directory:
http://www.cutcodedown.com/for_others/pedro147/

Is unlocked for easy access to the gooey bits and pieces.

All colourations are handled in the CSS:
http://www.cutcodedown.com/for_others/pedro147/screen.css

The Script:
http://www.cutcodedown.com/for_others/pedro147/arduinoCodeFormat.js

Is in a nice clean anonymous function so no namespace conflict worries, and it auto-attaches to any PRE tag that has the .arduinoCode class on it in the page, so you can run multiple instances of this at once by just adding the script right before </body>.

It does require an outer PRE tag AND code tags, but you should have that anyways since CODE is a inline-level tag, and this is a code block needing a block level container... Remember:

If I was referring to the <code>digitalWrite</code> function, I'd mark it up like that. That's why CODE is a inline-level tag. You have a multi-line listing of preformatted text, you put a PRE around it. If that multi-line listing is code, you put PRE around CODE -- Semantic markup, gotta love it.

... and as a cute trick, I close the code tag before comments and open it again after -- since comments aren't code. Mostly it just means we don't need a SPAN with a class.

Most of it has to be done with split since I added block comment functionality in addition to line comments.

I also took the liberty of cleaning up your code a bit -- since I'm pretty familiar with the C++ the Arduino uses thanks to my own experiments and projects with the Teensy++ and Teensy 3.

Hope this helps.

-- edit -- Oh, almost forgot. I added bbCode support inside of comments too just for laughs, since you had those URL in the header comment I figured why not. Added both normal URL and targeted, as well as B, I, STRONG and EM.

-- edit edit -- also on the Arduino compiler, do/while saves a few bytes and executes faster in some cases -- those loops should run significantly faster that way. Trick I picked up when working with CC65 for the Commodore 64, seems to work in Arduino code too. My "zoot" project I'd not even have been able to stuff the code into the teensy++ without counting every byte... be real fun with the next-gen leveraging a 40mhz ARM3 on the Teensy 3.0.

pedro147

Thanks a lot deathshadow. As you can most likely see I am a rank amateur with both web coding and Arduino - but very enthusiastic none-the-less. I will have a look at your excellent piece of work over the next few days and see if I can implement it as it looks to be just what I am after. Most people on the the forums I have sought help on for this, just said to use syntaxhighlighter which just does not seem to be right for Arduino code. So I am glad there is another Arduino aficionado out there that has much greater technical abilities than myself and has stepped up to the plate so to speak. Seeing as my skillset is pretty low with this would you mind if I contact you through this thread if I have any trouble getting this to work for me please. If that is too much of an imposition I thank you for what you have offered so far, Pedro

deathshadow

I'm always willing to help anyone who needs help. It's what I do... -- well, that and piss off people who go "I want help" but then don't want to actually hear what they are doing wrong :/

Gilmore: Is it really wise to provoke him?
O'Neill: It's what I do.

... and actually on AVR targets I'm a bit of an amateur too, but I've been programming for over three and a half decades, so something like C++ is old news for me. I'm far less capable at the low-level electronics, which is why my being able to interface a display and actually set up 16 capacitive touch-buttons and a PS/2 joystick was a giant undertaking for me.

Much less I SUCK at woodworking.

pedro147

Thanks again It is refreshing to hear that there are still people around who are " willing to help anyone who needs help. It's what I do... -- well, that and piss off people who go "I want help" but then don't want to actually hear what they are doing wrong :/" I always appreciate any help I am offered by good people such as yourself in these online forums. If it was not for the help and encouragement that I received on the Arduino forum, I would still not have a clue as to how to do anything with that little PCB that I purchased two years ago. And now I am annoying people on web forums and giving the Arduino guys a rest for a while.

pedro147

deathshadow – I have had a better look at your Arduino code formatter and I can now see how to implement it … just as you said Too easy Nice work there. I see that you just add the url tags around the links to format and activate them, nice. Also I see that you exercised your code optimising touches on the Arduino code which as you said is a necessity on these small micro controllers, so thanks for that too. What does your zoot project do? Looks interesting. I look forward to looking through your script to see how it applies the css to the Arduino code too. Thanks again.

deathshadow

pedro147;1347245 wrote:
just as you said Too easy

Too often these days people are writing JS where the HTML hooks the scripting instead of the other way around, or that you have to target by specific Id's in the scripting. I like making my scripts target the markup instead -- since then the page can gracefully degrade scripting off. It's also nice as it means you can have more than one block on the page formatted.

pedro147;1347245 wrote:
What does your zoot project do?

It's a wind controller akin to the Akai EWI. I have my own website about the USB version:

http://www.ewiusb.com/

It's basically an electronic woodwind. You blow into it and a pressure sensor is translated into midi controller data. The keys are capacitive touch sensitive (so no moving parts -- like a touch lamp). The fancy non-usb models have 8 octave rollers giving you a ridiculous possible 10 octaves, the USB model has 3 rollers resulting in a five octave range. The result of all the inputs is turned into a MIDI data stream.

There were a number of things I wish the EWI USB had that it's more expensive counterparts do -- like an actual display to tell you what's going on, the ability to do things like setting the instrument key, and so forth -- and a few things I think would be nice like the ability to output major and minor chords with each note on a different MIDI channel. (so each one could be assigned a different voice)... which is where my attempts to build my own version come into play.

The one from Akai also has some physical issues I'm trying to address like being difficult to just 'hold on to' -- which is why I was thinking that maybe it should just have a velcro strap around the right hand like a camcorder. Or that the USB plug and wire comes straight out the bottom in a manner that you really shouldn't rest it on it's end, or you'll stress the cord.

Originally I wanted to build it with a normal arduino, but it just didn't have enough oomph or pinouts. A Teensy++ proved much more effective particularly since they have optimized I/O writes and reads in it's version of the Arduino interface, but I was still resorting to a bit more machine language than I'd have liked, and it's not QUITE as responsive as I'd like when you have more than two-thirds the keys touched. I figure if I was right on the edge of perfection with the Teensy++, the 40mhz Arm3 in the Teensy 3.0 should be overkill...

The cool thing about the Teensy 3.0 being that it might be an entirely different CPU family, but it will run most Arduino Sketches.

The software from Akai and Garritan is... meh. But you combine it with some good software like Sample Modeling's "The Saxophones" and it's a whole different beastie.

See this fellow playing the EWI 4000s with the Mr. Sax T softsynth from "The Saxophones"
https://www.youtube.com/watch?v=KIGXcMZ0WnE

Or Bernie Kenerson with the EWI USB and the Mr. Sax B softsynth:
https://www.youtube.com/watch?v=Y6bWKpF10NQ

Basically, the end result is not what comes to mind for most people when they think MIDI.

I used to be a Tenor and Bari sax player, but a few years ago some quacks screwed up and over/mis-medicated me right into a slew of problems including a mild parkinsonism and neurological damage that makes it hard for me to press the keys on a real sax -- The EWI being touch sensitive instead of having buttons you press means I still get to play, instead of having my muse stifled.

... and yet I'm STILL a model M elitist jacktard when it comes to computer keyboards.

It's also nice as I can't afford a new Bari (a cheap one is five grand, a good one is the cost of a car) -- while the getting a EWI USB and "The Sax Brothers" works out to the same outlay as a cheap chinese e-bay alto sax (well under a grand).

Though I've wanted to build one since I saw this performance live when I was a teenager in the '80's... When my crappy little high school quartet (Frayed Edges) was on a opposite stage.
https://www.youtube.com/watch?v=b6_iI5DgL7Q

JMRKER

pedro147;1347133 wrote:
JMRKER - I got your script to work on my site page at http://www.pedrosdigitalsolutions.com/Webdeveloper%20Arduino.html
but I am trying to replace only whole words. However the script is affecting the 'if' in the word 'shiftIt'. How might I modify the script to stop this please. Fiddle http://jsfiddle.net/MVpyb/embedded/result/

I know you already have a solution from 'DeathShadow',
but only for completeness of your question, here is an answer.

Note: It does require a bit of consistency in the formatting of your statements.
For example, it will not recognize 'if(' but does highlight correctly 'if ('
and 'for(' is not highlighted correctly unless typed 'for ('
Also 'shiftit(' does display correctly regardless of the case of the letters (upper-case or lower-case)
because there is no testing of the case of the letters in the replace function.

I would stick with 'DeathShadow's code unless it is too difficult to decipher.
Until then you could use mine as a backup as you study and learn from his/her code.
Good Luck!

Whoops. Forgot to include code change...

<!DOCTYPE HTML>
<html>
<head>
<title>pedroduino.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="image/x-icon" href="/custom pd/images/arduino.ico" rel="shortcut icon">
<link media="screen" type="text/css" href="style.css" rel="stylesheet">

<style type="text/css" media="all">
 .thewordBlue { color:#006699; }
 .thewordRed { color:#CC6600; }
 .thewordLogic { color:green; }

 .textInfo { position:absolute; top:40px; left:140px; }
 .scrollBox {
  position:absolute; top:150px; left:92px; border:1px solid #33CC33;
  background-color:#F6F6E3; width:850px; height:480px; padding:0 30px;
  overflow-y:scroll; overflow-x:scroll;
 }
</style>

</head>
<body>
<div id="content" style="height:1000px;">
<!--CONTENT GOES HERE-->
 <div class="textInfo">
  <br>This is some text int that may contain void loop some full or partial void keywords that I do not want the js replace script to change
  <p><pre>int char void setup pinMode void loop for digitalWrite else delay HIGH LOW OUTPUT</pre>
 </div>

<!--POSITION SCROLL BOX-->
 <div class="scrollBox">
  <p style="width:250%;">
   <pre id="preText">  <!-- ARDUINO CODE -->

***************************************************************************

// 7-SEGMENT LED COUNTER, MULTIPLEXING USING 74HC595 8-BIT SHIFT REGISTER,
// INCREMENT COUNTER ZERO TO NINE TO ZERO VIA POTENTIOMETER
// Code mangled together from these sources - thanks fellas
// http://www.sweeting.org/mark/blog/20...nt-led-display
// http://thecustomgeek.com/2011/06/29/...-a-7-year-old/
// http://nootropicdesign.com/projectla.../25/led-clock/
const int latchPin = 5; // PIN CONNECTED TO PIN 12 OF 74HC595 (LATCH)
const int dataPin = 6; // PIN CONNECTED TO PIN 14 OF 74HC595 (DATA)
const int clockPin = 7; // PIN CONNECTED TO PIN 11 OF 74HC595 (CLOCK)
int counter = 0; // INITIALISE COUNTER AS ZERO
int potReading = 0;
// DESCRIBE EACH DIGIT IN TERMS OF DISPLAY SEGMENTS 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
const byte numbers[10] = 
{
  B11111100,
  B01100000,
  B11011010,
  B11110010,
  B01100110,
  B10110110,
  B10111110,
  B11100000,
  B11111110,
  B11100110,
};
void setup() {
  pinMode(latchPin, OUTPUT); // SET SR PINS TO output
  pinMode(clockPin, OUTPUT);
  pinMode(dataPin, OUTPUT);
}
void loop() {
  potReading = analogRead (A0);
  potReading = map(potReading, 0, 1023, 0, 8);
  {
    if (potReading > 8) potReading --;
    show(numbers[potReading]);
  }
  {
    if (potReading < 0) potReading ++;
    show(numbers[potReading]);
  }
}
void show( byte number) {
// USE A LOOP AND A BITWISE AND TO MOVE OVER EACH BIT THAT MAKES UP
// THE SEVEN SEGMENT DISPLAY (FROM LEFT TO RIGHT, A => G), AND CHECK
// TO SEE IF IT SHOULD BE ON OR NOT
  for (int j = 0; j <= 7; j++) {
    byte toWrite = number & (B10000000 >> j);
    if (!toWrite) { continue; } // IF ALL BITS ARE 0 THEN NO POINT WRITING IT TO THE SHIFT REGISTER,SO BREAK OUT AND MOVE ON TO NEXT SEGMENT.
    shiftIt(toWrite); // OTHERWISE SHIFT IT INTO THE REGISTER
  }
}
void shiftIt (byte data) {
  digitalWrite(latchPin, LOW); // SET latchPin Low WHILE CLOCKING THESE 8 BITS IN TO THE REGISTER
  for (int k=0; k <= 7; k++) {
    digitalWrite(clockPin, LOW); // CLOCKPIN Low PRIOR TO SENDING A BIT
// NOTE THAT IN OUR CASE, WE NEED TO SET PINSTATE TO 0 (Low) FOR
// &#8220;ON&#8221; AS THE 74HC595 IS SINKING CURRENT WHEN USING A COMMON
// ANODE DISPLAY. IF YOU WANT TO USE A COMMON CATHODE DISPLAY THEN
// SWITCH THIS AROUND.

if ( data & (1 << k) ) {
  digitalWrite(dataPin, HIGH); // TURN"ON"
} else {
  digitalWrite(dataPin, LOW); // TURN "OFF"
}
  digitalWrite(clockPin, HIGH); // AND CLOCK THE BIT IN
  }
  digitalWrite(clockPin, LOW); // STOP SHIFTING OUT DATA
  digitalWrite(latchPin, HIGH); // SET latchPin TO High TO LOCK AND SEND DATA
}
   </pre>

// demonstration of a DIFFERENT code block
   <pre id="postText">
void displayLogicCode (byte info) {  // Non-sense code for_display DEMO ONLY
  shiftit(info);  

  switch (info) {
    case 0: shiftit(info); break;
    case 0: shiftit(info * 2); break;
    case 0: shiftit(info * 4); break;
    default: break;  // do nothing
  }
}
   </pre>

  </p>
 </div>
<!--CLOSE STYLE DIV FOR SCROLL BOX-->
</div> <!-- CONTENT ENDS HERE -->

<script type="text/javascript">
function highlightArduinoCode(IDS) {
  var preText = document.getElementById(IDS).innerHTML;
  var logicWords = ['if ','else ', 'switch ','case ','break;']; 
  var redWords = ['int ','char ','void ','setup ','pinMode','for ','loop;',
                 'digitalWrite','digitalRead','delay','byte ','const ']
  var blueWords = ['HIGH','LOW','OUTPUT'];
  var re, word, replacement;

  for (var i=0; i<redWords.length; i++) {
    word = redWords[i];
    replacement = '<span class="thewordRed">' + word + '</span>';
    re = new RegExp(word, 'g');
    preText = preText.replace(re, replacement);
  }

  for (var i=0; i<blueWords.length; i++) {
    word = blueWords[i];
    replacement = '<span class="thewordBlue">' + word + '</span>';
    re = new RegExp(word, 'g');
    preText = preText.replace(re, replacement);
  }

  for (var i=0; i<logicWords.length; i++) {
    word = logicWords[i];
    replacement = '<span class="thewordLogic">' + word + '</span>';
    re = new RegExp(word, 'g');
    preText = preText.replace(re, replacement);
  }

  document.getElementById(IDS).innerHTML = preText;
}

highlightArduinoCode('preText');
highlightArduinoCode('postText');

</script>

</body>
</html>

pedro147

Those EWI's sound absolutely amazing thanks for the share deathshadow. Such a rich, full sound that it is hard to believe that it is electronically produced rather than good old fashioned "vibrating air" alone There is a guy that frequents the Arduino forum that is heavily into electronic type music that you may feel inclined to take a look at. Here is his own site http://www.thebox.myzen.co.uk/Hardware/Projects.html
He is Grumpy Mike on the Arduino forum. All the best and thanks for your help. Pedro.

deathshadow

@JMERKER, the problem with "if(", "jiffy" or just plain "if" is why regex has \b -- which detects word boundaries. If instead you were to use:

re = new RegExp('\b' + word + '\b', 'g');

It means "if(" and "if" will detect true for just the "if" part, but "jiffy", "iffy" and even "exif" will not.

Though with your code, I'd suggest losing the "variables for nothing" you've got in there.

	for (var i = 0; i < redWords.length; i++) preText = preText.replace(
		new RegExp('\\b(' + redWords[i] + ')\\b'),
		'<span class="theWordRed">$1</span>'
	);

Far simpler, less overhead, and likely faster execution.

JS 101, if you aren't using a value from a lookup over and over again (like from getElementById) do not waste memory on creating "variables for nothing"... even if every tutorial out there seems to be doing so -- same goes for most any other language, since the overhead of creating the extra variables on the stack can add up quickly. PHP tutorials and even PHP.net are notorious for this -- see the stupid $query variable people seem to insist on making.