Tuesday, November 25, 2014

Instagram Photo Cycler JavaSscript widget


A while ago I built for the company I work for a nice Dashboard presenting business and operational data on a TV.

I wanted to add to the Dashboard something cool that will drive people to be more creative.

I had an idea of showing on the dashboard Instagram photos of the company by posting photos to a predefined hashtag. For example: #mycompany.

There was one problem: the real-estate on a dashboard TV screen is very expensive and you can not show more then a single photo.

I remembered that I once encountered a cool JavaScript widget that simply cycles photos with nice transition effects. I thought that it will be nice to connect this widget with Instagram and put it on the dashboard.

Back then I didn't know that I can also get the assistance of Instafeed.js in order to get Instagram data easily, so I had to write this part my self.

The result was pretty cool, so I decided to make a jQuery widget from it to allow others to use it as well. You can download the widget and use it for your own photos or for showing photos of some hashtag.

Here is how the widget looks like for the hashtag #love:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.rawgit.com/malsup/cycle/master/jquery.cycle.lite.js" type="text/javascript"></script>
<script src="https://docs.google.com/uc?export=download&id=0B8vXkKUFKJw4anFQam9reXhyNWc" type="text/javascript"></script>

<br />
<div id="instagramCyclerCoderEyeLove" style="width:320px; height:320px;">
</div>
<script language="JavaScript">
 <!--

  $(document).ready(function() {
   $('#instagramCyclerCoderEyeLove').cycleInstagram({
    'get':   'tagged',
    'tagName':  'love',
    'accessToken': '161840.f92bbd9.e0a09d9b00f746c8b2662a4e784e55b0'
   });
  });

 </script>

And here is the result:

In order to show your own photos you can use the property "get" with the "user" value. Please note that in order to show you own photos, you can simply use for "userId" the word "self". In addition you can see how you can show more than just a photo and even control look of the widget very easily with the "template" property and simple usage of CSS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.rawgit.com/malsup/cycle/master/jquery.cycle.lite.js" type="text/javascript"></script>
<script src="https://docs.google.com/uc?export=download&id=0B8vXkKUFKJw4anFQam9reXhyNWc" type="text/javascript"></script>

 <style>
  #instagramCyclerCodeEyerUser {
   background-image: url("https://docs.google.com/uc?export=download&id=0B8vXkKUFKJw4a1JVbTNoY0N0T0U"); 
   background-size: cover; 
   width:326px; 
   height:380px;
  }

  #instagramCyclerCodeEyerUser img {
   padding-top:28px;
   padding-left:36px;
  }

  #instagramCaption {
   margin-top:25px;
   padding-left:36px;
   font-size:18px;
   font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
   width: 250px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
  }

 </style>

<div id="instagramCyclerCodeEyerUser"></div>
<script language="JavaScript">

  $(document).ready(function() {
   $('#instagramCyclerCodeEyerUser').cycleInstagram({
    'get':   'user',
    'userId':  'self',
    'tagName':  'todacellmon',
    'accessToken': '161840.f92bbd9.e0a09d9b00f746c8b2662a4e784e55b0',
    'template': '<div><a href="{{link}}"><img src="{{image}}" width="250" height="250" /></a><div id="instagramCaption">{{caption}}</div></div>'
   });
  });

 </script>


Here is the result:

PLEASE NOTE: In order to use Instagram API, you should create an access token. You have nothing to worry that others can see your access token as long as you create an access token only for READING. Frankly, creating the access token on Instagram, at least at the time that I did it, was not a simple task. You can find more help on how to do it on Instagram developers section or on this url

DOWNLOAD: Here you can download the widget

Thursday, November 13, 2014

Working with SHA1 on SQL Server


There are times you might need to convert some information to MD5 on your SQL Server in HEX format. As it is for now there is no out of the box function to do it on SQL Server. But you can easily accomplish this task by using the following function:
create FUNCTION [dbo].[sha1]
(
        @value varchar(4000)
)
RETURNS varchar(40)
AS
BEGIN
  return
    case when @value is not null then
      SUBSTRING(master.dbo.fn_varbintohexstr(HashBytes('SHA1', @value)), 3, 40)
    else null end
END
GO

Testing it is quite straight forward. For example:
select dbo.sha1('123') 

And here is the output:
40bd001563085fc35165329ea1ff5c5ecbdbbeef


 

Wednesday, November 12, 2014

Working with MD5 on SQL Server


There are times you might need to convert some information to MD5 on your SQL Server in HEX format. As it is for now there is no out of the box function to do it on SQL Server. But you can easily accomplish this task by using the following function:
create FUNCTION [dbo].[md5]
(
        @value varchar(4000)
)
RETURNS varchar(40)
AS
BEGIN
  return
    case when @value is not null then
      (SUBSTRING(master.dbo.fn_varbintohexstr(HashBytes('MD5', @value)), 3, 32))
    else null end
END
GO

Testing it is quite straight forward. For example:
select dbo.md5('123') 

And here is the output:
202cb962ac59075b964b07152d234b70