Member-only story

How to Create an Interactive Design Tool connected with Google Sheets via Javascript/ HTML?

DigNo Ape
7 min readJan 4, 2023

--

One of my interior designer friends asked me how to combine a simple database or data sheet with her floor plan design so she can easily and quickly present it to her clients with both of graphic designs and furniture lists (or other structured information) in a single web page or a summary slide.

“SVG”, “JavaScript”, “iframe” and “Google Sheet” these keywords come to my mind when I start my thinking process. Anyway, let’s try to materialize it by putting these terms together!

I asked my friend for her floor plan design sample and few examples of furniture list. The good thing is that we can break the floor plan picture down into few SVG components and leverage one of the SVG beauty parts, ID assignment. As a result, we can control the on/off of presence of data sheet via JavaScript.

--

--

DigNo Ape
DigNo Ape

Written by DigNo Ape

我們秉持著從原人進化的精神,不斷追求智慧的累積和工具的運用來提升生產力。我們相信,每一個成員都擁有無限的潛力,透過學習和實踐,不斷成長和進步。

No responses yet