DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Site Pinning: Rotating Overlay Icons For Multiple Service Notifications

David Rousset user avatar by
David Rousset
·
Jul. 28, 12 · Interview
Like (0)
Save
Tweet
Share
2.79K Views

Join the DZone community and get the full member experience.

Join For Free

in my last post , i went over how to use ie9′s site pinning api to implement overlay icons to enhance user notifications. the demo focused on how to display a numeric icon to indicate when a specific event (e.g.: messages in an inbox) had occurred.


pinned site with overlay icon

it’s a really great way of letting your users know that there’s pending information for them to check into. but what happens if your site offers multiple types of notifications? with websites offering so much functionality nowadays, it’s pretty common for them to also serve up multiple types of notifications, from friend requests and event reminders to new messages and game invites.

rotating multiple overlays icons

the great thing about the site pinning api is that it’s very flexible and through some javascript magic, you can easily display multiple overlay icons for the various services you have. in this demo, i want to rotate through 3 different overlay icons that alert the user to pending messages, requests and actions.

as before, i had to flex some of my artistic talent by creating the overlay icons using the x-icon editor . i created 5 of each and here’s how the first three look:

the code changed slightly from the last demo in order to accommodate multiple bits of data per fetch. while previously, i was only fetching one piece of data, in this demo, i’m returning 3, one for each notification type:

mypin.init([{ "data" : [{ "label" : "messages", "ntype" : "m", "num": 2 }, { "label" : "requests", "ntype" : "r", "num": 1 }, { "label" : "actions", "ntype" : "a", "num": 3 }] },
               { "data" : [{ "label" : "messages", "ntype" : "m", "num": 1 }, { "label" : "requests", "ntype" : "r", "num": 5 }, { "label" : "actions", "ntype" : "a", "num": 2 }] },
               { "data" : [{ "label" : "messages", "ntype" : "m", "num": 5 }, { "label" : "requests", "ntype" : "r", "num": 1 }, { "label" : "actions", "ntype" : "a", "num": 4 }] }
              ]);

as a reminder, the method getdata() simulates grabbing remote data. so if we look at the data above, we can simulate pulling back three distinct bits of data. this is why we call the method every 10 seconds using setinterval. this allows us to see how notifications might look over a period of time.

setinterval(function () { mypin.getdata() }, 10000);

the next thing that changed is the use of a timer to allow a slight delay while rendering the overlay icons. using settimeout() provides enough of delay so that an individual overlay icon is visible to the user before rotating on to the next icon. if we didn’t have this delay, the rotation would be way too fast to provide any useful notification. if we look at the following image, we can see what the notification will look like:


overlay icon showing numeric notification

this is accomplished via the following code:

// grab the current set of data...
currdata = this.databin[this.currindex++].data;    
         
/* we're going to display a new overlay every x number of seconds to display a new overlay icon so
   let's loop through the data elements for the current set of data... */
for (var i=0; i < currdata.length; i++ ){
                     
    (function(idx) { settimeout( function(){ mypin.dispoverlay( currdata[idx] ); }, 1000 * idx); }( i ));                  
                     
}

here’s what’s happening. in the first line, i grab the current set of data that holds all of the notification information (messages, requests & actions). that data looks like this:

[{ "label" : "messages", "ntype" : "m", "num": 2 },
{ "label" : "requests", "ntype" : "r", "num": 1 },
{ "label" : "actions", "ntype" : "a", "num": 3 }]

i loop through each group of data and assign a timer using settimeout() that will call dispoverlay() at ~1 second intervals. that’s the magic code that allows for the gradual icon rendering delay i mentioned before. the expected functionality is that the “messages” icon will render followed by the “requests” icon 1 second later, and then finally the “actions” icon.

now, you might be wondering why i have an anonymous function wrapping the settimeout() . it’s because i have a closure within settimeout which can cause a common scoping issue in which the variable ‘i’, which i use to grab the current index of data, will only be updated to the last index value. james padolsey has a great explanation on it and thanks to john david dalton for helping me troubleshoot this.

the final change is in dispoverlay() in which i need to determine which overlay icon needs to display. since i now have three different types of notifications, i need a conditional statement to determine the type and build the correct icon name:

if (thedata.ntype == "m") {
    oimg = "images/messages-" + thedata.num + ".ico";
} else if (thedata.ntype == "r") {
    oimg = "images/requests-" + thedata.num + ".ico";
} else if (thedata.ntype == "a") {
    oimg = "images/actions-" + thedata.num + ".ico";
}

