Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 108,380

HOME > PHP > PHP Forum > Detecting device orientation โดยใช้โทรศัพท์ที่มี Gyroscope แต่ดันไม่ทำงาน



 

Detecting device orientation โดยใช้โทรศัพท์ที่มี Gyroscope แต่ดันไม่ทำงาน

 



Topic : 133905



โพสกระทู้ ( 6 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook



โค้ดนี้ผมเอามาจากเว็บ https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation เซฟเป็น .php แล้วลงฐานข้อมูลของ Xampp (php 7.3.6) กับฐานข้อมูลของอาจารย์ที่มหาลัย (php 5.5.6) แล้วทดสอบด้วยโทรศัพท์ที่มี Gyroscope แต่ดันไม่ทำงานเหมือน https://mdn.mozillademos.org/en-US/docs/Web/API/Detecting_device_orientation$samples/Orientation_example?revision=1527467
(เทสด้วยโทรศัพท์ที่มีไจโรนะครับ)
เลยสังหรณ์ใจว่าอาจมีการติดตั้งอะไรเพิ่มเติมหรืออาจเกี่ยวข้องกับ Server ที่ทำให้ผลลัพธ์ออกมาไม่เหมือนในเว็บ
Code (PHP)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        
        
        <style type="text/css">
            .garden {
  position: relative;
  width : 200px;
  height: 200px;
  border: 5px solid #CCC;
  border-radius: 10px;
}

.ball {
  position: absolute;
  top   : 90px;
  left  : 90px;
  width : 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
}

        </style>
        
        <title>Detecting device orientation - Orientation_example - code sample</title>
    </head>
    <body>
        
            <div class="garden">
  <div class="ball"></div>
</div>

<pre class="output"></pre>

<script>
                var ball   = document.querySelector('.ball');
var garden = document.querySelector('.garden');
var output = document.querySelector('.output');

var maxX = garden.clientWidth  - ball.clientWidth;
var maxY = garden.clientHeight - ball.clientHeight;

function handleOrientation(event) {
  var x = event.beta;  // In degree in the range [-180,180]
  var y = event.gamma; // In degree in the range [-90,90]

  output.innerHTML  = "beta : " + x + "\n";
  output.innerHTML += "gamma: " + y + "\n";

  // Because we don't want to have the device upside down
  // We constrain the x value to the range [-90,90]
  if (x >  90) { x =  90};
  if (x < -90) { x = -90};

  // To make computation easier we shift the range of 
  // x and y to [0,180]
  x += 90;
  y += 90;

  // 10 is half the size of the ball
  // It center the positioning point to the center of the ball
  ball.style.top  = (maxX*x/180 - 10) + "px";
  ball.style.left = (maxY*y/180 - 10) + "px";
}

window.addEventListener('deviceorientation', handleOrientation);

            </script>
        
    </body>
</html>


ขอบคุณครับ



Tag : PHP, MySQL, HTML, CSS, Google Chrome, XAMPP









ประวัติการแก้ไข
2019-07-19 13:04:38
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2019-07-19 13:02:53 By : rukchatpoom View : 179 Reply : 2
 

 

No. 1



โพสกระทู้ ( 2,230 )
บทความ ( 5 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook Hi5 Blogger

ผลลอง copy code จากเว็บตัวอย่างมา แต่เป็น html ก็ทำงานปกตินะครับ

Code (PHP)
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Orientation example</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script
    type="text/javascript"
    src="/js/lib/dummy.js"
    
  ></script>

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">


  <style id="compiled-css" type="text/css">
      .garden {
  position: relative;
  width : 200px;
  height: 200px;
  border: 5px solid #CCC;
  border-radius: 10px;
}

.ball {
  position: absolute;
  top   : 90px;
  left  : 90px;
  width : 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
}

  </style>


  
</head>
<body>
    <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation -->

<div class="garden">
  <div class="ball"></div>
</div>

<pre class="output"></pre>


  <!-- TODO: Missing CoffeeScript 2 -->

  <script type="text/javascript">//<![CDATA[

    
var ball   = document.querySelector('.ball');
var garden = document.querySelector('.garden');
var output = document.querySelector('.output');

var maxX = garden.clientWidth  - ball.clientWidth;
var maxY = garden.clientHeight - ball.clientHeight;

function handleOrientation(event) {
  var x = event.beta;  // In degree in the range [-180,180]
  var y = event.gamma; // In degree in the range [-90,90]

  output.innerHTML  = "beta : " + x + "\n";
  output.innerHTML += "gamma: " + y + "\n";

  // Because we don't want to have the device upside down
  // We constrain the x value to the range [-90,90]
  if (x >  90) { x =  90};
  if (x < -90) { x = -90};

  // To make computation easier we shift the range of 
  // x and y to [0,180]
  x += 90;
  y += 90;

  // 10 is half the size of the ball
  // It center the positioning point to the center of the ball
  ball.style.top  = (maxX*x/180 - 10) + "px";
  ball.style.left = (maxY*y/180 - 10) + "px";
}

window.addEventListener('deviceorientation', handleOrientation);



  //]]></script>

  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: ""
      }], "*")
    }

    // always overwrite window.name, in case users try to set it manually
    window.name = "result"
  </script>
</body>
</html>


Service php บน Server ทำงานหรือเปล่าครับ ลองเช็คดูครับ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-07-19 16:02:50 By : Manussawin
 


 

No. 2



โพสกระทู้ ( 6 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 1 เขียนโดย : Manussawin เมื่อวันที่ 2019-07-19 16:02:50
รายละเอียดของการตอบ ::
อันนี้ไม่แน่ใจนะครับว่ามีเช็คยังไง แต่ทดลองใช้ไฟล์ php ที่เคยทำงานดูก็ปกติดีนะครับ ทั้ง insert into , LCS algorithm ก็น่าจะปกติแหละมั้ง (ฮา)
แล้วในส่วนขั้นตอนการทำ ผมเองก็รู้สึกไม่แน่ใจเหมือนกัน
1.ติดตั้ง XAMPP v3.2.4
2.Start apache , MySQL Module
3.เอาโค้ดยัดแล้วเซฟ
4.เปิดโทรศัพท์ เข้าเว็บ ipของตัวเอง/../../pinball.php และถึงแม้จะลอง .html ก็ไม่ทำงานครับ
5.ลองเอาโค้ดลงในตัว server ของอาจารย์ แล้วเปิดดูก็ไม่ทำงานเช่นกันครับ
ไม่ทราบว่าคุณใช้วิธีที่แตกต่างจากผมไหมครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2019-07-19 18:32:06 By : rukchatpoom
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : Detecting device orientation โดยใช้โทรศัพท์ที่มี Gyroscope แต่ดันไม่ทำงาน
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม , รับทำบัญชี , โรงงานผลิตครีม , สำนักงานบัญชี , รับจดทะเบียนบริษัท , Pangpond , รถมือสอง

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2020 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่