Category Archives: Javascript

Easily verify yourself on Mastodon with GitHub

Mastodon unlike Twitter doesn’t have official (or paid, thanks Elon Musk) verification badge for account profile, but it does offer a way to verify yourself – by placing following link tag into HTML of a website/page you own (your blog for example):

<a rel="me" href="https://your.instance/@YourHandle">Mastodon</a>

where “your.instance” and “@YourHandle” are the Mastodon server you use and your profile handle respectfully. But what if you want to verify yourself with your GitHub profile? An ideal place would be something like a README.md file. Unfortunately every link placed into a markdown file automatically gets rel="nofollow", so it’s a no-go. But there is a way to do this. Continue reading →

Writing first Mastodon bot

Over the years I’ve written quite a few Twitter bots. But since Elon Musk took over – the bird site has become unbearable, so I, like many others, migrated to Mastodon. What Mastodon is, and how it operates is a whole another story, but for our intents and purposes it is similar to Twitter: there is a home timeline where posts from people you follow appear, and you can post to the timeline as well.

Back on Twitter I used to have a bot that would tweet one-liners from Pink Floyd lyrics every hour. Follow me along as I recreate it on Mastodon.

First and foremost you have to make sure the Mastodon instance you’re on allows bots. Some do, some don’t – read the server rules to find out. I am using botsin.space instance that is specifically meant to host bots. Continue reading →

Copy/Paste image into an editable DOM element in Chrome

All major browsers allow to paste image directly into a DOM element with contentEditable property set to true. They automatically convert it into IMG element with source pointing to base64 encoded DataURI of the pasted image. That is all browsers, but Chrome. Chrome needs a little help.

In my particular case I need to be able to paste image into an IFRAME with editable body of the content document (for some reason Infragistics WebHtmlEditor ASP.NET control renders itself as this contraption). But the code below applies (with small changes) to any editable DOM element.

To achieve the result we need to perform 3 tasks:

1. Capture image from the clipboard
2. Convert the image to DataURI format
3. Create IMG element with the DataURI source and insert it into the DOM

Take a look at the code below: Continue reading →

Fling a random insult at Trump after every tweet

Ok time to get political. I hate many things that Trump tweets these days and would love to reply to each tweet personally, but have neither time not desire to read his delusions. Fortunately in these modern times robots take many of our jobs. And this looked like a perfect job for a bot. Similarly to the bot described in the previous post it will be IFTTT + Scriptr combo. But this time in reverse, here’s intended flow:

  1. Twitter service at IFTTT detects when @realDonaldTrump tweets
  2. It triggers Maker service that makes HTTP request to Scriptr code
  3. Scriptr code generates random insult and posts a reply to Trump’s tweet

Here’s what IFTTT applet looks like: Continue reading →

Tweet images with Scriptr and IFTTT

Sev Trek

Looks like everybody is doing Twitter bots these days so I decided to try my hand on one as well. And it had to be something lighthearted – to let people’s mind off things for a while. Way back in early 2000s there was a funny parody comic of Star Trek called Sev Trek. Original site is gone now, but archive of images was saved at http://sevspace.com/stupidarchive/sevtrek.asp.htm. Images are numbered sequentially – ideal for automatic processing. My bot would tweet random images every couple hours.

To host bot’s script I decided to go with Scriptr which offers powerful JavaScript backend and multiple expansion modules. And IFTTT has a cool Twitter service, one that can tweet image from an URL. So the idea was:

  1. Code hosted at Scriptr generates URL pointing to an image at sevspace.com
  2. Code then call Maker service of IFTTT – custom service capable of accepting HTTP requests
  3. Maker service triggers Twitter service and passes URL of image it got from Scriptr code
  4. IFTTT Twitter service tweets the image

Continue reading →

Simulating Pebble GPath in Rocky.js

RockyJS is a black magic voodoo from Pebble Dev team. It allows you to run your JavaScript code on the actual smartwatch (unlike PebbleJS that runs on the phone). When RockyJS debuted it ran as a simulation in a browser, but since then it matured and now runs in Pebble emulators and on actual hardware.

RockyJS changed drastically since that web release. It resembles C code less and takes more standardized JavaScript approach. During that transition some features were lost. One of them is Pebble GPath concept – a graphical object that consist of set of coordinates that you can freely move and rotate. In particular missing commands gpath_move_to, gpath_rotate_to and gpath_draw_outline that move, rotate and draw the GPath. When I was porting my first Pebble watchface to Rocky I used those extensively. You can read about that implementation complete with the source code here. But now the commands are gone and I needed a substitution. Continue reading →

Flicker-Free IFRAME refresh

One of our projects consists of single parent page and “widgets” that display secondary (classic ASPX webform) pages. A recent feature request was to auto-refresh widget information at given intervals. On the surface it was pretty straghtforward:

<iframe id="xIfrWidget0"></iframe>
var ifr = document.getElementById('xIfrWidget');

setInterval(function () {
   ifr.src = 'widget.aspx';
}, 2000)

