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

【问题标题】：CSS/JS Image on-click change synchronized on multiple devicesCSS/JS 图像点击更改在多个设备上同步
【发布时间】：2018-06-23 17:44:59
【问题描述】：

我想问是否可以做一些脚本或 css 样式，因为一旦我点击图像，它就会变成另一个。我发现了很多这样的，但我需要它有点不同，当我点击另一台设备上的图片时，我需要看到图片在一台设备上发生变化。

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

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

（该程序的工作方式类似于关闭和打开 LED。我希望点击器制作开关的“动画”。）

我有变量存储在树莓的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');
        }

感谢您的帮助！

【问题讨论】：

@JonasLochmann，阅读他的问题。他需要异步操作。一个设备中的变化也应该反映在另一个设备中。
是的，有可能；但是如何取决于哪些设备以及它们如何关联。您能否添加足够的细节和信息，让我们可以看到您在做什么？
我不确定它是否会纯粹通过 CSS，我认为还需要 JS。我知道的不多，所以我问。
什么保持开关的当前状态，你从哪里得到它，我看到的只是一个 HTML 表单。如果您想要完美同步，请使用网络套接字，如果不使用服务器发送的事件或只是轮询.. 但您仍然需要从某个地方设置/获取当前状态。
@LawrenceCherone 值 1 和 0 在树莓派中直接写入 txt 文件。因此，当有 1 时，将有一张图片，如果 0 将更改为另一张图片。这可以帮助这些变量。

标签： javascript php html css raspberry-pi

【解决方案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);
}

未经测试，但应该为您指明正确的方向。

【讨论】：

没有在线图书馆也能做到吗？
是的，但您需要学习原生 javascript。基本上，如果你想要一个不经常刷新的动态网站，你需要使用各种js。
tbh javascript 并没有比 Vue.js 容易得多。这就是所有酷孩子都使用它的原因；p
我的意思是，我想要离线脚本，因为这个网站将托管在本地主机上，而我的 Rasp 不会一直在线，所以我需要离线脚本。
是的，您可以在本地托管所有这些库，您甚至可以下载 google 字体（或者不使用 vuetify 并使用 bulma 或其他东西）。许多 CSS 库包括开关 wikiki.github.io/form/switch 使用图像/输入不是它在 2018 年的做法。