顯示具有 webduino 標籤的文章。 顯示所有文章
顯示具有 webduino 標籤的文章。 顯示所有文章

2019年12月20日 星期五

從0開始的紙板機器人

#前言
使用紙板做機器人，主要的好處是，又便宜，又好操作，不用使用特殊的機具，例如鋸子，雷射雕刻機，就能夠組裝，比較像在做勞作。

缺點就是，結構弱，支撐力不好。

有了這次經驗，如果能改用瓦楞板，或是pp板，結構、支撐力應該會好很多。

#準備
紙板：300磅厚紙板
webduino smart板
伺服馬達3顆
軟體
行動電源
(原本9V電池的構想沒成功)

#先來累積小成果
第一次，先用普通A4影印紙練習組裝，(小機器人)了解架構。
第二次，重組模板，放大到A3，買厚紙版來組裝(大機器人)，探討未來安裝的空間和堅固度。

 
第三次，買現成的套件組裝，練習伺服馬達操作。
第四步，完成自己的組裝
 

#軟體的準備
  • 測試用平板控制二軸小雲台

#裝置的一些過程
  • 固定伺服馬達(土法煉鋼啊)
 1. 找到一個大瓶鮮奶的蓋子，測量能讓伺服馬達稍微突出軸心的高度，大約是0.7mm左右。畫個圈。
  
 2. 切割。
用美工刀其實還蠻危險的，因為不好抓，太用力又會瞬間切很多，這恐怕不是好主意，目前只有先這樣了。
  
 3. 開口讓伺服馬達裝進去，並鎖上螺絲。
大小約是23mmX12mm
  
 4. 在凹凸不平的蓋面開洞，不是很好操作，就將就著用。
  
 5. 裝上伺服馬達，這最簡單的了。
  
 6. 採用白膠固定，所以要等到隔天，讓它乾。
(總共有三個固定架，這是另外一個的圖片，顏色不一樣囉！)
  

#線路
 1. 這是正面。
線路想了好久，計畫趕不上變化。沒考慮到的地方還是不少。
主要是電力，和動作後的電線扭動。		  
  2. 本來想全部塞進頭部和肚子，但是線還真是多，而且沒有好好的走線規劃，只好將一塊小麵包板，掛在背後。
(後來也沒有大用，只當共用電源和接地)		  
 3. 肚子上方是伺服馬達，線從背後穿出，(本來是想從上方穿出，但沒有考慮到頭轉動時，線也會跟著被扭動)下面是9V電池，測試時，它是可以將smart板驅動，但是，實際運用時，一下子就讓smart板當掉重開機，只好放棄。
 
 4.  頭部裝的是smart板，左右是手臂的伺服馬達。
電源線已經盡量捲起來了，下面白色方塊是usb母頭，原本要接收9V轉來的電，後來還是失敗，也就沒用了。(這個還是要克服，因為行動電源都很重，紙的結構撐不起。)		 
 5. 這塊小麵包板的功用是共地，共電源，因為smart板只有各一個接點。
中央是7805穩壓電路，左下方來的電線是9V的供電，因電力不穩，也沒用上了。		 
 6. 背面整體接線圖 
#再來看一次成果


張貼者： 於 沒有留言:
標籤： ,

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)