create PROTO PLUS Product page

2026-05-20 10:23:01 -07:00 · 2019-08-16 10:33:04 +08:00
parent bf7904dfc9
commit 7b2b6d75e0
25 changed files with 298 additions and 32 deletions
@@ -499,4 +499,118 @@ div.card-img-overlay:hover {

 .table_center tr{
    text-align:center;
-}
+}
+
+
+/* Table Styles */
+
+.table-wrapper{
+    /* margin: 10px 70px 70px; */
+    box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.2 );
+}
+
+.fl-table {
+    border-radius: 5px;
+    font-size: 12px;
+    font-weight: normal;
+    border: none;
+    border-collapse: collapse;
+    width: 100%;
+    max-width: 100%;
+    white-space: nowrap;
+    background-color: white;
+}
+
+.fl-table td, .fl-table th {
+    text-align: center;
+    padding: 8px;
+}
+
+.fl-table td {
+    border-right: 1px solid #f8f8f8;
+    font-size: 12px;
+}
+
+.fl-table thead th {
+    color: #ffffff;
+    background: #4FC3A1;
+}
+
+
+.fl-table thead th:nth-child(odd) {
+    color: #ffffff;
+    background: #324960;
+}
+
+.fl-table tr:nth-child(even) {
+    background: #F8F8F8;
+}
+
+/* Responsive */
+
+@media screen and (max-width: 768px) {
+    .fl-table {
+        display: block !important;
+        width: 100%;
+        overflow-x: auto;
+    }
+    .table-wrapper:before{
+        content: "Scroll horizontally >";
+        display: block;
+        text-align: right;
+        font-size: 11px;
+        color: white;
+        padding: 0 0 10px;
+    }
+    .fl-table thead, .fl-table tbody, .fl-table thead th {
+        display: block;
+    }
+    .fl-table thead th:last-child{
+        border-bottom: none;
+    }
+    .fl-table thead {
+        float: left;
+        display: block !important;
+    }
+    .fl-table tbody {
+        width: auto;
+        position: relative;
+        overflow-x: auto;
+    }
+    .fl-table td, .fl-table th {
+        padding: 20px .625em .625em .625em;
+        height: 60px;
+        vertical-align: middle;
+        box-sizing: border-box;
+        overflow-x: hidden;
+        overflow-y: auto;
+        width: 120px;
+        font-size: 13px;
+        text-overflow: ellipsis;
+    }
+    
+    .fl-table thead th {
+        text-align: left;
+        border-bottom: 1px solid #f7f7f9;
+    }
+    .fl-table tbody tr {
+        display: table-cell !important;
+    }
+    .fl-table tbody tr:nth-child(odd) {
+        background: none;
+    }
+    .fl-table tr:nth-child(even) {
+        background: transparent;
+    }
+    .fl-table tr td:nth-child(odd) {
+        background: #F8F8F8;
+        border-right: 1px solid #E6E4E4;
+    }
+    .fl-table tr td:nth-child(even) {
+        border-right: 1px solid #E6E4E4;
+    }
+    .fl-table tbody td {
+        display: block;
+        text-align: center;
+    }
+}
@@ -1,4 +1,4 @@
-# Hat ADC {docsify-ignore-all}
+# M5StickC ADC HAT {docsify-ignore-all}

 <img src="assets\img\product_pics\hat\adc_hat\adc_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\adc_hat\adc_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\adc_hat\adc_hat_03.jpg" width="30%" height="30%">

@@ -1,4 +1,4 @@
-# Beetlec {docsify-ignore-all}
+# M5StickC BeetleC {docsify-ignore-all}

 <img src="assets\img\product_pics\hat\beetlec_hat\beetlec_hat_01.jpg" width="30%" height="30%"> <img src="assets\img\product_pics\hat\beetlec_hat\beetlec_hat_02.jpg" width="30%" height="30%">

@@ -1,4 +1,4 @@
-# Hat DAC {docsify-ignore-all}
+# M5StickC DAC HAT {docsify-ignore-all}

 <img src="assets\img\product_pics\hat\dac_hat\dac_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_03.jpg" width="30%" height="30%">

@@ -1,4 +1,4 @@
-# Hat ENV {docsify-ignore-all}
+# M5StickC ENV HAT {docsify-ignore-all}

 <img src="assets\img\product_pics\hat\env_hat\env_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\env_hat\env_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\env_hat\env_hat_03.jpg" width="30%" height="30%">

@@ -1,4 +1,4 @@
-# Hat NCIR {docsify-ignore-all}
+# M5StickC NCIR HAT {docsify-ignore-all}

 <img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_01.jpg" width="30%" height="30%">
 <img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_02.jpg" width="30%" height="30%">