this checks the type and serves up the right icon based on the type and the number of notifications pending for that type.

the demo and final code

you can check out the demo by going here in ie9:

http://reybango.com/demos/sprotate/index.html

when the page renders, drag the tab down to your taskbar and pin it. you should see a new window appear with your newly pinned site. next, you’ll see the overlay icons appear in the taskbar and they should begin to cycle every 10 seconds.

here’s the full source code. you can also download everything here .

<!doctype html>
<html>
<head>
<title>pinned site - rotating overlay icons</title>
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<meta name="application-name" content="pinned site test" />
<meta name="msapplication-starturl" content="http://reybango.com/demos/sprotate/index.html" />
<meta name="msapplication-navbutton-color" content="#3480c0" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-tooltip" content="testing the pinned site api" />
<style>
body {
    background: none repeat scroll 0 0 #4492ce;
    font: 440%/1.4em 'segoe light',segoe,'segoe ui','meiryo regular','meiryo',sans-serif;  
    color: #edeff4;
}
 
</style>
 
</head>
 
<body>
 
<div>
<h1>pinned sites</h1>
<p>rotating overlay icons</p>
</div>
 
<script>
 
    var mydata = [];
 
    var mypin = {
 
        currindex: 0,
        databin: [],
         
        getdata: function () {
 
            var idx = 0, currdata = [], cntr = 0, thedata;
         
            // determines whether the current page was launched as a pinned site...
            if (window.external.msissitemode()) {
 
                // grab the current set of data...
                currdata = this.databin[this.currindex++].data;    
         
                /* we're going to display a new overlay every x number of seconds to display a new overlay icon so
                   let's loop through the data elements for the current set of data... */
                for (var i=0; i < currdata.length; i++ ){
                     
                    (function(idx) { settimeout( function(){ mypin.dispoverlay( currdata[idx] ); }, 1e3 * idx); }( i ));                   
                     
                }
                 
                if (this.currindex > 2) { this.currindex = 0 }
                 
            }
 
        },
 
        dispoverlay: function (thedata) {
 
            var oimg = "";
 
            // is there any data?
            if (thedata) {
 
                // clear any preexisting overlay icon
                window.external.mssitemodecleariconoverlay();
 
                // render the overlay icon based on the data returned...
                if (thedata.ntype == "m") {
                    oimg = "images/messages-" + thedata.num + ".ico";
                } else if (thedata.ntype == "r") {
                    oimg = "images/requests-" + thedata.num + ".ico";
                } else if (thedata.ntype == "a") {
                    oimg = "images/actions-" + thedata.num + ".ico";
                }              
 
                // go ahead and create the overlay image and it's label...
                this.setoverlay(oimg, thedata.label);
 
            }
 
        },
 
        setoverlay: function (icon, desc) {
 
            // sets the overlay icons...
            window.external.mssitemodeseticonoverlay(icon, desc);
            window.external.mssitemodeactivate();
 
        },
 
        init: function (mydata) {
 
            this.databin = mydata;
            this.getdata();
             
        }
 
    };
 
    // this clears out any previously set overlay icons...
    window.external.mssitemodecleariconoverlay();
     
    // run it once to kick everything off...
    mypin.init([{ "data" : [{ "label" : "messages", "ntype" : "m", "num": 2 }, { "label" : "requests", "ntype" : "r", "num": 1 }, { "label" : "actions", "ntype" : "a", "num": 3 }] },
                { "data" : [{ "label" : "messages", "ntype" : "m", "num": 1 }, { "label" : "requests", "ntype" : "r", "num": 5 }, { "label" : "actions", "ntype" : "a", "num": 2 }] },
                { "data" : [{ "label" : "messages", "ntype" : "m", "num": 5 }, { "label" : "requests", "ntype" : "r", "num": 1 }, { "label" : "actions", "ntype" : "a", "num": 4 }] }
               ]);
 
    // this is only here because i want to simulate pulling data on a regular interval...
    setinterval(function () { mypin.getdata() }, 10000);
 
</script>
</body>
</html>
Icon

Published at DZone with permission of David Rousset. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Mr. Over, the Engineer [Comic]
  • Express Hibernate Queries as Type-Safe Java Streams
  • ChatGPT: The Unexpected API Test Automation Help
  • Real-Time Stream Processing With Hazelcast and StreamNative

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: