Showing Wunderlist tasks as custom HTML - but not in Android app

Apps & Services Android App
1

Hello,

since I am really missing the possibility of dynamically generating sitemap subitems (e.g. receive a JSON with items, and generate them on-the-fly within a sitemap based on how many items the JSON returns) I’ve coded a static HTML page myself.

Actually, I wanted to show my Wunderlist tasks as sitemap entries in my OpenHAB instance.

To do that, I’ve coded this simple AngularJS1-based webpage that gets my Wunderlist tasks from an API developed by me (it serves tasks as JSON), and I then just generate them as OpenHAB-like tiles using the Angular binding (ng-repeat).

The code is quite simple:

<style type="text/css">
	.wunderlist-item
	{
		width: calc(50% - 16px);

		display: inline-block;
		margin: 0 8px;
		padding: 4px 0;
		min-height: 48px;

		font-family: "Helvetica", "Arial", sans-serif;
	    font-size: 14px;
	    font-weight: 400;
	    line-height: 20px;
	    color: #616161;

		border-bottom: 1px solid #cccccc;
	}

	.wunderlist-item img
	{
		margin-right: 12px;
		position: relative;
		top: 10px;
	}

	@media only screen and (max-width: 839px) 
	{
		.wunderlist-item
		{
			width: calc(100% - 16px);
		}
	}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script type="text/javascript">
	var wunderlistApp = angular.module("wunderlistApp", []);
	wunderlistApp.controller("wunderlistCtrl", function($scope, $http) {

		// get "list" parameter value
		name= "list";
	    name = name.replace(/[\[\]]/g, "\\$&");
	    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
	    var results = regex.exec(document.location.href);
	    if (!results) return null;
	    if (!results[2]) return '';
	    listId = decodeURIComponent(results[2].replace(/\+/g, " ")); 

		// grab data
		$scope.wunderlistInterval = null;
		$scope.wunderlistRefresh = function()
		{		
			$http({
	            method: 'GET',
	            url: "myAPIsource/?command=wunderlist&list=" + listId,
	            timeout: 2000
	        }).then(function(response) {
		        $scope.wunderlistTasks = response.data.data.tasks;  
		    });
		    $scope.wunderlistInterval = setTimeout($scope.wunderlistRefresh, 3000);
		}
		$scope.wunderlistRefresh();

	});

</script>



<section ng-app="wunderlistApp" ng-controller="wunderlistCtrl">
	<div class="wunderlist-item" ng-repeat="task in wunderlistTasks">
		<img src="../icon/keyring?format=svg" width="32">
		{{task.title}}
	</div>
	 
</section>

And my CSS makes it look like native OpenHAB sitemap items as well:

shopping

So I now have my shopping list from Wunderlist within OpenHAB to be shared with my family. Unfortunately, this site only renders in browser and not in the Android app. Any ideas why?

Best,
Denis

2

Have you tried recently. there was an update of the app?

3

Would you be able to share the code of the API and write a tutorial?

4

Hey, Vincent.

I can share the code, of course. Here is the tutorial.

Go to https://developer.wunderlist.com/apps with your account (i.e. the one where you have lists you want to have in OpenHAB) and create a new app. The URL and Callback URL are actually irrelevant, the only important thing is that, at the end, you obtain an Access Token and a Client ID.

wunderlist.php => https://pastebin.com/zUUdtWB9
Upload this file to your webserver and make sure you replace MY_ACCESS_TOKEN and MY_CLIENT_ID with credentials to access the Wunderlist API you obtained in the previous step.

wunderlist.html => https://pastebin.com/7J1sXXuk
Place it in /etc/openhab2/html/ and make sure you replace PATH_TO_ICON_32x32 with your OpenHAB’s instance keyring icon (e.g. http://YOUR_IP_ADDRESS:8080/icon/keyring?format=png), and PATH_TO_WUNDERLIST.PHP with the pathof wunderlist.php you uploaded before.

Then you can simply add every list you have in Wunderlist into your sitemap like this:

Text label="Shopping list" icon="keyring" 
{
	Webview url="/static/wunderlist.html?list=NUMBER_OF_MY_LIST" height=18 
}

where you have to replace NUMBER_OF_MY_LIST with the number you get when you open Wunderlist in a browser and click on any of the lists (you can get it from the URL which is https://www.wunderlist.com/#/lists/NUMBER_OF_MY_LIST).

I hope this helps.

Best,
Denis

PS: no, I have not checked the updated Android app… will do, thanks.

1 Like
5

Can you try the latest beta version (https://play.google.com/store/apps/details?id=org.openhab.habdroid.beta)?