webCoRE Update v0.3.107.20180806: Tons of new icons and infinite icon combinations, auto-expanding textareas

#1

Note that the latest release requires an update to your smart apps and a hard refresh of the dashboard (clean app cache for Android) to avoid seeing missing or in some cases absurdly gigantic icons.

New icons with support for badges and combined icons via Font Awesome 5

webCoRE now supports Font Awesome 5 Pro with thousands of new icons and excellent features for stacking and customizing icons. All icons in your pistons should continue to work but may look slightly different in Font Awesome 5.

30%20PM

Check out all the icons here; each icon is provided with three variations in weight/outline and you can use both the free and pro icons.

The wiki includes documentation and examples for how to make use of Font Awesome 5, itā€™s a good starting point to learn about whatā€™s new in FA5. I wonā€™t include any instructions in this post; please see if the wiki is clear enough to figure it out.

Iā€™ll just leave this example here as a tidbit, please read the wiki:
11%20AM

Auto-expanding textareas

Expressions, descriptions, and other textareas will now grow to accommodate the height of the text being typed. In some cases this provides a better user experience, but ultimately this is a workaround for very unreliable scrolling in the expression editor. Users explained having to copy expressions out of webCoRE and paste into a text editor to make changes since it was occasionally not possible to scroll. There were also issues scrolling expressions on touchscreen devices.

Now the textareas will grow as you type:

elastic-textarea
elastic-textarea.gif752Ɨ226 252 KB

Want to learn more about Font Awesome 5?

Missing icons

missing icons

If you see animated ! and ? icons either the smart apps or dashboard have not yet been updated. Be sure to update the smart apps and refresh your dashboard.

Font Awesome Pro vs Free

webCoRE uses a Pro license for Font Awesome which provides access to all icons available in the collection. The Free version simply has fewer icons and variations. Unfortunately, Font Awesome does not automatically load the free version if the site is not authorized for pro so we had to do a bit of work to support that.

If you are using a self-hosted dashboard (i.e. not dashboard.webcore.co), Font Awesome Free should load automatically if you have not purchased a license. If you have purchased a license, be sure to authorize the domain for your dashboard to access the Font Awesome Pro CDN.

Icons were renamed in FA 5, how can all the old icons still work?

Font Awesome 4 is no longer loaded*. Instead, the dashboard uses the compatibility shim published by Font Awesome which maps the old style fa fa-circle-o to the new style far fa-circle behind-the-scenes. Icon appearance may differ slightly from FA 4. We highly recommend using the new Font Awesome 5 formats described in the wiki in case Font Awesome ever drops support for the compatibility shim, plus you may find more appropriate icons in the expanded set.

* Font Awesome 4 is loaded only if you visit the ā€œDashboard (beta)ā€ page, because that page was too big of a hassle to upgrade.

The calendar example isnā€™t working for me!

Sorry about that, a bug was discovered in Font Awesome and weā€™re waiting on a fix for proper alignment of text inside layered icons.

Font Awesome 5.0
Flashing Question Mark and Exclamation Point when Viewing Piston
Global datetime Variable resets to current date/time when edited
Font Awesome Update?
Font Awesome: fa-layers-text data transform broken
Global boolean variable resets to false or no value selected when manually editing
Edit window can not get to bottom of code
pinned globally #2
#3

Very pleased to see this. Been tinkering with FA5 for awhile on another website.

FYI, I think you need another colon here in the wiki

:fas fa-exclamation data-fa-transform=ā€œgrow-20 rotate-10ā€

#4

Thanks, fixed

#5

Wondering if anyone can provide and real-world examples of how, why and where youā€™d use these icons.

#6

Tiles on your Dashboard is one possibility:

temp temp temp temp temp

Text on your Dashboard is another:

temp

Alternatively, If you want multi-colored symbols, you can copy most of the images from hereā€¦ Just keep in mind you will loose a few of the advance options if you go this routeā€¦
(no inverted image, no rotation, no layering, no specific colors, etc)

Sunrise examples using Emotes:
temp temp
. . . Win 8 . . vs . . Win 10 . . .

SIDE NOTE :
I know the emotes also work great in SMS and emails, but I have not tested the Font Awesomeā€™s icons thereā€¦

#7

This is what I had played with earlier in testingā€¦ one icon for Door/Lock/Unlocked, instead of separate one for door and lock.

image

#8

