2019年12月15日 星期日

用網頁上的滑桿，操控伺服馬達。

#動機
用手機透過網路及webduino smart板，來操控伺服馬達。

  • 這只是先行測試。
  • 還有這個結果只能在chrome上面運作。
  • 運用測試影片  程式碼是連結到webduino smart板才能動作。(兩個伺服馬達接13和15腳，還要改smart 板的device id)


#蒐集過程
這個網站，可以自動產生slider外觀的css碼，可以派得上用場。
這個網站，可以讓你有好多色票可以選，代碼和顏色可以雙向轉換，很不錯。

其他網站都做得很好，但我的程度只能參觀，太複雜了，學不來。
從另一個角度來看，是css太複雜了。


#結果
看起來是有很多方法可以達成，這是東拼西湊之後，總算湊出個樣子，不是真懂，能用，夠用就好。  下載檔案

畫面如下，用chrome開啟來操作看看。(p.s.只有滑動，沒有給值，應用時自行加上)


html檔案內容如下，說明部份，就穿插在內容裡面了。
  1. /* 只適用在chrome */ <br>


  4. <style>
  5. /* 特別設定垂直滑軌的class，給<input type="range" class="vertical">使用 */
  6. input[type=range].vertical { /* 定義為vertical的class */
  7.   -webkit-appearance: none;  /* 取消內定的顯示模式 */
  8.   -webkit-transform: rotate(-90deg);/* 在這個class就是要將滑軌轉90度 */
  9.   margin-top: 50px;
  10.   }/* 除了這個設定之外，其餘和水平滑軌都一樣 */




  15. /* 整體設定，內定是水平滑軌，滑軌長度為400px */
  16. input[type=range] {
  17.   -webkit-appearance: none;
  18.   width:400px;
  19.     margin-top: 50px;
  20. }

  22. /* 設定軌道，顏色是#3fe42f */
  23. input[type=range]::-webkit-slider-runnable-track {
  24.  height: 30px;
  25.   cursor: pointer;
  26.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  27.   background: #3fe42f;
  28.   border-radius: 1.3px;
  29.   border: 0.2px solid #010101;
  30. }
  31. /* 設定軌道被點選時的顏色#ea1029 */
  32. input[type=range]:focus::-webkit-slider-runnable-track {
  33. background: #ea1029;  
  34. }

  36. /* 設定滑塊大小顏色位置 */
  37. input[type=range]::-webkit-slider-thumb {
  38.   box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  39.   border: 1px solid #000000;
  40.   height: 36px;
  41.   width: 16px;
  42.   border-radius: 3px;
  43.   background: #fff201;
  44.   cursor: pointer;
  45.   -webkit-appearance: none;
  46.   margin-top: -3px;/* 在滑軌上，上下移動的量 */
  47. }

  49. /* 更多的外觀設定 http://danielstern.ca/range.css/?ref=css-tricks#/ ，調好後，自己複製需要的設定碼 */

  51. </style>

  53. /* 滑軌在旋轉90度時，是中心不動，用二列表格的參數，來調整滑軌的位置 */
  54. <table style="border-collapse:collapse;border-color:rgb(136,136,136);border-width:1px" cellspacing="0" bordercolor="#888" border="1">
  55. <tbody>
  56. <tr>
  57. <!-- 滑軌都沒有給值，應用的時候，請自己加上去 -->
  58. <!-- 例如<input type="range" min="0" max="180" step="5" value="90" id="slider-down" > -->

  60. <!-- 這裡是兩條垂直滑軌，注意它多了 class="vertical" -->
  61. <td align="right" valign="bottom" style="width:560px;height:240px"><input class="vertical" type="range" ></td>
  62. <td valign="bottom" style="width:560px;height:240px"></td>
  63. <td valign="bottom" style="width:560px;height:240px"><input class="vertical" type="range"  ></td>
  64. </tr>

  66. <!-- 這裡是一條水平滑軌 -->
  67. <tr>
  68. <td align="right" valign="bottom" style="width:560px;height:200px"></td>
  69. <td valign="bottom" style="width:560px;height:200px"><center><input type="range"  ></center></td>
  70. <td valign="bottom" style="width:560px;height:200px"></td>
  71. </tr>
  72. </tbody>
  73. </table>

張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)