Sketching on the screen

  • 2
  • Article
  • Updated 2 years ago
In this article, we'll be using SketchJS to add touchscreen interactions into our digital signage Presentation. Check out my version of an interactive chalkboard here:

sketchjs

Start with the full code

Copy all code from here, and paste it into your favorite text editor. Save it as an HTML file, and upload it to Rise Storage or your own webserver.

In your Presentation, ensure that the Hide Mouse Pointer checkbox is unchecked in the Presentation settings. Next, add the Web Page Widget, and point to where this HTML file is stored. In the Widget settings, make sure to enable interactivity.

Now let's read below for details on customizing the code!

Changing the color of the brush

You can go to w3school's HTML Color Picker and pick a color and replace it in the COLOR variable below

var COLOUR = [ '#COLOR' ];

Changing the thickness of the line

Let's say in the code it's currently:

radius = 1 + abs( sin( this.millis * 0.002 ) * 10 );

0.008 indicates the 'space' of the strokes. The higher the value the more of a space there will be in the stroke.

10 value indicates the starting radius of a line stroke. The higher the value, the larger the radius.

1 indicates the smallest radius. The higher the number the less of a variation that you have with the stroke radius.

Clearing the screen

There are a couple of ways that you can clear the screen.

The passive way is that the screen will clear when the web page reloads. For example, if you have multiple Presentations in your Schedule, you can set this Presentation to run for 360 seconds, so it will clear the screen every time the Presentation is reloaded. If you only have one Presentation in your Schedule, you can enable a data refresh interval in the Web Page Widget itself. When the Widget refreshes, the screen clears.

The active way is via the code.

You will see a line below which initiates the screen to clear upon a click equivalent:

click: function() {
if ( this.click ) this.clear();</span>
},


If the above does not work for your touch screen you may need to instead add the a touch specific event instead by replacing the click: function like the code below:

touchstart: function() {
if ( this.touchstart ) this.clear();
},


Changing the style and background

Between the <head></head> tags are the <style></style> tags.

You can change the background-image: url which is currently a chalkboard image that I've uploaded to Rise Storage:

html, body {
background-image: url(ADD_YOUR_BACKGROUND_HERE);
background-repeat: no-repeat;
}


There are a lot more ways to customize this and you can check out various tutorials and libraries out there surrounding SketchJS. Feel free to share your suggestions below!
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb

Posted 2 years ago

  • 2
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Going to add as a comment: When you do the changes and preview the code (like the example here), you will notice that the line is created when it follows the mouse. Touch screen versus web browser behavior is going to be different, so you may want to also have one available.