I was wondering if this could be used in piston state. I donā€™t use the dashboard or tiles feature in webCoRE so piston state would be what Iā€™d like to use it for.

#9

They wonā€™t work in emails or SMS, unfortunately the Font Awesome icons are only for display on the dashboard.

Absolutely! Icons have been supported in piston state but we never had wiki documentation on how to use them. Since the piston state text is so small the icon size helpers are useful and I also make extensive use of the fa-fw modifier to make all icons the same width which is important for aligning multiple lines of text and icons.

#10

I also make extensive use of the fa-fw modifier to make all icons the same width which is important for aligning multiple lines of text and icons.

That would improve the look of the dropdown menu on the mobile dashboard as well. :grinning: Also, is the icon next to the selected instance as intended? Looks broken to me but my eyes arenā€™t what they used to be.

#11

Yes, this was one of the examples I gave above.
(I went with a multi-line piston state, but you donā€™t have to)

temp

This is broken for me as wellā€¦ Fully updated and hard refreshed, of course.

temp

This is in Firefox on Windowsā€¦

#12

The dashboard has been updated with

  • fix for a serious glitch with the initial height of the expression editor for large expressions
  • icon improvements in the dropdown menus, using fa-lg fa-fw now for proper alignment and icons that are big enough to distinguish :slight_smile:
  • fixes for collapse icon positioning and lack of rotation

This will require a refresh of the dashboard to load the changes but there are no smart app updates required.

#13

Been seeing some other odd behavior since the latest repo update, wherein I open a piston and find the drag/drop grabbers have moved from the margins next to this pistons like this.

grabber

At that same time, if I add a new variable (i.e., string text) the editing window displays the following:

variables

Iā€™ve found that if I save and exit the piston and do a hard reload of the browser, I can open the piston for editing and most of the time everything is back to ā€˜normal.ā€™ Also variable.t and variable.n have been replaced with their intended values.

Iā€™ve rebuilt the data cache a couple of time, but that seems to have no effect.

Anybody else seeing this?

#14

Which web browser? That seems like something that could be caused by a script error, can you check for any red errors in your browserā€™s error console?

#15

At this point Iā€™ve seen the error in Firefox 61, Firefox Mobile, and Chrome Mobile. I seem to recall seeing it in Chrome Desktop as well, but I canā€™t be sure as I didnā€™t screenshot it at the time.

Edit1: Found the screenshot for Chrome Desktop 68 as well.

Image1

Iā€™ll look for the error console info next time the problem occurs.

Edit2: Just happened in Chrome again. No red errors.

#16

Thanks for following up. Is it all of your pistons or just a few? Once the editor breaks for one piston can you click back to the dashboard and edit another piston successfully or does that fail in the same way until you refresh the browser? Are you using dashboard.webcore.co or a self-hosted dashboard?

#17

I havenā€™t gone through all of my pistons, but it seems to happen at random ā€” not with any particular ones.

It fails in the same way until I hard refresh.

dashboard.webcore.co

Initially, since I didnā€™t see anyone else complaining, I assumed it was most likely a misbehaving browser extension. But the broad range of browsers on which Iā€™m experiencing the problem seems to eliminate that possibility. As I appear to be alone on this, Iā€™ll watch it more closely over time and see if I canā€™t narrow the issue further. Fortunately, itā€™s only a minor annoyance at this point.

Thanks.

#18

Iā€™ve only seen that behavior onceā€¦ on chrome.

#19

Cross-posted my reply earlier this morning in the other thread discussing this issue:

I think I figured out what is going on here and it is related to something else that I need to fix this week. While in development, the order of scripts was guaranteed, the webCoRE custom scripts always loaded before Font Awesome. However, on the production site both of those scripts are loaded asynchronously.

I am fairly confident now that what you are seeing here is a result of Font Awesome loading before webCoRE and therefore not seeing the Font Awesome config that is specified in the webCoRE script.

As of a few hours ago, after one more hard browser refresh of dashboard.webcore.co this should be resolved. Let me know whether the problem continues. Thanks for posting the screenshots!

#20

Must be a minion thread above my pay grade. Or Iā€™m lousy at searching these things out. :smirk:

Iā€™m guessing the issue was more apparent to me because I was doing a lot of editing recentlyā€”mostly streamlining pistons Iā€™d created a long time that were rather clumsily written, but also integrating the new icons.

Never sure whether trouble follows me, I follow trouble, or I simply am trouble. :rofl: