Lose It! is an excellent service that helps people lose weight by monitoring calories intake. It integrates with variety of devices so I was curious if I can display my user data on Pebble smartwatch (to make sure I can have another piece of cake or not).

Unfortunately LoseIt doesn’t have a public API. There had to be another way.

Enter screen scraping. When you login into LoseIt, homepage show all the information (total calories allowance, calories consumed, calories burned etc.) We can harvest this information and pass along. To simplify this I am using TamperMonkey for Chrome browser which allows you to run custom scripts against any webpages. It does require a browser with the page open constantly running, which is not a problem if you have a machine running 24/7. But all in all – this is just a proof of concept.

So here the idea:

1. Harvest data from LoseIt homepage with TamperMonkey
2. Send harvested data to Pushover.Net notification service
3. Pushover will generate notification to their Android app
4. Pushover for Android will act as trigger for Tasker
5. Tasker will use Canvas for Pebble as an action to generate Canvas layers
6. Canvas will display received information on Pebble watch

Yeah it looks like this approach but it’s fun to build the chain and it works.

Here’s a complete TamperMonkey script to get the data and post it to PushOver:

// ==UserScript==
// @name       LoseIt data scrap
// @namespace  http://codecorner.galanter.net/
// @version    0.1
// @description  Scraps data from LoseIt page
// @match      http://www.loseit.com/
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js
// @copyright  2014, Yuriy Galanter
// ==/UserScript==

setTimeout(function() {
    
    var $aTotal = $('.GN30PYJCMVB');
    var $aDetails = $('.GN30PYJCDNB');
    
    if (localStorage['remain'] != $aTotal[4].innerText) {
        
        localStorage['remain'] = $aTotal[4].innerText;

        var sMessage = 'Budget: ' + $aTotal[0].innerText + '^';
    	sMessage += $aDetails[0].innerText + '^';
    	sMessage += $aDetails[1].innerText + '^';
    	sMessage += $aDetails[2].innerText + '^';
    	sMessage += $aDetails[3].innerText + '^';
        sMessage += $aDetails[4].innerText + '^';
    	sMessage += (parseInt($aTotal[4].innerText) >= 0? 
                      'Under: ' : 'Over: ') + $aTotal[4].innerText;
    
		$.post("https://api.pushover.net/1/messages.json",
    			{
      				token: '[your PushoverApplication token]',
      				user: '[your PushOver user token',
     				message: sMessage,
      				title: 'LoseIt',
     				priority: -2
                }, function() {
                    location.reload();
                }
    	)
    } else {
     	location.reload();   
    }    
 
}, 900000)

As you can see script matches only http://www.loseit.com/ site (you have to be already logged in) and using jQuery class selector retrieves DOM elements holding total amounts (Budget, remaining calories etc.) and details (calories eaten at breakfast, lunch, dinner etc.). The script checks whether newly retrieved value of remained calories changed comparing to a saved one and if it doesn’t – simply reloads the page to retrieve fresh values.

If the amount changed – the script then constructs out of selected elements a “^” separated string message for future parsing. After that the script sends the constructed message to Pushover. Note that you have to have a user account there and you have to register your application there to get a token. Note also that message is sent with “priority: -2” – this will not generate an notification alert on your device, but it will still act as a Tasker trigger. After message is posted – page is reloaded to retrieve fresh values. Entire script is wrapped into `setTimeout` function to run every 15 minutes.

Web side is done. Now on your android device start Tasker and select Pushover plugin as trigger for profile, in its configuration tell it to match title “LoseIt”. Connect it to a task that first split %pushovermessage variable by ^ splitter. After that add 7 Canvas tasks that map respective split variables to Tasker entries:

• %pushovermessage1 – LoseIt Budget
• %pushovermessage2 – LoseIt Breakfast
• %pushovermessage3 – LoseIt Lunch
• %pushovermessage4 – LoseIt Dinner
• %pushovermessage5 – LoseIt Snack
• %pushovermessage6 – LoseIt Exercise
• %pushovermessage7 – LoseIt Remained

Tasker part is done. Now open Canvas for Pebble to build watcface to your liking and fill it with dynamic layers of Content:Tasker and tasker items described above.

See, wasn’t that easy?