nguyenhanhdk / 3DHOUSINGCAD

3dhouse.html 19.2 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 
<!--
  NOTES:
  1. All tokens are represented by '$' sign in the template.
  2. You can write your code only wherever mentioned.
  3. All occurrences of existing tokens will be replaced by their appropriate values.
  4. Blank lines will be removed automatically.
  5. Remove unnecessary comments before creating your template.
-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="authoring-tool" content="Adobe_Animate_CC">
    <title>3dhouse</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="js/constant.js"></script>
    <script src="js/balcony.js"></script>
    <script src="3dhouse.js"></script>
    <script src="js/homepage.js"></script>
    <script src="js/memory.js"></script>
    <script src="js/pillars.js"></script>
    <script src="js/scaleShape.js"></script>
    <script src="js/svgObject.js"></script>
    <script src="js/drapObject.js"></script>
    <script src="js/roof.js"></script>
    <script src="js/estimate.js"></script>
    <script src="js/dialog.js"></script>
    <script>
        var canvas, stage, exportRoot, widthFloor, heightFloor;
        var modal;
        function init() {
            // show modal setting screen
            modal = document.getElementById('myModal');
            modal.style.display = "block";
            
            createWallOption();

            // get canvas
            canvas = document.getElementById("canvas");

            // click button setup to setting home screen
            document.getElementById('setup').onclick = function () {
                onDisplayScreen(canvas, modal);                
                
                setTimeout(function(){
                	alert(guideTextList[transitionState]);
                }, 200);
            };
            arraySVGObject = createArraySVGObject();


        }
        function createWallOption()
        {
        	var myDiv = document.getElementById("wall-select");

			//Create and append select list
			var selectList = document.createElement("select");
			selectList.id = "wall_option";
			myDiv.appendChild(selectList);

			//Create and append the options
			for (var i = 0; i < wallColor.length; i++) {
			    var option = document.createElement("option");
			    option.value = wallColor[i][0];
			    option.text = wallColor[i][1];
			    selectList.appendChild(option);
			}
        }
        
        function handleFiles(files){
        	var file = files[0];

			var reader = new FileReader();
			reader.onload = function(progressEvent){
				var allTextLines = this.result.split(/\r\n|\n/);
				initObject = [];
				for (var i=0; i<allTextLines.length; i++) {
				    var data = allTextLines[i].split(',');
				        var tarr = [];
				        for (var j=0; j<data.length; j++) {
				            tarr.push(data[j]);
				        }
				        initObject.push(tarr);
						//console.log(tarr);
				}
				
			};
			reader.readAsText(file);
        }
        $( function() {
            $("#txtRequestDate").datepicker();
        } );
        /* Japanese initialisation for the jQuery UI date picker plugin. */
        /* Written by Kentaro SATO (kentaro@ranvis.com). */
        jQuery(function($){
            $.datepicker.regional['ja'] = {
                closeText: '閉じる',
                prevText: '<前',
                nextText: '次>',
                currentText: '今日',
                monthNames: ['1月','2月','3月','4月','5月','6月',
                '7月','8月','9月','10月','11月','12月'],
                monthNamesShort: ['1月','2月','3月','4月','5月','6月',
                '7月','8月','9月','10月','11月','12月'],
                dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
                dayNamesShort: ['日','月','火','水','木','金','土'],
                dayNamesMin: ['日','月','火','水','木','金','土'],
                weekHeader: '週',
                dateFormat: 'yy/mm/dd',
                firstDay: 0,
                isRTL: false,
                showMonthAfterYear: true,
                yearSuffix: '年'};
            $.datepicker.setDefaults($.datepicker.regional['ja']);

            $("#txtRequestDate").datepicker( "setDate", 10);
        });
    </script>
    <!-- write your code here -->
</head>


