DOCS-3417: Add sample code to Create a Web App #4130
Conversation
viambot
added
the
safe to build
✅ Deploy Preview for viam-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
docs/operate/control/web-app.md
Outdated
| @@ -36,6 +36,222 @@ Refer to the [Viam TypeScript SDK](https://ts.viam.dev/) documentation for avail | |||
|
|
|||
| ### Example usage | |||
|
|
|||
| {{< expand "Example camera and sensor code" >}} | |||
There was a problem hiding this comment.
I don't think this should be in an expander. It's too easy to miss
There was a problem hiding this comment.
I like how the Flutter app page works for that better
docs/operate/control/web-app.md
Outdated
|
|
||
| {{<imgproc src="/operate/ts-dashboard.png" resize="x1100" declaredimensions=true alt="A web browser displaying a dashboard with a camera feed and sensor readings." style="max-width:500px" class="imgzoom" >}} | ||
|
|
||
| <file>main.ts</file>: |
There was a problem hiding this comment.
A common pattern with web dev is to put these three files in tabs. We could do that here to preserve space
docs/operate/control/web-app.md
Outdated
| For an example using Vite to connect to a machine, see [Viam's vanilla TypeScript quickstart example on GitHub](https://github.com/viamrobotics/viam-typescript-sdk/tree/main/examples/vanilla). | ||
|
|
||
| The following tutorial uses the Viam TypeScript SDK to query data that has been uploaded to the Viam cloud from a sensor, and display it in a web dashboard. |
There was a problem hiding this comment.
I think this looks a bit odd here. It takes up more space than the expander
There was a problem hiding this comment.
If I take it out of the expander and have the code block that won't be the case...also I think this tutorial is pretty good at walking through the TS setup so I don't want to de-emphasize it too much. With the code block is that okay?
Co-authored-by: Naomi Pentrel <[email protected]>
There was a problem hiding this comment.
LGTM. I do wonder if instead of displaying a single image it should show a live stream.
We do now have 2 of these pages feature examples that have the drive a rover in a square in it. And this one doesn't. We naturally don't have to stick with the driving a rover examples. I think it might in fact make sense to move away from it and using an example that aligns better with the use cases we've seen more of recently? What do you think?
Yeah so this was an intentional move away from that and towards the use cases we're seeing. We've gotten AI Qs both about getting an image and getting a video stream, as well as getting sensor data, so I think either is fine. Maybe stream is more broadly useful though/is the more difficult case so I will merge this (to get AI Qs landing on it sooner rather than later) and make a quick follow-up to make it a stream. The air quality tute already shows querying data so I figured just directly getting data would be good for the simple example here. For the headless app, I think people are slightly less likely to be looking for a camera stream, and we get fewer Qs about displaying a camera stream or querying sensor data with Go or C++ (or maybe even Python), so not important to change that example. For the mobile app, I will make a ticket to change it to something more like this but not going to prioritize that. |
|
🔎💬 Inkeep AI search and chat service is syncing content for source 'Viam Docs (https://docs.viam.com)' |
No description provided.