CS Jou Blog

2018年3月10日星期六

旋轉立方體影片

Ref: https://docs.microsoft.com/zh-tw/dotnet/framework/wpf/graphics-multimedia/3-d-graphics-overview
Windows 10 x64 @ ASUS X450J
1. 依據
<MeshGeometry3D Positions="-1 -1 0 1 -1 0 -1 1 0 1 1 0" TextureCoordinates="0 1 1 1 0 0 1 0 " TriangleIndices="0 1 2 1 3 2" />
2. 複製5份作成六面體(以中心 0 0 0 旋轉後平移)
3. 3D物件群組製作x,y axis 旋轉腳本動畫
4. 影片置於 C:\Users\csjou\Videos\wildlife.wmv"
5. xaml code
<Window x:Class="wk31.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:wk31"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="RoX"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:3"
RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetName="RoY"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:4"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Window.Triggers>
<Grid>
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera
FarPlaneDistance="20"
LookDirection="0 0 -1"
UpDirection="0,1,0"
NearPlaneDistance="1"
Position="0 0 10"
FieldOfView="45" />
</Viewport3D.Camera>
<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup>
<Model3DGroup.Transform>
<Transform3DGroup>
<RotateTransform3D CenterZ="1">
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="RoY" Axis="0 1 0"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
<RotateTransform3D CenterZ="1">
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="RoX" Axis="1 0 0"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Transform3DGroup>
</Model3DGroup.Transform>
<AmbientLight Color="White"/>

<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D
Positions="-1 -1 0 1 -1 0 -1 1 0 1 1 0"
TextureCoordinates="0 1 1 1 0 0 1 0 "
TriangleIndices="0 1 2 1 3 2" />
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source="C:\Users\csjou\Videos\wildlife.wmv"/>
</VisualBrush.Visual>
</VisualBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
<GeometryModel3D.Transform>
<Transform3DGroup>
<RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">
<RotateTransform3D.Rotation>
<AxisAngleRotation3D Axis="0 1 0" Angle="180"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
<TranslateTransform3D OffsetZ="0"/>
</Transform3DGroup>
</GeometryModel3D.Transform>
</GeometryModel3D>

<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D
Positions="-1 -1 0 1 -1 0 -1 1 0 1 1 0"
TextureCoordinates="0 1 1 1 0 0 1 0 "
TriangleIndices="0 1 2 1 3 2" />
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source="C:\Users\csjou\Videos\wildlife.wmv"/>
</VisualBrush.Visual>
</VisualBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
<GeometryModel3D.Transform>
<Transform3DGroup>
<RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">
<RotateTransform3D.Rotation>
<AxisAngleRotation3D Axis="0 1 0" Angle="0"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
<TranslateTransform3D OffsetZ="2"/>
</Transform3DGroup>
</GeometryModel3D.Transform>
</GeometryModel3D>

<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D
Positions="-1 -1 0 1 -1 0 -1 1 0 1 1 0"
TextureCoordinates="0 1 1 1 0 0 1 0 "
TriangleIndices="0 1 2 1 3 2" />
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source="C:\Users\csjou\Videos\wildlife.wmv"/>
</VisualBrush.Visual>
</VisualBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
<GeometryModel3D.Transform>
<Transform3DGroup>
<RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">
<RotateTransform3D.Rotation>
<AxisAngleRotation3D Axis="0 1 0" Angle="90"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
<TranslateTransform3D OffsetX="1" OffsetZ="1"/>
</Transform3DGroup>
</GeometryModel3D.Transform>
</GeometryModel3D>

<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D
Positions="-1 -1 0 1 -1 0 -1 1 0 1 1 0"
TextureCoordinates="0 1 1 1 0 0 1 0 "
TriangleIndices="0 1 2 1 3 2" />
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source="C:\Users\csjou\Videos\wildlife.wmv"/>
</VisualBrush.Visual>
</VisualBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
<GeometryModel3D.Transform>
<Transform3DGroup>
<RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">
<RotateTransform3D.Rotation>
<AxisAngleRotation3D Axis="0 1 0" Angle="270"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
<TranslateTransform3D OffsetX="-1" OffsetZ="1"/>
</Transform3DGroup>
</GeometryModel3D.Transform>
</GeometryModel3D>

