CS Jou Blog

2020年3月16日星期一

Rotation animation (div)

Ref: https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3
<!DOCTYPE html>
<html>
<style>
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
/*
center @ 25, 100
*/
#div1 {
width: 50px;
height: 200px;
position: absolute;
background-color: transpency;

}
/* 25 - w/2 = 50, 100 */
#div2 {
left: 0px;
top:100px;
width: 50px;
height: 100px;
position: absolute;
background-color: blue;
border-style: solid;
border-color: green;
}
/* 25 - w/2 = 50, 100 */
#diva {
width: 50px;
height: 200px;
position: absolute;
background-color: transpency;

}
/* 25 - w/2 = 50, 100 */
#divb {
left: 0px;
top:100px;
width: 50px;
height: 100px;
position: absolute;
background-color: blue;
border-style: solid;
border-color: green;
}
</style>
<body>

<p>
<button onclick="myMove()">Click Me</button>
</p>

<div id ="myContainer">

<div id="div1" style="top:0px; left:100px; transform: rotate(-30deg)">
<div id="div2">
<div id="diva" style="top:0px; left:0px; transform: rotate(10deg)">
<div id="divb">

</div>
</div>
</div>
</div>

<script>
function myMove() {

var pos = -30;
var dir = 1;
var c1 = document.getElementById("div1");
var ca = document.getElementById("diva");
var id = setInterval(frame, 10);
function frame() {
if (pos == 30) {
clearInterval(id);
} else {
redraw();
}
}
function redraw()
{
pos++;
//elem.style.top = pos + 'px';
//elem.style.left = pos + 'px';
c1.style.transform = "rotate(" + (pos) + "deg)";
ca.style.transform = "rotate(" + (pos) + "deg)";
}
}
</script>

</body>
</html>

2020年1月7日星期二

git change user error

REF: https://blog.csdn.net/klxh2009/article/details/76019742

git clone xxx
update local files
更新github專案內容
git add .
git config --global user.email "userB@gamil.com"
git config --global user.name "userB"
git commit -m “upload template”
git push -u origin master

-----
check default user
git config --list

D:\Course1081\uTaipei\project\git2\UserB.github.io>git push -u origin master
remote: Permission to userB/userB.github.io.git denied to userA.
fatal: unable to access 'https://github.com/userB/userB.github.io.git/': The requested URL returned error: 403

2019年12月15日星期日

Razor 頁面中變數在html中的處理方法

Ref: https://stackoverflow.com/questions/3696071/razor-syntax-inside-attributes-of-html-elements-asp-mvc-3

1. for loop 中變數處理問題
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
@for (int i=1; i<6; i++)
{
<a href="wk0@i.html">test0@i</a>
}
</body>
</html>

在0@間須有space 否則無法視@為變數。

2. 解決方法

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
@for (int i=1; i<6; i++)
{
<a href="wk0@(i).html">test0@(i)</a>
}
</body>
</html>

2019年12月12日星期四

WPF webcam capture : 呼叫執行緒無法存取此物件，因為此物件屬於另一個執行緒

Ref: 1. https://ponchi961.pixnet.net/blog/post/199057831
2. https://github.com/emgucv/emgucv/blob/master/Emgu.CV.Example/CameraCapture/CameraCapture.cs

VS2017 @ Windows 10x64 : NET.Framework 4.6.1

//---xaml
<Window x:Class="wk1401.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:wk1401"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Image Name="imageBox1"/>
</Grid>
</Window>
//---xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace wk1401
{
// nuget add emgu.cv
// ref add System.ServiceModel 4.0
using Emgu.CV;
using Emgu.CV.CvEnum;
using Emgu.CV.Structure;
using Emgu.Util;
using System.Drawing;
using System.IO;
/// <summary>
/// MainWindow.xaml 的互動邏輯
/// </summary>
public partial class MainWindow : Window
{
private VideoCapture _capture = null;
private Mat _frame;
public MainWindow()
{
InitializeComponent();
this.Closing += MainWindow_Closing;
_capture = new VideoCapture();
_capture.ImageGrabbed += _capture_ImageGrabbed;
_frame = new Mat();
_capture.Start();
}

private void MainWindow_Closing(object sender, System.ComponentModel.CancelEventArgs e)
{
_capture.Dispose();
}

private void _capture_ImageGrabbed(object sender, EventArgs e)
{
if (_capture != null && _capture.Ptr != IntPtr.Zero)
{
_capture.Retrieve(_frame, 0);
this.Dispatcher.Invoke((Action)(() =>
{
// your code or function here.
// https://ponchi961.pixnet.net/blog/post/199057831
imageBox1.Source = ConvertBitmapToImageSource(_frame.Bitmap);
}));

}
}
private ImageSource ConvertBitmapToImageSource(Bitmap imToConvert)
{
Bitmap bmp = new Bitmap(imToConvert);
MemoryStream ms = new MemoryStream();
bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp);
BitmapImage image = new BitmapImage();
image.BeginInit();
ms.Seek(0, SeekOrigin.Begin);
image.StreamSource = ms;
image.EndInit();
ImageSource sc = (ImageSource)image;
return sc;
}
}
}

