うつ病記録アプリを作ってみる【5回目】

2023年2月25日 09:06

#うつ病 #鬱病 #HTML #javascript #WEBアプリ #うつ病記録アプリ

前回はこちらから

クリック関数を作っていきます

まずはクリックイベントを検出するために

    //*****クリック関数*****
    var clickSvg = function(){
        var svg = document.querySelector('svg');
        svg.addEventListener("click",function(e){
            console.log("click")
        })
    }

クリックするとconsole出力されます

クリックした際のSVG上の座標を取得する

下記を参考に作成しました。

先ほど作ったクリック変数を下記の様に変更します

    //*****クリック関数*****
    var clickSvg = function(){
        var svg = document.querySelector('svg');
        svg.addEventListener("click",function(e){
            // *** 追加 ***
            
            //***クリック対象(svg)の位置情報取得***
            var rect = e.target.getBoundingClientRect();

            //***ブラウザ上での座標を求める***
            var    viewX = e.clientX - rect.left,
                   viewY = e.clientY - rect.top;
            
            // 表示サイズとsvg比率を求める(svg座標に変換するため)
            // svgが画面サイズ、親サイズの影響受ける場合は必須
            var    scaleWidth =  svg.clientWidth / svg.width.baseVal.value,
                   scaleHeight =  svg.clientHeight / svg.height.baseVal.value;

            // ブラウザ上でのクリック座標をキャンバス上に変換
            var    svgX = Math.floor( viewX / scaleWidth ),
                   svgY = Math.floor( viewY / scaleHeight );

            console.log(svgX,svgY)
        })
    }

クリックすると下記の様にsvg上の座標を出力できるように

そもそも社会行動リズム表って何？

参考ですが、、何作ってるの？

クリックしたらどうしたいの？

簡単に整理

クリック範囲

赤枠内をクリック有効とします

下記変数を追加します
unit_minute:15分単位
unit_minute_num:4(1時間を4分割する)
unit_minute_px:6(15分をpxに換算する。切り捨て)

    const unit_minute = 15
    const unit_minute_num = 60/unit_minute   //4
    const unit_minute_px = Math.floor(stepVertical / unit_minute_num) //6

下記の様に制限をかけます

    //*****クリック関数*****
    var clickSvg = function(){
        var svg = document.querySelector('svg');
        svg.addEventListener("click",function(e){
            //***クリック対象(svg)の位置情報取得***
            var rect = e.target.getBoundingClientRect();

            //***ブラウザ上での座標を求める***
            var    viewX = e.clientX - rect.left,
                   viewY = e.clientY - rect.top;
            
            // 表示サイズとsvg比率を求める(svg座標に変換するため)
            // svgが画面サイズ、親サイズの影響受ける場合は必須
            var    scaleWidth =  svg.clientWidth / svg.width.baseVal.value,
                   scaleHeight =  svg.clientHeight / svg.height.baseVal.value;

            // ブラウザ上でのクリック座標をキャンバス上に変換
            var    svgX = Math.floor( viewX / scaleWidth ),
                   svgY = Math.floor( viewY / scaleHeight );

            // *** 追加 ***
            //***クリック範囲を1~31日,0~23:45に限定***
            //xの下限は範囲が狭いことから枠からちょっとはみ出す
            if(svgX < (statDayXPos - unit_minute_px*0.5) || endXPos <= svgX || svgY < startYPos || endYPos < svgY){
                return
            }

            console.log(svgX,svgY)
        })
    }

クリック位置を日、時間、分へ

先ほど算出したsvgX,svgYを換算します

            //***クリック位置を日に換算***
            //100 =< x && x < 125 :1日 
            //125 =< x && x < 150 :2日
            //150 =< x && x < 175 :3日
            //175 =< x && x < 200 :4日
            var click_day = Math.floor((svgY - startYPos)/stepHorizontal) + 1

            //***クリック位置を時間に換算(0~23:45)***
            // 時間の換算
            // 0～24:0時    ⇒0~21
            // 25～49:1時   ⇒22~46
            // 50～74:2時   ⇒47~71
            // 75～99:3時   ⇒74~96
            
            var click_hour = Math.floor((svgX - statDayXPos + unit_minute_px*0.5)/stepVertical)
            
            // これはなくてもよい
            if(click_hour < 0){
                click_hour = 0
            }

            // 計算上右端ギリギリが24時になるので
            if(click_hour > (stepNumVertical -1)){
                click_hour = stepNumVertical -1 
            }

            //***クリック位置を分に換算(0,15,30,45)***
            //0~5:0分       ⇒22~2   
            //6~11:15分     ⇒3~8    
            //12~17:30分    ⇒9~15   
            //18~24:45分    ⇒16~21  

            var minute_px = svgX - statDayXPos - click_hour * stepVertical

            //23時代の場合は22 < minute_px でも45分にする
            if(unit_minute_px * 0.5 <= minute_px && minute_px < unit_minute_px*1.5){                        //3<= <9
                click_minute = unit_minute  
            }else if(unit_minute_px*1.5 <= minute_px && minute_px < unit_minute_px*2.5){                    //9<= <15
                click_minute = unit_minute*2
            }else if((unit_minute_px*1.5 <= minute_px && minute_px < (stepVertical - unit_minute_px * 0.5)) || 
                      unit_minute_px*1.5 <= minute_px && 22 < click_hour){                                  //0~22時 15<= <22 23時 15<=
                click_minute = unit_minute*3
            }else{
                // 22 <= minute_px || minute_px < 3
                click_minute = 0
            }

            console.log(click_day,click_hour,click_minute)

クリックした結果