M5 페이퍼로 웹 사이트 표시(Chrome로 캡처 & ImageMagick 변환) 후 달력 제작

18937 단어 M5PaperM5stack
완성례(이런 걸 만들 수 있다)

M5 Stack 회사의 M5 Paper가 Wi-Fi에서 이미지를 얻고 표시하기 전에 대응을 끝냈다는 점이 대단합니다!
정기적인 클리어런스 종료 시 전력 소모가 거의 없고 내구성이 우수합니다.
···· 이렇게 되면 리눅스 호스트 측에서 웹 페이지의 이미지를 캡처하여 http로 제공하면
  • 디자인의 자유도 향상(인터넷 디자인을 잘하는 사람을 위한) 달력과 자유
  • 인테리어 사이트(스마트폰 PC에 접촉하지 않는 사람도 볼 수 있음)
  • 그럼?그렇게 생각했어!
    한 마디로 하면ImageMagick을 통해 앞면cheromeweb을 통해 포획된 이미지를 삐걱삐걱#M5Paper@M5Stack로 변환하여 정시 가동 시 와이파이를 통해 이미지를 추출하여 전원 오프가 될 때까지 표시합니다!그리고 웹 디자인의 세계입니다. Image Magick의 옵션에 고전을 했지만 대체로 이런 문법(글자수)https://t.co/QrT89yBCKp-RAWSEQ(촛불)(@RAWSEQ)pic.twitter.com/fLf8AEu3GT를 사용할 수 있습니다.

    호스트(Linux) 측면에서 수행


    google-chromeImageMagick는 각 패키지 관리자(yum, apt 등)에 설치(생략)


    Chrome 헤더 모드(명령행 모드)로 사이트 포획


    google-chrome --headless --screenshot https://example.com/ --window-size=960,540
    

    "p"httpd라는 파일이 생성되었으므로 ImageMagick에서 M5 Paper로 읽기 위해

    변환
    convert -rotate 90 \
            -quality 88 \
            -density 120 \
            -units PixelsPerInch \
            -sampling-factor 4:2:0 \
            -colorspace sRGB \
            -strip \
            -define colorspace:auto-grayscale=false \
            -type truecolor \
            screenshot.png screenshot.jpg
    

    시행 오류로 인해 필요하지 않은 옵션이 있습니다. 이 옵션은 문제가 없을 것입니다.


    • rotate 이미지 회전(90도)
    • quality 품질(89% 이하)
    • density units DPI 지정(120dpi)
    • sampling-factor 서브샘플링(4:2:0)
    • colorspace 색상 공간(sRGB)
    • strip의 다른 확장 정보는 방해가 되기 때문에 그림
    • 자동 추가된 그레이스케일이 호환되지 않으므로 OFF
    • 포맷 변환(pg=>jpg)

    (※ ImageMagick 버전에 따라 컬러 공간의 옵션이 역전될 수 있음(RGB<=>sRGB)

    출력된jpg 이미지를httpd 문서 경로에 설정하면 완성됩니다.(httpd 서비스가 시작되면 방화벽이나 포트를 열어 M5Paper가 볼 수 있도록 하십시오.)


    상기 명령을 screenshot.png 등에 등록하여 제때에 집행하면 됩니다.


    M5 Paper에서 하는 일.


    M5 Paper 측에 기록된 프로그램에서 Wi-Fi에 그림을 가져와 표시하는 샘플은 여기에 있습니다br/>
    SSID 및 암호, 이미지의 URL은 지정된 컨텐트를 지정하십시오.



    정기적으로 가져오면 cron 마지막으로 명령만 쓰기br/>
    그리기 전에 끝났기 때문에 shutdown 전에 2초 정도 지연M5.shutdown([終了後、再起動する秒数])p>

    (추기) 한 달 동안 깨달은 것을 활용하다


    • shutdown에서 다음 가동 예정(0초 후)을 설정하면 맥스에서는 3시간(10800) 정도다.
    • 3시간 간격으로 하루 8회 업데이트되며, 1개월 사용 후 무충전 배터리 잔량은 13% 감소한다.간단한 계산으로 4, 5개월을 유지할 수 있습니까?


    WEBページ側のデザイン


    다음 소스가 원형이라 별로 예쁘지 않아요...

    당신이 참고하고 싶은 요구를 했기 때문에 저는 대체로

    구매한 유료 라이선스 글꼴도 포함되어 있기 때문에 원본 복사 등의 참고 수준으로 이미지의 복사·2차 전용은 하지 마십시오b>



    절대 좌표를 지정하기 위해 간단하게 delay(2000); 사용br/>
    "글씨 더럽게 쓴다!"잘 알고 있습니다...


    APIロジック


    날씨와 트위터 트렌드 정보 등의 API 연결
    PHP를 통해 취득, 중간 파일 생성br/>
    취득 정시는 즉각이 아닌 크론에서 정시에 집행하도록 설정했다.LOLIPOP 등 임대 서버에서도 쉽게 사용할 수 있습니다.


    天気予報


    Dark Sky 활용필요한 주파수의 임계값을 초과하지 않으면 무료로 사용할 수 있는 무료 API.(뭐, 대체로 어디서나 이런 느낌인데...)March 15, 2021


    Rakten Rapid API는 언어에 맞는 코드를 출력하기 때문에 기본적으로 할 일이 없습니다br/>
    그냥 쓴 걸 뱉는 거지...


    <?php
    
    $curl = curl_init();
    
    curl_setopt_array($curl, [
        CURLOPT_URL => "https://dark-sky.p.rapidapi.com/【緯度】,【経度】?lang=en&units=auto",
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_FOLLOWLOCATION => true,
        CURLOPT_ENCODING => "",
        CURLOPT_MAXREDIRS => 10,
        CURLOPT_TIMEOUT => 30,
        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
        CURLOPT_CUSTOMREQUEST => "GET",
        CURLOPT_HTTPHEADER => [
            "x-rapidapi-host: dark-sky.p.rapidapi.com",
            "x-rapidapi-key: 【APIキー】"
        ],
    ]);
    
    $response = curl_exec($curl);
    $err = curl_error($curl);
    
    curl_close($curl);
    
    $fp = fopen('【出力jsonファイルのパス】', 'w');
    fwrite($fp, $response);
    fclose($fp);
    
    
    

    에서 사용하는 API는 "Forcast"로 위도 경도를 지정하면 해당 지점에서 1시간 간격으로 1일, 1일 간격으로 1주일의 일기예보 정보를 얻을 수 있습니다.br/>
    여기의 예는 하루 아침 7시에 한 번

    실행하는 것이다
    • 0시간 후(7시)
    • 5시간 후(12시)
    • 11시간 후(18시)

    의 기온, 강수 확률(precipProbability)을 얻어 표시br/>
    강수 확률은 연상이기 때문에 백분율로 전환(*100)br/>
    기온은 자동이어야 한다.(잊어버렸어. 설정이 있으면 못 맞춰...)


    일기표지에서currently의icon 가져오기br/>
    clear-day/clear-night/partly-cloudy-day/partly-cloudy-night/cloudy/rain/sleet/snow/wind/fog

    에 대한 문자열을 표시하고 패턴 이미지를 준비합니다.


    Twitter


    Rakuten Rapid API는 너무 편리해요. 트위터 API도 있는데 유행이 아닌 것 같아요.
    어쩔 수 없어요. API를 이용하고 있어요.br/>
    (이후에야 각 SNS의 모든 유행 트렌드를 얻을 수 있는 API가 있을 수 있음을 알아차렸다)

    ・・・정신차리세요Twitter API 연결 잘 봤습니다! 

    https://api.rakuten.net/darkskyapis/api/dark-sky

    API 토큰 클래스를 획득하는 방법을 알려주십시오.


    무엇을 사용하든 기본적인 PHP는 여기에 있습니다.(이 PHP 사용이 포함됩니다.)



    twitter.php(설정&공용 함수)

    <?php
    
    /**
     * twitter
     *
     * @param string $endpoint (スラッシュ以降のパス)
     * @param array $params_a (パラメータ(配列)
     * @return string (応答json)
     */
    function twitter($endpoint, $params_a) {
    
        /**********************
         設定
        **********************/
        $api_key = "【API Key】";
        $api_secret = "【API Secret】";
        $access_token = "【アクセストークン】";
        $access_token_secret = "【アクセストークンシークレット】";
    
        //エンドポイント
        $request_method = "GET";    //メソッド
        $request_url = "https://api.twitter.com/1.1/".$endpoint.".json";    //URL
    
        /**********************
         署名作成
        **********************/
        //OAuth1.0認証用のパラメータを連想配列で用意
        $params_b = array(
        "oauth_consumer_key" => $api_key,
        "oauth_token" => $access_token,
        "oauth_nonce" => microtime(),
        "oauth_signature_method" => "HMAC-SHA1",
        "oauth_timestamp" => time(),
        "oauth_version" => "1.0"
        );
    
        //キーを作成する
        $signature_key = rawurlencode($api_secret)."&".rawurlencode($access_token_secret);
    
        //オプション・パラメータ[$params_a]と認証用パラメータ[$params_b]を署名作成のため、合体させた[$params_c]を用意
        $params_c = array_merge($params_a,$params_b);
    
        //[$params_c]をアルファベット順に並び替える
        ksort($params_c);
    
        //配列[$params_c]を[キー=値&キー=値...]の文字列に変換
        $signature_params = str_replace(array("+","%7E"),array("%20","~"),http_build_query($params_c,"","&"));
    
        //リクエストメソッド、リクエストURL、パラメータを、URLエンコードしてから[&]で繋ぎ、データを作成する
        $signature_data = rawurlencode($request_method)."&".rawurlencode($request_url)."&".rawurlencode($signature_params);
    
        //キー[$signature_key]とデータ[$signature_data]をHMAC-SHA1方式のハッシュ値に変換し、base64エンコードして、署名を作成する
        $signature = base64_encode(hash_hmac("sha1",$signature_data,$signature_key,TRUE));
    
        /**********************
         GETリクエスト
        **********************/
        //[$params_c]に、作成した署名を加える
        $params_c["oauth_signature"] = $signature;
    
        //[$params_c]を[キー=値,キー=値,...]の文字列に変換する(ヘッダー用)
        $header_params = http_build_query($params_c,"",",");
    
        //[$params_a]を、リクエストURLの末尾に付けるクエリーに変換して付ける(GETの場合)
        //[例] ?screen_name=arayutw
        if($params_a && $request_method=="GET"){
        $request_url .= "?".http_build_query($params_a,"","&");
        }
    
        //TwitterにGETリクエストを送る [$json]にTwitterから返ってきたJSONが格納される
        $json = file_get_contents(
        $request_url,   //[第1引数:リクエストURL($request_url)]
        false,      //[第2引数:リクエストURLは相対パスか?(違うのでfalse)]
        stream_context_create(  //[第3引数:stream_context_create()でメソッドとヘッダーを指定]
            array(
                "http" => array(
                    "method" => $request_method, //リクエストメソッド
                    "header" => array(          //カスタムヘッダー
                    "Authorization: OAuth ".$header_params,
                    ),
                )
            )
        )
        );
    
        return $json;
    }
    
    


    그리고 트렌드를 가져와 파일을 출력하는 PHP

    호출

    trends.php

    <?php
    include_once 'twitter.php';
    $out = twitter('trends/place', array('id'=>'1110809'));
    $fp = fopen('【出力jsonファイルのパス】', 'w');
    fwrite($fp, $out);
    fclose($fp);
    


    대충 소개해 드렸는데, 바로 이런 느낌입니다.


    좋은 웹페이지 즐겨찾기