    001/*
    002 * Copyright (c) 2009 The openGion Project.
    003 *
    004 * Licensed under the Apache License, Version 2.0 (the "License");
    005 * you may not use this file except in compliance with the License.
    006 * You may obtain a copy of the License at
    007 *
    008 *     http://www.apache.org/licenses/LICENSE-2.0
    009 *
    010 * Unless required by applicable law or agreed to in writing, software
    011 * distributed under the License is distributed on an "AS IS" BASIS,
    012 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
    013 * either express or implied. See the License for the specific language
    014 * governing permissions and limitations under the License.
    015 */
    016package org.opengion.plugin.column;
    017
    018import org.opengion.hayabusa.db.AbstractEditor;
    019import org.opengion.hayabusa.db.CellEditor;
    020import org.opengion.hayabusa.db.DBColumn;
    021import org.opengion.fukurou.util.XHTMLTag;
    022import org.opengion.hayabusa.common.HybsSystem;
    023import org.opengion.fukurou.util.Attributes;
    024import org.opengion.fukurou.util.StringUtil;
    025import org.opengion.fukurou.util.TagBuffer;
    026
    027/**
    028 * OCR2 エディターは、tesseract.js を利用した、カメラ映像で取り込んだvideoを
    029 * canvasにｷｬﾌﾟﾁｬしてから、文字に変換して テキストエリアに書き出すクラスです。
    030 *
    031 * 基本的な構造は、カメラ映像描画開始ボタン、静止画キャプチャボタン、映像表示領域(video)、
    032 * 静止画描画領域(canvas)、進捗(progressbar)、textarea で構成されます。
    033 * 映像表示領域(video)でｷｬﾌﾟﾁｬすると、静止画を同じ場所に上書きします。もう一度押すと再度映像に切り替わります。
    034 * textarea の name 以外は、固定です。よって、各ページに、1つしか設定できません。
    035 *
    036 *    &lt;button type='button' id='vidStart' onClick='videoStart()'&gt;Video Start&lt;/button&gt;
    037 *    &lt;button type='button' id='capStart' onClick='capture()'&gt;Capture&lt;/button&gt;&lt;br /&gt;
    038 *    &lt;div id='videotop' style='display:flex;' &gt;
    039 *        &lt;video id='player' autoplay style='background-color: black;position: absolute;z-index: 1;'&gt;&lt;/video&gt;
    040 *        &lt;canvas id='snapshot' style='visibility:hidden;z-index: 2; '&gt;&lt;/canvas&gt;
    041 *    &lt;/div&gt;
    042 *    &lt;progress id='progressbar' min='0' max='1' value='0' &gt; &lt;/progress&gt;&lt;br /&gt;
    043 *    &lt;textarea name='outdata' id='outdata' rows='10'cols='80'&gt; &lt;/textarea&gt;
    044 *
    045 * script に CDNサービス を使うと、無線環境(iPad等)ではものすごく遅くなったため、ローカルに配置することにします。
    046 * &lt;script src="https://unpkg.com/tesseract.js"&gt;&lt;!-- --&gt;&lt;/script&gt;
    047 *
    048 * script は、tesseract.min.js を使います。現在、1画面1つしかカメラは使えません。
    049 * これらは、使用する画面に、組み込んでください。
    050 * &lt;script src="{&#064;SYS.JSP}/option/tesseract.min.js"&gt;&lt;!-- --&gt;&lt;/script&gt;
    051 * &lt;script src="{&#064;SYS.JSP}/option/videocamera.js"&gt;&lt;!-- --&gt;&lt;/script&gt;
    052 *
    053 * を使用するページに設定します。
    054 *
    055 * @og.rev 7.4.2.1 (2021/05/21) 新規作成
    056 * @og.group データ編集
    057 *
    058 * @version  7.4
    059 * @author   Kazuhiko Hasegawa
    060 * @since    JDK11.0,
    061 */
    062public class Editor_OCR2 extends AbstractEditor {
    063        /** このプログラムのVERSION文字列を設定します。   {@value} */
    064        private static final String VERSION = "7.4.2.1 (2021/05/21)" ;
    065
    066//      // 7.4.2.2 (2021/05/28) ｼｽﾃﾑ定数のJSPを使用します。(※ SYS.JSP + SYS.IMAGE_DIR)
    067//      private static final String JSP_OPT =  HybsSystem.sys( "JSP" ) + "/option/" ;
    068
    069//      private static final String JS_SRC = "<script src='" + JSP_OPT + "tesseract.min.js' ><!-- --></script>"
    070//                                                              + CR +   "<script src='" + JSP_OPT + "videocamera.js' ><!-- --></script>" ;
    071
    072        private static final String BASE_HTML =
    073                                                                        "<button type='button' id='vidStart' onClick='videoStart()'>Video Start</button>"
    074                                                        + CR +  "<button type='button' id='capStart' onClick='capture()'>Capture</button><br />"
    075                                                        + CR +  "<div id='videotop' style='display:flex;' >"
    076                                                        + CR +  "  <video id='player' autoplay style='background-color: black;position: absolute;z-index: 1;'></video>"
    077                                                        + CR +  "  <canvas id='snapshot' style='visibility:hidden;z-index: 2; '></canvas>"
    078                                                        + CR +  "</div>"
    079                                                        + CR +  "<progress id='progressbar' min='0' max='1' value='0' > </progress><br />" ;
    080
    081        /** 列1 */ protected  String     cols1   ;
    082        /** 列2 */ protected  String     cols2   ;
    083        /** 行1 */ protected  String     rows1   ;
    084        /** 行2 */ protected  String     rows2   ;
    085
    086        /**
    087         * デフォルトコンストラクター。
    088         * このコンストラクターで、基本オブジェクトを作成します。
    089         *
    090         * @og.rev 7.4.2.1 (2021/05/21) 新規作成
    091         *
    092         */
    093        public Editor_OCR2() { super(); }               // これも、自動的に呼ばれるが、空のメソッドを作成すると警告されるので、明示的にしておきます。
    094
    095        /**
    096         * コンストラクター。
    097         *
    098         * @og.rev 7.4.2.1 (2021/05/21) 新規作成
    099         *
    100         * @param       clm     DBColumnオブジェクト
    101         */
    102        protected Editor_OCR2( final DBColumn clm ) {
    103                super( clm );
    104                final String  disabled = clm.isWritable() ? null : "disabled" ;
    105
    106                final int r1 = clm.getTotalSize()/Integer.parseInt(size1) + 1;
    107                rows1 = String.valueOf( r1 );
    108
    109                final int r2 = clm.getTotalSize()/Integer.parseInt(size2) + 1;
    110                rows2 = String.valueOf( r2 );
    111
    112                // size に、"rows,cols" を指定できるように変更
    113                final String param = StringUtil.nval( clm.getEditorParam(),clm.getViewLength() );
    114                if( param != null && param.length() != 0 ) {
    115                        final int st = param.indexOf( ',' );
    116                        if( st > 0 ) {
    117                                rows1 = param.substring( 0,st );
    118                                rows2 = rows1 ;
    119                                cols1 = param.substring( st+1 );
    120                                cols2 = cols1;
    121                        }
    122                }
    123
    124                // size1,size2 を使わずに、cols1,cols2 を使用。
    125                if( cols1 == null || cols2 == null ) {
    126                        cols1   = size1  ;
    127                        cols2   = size2  ;
    128                }
    129
    130                // Attributesの連結記述
    131                attributes = new Attributes()
    132                                        .set( "disabled"        , disabled )
    133                                        .set( clm.getEditorAttributes() )                               // #addAttributes( Attributes ) の代替え
    134                                        .add( "class"           , clm.getDbType() );
    135
    136                tagBuffer.add( XHTMLTag.textareaAttri( attributes ) );
    137        }
    138
    139        /**
    140         * 各オブジェクトから自分のインスタンスを返します。
    141         * 自分自身をキャッシュするのか、新たに作成するのかは、各サブクラスの実装に
    142         * まかされます。
    143         *
    144         * @og.rev 7.4.2.1 (2021/05/21) 新規作成
    145         *
    146         * @param       clm     DBColumnオブジェクト
    147         *
    148         * @return      CellEditorオブジェクト
    149         * @og.rtnNotNull
    150         */
    151        public CellEditor newInstance( final DBColumn clm ) {
    152                return new Editor_OCR2( clm );
    153        }
    154
    155        /**
    156         * データの編集用文字列を返します。
    157         *
    158         * @og.rev 7.4.2.1 (2021/05/21) 新規作成
    159         *
    160         * @param   value 入力値
    161         *
    162         * @return  データの編集用文字列
    163         * @og.rtnNotNull
    164         */
    165        @Override
    166        public String getValue( final String value ) {
    167                // TagBufferの連結記述
    168                return BASE_HTML
    169                                +       new TagBuffer( "textarea" )
    170                                                .add( "name"    , name )
    171                                                .add( "id"              , "outdata" )                           // ID 固定です。
    172                                                .add( "cols"    , cols2 )
    173                                                .add( "rows"    , rows2 )
    174                                                .add( tagBuffer.makeTag() )
    175                                                .addBody( value )
    176                                                .makeTag();
    177        }
    178
    179        /**
    180         * name属性を変えた、データ表示/編集用のHTML文字列を作成します。
    181         * テーブル上の name に 行番号を付加して、名前_行番号 で登録するキーを作成し、
    182         * リクエスト情報を１つ毎のフィールドで処理できます。
    183         *
    184         * @og.rev 7.4.2.1 (2021/05/21) 新規作成
    185         *
    186         * @param   row   行番号
    187         * @param   value 入力値
    188         *
    189         * @return  データ表示/編集用の文字列
    190         * @og.rtnNotNull
    191         */
    192        @Override
    193        public String getValue( final int row,final String value ) {
    194                final String newName = name + HybsSystem.JOINT_STRING + row;
    195
    196                // TagBufferの連結記述
    197                return BASE_HTML
    198                                +       new TagBuffer( "textarea" )
    199                                                .add( "name"    , newName )
    200                                                .add( "id"              , "outdata" )                           // ID 固定です。
    201                                                .add( "cols"    , cols2 )
    202                                                .add( "rows"    , rows2 )
    203                                                .add( tagBuffer.makeTag() )
    204                                                .addBody( value )
    205                                                .makeTag( row,value );
    206        }
    207}