2020年9月21日月曜日 , 最終更新日：2020年09月23日

ESP32/arduino:WiFi接続時のスマホ画面とPC画面の切り替え

目的:

WiFi接続時、スマホからのアクセス画面をスマホ用にする。(スマホ対応)

背景:

WiFi接続時、スマホから接続した場合に ボタン間隔が狭い等、操作しにくい場合がある。
この為、PCからアクセスした場合とスマホからアクセスした場合で画面表示を変えて操作しやすくする。

方法:

HTML を レスポンシブデザインとして、ウィンドウ幅によりデザインを分ける。
  1. viewportを設定する。
    <head> ～ </head> 部分に、以下の様な metaタグ を記述する。
    1
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
  2. ウィンドウ幅に応じて styleタグ を分ける。
    以下の様に、styleタグを 分ける。
    <style media="screen and (min-width: 769px)">
    　....  (PC用 設定)
    </style>
    <style media="screen and (max-width:768px)">
    　....  (スマホ用 設定)
     </style>
  3. 必要に応じて、HTML を修正する。　
＊ ウィンドウ幅で切り替えているため、PC でも ブラウザの幅を狭めれば スマホ用表示になる。

 例：

「ESP32/arduino:LED調光_WEBからと外付けのボリュームからを切り替えて調光」
をスマホ対応にした 時の画面 と HTML を示す。(スケッチ、レスポンス用HTML は変更なし)
PC用 画面
スマホ用画面
*スマホ時は、全体に間隔を広げ、ラジオボタンの形状を変更している。

