Question

我想问一下是否有可能做一些脚本或CSS样式，因为一旦我单击图像，它将变为另一个。我发现了很多类似的内容，但是我需要的有所不同，当我单击另一台设备上的图片时，我需要查看一台设备上的图片更改。

在代码中，我有一个图像类型输入，单击输入后，我需要更改图片并记住已经更改的值。因此，当我在新设备上打开页面时，图像已经更改。

  <form method="get"> 
    <input type="image" class="switch_img" src="switch_off.png" value="Zapnout" name="on1">               
  </form>

（程序的工作方式类似于关闭和打开LED。我希望答题器对开关进行“动画处理”。）

我将变量存储在Raspberry的txt文件中，这是理论上可以连接的代码部分：

    $fileName = __DIR__.'/txt/led2.txt';

        if (!file_exists($fileName) || (file_get_contents($fileName) !== '1' && file_get_contents($fileName) !== '0')) {
            file_put_contents($fileName, '1');
        }

        if (isset($_GET['on2']) && file_get_contents($fileName) === '1') {
            shell_exec("/usr/local/bin/gpio -g write 15 1");
            file_put_contents($fileName, '0');
        }

        else if (isset($_GET['on2']) && file_get_contents($fileName) === '0') {
            shell_exec("/usr/local/bin/gpio -g write 15 0");
            file_put_contents($fileName, '1');
        }

感谢您的帮助！

Answer 1

诸如Vue，Vuetify和Axios之类的项目使使用简单的语法（只需几行“ javascript”）即可轻松构建所需的内容。

<!DOCTYPE html>
<html>

<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>
          <h4>My Switch/s</h4>

          <v-alert type="error" :value="error">
            {{ error }}
          </v-alert>

          <v-card v-for="(item, index) in switches" :key="index">
            <v-card-title primary-title>
              <div>
                <div class="headline"></div>
                <span class="grey--text">{{ item.name }}</span>
              </div>
            </v-card-title>
            <v-card-text>
              <v-switch v-model="item.state" :label="item.state ? 'On' : 'Off'" color="success" hide-details @click="setState(item)"></v-switch>
            </v-card-text>
          </v-card>
        </v-container>
      </v-content>
    </v-app>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    //
    var vm = new Vue({
      el: '#app',
      data: () => ({
        error: false,
        pollId: 0,
        switches: [{
            name: 'LED 1',
            state: false
          }
        ]
      }),
      beforeDestroy: function() {
        clearInterval(this.pollId);
      },
      mounted: function() {
        this.getState()
        this.poll()
      },
      methods: {
        poll() {
          clearInterval(this.pollId)
          this.pollId = setInterval(() => {
            this.getState()
          }, 2000)
        },
        async getState() {
          try {
            const response = await axios.get('/switch.php')
            this.switches = response.data
          } catch (error) {
            this.error = error
          }
        },
        async setState(item) {
          item.state = !item.state
          try {
            await axios.post('/switch.php', item)
          } catch (error) {
            this.error = error
          }
        }
      }
    });
  </script>
</body>

</html>

然后是PHP部分（switch.php）：

<?php
$switches = file_get_contents('switches.json');

// handle toggle
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // get json body
    $body = (array) json_decode(file_get_contents('php://input'), true);

    // toggle the switch
    shell_exec('/usr/local/bin/gpio -g write 15 '.intval(!empty($body['state'])));

    // set its current state
    if (isset($switches[$body['name']])) {
        $switches[$body['name']]['state'] = $body['state'];
    } else {
        $switches[$body['name']] = $body;
    }

    // save
    file_put_contents('switches.json', json_encode($switches, JSON_PRETTY_PRINT));

    header('HTTP/1.1 204 No content');
} else {
    header('Content-Type: application/json');
    echo json_encode($switches);
}

未经测试，但应指出正确的方向。

在多个设备上同步CSS / JS图片点击更改

1 个答案: