基本情報

このページではIoTコンテンツ(レイアウトマネージャのテスト)をベースにして、新しいコンテンツを「フォーク」できます。フォークしたコンテンツは、プロジェクトの一覧ページに新しい項目として表示されます。元の項目を上書きしたい場合は編集してください。

※写真URLは.jpg, .jpeg, .pngのいずれかで終わるもの、またはGyazoへアップロードされたページのURL(https://gyazo.com/hogehogeなど)に対応しています。

※IoTコンテンツの説明、エントリポイントに関する情報 main: index.js およびf3jsモジュールへの依存情報 dependencies: { f3js: (略) } は、この欄の内容とマージされるため記入不要です。

プライベートコンテンツ

チェックを外すと、このコンテンツはすぐ一覧に公開され、誰でもアクセスできるようになります。 なるべくコンテンツを共有していただきたいので、チェックは初めから外れています。また、ログインしていない状態ではチェックをつけられません。 一度公開されたコンテンツは、プライベートにできません。(一度チェックを外すと、以降そのコンテンツを編集するときにはチェックをつけられなくなります。)

ソースコード

マイコン・小型コンピュータのプログラムのソースコードを記述してください。f3jsパッケージをrequireすることで筐体設計が可能です。詳しくはAPIドキュメントをご覧ください。

var f3js = require('f3js') , c = f3js.cc(); c.x = 20; c.y = 10; c.drawCircle(80, 80, 80); // 円を描く var Grove = require('jsupm_grove') , i2clcd = require('jsupm_i2clcd') , buttons = [] , numButtons = 4; // Number of buttons [1, 5] var circleGuide = c.drawCircle(80, 80, 40); // ガイドを描く circleGuide.layout = { name: 'distribute', valign: 'top' }; for (var i = 0; i < numButtons; i ++) { var circle = c.drawCircle(0, 0, 10); c.add(circle, circleGuide); var button = new Grove.GroveButton(3 + i); c.add(button, circleGuide); // ボタンを配置する buttons.push(button); } c.drawCircle(270, 90, 90); var sizeUnawareCircleGuide = c.drawCircle(270, 90, 40); sizeUnawareCircleGuide.layout = { name: 'distribute', size: false, rotate: false }; var lcd = new i2clcd.Jhd1313m1(); c.add(lcd, sizeUnawareCircleGuide); c.add(new Grove.GroveButton(2), sizeUnawareCircleGuide); c.add(new Grove.GroveButton(3), sizeUnawareCircleGuide); c.add(new Grove.GroveButton(4), sizeUnawareCircleGuide); var lineGuide = c.drawLine(0, 200, 160, 200); lineGuide.layout = { name: 'align', padding: 5 }; for (var i = 0; i < numButtons; i ++) { var button = new Grove.GroveButton(3 + numButtons + i); c.add(button, lineGuide).rotate(10 * i); // ボタンを配置する buttons.push(button); } var lineWrappingGuide = c.drawLine(160, 230, 160, 270); lineWrappingGuide.layout = { name: 'align' }; for (var i = 0; i < numButtons; i ++) { var button = new Grove.GroveButton(3 + numButtons * 2 + i); c.add(button, lineWrappingGuide); // ボタンを配置する buttons.push(button); } setInterval(function () { // ボタンが押されたらコンソールにメッセージを出す for (var i = 0; i < buttons.length; i ++) { if (buttons[i].value() > 0) console.log('button(' + i + ') pressed.'); } }, 100); // その他のコードは http://f3js.org/projects を見てみましょう! // APIドキュメントは http://f3js.org/docs にあります。
カスタマイズ

このコンテンツにはカスタマイズできる項目がありません。

表示オプション
ソースコード中で変数宣言にコメントをつけるとカスタマイズ項目としてGUIウィジェットが表示されます。グレーアウトしているウィジェットはユーザが提案した項目で、ソースコード末尾の変数宣言に対応しています。

設計のダウンロード

モジュール

このプロジェクトは組み立てにモジュールを必要としません。

レイアウト
プログラム

ログインしないと使えない機能です。