HTML5에서 로컬 DB로 사용가능하며,(웹브라우저일 경우 제약이 각각 있습니다... ) 

CouchDB와 편리하게 서버동기화가 가능하도록 마련되어있습니다...


웹이라는 제약은 물론 있지만, cordova를 통해 앱으로 만들 경우 Plugin으로 그 제약을 풀 수 있다는 장점이 있죠...

(인터페이스는 동일)



기존 HTML5의 로컬DB스펙인 WEBSQL은 예전에 SQLITE기반이었던거 같은데... 

아마도 특정 벤더에 종속되는 것을 막기 위해서 그런지.... 

표준화되면서 폐기되버렸네요... ㅡㅡ;

대신 키/밸류 기반의 IndexedDB라는걸 각 브라우저 벤더사에서 각각 제공해주는 듯합니다.


PouchDB는 이러한 춘추전국시대 같은 다양한 환경에서 최적에 상황에 맞도록 셋팅가능하게 합니다.. 아래링크 참조합니다.

https://pouchdb.com/adapters.html



PouchDB를 위한 12가지 프로팁 (읽어볼만하며, PouchDB의 특징도 알 수 있습니다.)

https://pouchdb.com/2014/06/17/12-pro-tips-for-better-code-with-pouchdb.html



- API 레퍼런스는 여기서 확인이 가능합니다.

https://pouchdb.com/api.html


- ES7일 경우 async , await가 사용가능하나,, ES5는 Promise패턴을 이용해야합니다.


-  Mango Query(cf.Mongo DB) 가 가능한 헬퍼 패키지가 있어 사용할 수 있습니다. 

Vue 인스턴스 생성시 최초에, 객체를 주입하고, 이후 각 콤포넌트에서 this.$bucket 으로 접근하는 방식..

https://www.npmjs.com/package/vue-pouch-db


- ibm watson 데이터랩에서 제공하는 Vuejs / PouchDB 튜터리얼 문서입니다.

https://github.com/ibm-watson-data-lab/shopping-list-vuejs-pouchdb/blob/master/tutorial.md


- MongoDB같은 json 문서 DB입니다.. RDB랑 같이 생각해선 곤란....하구요. MongoDB같은 접근법이 필요합니다.


- 테이블 개념이 없네요.. 이것 때문에 좀 헷갈렸는데. DB가 여러개. 문서속에 하위노드나, attach, 연결정보를 추가하도록 합니다.



Vuejs에서 사용시 아래와 같이 사용했습니다.


- 초기 접근

노드 입력시 guid가 필요해서 vuex에  공용 guid생성 함수를 만들어서 사용했습니다.


최초, 로딩되도록 아래 같이 호출합니다.

created () {
this.load()
},


로드 메소드는 아래와 같이 구성했고..

methods: {
load () {

var vm = this;
this.$bucket.db('vmbook').allDocs({include_docs: true})
.then(function (res) {
vm.groups = res.rows
}).catch(function (err) {
alert(err);
});
},


저장 버튼 눌렀을때 메소드 구현은 아래와 같이 했습니다.

save () {
var vm = this;
this.$bucket.db('vmbook').put({
_id: this.$store.state.global.uuid(),
title: this.regform.group_name, items: []})
.then(function(res) {
vm.load()
vm.show = false
}) .catch(function(err) {
alert(err)
//vm.show = false
})
}
},


삽질이 있었지만.. 잘됩니다.



