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>
        <!--<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);
                    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>



5. https://xxx.github.io/
6. 測試 page2
 (Ref:https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_me_grid&stacked=h)


2019年10月21日 星期一

jekyll blog 建置

1. jekyll 套件有blog template,可見置static blog, 發佈到github,使用https://csjou-hwu.github.io/


Ref: https://ithelp.ithome.com.tw/articles/10198964



2. Windows 10 x64 @ ASUS DM6660

3. https://jekyllrb.com/docs/installation/windows/

Install Ruby @ Windows 10

    3-1 download https://rubyinstaller.org/downloads/
Ruby+Devkit 2.6.5-1 (x64)  132MB

    3-2 Install


    3-3 Enable Linux sub System

    3-3 Download/Install Ubuntu 18.04 LTS


    sudo apt-get update -y && sudo apt-get upgrade -y       //很久
    sudo apt-add-repository ppa:brightbox/ruby-ng
    sudo apt-get update
    sudo apt-get install ruby2.5 ruby2.5-dev build-essential dh-autoreconf
    sudo gem update
    sudo gem install jekyll bundler
--- Takes longer time far more than what I was expected.
4. jekyll new myblog1

5. cd blog

6. bundle exec jekyll serve --host=0.0.0.0





git clone https://github.com/csjou-hwu/csjou-hwu.github.io.git




2019年10月13日 星期日

helixtoolkit 3D基本元件

ASUS X450J @ Windows 10 x64/ VS2017

<h:HelixViewport3D>
            <h:HelixViewport3D.Camera>
                <PerspectiveCamera Position="0 0 50"
                                   LookDirection="0 0 -1"
                                   UpDirection="0 1 0"/>
            </h:HelixViewport3D.Camera>
            <h:DefaultLights/>
            <!-- 3D Model -->
<h:HelixViewport3D>

1.  <h:BillboardVisual3D Position="1 1 40" Width="240" Height="140"></h:BillboardVisual3D>
2. <h:BillboardTextVisual3D Position="1 1 40" Text="周重石" FontSize="60"/>

3. <h:ArrowVisual3D Point1="-20 7 0" Point2="1 1 40" Diameter="1" Direction="1 1 0"></h:ArrowVisual3D>
4. <h:BoxVisual3D Center="1 1 30" Width="2" Height="2" Length="2"  Fill="Green" />
5. <h:CubeVisual3D Center="1 1 30" SideLength="2"  >
6. <h:EllipsoidVisual3D Center="1 1 30" PhiDiv="3" RadiusX="2" RadiusY="2" RadiusZ="3">

7. <h:HelixVisual3D  Diameter="3" Fill="GreenYellow" Length="25" Radius="1">
8. <h:LinesVisual3D Color="Black" Thickness="15"  Points="0 0 0 5 5 0">
9. <h:PieSliceVisual3D Center="0 -10 0" Fill="Red" EndAngle="120" StartAngle="0" OuterRadius="20" InnerRadius="5">
10. <h:RectangleVisual3D Length="5"    LengthDirection="1 1 1" Width="2">
11. <h:PipeVisual3D Diameter="10" Fill="Yellow" InnerDiameter="5" Point1="0 0 0" Point2="-10 -10 0"  >
12.<h:SphereVisual3D Radius="5" Center="-10 0 0"/>
13. <h:TubeVisual3D AddCaps="True" Angles="45" Diameter="8" Fill="Aqua" Path="0 0 0 -10 10 10 -10 10 -10">