@@ -10,7 +10,7 @@

 ## Description

-**NCIR_HAT**  is an M5StickC compatible infrared sensor. Same as M5Unit NCIR, this stickc HAT module Integrates MLX90614 which can be used to measure the surface temperature of a human body or other object. Now that it has a cover of a case of stickc HAT, you can pretty much move all the implementations to stickc-based controller, featured with tiny, low-cost and highly-productization.<br>
+**NCIR HAT**  is an M5StickC compatible infrared sensor. Same as M5Unit NCIR, this stickc HAT module Integrates MLX90614 which can be used to measure the surface temperature of a human body or other object. Now that it has a cover of a case of stickc HAT, you can pretty much move all the implementations to stickc-based controller, featured with tiny, low-cost and highly-productization.<br>

 Unlike most temperature sensors, this sensor measures infrared light bouncing off of remote objects so it can sense temperature without having to touch them physically. Simply point the sensor towards what you want to measure and it will detect the temperature by absorbing IR waves emitted. Because it doesn't have to touch the object it's measuring, it can sense a wider range of temperatures than most digital sensors! It takes the measurement over a 90-degree field of view so it can be handy for determining the average temperature of an area.<br>

@@ -1,4 +1,4 @@
-# Unit PIR {docsify-ignore-all}
+# M5StickC PIR HAT {docsify-ignore-all}

 <img src="assets\img\product_pics\hat\pir_hat\pir_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_03.jpg" width="30%" height="30%">

