Category Archives: HTML/CSS

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.

SSRS and HTML rendering of ordered list

Microsoft’s SQL Server Reporting Services supports rendering of HTML tags, but for some reason that support stuck in 1990s – only very limited set is supported. And even using that set is problematic.

Case in point – ordered list. While officially supported – the way it is rendered is the stuff nightmares are made off. Jumble of original tags generously intermixed with DIVs and SPANs – it’s a wonder it renders at all.

And sometimes it doesn’t. If you try to view a report in Internet Explorer (especially from older, but still actively used versions of SSRS like 2008) numbering get screwed.
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 →

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 →

Rocky.js – Pebble watch coding in JavaScript

Pebble never ceases to amaze. And every time you think – this is it, they reached the pinnacle of awesomeness – they surprise you again. This time they did pretty much the impossible – ported their C SDK to JavaScript, by creating Rocky.JS project. Ultimate goal is to run JS directly on the watch hardware – this will open way to huge number of new developers who hesitate to dive into depth of C. Meanwhile it provides ability to run Pebble code directly in a browser! It’s a lot of fun and as a bonus you can insert Pebble watchfaces directly into your website as evident by living watchface you see here.
Watchface you see running above is called Meyer Object it’s been available for Pebble watch for a while and I decided to port it to Rocky.JS Continue reading →

Detect IFRAME click from parent page

If you need to detect a click on a Web Page, that’s trivial: just catch Document or Body onclick event and any element on the page you click will bubble the event to your handler.

But if one of those elements is an IFRAME – that won’t work. IFRAMEs contain other pages and their events a contained within their content and don’t bubble up. Luckily there’s a way. Take a look this snippet of jQuery code:

$('IFRAME').on('load', function () {
   $(this).contents().on('click', function () {
      alert('Click Detected!');
   })
})

It attaches handler to IFRAME’s content’s onclick event, but only after IFRAME has already been loaded. Place this code in parent page that contains IFRAMEs and it will work universally across all browsers to detect when IFRAME was clicked.

NOTE: As usual in these scenarios, this works only if parent page and children pages comply with Same Origin Policy.

Pushing pins to Pebble Time timeline from .NET code

Timeline on Pebble Time Pebble Time timeline is a very cool user interface allowing you to see future and past events and act upon them right on your watch. Right out of the box Pebble Time supports calendar pins that shows your future and past appointments in the timeline as well as weather alerts. But the real power comes from 3rd party apps using timeline – they can add anything from sports scores to latest news to TV showtimes – limit is just your imagination.
Pebble has always had open SDK – this is one of its major strengths, and Timeline is not an exception. Timeline API is a very straightforward way to push your own pins to users of your app. There’re various examples and libraries including PHP and node.js on how to deal with the timeline, but I, being mostly a Microsoft developer by trade, decided to bring Timeline into .NET. This particular example is in ASP.NET – pin is pushed from Webpage when user clicks a button, but it’s just one of the possible scenarios.

In order to push timeline pins successfully you will need 2 pieces:

  1. A watchapp that runs on Pebble. In fact after first run, that subscribes user to timeline, the app doesn’t have to be running on the watch anymore. It doesn’t even have to be on the watch. As long as it simple remains in your locker on the phone – you will continue to receive its pins
  2. Your own server that sends calls to Pebble public Timeline API to control pins

Continue reading →

Access nested controls in ASP.NET Page PreInit event (when no Master Page is involved)

There’re situations when you need access ASP.NET web controls very early in page lifecycle, more specifically – in Page PreInit event – and you can, but only top-level controls. But what if you need to access child/nested controls? The example below uses Infragistics WebHierarchicalDataGrid as a child of Infragistics WebSplitter, but this pretty much applies to any such scenario.

Let’s say you have following layout

<ig:WebSplitter ID="WSP" runat="server">
   <Panes>
      <ig:SplitterPane runat="server">
         <Template>

            <ig:WebHierarchicalDataGrid ID="WHG" runat="server">
            </ig:WebHierarchicalDataGrid>

         </Template>
      </ig:SplitterPane>
      <ig:SplitterPane runat="server"></ig:SplitterPane>
   </Panes>
</ig:WebSplitter>

As you can see grid “WHG” is nested withing first pane of splittet “WSP. Let’s see what happens if you try access the controls in PagePreInit event: Continue reading →

Access jQueryUI dialog buttons after dialog was created

If you’re using jQuery UI Dialog, you know sometimes there’s a need to access dialog’s button objects after the dialog has already been created. This can be easily done via

$(dialogElement).dialog("option").buttons

command. One possible scenario where this can be useful – is executing specific button click function when user clicks [X] in dialog title. Imagine that buttons are set via array and the last object in this array is always something like CANCEL or NO or DISREGARD – and you want to simulate click of that last button whenever user clicks [X]. Using above command it’s pretty straightforward:

$(oDivDialog).dialog({
   //... some dialog parameters
   buttons: arrayOfButtonObjects,
   //... some more parameters
   close: function () {
      var buttons = $(this).dialog("option").buttons;
      buttons[buttons.length - 1].click();
   }
})

Line 5 begins close event which is called on dialog closing.
Line 6 retrieves array of buttons for the dialog
Line 7 calls click() function of the last button in the array