The app permit to draw on a map in real time with other people in a specified “room”, so only who know the name of the room can access.
You can choose to show/hide the write on the map of the other member, with a “layer system” applied on the canvas. The canvas is managed with the library jcanvas is very useful.
The room are managed with socket.io, the client connected to are managed by a caching system (node-cache) and a linq library node-linq.
If someone enter on the room after that someone have drawn, the system recover all the written and update the last client connected.
All the drawing action where saved on a buffer to server.
questo pacchetto ha una parte di script Arduino da poter lanciare su tutte le vostre NodeMcu e una parte applicativa realizzata con nodejs che gestisce le periferiche ed interagisce con loro utilizzando il protocollo SSDP che trovo veramente interessante per l’aspetto iot, evita di utilizzare/conoscere gli ip delle schede, ogni device connessione in rete espone una propria scheda identificativa, tramite le quale potete riconoscerlo e quindi interagirci:
Il client nodejs è in ascolto sulla porta 3000. Il device nodemcu viene interrogato sulla porta 80.
##NodeMCU per configurarlo bisogna prima scaricare i driver https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers e poi, per comodita’, abbiamo utilizzato l’ide di Arduino, debitamente onfigurato così come indicato nelle numerose guide on line. Per installare il mio script su nodemcu ho utilizzato Arduino IDE, se avete bisogno di maggiori informazioni contattatemi pure.
##Node.js va installato su una macchina e messo in ascolto sulla porta 3000, così come indicato nel pacchetto.
##INSTALLAZIONE per avviare il server bisogna procedere nel seguente modo:
installare il framework express tramite il gestore dei pacchetti: npm intall express
è possibile anche configurare tutto tramite npm install, a patto che il file package.json sia aggiornato nelle dipendenze necessarie. a questo punto si potrà avviare il server:
node app.js
Da notare che su sistemi Debian Node viene avviato con nodejs app.js, in quanto node è un altro applicativo presente sui repository.
Come configurare NodeJs SSDP
SSDP la cui definizione è Simple Service Discovery Protocol, viene utilizzato per la ricerca dei device connessi nella rete locale, ho utilizzato la libreria node-ssdp-js semplice da installare e da utilizzare. Bisogna definire una firma nei nostri device da poter successivamente “cercare”.
#JAVASCRIPT NODEJS
var Client = require('node-ssdp-js').Client, client = new Client();
client.on('response', function (response) {
console.log('Response ssdp device:', response);
var ipNodeMcuLight = response.referrer.address;
console.log('IP:', ipNodeMcuLight);
});
client.browse('upnp:nodemculight');
#ARDUINO SCRIPT
SSDP.setDeviceType("upnp:nodemculight");
Progetto “LightControl” di Francesco Pantisano realizzato utilizzando come progetto di base “Plant” di Diomede Mazzone con la collaborazione di Fabio Z Tessitore (@FabioZTessitore) che ringrazio per la pazienza avuta a rispondere alle mie domande.
Tag: NodeJS, ExpressJS, HTML 5, client/server, Simple Service Discovery Protocol (SSDP)
Today I asked myself how to explain to a junior, how to create a wordpress plugin, the simplest way. Without the inclusion of complex structures with public folder, includes, ….., but something very very simple.
Below I will explain how to create a plugin to manage some date, in this example is a Sport Race: – Create Sport Race – Insert members of a Sport Race – Show table with Sport Race, and manage data (bulk delete) – Show table with Sport Race, and manage data (bulk delete) – Upload media using WordPress System (media manager of wordpress)
The structure of the project in the Plugin name directory is:
As you can see, a simple list of file with no directory
My project as two section: Sport Race and Members Each section is composed by two file: _page.php and _table.php And a file of system: plugin_activation.php
For example now analyze two file: sportrace_page.php and sportrace_table.php
For the sportrace_table.php will explain in the next article how to create a table, now take a look at file, is very simple. For now i will explain how to use it in the sportrace_page.php
At top of page we put
<?php
global $wpdb;
// jQuery
wp_enqueue_script('jquery');
// This will enqueue the Media Uploader script
wp_enqueue_media();
?>
Then you must to set your Application on (Sandbox/Test or Production, in this guide i show to you Production procedure) https://developer.ebay.com/my/keys
At first we must to generate the Authorization Code, and for this procedure we must to paste an url on the browser and copy the query string “code”. So click on the “User token link”
Click on “Get a Token from eBay via Your Application”
Then you must to “Add eBay Redirect URL” So you generate your app details, you can see the “Your branded eBay Production Sign In (OAuth)” or if sandbox (test) “Your branded eBay SandboxSign In (OAuth)”
Put this link on your browser, and login with your ebay account, so then you must to redirect on another page that sayd to you that the application has grant, and in the url bar you find your authorization code.
Now with our authorization code, we call this url to take our access and refresh token. For this call we need the authorization header, and create a base64 encode with clientID and certID. And then in the parameter set Authorization code and RuName
Hi, today i want to explain how to configure a app with framework Yii 2 on your hosting Plesk. In my case i have Plesk 17.8, the problem is how to configure the subdirectory and so how to convert the htaccess of Yii 2 app.
On Plesk 17 you must to configure the site, on run PHP-FPM un on nginx. So go in the Hosting Setting of the domain:
Hosting Setting
So go in the Hosting Setting of the domain:
Apache & nginx Settings
You must to disable Proxy mode
Than we must to configure the Additional nginx directives So go in the Apache & nginx Settings of the domain Than into Additional nginx directives copy this code (change YOURDOMAIN with the domain that you want to configure):
set $base_root /var/www/vhosts/YOURDOMAIN/httpdocs;
charset UTF-8;
index index.php index.html;
location / {
root $base_root/frontend/web;
try_files $uri $uri/ /frontend/web/index.php$is_args$args;
location ~ ^/assets/.+\.php(/|$) {
deny all;
}
}
location /admin {
alias $base_root/backend/web/;
# prevent the directory redirect to the URL with a trailing slash
location = /admin {
# if your location is "/backend", try use "/backend/backend/web/index.php$is_args$args"
# bug ticket: https://trac.nginx.org/nginx/ticket/97
try_files $uri /backend/web/index.php$is_args$args;
}
try_files $uri $uri/ /backend/web/index.php$is_args$args;
location ~ ^/admin/assets/.+\.php(/|$) {
deny all;
}
}
location ~ ^/.+\.php(/|$) {
rewrite (?!^/((frontend|backend)/web|admin))^ /frontend/web$uri break;
rewrite (?!^/backend/web)^/admin(/.+)$ /backend/web$1 break;
fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;
fastcgi_param PATH_INFO $fastcgi_path_info;
fastcgi_pass "unix:///var/www/vhosts/system/YOURDOMAIN/php-fpm.sock";
include /etc/nginx/fastcgi.conf;
}
location ~ /\. {
deny all;
}
Today i want to talk to you about Microsoft ADAL (Azure Active Directory Authentication Library).
ADAL allows users to authenticate in Active Directory (AD) local or in the cloud and take token to protect the API.
Material Angular is very very useful library to generate beautiful app with material design and use all the power of angular. Today we can see how to set the format for the MatDatePicker with dd/MM/yyyy so how to customize it, then you can change it.
In our Angular 6 project we must to install moment. So execute in our project directory:
npm i @angular/material-moment-adapter
npm add moment
Then we must to open our app.module.ts
//Some import before, add this
import {
DateAdapter,
MAT_DATE_FORMATS,
MAT_DATE_LOCALE
} from '@angular/material';
import {
MomentDateModule,
MomentDateAdapter
} from '@angular/material-moment-adapter';
//create our cost var with the information about the format that we want
export const MY_FORMATS = {
parse: {
dateInput: 'DD/MM/YYYY',
},
display: {
dateInput: 'DD/MM/YYYY',
monthYearLabel: 'MM YYYY',
dateA11yLabel: 'DD/MM/YYYY',
monthYearA11yLabel: 'MM YYYY',
},
};
//in our ngmodule providers add the provide for the date
@NgModule({
imports: [............],
providers: [{
provide: MAT_DATE_LOCALE,
useValue: 'it'
},
//you can change
useValue {
provide: DateAdapter,
useClass: MomentDateAdapter,
deps: [MAT_DATE_LOCALE]
}, {
provide: MAT_DATE_FORMATS,
useValue: MY_FORMATS
}
],
bootstrap: [AppComponent]
});
export class AppModule {}
At the end all the date in our project became with the format dd/mm/yyyy!! Some question contact me.
You have created your angular app and now you have some error about method fill, for example: “Object doesn’t support property or method ‘fill'”.
Line that fail:
var HEADER_FILLER = new Array(HEADER_OFFSET).fill(null); (Angular core).
Don’t worry the solution is easy. You must open your file on: src/polyfill.ts
At line 21 of the file you see:
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
and many “import ‘core-js/es6/BLABLA’” commented.
You must to uncomment all:
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