<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D
Positions="-1 -1 0 1 -1 0 -1 1 0 1 1 0"
TextureCoordinates="0 1 1 1 0 0 1 0 "
TriangleIndices="0 1 2 1 3 2" />
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source="C:\Users\csjou\Videos\wildlife.wmv"/>
</VisualBrush.Visual>
</VisualBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
<GeometryModel3D.Transform>
<Transform3DGroup>
<RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">
<RotateTransform3D.Rotation>
<AxisAngleRotation3D Axis="1 0 0" Angle="270"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
<TranslateTransform3D OffsetY="1" OffsetZ="1"/>
</Transform3DGroup>
</GeometryModel3D.Transform>
</GeometryModel3D>

<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D
Positions="-1 -1 0 1 -1 0 -1 1 0 1 1 0"
TextureCoordinates="0 1 1 1 0 0 1 0 "
TriangleIndices="0 1 2 1 3 2" />
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<VisualBrush>
<VisualBrush.Visual>
<MediaElement Source="C:\Users\csjou\Videos\wildlife.wmv"/>
</VisualBrush.Visual>
</VisualBrush>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
<GeometryModel3D.Transform>
<Transform3DGroup>
<RotateTransform3D CenterX="0" CenterY="0" CenterZ="0">
<RotateTransform3D.Rotation>
<AxisAngleRotation3D Axis="1 0 0" Angle="90"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
<TranslateTransform3D OffsetY="-1" OffsetZ="1"/>
</Transform3DGroup>
</GeometryModel3D.Transform>
</GeometryModel3D>
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</Grid>

</Window>

6. Result

2018年3月8日星期四

Detect shake using javascript

Ref: http://qnimate.com/detect-shake-using-javascript/
Server (Windows 10/IIS @ ASUS X450J) iphone 5s (Chrome) zenfone 6

1. 參考REF程式
<html>
<head>
<title> Test shake</title>
<script type="text/javascript" src="https://cdn.rawgit.com/alexgibson/shake.js/master/shake.js"></script>
<script>
//listen to shake event
var shakeEvent = new Shake({threshold: 15});
shakeEvent.start();
window.addEventListener('shake', function(){
alert("Shaked");
}, false);

//stop listening
function stopShake(){
shakeEvent.stop();
}

//check if shake is supported or not.
if(!("ondevicemotion" in window)){alert("Not Supported");}
</script>
</head>
<body>
<h1>Test shake event</h1>
</body>
2. Zenfone 6

3. iphone 5s

2018年2月17日星期六

Downloading SDK Platform Android 8.1.0, API 27, revision 1 Download finished with wrong size. Expected 65606517 bytes, got 65738431 byt

Ref:https://stackoverflow.com/questions/47719420/sdk-platform-android-8-1-0-cant-download

1. copy
C:\Program Files (x86)\Android\android-sdk\temp\platform-27_r01.zip
2. unzip platform-27_r01.zip
3. md C:\Program Files (x86)\Android\android-sdk\platforms\android-27
4. copy all files into android-27

Test android simulator by visual studio 2017 and then
tns run android == > OK

2018年2月7日星期三

docker mysql utf8

Ref:https://github.com/docker-library/docs/blob/93eaf4f47c52c4b65d1cd31a5dcaa257848e5f13/mysql/README.md#configuration-without-a-cnf-file

ASUS X450J / Windows 10 / Docker version 17.12.0-ce, build c97c6d6

