{"id":88295740,"date":"2020-05-31T23:09:09","date_gmt":"2020-05-31T23:09:09","guid":{"rendered":"http:\/\/www.mikehedman.com\/blog\/?p=88295740"},"modified":"2020-05-31T23:29:21","modified_gmt":"2020-05-31T23:29:21","slug":"moddable-meetings","status":"publish","type":"post","link":"https:\/\/mikehedman.com\/blog\/moddable-meetings\/","title":{"rendered":"Moddable Meetings"},"content":{"rendered":"\n

I’ve been working from home for a number of years, but the Coronavirus lockdown brought me a couple new “office” mates – my family! But being a remote worker means I’m in a lot<\/em><\/strong> of video conferences. With a day or two, it became obvious that we needed a way for the family to know when I’m on a call, and when’s a good time to chat.<\/p>\n\n\n\n

After a number of (failed) iterations, I settled on using a Moddable Two<\/a> programmable display. The Moddable Two is a fully programmable (with JavaScript) device, with a color touchscreen, WiFi, Bluetooth, and a bunch of other goodies…….for $25!!!<\/p>\n\n\n\n

Here’s how the final product came out:<\/p>\n\n\n\n

\"Display
Busy Morning<\/figcaption><\/figure>\n\n\n\n

Software side<\/h3>\n\n\n\n

Just want to jump to the code? Github repository is here<\/a>.
There are two software projects that make up this system: the display software, and a Chrome Extension to collect the meeting schedule from an MS Outlook web view.<\/p>\n\n\n\n

Display<\/h4>\n\n\n\n

The display software implements a web server, and uses mDNS to publish a local URL that can be seen by my work computer. It receives the schedule, and displays the meetings in a scrollable list.<\/p>\n\n\n\n

During meetings, the active schedule entry turns red.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

So that family members can let me know if they’d like to see me, the display has a row of buttons. Pressing one of the buttons triggers a notification to be displayed on my work computer.<\/p>\n\n\n\n

\"Computer<\/figure>\n\n\n\n

The display has an auto-dimmer, that darkens the screen at the end of the workday, but clicking on the face wakes it up for a couple minutes.<\/p>\n\n\n\n

Chrome Extension<\/h4>\n\n\n\n

The Chrome Extension loads only on a page that’s displaying an Outlook calendar view, eg: outlook.office.com\/calendar<\/p>\n\n\n\n

The Extension scrapes the web page and collects meetings, bundles up start and end times, and sends them off to the Moddable Two device. These API calls return and pending message notifications (family member pushed one of the device buttons), which the Extension then displays on the work computer.<\/p>\n\n\n\n

Hardware<\/h3>\n\n\n\n

Moddable Two<\/h4>\n\n\n\n

The Moddable Two is a little wonder. To get an idea of the kinds of things it can do, check out one of<\/em><\/strong> the example pages<\/a>. It’s not without its challenges though. The main difficulty is that while it’s fully programmable with JavaScript, it’s NOT browser\/web based. The display is not implemented with HTML and CSS. Learning the display framework is a bit of a chore. To make things easier, the folks at Moddable have provided the source code for a ton of examples. My project has nuggets of code (lovingly!) stolen from at least 4 of their sample projects.<\/p>\n\n\n\n

Baseplate<\/h4>\n\n\n\n

The back of the Moddable Two is basically just a circuit board, so it’s not something you can just stick to a wall. And, since this is an ongoing hobby project, I wanted to be able to easily be able to remove it from the mount to deploy\/test new software features.<\/p>\n\n\n\n

The answer was a 3D-printed baseplate, that can be semi-permanently attached to the wall, but allows the display to slide in and out.<\/p>\n\n\n\n

\"Printed<\/figure>\n\n\n\n

The printable model, OpenSCAD model file, and addition images are available on Thingiverse<\/a>.<\/p>\n\n\n\n

Early iterations<\/h3>\n\n\n\n

micro:bit<\/h4>\n\n\n\n

The first version of this project used a micro:bit<\/a>. During an active meeting<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The micro:bit doesn’t have the networking capabilities of the Moddable Two. The device used USB for power, and to receive “on” and “off” messages when meetings begin and end. During meetings, the LEDs would pulse in a starburst pattern.<\/p>\n\n\n\n

On the work computer, the schedule was being scraped by a NodeJS app, using Puppeteer to interact with a Chromium window.<\/p>\n\n\n\n

Managing the USB connection when the computer went to sleep was a pain. It also meant that the device needed to be directly tethered to the computer.<\/p>\n\n\n\n

Adafruit<\/h4>\n\n\n\n

The second iteration used the Moddable Two, and used Adafruit IO<\/a> as a data “middleman”. The work computer would send schedule info up to Adafruit, and the Moddable would pull it down. Message notifications went the other direction.<\/p>\n\n\n\n

After reading this blog post<\/a> by one of the engineers at Moddable, I had the pieces of the puzzle that allowed me to abandon the middleman, and added the webserver to the Moddable device, and used mDNS to make it easily findable.<\/p>\n\n\n\n

Scraping<\/h4>\n\n\n\n

The web scraping isn’t the best. I did go down the path of using Microsoft’s Graph to access the schedule, but couldn’t get it to work due to access restrictions on my work’s server.<\/p>\n","protected":false},"excerpt":{"rendered":"

I’ve been working from home for a number of years, but the Coronavirus lockdown brought me a couple new “office” mates – my family! But being a remote worker means I’m in a lot of video conferences. With a day or two, it became obvious that we needed a way for the family to know […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-88295740","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8kdl1-5YtKQ","_links":{"self":[{"href":"https:\/\/mikehedman.com\/blog\/wp-json\/wp\/v2\/posts\/88295740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mikehedman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mikehedman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mikehedman.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mikehedman.com\/blog\/wp-json\/wp\/v2\/comments?post=88295740"}],"version-history":[{"count":4,"href":"https:\/\/mikehedman.com\/blog\/wp-json\/wp\/v2\/posts\/88295740\/revisions"}],"predecessor-version":[{"id":88295752,"href":"https:\/\/mikehedman.com\/blog\/wp-json\/wp\/v2\/posts\/88295740\/revisions\/88295752"}],"wp:attachment":[{"href":"https:\/\/mikehedman.com\/blog\/wp-json\/wp\/v2\/media?parent=88295740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mikehedman.com\/blog\/wp-json\/wp\/v2\/categories?post=88295740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mikehedman.com\/blog\/wp-json\/wp\/v2\/tags?post=88295740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}