www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 34

Thread: Javascript to format Arduino code

Hybrid View

  1. #1
    Join Date
    Jul 2014
    Location
    Canberra Australia
    Posts
    31

    Javascript to format Arduino code

    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.

    Code:
    <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>

  2. #2
    Join Date
    Jan 2005
    Posts
    369
    Firstly, I would probably put an ID on each of the PRE elements, then remove
    Code:
    document.body.innerHTML
    and replace it with
    Code:
    document.getElementById("whateverIDyouUsed")
    You have quite a bit more re-factoring to do, but let us know if that sorts out the main problem.

  3. #3
    Join Date
    Jul 2014
    Location
    Canberra Australia
    Posts
    31

    Javascript to format Arduino code

    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.

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,413
    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
    HTML Code:
    <!--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.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  5. #5
    Join Date
    Jul 2014
    Location
    Canberra Australia
    Posts
    31
    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 because it is too long. Thanks Pedro.

  6. #6
    Join Date
    Jul 2014
    Location
    Canberra Australia
    Posts
    31
    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.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415

    Lightbulb

    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).

    Code:
    <!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!

  8. #8
    Join Date
    Jul 2014
    Location
    Canberra Australia
    Posts
    31
    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.

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415
    Quote Originally Posted by pedro147 View Post
    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!

  10. #10
    Join Date
    Jul 2014
    Location
    Canberra Australia
    Posts
    31
    JMRKER - I got your script to work on my site page at http://www.pedrosdigitalsolutions.co...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/

    Code:
    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
    }
    Last edited by jedaisoul; 07-20-2014 at 02:42 AM. Reason: correcting code tags

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,415

    Arrow

    Quote Originally Posted by pedro147 View Post
    JMRKER - I got your script to work on my site page at http://www.pedrosdigitalsolutions.co...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...
    Code:
    <!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
    // “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
    }
       </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>
    Last edited by JMRKER; 07-21-2014 at 11:29 AM. Reason: Forgot to include code

  12. #12
    Here, try mine:

    http://www.cutcodedown.com/for_other.../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_other...147/screen.css

    The Script:
    http://www.cutcodedown.com/for_other...oCodeFormat.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.
    Last edited by deathshadow; 07-20-2014 at 08:09 AM.

  13. #13
    Join Date
    Jul 2014
    Location
    Canberra Australia
    Posts
    31
    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

  14. #14
    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.
    Last edited by deathshadow; 07-20-2014 at 08:27 AM.

  15. #15
    Join Date
    Jul 2014
    Location
    Canberra Australia
    Posts
    31
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles