RiseVision

Now you can make your digital signage Directories even fancier! Just added swipe functionality, no more boring and hard to touch scroll bars, letter navigation choices; both horizontal and vertical, and column sorting!

Comment? Suggestion? Maybe a little praise? Jump into the forum and let us hear your thoughts.

This release falls into the “what took you so long” category. As of today the ability to navigate and find your way around all of those wonderful digital signage Presentations, Gadgets, Displays, Companies and Users just got a whole lot easier. I have been using this functionality in our test environment for the last couple of weeks and I can say categorically it was painful for me to go to production and use the old lists when I had to.

So what’s improved?

No more paging! The first 50 results are returned, scroll down, and the next 50 are automatically retrieved, and so on, and so on. This is my fav part of this release.

Sort on any column, up or down.

Search looks across all column text for your answer. Just type your criteria in and hit enter, review your results, and when done hit the little X to clear your search and return to the default list.

No more case sensitivity for searches. You can use upper or lower case and your term can be at the start, middle or end of the text.

Over the next few days we will also be adding horizontal scrollers (think tickers) for Sports, Spreadsheets, RSS Lists and the infamous Text Scroller that was pulled for bad behaviour is back! Also look for some neat improvements to the Directory Gadget and custom layout support for the RSS Gadget. And say goodbye to scroll bars, now all of these Gadgets support swiping as best described in Donna’s post on the swipe technique. In the QA queue and due to be released in the next couple of weeks are improvements to our HTML editor and delivery of the content approval mechanism that the community championed in our forum.

As always, if you have questions, concerns, ideas or praise, don’t hesitate to jump into our forum.

While it is easy to move an existing Company to be under your Network Operator Company in our digital signage software, a user may have a bunch of test Presentations and Schedules in their Company that they don’t want to follow them over when they go under your Network Operator umbrella. Other times, a user may have accidentally created an account that isn’t under your Company, and don’t know where to go to get their Company ID so you can move them under yours.

This is where the ability to “force delete” your own Company comes in really handy. Ask the user to log in and click on their Company name in the top right corner, which is displayed under their username. This will  take them to the Settings page showing all their Company information. From here, they just press the Delete button. This will delete their Company and all assets in it, including their User account, Presentations, Schedules, everything.

Once they have done that, you can go ahead and send them the link to create a Company under your Network, or create a Company and User account for them yourself and let them know so they can get busy creating their Presentations.

I hope everyone found this post useful, and if you have any questions, feel free to put them into our very active community forum.

Thanks!

We’ve all used a touchscreen before, whether in the form of a smartphone, tablet or monitor. So you’d probably think that it shouldn’t be all that difficult to have a Gadget scroll when swiped, right? The problem is that Google Chrome, upon which our digital signage software is built, doesn’t yet support touch events. So then, how can this be achieved? The answer lies with mouse events.

Mouse Event Handlers

By adding event handlers for the appropriate mouse events, it is possible to simulate swiping. The event handlers needed to pull this off are mousedown, mousemove, mouseup and mouseleave. Let’s create handlers for each in turn.

mousedown

When a user touches the screen, the mousedown event is the first to fire. When it does, the current vertical coordinate is stored in lastMouseY and true is stored in mousedown to indicate that the screen has been touched.

var mouseDown = false, lastMouseY = 0;

function handleMouseDown(event) {
  lastMouseY = event.clientY;
  mouseDown = true;
}

mousemove

If the user then swipes their finger, the mousemove event fires:

function handleMouseMove(event) {
  if (!mouseDown) {
    return;
  }

  var newY = event.clientY, 
    delta = lastMouseY - newY;

  $(".content").css("margin-top", parseInt($(".content").css("margin-top")) - delta + "px");
  lastMouseY = newY;
}

The first thing handleMouseMove does is check if the screen has been touched (i.e. checks if mouseDown is true). If it hasn’t, then there is no point in continuing any further; however, if it has, the new vertical coordinate is found and subtracted from the previous one. The difference is used to alter the top margin of the element containing the content to be scrolled (in this case, an element with a class of content). This is where you would want to include additional specialized logic for establishing and checking the boundaries of the content so that it does not scroll completely off the screen.

mouseup

When the user removes their finger from the screen, handleMouseUp is called:

function handleMouseUp(event) {
  mouseDown = false;
}

Not much to be done here except to set mousedown to false to indicate the user is no longer touching the screen.

mouseleave

The same logic applies to the mouseLeave event handler:

function handleMouseLeave(event) {
  mouseDown = false;
}

Attaching Event Handlers

The last thing to do is attach these event handlers to an actual element using some jQuery:

$(".container").bind({
  mousemove: function(e) {
    handleMouseMove(e);
  },
  mousedown: function(e) {
    handleMouseDown(e);
  },
  mouseup: function(e) {
    handleMouseUp(e);
  },
  mouseleave: function(e) {
    handleMouseLeave(e);
  }
});

Watch for a whole whack of new or improved Gadgets to be released soon that offer swiping!

Zoomooz is a jQuery plugin that enables HTML elements to be zoomed in or out. It works by using CSS transforms to scale the elements. In this post, we will construct this simple demo. Notice that clicking on the logo brings it front and centre in the Presentation, while clicking off of it returns it to its original position.

Start by downloading the plugin from here. The download includes numerous files, many of which aren’t strictly necessary in order to use the functionality. Here are the files that are needed:

<script type="text/javascript" src="path/to/js/sylvester.js"></script>
<script type="text/javascript" src="path/to/js/purecssmatrix.js"></script>
<script type="text/javascript" src="path/to/js/jquery.animtrans.js"></script>
<script type="text/javascript" src="path/to/js/jquery.zoomooz.js"></script>

The HTML

And here is what the HTML of the digital signage Presentation looks like:

<div id="item" class="zoomTarget">
  <img src="path/to/riselogo292x110.png" />
</div>
<div id="text">Your open source, HTML, digital signage solution for delivering your message to any web enabled end point - large format, mobile, tablet or specialized display - passive, touch or motion enabled. Take our platform and extend it you want to.</div>

The only thing special about this HTML is that one of the elements has been assigned a class of zoomTarget. This means that the logo will have zooming enabled, while the text will not.

The Code

The final piece that is needed is this bit of jQuery:

$(document).ready(function() {
  $(".zoomTarget").click(function(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    $(this).zoomTo({targetsize:1.25, duration:600});
  });

  $(window).click(function(evt) {
    evt.stopPropagation();
    $("body").zoomTo({targetsize:1.0});
  });

  $("body").zoomTo({targetsize:1.0});
});

This snippet of code attaches a click event to the zoomTarget element. Once selected, the element will scale to roughly 1.25 times its size over a period of 600ms. Conversely, using a value of 0.75 as the targetsize would scale the image down. When the window object is clicked, all zoomed elements will move back to their original size and position.

A Word of Warning

One thing to be aware of is that scaling in this way can pixelate an image if it is scaled to a size that is larger than its native dimensions. In the demo, this has been minimized somewhat by initially scaling the logo down to half its original size:

img {
  -webkit-transform:scale(0.5);
}

Now when the logo is zoomed, it won’t be quite so pixelated. In general, this technique will work much better with a high resolution image.