1. Excel file save quiz1.csv and re-save as utf-8
cols.
id, Ans, QS, A1, A2, A3, A4, IM1, OK1
2.
docker run --name mysql2 -e MYSQL_ROOT_PASSWORD=password -d mysql --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
3. copy quiz1.csv into container
docker cp quiz1.csv acc:/var/lib/mysql-files/quiz1.csv
4. Chrome MySQL Admin
5.
CREATE DATABASE quizs;
use quizs;
6.
CREATE TABLE quiz1 (id INT);
ALTER TABLE quiz1 ADD COLUMN Ans INT;
ALTER TABLE quiz1 ADD COLUMN QS VARCHAR(512);
ALTER TABLE quiz1 ADD COLUMN A1 VARCHAR(256);
ALTER TABLE quiz1 ADD COLUMN A2 VARCHAR(256);
ALTER TABLE quiz1 ADD COLUMN A3 VARCHAR(256);
ALTER TABLE quiz1 ADD COLUMN A4 VARCHAR(256);
ALTER TABLE quiz1 ADD COLUMN IM1 VARCHAR(256);
ALTER TABLE quiz1 ADD COLUMN OK1 VARCHAR(256);
7. Import data
LOAD DATA INFILE '/var/lib/mysql-files/quiz1.csv'
INTO TABLE quiz1
FIELDS TERMINATED BY ','
ENCLOSED BY '"'
LINES TERMINATED BY '\n'
IGNORE 1 ROWS;
8. C# code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace newMySQL
{
using System.Data;
using MySql.Data.MySqlClient;
class Program
{
static void Main(string[] args)
{
string 連線字串 = "Server=localhost;Database=quizs;Uid=root;pwd=password;";
MySqlConnection 連線物件 = new MySqlConnection(連線字串);
DataTable 資料表 = new DataTable();
string SQL = "Select * From quiz1";
連線物件.Open();
MySqlDataAdapter 配接器 = new MySqlDataAdapter(SQL, 連線物件);
配接器.Fill(資料表);
連線物件.Close();
//Console.WriteLine(資料表.Rows.Count);
for (int i=0; i<資料表.Rows.Count; i++)
{
for (int j=0; j<8; j++)
Console.Write(資料表.Rows[i].ItemArray[j].ToString());

Console.WriteLine();
}
Console.ReadLine();
}
}
}
9. Results

docker Error: driver failed programming external connectivity on endpoint

Ref: https://github.com/docker/for-win/issues/573
ASUS X450J / Windows 10 / Docker version 17.12.0-ce, build c97c6d6

1. docker run --name mysql1 -e MYSQL_ROOT_PASSWORD=mypassword -d -p 3306:3306 mysql
fail:
C:\Program Files\Docker\Docker\Resources\bin\docker.exe: Error response from daemon: driver failed programming external
connectivity on endpoint mysql1 (571b7c68da7b048831e01138e6d0aa39ca571dbb0914c1d950ab2b1b1ff2001a): Error starting userl
and proxy: mkdir /port/tcp:0.0.0.0:3306:tcp:172.17.0.2:3306: input/output error.

2. Restart docker can solve the problem.

2017年7月31日星期一

Fast Style Transfer in TensorFlow

Ref: https://github.com/lengstrom/fast-style-transfer

Windows 10 x64 @ ASUS X450J
1. Install tensorflow (ref: https://www.tensorflow.org/install/install_windows)
1-1 c:\conda create -n tensorflow python=3.5
1-2 activate tensorflow
1-3 pip install --ignore-installed --upgrade https://storage.googleapis.com/tensorflow/windows/cpu/tensorflow-1.2.1-cp35-cp35m-win_amd64.whl

--- nstall the CPU-only version of TensorFlow

2. python evaluate.py --checkpoint udnie.ckpt --in-path INimgs --out-path OUTimgs
2-1 error no module for scipy
2-1-1 download scipy-0.19.1-cp35-cp35m-win_amd64.whl (http://www.lfd.uci.edu/~gohlke/pythonlibs/)
2-1-2 pip install scipy-0.19.1-cp35-cp35m-win_amd64.whl

2-2 ImportError: cannot import name 'NUMPY_MKL'
2-2-1 download numpy-1.13.1+mkl-cp35-cp35m-win_amd64.whl
2-2-2 pip install numpy-1.13.1+mkl-cp35-cp35m-win_amd64.whl

2-3 AttributeError: module 'scipy.misc' has no attribute 'imread'
2-3-1 download Pillow-4.2.1-cp35-cp35m-win_amd64.whl
2-3-2 pip install Pillow-4.2.1-cp35-cp35m-win_amd64.whl

2-4 'Resize images or use --allow-different-dimensions.'

3. Download udnie.ckpt (https://drive.google.com/drive/folders/0B9jhaT37ydSyRk9UX0wwX3BpMzQ)

4. python evaluate.py --checkpoint udnie.ckpt --in-path INimgs --out-path OUTimgs --allow-different-dimensions

5. Results

6. python transform_video.py --in-path INimgs/joy.mp4 --checkpoint udnie.ckpt --out-path OUTimgs/joy.mp4

fail due to lack of ffmpeg

6.1 Install ffmpeg

http://adaptivesamples.com/how-to-install-ffmpeg-on-windows/

6.2 OK.

2018年3月10日 星期六