The problem with this approach – there’s an ugly flicker of white between page refresh and the goal was to keep displaying current IFRAME content up until refreshed content is ready. Yes, there’re various AJAX-ified methods (including ASP.NET UpdatePanel) – but they add unnecessary overhead and may cause other issues.

The solution was suggested by this Stack Overflow post. The idea is to have secondary, hidden IFRAME into which perform actual load. Once load complete – switch IFRAMES – currently visible with old content becomes hidden, and hidden one with new content becomes visible. It goes something like this: Continue reading →

Unblock my heart, i mean, iPhone for Pebble geocoding

Cobblestyle I’ve recently updated code for Cobblestyle Pebble Watchface to take advantage of very cool geocoding service called Nominatim by Open Street Maps.

Nominatim is used in two places: Direct lookup is used in watchface’s config page to lookup coordinates of a place by its name for custom location setting; reverse lookup is used to lookup location name by its coordinates to display name on actual watchface.

It was working fine – on Pebble watches connected to Android phones. It was failing miserably on iOS, so iPhone Pebble users were getting neither location nor weather updates. And it was pretty puzzling for a while until I obtained logs from running watchface thanks to invaluable help from Robin.

Turned out iPhone Pebble app was plain simple blocked by Nominatim service, every attempt to retrieve location resulted in message being sent back “You have violated acceptable policy”. Which was kinda surprising since I just started using the service. When I contacted Nominatim support, they told me that apparently some Pebble app running from iPhone abused the service pretty badly, running hundreds of requests per second. And since the only way they can detect requesting app is by it’s User Agent string – all apps spotting iPhone Pebble UA were blocked.

Support suggested to set UA string specific to the app so it could be easily identifiable. Standard approach to set headers on xmlHttpRequest object is .setRequestHeader(..). Unfortunately by many browsers and clients it is considered unsafe to spoof UA via request headers. Fortunately iOS allows that, so all I have to do is catch and ignore errors in other clients. Basically this line of code solved the issue:

try {
    xhr.setRequestHeader("User-Agent", "Cobblestyle Pebble Watchface");
} 
catch(e){}

Thanks to this as of version 2.19 Cobblestyle watchface correctly displays weather and location information. Yay.

Fire on High or Framebuffer in Rocky.js

First things first. DISCLAMER: Everything described here is a hack upon a crude hack and most likely, barring a divine intervention, won’t work in final product. And I apologize in advance to Pebble dev team if my attempts at “hacking” seem silly. Now to business. Pebble SDK offers very cool framebuffer API that allows developers to address display memory of the watch directly. This makes possible creation of many cool special effects (matter of fact EffectLayer library uses framebuffer extensively).
Rocky.js is JavaScript incarnation of Pebble SDK and it made me wonder whether it offers framebuffer access. Turned out it is hidden, but it’s there. At least at the latest commit at the time of this article it is. If you take a look at source file html-bindings.js you will see that binding function looks something like this:

Rocky.bindCanvas = function(canvas, options) {
  
  //...
   
  var framebufferPixels = new Uint8Array(module.HEAPU8.buffer,
                                         framebufferPixelPTR,
                                         canvasW * canvasH);

  //...

  var binding = {
  
  //...

  }

  //...

  return binding;
};

Continue reading →

Persistent configs in Rocky.js watchfaces

Rocky.JS is the first step in Pebble journey to run JavaScript directly on the watches (unlike Pebble.JS which runs on your phone). Previously I described how to convert a simple watchface from C to Rocky.js. But that was a static watchface with unchangeable settings.

Here I will show how to create a configurable watchface in Rocky.js similarly how classic SDK faces can be configured. You will be able to reuse your existing config page – and if it was set to work with Pebble emulator as well as real watch – you will reuse it without any changes at all.

First let’s review how classic Pebble SDK calls config page. In PKJS (JavaScript) portion of Pebble code usually there’s a piece like this:

Pebble.addEventListener("showConfiguration",
  function(e) {
    Pebble.openURL("http://my.cool.server/pebble/my_cool_config.html");
  }
);

If user requests config of face/app – this event fires and opens page with configurable options from specified URL. After user modifies settings usually “Save” button is clicked on that page and code similar to this executes:

$('#xbtnSave').click(function () {
   var location = (decodeURIComponent(getURLVariable('return_to')) || 
                   "pebblejs://close#") + 
                   encodeURIComponent(JSON.stringify(settings));
   document.location = location;
})

Here, first we determine which location to redirect config page to. If parameter "return_to” is passed in query string (here custom function getURLVariable() is used to extract individual parameters – look it up), so if this parameter is passed – it means config page is called form the emulator and we use it for redirection. Otherwise we use standard "pebblejs://close#" URL to save settings into real watch. We also take settings object which has our collective options combined, convert it to string and add to the URL as a parameter. Page then is redirected to resulting URL and Pebble emulator or real watch takes care of processing parameters.

So, how can we (re)use it in a Rocky.js watchface? Continue reading →