<body onload="init();" style="margin:0px;">
<div id="canvas3d">
    <script src="js/threejs/three.min.js"></script>
    <script src="js/view3d.js"></script>
    <script src="js/threejs/renderers/CanvasRenderer.js"></script>
    <script src="js/threejs/renderers/Projector.js"></script>
    <script src="js/threejs/THREEx.js"></script>
    <script src="js/threejs/THREEx_002.js"></script>
    <script src="js/threejs/THREEx_003.js"></script>
    <script src="js/threejs/THREEx_003.js"></script>
    <script src="js/threejs/controls/OrbitControls.js"></script>
    <script src="js/threejs/Detector.js"></script>
    <script src="js/threejs/csg.js"></script>
    <script src="js/threejs/ThreeCSG.js"></script>


</div>
<div id="view2d" onclick="view2d()" style="position: fixed;top:20px;left:20px;display: none">
    <button>2Dに戻る</button>
</div>

<div id="inside" onclick="view3d(true)" style="position: fixed;top:20px;left:150px;display: none">
    <!--<button>Inside House</button>-->
</div>
<div id="outside" onclick="view3d(false)" style="position: fixed;top:20px;left:300px;display: none">
    <!--<button>Outsite House</button>-->
</div>

<div id="has-roof" onclick="hasRoof()" style="position: fixed;top:20px;left:450px;display: none">
    <button>屋根をつける</button>
</div>
<div id="no-roof" onclick="noRoof()" style="position: fixed;top:20px;left:450px;display: none">
    <button>屋根を取る</button>
</div>
<div id = "wallColor" style="position: fixed;top:20px;left:550px;display: none">
    <label>壁色</label>
</div>
<div id="wall-select" onchange="view3d(false)" style="position: fixed;top:20px;left:600px;display: none" ></div>

<div id="viewHandrail" onclick="viewHandrailEvent()" style="position: fixed;top:20px;left:750px;display: none">
    <button>手すり</button>
</div>

<canvas id="canvas" width="1280" height="960"
        style="display: none; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id='_preload_div_'
     style='display: inline-block; height:960px; width: 1280px; vertical-align=middle;position:absolute;text-align: center;'>
    <span style='display: inline-block; height: 100%; vertical-align: middle;'></span> <img src=images/_preloader.gif
                                                                                            style='vertical-align: middle; max-height: 100%'/>
</div>
<div align="center">
    <canvas id="canvasInit" width="1280" height="960"
            style="display: none; background-color:rgba(255, 255, 255, 1.00)"></canvas>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-body">
            <br/>
            <div align="center">
                <label>親和木材工業株式会社</label>
            </div>
            <br/>
            <form>
                <label>部屋の大きさ</label><br/>
                <div class="roof">
            <span style="width:30%;display:block;float: left;padding-right: 30px;" align="right">
              <label>横</label>
            </span>
                    <select class="shapeWidth">
                        <option value="910">910mm</option>
                        <option value="1365">1365mm</option>
                        <option value="1820">1820mm</option>
                        <option value="2275">2275mm</option>
                        <option value="2730">2730mm</option>
                        <option value="3185">3185mm</option>
                        <option value="3640">3640mm</option>
                        <option value="4095">4095mm</option>
                        <option value="4550">4550mm</option>
                        <option value="5005">5005mm</option>
                        <option value="5460">5460mm</option>
                        <option value="5915">5915mm</option>
                        <option value="6370">6370mm</option>
                        <option value="6825">6825mm</option>
                        <option value="7280">7280mm</option>
                    </select>
                </div>
                <div class="roof">
            <span style="display:block;float: left;padding-right: 30px; width: 30%;" align="right">
              <label>縦</label>
            </span>
                    <select class="shapeHeight">
                        <option value="910">910mm</option>
                        <option value="1365">1365mm</option>
                        <option value="1820">1820mm</option>
                        <option value="2275">2275mm</option>
                        <option value="2730">2730mm</option>
                        <option value="3185">3185mm</option>
                        <option value="3640">3640mm</option>
                        <option value="4095">4095mm</option>
                        <option value="4550">4550mm</option>
                        <option value="5005">5005mm</option>
                        <option value="5460">5460mm</option>
                        <option value="5915">5915mm</option>
                        <option value="6370">6370mm</option>
                        <option value="6825">6825mm</option>
                        <option value="7280">7280mm</option>
                    </select>
                </div>
                <br/>
                <label>屋根タイプ</label><br/>
                <div style="margin-left: 35px">
            <span style="width:50%;display:block;float: left">
              <input type="radio" id="noRoof" name="roof" value="0" checked>
              <label for="noRoof"> 切妻</label>
            </span>
                    <input type="radio" name="roof" value="1" id="yesRoof"><label for="yesRoof"> 片流れ</label><br>
                </div>
                <label>ウッドデッキ</label><br/>
                <div style="margin-left: 35px">
                    <input type="radio" name="wooddeck" id="yesWood" value="0" checked> <label for="yesWood">
                    あり（屋根あり）</label><br/>
                    <input type="radio" name="wooddeck" id="noWood" value="1"> <label for="noWood">
                    あり（屋根なし）</label><br/>
                    <input type="radio" name="wooddeck" id="noHaveWoodDeck" value="2"> <label for="noHaveWoodDeck">
                    なし</label><br/>
                </div>
            </form>
            <br/>
            <div align="center">
                <button id="setup">設定する</button>
            </div>
            <div id="fileLoad"align="center">
			    <div>
			        Load data from file : 
			        <input type="file" id="csvFileInput" onchange="handleFiles(this.files)" accept=".csv">
			    </div>
			    <pre id="fileDisplayArea"><pre>

			</div>

        </div>
    </div>