HTML
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
<!DOCTYPE html><html lang='ja'>
<head>
  <meta charset='UTF-8'>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
  <style media="screen and (min-width: 769px)">
       #base          {font-size:16pt;text-align:center;width:300px;border:solid 4px #93ff93; }
       #radio_box     {font-size:12pt;float:left ;text-align:left; width:45%; }
       #disp_box      {font-size:12pt;float:right;text-align:left; width:50%; }
       #brightness    {font-size:12pt;text-align:right; }
       #val_box       {font-size:10pt;text-align:center; clear:both ;}
       #ctl_box       {text-align:center; }
       input.radio    {margin-left:8px; width:30px;}
       input.value    {margin-left:8px; width:30px;}
       input.setbutton{margin-left:8px; width:40px;}
       input.slider   {margin-left:8px; width:250px;}
       input.button   {margin:0px 15px; width:100px;}
  </style>
  <style media="screen and (max-width:768px)">
       #base             {font-size:20pt;text-align:center; width:97%; border:solid 4px #008000; }
       #radio_box        {font-size:18pt;float:left ;text-align:left; width:45%; }
       #disp_box         {font-size:18pt;float:right;text-align:left; width:50%; line-height:30pt; }
       #brightness       {font-size:18pt;text-align:right; }
       #val_box          {font-size:16pt;text-align:center; clear:both ; width:100% ; }
       #ctl_box          {text-align:center; height: 100px }
       input.radio       {margin-left:8px; width:30px; vertical-align:middle ; display:none; }
       input.radio:checked + label.lbl { background: #00FF00 ; color: #FF0080 ; }
       label.lbl         {display:block ; margin: 0px calc(90% - 120px) 10px 10% ; text-align:center ; height:50px; line-height:50px; border: 1px solid #006DD9; border-radius:8px;}
       output.brightness {margin-right:50px }
       input.value       {margin-left:8px; margin-top:30px; width:50px; height:30px ; font-size:16pt; }
       input.setbutton   {margin-left:8px; width:50px; height:30px ; font-size:16pt; }
       input.slider      {margin-top:20px; margin-bottom:20px; width:95%; height:80px }
       input.button      {margin:0px 5% ; width:30%; height:50px ; font-size:18pt; background: #008000 ; color:#ffffff ; }
  </style>
  <title>Color LED Controller</title>
</head>
 
<body>
<div id="base">
  <p>LED ON/OFF</p>
  <div id="radio_box">
    <form method="get">
      <input class='radio' type='radio' name='remote' id="rad_lo" value='local' $checked_lo onclick='disp_ctrl(this.value); submit(this.value)'>
      <label for="rad_lo" class="lbl">Local<br></label>
      <input class='radio' type='radio' name='remote' id="rad_rm" value='remote' $checked_rm onclick='disp_ctrl(this.value); submit(this.value)'>
      <label for="rad_rm" class="lbl">Remote<br></label>
    </form>
  </div>
  <div id="disp_box">
      <span> brightness value</span><br>
      <div id="brightness"><output class='brightness' id="o1">$led_brightness</output></div>
  </div>
  <div id="val_box">
    <form method="get">
      <span > LED brightness (0-255)</span>
      <input class='value'  type='text' name='led_v' value=$led_brightness id='led_v' disabled>
      <input class='setbutton' type='submit' name='set' id='set' value='SET' disabled>
    </form>
    <form method='get'>
      <input class="slider" type="range" name='led_s' id='led_s' value=$led_brightness min="0" max="255" step="1" disabled
        onchange="setval(this.value);" oninput="setval(this.value)"; onmouseup="submit(this.form)": ontouchend="submit(this.form)">
    </form>
  </div>
  <div id="ctl_box">
    <form method='get'>
      <input class='button' type='submit' name='on' id="on" value='ON' disabled >
      <input class='button' type='submit' name='off' id="off" value='OFF' disabled><br>
    </form>
  </div>
</div>
 
 
<script>
var polling = null ;
 
function setval(ledval){
 var xhr = new XMLHttpRequest();
        xhr.open("get", "?slid="+ledval );
        xhr.setRequestHeader('Cache-Control', 'no-cache');
        xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
        xhr.responseType = 'document' ;
 
        xhr.onreadystatechange = function() {
          if( (xhr.readyState == 4) && (xhr.status == 200) ) {
            document.getElementById('led_v').value = xhr.response.getElementById("output1").innerHTML;
            document.getElementById('o1').value = xhr.response.getElementById("output1").innerHTML;
          }
        }
 
        ntimeout = function(e) {
          xhr.abort() ;
        }
        xhr.send();
}
 
 
function getval(){
 var xhrget = new XMLHttpRequest();
        xhrget.open("get", "?pol" );
        xhrget.setRequestHeader('Cache-Control', 'no-cache');
        xhrget.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
        xhrget.responseType = 'document' ;
 
        xhrget.onreadystatechange = function() {
          if( (xhrget.readyState == 4) && (xhrget.status == 200) ) {
            document.getElementById('o1').value = xhrget.response.getElementById("output1").innerHTML;
          }
        }
 
        ntimeout = function(e) {
          xhrget.abort() ;
        }
        xhrget.send();
}
 
function disp_ctrl( radioid ) {
   if(radioid == 'remote') {
      document.getElementById('led_v').disabled = false;
      document.getElementById('set').disabled = false;
      document.getElementById('led_s').disabled = false;
      document.getElementById('on').disabled = false;
      document.getElementById('off').disabled = false;
      clearInterval(polling);
   } else {
      document.getElementById('led_v').disabled = true;
      document.getElementById('set').disabled = true;
      document.getElementById('led_s').disabled = true;
      document.getElementById('on').disabled = true;
      document.getElementById('off').disabled = true;
      polling = setInterval(getval,100) ;
   }
 
}
 
window.onload = function() {
    if(document.getElementById("rad_rm").checked) {
      document.getElementById('led_v').disabled = false;
      document.getElementById('set').disabled = false;
      document.getElementById('led_s').disabled = false;
      document.getElementById('on').disabled = false;
      document.getElementById('off').disabled = false;
      clearInterval(polling);
    } else if(document.getElementById("rad_lo").checked) {
      document.getElementById('led_v').disabled = true;
      document.getElementById('set').disabled = true;
      document.getElementById('led_s').disabled = true;
      document.getElementById('on').disabled = true;
      document.getElementById('off').disabled = true;
      polling = setInterval(getval,100) ;
    }
}
 
</script>
 
</body>
</html>

以下、覚書など。
  ( 行# 4 )
viewportの設定。

  ( 行# 5 ～ 17 )
styleタグに メディア属性を設定。769px 以上の幅の場合は PC画面とし、従来の設定のままとする。但し、行#10 は html 内で font-size を変更していた為、style の設定を変更。

  ( 行# 18 ～ 33 )
スマホ用の styleタグ。
styleタグに メディア属性を設定。768px 以下の幅の場合は スマホ画面とし、スマホ用の設定を記述。
全体に 間隔が広がるように margin、font-size 等の設定を変更。
ラジオボタンの形状変更の為、通常のラジオボタンの表示を消し ( display:none; )、
Label タグ を設定して、"input.radio:checked + label.lbl" (行#26) で、chkeck 時の動作 (Label の 色を変更)

  ( 行# 42 ～ 45 )
スマホ用に ラジオボタンの形状を変更する為、labelタグを追加し、表示文字列は Label で設定。

  ( 行# 50 )
表示位置をずらすため、class の設定を追加。(PC画面には影響なし)

  ( 行# 50 )
font-size を style で設定する為に削除。


時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)