웹쪽 기술동향을 알 수 있다는 점에서는 흥미롭네요.

    private Bitmap RotateBitmap(Bitmap bitmap, float angle)
    {
        int w, h, x, y;
        var dW = (double)bitmap.Width;
        var dH = (double)bitmap.Height;

        double degrees = Math.Abs(angle);
        if (degrees <= 90)
        {
            double radians = 0.0174532925 * degrees;
            double dSin = Math.Sin(radians);
            double dCos = Math.Cos(radians);
            w = (int)(dH * dSin + dW * dCos);
            h = (int)(dW * dSin + dH * dCos);
            x = (w - bitmap.Width) / 2;
            y = (h - bitmap.Height) / 2;
        }
        else
        {
            degrees -= 90;
            double radians = 0.0174532925 * degrees;
            double dSin = Math.Sin(radians);
            double dCos = Math.Cos(radians);
            w = (int)(dW * dSin + dH * dCos);
            h = (int)(dH * dSin + dW * dCos);
            x = (w - bitmap.Width) / 2;
            y = (h - bitmap.Height) / 2;
        }

        var rotateAtX = bitmap.Width / 2f;
        var rotateAtY = bitmap.Height / 2f;

        var bmpRet = new Bitmap(w, h);
        bmpRet.SetResolution(bitmap.HorizontalResolution, bitmap.VerticalResolution);
        using (var graphics = Graphics.FromImage(bmpRet))
        {
            graphics.Clear(Color.White);
            graphics.TranslateTransform(rotateAtX + x, rotateAtY + y);
            graphics.RotateTransform(angle);
            graphics.TranslateTransform(-rotateAtX - x, -rotateAtY - y);
            graphics.DrawImage(bitmap, new PointF(0 + x, 0 + y));
        }
        return bmpRet;
    }

https://stackoverflow.com/questions/5172906/rotating-graphics


'C#' 카테고리의 다른 글

GDI+ Bitmap Rotaion  (0) 2019.02.19
WPF RichText에서 HTML 표시하기  (0) 2019.02.09
Visual Studio Debug.WriteLine 표시가 안될때 대처 방안  (0) 2018.11.15
WPF, Template Select 하기  (0) 2018.05.29
WPF MVVM 샘플코드  (0) 2018.05.28
doxygen 설치 및 설정  (0) 2018.05.14

요즘 커맨드 명령이 많이 쓰이는 듯합니다.

npm도 그렇고, dotnet 프로젝트도 커맨드 명령어로 생성하도록 하네요.

그래서 커맨드 창에 기억하고픈  커맨드만 따로 저장하는 방법이 없을까 하다가 이 방법 쓰면 좋겠다 하고 고안해보았습니다.

*파워쉘을 쓸 경우 기능이 풍부해서 아래와 같은 삽질(?) 안해도 될듯 싶습니다.


단순히 명령어를 그냥 그냥 복붙하면 제일 쉽습니다만....^^





1. 명령어를 입력합니다.


2. 기억하고픈 명령어는 방향키 상단키를 눌러 다시 나타나게 하고 앞에 REM 을 입력합니다.

 (도스명령어에서는 REM은 주석입니다. 따라서 아무런 일도 일어나지 않습니다.)

예) 

DIR /W 

REM DIR/W


그리고 이 방식으로 계속 기억하고 싶은 명령어는 위 방식으로 REM 을 해놓습니다.


3. REM 해놓은 명령어만 보고 싶을때 이렇게 합니다.


doskey /history | findstr -R "^REM"


앞에 REM만 달린 명령어들만 나열합니다.


위 명령들을 저장하고 싶으면 파일로 리다이렉션 시키면 됩니다.




doskey /history | findstr -R "^REM" > commands.txt



참고로,

F7을 누르면 히스토리 모두를 볼 수 있습니다.


 RichText에서 HTML을 표시할 수 있는 방법에 대해 설명해놓은 글입니다.

물론 샘플 소스도 같이 있습니다.

https://www.codeproject.com/Articles/1097390/Displaying-HTML-in-a-WPF-RichTextBox


소스를 다운로드해서 샘플을 켜보면 RichText에 TextBox의 Text로 바로 바인딩을 걸어놔서, HTML 문법오류가나면, 바로 프로그램이 죽습니다.

그래서 생성자에 바로 HTML을 입력하고 테스트해보았습니다.






핵심은  HtmlConverter에서 HTML 분석기를 만들어 HtmlToXamlConveter를 호출한다는 겁니다.

FlowDocument 를 만들어서 입력하게끔하네요. 


RTF문서 만들고, 입력내용에 대해 수정하기가 쉽지않은데...

HTML로 하니 간편한 듯합니다..

유용하네요.



MainWindow.xaml


