f3.js
For those who create Internet of Things by code.

About f3.js

Arduino and other prototyping toolkits have lowered the burden of creating physical computing devices that utilize microcontrollers (or tiny computers), sensors, and actuators. Increasing numbers of microcontrollers and tiny computers (e.g.Intel Edison) are capable of running dynamically-typed languages such as JavaScript. Meanwhile, in order to create practical IoT applications, software engineers face difficulties inherent to their physical nature. Designing enclosures is one such case.

There are tons of tutorials for creating physical prototypes, but they typically advocate putting microcontrollers on breadboards and connecting them to modules with jumper wires. Such prototypes are too fragile to test the usability in realistic situations. To create more stable and usable prototypes, programmers usually need to learn computer-aided design (CAD) tools and create enclosures from scratch that host microcontrollers and other modules.

f3.js is an integrated development environment with which a JavaScript programmer can write a single codebase for simultaneously controlling microcontrollers and specifying the device enclosure layout. The name f3.js stands for Form follows function() for JavaScript. The single codebase is called IoT content that defines every aspect of physical computing devices. f3.js is a WIDE that lowers the burden of creating IoT content on the web.

Supported Software and Hardware

Software (Development Environment)

f3.js is designed to work on the latest browser with JavaScript enabled. We test f3.js in the following environments:

  • Windows 10: Microsoft Edge 25
  • Windows 7 & 8.1: Internet Explorer 11, Chrome 49
  • Mac OS X: Safari 8, Chrome 49

In order to transfer applications to microcontrollers and tiny computers, PC (Windows 7, 8.1, 10) and Mac (Mac OS X) are needed.

Microcontrollers and Modules

f3.js can be used to develop JavaScript-based applications for the following microcontrollers and tiny computers:

f3.js supports modules (sensors and actuators) with drivers distributed as npm packages. Currently, 0 modules are supported. (You can add support for more modules!)

Printers

f3.js produces PDF files that define layouts of hardware modules. We test printing the PDF files with the following laser cutters:

Team

We are a small team in Japan's national research institute, doing research that enables various kinds of people (e.g. programmers and designers) to create, customize, and utilize IoT content.

Academic Publications

  • [Full paper] Jun Kato and Masataka Goto, "f3.js: A Parametric Design Tool for Physical Computing Devices for Both Interaction Designers and End-users", In Proc. of DIS'17 pp.1099-1110. PDF
  • [Demo] Jun Kato and Masataka Goto, "Form Follows Function(): An IDE to Create Laser-cut Interfaces and Microcontroller Programs from Single Code Base", In Proc. of UIST'15 Adjunct Proceedings pp.43-44. PDF

Terms and Conditions

  • 本ウェブサイトの機能・情報を用いると実際に印刷して利活用できるIoTコンテンツを出力できますが、このようなIoTコンテンツの利活用を含め、本サイトの機能・情報を用いたことによる損害に対していかなる責任も負いません。
  • 本ウェブサイトは研究目的での実証実験中であり、申し訳ありませんが、メンテナンスのための停止や動作に不具合がある可能性があります。動作不具合(バグ)に関しては @f3jsorg 宛てにご連絡いただければ修正できることもあります。
  • 研究及びシステム改善のために、利用ログをGoogle Analyticsおよびf3.jsサーバにて収集しております。収集したログの一部や集計結果を研究発表等で公表することがあります。個人が特定される形での公表はしません。
  • 本技術等の商用利用にご興味のある方はf3.js Project <f3js-ml@aist.go.jp>にご相談下さい。

Acknowledgements

f3.js is developed with love, TypeScript, and the following libraries and tools.

f3.js Server

  • Visual Studio Code + Grunt (Development Environment)
  • Node.js (Web Server)
  • Express 4 (Framework)
  • Pug (HTML Rendering Engine)
  • MySQL (Database Server)

f3.js Client