@@ -0,0 +1,58 @@
+# M5StickC PROTO PLUS HAT {docsify-ignore-all}
+
+<!-- <img src="assets\img\product_pics\hat\proto_hat\hat_proto_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_03.jpg" width="30%" height="30%"> -->
+
+
+***
+
+:memo:**[Description](#Description)**&nbsp;&nbsp;
+
+## Description
+
+**PROTO PLUS HAT** is a universal board compatible with M5SticKC. Combined with the matching 8 pin header, all the expansion interfaces on the top of M5StickC can be connected to the universal board, so that users can freely design the circuit on the board. The 90° pin header allows the versatile board to be spliced to the M5StatchC in a variety of angles. If you plan to add a simple circuit design to your project and hope to save space by changing the board splicing, HAT PROTO PLUS Would be a good choice.
+
+
+## Product Features
+
+- M5StickC Compatible
+- Hole Size: 0.039" 1mm (CNC Drilled)
+- Hole Pitch: 0.1 in - (2.54 mm)
+- Entire Hole Quantity: 168 Holes
+
+## Include
+
+- 1x PROTO PLUS HAT
+- 1x 8 pin（90°）
+
+## Application
+
+- Prototyping 
+
+
+<!-- 
+## Schematic
+
+<img src="assets\img\product_pics\hat\proto_hat\hat_proto_04.jpg" width="50%" height="50%">
+
+## Links
+
+- **[Official Channel](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
+
+- **[Official forum](http://forum.m5stack.com/)**
+
+
+## Example
+- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ENV)** -->
+
+
+## Video
+
+**Demo**
+
+<video width="500" height="500" controls>
+    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/PROTO_PLUS_HAT.mp4" type="video/mp4">
+</video>
+
+
+
+
@@ -1,4 +1,4 @@
-# Hat PROTO {docsify-ignore-all}
+# M5StickC PROTO HAT {docsify-ignore-all}

 <img src="assets\img\product_pics\hat\proto_hat\hat_proto_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_03.jpg" width="30%" height="30%">

@@ -9,7 +9,7 @@

 ## Description

-**PROTO_HAT** is a HAT size of universal prototyping board. You can have the total freedom to make your own project as you want it, with prototyping boards that allow laying out the customized circuit to interact with stickC port on top.<br>
+**PROTO HAT** is a HAT size of universal prototyping board. You can have the total freedom to make your own project as you want it, with prototyping boards that allow laying out the customized circuit to interact with stickC port on top.<br>

 PINs on top of the device is ported out for building more connections.<br>

@@ -1,4 +1,4 @@
-# Hat RS485 {docsify-ignore-all}
+# M5StickC RS485 HAT {docsify-ignore-all}


 <img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_03.jpg" width="30%" height="30%">
@@ -1,4 +1,4 @@
-# Unit PIR {docsify-ignore-all}
+# M5StickC SPK HAT {docsify-ignore-all}

 <img src="assets\img\product_pics\hat\spk_hat\spk_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_03.jpg" width="30%" height="30%">

@@ -8,7 +8,7 @@

 ## Description

-**Hat SPK** is an M5StickC compatible speaker, integrated PAM8303 amplifier (3w single channel type D power amplifier), High PSRR and differential inputs eliminate noise and rf interference, thus it has the characteristics of simple functions and high audio reproduction.
+**SPK HAT** is an M5StickC compatible speaker, integrated PAM8303 amplifier (3w single channel type D power amplifier), High PSRR and differential inputs eliminate noise and rf interference, thus it has the characteristics of simple functions and high audio reproduction.

 ## Product Feature

@@ -1,4 +1,4 @@
-# Hat THERMAL {docsify-ignore-all}
+# M5StickC THERMAL HAT {docsify-ignore-all}

 <img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_03.jpg" width="30%" height="30%">

@@ -827,7 +827,7 @@
    <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/hat/beetlec_hat_01.jpg">
  <p class="item-title">BeetleC</p>
 </a>
-</div> 
+</div>


 **LED class**
@@ -41,4 +41,41 @@

 <!-- |**[麦克风](zh_CN/api/spm1423_m5stickc)** | **[LED](zh_CN/api/led_m5stickc)** |

-|**[按键](zh_CN/api/buttom_m5stickc)** | **[红外发射](zh_CN/api/led_m5stickc)** | -->
+|**[按键](zh_CN/api/buttom_m5stickc)** | **[红外发射](zh_CN/api/led_m5stickc)** | -->
+
+
+
+
+<!-- 
+<div class="table-wrapper">
+    <table class="fl-table">
+        <thead>
+        <tr>
+            <th>Header 1</th>
+            <th>Header 2</th>
+            <th>Header 3</th>
+            <th>Header 4</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+            <td>1</td>
+            <td>Content</td>
+            <td>Content</td>
+            <td>Content</td>
+        </tr>
+        <tr>
+            <td>2</td>
+            <td>Content</td>
+            <td>Content</td>
+            <td>Content</td>
+        </tr>
+        <tr>
+            <td>3</td>
+            <td>Content</td>
+            <td>Content</td>
+            <td>Content</td>
+        </tr>
+        <tbody>
+    </table>
+</div> -->
@@ -1,4 +1,4 @@
-# Hat ADC {docsify-ignore-all}
+# M5StickC ADC HAT {docsify-ignore-all}

 <img src="assets\img\product_pics\hat\adc_hat\adc_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\adc_hat\adc_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\adc_hat\adc_hat_03.jpg" width="30%" height="30%">

@@ -1,4 +1,4 @@
-# BeetleC  {docsify-ignore-all}
+# M5StickC BeetleC {docsify-ignore-all}

 <img src="assets\img\product_pics\hat\beetlec_hat\beetlec_hat_01.jpg" width="30%" height="30%"> <img src="assets\img\product_pics\hat\beetlec_hat\beetlec_hat_02.jpg" width="30%" height="30%">

@@ -7,7 +7,7 @@

 ## 描述

-**Beetlec**是一款迷你机器人小车底座，采用了双电机驱动器和7个可编程RGB LED，配合极其简洁的外观设计和板载ESP32的M5StickC小巧主控，使其成为一款独一无二的迷你机器人小车.
+**BeetleC**是一款迷你机器人小车底座，采用了双电机驱动器和7个可编程RGB LED，配合极其简洁的外观设计和板载ESP32的M5StickC小巧主控，使其成为一款独一无二的迷你机器人小车.

 Beetlec底座需要结合M5StickC控制器使用.在底座上，配备了两个由STM32F030驱动的直流减速电机，电路连接至M5StickC的顶部插槽，最终实现控制.

@@ -1,4 +1,4 @@
-# Hat DAC {docsify-ignore-all}
+# M5StickC DAC HAT {docsify-ignore-all}

 <img src="assets\img\product_pics\hat\dac_hat\dac_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_03.jpg" width="30%" height="30%">

@@ -1,4 +1,4 @@
-# Hat ENV {docsify-ignore-all}
+# M5StickC ENV HAT {docsify-ignore-all}

 <img src="assets\img\product_pics\hat\env_hat\env_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\env_hat\env_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\env_hat\env_hat_03.jpg" width="30%" height="30%">

@@ -1,4 +1,4 @@
-# Hat NCIR {docsify-ignore-all}
+# M5StickC NCIR HAT {docsify-ignore-all}

 <img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_03.jpg" width="30%" height="30%">

@@ -1,4 +1,4 @@
-# Hat PIR {docsify-ignore-all}
+# M5StickC PIR HAT {docsify-ignore-all}

 <img src="assets\img\product_pics\hat\pir_hat\pir_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_03.jpg" width="30%" height="30%">

--- a/Show More
+++ b/Show More