Yearly Archives: 2017

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:

if (window.chrome) {
    var elem = document.getElementById("myIframe");
    elem.onload = function () {
        elem.contentWindow.addEventListener(
          "paste", function (event) {
            var me = this;
            var items = (event.clipboardData ||
                event.originalEvent.clipboardData).items;
            var blob = null;
            for (var i = 0; i < items.length; i++) {
                if (items[i].type.indexOf("image") === 0) {
                    blob = items[i].getAsFile();
                }
            }
            if (blob !== null) {
                var reader = new FileReader();
                reader.onload = function (event) {
                    var image = new Image();
                    image.src = event.target.result;
                    image.onload = function () {
                        var range = 
                            me.getSelection().getRangeAt(0);
                        if (range) {
                            range.deleteContents();
                            range.insertNode(image);
                            me.getSelection().removeAllRanges();
                        } else {
                            me.document.body.appendChild(image)
                        }
                    }
                }
                reader.readAsDataURL(blob);
            }
        })
    }
}

Line 1 Checks the browser for chromness (well Edge if you want to pretend to be Chrome – so be it)
Lines 2-3 Grab the IFRAME element and attach onload event handler so we would know when it’s good and ready
Lines 4-8 Attach onpaste event handler and grab clipboard data when the event fires
Lines 10-14 Loop thru clipboard items and if an image is found – read it as blob file
Lines 16-17 Initiate file reader and attach onload event to it so we know when the reading (that begins on line 29) is complete
Lines 18-20 Create a new IMG element, assign DataURI result from file reader as IMG source and attach onload event so we know when the image loading is complete
Lines 21-29 Check if we’re inserting into or replacing any existing data at the target and if so – inserting image into selected range, otherwise simple append it to the target.

And that’s it – with this addition you’re now able to copy/paste images into Chrome in the same way as old respectable browsers do.

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 →

Full control of your LimitlessLED/Milight – v6- bulbs from Amazon Echo

A while ago I blogged about controlling you Milight smart bulbs from Amazon Echo. This was done by sending raw UDP packets directly to Milight bridge. Since a packet consisted only of a few bytes – this was manageable.

Then we got v6 of Milight bulbs. They’re vastly superior to previous version – besides brightness and color you can set warmth and saturation among other things. But with new features came increase complexity of commands. UDP packets now consist of huge number of bytes and you cannot simple send packet and forget it, response matters too.

HA-Bridge, which is used to emulate Phillips Hue bulbs so Echo can detect the devices, is incapable of such commands. Thankfully it can run external scripts. Continue reading →

Using FusionCharts in SSRS reports

Microsoft’s SSRS is pretty advanced reporting system with multitude of advanced features. SSRS also has charting capabilities, but it’s somewhat lacking compared to more advanced desktop or web charting suites

On the other hand FusionCharts offers very cool charting package with gazillion of chart types and very cool features. But it uses JavaScript engine and renders charts client-side only!

What if there was a way to marry the two technologies together – to render cool FusionCharts in advanced SSRS repots? Continue reading →

There’s new reflective LCD in town (SMA Q2 vs PTS)

I’ve been a fan of Pebble smartwatch for a very long time, both as a user and developer, but recently, even before announcement of Pebble acquisition by FitBit I got curious – what else’s out there? Two mainstream branches of smartwatches – Android Wear and “The Watch” are of no interest to me – too boring. So I looked into Samsung Gear watches – Tizen platform is very interesting, then it was Vector Watch (which ended up being bought by FitBit as well) and now a new ePaper watch from Chinese company Shenzhen – SMA Q2 (sometimes called SMA Time).

There is no question that despite obvious visual similarities, at this point in time Pebble Time Steel is vastly superior to SMA Time. PTS is on 4th generation firmware which brought many advanced features over the years, PTS has a very popular appstore and high quality developer ecosystem. SMA Time feels like Pebble circa firmware v1.x (probably even less, e.g. it has only 3 slots for watchfaces on the watch) but it seems to have great potential.

I am posting here a few pics comparing PTS with SMA Time. Continue reading →