基本情報

このページでは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 = 5; // ボタン数 [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ウィジェットが表示されます。グレーアウトしているウィジェットはユーザが提案した項目で、ソースコード末尾の変数宣言に対応しています。

設計のダウンロード

モジュール

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

レイアウト
プログラム

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