<Window x:Class="RichTextBlockSample.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:local="clr-namespace:RichTextBlockSample"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="HTML TextBlock sample"
        Width="400"
        Height="300"
        mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <TextBox Name="TextBox"
                 Margin="10,0"
                 HorizontalAlignment="Stretch"
                 VerticalAlignment="Center"
                 Text=""
                 TextWrapping="Wrap" />
        <RichTextBox Grid.Row="1"
                     local:HtmlRichTextBoxBehavior.Text="{Binding ElementName=TextBox, Path=Text}"
                     IsDocumentEnabled="True"
                     IsReadOnly="True" />
        <!--
        <WebBrowser Grid.Row="2"
                    local:WebBrowserBehavior.Body="{Binding ElementName=TextBox, Path=Text}" />-->
    </Grid>
</Window>



MainWindows.xaml.cs

using System.Windows;
using System.Windows.Controls;

namespace RichTextBlockSample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
	{
		public MainWindow()
		{
			InitializeComponent();

            TextBox.Text = "<span style=\"color:red; font-size:20px; font-weight:bold\">hello</span>";
            TextBox.Text += "<span style=\"color:blue; font-size:20px; font-weight:bold; font-family:aria\">world</span>";
            TextBox.Text += "<span style=\"color:green; font-size:20px; font-weight:bold; font-family:nanumgothic\">안녕하세요</span>";
        }
	}
}


라이센스 : https://www.codeproject.com/info/cpol10.aspx 보니 소스 재배포가 가능해서 파일 첨부합니다.


RichTextBlockSample.zip



'C#' 카테고리의 다른 글

GDI+ Bitmap Rotaion  (0) 2019.02.19
WPF RichText에서 HTML 표시하기  (0) 2019.02.09
Visual Studio Debug.WriteLine 표시가 안될때 대처 방안  (0) 2018.11.15
WPF, Template Select 하기  (0) 2018.05.29
WPF MVVM 샘플코드  (0) 2018.05.28
doxygen 설치 및 설정  (0) 2018.05.14

1. 빌드하는 모드가 Debug모드인지 확인할 것.


2. 도구 / 옵션 / 디버깅 / 일반에 출력 창의 모든 텍스트를 [직접실행]창으로 리다이렉션 체크해제 확인

