Как превратить смартфон в пульт управления презентацией?

Это не очень трудная задача. Мы будем использовать браузеры, поддерживающие открытие сокетов. При помощи Node.js и Socket.io мы научим смартфон управлять запущенной на компьютере презентацией.

В этом уроке мы покажем, как синхронизировать презентацию на экранах смартфона и компьютера. Таким образом мы будем видеть открытый слайд и управлять сменой и анимацией слайдов. А поможет нам в этом библиотека Reveal.js.

Как установить презентацию на компьютер?

1. Скачайте архив

2. Проверьте, установлен ли на компьютер node.js. Если нет, установите его

3. Распакуйте архив ZIP

4. Запустите терминал и перейдите в папку, куда был распакован архив

5. Для установки библиотек выполните команду npm install

6. Откройте приложение командой node app.js

7. Перейдите в браузере по адресу http://localhost:8080

8. Введите пароль (по умолчанию kittens)

9. Перейдите на смартфоне по адресу http://<локальный адрес компьютера>

10. Введите пароль (по умолчанию kittens)

11. Готово!

Что там внутри?

Библиотека app.js

// This is the server-side file of our mobile remote controller app.
// It initializes socket.io and a new express instance.
// Start it by running 'node app.js' from your terminal.


// Creating an express server

var express = require('express'),
app = express();

// This is needed if the app is run on heroku and other cloud providers:

var port = process.env.PORT || 8080;

// Initialize a new socket.io object. It is bound to
// the express app, which allows them to coexist.

var io = require('socket.io').listen(app.listen(port));


// App Configuration

// Make the files in the public folder available to the world
app.use(express.static(__dirname + '/public'));


// This is a secret key that prevents others from opening your presentation
// and controlling it. Change it to something that only you know.

var secret = 'kittens';

// Initialize a new socket.io application

var presentation = io.on('connection', function (socket) {

// A new client has come online. Check the secret key and
// emit a "granted" or "denied" message.

socket.on('load', function(data){

socket.emit('access', {
access: (data.key === secret ? "granted" : "denied")
});

});

// Clients send the 'slide-changed' message whenever they navigate to a new slide.

socket.on('slide-changed', function(data){

// Check the secret key again

if(data.key === secret) {

// Tell all connected clients to navigate to the new slide

presentation.emit('navigate', {
hash: data.hash
});
}
});
});

console.log('Your presentation is running on http://localhost:' + port);

Код JavaScript для обработки front-end

$(function() {

// Apply a CSS filter with our blur class (see our assets/css/styles.css)

var blurredElements = $('.homebanner, div.reveal').addClass('blur');

// Initialize the Reveal.js library with the default config options
// See more here https://github.com/hakimel/reveal.js#configuration

Reveal.initialize({
history: true // Every slide will change the URL
});

// Connect to the socket

var socket = io();

// Variable initialization

var form = $('form.login'),
secretTextBox = form.find('input[type=text]');

var key = "", animationTimeout;

// When the page is loaded it asks you for a key and sends it to the server

form.submit(function(e){

e.preventDefault();

key = secretTextBox.val().trim();

// If there is a key, send it to the server-side
// through the socket.io channel with a 'load' event.

if(key.length) {
socket.emit('load', {
key: key
});
}

});

// The server will either grant or deny access, depending on the secret key

socket.on('access', function(data){

// Check if we have "granted" access.
// If we do, we can continue with the presentation.

if(data.access === "granted") {

// Unblur everything
blurredElements.removeClass('blurred');

form.hide();

var ignore = false;

$(window).on('hashchange', function(){

// Notify other clients that we have navigated to a new slide
// by sending the "slide-changed" message to socket.io

if(ignore){
// You will learn more about "ignore" in a bit
return;
}

var hash = window.location.hash;

socket.emit('slide-changed', {
hash: hash,
key: key
});
});

socket.on('navigate', function(data){

// Another device has changed its slide. Change it in this browser, too:

window.location.hash = data.hash;

// The "ignore" variable stops the hash change from
// triggering our hashchange handler above and sending
// us into a never-ending cycle.

ignore = true;

setInterval(function () {
ignore = false;
},100);

});

}
else {

// Wrong secret key

clearTimeout(animationTimeout);

// Addding the "animation" class triggers the CSS keyframe
// animation that shakes the text input.

secretTextBox.addClass('denied animation');

animationTimeout = setTimeout(function(){
secretTextBox.removeClass('animation');
}, 1000);

form.show();
}

});

});


Пользуйтесь на здоровье!

Удачи вам! Опытом использования мобильных технологий поделилась с вами Веб-студия "АКРИТ". Разработка и продвижение сайтов на CMS «1С-Битрикс». Мы реализуем полный цикл работ - от разработки логотипа и фирменного стиля будущей компании, до ее продвижения на рынок, используя максимально эффективные современные технологии.

Назад в раздел