javascript - 图像部分的动态（非冻结）着色

Question

我需要您的专业知识来创建性能仪表板。假设我是汽车制造商。作为这家很棒的公司的老板，我需要对我的制造过程有一个整体的了解。我的建议是在仪表板上添加我的产品的背景图片：

如何应用一些图层来动态更新每个工作项（门、轮子......）的状态，例如：

在这个例子中，老板需要把注意力集中在这辆漂亮汽车的前门上！

所以现在，一些背景。我想做一些谷歌应用程序脚本/Javascript，以更新嵌入网站的图像每个部分的颜色（固定颜色：红色/琥珀色/绿色）。代码应该在页面加载期间的某处读取数据（例如，在谷歌表格或其他数据库中）并应用正确的画布/图层或您可以建议的任何好主意。必须在此图像的每个部分上关联链接以深入了解每个主题。

你建议我走哪个方向？

标签： javascripthtmlgoogle-apps-script

Answer 1

Apps 脚本的一般工作流程：

• 创建一个Web 应用程序。
• 在 Web App 的 .gs 文件（服务器端）中实现一个函数，该函数将从您的电子表格中提取和返回数据（分配给每个汽车部件的颜色值）
• 在htmlWeb App 的文件中，使用google.script.run调用服务器端函数。
• 实现一个带有参数的withSuccessHandler函数，该函数将在 JS 函数中使用从服务器端提取的数据。
• JS 函数可以创建/修改您网站的innerHTML，将检索到的颜色值分配给您的图像。
• 将您的 WebApp 的URL嵌入到您的网页中。
• 刷新您的网页时将刷新数据。或者，您可以实施Web 轮询以在指定的时间间隔内自动刷新数据。