Black Lives Matter - Action and Equality. ... Adafruit is open and shipping.
0

#AdafruitIO Dashboard Updates: Indicators, Icon Blocks, and Drag-and-Drop Images

Hi Adafruit IO Community,

We’re excited to tell you about two new blocks we’ve added to Adafruit IO dashboards this week to help you build richer interfaces. Icons and Indicators, two features that have been requested a lot in the last few years.

What are these new blocks? Adam writes…

Icon

Icon blocks take a feed value and display the appropriate icon, when the feed value is a string selected from the collection shown here.

You can use Icon blocks as live changeable visual displays by sending different values to the feed, as in the example above, or as permanent labels to improve the display of your data. Drop a text block next to an icon block on your dashboard and drop some icons into the text block to see how they look.

Indicator

Indicator blocks let you pick an ON color and an OFF color and then describe which state the Indicator block should be in based on conditions you set. The block compares the selected feed’s current value to the given conditions and chooses a color accordingly.

indicator block settings with conditions highlighted

You can use one condition or as many as you like. Conditions, by default, use Javascript’s parseFloat function to attempt to convert the feed’s current value and the condition values to a number for comparison. If either value, the feed or the string, can’t be converted to a number (isNaN(f_value) === true), then the condition is compared string-to-string.

For example, I could create an indicator for a temperature sensor that stays in the ON state as long as the value is between 70 and 78.

indicator condition in given range

In Javascript, those conditions would be evaluated like this:

function compare(feed_value) {
  return feed_value >= 70 && feed_value <= 78;
}

Or I could create an indicator that turns on whenever my feed matches a particular value.

indicator condition in set

In this case, the code equivalent would be:

function compare(feed_value) {
  return feed_value === "ALPHA" ||
      feed_value === "BETA" ||
      feed_value === "GAMMA" ||
      feed_value === "BONANZA";
}

We don’t do any checking on your conditions to make sure they’re logically consistent. The conditions editor will happily let you enter impossible conditions (for example < 2 and > 2 or = 1 and = 0), so make sure to do your own testing before creating the block.

You may notice in the block editor screenshot above that we’ve given you access the “Test Value” that’s used in the block preview. That should help in testing your conditional logic to make sure the indicator turns on and off at the times you are expecting. Set your conditions and play with the value to see when they trigger. No data is sent to IO when you change the test value, so it’s safe to play with settings on any block.

BONUS! Drag and drop for image blocks

It’s now possible to drag and drop images onto any Image dashboard block to automatically publish the properly formatted Base64 image data string to your feed.

There are some important things to keep in mind when using this feature. Normal feeds are limited to 1KB of data, or about 1024 bytes, for publishing. Turning off feed history from the feed settings page allows publishing up to 100KB, or 102400 bytes, of data. Image conversion from binary to Base64 happens inside the browser, with no image pre-compression, and more importantly, conversion from binary to Base64 expands the size of the image data.

You’ll have to do your own testing to figure out what an appropriate image size and format (png, gif, or bmp) for you are. For example, the .png image used for testing below has an on disk size of 68089 bytes, but a Base64 value of 90788 bytes, an expansion factor of about 150%, which is really close to the limit.

sample image for upload

image upload testing in block editor

One funny artifact of the drag and drop feature is that IO doesn’t actually care if you’re using the block to publish image data. Any file that can be converted into Base64 (which is any file) can be dropped onto an image block and sent to MQTT subscribers.

Let us know what you’re making!

Join us in the Adafruit IO forum or on Discord in the adafruit-io channel with questions, comments, or suggestions. We love seeing what you all come up with when we add new features to Adafruit IO!


We are angry, frustrated, and in pain because of the violence and murder of Black people by the police because of racism. We are in the fight AGAINST RACISM. George Floyd was murdered, his life stolen. The Adafruit teams have specific actions we’ve done, are doing, and will do together as a company and culture. We are asking the Adafruit community to get involved and share what you are doing. The Adafruit teams will not settle for a hash tag, a Tweet, or an icon change. We will work on real change, and that requires real action and real work together. That is what we will do each day, each month, each year – we will hold ourselves accountable and publish our collective efforts, partnerships, activism, donations, openly and publicly. Our blog and social media platforms will be utilized in actionable ways. Join us and the anti-racist efforts working to end police brutality, reform the criminal justice system, and dismantle the many other forms of systemic racism at work in this country, read more @ adafruit.com/blacklivesmatter

Stop breadboarding and soldering – start making immediately! Adafruit’s Circuit Playground is jam-packed with LEDs, sensors, buttons, alligator clip pads and more. Build projects with Circuit Playground in a few minutes with the drag-and-drop MakeCode programming site, learn computer science using the CS Discoveries class on code.org, jump into CircuitPython to learn Python and hardware together, TinyGO, or even use the Arduino IDE. Circuit Playground Express is the newest and best Circuit Playground board, with support for CircuitPython, MakeCode, and Arduino. It has a powerful processor, 10 NeoPixels, mini speaker, InfraRed receive and transmit, two buttons, a switch, 14 alligator clip pads, and lots of sensors: capacitive touch, IR proximity, temperature, light, motion and sound. A whole wide world of electronics and coding is waiting for you, and it fits in the palm of your hand.

Join 20,000+ makers on Adafruit’s Discord channels and be part of the community! http://adafru.it/discord

Have an amazing project to share? The Electronics Show and Tell is every Wednesday at 7pm ET! To join, head over to YouTube and check out the show’s live chat – we’ll post the link there.

Join us every Wednesday night at 8pm ET for Ask an Engineer!

Follow Adafruit on Instagram for top secret new products, behinds the scenes and more https://www.instagram.com/adafruit/

CircuitPython – The easiest way to program microcontrollers – CircuitPython.org


Maker Business — To make it through a tough business cycle, layoffs should be a last resort

Wearables — Microphone protection

Electronics — Sizzlin’ Chip Test

Python for Microcontrollers — Python on Microcontrollers Newsletter: Make: The Rise of Python, CLUE, CircuitPython 6 and more! #Python #Adafruit #CircuitPython @circuitpython @micropython @ThePSF

Adafruit IoT Monthly — BLE Store Capacity Indicator, Aquarium Automation, and more!

Microsoft MakeCode — Virus Destroyer!

EYE on NPI — Maxim’s Himalaya uSLIC Step-Down Power Module #EyeOnNPI @maximintegrated @digikey

New Products – Adafruit Industries – Makers, hackers, artists, designers and engineers! — NewProducts 8/6/2020 Feat. #Adafruit #ST25DV16K I2C #RFID #EEPROM #Breakout – STEMMA QT / Qwiic!

Get the only spam-free daily newsletter about wearables, running a "maker business", electronic tips and more! Subscribe at AdafruitDaily.com !



No Comments

No comments yet.

Sorry, the comment form is closed at this time.