Hand Drawn Code: How to Draw Digital Signage Then Bring it to Life

You’ve got an idea for your team’s digital signage. It’s hard to describe, exactly the way you want it, but you can picture it in your mind’s eye. You could even sketch it out on a napkin or whiteboard, annotated with where the text should go, which parts should be dynamically updated, and more.

Got a half hour and a dollar? With OpenAI, ChatGPT, and TLDraw’s Make Real tool, you can build live dashboards for ScreenCloud digital signage without ever writing a line of code.

Here’s how.

Sketch an app or dashboard

There are a few ways to code the digital signage app or dashboard you dreamed up into reality. One is with ChatGPT. For free, you could describe your idea to ChatGPT and ask it to code a custom dashboard, then reply with any changes and tweaks you need. The easiest way is to start by giving ChatGPT a bit of code—such as ScreenCloud’s Playgrounds sample code—then asking it to tweak things from there.

Or, with a $20/month ChatGPT Plus account, you could give the AI an image instead of typing out your idea. Sketch your dashboard idea on paper, draw it on a digital whiteboard app, or pull it together in a mockup or flowchart tool. Then, upload an image of that sketch to ChatGPT and ask it to code it to life. That’ll likely get closer to building the app you’d imagined—though also a bit more likely to be glitchy.

An easier option is to use an AI built into a drawing app. That’s what TLDraw’s Make Real app offers. TLDraw is a freeform sketching and drawing app, perfect to sketch ideas during a meeting or mockup things when you can’t quite describe them. TLDraw Make Real adds OpenAI—the backend behind ChatGPT—to the mix, to bring your idea to life in HTML and JavaScript code.

Start off with the sketch. On an iPad or other touchscreen, draw your app idea with TLDraw’s pen mode. For more precision or on a computer, use the shapes and text boxes to frame up your idea. Either way, start with a large rectangle shaped like your signage, then fill it in with the widgets and sections you need. TLDraw’s default toolbar includes the square shape you’ll use the most, or click the arrow to grab circles, diamonds, and other shapes, plus checkboxes and arrows to denote interactive functionality.

Now annotate your sketch, adding a few words to tell the AI exactly what you’re going for. What works best is to add text outside of your core dashboard to describe what you want, then add an arrow that connects your dashboard’s widget with the description text. Drag the arrow, and you can connect it from one element to the next as in a mind map app.

Be as descriptive as you want. Add example text in your dashboard, for example, then describe what that text should be replaced with (such as “replace with the day of the week”).

Turn the sketched dashboard into code

Then it’s time to try to convert your sketch into code.

First, you’ll need an OpenAI API key—and at least a bit of money in your OpenAI account to use the API. Go to platform.openai.com, signup or login to your account, then go to Settings -> Billing and add payment info, then finally go to API keys in the left sidebar to generate and copy a key for TLDraw. Back in TLDraw, click the textbox near the toolbar and paste your OpenAI Key.

Now, click the mouse tool in TLDraw (or press V to switch tools) then select everything you drew. Your sketch, the text descriptions, and arrows—all of it. Click Make Real, and wait a minute or so.

That’s when the magic happens (most of the time, anyhow). TLDraw will come back with a live, working, HTML version of your idea. It’s not going to be perfect, and sometimes it might be quite a bit different than you’d imagined. One of the times we tried getting it to make a clock, it had the hands halfway outside the circle showing the wrong time. But as often as not, it’ll have something at least 80% of the way towards what you wanted to build.

You can iterate from there to get closer. Update your original sketch and descriptions with more details, then select all and Make Real again. Or, add arrows and text to annotate TLDraw’s code version of your idea and tell it what to fix, then select that new version of the idea plus annotations and click Make Real. Our clock, for example, didn’t include hour numbers. An annotation later, and TLDraw added 12, 3, 6, and 9 markers—good enough for our needs.

When you’re close enough to what you’d imagined, you can copy the code and put it to work. Click the 3-dot menu, select Copy HTML, then paste it in a code editor to tweak or save it as an .html file to view in your browser.

