First switch the jumper in the green area to connect External the 3.3V pins. Then connect an external GND to one of the two black arrows in the pink circle and external power to one of the two red arrows.") 28 | - i++ 29 | +seeForums(i, thismod, thismod.toUpperCase(), projects) 30 | -------------------------------------------------------------------------------- /views/ja-FRE-tweet.jade: -------------------------------------------------------------------------------- 1 | extends ja-layout 2 | 3 | block content 4 | .row 5 | .large-12.columns.fre-container 6 | .row 7 | .large-12.columns 8 | h1 Tesselではじめてのツイート 9 | br 10 | 11 | .row 12 | .large-12.columns 13 | p 無線LANへの接続が完了したので、ツイッターにツイートをしてみましょう。 14 | p このページのプログラムの例は、当社が作成したダミーのツイッターアカウント（@TesselTweet）に、Tesselからツイートを書き込みます。 15 | p あなた自身のツイッターアカウントでツイートを書き込みたい場合は、apps.twitter.comのページで、読み書き権限付きのOAuthトークンを作成し、このスクリプトの中に貼り付けてください。 16 | .row 17 | .large-12.columns 18 | .greyBar(style="height:2px;") 19 | .row.large-12.columns 20 | p まず、「tessel-code」ディレクトリの中に、もうひとつディレクトリを作ってください： 21 | code 22 | cli mkdir tessel-tweet 23 | cli cd tessel-tweet 24 | cli npm init 25 | 26 | p 以下のスクリプトをコピーし、「tweet.js」という名前のファイルに保存してください。「twitterHandle」という変数を設定している部分を、あなた自身のツイッターアカウントに変更するといいですよ。 27 | 28 | .row 29 | .large-12.columns 30 | pre.prettyprint 31 | code. 32 | // Nodeのrequire 33 | var twitter = require('twitter'); 34 | var util = require('util') 35 | 36 | var twitterHandle = '@technicalhumans'; 37 | // ツイートする内容 38 | var status = 'Hello ' + twitterHandle + '. This is your #Tessel speaking.'; 39 | 40 | // OAuthのキーとシークレットを設定する 41 | var twit = new twitter({ 42 | consumer_key: 'O7oc0pvsZn4xjgcuHuYdX4FaC', 43 | consumer_secret: 'iJYuHFz2sD46Nvk3mcwzX8uih14aEAMgVWdWoR59nx8v6Zl7ZX', 44 | access_token_key: '2529232909-luARGU89K4CKFMvfzBjCgG6ubefzDkdDWkSB85i', 45 | access_token_secret: 'GXQfuzvGdjLEs3t1HEYfhQ9x9bdBcSBVXjBkbRgwYlOE0' 46 | }); 47 | 48 | // ツイートする！ 49 | twit.updateStatus(status, function(data) { 50 | if (data.name === 'Error') { 51 | console.log('error sending tweet!', data.message); 52 | } 53 | else { 54 | console.log('tweet successful!'); 55 | } 56 | }); 57 | .row 58 | .large-12.columns 59 | p このスクリプトでは、 60 | a(href="https://www.npmjs.org/package/twitter") Node.jsのツイッター用ライブラリ 61 | | を使用しています。 62 | 63 | p 以下のように、npmコマンドを使ってツイッター用ライブラリをインストールしてください。 64 | code 65 | cli npm install twitter 66 | 67 | .row 68 | .large-4.columns 69 |
70 | p 準備ができたら、このスクリプトを実行してみましょう。 71 | code 72 | cli tessel run tweet.js 73 | p 74 | a(href="https://twitter.com/TesselTweet" target=0) ツイートされたかどうか、確かめてみてください。 75 | 76 | .large-8.columns.right 77 | img(src="#{s3url}tessel-tweet-2.png", style="float:right;") 78 | 79 | 80 | .row 81 | .large-12.columns 82 |
83 | p おまけ：センサーモジュールから読み取った値をツイートしてみましょう。 84 | 85 | block bottom_nav 86 | .row 87 | .large-5.columns.left 88 | a.bottomButton(href="/ja/wifi" class="button") 戻る：無線LAN 89 | .large-6.columns.right 90 | a.bottomButton.right(href="/ja/usage" class="button") 進む：コマンド 91 | -------------------------------------------------------------------------------- /views/FRE-tweet.jade: -------------------------------------------------------------------------------- 1 | extends layout 2 | 3 | block content 4 | .row 5 | .large-12.columns.fre-container 6 | .row 7 | .large-12.columns 8 | h1 Tessel's First Tweet 9 | br 10 | 11 | .row 12 | .large-12.columns 13 | p Now that you're connected to Wifi, let's try a tweet! 14 | p This code snippet makes Tessel send a tweet from a dummy account (@TesselTweet) that we've created for this. 15 | p If you want to post from your own account, go to apps.twitter.com, create your own OAuth tokens with read and write permissions, and paste them into the script. 16 | .row 17 | .large-12.columns 18 | .greyBar(style="height:2px;") 19 | .row.large-12.columns 20 | p First, create a new directory within your "tessel-code" directory: 21 | code 22 | cli mkdir tessel-tweet 23 | cli cd tessel-tweet 24 | cli npm init 25 | 26 | p Now copy and paste the following into a new file and save it as "tweet.js". Change the twitterHandle var to your own Twitter handle. 27 | 28 | .row 29 | .large-12.columns 30 | pre.prettyprint 31 | code. 32 | // Node requires 33 | var twitter = require('twitter'); 34 | var util = require('util') 35 | 36 | var twitterHandle = '@technicalhumans'; 37 | // The status to tweet 38 | var status = 'Hello ' + twitterHandle + '. This is your #Tessel speaking.'; 39 | 40 | // Enter the oauth key and secret information 41 | var twit = new twitter({ 42 | consumer_key: 'O7oc0pvsZn4xjgcuHuYdX4FaC', 43 | consumer_secret: 'iJYuHFz2sD46Nvk3mcwzX8uih14aEAMgVWdWoR59nx8v6Zl7ZX', 44 | access_token_key: '2529232909-luARGU89K4CKFMvfzBjCgG6ubefzDkdDWkSB85i', 45 | access_token_secret: 'GXQfuzvGdjLEs3t1HEYfhQ9x9bdBcSBVXjBkbRgwYlOE0' 46 | }); 47 | 48 | // Make a tweet! 49 | twit.updateStatus(status, function(data) { 50 | if (data.name === 'Error') { 51 | console.log('error sending tweet!', data.message); 52 | } 53 | else { 54 | console.log('tweet successful!'); 55 | } 56 | }); 57 | .row 58 | .large-12.columns 59 | p We're using the 60 | a(href="https://www.npmjs.org/package/twitter") twitter Node.js 61 | | library for convenience 62 | 63 | p We'll need to install the library using npm: 64 | code 65 | cli npm install twitter 66 | 67 | .row 68 | .large-4.columns 69 |
70 | p Now run 71 | code 72 | cli tessel run tweet.js 73 | p 74 | a(href="https://twitter.com/TesselTweet" target=0) Check Twitter for your tweet! 75 | 76 | .large-8.columns.right 77 | img(src="#{s3url}tessel-tweet-2.png", style="float:right;") 78 | 79 | 80 | .row 81 | .large-12.columns 82 |
83 | p Bonus: Try making Tessel tweet output from a module. 84 | 85 | block bottom_nav 86 | .row 87 | .large-5.columns.left 88 | a.bottomButton(href="/wifi" class="button") Prev: Wifi 89 | .large-6.columns.right 90 | a.bottomButton.right(href="/usage" class="button") Next: Usage 91 | -------------------------------------------------------------------------------- /views/ja-FRE-usage.jade: -------------------------------------------------------------------------------- 1 | extends ja-layout 2 | 3 | block content 4 | .row 5 | .large-12.columns.fre-container 6 | h1 コマンドの使い方 7 | 8 | p Tesselのコマンドの全てのオプションを見るには、以下のコマンドを実行してください。 9 | code 10 | cli tessel --help 11 | 12 | p これらのオプションのうち、よく使う物を以下に説明します： 13 | 14 | .row 15 | .large-12.columns 16 | .greyBar(style="height:2px;") 17 | .row 18 | .large-12.columns 19 | h2 20 | code tessel run <script.js | ディレクトリーへのパス> 21 | p このコマンドを実行すると、あなたの書いたプログラムがTesselのRAMに転送され、実行されます。Tesselがリセットされるか、キーボードのCtrl-Cを押してこのコマンドの実行を停止すると、Tesselに転送されたプログラムは消えてしまいます。このコマンドは、開発中にプログラムを実行してみるのに適しています。このチュートリアルでも、全般にこのコマンドを使います。 22 | 23 | p 以下のコマンドの例は、 24 | a(href="/ja/blinky") 点滅 25 | | の項で使いました。 26 | 27 | code 28 | cli tessel run blinky.js 29 | 30 | code 31 | .console-output 32 | | >> Bundling directory ...
33 | | >> Deploying bundle ...
34 | | >> Running script ...
35 | | >> "I'm blinking! (Press CTRL + C to stop)"
36 | | >> "I'm blinking! (Press CTRL + C to stop)"
37 | | >> "I'm blinking! (Press CTRL + C to stop)"
38 | | >> ...
39 | .row 40 | .large-12.columns 41 | .greyBar(style="height:2px;") 42 | .row 43 | .large-12.columns 44 | h2 45 | code tessel push <script.js | ディレクトリーへのパス> 46 | p このコマンドを実行すると、あなたの書いたプログラムがTesselのフラッシュメモリに書き込まれます。Tesselの電源を入れると、このプログラムが自動的に実行されます。Tesselをリセットしても、プログラムは消えません。プログラムが書き込まれている状態で「tessel run」コマンドを実行すると、別のプログラムがTesselに転送されて実行されますが、Tesselをリセットするとフラッシュメモリに書き込まれている元のプログラムが実行されます。 47 | 48 | p 「blinky.js」を保存した「tessel-code」ディレクトリーからなら、以下のように実行します。 49 | code 50 | cli tessel push blinky.js 51 | 52 | code 53 | .console-output 54 | | >> Bundling directory ...
55 | | >> Deploying bundle ...
56 | | >> Running script ...
57 | | >> Finished deployment
58 | 59 | p フラッシュメモリに書き込まれているプログラムが動作しているときは、そのままではログメッセージを見ることができません。「tessel push」コマンドを実行したあと、ログメッセージを見るには、以下のコマンドを実行してください。 60 | code 61 | cli tessel logs 62 | 63 | code 64 | .console-output 65 | | >> "I'm blinking! (Press CTRL + C to stop)"
66 | | >> "I'm blinking! (Press CTRL + C to stop)"
67 | | >> ...
68 | .row 69 | .large-12.columns 70 | .greyBar(style="height:2px;") 71 | .row 72 | .large-12.columns 73 | h2 74 | code tessel erase 75 | p このコマンドを実行すると、Tesselのフラッシュメモリに書き込まれているプログラムが消去されます。もちろん、Tesselのファームウェアはそのままです。バグのあるプログラムを書き込んでしまったときは、このコマンドの出番です。 76 | 77 | p 試してみましょう。「tessel push」コマンドを使って、上記の点滅のプログラムをTesselに書き込んでから、TesselをUSBコネクタからはずして、もういちど接続してください。数秒後、ランプが点滅し始めます。 78 | p つぎに、以下のコマンドを実行してください。 79 | code 80 | cli tessel erase 81 | 82 | code 83 | .console-output 84 | | >> Attempting to erase filesystem
85 | 86 | p Tesselのフラッシュメモリの点滅のプログラムが消去され、ランプは点滅しなくなります。 87 | 88 | 89 | block bottom_nav 90 | .row 91 | .large-6.columns.left 92 | a.bottomButton(href="/ja/wifi" class="button") 戻る：無線LAN 93 | //- .large-6.columns.left 94 | //- a.bottomButton(href="/ja/tweet" class="button") 戻る：ツイート 95 | .large-6.columns.right 96 | a.bottomButton.right(href="/ja/finished" class="button") 進む：終わり 97 | -------------------------------------------------------------------------------- /views/ja-FRE-install.jade: -------------------------------------------------------------------------------- 1 | extends ja-layout 2 | block head 3 | script(src="/javascripts/custom/install.js") 4 | 5 | block content 6 | .row 7 | .large-12.columns.fre-container#anchor 8 | h1 Tesselのインストール 9 | 10 | p あなたが使っているOSを選んでください。 11 | 12 | dl#install-tabs(class="tabs contained three-up" data-tab) 13 | dd.active 14 | a#osx-tab(href="#tab-osx" data-toggle="tab" ) OSX 15 | dd 16 | a#linux-tab(href="#tab-linux" data-toggle="tab") Linux 17 | dd 18 | a#pc-tab(href="#tab-pc" data-toggle="tab") Windows 19 | 20 | .tabs-content#install-content 21 | .content.active#tab-osx 22 | p Tesselのコマンドラインツールをインストールするには、あらかじめNode.jsをインストールしておく必要があります。Node.jsは、Node.jsのオフィシャルサイトからダウンロードしてインストールできます。もしもHomebrewがインストール済みなら、以下のコマンドでインストールすることができます。 23 | code 24 | cli brew install node 25 | p Node.jsのインストールが済んだら、以下のコマンドを入力してください。 26 | code 27 | cli npm install -g tessel 28 | p 失敗した場合は、エラーメッセージをインストールについての掲示板に投稿してください。 29 | p うまくいった場合は、ファームウェアのアップデートに進んでください。 30 | 31 | .content#tab-linux 32 | p Tesselのコマンドラインツールをインストールするには、あらかじめNode.jsをインストールしておく必要があります。Node.jsは、Node.jsのオフィシャルサイトからダウンロードしてインストールできます。また、各種Linuxのパッケージマネージャーを使ってインストールしたい場合には、このページの手順に従ってください。 33 | p Ubuntu13.10以降のOSを使っている場合は、以下のコマンドを実行してください。 34 | code 35 | cli apt-get install nodejs nodejs-legacy 36 | p Node.jsのインストールが済んだら、以下のコマンドを入力してください。 37 | code 38 | cli apt-get install libusb-1.0-0-dev 39 | cli npm install -g tessel 40 | p 失敗した場合は、エラーメッセージをインストールについての掲示板に投稿してください。 41 | p うまくいった場合は、ファームウェアのアップデートに進んでください。 42 | 43 | .content#tab-pc 44 | p Tesselをパソコンにつなぐと、ドライバーが自動的にインストールされます。 45 | p Windows 7を使っている場合には、「デバイスドライバーソフトウェアは、正しくインストールされませんでした。」というエラーが表示される場合があります。この場合には、その通知をクリックし、新しく表示されたウィンドウで「設定の変更...」というボタンをクリックし、「コンピューター上で見つからない場合に、Windows Updateからドライバーソフトウェアをインストールする」を選択し、設定を保存してください。それから、Tesselをパソコンに再接続してください。 46 | p 続いて、Node.jsのオフィシャルサイトからWindows用のパッケージをダウンロードしてインストールしてください。Node.jsは、コマンドラインからTesselを操作するために必要です。 47 | p TesselのドライバーとNode.jsのインストールが済んだら、cmd.exeで以下のコマンドを入力してください。 48 | code 49 | cli npm install -g tessel 50 | p 失敗した場合は、エラーメッセージをインストールについての掲示板に投稿してください。 51 | p うまくいった場合は、ファームウェアのアップデートに進んでください。 52 | 53 | .row 54 | .large-12.columns.fre-container 55 | 56 | h3#firmware ファームウェアのアップデート 57 | p TesselとパソコンをUSBケーブルでつなぎ、以下のコマンドを入力してください。 58 | code 59 | cli tessel update 60 | p ファームウェアの書き換え中は、黄色と赤のランプが点滅します。 61 | p ファームウェアのアップデートが完了したら、次のステップに進んでください。 62 | 63 | 64 | block bottom_nav 65 | .row 66 | .large-12.columns.right 67 | a.bottomButton.right(href="/ja/blinky" class="button") 進む：点滅 68 | -------------------------------------------------------------------------------- /public/stylesheets/gh-fork-ribbon.css: -------------------------------------------------------------------------------- 1 | /* Left will inherit from right (so we don't need to duplicate code) */ 2 | .github-fork-ribbon { 3 | /* The right and left classes determine the side we attach our banner to */ 4 | position: absolute; 5 | 6 | /* Add a bit of padding to give some substance outside the "stitching" */ 7 | padding: 2px 0; 8 | 9 | /* Set the base colour */ 10 | background-color: #FF4D46; 11 | 12 | /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */ 13 | background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15))); 14 | background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); 15 | background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); 16 | background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); 17 | background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); 18 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); 19 | 20 | /* Add a drop shadow */ 21 | -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5); 22 | -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5); 23 | box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5); 24 | 25 | /* Set the font */ 26 | font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif; 27 | 28 | z-index: 9999; 29 | pointer-events: auto; 30 | } 31 | 32 | .github-fork-ribbon a, 33 | .github-fork-ribbon a:hover { 34 | /* Set the text properties */ 35 | color: #fff; 36 | text-decoration: none; 37 | text-shadow: 0 -1px rgba(0, 0, 0, 0.5); 38 | text-align: center; 39 | 40 | /* Set the geometry. If you fiddle with these you'll also need 41 | to tweak the top and right values in .github-fork-ribbon. */ 42 | width: 200px; 43 | line-height: 30px; 44 | font-size: 1.2em; 45 | 46 | /* Set the layout properties */ 47 | display: inline-block; 48 | padding: 2px 0; 49 | 50 | /* Add "stitching" effect */ 51 | border-width: 1px 0; 52 | border-style: dotted; 53 | border-color: #fff; 54 | border-color: rgba(255, 255, 255, 0.7); 55 | } 56 | 57 | .github-fork-ribbon-wrapper { 58 | width: 150px; 59 | height: 150px; 60 | position: absolute; 61 | overflow: hidden; 62 | top: 0; 63 | z-index: 9999; 64 | pointer-events: none; 65 | } 66 | 67 | .github-fork-ribbon-wrapper.fixed { 68 | position: fixed; 69 | } 70 | 71 | .github-fork-ribbon-wrapper.left { 72 | left: 0; 73 | } 74 | 75 | .github-fork-ribbon-wrapper.right { 76 | right: 0; 77 | } 78 | 79 | .github-fork-ribbon-wrapper.left-bottom { 80 | position: fixed; 81 | top: inherit; 82 | bottom: 0; 83 | left: 0; 84 | } 85 | 86 | .github-fork-ribbon-wrapper.right-bottom { 87 | position: fixed; 88 | top: inherit; 89 | bottom: 0; 90 | right: 0; 91 | } 92 | 93 | .github-fork-ribbon-wrapper.right .github-fork-ribbon { 94 | top: 42px; 95 | right: -43px; 96 | 97 | -webkit-transform: rotate(45deg); 98 | -moz-transform: rotate(45deg); 99 | -ms-transform: rotate(45deg); 100 | -o-transform: rotate(45deg); 101 | transform: rotate(45deg); 102 | } 103 | 104 | .github-fork-ribbon-wrapper.left .github-fork-ribbon { 105 | top: 42px; 106 | left: -43px; 107 | 108 | -webkit-transform: rotate(-45deg); 109 | -moz-transform: rotate(-45deg); 110 | -ms-transform: rotate(-45deg); 111 | -o-transform: rotate(-45deg); 112 | transform: rotate(-45deg); 113 | } 114 | 115 | 116 | .github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon { 117 | top: 80px; 118 | left: -43px; 119 | 120 | -webkit-transform: rotate(45deg); 121 | -moz-transform: rotate(45deg); 122 | -ms-transform: rotate(45deg); 123 | -o-transform: rotate(45deg); 124 | transform: rotate(45deg); 125 | } 126 | 127 | .github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon { 128 | top: 80px; 129 | right: -43px; 130 | 131 | -webkit-transform: rotate(-45deg); 132 | -moz-transform: rotate(-45deg); 133 | -ms-transform: rotate(-45deg); 134 | -o-transform: rotate(-45deg); 135 | transform: rotate(-45deg); 136 | } -------------------------------------------------------------------------------- /views/FRE-usage.jade: -------------------------------------------------------------------------------- 1 | extends layout 2 | 3 | block content 4 | .row 5 | .large-12.columns.fre-container 6 | h1 Some useful commands... 7 | 8 | p You can look at all the options of Tessel's CLI by running 9 | code 10 | cli tessel --help 11 | 12 | p Here are a few of the most useful ones: 13 | 14 | .row 15 | .large-12.columns 16 | .greyBar(style="height:2px;") 17 | .row 18 | .large-12.columns 19 | h2 20 | code tessel run <script.js | path/to/folder> 21 | p This command loads code into RAM on Tessel. When Tessel is reset (or the script ends with CTRL + C), Tessel loses the code. This command is useful for running code while developing, and is used throughout this tutorial. 22 | 23 | p This command is shown in the blinky example. 24 | 25 | code 26 | cli tessel run blinky.js 27 | 28 | code 29 | .console-output 30 | | >> Bundling directory ...
31 | | >> Deploying bundle ...
32 | | >> Running script ...
33 | | >> "I'm blinking! (Press CTRL + C to stop)"
34 | | >> "I'm blinking! (Press CTRL + C to stop)"
35 | | >> "I'm blinking! (Press CTRL + C to stop)"
36 | | >> ...
37 | .row 38 | .large-12.columns 39 | .greyBar(style="height:2px;") 40 | .row 41 | .large-12.columns 42 | h2 43 | code tessel push <script.js | path/to/folder> 44 | p This command saves code into flash memory on Tessel. This means that Tessel auto-runs this code when powered. The code will stay on here even if you reset Tessel. If you "tessel run" while you have code saved in Flash, the new code will run until the Tessel is reset, and then Tessel will switch back to the code from Flash. 45 | 46 | p From your "tessel-code" directory, where you saved blinky.js, 47 | code 48 | cli tessel push blinky.js 49 | 50 | code 51 | .console-output 52 | | >> Bundling directory ...
53 | | >> Deploying bundle ...
54 | | >> Running script ...
55 | | >> Finished deployment
56 | 57 | p While Tessel is running code from flash, console logs will be hidden by default. To see output after a "push" command, enter 58 | code 59 | cli tessel logs 60 | 61 | code 62 | .console-output 63 | | >> "I'm blinking! (Press CTRL + C to stop)"
64 | | >> "I'm blinking! (Press CTRL + C to stop)"
65 | | >> ...
66 | 67 | .row 68 | .large-4.columns 69 | p The
push command is great if you want to run Tessel from an external power source, such as a USB battery, wall USB power, solar phone charger, or another power source.
70 | p The code you've pushed will start running as soon as the Tessel receives power.
71 | p Read more about it here.
72 | .large-4.columns
73 | img(src="https://s3.amazonaws.com/technicalmachine-assets/doc+pictures/tessel-battery.jpg", style="height:300px")
74 | .large-4.columns
75 | img(src="https://s3.amazonaws.com/technicalmachine-assets/doc+pictures/tessel-plug.jpg", style="height:300px")
76 | .row
77 | .large-12.columns
78 | .greyBar(style="height:2px;")
79 | .row
80 | .large-12.columns
81 | h2
82 | code tessel erase
83 | p This command erases any JavaScript code saved to Tessel's flash memory. The firmware is left unchanged. If you push buggy code to Tessel, an erase can remove your code.
84 |
85 | p Try unplugging and replugging in your Tessel after you have loaded the blinky code in Flash (tessel push). After a few seconds, you should see the LEDs start to blink.
86 | p Now run
87 | code
88 | cli tessel erase
89 |
90 | code
91 | .console-output
92 | | >> Attempting to erase filesystem 93 | 94 | p This will erase the blinky code from Tessel, and the LEDs will stop blinking. 95 | 96 | 97 | block bottom_nav 98 | .row 99 | .large-6.columns.left 100 | a.bottomButton(href="/wifi" class="button") Prev: Wifi 101 | //- .large-6.columns.left 102 | //- a.bottomButton(href="/tweet" class="button") Prev: Tweet 103 | .large-6.columns.right 104 | a.bottomButton.right(href="/finished" class="button") Next: Finished! 105 | -------------------------------------------------------------------------------- /views/FRE-install.jade: -------------------------------------------------------------------------------- 1 | extends layout 2 | block head 3 | script(src="/javascripts/custom/install.js") 4 | 5 | block content 6 | .row 7 | .large-12.columns.fre-container#anchor 8 | h1 Install Tessel 9 | p 10 | i These are instructions for Tessel 1. Start here for Tessel 2. 11 | 12 | p New to the command line? 13 | a(href="/cmd") Take a step back and learn the basics. 14 | 15 | p Select the operating system you are working on. 16 | 17 | dl#install-tabs(class="tabs contained three-up" data-tab) 18 | dd.active 19 | a#osx-tab(href="#tab-osx" data-toggle="tab" ) OSX 20 | dd 21 | a#linux-tab(href="#tab-linux" data-toggle="tab") Linux 22 | dd 23 | a#pc-tab(href="#tab-pc" data-toggle="tab") Windows 24 | 25 | .tabs-content#install-content 26 | .content.active#tab-osx 27 | p 28 | a(href="http://nodejs.org/") Node.js v 0.12.7 29 | | is a prerequisite for installing the Tessel command line. You can install it from the official website, or if you have brew installed: 30 | code 31 | cli brew install node 32 | p Note: usb_bindings is not yet compatible with Node 4, so you'll need to install Node v. 0.10 or 0.12. 33 | p Once Node.js is installed, run this installation script from your terminal 34 | code 35 | cli npm install -g tessel 36 | p If the installation didn't work, please post the error message to our forums and we'll help you out. 37 | p If the scripts ran without errors, proceed to update the firmware. 38 | 39 | .content#tab-linux 40 | p 41 | a(href="http://nodejs.org/") Node.js v. 0.12.7 42 | | is a prerequisite for installing the Tessel command line. You can install it from the official website or following these instructions for your package manager. 43 | p Note: usb_bindings is not yet compatible with Node 4, so you'll need to install Node v. 0.10 or 0.12. 44 | p If you are running Ubuntu 13.10 or later, you can run this: 45 | code 46 | cli apt-get install nodejs nodejs-legacy 47 | p Once Node is installed, run this in your terminal: 48 | code 49 | cli apt-get install libusb-1.0-0-dev libudev-dev 50 | cli npm install -g tessel 51 | p If the installation didn't work, please post the error message to our forums and we'll help you out. 52 | p If the scripts ran without errors, proceed to update the firmware. 53 | 54 | .content#tab-pc 55 | p On Windows, Tessel drivers will install automatically when you plug in. 56 | p On Windows 7, you may receive the notification "Device driver software was not successfully installed". If you do, click on the notification, click the "Change settings..." button, and then select "Install driver software from Windows Update if it is not found on my computer." Save changes and re-try. 57 | p Next, install Node.JS v. 0.12.7. You need this to interact with Tessel from the command line. 58 | p Note: usb_bindings is not yet compatible with Node 4, so you'll need to install Node v. 0.10 or 0.12. 59 | p After installing the Tessel drivers and Node.js, run this in cmd.exe: 60 | code 61 | cli npm install -g tessel 62 | p If the installation didn't work, please post the error message to our forums and we'll help you out. 63 | p If the scripts ran without errors, proceed to update the firmware. 64 | 65 | .row 66 | .large-12.columns.fre-container 67 | 68 | h3#firmware Update Tessel's Firmware 69 | p Plug Tessel into your computer via USB. In the command line, run 70 | code 71 | cli tessel update 72 | p The lights should blink yellow and red during the firmware upload. 73 | p Once the firmware update is complete, continue to the next step. 74 | 75 | 76 | block bottom_nav 77 | .row 78 | .large-6.columns.left 79 | a.bottomButton(href="/cmd" class="button") Prev: Command line 80 | 81 | .large-6.columns.right 82 | a.bottomButton.right(href="/blinky" class="button") Next: Blink lights 83 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | // Module dependencies. 2 | var express = require('express'); 3 | var http = require('http'); 4 | var path = require('path'); 5 | var fs = require('fs'); 6 | var request = require('request'); 7 | var firstrun = require('./routes/firstrun'); 8 | 9 | var app = express() 10 | .set('port', process.env.PORT || 7000) 11 | .set('views', path.join(__dirname, 'views')) 12 | .set('view engine', 'jade') 13 | .use(express.favicon(path.join(__dirname, 'public/images/favicon.ico'))) 14 | .use(express.logger('dev')) 15 | .use(express.json()) 16 | .use(express.urlencoded()) 17 | .use(express.methodOverride()) 18 | 19 | app.use(app.router); 20 | app.use(express.static(path.join(__dirname, 'public'))); 21 | 22 | app.locals({ 23 | s3url: "https://s3.amazonaws.com/technicalmachine-assets/fre+assets/" 24 | , forumUrl: "http://forums.tessel.io/category/" 25 | }); 26 | 27 | app.locals.ucfirst = function (value) { 28 | return value.charAt(0).toUpperCase() + value.slice(1); 29 | }; 30 | 31 | // development only 32 | if ('development' == app.get('env')) { 33 | app.use(express.errorHandler()); 34 | } 35 | 36 | // Initialize all of the routes of the app 37 | app.get('/', firstrun.index); 38 | app.get('/cmd', firstrun.cmd); 39 | app.get('/install', firstrun.install); 40 | app.get('/blinky', firstrun.blinky); 41 | app.get('/usage', firstrun.usage); 42 | app.get('/modules', firstrun.modules); 43 | app.get('/modules/diy', firstrun.diy); 44 | app.get('/wifi', firstrun.wifi); 45 | app.get('/tweet', firstrun.tweet); 46 | app.get('/finished', firstrun.finished); 47 | 48 | app.get('/diy', firstrun.diy); 49 | 50 | app.get('/ja', firstrun.ja_index); 51 | app.get('/ja/install', firstrun.ja_install); 52 | app.get('/ja/blinky', firstrun.ja_blinky); 53 | app.get('/ja/usage', firstrun.ja_usage); 54 | app.get('/ja/modules', firstrun.ja_modules); 55 | app.get('/ja/wifi', firstrun.ja_wifi); 56 | app.get('/ja/tweet', firstrun.ja_tweet); 57 | app.get('/ja/finished', firstrun.ja_finished); 58 | 59 | // get the data from github 60 | var githubCode = { 61 | accelerometer: {url: 'https://raw.githubusercontent.com/tessel/accel-mma84/master/examples/accelerometer.js', github: 'https://github.com/tessel/accel-mma84', code: '', updated: null, replace: 'accel-mma84'}, 62 | ambient: {url: 'https://raw.githubusercontent.com/tessel/ambient-attx4/master/examples/ambient.js', github: 'https://github.com/tessel/ambient-attx4', code: '', updated: null, replace: 'ambient-attx4'}, 63 | audio: {url: 'https://raw.githubusercontent.com/tessel/audio-vs1053b/master/examples/audio.js', github: 'https://github.com/tessel/audio-vs1053b', code: '', updated: null, replace: 'audio-vs1053b'}, 64 | ble: {url: 'https://raw.githubusercontent.com/tessel/ble-ble113a/master/examples/ble.js', github: 'https://github.com/tessel/ble-ble113a', code: '', updated: null, replace: 'ble-ble113a'}, 65 | camera: {url: 'https://raw.githubusercontent.com/tessel/camera-vc0706/master/examples/camera.js', github: 'https://github.com/tessel/camera-vc0706', code: '', updated: null, replace: 'camera-vc0706'}, 66 | climate: {url: 'https://raw.githubusercontent.com/tessel/climate-si7005/master/examples/climate.js', github: 'https://github.com/tessel/climate-si7005', code: '', updated: null, replace: 'climate-si7005'}, 67 | gprs: {url: 'https://raw.githubusercontent.com/tessel/gprs-sim900/master/examples/gprs.js', github: 'https://github.com/tessel/gprs-sim900', code: '', updated: null, replace: 'gprs-sim900'}, 68 | gps: {url: 'https://raw.githubusercontent.com/tessel/gps-a2235h/master/examples/gps.js', github: 'https://github.com/tessel/gps-a2235h', code: '', updated: null, replace: 'gps-a2235h'}, 69 | ir: {url: 'https://raw.githubusercontent.com/tessel/ir-attx4/master/examples/infrared.js', github: 'https://github.com/tessel/ir-attx4', code: '', updated: null, replace: 'ir-attx4'}, 70 | microsd: {url: 'https://raw.githubusercontent.com/tessel/sdcard/master/examples/microsd.js', github: 'https://github.com/tessel/sdcard', code: '', updated: null, replace: 'sdcard'}, 71 | nrf: {url: 'https://raw.githubusercontent.com/tessel/node-nrf/jh-tessel/examples/nrf24.js', github: 'https://github.com/tessel/rf-nrf24', code: '', updated: null, replace: 'rf-nrf24'}, 72 | relay: {url: 'https://raw.githubusercontent.com/tessel/relay-mono/master/examples/relay.js', github: 'https://github.com/tessel/relay-mono', code: '', updated: null, replace: 'relay-mono'}, 73 | rfid: {url: 'https://raw.githubusercontent.com/tessel/rfid-pn532/master/examples/rfid.js', github: 'https://github.com/tessel/rfid-pn532', code: '', updated: null, replace: 'rfid-pn532'}, 74 | servo: {url: 'https://raw.githubusercontent.com/tessel/servo-pca9685/master/examples/servo.js', github: 'https://github.com/tessel/servo-pca9685', code: '', updated: null, replace: 'servo-pca9685'} 75 | }; 76 | 77 | function modulePage(req, res) { 78 | var module = req.params.slug; 79 | var prefix = ''; 80 | if (req.params.lang == 'ja') { 81 | prefix = 'ja-'; 82 | } 83 | 84 | // update on anything older than 1 hour 85 | var d = new Date((new Date) * 1 - 1000 * 3600 * 1); 86 | // if any urls have blank code, request it 87 | if ((githubCode[module].code == '' && githubCode[module].url) || (githubCode[module].updated < d.valueOf())) { 88 | request.get(githubCode[module].url, function (err, data) { 89 | if (err) { 90 | return console.error('could not get code for', module, githubCode[module].code, err); 91 | } 92 | var code = data.body.replace(/require\(("|')\.\.\/("|')\)/, 'require(\'' + githubCode[module].replace + '\')'); 93 | code = code.replace(' // Replace \'../\' with \'' + githubCode[module].replace + '\' in your own code', ''); 94 | githubCode[module].code = code; 95 | githubCode[module].updated = Date.now(); 96 | res.render(prefix + 'FRE-module-individual', {title: module, displayModule: module, page: 'modules/' + module, code: githubCode[module]}); 97 | }); 98 | } else { 99 | res.render(prefix + 'FRE-module-individual', {title: module, displayModule: module, page: 'modules/' + module, code: githubCode[module]}); 100 | } 101 | } 102 | 103 | app.get('/modules/:slug', modulePage); 104 | app.get('/:lang/modules/:slug', modulePage); 105 | 106 | http.createServer(app).listen(app.get('port'), function () { 107 | console.log('Express server listening on port ' + app.get('port')); 108 | process.on('uncaughtException', function (err) { 109 | console.log(err); 110 | }); 111 | }); 112 | -------------------------------------------------------------------------------- /views/ja-FRE-module-individual.jade: -------------------------------------------------------------------------------- 1 | extends ja-layout 2 | 3 | block content 4 | .row 5 | .large-12.columns.fre-container 6 | // mixin for the modular formatting of each module's FRE 7 | mixin modulemodule(val, link) 8 | - var imgsrc = s3url +'modules/' + val + '.png' 9 | .row 10 | .large-12.columns.fre-container 11 | span 12 | img(src=imgsrc, style="margin-top:-20px;").constrain-sm 13 | span(style="padding-left:10px;") 14 | h2.leftalign.moduleTitle #{title} 15 | span(style="padding-left:20px;") 16 | a(href=link) 17 | i.fa.fa-github View Source 18 | 19 | .row(id=val) 20 | .large-12.columns 21 | +#{val} 22 | 23 | mixin displayCode(number, code, module, special) 24 | .row 25 | +num_col(number) 26 | .row 27 | .large-12.columns.left 28 | if (special) 29 | p!=special 30 | p
#{module}.jsという名前のファイルを作成し、以下の内容を書き込んで保存してください。
31 | pre.prettyprint#exampleCode
32 | code.
33 | #{code}
34 | .row
35 | .large-12.columns
36 | .greyBar(style="height:2px;")
37 |
38 | // mixins for within the includes
39 | mixin num_col(num)
40 | .large-12.columns
41 | p.moduleStep 手順#{num}
42 |
43 | mixin normal_row(number, imgsrc, text, d)
44 | - text = render(text, d)
45 | .row
46 | +num_col(number)
47 | .row
48 | .large-6.columns
49 | p !{text}
50 | .large-6.columns
51 | .row
52 | .large-12.columns
53 | - if (imgsrc instanceof Array) {
54 | for src in imgsrc
55 | img(src=src).constrain
56 | - } else {
57 | img(src=imgsrc).constrain
58 | - }
59 |
60 |
61 | .row
62 | .large-12.columns
63 | .greyBar(style="height:2px;")
64 |
65 | mixin see_video(url)
66 | .row
67 | .large-12.columns
68 | p Follow the directions below or view as a video
69 |
70 | .row
71 | .large-12.columns
72 | .greyBar(style="height:2px;")
73 |
74 | mixin make_directory(number, thismod, special)
75 | .row
76 | +num_col(number)
77 | .row
78 | .large-12.columns
79 | if (special)
80 | p!=render(special)
81 | p
82 | | 以下のコマンドを入力して、「tessel-code」ディレクトリーの中に、もうひとつディレクトリーを作ってください：
83 | | mkdir #{thismod} cd #{thismod} npm install #{package} tessel run #{module}.js #{option} " 135 | - var moreInfo = "
#{title}モジュールの機能についてもっと知りたい場合は、モジュールのドキュメントを参照してください。" 136 | 137 | // include all the modules 138 | //each val in moduleList 139 | +modulemodule(displayModule, code.github) 140 | 141 | // workaround mixins for fake dynamic includes 142 | mixin accelerometer 143 | include moduleFREs/ja-_accelerometer 144 | mixin ambient 145 | include moduleFREs/ja-_ambient 146 | mixin audio 147 | include moduleFREs/ja-_audio 148 | mixin ble 149 | include moduleFREs/ja-_ble 150 | mixin camera 151 | include moduleFREs/ja-_camera 152 | mixin climate 153 | include moduleFREs/ja-_climate 154 | mixin gprs 155 | include moduleFREs/ja-_gprs 156 | mixin gps 157 | include moduleFREs/ja-_gps 158 | mixin ir 159 | include moduleFREs/ja-_ir 160 | mixin microsd 161 | include moduleFREs/ja-_microsd 162 | mixin nrf 163 | include moduleFREs/ja-_nrf 164 | mixin relay 165 | include moduleFREs/ja-_relay 166 | mixin rfid 167 | include moduleFREs/ja-_rfid 168 | mixin servo 169 | include moduleFREs/ja-_servo 170 | 171 | .row 172 | .large-12.columns 173 | h2 他のモジュールを試す 174 | p あるいは、ここを飛ばして無線LANに進んでください。 175 | 176 | include ja-_modulesList.jade 177 | 178 | 179 | block bottom_nav 180 | .row 181 | .large-6.columns.left 182 | a.bottomButton(href="/ja/blinky" class="button") 戻る：点滅 183 | 184 | .large-6.columns.right 185 | a.bottomButton.right(href="/ja/wifi" class="button") 進む：無線LAN 186 | -------------------------------------------------------------------------------- /views/FRE-module-individual.jade: -------------------------------------------------------------------------------- 1 | extends layout 2 | 3 | block content 4 | .row 5 | .large-12.columns.fre-container 6 | // mixin for the modular formatting of each module's FRE 7 | mixin modulemodule(val, link) 8 | - var imgsrc = s3url +'modules/' + val + '.png' 9 | .row 10 | .large-12.columns.fre-container 11 | span 12 | img(src=imgsrc, style="margin-top:-20px;").constrain-sm 13 | span(style="padding-left:10px;") 14 | if (val == 'ble' || val == 'gprs'|| val == 'gps'|| val == 'ir'|| val == 'nrf'|| val == 'rfid') 15 | h2.leftalign.moduleTitle #{val.toUpperCase()} 16 | else if (val == 'microsd') 17 | h2.leftalign.moduleTitle MicroSD 18 | else 19 | h2.leftalign.moduleTitle #{ucfirst(val)} 20 | span(style="padding-left:20px;") 21 | a(href=link) 22 | i.fa.fa-github View Source 23 | 24 | .row(id=val) 25 | .large-12.columns 26 | +#{val} 27 | 28 | mixin displayCode(number, code, module, special) 29 | .row 30 | +num_col(number) 31 | .row 32 | .large-12.columns.left 33 | if (special) 34 | p!=special 35 | p Save this code in a text file called
#{module}.js:
36 | pre.prettyprint#exampleCode
37 | code.
38 | #{code}
39 | .row
40 | .large-12.columns
41 | .greyBar(style="height:2px;")
42 |
43 | // mixins for within the includes
44 | mixin num_col(num)
45 | .large-12.columns
46 | p.moduleStep Step #{num}
47 |
48 | mixin normal_row(number, imgsrc, text)
49 | .row
50 | +num_col(number)
51 | .row
52 | .large-6.columns
53 | p !{text}
54 | .large-6.columns
55 | .row
56 | .large-12.columns
57 | - if (imgsrc instanceof Array) {
58 | for src in imgsrc
59 | img(src=src).constrain
60 | - } else {
61 | img(src=imgsrc).constrain
62 | - }
63 |
64 |
65 | .row
66 | .large-12.columns
67 | .greyBar(style="height:2px;")
68 |
69 | mixin project(title, slug, imgUrl)
70 | .large-3.columns
71 | .projects-container
72 | a(href="//www.tessel.hackster.io/" + slug)
73 | .project-image
74 | img(src=imgUrl)
75 | .project-details
76 | .project-title
77 | h5 #{title}
78 |
79 | mixin see_video(url)
80 | .row
81 | .large-12.columns
82 | p Follow the directions below or view as a video
83 |
84 | .row
85 | .large-12.columns
86 | .greyBar(style="height:2px;")
87 |
88 | mixin make_directory(number, thismod, special)
89 | .row
90 | +num_col(number)
91 | .row
92 | .large-12.columns
93 | if (special)
94 | p!=special
95 | p
96 | | Make a directory inside your "tessel-code" folder: enter
97 | | mkdir #{thismod} cd #{thismod} What are you making? Share your invention! 117 | p If you run into any issues you can check out the #{thismod} forums. 118 | .row 119 | .large-12.columns 120 | .greyBar(style="height:2px;") 121 | 122 | 123 | - var modulesPlugged_filepath = s3url+"modules_plugged/" 124 | - var moduleCorners_filepath = s3url+"modules_corners/" 125 | - var moduleGifs_filepath = s3url+"gifs/" 126 | - var moduleSpecial_filepath = s3url+"modules_special/" 127 | - var moduleDocs_filepath = "https://github.com/tessel/" 128 | 129 | - var plugIn1 = "Plug the " 130 | - var portA = " module into Tessel port A " 131 | - var portC = " module into Tessel port C " 132 | - var plugIn2End = "with the hexagon/icon side down and the electrical components on the top, then plug Tessel into your computer via USB." 133 | - var plugIn2A = portA + plugIn2End; 134 | - var plugIn2C = portC + plugIn2End; 135 | 136 | - var install1 = "Install by typing
npm install "
137 | - var install2 = " tessel run "
140 | - var push2 = ".js " 141 | 142 | - var moreInfo1 = "
To see what else you can do with the " 143 | - var moreInfo2 = " module, see the module docs here." 145 | 146 | // include all the modules 147 | //each val in moduleList 148 | +modulemodule(displayModule, code.github) 149 | 150 | // workaround mixins for fake dynamic includes 151 | mixin accelerometer 152 | include moduleFREs/_accelerometer 153 | mixin ambient 154 | include moduleFREs/_ambient 155 | mixin audio 156 | include moduleFREs/_audio 157 | mixin ble 158 | include moduleFREs/_ble 159 | mixin camera 160 | include moduleFREs/_camera 161 | mixin climate 162 | include moduleFREs/_climate 163 | mixin gprs 164 | include moduleFREs/_gprs 165 | mixin gps 166 | include moduleFREs/_gps 167 | mixin ir 168 | include moduleFREs/_ir 169 | mixin microsd 170 | include moduleFREs/_microsd 171 | mixin nrf 172 | include moduleFREs/_nrf 173 | mixin relay 174 | include moduleFREs/_relay 175 | mixin rfid 176 | include moduleFREs/_rfid 177 | mixin servo 178 | include moduleFREs/_servo 179 | 180 | .row 181 | .large-12.columns 182 | h2 Choose another module 183 | p Or if you're all set, move on to Wifi. 184 | 185 | include _modulesList.jade 186 | 187 | 188 | block bottom_nav 189 | .row 190 | .large-6.columns.left 191 | a.bottomButton(href="/blinky" class="button") Prev: Blink lights 192 | 193 | .large-6.columns.right 194 | a.bottomButton.right(href="/wifi" class="button") Next: Connect to Wifi 195 | -------------------------------------------------------------------------------- /views/ja-FRE-wifi.jade: -------------------------------------------------------------------------------- 1 | extends ja-layout 2 | 3 | block content 4 | .row 5 | .large-12.columns.fre-container 6 | .row 7 | .large-12.columns 8 | h1 Tesselを無線LANに接続する 9 | br 10 | .row 11 | .large-12.columns 12 | p Tesselは、無線LANの802.11bおよびgのチャンネルのうち、1番から11番までのみに接続することができます。内蔵する無線LANチップは、802.11nや、チャンネルの12番から14番では動作しません。接続しようとしているルータが、802.11bまたはgに対応していて、チャンネルの1番から11番のいずれかを使用していることを確認してください。 13 | p 無線LANに接続するには、以下のコマンドを入力してください（カギカッコは、そのまま入力しないでください）。 14 | code 15 | cli tessel wifi -n [ネットワーク名] -p [パスワード] -s [セキュリティタイプ*] 16 | i
*セキュリティタイプの指定はオプションです。指定しない場合は「wpa2」とみなします。17 | .row 18 | .large-12.columns 19 | .greyBar(style="height:2px;") 20 | .row 21 | .large-6.columns 22 | p Tesselの黄色いランプは、接続処理中は点滅し、接続されると点灯のままになります。Tesselは入力されたパスワードを記憶するので、Tesselを次に起動すると自動的にネットワークに接続します。 23 | p 接続されているかどうかを調べるには、以下のコマンドを入力してください。 24 | code 25 | cli tessel wifi -l 26 | p 無線LANのネットワークの一覧と、接続の状態が表示されます。 27 | p 無線LANに接続しようとしたけれど接続できなかった場合には、赤いランプが点灯します。また、接続済みのネットワークが切断された場合にも、赤いランプが点灯します。 28 | ul 29 | li 黄色いランプが点灯 ＝ 無線LANに接続されている 30 | li 赤いランプが点灯 ＝ 無線LANに接続されていない 31 | 32 | p 4個すべてのランプ（赤青緑黄）は、TesselのハードウェアAPIからアクセスすることができます。もしも、ユーザーが書き込んだプログラムが黄色または赤のランプを制御している場合は、無線LANの状態の表示としては信頼できません。 33 | .large-6.columns 34 | img(src="#{s3url}wifi.JPG").constrain 35 | .row 36 | .large-12.columns 37 | .greyBar(style="height:2px;") 38 | p 以下のプログラムは、無線LAN経由でウェブサイトの内容を取得する例です： 39 | p 「wifi」という名前のディレクトリを作ってください。 40 | code 41 | cli mkdir wifi 42 | cli cd wifi 43 | cli npm init 44 | 45 | p 以下の内容を、
wifi.jsという名前のファイルに保存してください：
46 | pre.prettyprint#exampleCode
47 | code.
48 | var http = require('http');
49 |
50 | var statusCode = 200;
51 | var count = 1;
52 |
53 | setImmediate(function start () {
54 | console.log('http request #' + (count++))
55 | http.get("http://httpstat.us/" + statusCode, function (res) {
56 | console.log('# statusCode', res.statusCode)
57 |
58 | var bufs = [];
59 | res.on('data', function (data) {
60 | bufs.push(new Buffer(data));
61 | console.log('# received', new Buffer(data).toString());
62 | })
63 | res.on('end', function () {
64 | console.log('done.');
65 | setImmediate(start);
66 | })
67 | }).on('error', function (e) {
68 | console.log('not ok -', e.message, 'error event')
69 | setImmediate(start);
70 | });
71 | });
72 |
73 | p 端末上で以下のコマンドを入力して、このプログラムをTesselの上で動かしてください：
74 | p tessel run wifi.js wifi-control.jsという名前のファイルに保存してください：
85 | pre.prettyprint#wifiExampleCode
86 | code.
87 | /* wifi-cc3000というライブラリをrequireしていますが、
88 | * このライブラリはTesselのファームウェアに組み込まれているので、
89 | * npm installする必要はありません。
90 | * これは、require('tessel')でも同様です。
91 | */
92 | var wifi = require('wifi-cc3000');
93 | var network = '#####'; // ネットワーク名を入れてください。
94 | var pass = '#####'; // パスワードを入れてください。パスワード無しの場合は、カラ文字列にしてください。
95 | var security = 'wpa2'; // 他に「wep」「wpa」「unsecured」が指定できます。パスワード無しの場合は「unsecured」を指定してください。
96 | var timeouts = 0;
97 |
98 | wifi.on('connect', function(data){
99 | // 無線LANに接続された
100 | console.log("connect emitted", data);
101 | });
102 |
103 | wifi.on('disconnect', function(data){
104 | // 切断された。必要ならばもういちどconnect()を呼んでください。
105 | console.log("disconnect emitted", data);
106 | })
107 |
108 | wifi.on('timeout', function(err){
109 | // 接続しようとしたが、接続できなかった。リトライする。
110 | console.log("timeout emitted");
111 | timeouts++;
112 | if (timeouts > 2) {
113 | // 何度もタイムアウトしたので、無線LANチップをリセットする。
114 | powerCycle();
115 | } else {
116 | // 接続しなおす。
117 | connect();
118 | }
119 | });
120 |
121 | wifi.on('error', function(err){
122 | // 以下のいずれかが起きた。
123 | // 1. 接続されていないのに、切断しようとした。
124 | // 2. 接続しようとしている最中に、切断しようとした。
125 | // 3. タイムアウトまたは切断されていないのに、接続しようとした。
126 | console.log("error emitted", err);
127 | });
128 |
129 | // プログラムから、無線LANチップをリセットする。
130 | function powerCycle(){
131 | // 無線LANチップをリセットすると、最後に保存されたネットワークに
132 | // 自動的に再接続する。
133 | wifi.reset(function(){
134 | timeouts = 0; // タイムアウト回数をゼロに戻す。
135 | console.log("done power cycling");
136 | // 自動的に再接続するのを待つ。
137 | setTimeout(function(){
138 | if (!wifi.isConnected()) {
139 | // 接続する。
140 | connect();
141 | }
142 | }, 20 *1000); // 20秒待つ
143 | })
144 | }
145 |
146 | function connect(){
147 | wifi.connect({
148 | security: security
149 | , ssid: network
150 | , password: pass
151 | , timeout: 30 // in seconds
152 | });
153 | }
154 |
155 | if (!wifi.isConnected()) {
156 | connect();
157 | }
158 |
159 | .row
160 | .large-12.columns
161 | .greyBar(style="height:2px;")
162 | .row
163 | .large-12.columns
164 | p エラーになった場合：黄色いランプが点灯していることを確認して下さい。もしも点灯していない場合は、無線LANに接続されていません。Tesselの電源をいったん切ってから入れなおし、tessel wifiというコマンドをもういちど実行してください。
165 | p これでも問題が解消しない場合は、
166 | a(href="http://forums.tessel.io/category/wifi") 無線LANについての掲示板で相談してください。
167 |
168 | block bottom_nav
169 | .row
170 | .large-5.columns.left
171 | a.bottomButton(href="/ja/modules" class="button") 戻る：モジュール
172 | //- .large-6.columns.right
173 | //- a.bottomButton.right(href="/ja/tweet" class="button") 進む：ツイート
174 | .large-6.columns.right
175 | a.bottomButton.right(href="/ja/usage" class="button") 進む：コマンド
176 |
--------------------------------------------------------------------------------
/views/FRE-cmd.jade:
--------------------------------------------------------------------------------
1 | extends layout
2 | block head
3 | script(src="/javascripts/custom/install.js")
4 |
5 | block content
6 | .row
7 | .large-12.columns.fre-container#anchor
8 | h1 Command Line Basics
9 |
10 | p Using Tessel is just like web development. But if you're not familiar with web development, you might want to take a minute or two to get comfortable with some key tools of the trade: the command line (the "terminal", where you execute commands) and the text editor, where you will work on and save your programs.
11 |
12 | p Select the operating system you are working on.
13 |
14 | dl#install-tabs(class="tabs contained three-up" data-tab)
15 | dd.active
16 | a#osx-tab(href="#tab-osx" data-toggle="tab" ) OSX
17 | dd
18 | a#linux-tab(href="#tab-linux" data-toggle="tab") Linux
19 | dd
20 | a#pc-tab(href="#tab-pc" data-toggle="tab") Windows
21 |
22 | .tabs-content#install-content
23 | .content.active#tab-osx
24 | p Open up the application on your computer called “Terminal” by pressing ⌘ + SPACE and typing “Terminal”.
25 | p Its dock icon looks like 
, and the terminal will look something like 
26 | p You can use the terminal to write commands to your computer (this is the “command line”). Let’s try it out!
27 |
28 | p In your terminal, type
29 | cli
30 | code ls
31 | p and hit enter.
32 | p The ls command, short for “list”, tells your computer to list all of the file names for the folder you’re in. Your list of files probably includes “Desktop” and “Documents”, among others. Let’s try another command: type
33 | cli
34 | code cd Documents
35 | p and hit enter.
36 | p You are now in the Documents folder; cd means “change directory”. If you try ls again, you should see the contents of your Documents folder listed out. If you want to compare, open up Finder and look in Documents to see the same files.
37 | p Let’s get back to the folder we were in before:
38 | cli
39 | code cd ..
40 | p You changed directory again!
41 | cli
42 | code ls
43 | p to see what we have here. You’re back where you started! The .. after cd tells it to go up one folder in the directory.
44 |
45 | p Ok, now you're a cool hacker who can use the terminal (or "console") to write in the command line. (If you want to learn more commands, there are a whole bunch of them here. I recommend pwd, open, mkdir, touch, mv, and cp.)
46 |
47 | .content#tab-linux
48 | p Open up the application on your computer called “Terminal” by tapping the SUPER key (Windows or Apple key, depending on your hardware) and typing “Terminal”.
49 | p Its icon looks like , and the terminal will look something like
50 | p You can use the terminal to write commands to your computer (this is the “command line”). Let’s try it out!
51 |
52 | p In your terminal, type
53 | cli
54 | code ls
55 | p and hit enter.
56 | p The ls command, short for “list”, tells your computer to list all of the file names for the folder you’re in. Your list of files probably includes “Desktop” and “Documents”, among others. Let’s try another command: type
57 | cli
58 | code cd Documents
59 | p and hit enter.
60 | p You are now in the Documents folder; cd means “change directory”. If you try ls again, you should see the contents of your Documents folder listed out. If you want to compare, open up Finder and look in Documents to see the same files.
61 | p Let’s get back to the folder we were in before:
62 | cli
63 | code cd ..
64 | p You changed directory again!
65 | cli
66 | code ls
67 | p to see what we have here. You’re back where you started! The .. after cd tells it to go up one folder in the directory.
68 |
69 | p Ok, now you're a cool hacker who can use the terminal (or "console") to write in the command line. (If you want to learn more commands, there are a whole bunch of them here. I recommend pwd, open, mkdir, touch, mv, and cp.)
70 |
71 | .content#tab-pc
72 | p Open up the application on your computer called “Command Prompt”.
73 | p If you’re not on Windows 8, go to the start menu and type “Command Prompt”.
74 | p If you are on Windows 8+, swipe right to find “Windows System”, within which you can find “Command Prompt”.
75 | p Its icon looks like 
, and the application (the terminal) will look something like 
76 | p You can use the terminal to write commands to your computer (this is the “command line”). Let’s try it out!
77 | p In your terminal, type
78 | cli
79 | code dir
80 | p and hit enter.
81 | p The dir command, short for “directory”, tells your computer to list all of the file names for the folder you’re in. Your list of files probably includes “Desktop” and “Documents”, among others. Let’s try another command:
82 | p Now type
83 | cli
84 | code cd Documents
85 | p into your command line and press enter.
86 | p You are now in the Documents folder; cd means “change directory”. If you try dir again, you should see the contents of your Documents folder listed out. If you want to compare, open up My Comuter and look in Documents to see the same files.
87 | p Let’s get back to the folder we were in before:
88 | cli
89 | code cd ..
90 | p You changed directory again!
91 | cli
92 | code dir
93 | p to see what we have here. You’re back where you started! The .. after cd tells it to go up one folder in the directory.
94 | p Now you’re a cool hacker who can use the terminal to write in the command line. (If you want to learn more commands, there are a whole bunch of them here.)
95 |
96 | .row
97 | .large-12.columns.fre-container
98 | h3#text-editor Text Editors
99 | p You will also need a text editor to save your JavaScript files.
100 | | This means a plaintext editor, not a Word document.
101 | p Here are some good options:
102 | ul
103 | li
104 | a(href="http://www.sublimetext.com/") Sublime Text
105 | li
106 | a(href="https://atom.io/") Atom
107 | li
108 | a(href="http://notepad-plus-plus.org/") Notepad++
109 |
110 | p Typically, directions that belong in the command line are one line, whereas longer scripts, such as anything in JavaScript, should be typed into the text editor and saved, then run through the command line.
111 | p In the context of this tutorial, things that should be run in the command line look
112 | cli
113 | code like this
114 | p And scripts that should be saved in the text editor will look
115 | pre.prettyprint
116 | code like this
117 |
118 | block bottom_nav
119 | .row
120 | .large-12.columns.right
121 | a.bottomButton.right(href="/install" class="button") Next: Install
122 |
--------------------------------------------------------------------------------
/views/FRE-wifi.jade:
--------------------------------------------------------------------------------
1 | extends layout
2 |
3 | block content
4 | .row
5 | .large-12.columns.fre-container
6 | .row
7 | .large-12.columns
8 | h1 Connect Tessel to Wifi
9 | br
10 | .row
11 | .large-12.columns
12 | p Tessel can only connect to 802.11b/g networks using channels 1 through 11. The wifi chip does not support 802.11n or channels 12 - 14. If you are having trouble connecting, make sure the router has b/g mode enabled and isn't using channels 12, 13, or 14.
13 | p To connect to a new network, enter in your command line (without brackets)
14 | code
15 | cli tessel wifi -n [network name] -p [password] -s [security type*]
16 | i *The security type flag is optional; default is wpa2.17 | .row 18 | .large-12.columns 19 | .greyBar(style="height:2px;") 20 | .row 21 | .large-6.columns 22 | p Tessel will blink the yellow status light while connecting, and will leave the yellow light on if it connects. Tessel saves network credentials and tries to reconnect automatically on startup. 23 | p To check whether you're connected, run 24 | code 25 | cli tessel wifi -l 26 | p This lists available wifi networks and will also show your connection status. 27 | p If the red status light goes on, it means Tessel tried to connect to a network but was unable to succeed. The red LED also turns on if the wifi connection drops. 28 | ul 29 | li Steady yellow LED = Tessel is connected to wifi 30 | li Steady red LED = Tessel is not connected to wifi 31 | 32 | p All 4 LEDS (red, blue, green, and yellow) are accessible through Tessel's hardware API. If user pushed code is changing the state of the yellow/red LEDs, they will no longer be reliable indicators of Wifi state. 33 | .large-6.columns 34 | img(src="#{s3url}wifi.JPG").constrain 35 | .row 36 | .large-12.columns 37 | .greyBar(style="height:2px;") 38 | p Here is an example of requesting a website over Tessel's Wifi connection: 39 | p Make a wifi directory 40 | code 41 | cli mkdir wifi 42 | cli cd wifi 43 | cli npm init 44 | 45 | p Save the following code in a file called
wifi.js:
46 | pre.prettyprint#exampleCode
47 | code.
48 | var http = require('http');
49 |
50 | var statusCode = 200;
51 | var count = 1;
52 |
53 | setImmediate(function start () {
54 | console.log('http request #' + (count++))
55 | http.get("http://httpstat.us/" + statusCode, function (res) {
56 | console.log('# statusCode', res.statusCode)
57 |
58 | var bufs = [];
59 | res.on('data', function (data) {
60 | bufs.push(new Buffer(data));
61 | console.log('# received', new Buffer(data).toString());
62 | })
63 | res.on('end', function () {
64 | console.log('done.');
65 | setImmediate(start);
66 | })
67 | }).on('error', function (e) {
68 | console.log('not ok -', e.message, 'error event')
69 | setImmediate(start);
70 | });
71 | });
72 |
73 | p Run the code on your Tessel by typing this in the terminal:
74 | p tessel run wifi.js wifi-control.js:
85 | pre.prettyprint#wifiExampleCode
86 | code.
87 | /* the wifi-cc3000 library is bundled in with Tessel's firmware,
88 | * so there's no need for an npm install. It's similar
89 | * to how require('tessel') works.
90 | */
91 | var wifi = require('wifi-cc3000');
92 | var network = '#####'; // put in your network name here
93 | var pass = '#####'; // put in your password here, or leave blank for unsecured
94 | var security = 'wpa2'; // other options are 'wep', 'wpa', or 'unsecured'
95 | var timeouts = 0;
96 |
97 | wifi.on('connect', function(data){
98 | // you're connected
99 | console.log("connect emitted", data);
100 | });
101 |
102 | wifi.on('disconnect', function(data){
103 | // wifi dropped, probably want to call connect() again
104 | console.log("disconnect emitted", data);
105 | })
106 |
107 | wifi.on('timeout', function(err){
108 | // tried to connect but couldn't, retry
109 | console.log("timeout emitted");
110 | timeouts++;
111 | if (timeouts > 2) {
112 | // reset the wifi chip if we've timed out too many times
113 | powerCycle();
114 | } else {
115 | // try to reconnect
116 | connect();
117 | }
118 | });
119 |
120 | wifi.on('error', function(err){
121 | // one of the following happened
122 | // 1. tried to disconnect while not connected
123 | // 2. tried to disconnect while in the middle of trying to connect
124 | // 3. tried to initialize a connection without first waiting for a timeout or a disconnect
125 | console.log("error emitted", err);
126 | });
127 |
128 | // reset the wifi chip progammatically
129 | function powerCycle(){
130 | // when the wifi chip resets, it will automatically try to reconnect
131 | // to the last saved network
132 | wifi.reset(function(){
133 | timeouts = 0; // reset timeouts
134 | console.log("done power cycling");
135 | // give it some time to auto reconnect
136 | setTimeout(function(){
137 | if (!wifi.isConnected()) {
138 | // try to reconnect
139 | connect();
140 | }
141 | }, 20 *1000); // 20 second wait
142 | })
143 | }
144 |
145 | function connect(){
146 | wifi.connect({
147 | security: security
148 | , ssid: network
149 | , password: pass
150 | , timeout: 30 // in seconds
151 | });
152 | }
153 |
154 | // connect wifi now, if not already connected
155 | if (!wifi.isConnected()) {
156 | connect();
157 | }
158 |
159 | .row
160 | .large-12.columns
161 | .greyBar(style="height:2px;")
162 | .row
163 | .large-12.columns
164 | p If you run into errors: First, check to make sure the yellow status light is on. If it is not, you are not connected to Wifi. Try power cycling your Tessel and then run the tessel wifi command again.
165 | p If you're still having trouble, please log your error on the Wifi forums.
166 |
167 | block bottom_nav
168 | .row
169 | .large-5.columns.left
170 | a.bottomButton(href="/modules" class="button") Prev: Add modules
171 | .large-6.columns.right
172 | a.bottomButton.right(href="/usage" class="button") Next: Usage
173 | //- .large-6.columns.right
174 | //- a.bottomButton.right(href="/tweet" class="button") Next: Tweet
175 |
--------------------------------------------------------------------------------
/views/layout.jade:
--------------------------------------------------------------------------------
1 | doctype html
2 | html
3 | head
4 | title= title
5 | script(src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js")
6 | link(href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css", rel="stylesheet")
7 |
8 | script(src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js")
9 | script(src="/javascripts/custom/active-link.js")
10 | script(src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js")
11 | script(src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation/foundation.tab.min.js")
12 | script(src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation/foundation.topbar.min.js")
13 |
14 | link(rel='stylesheet', href='/stylesheets/main.css')
15 | link(rel='stylesheet', href='/stylesheets/style.css')
16 | link(rel='stylesheet', href='/stylesheets/gh-fork-ribbon.css')
17 | link(rel='stylesheet', href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css")
18 |
19 | style.
20 | body { background: white; }
21 | pre code { overflow: auto; }
22 |
23 |
24 |
25 | #sec-what, #sec-spec, #sec-lastcall { padding-top: 30px; padding-bottom: 30px; }
26 | #sec-heading { padding-bottom: 30px; text-align: center; }
27 |
28 | #sec-heading .desc { font-size: 1.1em; }
29 | #sec-heading .desc p { font-size: 20px; }
30 | #sec-heading .desc p.tagline { font-size: 34px; text-align: center; line-height: 1.3 }
31 | #sec-heading .desc { margin-top: 100px; }
32 | #sec-heading-pic-column { text-align: right }
33 | @media (max-width: 768px) {
34 | #toTopHover, #toTop { display: none; left: -100000px }
35 | #sec-heading-pic { margin-bottom: -30px; margin-top: -500px !important; z-index: 0; }
36 | #sec-heading-pic { display: none }
37 | #sec-heading .desc { margin-top: 0; }
38 | #sec-heading-pic-column { text-align: center; }
39 | code { font-size: 14px !important; }
40 | }
41 | @media (max-width: 500px) {
42 | code {font-size: 12px !important; }
43 | }
44 |
45 | @media(max-height: 200px){
46 | .side-nav{ overflow-y: scroll; }
47 | }
48 |
49 | @media(max-height: 560px){.side-nav{ overflow-y: scroll; }}
50 |
51 | @media (max-width: 640px){
52 | #alt-menu{ display: block;}
53 | #main-menu{ display: none;}
54 | #sticky-topbar { display:none;}
55 | #fre-sidebar{display: none;}
56 | #fre-content{ margin-left:0px; padding-left:0px; max-width:100%}
57 | }
58 | #sec-heading-pic { width: 360px; margin-top: -150px }
59 | #sec-heading fieldset { background: white; }
60 |
61 | #sec-what { background: #fff; padding: 10px 0 50px; }
62 | .modules li { text-align: center; font-weight: bold; text-transform: uppercase; line-height: 1.1; font-size: 0.8em; }
63 | .modules a { display: block; }
64 | .modules img { max-height: 80px; }
65 | .modules li span { display: block; margin: 10px 0; font-family: Helvetica; }
66 |
67 | #servo-anim-block {
68 | background: #ddeaf6; padding: 50px 0;
69 | }
70 | #servo-anim-code {
71 | font-weight: normal; font-size: 16px; padding: 14px 20px; border-radius: 7px; text-align: left
72 | }
73 | @media (max-width: 768px) {
74 | #servo-anim-code { border-radius: 4px; padding: 14px 14px; margin-bottom: 20px }
75 | #servo-anim-block button.large { margin-bottom: 0; }
76 | #servo-anim-block { padding: 20px 0; }
77 | #sec-what { padding-bottom: 20px; font-size: 14px; }
78 | #sec-what br { display: none; }
79 | }
80 |
81 | #sec-teardown { background: #333; }
82 |
83 | #sec-spec { background: #ddd; border-width: 1px 0; border-color: #ccc; border-style: solid; }
84 | #sec-spec .specs { margin: 20px 0; }
85 |
86 | #sec-lastcall { border-width: 1px 0; border-color: #aaa; border-style: solid; text-align: center; background: #fff }
87 | tt, span.name { color: #f54a42; font-family: inherit; font-size: inherit; }
88 | .disc { padding-left: 25px; margin: 10px 0;}
89 | ul.spread li { margin: 20px 0; }
90 | pre.code { background: #333; border-radius: 5px; line-height: 1.4; padding: 10px 20px; color: #eb0; margin: 20px; }
91 | #sec-what h2, #sec-spec h2 { text-transform: uppercase; text-align: center; font-size: 1.6em; color: #444; margin: 25px 20px; }
92 | h3 { margin-top: 40px; color: #000 !important; }
93 | h4 { text-transform: uppercase; font-size: 0.9em; text-align: center; color: #444; }
94 | block head
95 |
96 | body
97 | - var moduleList = ['accelerometer', 'ambient', 'audio', 'ble', 'camera', 'climate', 'gprs', 'gps', 'ir', 'microsd', 'nrf', 'relay', 'rfid', 'servo']
98 | nav.top-bar.fixed(data-topbar, role="navigation")
99 | ul.title-area
100 | li.name
101 | h1
102 | a(href="/")
103 | img.top-bar__logo(src="https://s3.amazonaws.com/technicalmachine-assets/technical-io/tessel-logo-horizontal.svg", alt="Tessel")
104 | li.toggle-topbar.menu-icon
105 | a(href="#")
106 | span Menu
107 | section.top-bar-section
108 | ul.right
109 | li
110 | a(href="https://tessel.io/start") Start
111 | li
112 | a(href="https://github.com/tessel/t1-docs") Docs
113 | li
114 | a(href="https://tessel.io/modules") Modules
115 | li
116 | a(href="https://tessel.io/projects") Projects
117 | li
118 | a(href="https://tessel.io/forums") Forums
119 | li
120 | a(href="https://tessel.io/shop") Shop
121 | li
122 | a(href="https://tessel.io/blog") Blog
123 | li
124 | a(href="/#{page}" class="active") en
125 | li
126 | a(href="/ja/#{page}") 日本
127 |
128 |
129 | nav.top-bar(data-topbar)#alt-menu
130 | // display this menu in mobile mode
131 | ul.title-area(style="background-color: #d7d7d7;")
132 | li.name
133 | h1
134 | a(href="https://tessel.io/")
135 | nobr
136 | img(src="#{s3url}tessel-name.png", style="max-height: 18px; vertical-align: middle;", alt="Technical Machine")
137 | li.toggle-topbar.menu-icon
138 | a(href="#")
139 | span Menu
140 | section.top-bar-section
141 | ul.right
142 | li
143 | a(href="/install") install
144 | li
145 | a(href="/blinky") blinky
146 | li
147 | a(href="/modules") modules
148 | li
149 | a(href="/wifi") wifi
150 | li
151 | a(href="/tweet") tweet
152 | li
153 | a(href="/usage") usage
154 | li
155 | a(href="/finished") finish
156 |
157 |
158 | section
159 | include _FRE-sidebar.jade
160 | div#fre-content
161 | block content
162 | .row
163 | .large-12.columns
164 | .greyBar
165 | block bottom_nav
166 |
167 | .github-fork-ribbon-wrapper.right-bottom
168 | .github-fork-ribbon
169 | a(href="https://github.com/technicalmachine/start.tessel.io") Fork on Github
170 | footer
171 | section#sec-footer
172 | .row
173 | .large-10.column.large-centered
174 | .row.text-center
175 | p Technical Machine © 2013-2015.
176 | .row.text-center
177 | p
178 | a(href="//tessel.io/resellers") Resellers
179 | | |
180 | a(href="//tessel.io/community") Community
181 | | |
182 | a(href="//tessel.io/about") About us
183 | | |
184 | a(href="//tessel.io/blog") Blog
185 | | |
186 | a(href="//tessel.io/press") Press
187 | .row.text-center
188 | a(href="https://heapanalytics.com/?utm_source=badge")
189 | img(style="width:100px;height:40px" src="//heapanalytics.com/img/badge.png" alt="Heap - iOS and Web Analytics")
190 |
191 | script(src="http://include.reinvigorate.net/re_.js")
192 | script(src="/javascripts/reinvigorate.js")
193 | script.
194 | $(document).foundation();
195 |
--------------------------------------------------------------------------------
/public/stylesheets/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v2.1.2 | MIT License | git.io/normalize */
2 |
3 | /* ==========================================================================
4 | HTML5 display definitions
5 | ========================================================================== */
6 |
7 | /**
8 | * Correct `block` display not defined in IE 8/9.
9 | */
10 |
11 | article,
12 | aside,
13 | details,
14 | figcaption,
15 | figure,
16 | footer,
17 | header,
18 | hgroup,
19 | main,
20 | nav,
21 | section,
22 | summary {
23 | display: block;
24 | }
25 |
26 | /**
27 | * Correct `inline-block` display not defined in IE 8/9.
28 | */
29 |
30 | audio,
31 | canvas,
32 | video {
33 | display: inline-block;
34 | }
35 |
36 | /**
37 | * Prevent modern browsers from displaying `audio` without controls.
38 | * Remove excess height in iOS 5 devices.
39 | */
40 |
41 | audio:not([controls]) {
42 | display: none;
43 | height: 0;
44 | }
45 |
46 | /**
47 | * Address `[hidden]` styling not present in IE 8/9.
48 | * Hide the `template` element in IE, Safari, and Firefox < 22.
49 | */
50 |
51 | [hidden],
52 | template {
53 | display: none;
54 | }
55 |
56 | script {
57 | display: none !important;
58 | }
59 |
60 | /* ==========================================================================
61 | Base
62 | ========================================================================== */
63 |
64 | /**
65 | * 1. Set default font family to sans-serif.
66 | * 2. Prevent iOS text size adjust after orientation change, without disabling
67 | * user zoom.
68 | */
69 |
70 | html {
71 | font-family: sans-serif; /* 1 */
72 | -ms-text-size-adjust: 100%; /* 2 */
73 | -webkit-text-size-adjust: 100%; /* 2 */
74 | }
75 |
76 | /**
77 | * Remove default margin.
78 | */
79 |
80 | body {
81 | margin: 0;
82 | }
83 |
84 | /* ==========================================================================
85 | Links
86 | ========================================================================== */
87 |
88 | /**
89 | * Remove the gray background color from active links in IE 10.
90 | */
91 |
92 | a {
93 | background: transparent;
94 | }
95 |
96 | /**
97 | * Address `outline` inconsistency between Chrome and other browsers.
98 | */
99 |
100 | a:focus {
101 | outline: thin dotted;
102 | }
103 |
104 | /**
105 | * Improve readability when focused and also mouse hovered in all browsers.
106 | */
107 |
108 | a:active,
109 | a:hover {
110 | outline: 0;
111 | }
112 |
113 | /* ==========================================================================
114 | Typography
115 | ========================================================================== */
116 |
117 | /**
118 | * Address variable `h1` font-size and margin within `section` and `article`
119 | * contexts in Firefox 4+, Safari 5, and Chrome.
120 | */
121 |
122 | h1 {
123 | font-size: 2em;
124 | margin: 0.67em 0;
125 | }
126 |
127 | /**
128 | * Address styling not present in IE 8/9, Safari 5, and Chrome.
129 | */
130 |
131 | abbr[title] {
132 | border-bottom: 1px dotted;
133 | }
134 |
135 | /**
136 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
137 | */
138 |
139 | b,
140 | strong {
141 | font-weight: bold;
142 | }
143 |
144 | /**
145 | * Address styling not present in Safari 5 and Chrome.
146 | */
147 |
148 | dfn {
149 | font-style: italic;
150 | }
151 |
152 | /**
153 | * Address differences between Firefox and other browsers.
154 | */
155 |
156 | hr {
157 | -moz-box-sizing: content-box;
158 | box-sizing: content-box;
159 | height: 0;
160 | }
161 |
162 | /**
163 | * Address styling not present in IE 8/9.
164 | */
165 |
166 | mark {
167 | background: #ff0;
168 | color: #000;
169 | }
170 |
171 | /**
172 | * Correct font family set oddly in Safari 5 and Chrome.
173 | */
174 |
175 | code,
176 | kbd,
177 | pre,
178 | samp {
179 | font-family: monospace, serif;
180 | font-size: 1em;
181 | }
182 |
183 | /**
184 | * Improve readability of pre-formatted text in all browsers.
185 | */
186 |
187 | pre {
188 | white-space: pre-wrap;
189 | }
190 |
191 | /**
192 | * Set consistent quote types.
193 | */
194 |
195 | q {
196 | quotes: "\201C" "\201D" "\2018" "\2019";
197 | }
198 |
199 | /**
200 | * Address inconsistent and variable font size in all browsers.
201 | */
202 |
203 | small {
204 | font-size: 80%;
205 | }
206 |
207 | /**
208 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
209 | */
210 |
211 | sub,
212 | sup {
213 | font-size: 75%;
214 | line-height: 0;
215 | position: relative;
216 | vertical-align: baseline;
217 | }
218 |
219 | sup {
220 | top: -0.5em;
221 | }
222 |
223 | sub {
224 | bottom: -0.25em;
225 | }
226 |
227 | /* ==========================================================================
228 | Embedded content
229 | ========================================================================== */
230 |
231 | /**
232 | * Remove border when inside `a` element in IE 8/9.
233 | */
234 |
235 | img {
236 | border: 0;
237 | }
238 |
239 | /**
240 | * Correct overflow displayed oddly in IE 9.
241 | */
242 |
243 | svg:not(:root) {
244 | overflow: hidden;
245 | }
246 |
247 | /* ==========================================================================
248 | Figures
249 | ========================================================================== */
250 |
251 | /**
252 | * Address margin not present in IE 8/9 and Safari 5.
253 | */
254 |
255 | figure {
256 | margin: 0;
257 | }
258 |
259 | /* ==========================================================================
260 | Forms
261 | ========================================================================== */
262 |
263 | /**
264 | * Define consistent border, margin, and padding.
265 | */
266 |
267 | fieldset {
268 | border: 1px solid #c0c0c0;
269 | margin: 0 2px;
270 | padding: 0.35em 0.625em 0.75em;
271 | }
272 |
273 | /**
274 | * 1. Correct `color` not being inherited in IE 8/9.
275 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
276 | */
277 |
278 | legend {
279 | border: 0; /* 1 */
280 | padding: 0; /* 2 */
281 | }
282 |
283 | /**
284 | * 1. Correct font family not being inherited in all browsers.
285 | * 2. Correct font size not being inherited in all browsers.
286 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
287 | */
288 |
289 | button,
290 | input,
291 | select,
292 | textarea {
293 | font-family: inherit; /* 1 */
294 | font-size: 100%; /* 2 */
295 | margin: 0; /* 3 */
296 | }
297 |
298 | /**
299 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
300 | * the UA stylesheet.
301 | */
302 |
303 | button,
304 | input {
305 | line-height: normal;
306 | }
307 |
308 | /**
309 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
310 | * All other form control elements do not inherit `text-transform` values.
311 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
312 | * Correct `select` style inheritance in Firefox 4+ and Opera.
313 | */
314 |
315 | button,
316 | select {
317 | text-transform: none;
318 | }
319 |
320 | /**
321 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
322 | * and `video` controls.
323 | * 2. Correct inability to style clickable `input` types in iOS.
324 | * 3. Improve usability and consistency of cursor style between image-type
325 | * `input` and others.
326 | */
327 |
328 | button,
329 | html input[type="button"], /* 1 */
330 | input[type="reset"],
331 | input[type="submit"] {
332 | -webkit-appearance: button; /* 2 */
333 | cursor: pointer; /* 3 */
334 | }
335 |
336 | /**
337 | * Re-set default cursor for disabled elements.
338 | */
339 |
340 | button[disabled],
341 | html input[disabled] {
342 | cursor: default;
343 | }
344 |
345 | /**
346 | * 1. Address box sizing set to `content-box` in IE 8/9.
347 | * 2. Remove excess padding in IE 8/9.
348 | */
349 |
350 | input[type="checkbox"],
351 | input[type="radio"] {
352 | box-sizing: border-box; /* 1 */
353 | padding: 0; /* 2 */
354 | }
355 |
356 | /**
357 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
358 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
359 | * (include `-moz` to future-proof).
360 | */
361 |
362 | input[type="search"] {
363 | -webkit-appearance: textfield; /* 1 */
364 | -moz-box-sizing: content-box;
365 | -webkit-box-sizing: content-box; /* 2 */
366 | box-sizing: content-box;
367 | }
368 |
369 | /**
370 | * Remove inner padding and search cancel button in Safari 5 and Chrome
371 | * on OS X.
372 | */
373 |
374 | input[type="search"]::-webkit-search-cancel-button,
375 | input[type="search"]::-webkit-search-decoration {
376 | -webkit-appearance: none;
377 | }
378 |
379 | /**
380 | * Remove inner padding and border in Firefox 4+.
381 | */
382 |
383 | button::-moz-focus-inner,
384 | input::-moz-focus-inner {
385 | border: 0;
386 | padding: 0;
387 | }
388 |
389 | /**
390 | * 1. Remove default vertical scrollbar in IE 8/9.
391 | * 2. Improve readability and alignment in all browsers.
392 | */
393 |
394 | textarea {
395 | overflow: auto; /* 1 */
396 | vertical-align: top; /* 2 */
397 | }
398 |
399 | /* ==========================================================================
400 | Tables
401 | ========================================================================== */
402 |
403 | /**
404 | * Remove most spacing between table cells.
405 | */
406 |
407 | table {
408 | border-collapse: collapse;
409 | border-spacing: 0;
410 | }
411 |
--------------------------------------------------------------------------------
/views/ja-layout.jade:
--------------------------------------------------------------------------------
1 | - var moduleList = { 'accelerometer': '加速度センサー', 'ambient': '環境センサー', 'audio': 'オーディオ', 'ble': 'BLE', 'camera': 'カメラ', 'climate': '気候センサー', 'gprs': 'GPRS通信', 'gps': 'GPS', 'ir': '赤外線通信', 'microsd': 'マイクロSD', 'nrf': 'nRF24通信', 'relay': 'リレー', 'rfid': 'RFID', 'servo': 'サーボモーター' }
2 | - title = moduleList[title] || title
3 | doctype html
4 | html
5 | head
6 | title= title
7 | script(src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js")
8 | link(href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css", rel="stylesheet")
9 |
10 | script(src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js")
11 | script(src="/javascripts/custom/active-link.js")
12 | script(src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js")
13 | script(src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation/foundation.tab.min.js")
14 | script(src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation/foundation.topbar.min.js")
15 |
16 | link(rel='stylesheet', href='/stylesheets/style.css')
17 | link(rel='stylesheet', href='/stylesheets/gh-fork-ribbon.css')
18 | link(rel='stylesheet', href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css")
19 |
20 | style.
21 | body { background: white; }
22 | pre code { overflow: auto; }
23 |
24 | .top-bar, .top-bar.expanded .title-area { font-family: Helvetica, sans-serif; background: #eee; z-index: 1000 }
25 | .top-bar-section li a:not(.button) { background: black; font-size: 14px; }
26 | .top-bar a { -webkit-transition: background 0.2s linear; line-height: 42px; height: 45px; display: block; }
27 | .top-bar a:hover { background: rgba(0, 0, 0, 0.1) !important; }
28 | .twitterbird img { height: 40px; vertical-align: middle; }
29 | .top-bar .divider { border-left: 1px solid #bbb !important ; border-right: none !important; }
30 | .top-bar-section li a:not(.button) { background: none; color: black; }
31 | .top-bar-section ul.right { background: #eee; }
32 | .top-bar .toggle-topbar.menu-icon a { color: black; }
33 | .top-bar .toggle-topbar.menu-icon a span {
34 | -webkit-box-shadow: 0 10px 0 1px #000,0 16px 0 1px #000,0 22px 0 1px #000;
35 | box-shadow: 0 10px 0 1px #000,0 16px 0 1px #000,0 22px 0 1px #000;
36 | }
37 | .top-bar.expanded ul.right a { line-height: 20px }
38 | .top-bar.expanded ul.right a img { margin-top: -8px }
39 |
40 | #sec-what, #sec-spec, #sec-lastcall { padding-top: 30px; padding-bottom: 30px; }
41 | #sec-heading { padding-bottom: 30px; text-align: center; }
42 |
43 | #sec-heading .desc { font-size: 1.1em; }
44 | #sec-heading .desc p { font-size: 20px; }
45 | #sec-heading .desc p.tagline { font-size: 34px; text-align: center; line-height: 1.3 }
46 | #sec-heading .desc { margin-top: 100px; }
47 | #sec-heading-pic-column { text-align: right }
48 | @media (max-width: 768px) {
49 | #toTopHover, #toTop { display: none; left: -100000px }
50 | #sec-heading-pic { margin-bottom: -30px; margin-top: -500px !important; z-index: 0; }
51 | #sec-heading-pic { display: none }
52 | #sec-heading .desc { margin-top: 0; }
53 | #sec-heading-pic-column { text-align: center; }
54 | code { font-size: 14px !important; }
55 | }
56 | @media (max-width: 500px) {
57 | code {font-size: 12px !important; }
58 | }
59 |
60 | @media(max-height: 200px){
61 | .side-nav{ overflow-y: scroll; }
62 | }
63 |
64 | @media(max-height: 560px){.side-nav{ overflow-y: scroll; }}
65 |
66 | @media (max-width: 640px){
67 | #alt-menu{ display: block;}
68 | #main-menu{ display: none;}
69 | #sticky-topbar { display:none;}
70 | #fre-sidebar{display: none;}
71 | #fre-content{ margin-left:0px; padding-left:0px; max-width:100%}
72 | }
73 | #sec-heading-pic { width: 360px; margin-top: -150px }
74 | #sec-heading fieldset { background: white; }
75 |
76 | #sec-what { background: #fff; padding: 10px 0 50px; }
77 | .modules li { text-align: center; font-weight: bold; text-transform: uppercase; line-height: 1.1; font-size: 0.8em; }
78 | .modules a { display: block; }
79 | .modules img { max-height: 80px; }
80 | .modules li span { display: block; margin: 10px 0; font-family: Helvetica; }
81 |
82 | #servo-anim-block {
83 | background: #ddeaf6; padding: 50px 0;
84 | }
85 | #servo-anim-code {
86 | font-weight: normal; font-size: 16px; padding: 14px 20px; border-radius: 7px; text-align: left
87 | }
88 | @media (max-width: 768px) {
89 | #servo-anim-code { border-radius: 4px; padding: 14px 14px; margin-bottom: 20px }
90 | #servo-anim-block button.large { margin-bottom: 0; }
91 | #servo-anim-block { padding: 20px 0; }
92 | #sec-what { padding-bottom: 20px; font-size: 14px; }
93 | #sec-what br { display: none; }
94 | }
95 |
96 | #sec-teardown { background: #333; }
97 |
98 | #sec-spec { background: #ddd; border-width: 1px 0; border-color: #ccc; border-style: solid; }
99 | #sec-spec .specs { margin: 20px 0; }
100 |
101 | #sec-lastcall { border-width: 1px 0; border-color: #aaa; border-style: solid; text-align: center; background: #fff }
102 |
103 | #sec-footer { color: white; padding-top: 15px; }
104 |
105 | tt, span.name { color: #f54a42; font-family: inherit; font-size: inherit; }
106 | .disc { padding-left: 25px; margin: 10px 0;}
107 | ul.spread li { margin: 20px 0; }
108 | pre.code { background: #333; border-radius: 5px; line-height: 1.4; padding: 10px 20px; color: #eb0; margin: 20px; }
109 | #sec-what h2, #sec-spec h2 { text-transform: uppercase; text-align: center; font-size: 1.6em; color: #444; margin: 25px 20px; }
110 | h3 { margin-top: 40px; color: #000 !important; }
111 | h4 { text-transform: uppercase; font-size: 0.9em; text-align: center; color: #444; }
112 | block head
113 |
114 | body
115 | #sticky-topbar.sticky
116 | nav.top-bar(data-topbar, data-options="sticky_on: large")
117 | ul.title-area
118 | li.name
119 | h1
120 | a(href="https://tessel.io/")
121 | nobr
122 | img(src="#{s3url}tessel-name.png", style="max-height: 18px; vertical-align: middle;", alt="Technical Machine")
123 | li.toggle-topbar.menu-icon
124 | a(href="#")
125 | span Menu
126 |
127 | section.top-bar-section#main-menu
128 | ul.right
129 | li
130 | a.topMenuBar(href="/" style="background-color:#eee;") 入門
131 | li.divider.hide-for-small
132 | li
133 | a.topMenuBar(href="//tessel.io/docs") ドキュメント
134 | li.divider.hide-for-small
135 | li
136 | a.topMenuBar(href="//tessel.io/modules") モジュール
137 | li.divider.hide-for-small
138 | li
139 | a.topMenuBar(href="//tessel.io/projects") プロジェクト
140 | li.divider.hide-for-small
141 | li
142 | a.topMenuBar(href="//forums.tessel.io") 掲示板
143 | li.divider.hide-for-small
144 | li
145 | a.topMenuBar(href="//shop.tessel.io/") 購入
146 | li.divider.hide-for-small
147 | li
148 | a.topMenuBar(href="//blog.technical.io") ブログ
149 | li.divider.hide-for-small
150 | li
151 | a.twitterbird(href="//twitter.com/technicalhumans" style="background-color:#eee;")
152 | img(src="https://abs.twimg.com/a/1379971261/images/resources/twitter-bird-light-bgs.png", alt="@technicalhumans")
153 | li.divider.hide-for-small
154 | li
155 | a(href="/#{page}" style="background-color:#eee;") en
156 | li.divider.hide-for-small
157 | li
158 | a(href="/ja/#{page}" style="background-color:#eee;" class="active") 日本
159 |
160 | nav.top-bar(data-topbar)#alt-menu
161 | // display this menu in mobile mode
162 | ul.title-area(style="background-color: #d7d7d7;")
163 | li.name
164 | h1
165 | a(href="https://tessel.io/")
166 | nobr
167 | img(src="#{s3url}tessel-name.png", style="max-height: 18px; vertical-align: middle;", alt="Technical Machine")
168 | li.toggle-topbar.menu-icon
169 | a(href="#")
170 | span Menu
171 | section.top-bar-section
172 | ul.right
173 | li
174 | a(href="/install") インストール
175 | li
176 | a(href="/blinky") 点滅
177 | li
178 | a(href="/modules") モジュール
179 | li
180 | a(href="/wifi") 無線LAN
181 | li
182 | a(href="/tweet") ツイート
183 | li
184 | a(href="/usage") コマンド
185 | li
186 | a(href="/finished") おわりに
187 |
188 |
189 | section
190 | include ja-_FRE-sidebar.jade
191 | div#fre-content
192 | block content
193 | .row
194 | .large-12.columns
195 | .greyBar
196 | block bottom_nav
197 |
198 | .github-fork-ribbon-wrapper.right-bottom
199 | .github-fork-ribbon
200 | a(href="https://github.com/technicalmachine/start.tessel.io") Fork on Github
201 |
202 | section#sec-footer
203 | .row.rightalign
204 | .large-12.columns.large-right(style="text-align: right")
205 | p Technical Machine © 2014.
206 |
207 | script(src="http://include.reinvigorate.net/re_.js")
208 | script(src="/javascripts/reinvigorate.js")
209 | script.
210 | $(document).foundation();
211 |
--------------------------------------------------------------------------------
/public/stylesheets/style.css:
--------------------------------------------------------------------------------
1 | /************************ defaults *************************/
2 |
3 | body {
4 | font-family: “Trebuchet MS”, Verdana, Arial, serif;
5 | }
6 |
7 | button {
8 | background-color: #008cba;
9 | color: #ffffff;
10 | }
11 |
12 | button:hover {
13 | background-color: #b8c8f5;
14 | color: #000000;
15 | }
16 |
17 | textarea {
18 | overflow: auto;
19 | }
20 |
21 | code {
22 | word-wrap: break-word;
23 | font-family: Andale Mono;
24 | }
25 |
26 | .box {
27 | border:1px solid #dbdbdb;
28 | padding: 7px;
29 | }
30 |
31 | .bigCode{
32 | font-size:1.6875rem;
33 | }
34 |
35 | .side-nav {
36 | position: fixed;
37 | height:100%;
38 |
39 | width:180px;
40 | padding-left:30px;
41 | }
42 |
43 | .bottomButton{
44 | width: 260px;
45 | }
46 |
47 | .textAlignLeft{
48 | padding-left: 0px;
49 | }
50 |
51 | .greyBar{
52 | width:100%;
53 | height:4px;
54 | background-color:#dbdbdb;
55 | margin-bottom: 30px;
56 | margin-top:10px;
57 | }
58 |
59 | .moduleLink{
60 | font-size:1.3em;
61 | }
62 |
63 | .side-nav li.active>a:first-child{
64 | color: #4d4d4d !important;
65 | font-weight: bold !important;
66 | }
67 |
68 | .tabs dd.active, .tabs li.active{
69 | border-top: 3px solid #2ba6cb;
70 | margin-top: -3px;
71 | border-left: 1px solid #eee;
72 | border-right: 1px solid #eee;
73 | border-bottom: 0px;
74 | }
75 |
76 | .three-up dd{
77 | width: 33.33%;
78 | text-align:center;
79 | }
80 |
81 | .tabs-content{
82 | border: 1px solid #eee;
83 | padding-left: 10px;
84 | padding-right: 10px;
85 | }
86 |
87 | pre.prettyprint, code.prettyprint {
88 | background-color: #000;
89 | -moz-border-radius: 8px;
90 | -webkit-border-radius: 8px;
91 | -o-border-radius: 8px;
92 | -ms-border-radius: 8px;
93 | -khtml-border-radius: 8px;
94 | border-radius: 8px;
95 | }
96 |
97 | pre.prettyprint {
98 | width: 95%;
99 | margin: 1em auto;
100 | padding: 1em;
101 | white-space: pre-wrap;
102 | text-wrap:break-word;
103 | }
104 |
105 | pre .str, code .str { color: #e7e499; } /* string - eggyolk gold */
106 | pre .kwd, code .kwd { color: #b8c8f5; } /* keyword - LED blue */
107 | pre .com, code .com { color: #555555; font-style: italic; } /* comment - foundation blue */
108 | pre .typ, code .typ { color: #6ecbcc; } /* type - turq green */
109 | pre .lit, code .lit { color: #fc0c26; } /* literal - red */
110 | pre .pun, code .pun { color: #8B8970; } /* punctuation - lemon chiffon4 */
111 | pre .pln, code .pln { color: #f0f0f0; } /* plaintext - white */
112 | pre .tag, code .tag { color: #9c9cff; } /* html/xml tag (bluey) */
113 | pre .htm, code .htm { color: #dda0dd; } /* html tag light purply*/
114 | pre .xsl, code .xsl { color: #d0a0d0; } /* xslt tag light purply*/
115 | pre .atn, code .atn { color: #46eeee; font-weight: normal;} /* html/xml attribute name - lt turquoise */
116 | pre .atv, code .atv { color: #EEB4B4; } /* html/xml attribute value - rosy brown2 */
117 | pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
118 |
119 | /********************** single-style ***********************/
120 |
121 | .white {
122 | color: white;
123 | }
124 |
125 | .whiteBackground {
126 | background-color: white;
127 | }
128 |
129 | .opaque {
130 | /* need to figure out something to do with preventing inheritance */
131 | opacity: 1;
132 | }
133 |
134 | .opaque:hover {
135 | opacity:0.3;
136 | }
137 |
138 | .bold {
139 | font-weight: bold;
140 | }
141 |
142 | .break-word {
143 | word-wrap: break-word;
144 | }
145 |
146 | .centeralign {
147 | text-align: center;
148 | }
149 |
150 | .rightalign {
151 | text-align: right;
152 | }
153 |
154 | .leftalign {
155 | text-align: left;
156 | }
157 |
158 | /******************** custom styles **********************/
159 |
160 | cli {
161 | padding-left: 1%;
162 | padding-right: 1%;
163 | display: block;
164 | margin: 2%;
165 | margin-left: 0px;
166 | margin-right: 0px;
167 | border-left: 3px solid #DBDBDB;
168 | }
169 |
170 | .console-output {
171 | background: black;
172 | color: gray;
173 | padding: 15px;
174 | border-radius: 5px;
175 | margin: 15px;
176 | line-height: 1.2em;
177 | font-size: 0.95em;
178 | }
179 |
180 | .currentlink {
181 | color: gray;
182 | }
183 |
184 | .helptext {
185 | color: #888888;
186 | }
187 |
188 | .hiddenbutton {
189 | background-color: white;
190 | color: black;
191 | }
192 |
193 | .hiddenbutton:hover {
194 | background: white;
195 | color: black;
196 | }
197 |
198 | .hiddenbutton:focus {
199 | background: white;
200 | outline: none;
201 | color: black;
202 | }
203 |
204 | .semiopaque:hover {
205 | opacity: 0.6;
206 | }
207 |
208 | /*.semiopaque:focus{
209 | opacity: 1.0;
210 | }*/
211 |
212 | .disguiseaslink {
213 | background-color: #dddddd;
214 | color: #008cba;
215 | padding: 0px;
216 | }
217 |
218 | .disguiseaslink:hover{
219 | background: #dddddd;
220 | color: #006687;
221 | }
222 |
223 | .disguiseaslink:focus{
224 | background: #dddddd;
225 | color: #006687;
226 | outline: none;
227 | }
228 |
229 | .special-embed{
230 | height: 200px;
231 | }
232 |
233 | .social{
234 | height: 50px;
235 | margin-left: 1em;
236 | }
237 |
238 | /************************** sections *************************/
239 |
240 | .moduleFREtext {
241 | font-size:16pt;
242 | font-family:"Open Sans","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;font-weight:300;font-style:normal;color:#222;text-rendering:optimizeLegibility;
243 | margin: 5%;
244 | margin-left: 0;
245 | margin-right: 0;
246 | }
247 |
248 | .modulecontainter {
249 | padding: 10%;
250 | background: white;
251 | word-wrap: break-word;
252 | }
253 |
254 | .main-container {
255 | padding: 5%;
256 | background: #dddddd;
257 | word-wrap: break-word;
258 | }
259 |
260 | .white-container {
261 | padding: 5%;
262 | background: white;
263 | word-wrap: break-word;
264 | display: block;
265 | height: 2000px;
266 | }
267 |
268 | .container-no-background {
269 | padding: 5%;
270 | word-wrap: break-word;
271 | }
272 |
273 | .constrain {
274 | max-width: 400px;
275 | max-height:300px;
276 | }
277 |
278 | .constrain-sm {
279 | max-width: 50px;
280 | vertical-align: center;
281 | }
282 |
283 | .moduleStep{
284 | color: #999999;
285 | font-size: 1.3em;
286 | }
287 |
288 | .num {
289 | display: block;
290 | width: 76px;
291 | padding: 5px;
292 | }
293 |
294 | .small-text {
295 | font-size:0.75em;
296 | }
297 |
298 | .prereqs {
299 | border-width: 2px;
300 | border-style: solid;
301 | border-color: #cccccc;
302 | padding: 1%;
303 | border-radius: 5px;
304 | display: block;
305 | margin:1%;
306 | margin-left: 0px;
307 | margin-right: 0px;
308 | }
309 |
310 | /* FRE Frame */
311 |
312 | #main-menu {
313 | background-color: #eee;
314 | }
315 |
316 | #sec-left {
317 | /*background-color: #eee;*/
318 | color: black;
319 | padding: 15px;
320 | padding-top: 0px;
321 | border-right: thin double;
322 | border-color: #bbb;
323 | }
324 |
325 | .fre-container {
326 | /*background: #eee;*/
327 | color: black;
328 | word-wrap: break-word;
329 | padding-top:20px;
330 | }
331 |
332 | .beige-back {
333 | /*background: #eee;*/
334 | }
335 |
336 | .footer{
337 | padding-bottom: 30px;
338 | padding-top: 30px;
339 | }
340 |
341 | /* Module FRE */
342 |
343 | .modulehead {
344 | cursor: pointer;
345 | border-bottom: 3px solid #fff;
346 | background-color: #eee;
347 | }
348 |
349 | .moduleTitle{
350 | color: #008cba;
351 | display: inline-block;
352 | padding-top:10px;
353 | }
354 |
355 | .triangle {
356 | display: inline-block;
357 | width: 0px;
358 | height: 0px;
359 | border-style: solid;
360 | border-width: 9px 0 9px 23px;
361 | border-color: transparent transparent transparent #008cba;
362 | }
363 |
364 | .modulebody {
365 | background-color: none;
366 | padding: 30px;
367 | }
368 |
369 | #moduleFRE {
370 | text-align: left;
371 | }
372 |
373 | .project-container {
374 | }
375 |
376 | .project-image {
377 | height: 150px;
378 | overflow: hidden;
379 | }
380 |
381 | .project-title {
382 | font-weight: bold;
383 | }
384 |
385 | /************************** other *************************/
386 | .triangle-side {
387 | width: 15px;
388 | transform:rotate(90deg);
389 | -ms-transform:rotate(90deg); /* IE 9 */
390 | -webkit-transform:rotate(90deg); /* Safari and Chrome */
391 | }
392 |
393 | .triangle-down {
394 | transform:rotate(180deg);
395 | -ms-transform:rotate(180deg); /* IE 9 */
396 | -webkit-transform:rotate(180deg); /* Safari and Chrome */
397 | }
398 |
399 | /* Module Icons */
400 |
401 | .modules {
402 | background-color: white;
403 | padding-left: 10px;
404 | padding-right: 10px;
405 | color: black;
406 | text-align: center;
407 | height: 100px;
408 | top: 1px;
409 | }
410 |
411 | #alt-menu{
412 | display: none;
413 | }
414 |
415 | .top-bar .toggle-topbar.menu-icon a span {
416 | -webkit-box-shadow: none !important;
417 | box-shadow: none !important;
418 | background-color: #eee;
419 | }
420 |
421 | #fre-content{
422 | margin-left:-180px;
423 | padding-left:400px;
424 | max-width:100%
425 | }
426 | .modules:hover {
427 | background: white;
428 | color: black;
429 | }
430 |
431 | .modules:focus {
432 | background: white;
433 | outline: none;
434 | color: black;
435 | }
436 |
437 |
438 | .modules[title]:hover:after {
439 | content: attr(title);
440 | display: block;
441 | width: 50px;
442 | text-align: center;
443 | height: 0px;
444 | }
445 |
446 | .inlineCode {
447 | background-color: #f8f8f8;
448 | color: #666666;
449 | border: 1px solid #ddd;
450 | border-radius: 3px;
451 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
452 | font-size: 14px;
453 | padding: 2px;
454 | margin: 0px;
455 | }
456 |
457 | /* New Project */
458 |
459 | textarea#readme {
460 | height: 800px;
461 | }
462 |
463 | input#repotitle {
464 | font-size: 2.75rem;
465 | }
466 |
467 | body#newfromrepo {
468 | text-align: center;
469 | background: #008cba;
470 | }
471 |
472 | .main-container#newfromrepo {
473 | background: white;
474 | }
475 |
476 | /* Main Projects Page */
477 |
478 | #projects {
479 | position: relative;
480 | }
481 |
482 | .projectTile {
483 | width: 230px;
484 | padding: 0;
485 | margin: 5px;
486 | position: relative;
487 | }
488 |
489 | .projectTile:hover {
490 | /* background-color: #b8c8f5;*/
491 | opacity: 0.8;
492 | }
493 |
494 | #logout {
495 | display: block;
496 | max-width: 152px;
497 | text-align: right;
498 | }
499 |
500 | /************************** old *************************/
501 |
502 | .belowh3[title]:hover:after {
503 | content: attr(title);
504 | position: absolute;
505 | top: 90px;
506 | left: 90px;
507 | }
508 |
--------------------------------------------------------------------------------