(Menu > tools > options > debugging > General > Redirect all output window text to the immediate window (NOT Checked)






2. 프로젝트 설정 페이지에서 빌드, 설정은 빌드, DEBUG 상수 정의, TRACE 상수 정의 확인 

(Project Properties > Build > Define DEBUG constant / Defile TRACE constatnt are all checked.




3. 출력 창에서 마우스 오른쪽 버튼 눌러 프로그램 출력 체크 확인 (이걸 몰라서 헤멨다 아오..)




4. 기타 App.config 에 이런거 있어도 안되고.

  <system.diagnostics>

    <trace>

      <listeners>

        <!-- This next line is the troublemaker. If it is there delete it-->

        <clear/>

      </listeners>

    </trace>

  </system.diagnostics>





'C#' 카테고리의 다른 글

GDI+ Bitmap Rotaion  (0) 2019.02.19
WPF RichText에서 HTML 표시하기  (0) 2019.02.09
Visual Studio Debug.WriteLine 표시가 안될때 대처 방안  (0) 2018.11.15
WPF, Template Select 하기  (0) 2018.05.29
WPF MVVM 샘플코드  (0) 2018.05.28
doxygen 설치 및 설정  (0) 2018.05.14

집에서 사용하고 있던 스마트 플러그가 갑자기 고장이 났습니다.

스마트폰용 앱이 UI가 참 맘에 들어 몇개월간 잘 사용하고 있었는데. 고장이 나더군요.


 


 

 

 


증상은 앱으로 표시 및 제어어도 잘 되는 듯 한데...  실제 릴레이가 작동하지 않고 계속 전원이 연결되는 문제였습니다.

H모사의 제품이었는데, 인터넷을 검색해보니 저 말고도 그러한 사례가 종종 있는 듯 했습니다.


고객센터에 글을 남길까.. 하다가, 아래 글을 보고 제품에 여러차례 충격을 가해보았습니다.

그러니 어찌 첨에 안된다가 다시 몇번 치니까 고쳐지더군요.

붙었던 릴레이를 물리적으로 떼내는 일을 하는 듯 했습니다.


릴레이 접점이 붙었다가 떨어지지 않는 고장사례는 종종 있는 듯 했습니다...



그런데, 한편 생각해보니. 이건 진짜 위험하다 싶더군요.

특히 온열제품일 경우, 제대로 제어되지 않는 다면, 화재까지 이어질 수 있는 상황이구요...

전원에 제어가 제대로 되지 않았다는 피드백이 전달되지 않은 것도 문제를 키울 듯 했습니다.


제가 우선 내린 결론은 사용 전력치가 큰 제품에는 물려서 쓰지 말자(헤어드라이기등) 입니다.

아무래도 릴레이 고장 원인은 거기서 비롯되는게 큰 것 같았습니다.

 

 

 

스마트 플러그인 고장 관련 글들...

 

 

 


 

 

 

 

 

MAX7219 는 8*8 LED로 구성된 매트릭스 표시 드라이버입니다. 

라즈베리파이와 SPI통신을 통해 제어가 가능합니다.


가격은 8천원 정도 하는데, 알리 같은데서 사면 더 저렴하게 구할 수 있습니다. 대신 오래 기다려야합니다..

 

 

 



디지털 표시기를 라즈베리파이와 연동하기 위해 기본적인 셋업을 해보았습니다.

 

우선 라즈베리파이와 MAX7219 핀은 아래 처럼 연결합니다.

 

 

 


그리고 라이브러리 설정을 합니다.

 

Python코드로 Luma.LED_Matrix를 이용하면 쉽게 설정이 가능합니다.


기본적인 설정에 관한 설명은 아래 링크에 잘 되어있었으나 실제 설정 중에 몇가지 문제가 발생하여 정리해두고자 합니다.


https://luma-led-matrix.readthedocs.io/en/latest/install.html


 

 

처음 라즈베리파이를 설정하고 난뒤 상태의 기준으로 했으며, Python3명령어로 셋팅을 했습니다.



우선 SPI 설정을 해두어야합니다.

아래 명령어로 spi 설정이 enable되었는지 확인합니다.

아무런 결과가 없다면 설정이 안된 것입니다.

 

 


 

아래 명령어로 라즈베리파이 설정화면으로 가서 5 Interfacing Options를 선택하고 P4 SPI를 Enable합니다.

sudo rasp-config

 

 

 

 

 


그리고 파이를 껐다가 켭니다!

 

 

 

이제 다시 lsmod | grep -i spi 해보면 뭔가 나오는 것을 확인 할 수 있습니다..

 




 


 

그리고... 필요한 라이브러리들을 설치합니다.



$sudo apt-get install build-essential python3-dev python3-pip libfreetype6-dev libjpeg-dev libopenjp2-7 libtiff5 git

공식페이지에서 빠져있는 libopenjp2-7 libtiff5 git 도 추가로 설치합니다. 안그러면 오류납니다...




그런 다음 파이썬 이미지라이브러리를 설치합니다. 역시 안그러면 오류납니다...


$pip3 install pillow





이후, luma.led_matrix 라이브러리를 설치합니다.


  $sudo -H pip3 install --upgrade luma.led_matrix

 

 

 

이제 라이브러리 설치는 모두 끝났습니다.

 

샘플 코드를 받아서 한번 실행 보도록 하겠습니다.

 

하면 luma.lend_matrix가 생기며, 그곳에 소스가 복사됩니다.

그리고 복사한 디렉토리내 examples에 샘플 소스가 있습니다.

 

python3 matrix_demo.py -n 4 --block-orientation=90

-n은 꽂혀진 매트릭스 판때기의 갯수고, --block-orientation은 글자 방향입니다.

 

정리해보니 간단한데.. 이번에도 삽질을 많이 했었네요.

 

 

 

유료툴이긴 하지만 꽤 유용해서 포스팅을 남깁니다.


윈도우에서 리눅스 파일 시스템을 읽고 쓰기를 할 수 있는 툴이 있었네요.


https://www.paragon-software.com/business/extfs-for-windows/


라즈베리파이에 이미지를 굽고, sshd가 바로 구동 될 수 있도록 하기 위해서는


/etc/rc.local 파일을 수정해야합니다.


systemctl start ssh (추가)


그런데 이 작업은 라즈베리파이에 키보드를 연결하고, 모니터 연결해서 직접 수정하는 수밖에 없는데요, 이미지를 바로 수정하는 방법을 없을까 찾아보다가 알게된 툴입니다.



가격은 2만1천원입니다만,


설치시 트라이얼로 10일간 임시 사용을 할 수 있습니다.








이렇게 탐색기로 바로 접근이 가능합니다. (수정도 가능하구요. ext2/ext3/ext4 가 가능하다고 하네요.)



좀 더 찾아보니, HFS+ 파일시스템을 윈도우에서, macOS에서 NTFS를 사용할 수 있는 제품도 있고, 이 기능들을 통합한 제품도 판매를 하는 군요.


이름하여, 교차 플랫폼 팩,

https://www.paragon-software.com/ko/home/file-system-link-suite/



참 재미있고도 유용한 툴입니다.




icbanq에서 3주전에 주문했으나, 비슷한 다른 제품을 받고 교환 받는데 3주나 걸려서 주말에 만져보게되었습니다.

(재고가 없어 해외로 재신청해서 받는데 꽤나 올래걸렸군요.)

 

 

esp8266 은 마이크로 컨트롤러와 wifi가 같이 결합된 칩으로, 라즈베리파이보다 전력소모가 작아, 배터리로 동작하기가 유용하다는 장점이 있죠.

 

개발 방식은  C를 이용하거나, (펌웨어를 다시 올리는 방식..), 파이썬, 루아, 자바스크립트등으로 인터프리터 방식으로 동작하는 것도 가능했습니다.

그래서 제일 괜찮아 보이는 방식인 파이썬을 이용하게 되었습니다.

 

인터넷을 검색하니, 나온지 꽤 시간이 지난 칩이고 해서 자료가 많았습니다.

기본적으로는 드라이버 설치하고 연결해서, 플래시 롬 내용을 지우고, micro python으로 펌웨어로 다시 설치하고,.. 여기까지가 기본이었고.

그 다음부터는 개발할 python스크립트를 개발해서 올리면 되더군요.

 

 

우선 테스트 샘플 파일로 웹서버를 구동해보았습니다.

 

 

잘 되는군요!

 

 

* 개발 환경 구축 : https://developer.ibm.com/kr/cloud/2018/01/06/esp8266-iot-micropython-start/

* CP210x USB Driver : https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers

* mycro python docs : https://docs.micropython.org/en/latest/esp8266/tutorial/intro.html

* mycropython esp8266 firmware : http://micropython.org/download#esp8266

* esplorer download : https://esp8266.ru/esplorer/#download

* 테스트 샘플 파일 : https://www.pi4iot.com/doku.php?id=sbc:esp8266

* Azure IOT 와 esp8266 https://docs.microsoft.com/ko-kr/azure/iot-hub/iot-hub-arduino-huzzah-esp8266-get-started

패턴 만드는 프로그램하나 만들어볼까 하다가..

누군가 잘 만들어놨겠지..하면서 찾아보니.. 역시나 너무나 잘 만들어놨네요


일단, 여기 잘 정리가 되어있고...

https://www.whoishostingthis.com/resources/pattern-generators/





위 사이트 중 제일 맘에 들었던 곳 3군데만 올리겠습니다. (다른데도 괜찮은데 많네요.)


1. http://qrohlf.com/trianglify/

아.제가 만들려고 했던 딱 그 기능 ㅠㅠ 이런 패턴을 만들어줍니다.




2. http://btmills.github.io/geopattern/

타이핑을 하면, 그 글자에 맞는 패턴을 랜덤으로 생성해줍니다. (일종의 hash값으로 만드는...듯?)

같은 글자는 같은 패턴으로 만들어주므로, 기억하기도 좋습니다.




3. http://alssndro.github.io/trianglify-background-generator/

1번하고 유사한데, 역시나 제가 찾던 모델이어서.. 또 올립니다.




무시무시한게 소스까지 다 올려놨습니다.ㅠㅠb

+ Recent posts