//---- webcam @ 3D
// Add helixtoolkit.wpf.dll
//-- xaml
<Window x:Class="wk1401.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:wk1401"
xmlns:h="http://helix-toolkit.org/wpf"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<h:HelixViewport3D>
<h:DefaultLights/>
<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup >
<Model3DGroup.Children>
<DirectionalLight Color="#FFFFFFFF" Direction="3,-4,5" />
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D
Positions="-1 -1 0 1 -1 0 -1 1 0 1 1 0"
Normals="0 0 1 0 0 1 0 0 1 0 0 1"
TextureCoordinates="0 1 1 1 0 0 1 0 "
TriangleIndices="0 1 2 1 3 2" />
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial>
<DiffuseMaterial.Brush>
<ImageBrush x:Name="imageBox1"/>
</DiffuseMaterial.Brush>
</DiffuseMaterial>
</GeometryModel3D.Material>
</GeometryModel3D>
</Model3DGroup.Children>
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
</h:HelixViewport3D>

</Grid>
</Window>

//--- xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace wk1401
{
// nuget add emgu.cv
// ref add System.ServiceModel 4.0
using Emgu.CV;
using Emgu.CV.CvEnum;
using Emgu.CV.Structure;
using Emgu.Util;
using System.Drawing;
using System.IO;
/// <summary>
/// MainWindow.xaml 的互動邏輯
/// </summary>
public partial class MainWindow : Window
{
private VideoCapture _capture = null;
private Mat _frame;
public MainWindow()
{
InitializeComponent();
this.Closing += MainWindow_Closing;
_capture = new VideoCapture();
_capture.ImageGrabbed += _capture_ImageGrabbed;
_frame = new Mat();
_capture.Start();
}

private void MainWindow_Closing(object sender, System.ComponentModel.CancelEventArgs e)
{
_capture.Dispose();
}

private void _capture_ImageGrabbed(object sender, EventArgs e)
{
if (_capture != null && _capture.Ptr != IntPtr.Zero)
{
_capture.Retrieve(_frame, 0);
this.Dispatcher.Invoke((Action)(() =>
{
// your code or function here.
// https://ponchi961.pixnet.net/blog/post/199057831
//imageBox1.Source = ConvertBitmapToImageSource(_frame.Bitmap);
imageBox1.ImageSource = ConvertBitmapToImageSource(_frame.Bitmap);
}));

}
}
private ImageSource ConvertBitmapToImageSource(Bitmap imToConvert)
{
Bitmap bmp = new Bitmap(imToConvert);
MemoryStream ms = new MemoryStream();
bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp);
BitmapImage image = new BitmapImage();
image.BeginInit();
ms.Seek(0, SeekOrigin.Begin);
image.StreamSource = ms;
image.EndInit();
ImageSource sc = (ImageSource)image;
return sc;
}
}
}

2019年11月23日星期六

emgu 4.1.1.3497 capture video by a webcam.

ref: https://github.com/emgucv/emgucv/tree/master/Emgu.CV.Example/CameraCapture

Visual Studio 2017 @ Windows 10 x64 @ ASUS x450J

1. Form Application
1-1. New project by Form Template.
1-2. nuget Add emgu 4.1.1.3497
1-3. Toolbox add Emgu.CV ImageBox (imageBox1)
1-4. Form1.cs
add System.ServiceModel 4.0
namespace wk12webcam
{
// nuget add emgu.cv
// ref add System.ServiceModel 4.0
using Emgu.CV;
using Emgu.CV.CvEnum;
using Emgu.CV.Structure;
using Emgu.Util;

public partial class Form1 : Form
{
private VideoCapture _capture = null;
private Mat _frame;
public Form1()
{
InitializeComponent();
this.FormClosing += Form1_FormClosing;
_capture = new VideoCapture();
_capture.ImageGrabbed += _capture_ImageGrabbed;
_frame = new Mat();
_capture.Start();
}

private void Form1_FormClosing(object sender, FormClosingEventArgs e)
{
_capture.Dispose();
}

private void _capture_ImageGrabbed(object sender, EventArgs e)
{
if (_capture != null && _capture.Ptr != IntPtr.Zero)
{
_capture.Retrieve(_frame, 0);
imageBox1.Image = _frame;
}
}
}
}

