Это не очень трудная задача. Мы будем использовать браузеры, поддерживающие открытие сокетов. При помощи 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С-Битрикс». Мы реализуем полный цикл работ - от разработки логотипа и фирменного стиля будущей компании, до ее продвижения на рынок, используя максимально эффективные современные технологии.
Назад в раздел
В этом уроке мы покажем, как синхронизировать презентацию на экранах смартфона и компьютера. Таким образом мы будем видеть открытый слайд и управлять сменой и анимацией слайдов. А поможет нам в этом библиотека 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С-Битрикс». Мы реализуем полный цикл работ - от разработки логотипа и фирменного стиля будущей компании, до ее продвижения на рынок, используя максимально эффективные современные технологии.
Назад в раздел
Подписаться на новые материалы раздела:
Загрузка...
Наверх