Escolar Documentos
Profissional Documentos
Cultura Documentos
View source
files here!
A b o u t t he A u t h o r
L uis rodriguez
w: www.uxcodeline.com
t: @UXCodeLine
job: UI and UX designer
and developer
areas of expertise:
Service design methods,
screenwriting and
emerging technologies
q: if you could change one
thing about the industry,
what would it be?
a: For everyone to
be considerate and
economical in their use
of technology
IoT
res ource
This talk by Luis
Rodriguez from Nation
Conferences explores
The CSS of the Internet
of Things the idea of
how to keep CSS alive
in an interconnected
world: netm.ag/CSS-289
104
february 2017
IoT
In-depTh
css in interconnected
products
Prototype components Our sample application comprises a sensor (1), microcontroller (2),
web API (3), and an adaptive UI (4)
a web-baSed aPi
Once the temperature reading is recorded in memory,
a timestamp needs to be added to it before inserting
arduino set-up A typical Arduino set-up, consisting of cables, wires, pins, sensors and a USB
laptop connection
PROJECTS IoT
FOCUS On
data usage
How much data is used by humans or systems when doing things
like downloading music, streaming video and so on.
energy consumption
Consumption of energy or power, for example by residential and
commercial buildings.
food consumption
Amount of food available for human consumption, measured in
kilocalories and kilojoules.
Health data
Real-time sets such as disease diagnosis and survival trends
and historical sets such as payment and claims information.
dna reading
Genetic code parsed into reading frames:
AGGTGACACCGCAAGCCTTATATTAGC
AGGTGACACCGCAAGCCTTATATTAGC
AGGTGACACCGCAAGCCTTATATTAGC
economy
Statistics-based indicators such as housing stats, PPI, same-store
sales, weekly jobless claims, Philly Fed, lagging indicators, core CPI
and industrial production.
Prototype possibilities Our data feed comes from the LM35 weather sensor,
but there are endless possibilities for working with dynamic sensor data
106
february 2017
an adaPtive interface
At this point we want to put together a simple UI
with a single-page application (SPA) starter pack
and a JS-based tool like React or Angular. Ive picked
React because it makes it easy to describe what the
browser should render, removes a lot of noise when
building the DOM in the browser, and binds data from
any API very fast. Also, instead of re-rendering the
entire DOM, it only updates the UI elements that have
changed, which is great for prototyping.
To get started with your UI, first install the SPA
using one of the many starter packs available online.
A very convenient one is the web app boilerplate React
kit (www.reactstarterkit.com). Once youve familiarised
yourself with the file structure, youll need to set up
a new component that accesses the JSON feed in the
local web server or a cloud service and processes the
data for display.
In React, setState is the main method used to
trigger UI updates. Changes are triggered by event
IoT
handlers or server request callbacks, and then need
to be implemented correctly to read the JSON file.
Finally, we define the variable readings to hold the
parsed data, and the <ReadingsList /> tag in the render
method to represent the UI component that serves
the visualisation:
loadPathsData() {
this.setState({data: data});
}
loadInitialState() {
return {data: {readings: []}};
}
componentWillMount() {
this.loadPathsData();
}
render() {
return (
<div>
<ReadingsList data={this.state.data}/>
</div>
);
}
Define the ReadingsList UI component to hold the
readings from the previously created JSON file.
Add a new class ( Readings List ) directly above the
class definition. React uses the render method to
implement the virtual representation of a native
DOM component (such as the <div /> below) or any
other defined component. As a result we have a UI
component that displays the JSON readings:
var ReadingsList = React.createClass ({
render: function() {
return (
<div>
</div>
)
}
});
Combine dynamic CSS declarations with data
mappings to style the readings in the browser (see
boxout A note on CSS).
You can force-refresh at either the component or
browser level at short intervals. This can be done
using the more robust React forceUpdate function
(which tells React it needs to re-run render() above
by calling forceUpdate ), or implemented in the Jade
template rendering with a basic setInterval function.
wHatS next?
The basic IoT prototyping concepts illustrated in
this article can be built upon in order to design
interconnected products or services that make
dynamic data useful and usable in adaptive UIs,
whether these are served in a mobile device, smaller
display or even an interactive TV screen. Basic
web development skills can be taken beyond web
servers and flat screen interfaces through Open Web
technologies we are already familiar with.
Web professionals are starting to explore practical
ways of working with data arrays that originate in
sensors and then have a user interface designed
around them. These explorations offer new ways of
thinking about data and design in interconnected
products, in which CSS is not just about styles
but a vehicle through which to create meaningful
connections between humans and data. There is
also a lot to experiment with in new and upcoming
CSS-based technologies that couple CSS declarations
with data elements to enhance digital experiences,
including browser rendering techniques.
Data is all around us, and we have a unique
opportunity to use it to see the unseen, and write
hooks for it in CSS through JavaScript were talking
about lessening friction and creating a seamless
contact point between humans and any digital
product. The adoption of JavaScript in IoT platforms
suggests CSS will still be a primary styling tool of
choice for JavaScript-based clients or web browsers
of all sizes for a while.
res ource
For additional current
dynamic sensor data
visualisations that make
use of ReactJS, CSS and
real world complex data
arrays, see netm.ag/
dynamic-289