1-5. Results:

2. WPF

2-1. New project by WPF Template.
2-2. nuget Add emgu 4.1.1.3497
2-3. MainWindow.xaml
<Grid>
<Image Name="imageBox1"/>
</Grid>
2-4. MainWindow.xaml.ccs
Similar procedure causes error as follows

ref: http://csjoublog.blogspot.com/2018/12/emgu-webcam-capture-wpf.html
namespace wk12WPFWebcam
{
// Add System.ServiceModel 4.0
using Emgu.CV;
using Emgu.CV.CvEnum;
using Emgu.CV.Structure;
using Emgu.Util;
using System.Drawing;
using System.IO;
using System.Threading;
using System.Runtime.InteropServices;
using System.Windows.Interop;

/// <summary>
/// MainWindow.xaml 的互動邏輯
/// </summary>
public partial class MainWindow : Window
{
private VideoCapture _capture = null;
private Mat _frame;
public MainWindow()
{
InitializeComponent();
this.Closing += MainWindow_Closing;
_capture = new VideoCapture();
//_capture.ImageGrabbed += _capture_ImageGrabbed;
_frame = new Mat();
//_capture.Start();
ComponentDispatcher.ThreadIdle += ComponentDispatcher_ThreadIdle;
}

private void ComponentDispatcher_ThreadIdle(object sender, EventArgs e)
{
using (var imageFrame = _capture.QueryFrame().ToImage<Bgr, Byte>())
{
if (imageFrame != null)
{
imageBox1.Source = ConvertBitmapToImageSource(imageFrame.Bitmap);
}
}
}
private void MainWindow_Closing(object sender, System.ComponentModel.CancelEventArgs e)
{
_capture.Dispose();
}
private ImageSource ConvertBitmapToImageSource(Bitmap imToConvert)
{
Bitmap bmp = new Bitmap(imToConvert);
MemoryStream ms = new MemoryStream();
bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp);
BitmapImage image = new BitmapImage();
image.BeginInit();
ms.Seek(0, SeekOrigin.Begin);
image.StreamSource = ms;
image.EndInit();
ImageSource sc = (ImageSource)image;
return sc;
}
}
}

2019年11月22日星期五

emgu (4.1.1.3497) WPF example 2019/11/23

Ref: https://github.com/emgucv/emgucv/tree/master/Emgu.CV.Example/WPF

1. Visual Studio 2017 @ Windows 10 x64 @ ASUS X450J
2. emgu WPF example
3. failure : mat to image.source
image1.Source = image.ToBitmapSource();
4. 轉換 mat to image.imagesource @ WPF
https://frasergreenroyd.com/how-to-convert-opencv-cvmat-to-system-bitmap-to-system-imagesource/
private void image1_Initialized(object sender, EventArgs e)
{
Mat image = new Mat(100, 400, DepthType.Cv8U, 3);
image.SetTo(new Bgr(255, 255, 255).MCvScalar);
CvInvoke.PutText(image, "Hello, world", new System.Drawing.Point(10, 50), Emgu.CV.CvEnum.FontFace.HersheyPlain, 3.0, new Bgr(255.0, 0.0, 0.0).MCvScalar);
image1.Source = ConvertBitmapToImageSource(image.Bitmap); //.ToBitmapSource();
}

private ImageSource ConvertBitmapToImageSource(Bitmap imToConvert)
{
Bitmap bmp = new Bitmap(imToConvert);
MemoryStream ms = new MemoryStream();
bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp);
BitmapImage image = new BitmapImage();
image.BeginInit();
ms.Seek(0, SeekOrigin.Begin);
image.StreamSource = ms;
image.EndInit();
ImageSource sc = (ImageSource)image;
return sc;
}

2019年11月14日星期四

csjou.github.io 建置程序

Ref: https://lazyteatime.like.community/2019/03/13/《如何在github架網站》%EF%BC%9A簡易教學/

Windows 10 x64 @ ASUS X450J

1. github.com 建立帳號
2. 登入

3. 建立 xxx.github.io 專案 (xxx : username)

4.建立首頁 index.html
<html>
<head>
<title> csjou @ github </title>
</head>
<body>
<h1> csjou@github test </h1>
<marquee>走馬燈標籤測試</marquee>
</body>
</html>