</div>

</div>


<!-- <div id="esitmateBack" onclick="view2dFromEstimate()" style="position: fixed;top:20px;left:20px;display: none">
    <button>Back</button>
</div>
<div id="esitmateSend" style="position: fixed;top:20px;left:150px;display: none">

    <form action="sendEstimateEmail.php" method="post" id="EsForm">
    <label>Send this estimate to: </label>
    <input type="text" name="reEmail" value="etuannv@gmail.com">
    <input type="button" onclick="requestSendEstimate()" name="btnSendEmail" value="Send">
    <input type="hidden" name="htmldata" id="htlmdata" value="">
    </form>
</div> -->


<div id = "es-container" style="display:none; width:1170px; margin: 0 auto; text-align:center; font-size: 11px; font-family: ms-gothic, sans-serif;">
    <div id ="navigator" style="margin-bottom:15px;">
        
        <input type="button" onclick="view2dFromEstimate()" value="Back">
        <label>Send this estimate to: </label>
        <input type="text" name="reEmail" id="reEmail" placeholder="Enter your email address">
        <input type="button" onclick="requestSendEstimate()" name="btnSendEmail" value="Send">
        <label id="mstatus"></label>
        <!-- for test add form to submit data -->
        <!-- <form action="sendEstimateEmail.php" method="post" id="EsForm">
        <label>Send this estimate to: </label>
        <input type="text" name="reEmail" value="etuannv@gmail.com">
        <input type="button" onclick="requestSendEstimate()" name="btnSendEmail" value="Send">
        <input type="hidden" name="htmlData" id="htmlData" value="">
        </form> -->
    </div>
    <!-- estimate: width:1123 padding:10 Table with: 540-->
    <table id="estimate" style="margin:0 auto; border-collapse: collapse; font-family:ms-gothic, sans-serif; font-size: 9px;" >

    </table>
</div>

<div id="save-data-form" style="display:none;">
    <form action="downloadData.php" method="POST" target="_blank" id="formsave">
        <input type="hidden" name="data" id="list-data"/>
        <input type="submit" value="Submit">
    </form>
</div>




<!-- The Modal -->
<div id="saveModal" class="savemodal">

  <!-- Modal content -->
  <div class="savemodal-content">
    <img class="saveclose" src="images/close-button.png" />
<div id="saveModalBody">
<p style="margin-bottom:20px;font-weight:bold;font-size:150%; text-align:center;">正式見積依頼フォーム</p>

<p style="margin-bottom:20px; text-align:center;">描いた図面データを元に正式見積を依頼したい場合には、下記入力項目にご記入の上、【正式見積を弊社に依頼】ボタンを押してください。</p>

