iOS

Apple HomeKit for Nest, Logitech Harmony Hub, etc.

Posted on Updated on

Ever want to use Siri or the iOS Home app to control your Nest thermostat (https://nest.com/thermostat/) or Logitech Harmony Hub (http://www.logitech.com/en-us/product/harmony-hub)?

At the time of writing, those products do not come with built-in HomeKit support but they do have APIs for 3rd party developers.

Until those products get updated to work with HomeKit directly, there’s a 3rd party solution out there called Homebridge (https://github.com/nfarina/homebridge) where you set up an Apple HomeKit bridge and then install plug-ins for those HomeKit-incompatible devices:

 

The Nest plug-in can:

  • Set the target temperature
  • Read the target temperature (what the temperature will eventually become)
  • Read the current temperature (what the temperature is right now)
  • Read the current humidity

 

The Harmony Hub plug-in can:

  • Turn on an activity (hubs have activities that act like toggle switch accessories so if a hub as 2 activities and you are currently on one activity, turning on another activity will simply switch to that other activity)
  • Turn off an activity (exactly the same pressing the Off button on the remote regardless of whether that activity is the current activity)

 

Setting up Homebridge involves a financial commitment (you need hardware to run it like an always-on computer, a Docker-compatible NAS, or other device) and there’s no guarantees that Homebridge will work for your exact home devices or whether it will keep working for you in the future (the software is free after all) so consider this may just be a toy. I chose the NAS-based approach because I had other reasons to buy that hardware. For a long term solution, you should ask the companies that make your favorite HomeKit-incompatible devices to add support for HomeKit or simply stop buying the incompatible products and instead support companies making products that do support HomeKit.

Initial Setup

Get a device that can run Docker. For example, some Synology NAS (network attached storage) models are capable of running Docker. Go to https://www.synology.com/en-us/dsm/app_packages/Docker to see a list of compatible devices, e.g. the DS216+II ($300) and be sure to get disks to put into the NAS too (2x$231 for WD Red 6TB NAS-grade disks). Homebridge takes up hardly any space at all so 6TB disks might be overkill for you unless you are using this for other NAS purposes like backups.

Connect to your Synology NAS DSM (DiskStation manager) using your browser (refer to your Synology setup instructions for how to do this, e.g. a QuickConnect URL).

Open the DSM Control Panel – Hardware & Power – HDD Hibernation and turn off any hibernation. I was experiencing Docker mysteriously deleting my Homebridge containers without any explanation (no log messages) until I cam across someone online suggesting to disable hibernation. Once disabling it, I no longer experienced this daily mystery.

Open the DSM Package Center.

Search for Docker and install it. If Docker is not found, then this Synology doesn’t support running Docker.

Open the DSM Control PanelShared Folders.

Create a shared folder named docker.

From the DSM Main Menu, open Docker.

From Docker’s Registry tab, search for the image marcoraddatz-synology-homebridge, select it, and click Download.

Using your computer, mount the docker shared folder, e.g. using the macOS Finder – Go – Connect to Server and then specify afp://yoursynologyname.local and then select the docker share.

Create a folder named homebridge in the docker share.

In this new homebridge folder, create a text file named install.sh (a shell script) using a pure text editor such as TextWrangler (you cannot use a rich text editor like TextEdit).

The contents of install.sh should be like the following (this is where you identify which Homebridge plug-ins you want to use):

#!/bin/sh

npm install -g homebridge-harmonyhub
npm install -g homebridge-nest
npm install -g homebridge-synology

In that same homebridge folder of the docker share, create another text file named config.json (JSON has a specific syntax so you need to be careful about commas, braces, etc.–you may find a JSON validator to help you catch syntax errors).

The contents of config.json should be something like the following (don’t worry about changing the contents of it just yet, we will edit that later and leave it like this for now):

{
  "bridge": {
    "name": "Homebridge",
    "username": "CC:22:33:11:EE:77",
    "port": 51825,
    "pin": "031-45-154"
  },

  "description": "This is an example configuration file with all supported devices. You can use this as a template for creating your own configuration file containing devices you actually own.",

  "platforms": [
    {
      "platform": "Nest",
      "token" : "",
      "clientId": "product-id-eventually-goes-here",
      "clientSecret": "ProductSecretEventuallyGoesHere",
      "code": "PINCODETODO",
      "username": "yournestaccountname@yourmail.com",
      "password": "yournestaccountpassword"
    },
    {
      "platform": "HarmonyHub",
      "name": "Harmony Hub"
    }
  ],

  "accessories": [
  ]
}

Go back to your web browser where you have loaded your Synology DSM. In the Docker app, click on the Image tab. Select the Homebridge row and click Launch to create a container. Click Advanced Settings. Go to the Volume tab – Add Folder and select docker – homebridge. This will prompt you for a Mount path which should be set to /root/.homebridge (essentially an otherwise hidden folder alias). Go to the Network tab and check the Use the same network as Docker host option. Click OK on the Advanced Settings dialog then Next then Apply.

Go to the Docker Container tab to see the container we launched. This is where you can start, stop, or restart your Homebridge. You can also see a log of activity (in case of errors) by selecting the container’s row and then clicking on DetailsLog (it doesn’t auto-update so you may need to click the reload icon in the bottom-right corner if you are expecting more text to be logged).

If the Homebridge container is currently running, either click the toggle switch to turn off or select the container row and then click ActionStop.

Let’s go back to your config.json file in the docker share to finalize the settings:

Notice the platforms array has a series of comma-separated objects indicated with { and }. If you are not using a particular Homebridge plug-in, delete the corresponding platform entry (remember to make sure your JSON is still valid).

The Harmony Hub platform is pretty much automatic so no tweaking necessary.

If you are going to use the Nest plug-in, there is a bit of a process you need to complete to make sure that configuration is correct for your specific Nest thermostat (these steps were adapted from the plug-in’s own setup instructions), e.g.:

  1. Go to https://developer.nest.com
  2. Choose Sign In
  3. Use your normal Nest account to sign in
  4. Fill in you info in ‘Step 1’
  5. In ‘Step 2’ set:
  6. Go to Products and create a new product
  7. Fill in:
    • Product Name: HomeBridge
    • Description: Open source project to provide HomeKit integration
    • Categories: HomeAutomation
    • Support URL: https://github.com/kraigm/homebridge-nest
    • Redirect URL: [LEAVE BLANK]
    • Permissions (minimum):
      • Enable Thermostat with read/write v6
      • Enable Away with read/write v2
      • Enable Smoke+CO alarm with read v4 (if you ever might want Nest Protect)
      • Enable Camera with read v2 (if you ever might want Nest Cam, motion detection only)
  8. Now you should have a product. Now locate the Keys section on the right of your product’s page
  9. Copy the Product ID to your Homebridge config.json as the clientId in the Nest config
  10. Copy the Product Secret to your Homebridge config.json as the clientSecret in the Nest config
  11. Navigate to the Authorization URL
  12. Accept the terms and copy the Pin Code to your Homebridge config.json as the code in the Nest config
  13. Run Homebridge once (do not include the token in the config at this time; leave it blank) and you should find a log message (Docker – Container – Homebridge – Details – Log) that says something like “CODE IS ONLY VALID ONCE! Update config to use {‘token’:’c.5ABsTpo88k5yfNIxZlh…’} instead.” Copy that exact token value to your Homebridge config.json as the token in the Nest config. If you do not do this then the container will periodically crash even though you might otherwise think your Nest is working properly.
  14. Restart Homebridge and it should succeed with the new token.
    After that you will be done with the Nest config. If the token is working correctly, you no longer need the other three configs (clientId, clientSecret, and code) nor the original username and password from the legacy system (but you can keep them around if you wish, they will be ignored).

Connect Homebridge to HomeKit

Using your iOS device, open the built-in Home app.

Tap on the Rooms tab, swipe to the Default Room, tap the + button, and tap Add Accessory.

If Docker is successfully set up for Homebridge, a button named Homebridge will appear. Tap on it.

You may get a dialog asking you to Add Anyway then tap on Enter Code Manually.

Type in the bridge pin from the config.json file to confirm the pairing.

You will then see a series of Accessory confirmations. Since you might have multiple Harmony Hubs, it can be difficult to identify which switch corresponds to which Hub so for now, you can just keep tapping on Next to have them all added into the Default Room or an assumed room. If you don’t already have rooms set up, now is a good time to create a room for every room where your devices are located (e.g. Living Room, Family Room, Bedroom, etc.).

For each accessory, long-press the accessory icon to interact with it or change Details.

For the Nest Thermostat, be careful not to accidentally turn on the Air Conditioner mode in the winter time (keep it on Heat otherwise you might damage your AC equipment). In the details screen, I renamed mine to be just Nest and changed its location to be my Living Room. Examples of things you can say to Siri:

  • What is the temperature in the living room?
  • Set the living room temperature to 70 degrees
  • What is the setting for the living room Nest?
  • Set the Nest to 72 degrees
  • What is the humidity in the Living Room?
  • Turn down the temperature
  • Turn up the temperature by 2 degrees

 

Note that asking What is the temperature? is regarding the outside temperature via The Weather Channel, not your Nest’s temperature.

For the Harmony Hub activities, I move them to the appropriate room (try toggling them to confirm locations) and then instead of having accessory names like Watch TV, name them as the device name considering you will eventually be using Siri to Turn on/off the [Room Name] [Device Name].

If you want to create HomeKit scenes that change multiple devices at the same time, you may need to use a 3rd party iOS app like Home (https://itunes.apple.com/us/app/home-smart-home-automation/id995994352?mt=8). With Siri you can then say Set Theater or Good morning. Most scenes need to be triggered by saying Set [Scene Name] but there are 4 special scene names that don’t require the Set prefix:

  • Good morning
  • Good night
  • I’m home
  • I’m leaving

 

Siri struggles with some scene names so you may need to play with the names. Some names I frequently use are Normal (standard light setting), Master night light (a dim setting for the bathroom in the evening), Couch off (Turn off the lights above the couch), Movie lights (really dim and some lights off to prevent screen glare), Intermission (brightness between Normal and Movie lights–not too dark and not too jarringly bright for getting up during a movie).

Examples of scenes that I’ve set up to work with my Harmony Hubs include:

  • Theater – sets the same lights as my Movie lights scene but also turns on the Apple TV Harmony Hub activity. It would be awesome to have this lower a blackout window shade too.
  • Good Morning – sets the master bath lights to normal brightness and turns on the bedroom TV (I haven’t yet set up a special Harmony Hub activity yet that will also change the channel to my favorite morning news but in theory Harmony’s activity setup allows such a macro).

Limitations

  • As far as I can tell, the Synology Docker app doesn’t have any GUI setting to make your Homebridge container start automatically when your Synology restarts. There might be some command line mechanisms but I don’t know how that interacts with configurations made via the UI. Hopefully a future Synology Docker software update fixes this.
  • The Harmony Hub plug-in doesn’t have a way to trigger specific remote buttons; you have to use the Harmony activity setup tool to create new activities if you want to tack on additional button presses.

Troubleshooting

  • First thing to check is the Synology DSM – Docker – Container – Details – Log for error messages.
  • Look for tips on the Homebridge website or plug-in website (some errors are listed as known and can be ignored).
  • Search the web for other ideas.

Mobile Web Inspector Developer Tools

Posted on Updated on

What is a web inspector?

A web inspector is a developer tool that allows you to debug JavaScript, CSS, and HTML. You’ll usually get a file resource browser, performance monitoring tools, the ability to set code breakpoints (although in my experience breakpoints are somewhat flaky depending on which version of the mobile OS and desktop browser you are using–so often I resort to using the JavaScript “debugger” keyword to act like a breakpoint), the ability to edit HTML, and a tool for visualizing, resolving, and changing style properties–all without having to redeploy your application.

Apple introduced the ability to use the desktop Safari web inspector developer tools with iOS application WebViews and mobile Safari back in iOS 6 and Safari 6. Each new release of iOS has required that you use a corresponding version of desktop Safari so beware of this if you are planning to upgrade one device but not the other.

Google introduced the ability to use the desktop Chrome web inspector developer tools with Android application WebViews and mobile Chrome in Android 4.4 when the Chrome WebView was introduced. Many legacy Android devices are still being sold (let alone in use) but unfortunately, it is not compatible with the web inspector. For situations like that, there are some third party techniques available that require you to inject code into your application in order to send messages back and forth with a server. Those solutions have much fewer abilities than a formal web inspector. To combat this legacy issue, Google introduced a Google Play-updatable WebView in Android 5 Lollipop so your application can take advantage of new technologies even if the OS is not upgradeable.

Regardless of the platform, it is important to note that the WebView and the mobile browser are not equal. If something works in the browser, you cannot always expect it to work exactly the same way in the WebView. For example, on Android, I have seen as much as a major version number difference of 3 between the two. On iOS (prior to WKWebView), JavaScript performance was severely throttled compared to what mobile Safari had.

This post only discusses web inspectors. If you are interested in debugging Java code for your application, refer to the Oracle MAF developer guide for instructions.

Setting up your Oracle MAF Application

For iOS, there is no property to edit, you either need to use a debug deployment or use Xcode to run the application. For Android, you must edit the src/META-INF/maf.properties file of your application so that it defines:

javascript.debug.enabled=true

You can only use a web inspector with development (aka non-production) applications.

If you want to connect the web inspector before the first screen loads, will need to edit your run configuration’s “Application Arguments” to specify the following which allows you to configure how many seconds before the WebView will get populated with content.

-featureContentDelay 20

If doing this in an already-generated Xcode project, this setting goes in the Run Scheme’s “Arguments Pass On Launch” field.

Setting up your Desktop Browser

I assume that you already have your device set up for development so I won’t cover it here (e.g. Android needs development mode and USB debugging turned on via tapping the build number 7 times, iOS needs the device set up as “Use for development”, etc.).

Desktop Chrome doesn’t require anything special but I use this optional “ADB” Chrome extension as a convenience since I find it easier to click an icon vs. typing a special URL in the address bar.

Desktop Safari requires you to enable the “Develop” menu in its Advanced Preferences dialog:

Safari Preferences Advanced Settings

Using the Safari Web Inspector

From the Safari Develop menu, your connected devices and iOS Simulator will display as submenus. Each submenu will list all of the WebViews that you are allowed to inspect (if you are not sure which one you want, a light blue highlight will appear on your device or in the simulator as you hover over each menu item).

Open an iOS WebView inspector

A web inspector window will open once you select that menu item:

Safari Web Inspector

The UI varies across versions of desktop Safari but I’ll describe one here as an example. The “Resources” tab (1) is where you can browse the DOM, look at scripts, style sheets, etc. When the HTML resource is selected, the main panel will show you the DOM tree (3) which you can manually browse for an element. Alternatively, you can use the crosshairs tool (2) to click on the screen (of the actual device or the simulator) to pick an element that you want to inspect.

With an element selected, you can then use the “Styles” tab (4) of the right panel to view the element’s style properties. This will show you the exact selectors that are providing each style to the inspected element (5). This is incredibly valuable, particularly when multiple selectors are competing (a line will strike out any styles that lose out due to some other more specific selector). You can also edit those values directly or add additional properties and see the change immediately take effect on the screen. Beware changes made in the inspector do not get saved permanently into your application. If you are trying to create a custom style sheet, you’ll need to jot down elsewhere the changes you’ve made; if you leave the page or close the app, you’ll lose your changes.

Using the Chrome Web Inspector

First, visit Chrome’s “chrome://inspect/#devices” page to see a list of your connected and debuggable Android devices. Each will appear with all of the WebViews that you are able to inspect. An icon will appear with a darker gray and the WebView listed towards the top will be what is currently visible on the Android screen.

Chrome Devices

A web inspector will open once you click the “inspect” link.

Chrome Web Inspector

The UI varies across versions of desktop Chrome but I’ll describe one here as an example. The “Elements” tab (1) is where you can browse the DOM. The main panel will show you the DOM tree (3) which you can manually browse for an element. Alternatively, you can use the magnifying glass tool (2) to click on the screen (of the actual device or the emulator) to pick an element that you want to inspect.

With an element selected, you can then use the “Styles” tab (4) of the right panel to view the element’s style properties. This will show you the exact selectors that are providing each style to the inspected element (5). This is incredibly valuable, particularly when multiple selectors are competing (a line will strike out any styles that lose due to some other more specific selector). You can also edit those values directly or add additional properties and see the change immediately take effect on the screen. Beware changes made in the inspector do not get saved permanently into your application. If you are trying to create a custom style sheet, you’ll need to jot down elsewhere the changes you’ve made; if you leave the page or close the app, you’ll lose your changes.

Further Reading

https://github.com/phonegap/phonegap/wiki/Debugging-in-PhoneGap

iOS Web Inspector

Posted on Updated on

The content of this post has been updated with additional detail at:

https://formattc.wordpress.com/2015/08/21/mobile-web-inspector-developer-tools/

Oracle ADF Mobile Mock Component Gallery Demo

Posted on Updated on

Demo running in mobile Safari

In the past I posted a link to the Oracle ADF Faces Rich Client demos (server-based web applications). Now that the Oracle ADF Mobile framework for native iOS and Android applications has been released, a similar demo is now available: the Oracle ADF Mobile mock component gallery.

This mock component gallery is based on the real component gallery application bundled with the ADF Mobile JDeveloper extension. The recommended best place to view this demo is using the mobile Safari or Chrome browsers on your iOS and Android devices. Doing that will give you the closest experience to how the components will appear and behave in real ADF Mobile applications. However, you can also view the demo using desktop Safari and Chrome for an approximate experience when access to a mobile device is not available.