Wednesday, 10 October 2018
Tuesday, 9 October 2018
text to speech api
reference:
https://stackoverflow.com/questions/7053334/text-to-speech-web-api
https://www.youtube.com/watch?v=ZORXxxP49G8
https://developers.google.com/web/updates/2014/01/Web-apps-that-talk-Introduction-to-the-Speech-Synthesis-API
https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis
https://github.com/AndrewKeig/react-speech
https://github.com/willianjusten/awesome-audio-visualization
Web Audio API + React & Redux
https://www.linkedin.com/pulse/web-audio-api-react-redux-singing-apps-best-friends-reid-delahunt/
https://stackoverflow.com/questions/21015686/web-audio-api-get-the-output-from-the-soundcard
https://quiet.github.io/quiet-js/
https://subvisual.co/blog/posts/39-tutorial-html-audio-capture-streaming-to-node-js-no-browser-extensions/
paint transparent selection
https://superuser.com/questions/1233441/paste-with-transparent-background-in-paint
Monday, 8 October 2018
power bi Calgary weather
temperature
precipitation
wind
humidity
sunshine
reference:
https://community.powerbi.com/t5/Desktop/Why-is-my-first-row-not-being-used-to-name-columns/td-p/18804
https://community.powerbi.com/t5/Desktop/Edit-Data-within-PBI-Desktop/td-p/75963
transpose
https://stackoverflow.com/questions/44053408/transpose-table-in-report-visual-in-power-bi-desktop
sort by month
https://www.c-sharpcorner.com/article/sort-by-month-name-in-power-bi/
Friday, 5 October 2018
node express + socket.io
project site: https://chuanshuoge1-socketio.herokuapp.com/
3 guys join the real-time chat hosted on 1 server (duplicated web pages).
They send messages to server.
server assign IDs to connected clients and broadcast received data to all connections.
package.json
{
"name": "socketio",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"ejs": "^2.6.1",
"express": "^4.16.3",
"jquery": "^3.3.1",
"socket.io": "^2.1.1"
}
}
-----------------------------------
server.js
const express = require('express');
const socketIO = require('socket.io');
const path = require('path');
const bodyParser = require('body-parser');
const exphbs = require('ejs');
const PORT = process.env.PORT || 3000;
const INDEX = path.join(__dirname, 'index.html');
const app = express();
app.set('view engine', 'ejs');
//Body parser Middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.get('/', (req, res) => res.render('index'));
const server = app.listen(PORT, () => console.log(`Listening on ${ PORT }`));
const io = socketIO(server);
let clientNum = 0;
io.on('connection', (socket) => {
clientNum++;
let currentTime = new Date();
const socketId = socket.id;
const connectionRes = currentTime.toLocaleString() + ' ' +
socketId + ' connected. ' +clientNum.toString() + ' online';
console.log(connectionRes);
//send to self when connected
io.to(socketId).emit('server_connect', connectionRes);
//response to client send event
socket.on('client_chat', data=>{
currentTime = new Date();
//send to everyone except self
socket.broadcast.emit('server_chat',
{
name: data.name==''? socketId.toString() : data.name,
message: data.message,
});
})
socket.on('disconnect', () => {
clientNum--;
currentTime = new Date();
console.log(currentTime.toLocaleString(),
'client disconnected. users', clientNum);
});
});
-----------------------------------------
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width-device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"/>
<title>socket.io chat</title>
</head>
<body>
<p id='connectionStatus'></p>
<div style="height:300px;
background-color: lightgray;
overflow: scroll"
id = 'chatDialog'
>
</div>
<input placeholder='Name' id='name'/>
<br/>
<textarea style="width:350px; height:100px" placeholder='Message'
id='message'></textarea>
<br/>
<button onclick='sendMessage()'>send</button>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var nameInput = document.getElementById('name');
var messageInput = document.getElementById('message');
var connectionStatus = document.getElementById('connectionStatus');
var chatDialog = document.getElementById('chatDialog');
function sendMessage(){
socket.emit('client_chat', {
name: nameInput.value,
message: messageInput.value,
});
chatDialog.innerHTML = chatDialog.innerHTML + '<div>' +
'<span style="color: green">me:</span> '
+ messageInput.value +
'</div>'
}
socket.on('server_connect', function(data){
connectionStatus.innerHTML = data;
});
socket.on('server_chat', function(data) {
chatDialog.innerHTML = chatDialog.innerHTML + '<div>' +
'<span style="color: blue">' + data.name + ':</span> '
+ data.message +
'</div>'
});
</script>
</body>
</html>
-------------------------------------
reference:
Wednesday, 3 October 2018
react socket.io
package.json
{
"name": "react-socketio",
"version": "0.1.0",
"private": true,
"dependencies": {
"concurrently": "^4.0.1",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "1.1.5",
"socket.io-client": "^2.1.1"
},
"scripts": {
"start": "concurrently --kill-others \"node server/server.js\" \"react-scripts start\"",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {}
}
------------------------------------------------------
server/package.json
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.3",
"socket.io": "^2.1.1"
}
}
----------------------------------------
server.js
const express = require('express');
const socket = require('socket.io');
const app = express();
//server entry port
const port = 5000;
server = app.listen(port, function(){
console.log('server is running on port ', port)
});
let clientNum = 0;
io = socket(server);
io.on('connection', (socket) => {
clientNum++;
let currentTime = new Date();
const socketId = socket.id;
const connectionRes = currentTime.toLocaleString() + ' ' +
socketId + ' connected. ' +clientNum.toString() + ' online';
console.log(connectionRes);
//send to self when connected
io.to(socketId).emit('server_connect', connectionRes);
//response to client send event
socket.on('client_chat', data=>{
currentTime = new Date();
//send to all clients
//io.emit('server', 'server response');
//send to everyone except self
socket.broadcast.emit('server_chat',
{
name: data.name==''? socketId.toString() : data.name,
message: data.message,
});
})
//client leaves
socket.on('disconnect', () => {
clientNum--;
currentTime = new Date();
console.log(currentTime.toLocaleString(),
'client disconnected. users', clientNum);
})
});
---------------------------------------
app.js
import React, { Component } from 'react';
import './App.css';
import io from 'socket.io-client'
class App extends Component {
constructor(props) {
super(props)
this.state={
connectionStatus: '',
chat: [],
name: '',
message: '',
}
//connect to server
this.socket = io('localhost:5000');
this.socket.on('server_connect', data=>{
this.setState({connectionStatus: data});
});
//append received message to chat
this.socket.on('server_chat', data=>{
this.setState(prev=>
{
const newChat = <div>
<span style={{color: 'blue'}}>{data.name}</span>
<span>: {data.message}</span>
</div>
return {
chat: [...prev.chat].concat(newChat),
}
});
});
}
send=()=>{
this.socket.emit('client_chat', {
name: this.state.name,
message: this.state.message,
});
//append my message to chat
this.setState(prev=>
{
const newChat = <div>
<span style={{color: 'green'}}>me</span>
<span>: {this.state.message}</span>
</div>
return {
chat: [...prev.chat].concat(newChat),
}
});
}
changeName=(e)=>{
this.setState({name: e.target.value});
}
changeMessage=(e)=>{
this.setState({message: e.target.value});
}
componentDidMount(){
console.log(JSON.stringify(process.env));
}
render() {
const chatDialog = this.state.chat.map((item,index)=>{
return <div key={index}>{item}</div>
})
return (
<div>
{this.state.connectionStatus} <br/>
<div style={{height:'300px',
backgroundColor:'lightGrey',
overflow:'scroll'}}>
{chatDialog}
</div>
<input placeholder='Name'
onChange={(e)=>this.changeName(e)}></input>
<br/>
<textarea style={{width:'350px', height:'100px'}} placeholder='Message'
onChange={(e)=>this.changeMessage(e)}></textarea>
<br/>
<button onClick={()=>this.send()}>send</button>
</div>
);
}
}
export default App;
--------------------------------------------
reference:
Subscribe to:
Posts (Atom)