[React] FIX: Hooks can only be called inside the body of a function component.錯誤
Hooks can only be called inside the body of a function component錯誤除了 react 要升級到 16.8.0-alpha.1 之外 react-dom 也要 16.8.0-alpha.1 以上
[ZPL] Zebra 印中文標籤 print chinese characters
最近在用 Zebra GT800 印標籤(透過 web browser)
全英文標籤沒什麼問題
但中文部分都吐亂碼或問號
看了 GT800 裡面有特別內建 CHT.FNT, SIMSUN.FNT
起初我一直以為 CHT.FNT 是印繁體中文的字體
SIMSUN.FNT 則是印簡體中文的字體
BUT.....
CHT.FNT 都吐問號 , SIMSUN.FNT 內竟然也有繁體中文.... (／‵Д′)／~ ╧╧
所以用 SIMSUN.FNT 就通吃中文惹....
然後字的部分要轉成 HEX String 然後搭配 ^FH 一起使用
假設要印 “繁體中文讚讚讚!”
首先將 繁體中文讚讚讚! 貼到 https://openopen114.github.io/TextToHexString [Github]
點 Gen 後選擇 Hex String For ZPL 可得到 _E7_B9_81_E9_AB_94_E4_B8_AD_E6_96_87_E8_AE_9A_E8_AE_9A_E8_AE_9A_21
然後 ZPL CODE 如下
^XA
^CI28
^A@R,50,50,E:SIMSUN.FNT
^FO50,50^FH^FD _E7_B9_81_E9_AB_94_E4_B8_AD_E6_96_87_E8_AE_9A_E8_AE_9A_E8_AE_9A_21 ^FS
^XZ
全英文標籤沒什麼問題
但中文部分都吐亂碼或問號
看了 GT800 裡面有特別內建 CHT.FNT, SIMSUN.FNT
起初我一直以為 CHT.FNT 是印繁體中文的字體
SIMSUN.FNT 則是印簡體中文的字體
BUT.....
CHT.FNT 都吐問號 , SIMSUN.FNT 內竟然也有繁體中文.... (／‵Д′)／~ ╧╧
所以用 SIMSUN.FNT 就通吃中文惹....
然後字的部分要轉成 HEX String 然後搭配 ^FH 一起使用
假設要印 “繁體中文讚讚讚!”
首先將 繁體中文讚讚讚! 貼到 https://openopen114.github.io/TextToHexString [Github]
點 Gen 後選擇 Hex String For ZPL 可得到 _E7_B9_81_E9_AB_94_E4_B8_AD_E6_96_87_E8_AE_9A_E8_AE_9A_E8_AE_9A_21
然後 ZPL CODE 如下
^XA
^CI28
^A@R,50,50,E:SIMSUN.FNT
^FO50,50^FH^FD _E7_B9_81_E9_AB_94_E4_B8_AD_E6_96_87_E8_AE_9A_E8_AE_9A_E8_AE_9A_21 ^FS
^XZ
解決 electron 安裝失敗問題(Mac)
npm install -g electron 出現Error
permission denied, mkdir '/usr/local/lib/node_modules/electron/dist'
使用下列安裝就順利裝上去惹＠＠
sudo npm install -g electron --unsafe-perm=true --allow-root
[JavaFx] *Fix Failed to start sceneBuild via Intellij Idea for Mac
1. download SceneBuild
link:http://www.oracle.com/technetwork/java/javase/downloads/javafxscenebuilder-1x-archive-2199384.html#javafx-scenebuilder-2.0-oth-JPR
Intellij Idea -> Preferences
search "JavaFX"
then setting the path of sceneBuild App
Done!
link:http://www.oracle.com/technetwork/java/javase/downloads/javafxscenebuilder-1x-archive-2199384.html#javafx-scenebuilder-2.0-oth-JPR
Intellij Idea -> Preferences
search "JavaFX"
then setting the path of sceneBuild App
Done!
[解決] -bash: dotnet: command not found for Mac
裝完官網的 dotnet 要用就出現
就可以惹＠＠
-bash: dotnet: command not found
先用 /usr/local/share/dotnet/dotnet --info
看有沒有執行，有的話只是連結問題
改用 ln -s /usr/local/share/dotnet/dotnet /usr/local/bin/
[解決] High Sierra 滑鼠頓 lag 問題
升級到high sierra 後 magic mouse 頓頓der
用一般 USB Mouse也一樣
後來google到裝usb overdrive就解決了
[Node.js] express: command not found [解決辦法]
sudo npm install -g express-generator
這樣就可以在terminal express projectName惹 0.0
這樣就可以在terminal express projectName惹 0.0
[Angular 4] Router 用法
1.在app.module.ts import routermodule
2.設定forRoot path and component
3.在html部分 tag a 裡面使用routerLink去辨識，然後內容會顯示在router-outlet
2.設定forRoot path and component
3.在html部分 tag a 裡面使用routerLink去辨識，然後內容會顯示在router-outlet
[Apache] 固定ip架設網站設定 in Ubuntu
最近在改寫公司網站
順便把部署環境從windows改成Ubuntu
恩...就不愛微軟跟Asp....
Ubuntu上安裝LAMP可以google有很多教學
順便把部署環境從windows改成Ubuntu
恩...就不愛微軟跟Asp....
Ubuntu上安裝LAMP可以google有很多教學
[Angular2] Angular 2 Host in Apache Server
一般都用Angular CLI的 ng server去host
但突然想要用 Apache
1. ng new YourProj
2. set build/output directory(option)
// in angular-cli.json
// outDir 可以設定build/output的資料夾，預設是dist
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
3.use relative path
// in index.html
//
base href="./"
4.ng build --prod
bulid完就會出現dist資料夾
然後把dist資料夾移到apache的路徑下就ok了
[Anguler2] routing 用法
youtube影片可以參考：https://youtu.be/Uvj_7ZMrHmg
1.新增 app.router.ts
import { ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component';
// setting router path
export const router: Routes = [
{path: '', redirectTo: 'services', pathMatch: 'full' }, //redirect to service
{path: 'about', component: AboutComponent },
{path: 'services', component: ServicesComponent },
];
// generate router module
export const routes: ModuleWithProviders = RouterModule.forRoot(router);
2.app.module.ts 要import routes
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {routes} from './app.router'; //import
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component';
@NgModule({
declarations: [
AppComponent,
AboutComponent,
ServicesComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routes //import
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
3.app.component.html 設定routerLink & router-outlet
//router-outlet就是所對應的component表現的地方
<router-outlet></router-outlet>
[Angular2] service with Http Error Catch 用法
當http 抓不到資料時拋出錯誤
github
1. import
/* employee.service.ts */
------------------------------------
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http'; //import Http, Headers , Response
import {Observable} from 'rxjs/Observable'; //import Observable
import 'rxjs/add/operator/map'; //import rxjs map
import 'rxjs/add/operator/catch'; //import rxjs catch
import 'rxjs/add/Observable/throw';
@Injectable()
export class EmployeeService {
private _url: string = "../apidata/employeeData.json";
constructor(private _http: Http) {}
getEmployees(){
return this._http.get(this._url)
.map(res => res.json())
.catch(this._errorHandler); // catch error handler
}
_errorHandler(err: Response){
console.error(err);
return Observable.throw(err || "Server Error");
}
}
2.
/* employee-list.component.ts */
-------------------------------------------------
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
employees = [];
errorMsg: string;
constructor(private _empService: EmployeeService) { }
ngOnInit() {
// this.employees = this._empService.getEmployees();
this._empService.getEmployees()
.subscribe(resEmpData => this.employees = resEmpData,
resEmpError => this.errorMsg = resEmpError);
}
}
github
1. import
/* employee.service.ts */
------------------------------------
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http'; //import Http, Headers , Response
import {Observable} from 'rxjs/Observable'; //import Observable
import 'rxjs/add/operator/map'; //import rxjs map
import 'rxjs/add/operator/catch'; //import rxjs catch
import 'rxjs/add/Observable/throw';
@Injectable()
export class EmployeeService {
private _url: string = "../apidata/employeeData.json";
constructor(private _http: Http) {}
getEmployees(){
return this._http.get(this._url)
.map(res => res.json())
.catch(this._errorHandler); // catch error handler
}
_errorHandler(err: Response){
console.error(err);
return Observable.throw(err || "Server Error");
}
}
2.
/* employee-list.component.ts */
-------------------------------------------------
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
employees = [];
errorMsg: string;
constructor(private _empService: EmployeeService) { }
ngOnInit() {
// this.employees = this._empService.getEmployees();
this._empService.getEmployees()
.subscribe(resEmpData => this.employees = resEmpData,
resEmpError => this.errorMsg = resEmpError);
}
}
[Angular2] service via Http Rxjs 用法
在 service 用http 去要資料(json)
然後給component 用
1. get data via Http
/* employee.service.ts*/
------------------------------------
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http'; //import Http, Headers
import 'rxjs/add/operator/map'; //import rxjs
@Injectable()
export class EmployeeService {
private _url: string = "../apidata/employeeData.json";
constructor(private _http: Http) {}
getEmployees(){
return this._http.get(this._url)
.map(res => res.json());
}
}
2.subscribe
/* employee-list.component.ts*/
-----------------------------------------------
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
employees = [];
constructor(private _empService: EmployeeService) { }
ngOnInit() {
this._empService.getEmployees()
.subscribe(resEmpData => this.employees = resEmpData);
}
}
然後給component 用
1. get data via Http
/* employee.service.ts*/
------------------------------------
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http'; //import Http, Headers
import 'rxjs/add/operator/map'; //import rxjs
@Injectable()
export class EmployeeService {
private _url: string = "../apidata/employeeData.json";
constructor(private _http: Http) {}
getEmployees(){
return this._http.get(this._url)
.map(res => res.json());
}
}
2.subscribe
/* employee-list.component.ts*/
-----------------------------------------------
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
employees = [];
constructor(private _empService: EmployeeService) { }
ngOnInit() {
this._empService.getEmployees()
.subscribe(resEmpData => this.employees = resEmpData);
}
}
[Angular2] Output 用法
從inside component 發送一個值到App component
1.import EventEmitter, Output
emitSpot 就像是發射台，將東西發射出去
/* inside.component.ts */
------------------------------------
import { Component, OnInit, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-inside',
templateUrl: './inside.component.html',
styleUrls: ['./inside.component.css']
})
export class InsideComponent implements OnInit {
@Output()
emitSpot = new EventEmitter;
sendTextToAppComp(val: string){
console.log("outputText2App func working");
console.log(val);
this.emitSpot.emit(val)
}
constructor() { }
ngOnInit() {
}
}
{{title}}
emitSpot)="OutputTextFromInsideComp($event)">
4.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
public AppText = '';
OutputTextFromInsideComp($event){
console.log("OutputTextFromInsideComp Working");
console.log("event: :"+$event);
this.AppText = $event;
}
}
流程大概就是
sendTextToAppComp() -> emitSpot.emit(val) -> (emitSpot) -> OutputTextFromInsideComp($event) -> this.AppText = $event;
1.import EventEmitter, Output
emitSpot 就像是發射台，將東西發射出去
/* inside.component.ts */
------------------------------------
import { Component, OnInit, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'app-inside',
templateUrl: './inside.component.html',
styleUrls: ['./inside.component.css']
})
export class InsideComponent implements OnInit {
@Output()
emitSpot = new EventEmitter;
sendTextToAppComp(val: string){
console.log("outputText2App func working");
console.log(val);
this.emitSpot.emit(val)
}
constructor() { }
ngOnInit() {
}
}
2. html 就簡單按 click button 後呼叫sendTextToAppComp()將 input value 送到App Comp
/* inside.component.html */
----------------------------------------
3.
/* app.component.html */
----------------------------------------{{title}}
{{AppText}}
4.
/* app.component.ts */
----------------------------------------import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
public AppText = '';
OutputTextFromInsideComp($event){
console.log("OutputTextFromInsideComp Working");
console.log("event: :"+$event);
this.AppText = $event;
}
}
流程大概就是
sendTextToAppComp() -> emitSpot.emit(val) -> (emitSpot) -> OutputTextFromInsideComp($event) -> this.AppText = $event;
[Angular2] Input 用法
將 App component 的值 input 到 inside component 用
也就是 inside comp 需要吃一個值 從 App comp
github
1. import input, 設定input 的變數
/* inside.component.ts*/
------------------------------------
import { Component, OnInit ,Input} from '@angular/core'; //import Input
@Component({
selector: 'app-inside',
templateUrl: './inside.component.html',
styleUrls: ['./inside.component.css']
})
export class InsideComponent implements OnInit {
@Input()
public inputTextFromAppComp='';
constructor() { }
ngOnInit() {
}
}
2. html 部分就簡單直接print
/* inside.component.html*/
------------------------------------
input text from AppComp:
3.
/* app.component.ts*/
------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
public appText = "string in app comp "
}
4.在App comp的appText 傳給 在inside Comp 的 inputTextFromAppComp
/* app.component.html*/
------------------------------------
inputTextFromAppComp]="appText" >
也就是 inside comp 需要吃一個值 從 App comp
github
1. import input, 設定input 的變數
/* inside.component.ts*/
------------------------------------
import { Component, OnInit ,Input} from '@angular/core'; //import Input
@Component({
selector: 'app-inside',
templateUrl: './inside.component.html',
styleUrls: ['./inside.component.css']
})
export class InsideComponent implements OnInit {
@Input()
public inputTextFromAppComp='';
constructor() { }
ngOnInit() {
}
}
2. html 部分就簡單直接print
/* inside.component.html*/
------------------------------------
input text from AppComp:
{{
inputTextFromAppComp}}3.
/* app.component.ts*/
------------------------------------
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
public appText = "string in app comp "
}
4.在App comp的appText 傳給 在inside Comp 的 inputTextFromAppComp
/* app.component.html*/
------------------------------------
[Angular2] service 用法
1.先用 "ng g service EmployeeService" create service
create src/app/employee-service.service.spec.ts
create src/app/employee-service.service.ts
2. 在service裡面寫 getEmployees() function
/* employee-service.service.ts*/
----------------------------------------------
import { Injectable } from '@angular/core';
@Injectable()
export class EmployeeService {
employessData = [
{"id":1, "name":"name_1", "age":11},
{"id":2, "name":"name_2", "age":12},
{"id":3, "name":"name_3", "age":13}
];
// getEmployees() in service
getEmployees(){
return this.employessData;
}
constructor() { }
}
/* employee-list.component.ts*/
/* employee-list.component.html*/
{{item.name}}
create src/app/employee-service.service.spec.ts
create src/app/employee-service.service.ts
2. 在service裡面寫 getEmployees() function
/* employee-service.service.ts*/
----------------------------------------------
import { Injectable } from '@angular/core';
@Injectable()
export class EmployeeService {
employessData = [
{"id":1, "name":"name_1", "age":11},
{"id":2, "name":"name_2", "age":12},
{"id":3, "name":"name_3", "age":13}
];
// getEmployees() in service
getEmployees(){
return this.employessData;
}
constructor() { }
}
3. import service
/* app.component.ts*/
----------------------------------------------
import { Component } from '@angular/core';
import { EmployeeService } from "./employee.service" //import service
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [EmployeeService] // add providers
})
export class AppComponent {
title = 'app works!';
}
/* employee-list.component.ts*/
----------------------------------------------
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service'; //import service
@Component({
selector: 'app-employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
employees = [];
constructor(private _empService: EmployeeService) { }
ngOnInit() {
this.employees = this._empService.getEmployees();//get data via emp service
}
}
/* employee-list.component.html*/
----------------------------------------------
result:
[Angular2] npm install 錯誤 Error: Cannot find module 'minimatch' 解法 (Mac)
解法可參考https://github.com/npm/npm/issues/10434 Keyamoon的回覆
基本上就是把/usr/local/lib/node_modules/npm 整個資料夾刪除
然後再去https://nodejs.org/en/download/ 下載重新安裝一次 Node.js
就可以順利npm install Angular 2 package
install Samba in Ubuntu
#安裝samba
sudo apt-get install samba
#修改 samba 設定
sudo vim /etc/samba/smb.conf
#在smb.conf 最後加
[pi]
comment=pi's home
path=/home
read only=no
guest ok=no
browseable=yes
create mask=0755
directory mask=0755
#重啟服務
sudo service smbd restart
#設定帳號密碼
sudo smbpasswd -a pi
smb://xxx.xxx.xxx.xxx
就可以進去囉
[Python] fix string 亂碼 codec can't decode
在接資料時，剛好也接到 Serial 在拋query的數據訊號
剛好是亂碼
python 在轉 unicode 時就爆錯惹
UnicodeDecodeError: 'ascii' codec can't decode byte 0xc0 in position
這時大決直接 ignore
str = str.decode('utf-8', 'ignore')
如果還不給力就要使用regex惹
先 import re
replacedStr = re.sub('[^A-Za-z0-9_":\{\}]+', "", str)
[^A-Za-z0-9_":\{\}] 排除大小寫字母、數字 、底線 、"號、大括弧{}
json大概就用到這些，除了把上面之外的都用取代掉
replacedStr = replacedStr.replace('}"','},"') //補上逗點用的
收工
剛好是亂碼
python 在轉 unicode 時就爆錯惹
UnicodeDecodeError: 'ascii' codec can't decode byte 0xc0 in position
這時大決直接 ignore
str = str.decode('utf-8', 'ignore')
如果還不給力就要使用regex惹
先 import re
replacedStr = re.sub('[^A-Za-z0-9_":\{\}]+', "", str)
[^A-Za-z0-9_":\{\}] 排除大小寫字母、數字 、底線 、"號、大括弧{}
json大概就用到這些，除了把上面之外的都用取代掉
replacedStr = replacedStr.replace('}"','},"') //補上逗點用的
收工
[Arduino] serial communication using PySerial (Mac)
1.安裝Pyserial
首先到https://pypi.python.org/pypi/pyserial 下載tar.gz檔
tar -xzf pyserial-3.1.1.tar.gz
cd pyserial-3.1.1
sudo python setup.py install
首先到https://pypi.python.org/pypi/pyserial 下載tar.gz檔
tar -xzf pyserial-3.1.1.tar.gz
cd pyserial-3.1.1
sudo python setup.py install
[PHP] 安裝Composer for Mac
安裝composer
//in Terminal
curl -sS https://getcomposer.org/installer | php
php composer.phar
mv composer.phar /usr/local/bin/composer
composer
[Raspberry Pi] 接收Arduino的資料
影片可參考
//安裝python
sudo apt-get install python
//安裝moreutils
sudo apt-gey install moreutils
//安裝grabserial
wget https://raw.githubusercontent.com/tbird20d/grabserial/master/grabserial grabserial
//先lsusb一次，然後插上Arduino再lsusb看有沒有抓到Arduino
lsusb
//看Arduino抓到的裝置代號，ttyUSB0 或是 ttyACM0
ls /dev/tty*
//編輯grabserial 參數
nano grabserial
//in grabserial file
sd.port="/dev/ttyACM0" // 如果你ls /dev/tty*是 ttyUSB0 就改sd.port="/dev/ttyUSB0"
sd.baudrate=9600
然後在Arduino隨便寫個可以拋資料的
//顯示Arduino傳過來的Data
python grabserial
//把Arduino傳過來的Data存在a.txt ，Terminal上不會顯示
python grabserial > a.txt
//安裝python
sudo apt-get install python
//安裝moreutils
sudo apt-gey install moreutils
//安裝grabserial
wget https://raw.githubusercontent.com/tbird20d/grabserial/master/grabserial grabserial
//先lsusb一次，然後插上Arduino再lsusb看有沒有抓到Arduino
lsusb
//看Arduino抓到的裝置代號，ttyUSB0 或是 ttyACM0
ls /dev/tty*
//編輯grabserial 參數
nano grabserial
//in grabserial file
sd.port="/dev/ttyACM0" // 如果你ls /dev/tty*是 ttyUSB0 就改sd.port="/dev/ttyUSB0"
sd.baudrate=9600
然後在Arduino隨便寫個可以拋資料的
//顯示Arduino傳過來的Data
python grabserial
//把Arduino傳過來的Data存在a.txt ，Terminal上不會顯示
python grabserial > a.txt
