« ArduinoにPIRとWTV020-SDを使って音声警報装置 | Main | VC0706 で撮影し SDカード に記録する Arduino camera »

04/09/2017

ココログで arduino sketchソースコード を少し見やすくするには・・・

ブログのソースコードに行番号を付けた見やすい表示にするには、google-code-prettify の公式サイトから一番新しいzipファイル (今はこれかな:prettify-21-Jul-2010.zip)をdownloadして、適当な場所に解凍する。

解凍すると google-code-prettify フォルダが作られ、その中に srcフォルダ がある。

その srcフォルダの中から、 prettify.css, prettify.js, lang-css.js をココログのフォルダに格納する。

フォルダの格納先は、 ココログを開いて⇒コントロールパネル⇒「ファイルのタグ」をクリック
僕は、jsファイルを scriptsフォルダに、cssファイルを stylesフォルダにアップロードしたが、これらのフォルダが有れば、その場所を先ほどdownloadした内の3つのファイルのアップロード先とする。
フォルダが無ければ、先ず「新しいフォルダの作成」に scripts と記載し、「フォルダを作成」のボタンをクリックする。
stylesフォルダも同様に作成する。

次に、download し解凍した3つのファイルを其々 scripts,styles のフォルダにアップロードする。
 ・現在のフォルダで srcを選択し、
 ・新規ファイルのアップロードの「ファイルを選択」ボタンをクリックして、
 開いたエクスプローラーからファイルを選択した後、「アップロード」ボタンをクリックする。
  アップロードが完了したら、「ブログ」のタブをクリックして、左下画面の下方にある「設定」をクリックする。
 ブログの基本情報画面になる。

ブログのサブタイトルの中に、下記のように script の記載をする。
この窓画面は小さくて編集しにくいので、Windowsのテキストを開いておいて、そこで作業する事をお勧めする。
僕は、Windowsのテキストを開いてから下記を打ち込み、

<script src="../scripts/lang-css.js" type="text/javascript"></script>
<script src="../scripts/prettify.js" type="text/javascript"></script>
<link href="../styles/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"> SyntaxHighlighter.all(); </script>

上記のテキストを書いた後、これらをコピーして、サブタイトルの中に貼り付けた。

「変更を保存」ボタンをクリックして、設定変更の内容をサイトに反映させるために「サイトに反映」ボタンをクリックした。

次の画面で、「すべてのファイル」そのまま・・・「反映」ボタンをクリックで全てのブログ記事に反映された。

ここまでの作業は、準備段階である。

各ブログページで行う作業は、

ブログの本文を記載する場所で、HTMLの編集タブをクリックして、
ソースリスト記載部の直前に、
 <pre class="prettyprint linenums"> 

と記載し ソースリスト終了部分に </pre> と書いて締めくくる。
この通り行ったが、デフォルトでは 5行単位での行番号表示となってしまう。

一行ごとに行番号を付けるには、prettify.cssの内の記述を変更する必要があるようだ・・・

下記のようにやってみたが、棒のブログでは上手く行かなかった。


《prettify.cssの編集作業》
 prettify.cssの後半部分に記載されている  
   li.L0, li.L1, … li.L8 { list-style-type: none } 

 を全てコメント行にしてしまうか、{}内を消去する。

 すなわち、下記のように書き換えて保存。

li.L0, li.L1, … li.L8 {  }

そこで、 ブログ本文の<pre ・・・ >の記述の直前に下記を追記した。

<style>
 li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:decimal}
 </style> 

 これで、Sketchソースコード部分の表示はこのようになった。
しかし、「<」「>」「"」「'」「&」は、HTML編集作業の中で下記のように文字を置き直して記載する必要がある。
 「<」 ⇒ 「&lt;」
 「>」 ⇒ 「&gt;」
 「"」 ⇒ 「&quot;」
 「'」 ⇒ 「&apos;」
 「&」 ⇒ 「&amp;

// Sketch : It detects a human and an animal by the PIR sensor.
//          Then, it makes warning by voice using WTV020-SD.
 
#include <Wtv020sd16p.h>

int resetPin   =  2;  // Reset
int clockPin   =  3;  // Clock
int dataPin    =  4;  // Data
int busyPin    =  5;  // Busy
int pirPin     =  6;  // PIR sensor
int p07Pin     =  7;  // P07
int ledPin     = 13;  // LED
int pirState =  LOW;   // states of PIR at the initial

  Wtv020sd16p wtv020sd16p(resetPin,clockPin,dataPin,busyPin);
 
void setup()
{
  Serial.begin(115200);
  pinMode(   pirPin,  INPUT); 
  pinMode(   p07Pin, OUTPUT); 
  pinMode(   ledPin, OUTPUT);    
  wtv020sd16p.reset();

  digitalWrite( p07Pin,HIGH);       // Button(P07) is open(=Off)
  digitalWrite( ledPin, LOW);       // LED:OFF
}
 
void loop()
{
  pirState = digitalRead(pirPin);   // read the state of PIR sensor
  if (pirState == HIGH) {           // detected =>"HIGH", if not-detected =>"LOW"
                                    // Detected!

   digitalWrite( p07Pin,  LOW);     // Button(P07) is close(=On) :PREV  
   digitalWrite( ledPin, HIGH);     // LED :ON  
   
//Plays asynchronously an audio file.
   wtv020sd16p.asyncPlayVoice(1);   // Play audio file number 1
   delay(20000);                    // it sounds for 20 seconds

   digitalWrite( p07Pin, HIGH);     // Button(P07) is close(=On) :PREV 
   digitalWrite( ledPin,  LOW);     // LED:OFF
   delay(3000);  
  }
   wtv020sd16p.reset();
}

« ArduinoにPIRとWTV020-SDを使って音声警報装置 | Main | VC0706 で撮影し SDカード に記録する Arduino camera »

PC and PC troubles」カテゴリの記事

Comments

Post a comment

Comments are moderated, and will not appear on this weblog until the author has approved them.

(Not displayed with comment.)

TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/540128/65124717

Listed below are links to weblogs that reference ココログで arduino sketchソースコード を少し見やすくするには・・・:

« ArduinoにPIRとWTV020-SDを使って音声警報装置 | Main | VC0706 で撮影し SDカード に記録する Arduino camera »

June 2017
Sun Mon Tue Wed Thu Fri Sat
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

Recent Trackbacks

無料ブログはココログ