Put your TLDraw sketched dashboard on ScreenCloud digital signage

With the HTML in hand, you can put your idea on digital signage in seconds with ScreenCloud.

Open your ScreenCloud account, click the Apps sidebar, search for Playgrounds, and create a new blank instance. There, paste your HTML code in the HTML column, click Preview, and you’ll see your idea brought to life on the big screen.

If TLDraw builds your full idea, then you’re done. Deploy your new ScreenCloud Playground app to your TV, or add it to digital signage playlists and channels to share it with your entire office.

But odds are something will be missing. TLDraw apps by default are basic, a utilitarian version of your idea rather than a stylized one. And some features may be incomplete. Our dashboard, for example, included a commented line in its JavaScript section to add code that shows a comment of the day.

Coders can jump right in and tweak the defaults. TLDraw-created apps use Tailwind CSS, so you can add text-5xl to make a headline larger or font-light to stylize a tagline.

Or, you can get ChatGPT to code for you. Copy all of your TLDraw code, paste it into ChatGPT, and ask it to change specific things. The best results tend to come from small, focused requests. Ask it to add a background color and change all of the text to use Open Sans font, and it’ll likely work well. Then ask it to add another change—we got it to write the code to pull in a quote of the day, for example—and another, until you get the dashboard you’d like.

Copy the code back to ScreenCloud Playgrounds, paste it instead of your existing code—and check to see if ChatGPT missed anything (it left out the JavaScript in one of our tests, with a comment asking us to add it back in, for example). Then preview your dashboard, deploy it if it’s ready, or continue tweaking until you get just what you want.

Build a custom ScreenCloud Channel layout without coding

TLDraw is surprisingly good at coding individual, small ideas. Clocks, for example, or simple to-do lists, or auto-updating countdown timers. Just like GPT, the more focused the task you give it, the better the output.

Which means that your grandiose app and dashboard ideas might be best built piece by piece. Some you could accomplish with ScreenCloud’s built-in apps. Say you want to show the weather and a clock; ScreenCloud’s built-in weather app might be best for the former, with a clock that works like you want coded in TLDraw for the latter. Build each individual section of your idea separately, perhaps tweaking the design so each part feels like it fits together.

Then you can bring them together in a ScreenCloud Channel. Each channel uses the layout you choose to show two or more apps together. You can pick from ScreenCloud’s built-in channel layouts—complete with a wide assortment of common options such as two apps side-by-side with a ticker tape of notifications underneath.

Can’t find a layout you want? Click Custom Layouts, then near the bottom of the widget click New Layout. There you can define your new layout in JSON and CSS code. Tweak it yourself, or enlist ChatGPT in the process. AI’s pretty great at focused coding tasks, and it worked flawlessly here too. Copy both the JSON and CSS code you want, and tell GPT how you’d like to change it. I told GPT to build a 4-app screen with one column covering half the screen, the remaining two apps sharing the remaining horizontal space, with a wide ticker tape running underneath.

Once that’s done, copy GPT’s code and add it back to ScreenCloud’s channel layout settings, then save your new layout. Finally, add each of the apps and TLDraw widgets you’ve created previously to your layout to get your idea pulled together on the big screen.

Showcase anything on any screen in your office

Then you’re off to the races. Anything you can dream up you can get on your team’s digital signage.

But it doesn’t always require code. The quickest way to put an idea on your team’s signage is either ScreenCloud’s Noticeboard app, or a digital whiteboard app like Onlineboard or TLDraw’s core drawing mode where you can sketch an idea directly onto your signage.

Or, for more advanced code-powered signage, you can code—or get GPT to code—a dashboard in ScreenCloud Playgrounds, with webhooks to automatically update the screen with new data. Combine that with ScreenCloud’s built-in Dashboard tool to extract any part of a website or app and put it on your screen, plus support for iFrames and other app embeds, and you can get any number or data on any screen, whenever you want.

Jump into your ScreenCloud account—or start a free 14 day ScreenCloud trial—and start bringing your signage ideas to the big screen.