<form id="frmSendMailRequest" method="post" action="#">
    <input id="csv-data" name="csv-data" type="hidden">
    <table>
        <tbody>
            <tr>
                <th width="240" style="text-align: right">氏名 (*)</th>
                <td><input id="txtName" name="txtName" size="30" type="text">
                    <span class="hosoku">（全角/姓、名の間はスペースを入れてください）</span></td>
            </tr>
            <tr>
                <th style="text-align: right">メールアドレス (*)</th>
                <td><input id="txtEmail" name="txtEmail" size="50" type="text" style="ime-mode: disabled;">
                    <span class="hosoku">（必ずご入力ください）</span> 
                </td>
            </tr>
            <tr>
                <th style="text-align: right">配送先 (*)</th>
                <td>
                    <select id="optLocate" name="optLocate" style="margin-bottom:8px;" name="都道府県">
                        <option value="" selected="selected">◆都道府県を選択◆　 　 　 　 </option>
                        <option value="北海道">北海道</option>
                        <option value="青森県">青森県</option>
                        <option value="岩手県">岩手県</option>
                        <option value="宮城県">宮城県</option>
                        <option value="秋田県">秋田県</option>
                        <option value="山形県">山形県</option>
                        <option value="福島県">福島県</option>
                        <option value="茨城県">茨城県</option>
                        <option value="栃木県">栃木県</option>
                        <option value="群馬県">群馬県</option>
                        <option value="埼玉県">埼玉県</option>
                        <option value="千葉県">千葉県</option>
                        <option value="東京都">東京都</option>
                        <option value="神奈川県">神奈川県</option>
                        <option value="新潟県">新潟県</option>
                        <option value="富山県">富山県</option>
                        <option value="石川県">石川県</option>
                        <option value="福井県">福井県</option>
                        <option value="山梨県">山梨県</option>
                        <option value="長野県">長野県</option>
                        <option value="岐阜県">岐阜県</option>
                        <option value="静岡県">静岡県</option>
                        <option value="愛知県">愛知県</option>
                        <option value="三重県">三重県</option>
                        <option value="滋賀県">滋賀県</option>
                        <option value="京都府">京都府</option>
                        <option value="大阪府">大阪府</option>
                        <option value="兵庫県">兵庫県</option>
                        <option value="奈良県">奈良県</option>
                        <option value="和歌山県">和歌山県</option>
                        <option value="鳥取県">鳥取県</option>
                        <option value="島根県">島根県</option>
                        <option value="岡山県">岡山県</option>
                        <option value="広島県">広島県</option>
                        <option value="山口県">山口県</option>
                        <option value="徳島県">徳島県</option>
                        <option value="香川県">香川県</option>
                        <option value="愛媛県">愛媛県</option>
                        <option value="高知県">高知県</option>
                        <option value="福岡県">福岡県</option>
                        <option value="佐賀県">佐賀県</option>
                        <option value="長崎県">長崎県</option>
                        <option value="熊本県">熊本県</option>
                        <option value="大分県">大分県</option>
                        <option value="宮崎県">宮崎県</option>
                        <option value="鹿児島県">鹿児島県</option>
                        <option value="沖縄県">沖縄県</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th style="text-align: right">電話番号</th>
                <td><input id="txtMobile" name="txtMobile" size="30" type="text" style="ime-mode: disabled;"></td>
            </tr>
            <tr>
                <th style="text-align: right">住所 (*)</th>
                <td><input id="txtAddress" name="txtAddress" size="70" type="text"></td>
            </tr>
            <tr>
                <th style="text-align: right">希望納期 (*)</th>
                <td><input id="txtRequestDate"  name="txtRequestDate" size="30" type="text" />
                    <span class="hosoku">　例）2020年12月</span> </td>
            </tr>
            <tr>
                <th style="text-align: right">質問事項</th>
                <td><textarea id="txtNote"  name="txtNote" rows="7" cols="80" id="form_box_txt"></textarea></td>
            </tr>
        </tbody>
    </table>
    <p align="center">
        <input id="btnSendMailRequest" type="button" value="正式見積を弊社に依頼" /><label id="reqtatus"></label>
    </p>
</form>

</div>

  </div>

</div>











</body>
</html>