Skip to content

[MKC-1760] Updated "embedding create iframes" #2119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 26, 2024
Merged

[MKC-1760] Updated "embedding create iframes" #2119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added ...uino-cloud/04.cloud-editor/embedding-create-iframes/assets/iframe-highlight.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed ...uino-cloud/04.cloud-editor/embedding-create-iframes/assets/iframe_highlight.png
View file
Open in desktop
Binary file not shown.
30 changes: 15 additions & 15 deletions ...uino-cloud/04.cloud-editor/embedding-create-iframes/embedding-create-iframes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,27 @@ description: 'Learn about different methods when embedding your sketches in a we
author: 'Karl Söderby'
---

The Web Editor is a great tool for creating and uploading programs while also collecting all of your sketches in one place. Another great feature is embedding them as iframes, such as articles, blogposts or journals.
The Cloud Editor is a great tool for creating and uploading programs while also collecting all of your sketches in one place. Another great feature is embedding them as iframes, such as articles, blogposts or journals.

To embed an iframe is very easy, and we just need to copy and paste a link from our sketch in the Web Editor. But we can also do a series of modifications to that iframe, and in this tutorial we will take a look at how to do that.
To embed an iframe is very easy, and we just need to copy and paste a link from our sketch in the Cloud Editor. But we can also do a series of modifications to that iframe, and in this tutorial we will take a look at how to do that.

## Let's start

First of all, we need to navigate to the [Web Editor](https://create.arduino.cc/editor). If we do not have an account, we can register one with just a few simple steps.
First of all, we need to navigate to the [Cloud Editor](https://create.arduino.cc/editor). If we do not have an account, we can register one with just a few simple steps.

Then, we need to have a code. In this tutorial, we are just going to use the good old **blink** example. When we have our sketch ready, click on the **share** button next to the port selection tool. This will open up a new window, that will have two fields: **link** and **iframe**. Copy the iframe field.
Then, we need to have a code. In this tutorial, we are just going to use the good old **blink** example. When we have our sketch ready, click on the **share** button next to the serial monitor tool. This will open up a new window, that will have two fields: **link** and **embed**. Copy the embed field.

![iframe field](assets/iframe_highlight.png)
![embed field](assets/iframe-highlight.png)

It should look something like this, where `{YOUR_ACCOUNT}` and `{SKETCH_URL}` is replaced by your own credentials.
It should look something like this:

```markup
<iframe src="https://create.arduino.cc/editor/{YOUR_ACCOUNT}/{SKETCH_URL}/preview?embed" style="height:510px;width:100%;margin:10px 0" frameborder="0"></iframe>
<iframe src="https://app.arduino.cc/sketches/examples?eid=01.Basics%2FBlink&view-mode=embed" style="height:510px;width:100%;margin:10px 0" frameborder=0></iframe>
```

This iframe can now simply be embedded in a HTML page, and it will look like this:

<iframe src="https://create.arduino.cc/editor/FT-CONTENT/189d16e1-ba13-421a-9413-7de6e9e46ed7/preview?embed" style="height:510px;width:100%;margin:10px 0" frameborder="0"></iframe>
<iframe src="https://app.arduino.cc/sketches/examples?eid=01.Basics%2FBlink&view-mode=embed" style="height:510px;width:100%;margin:10px 0" frameborder=0></iframe>

But there are many ways we can modify the iframe to look different. So let's take a look the available modifications we can make!

Expand All @@ -39,12 +39,12 @@ To do this, we just need to add the following code to the end of the URL:
```
The result is the following:

<iframe src="https://create.arduino.cc/editor/FT-CONTENT/189d16e1-ba13-421a-9413-7de6e9e46ed7/preview?embed&snippet" style="height:510px;width:100%;margin:10px 0" frameborder="0"></iframe>
<iframe src="https://app.arduino.cc/sketches/examples?eid=01.Basics%2FBlink&view-mode=embed&snippet" style="height:510px;width:100%;margin:10px 0" frameborder=0></iframe>

And the full URL should look like this:

```markup
<iframe src="https://create.arduino.cc/editor/{YOUR_ACCOUNT}/{SKETCH_URL}/preview?embed&snippet" style="height:510px;width:100%;margin:10px 0" frameborder="0"></iframe>
<iframe src="https://app.arduino.cc/sketches/examples?eid=01.Basics%2FBlink&view-mode=embed&snippet" style="height:510px;width:100%;margin:10px 0" frameborder=0></iframe>
```


Expand All @@ -58,12 +58,12 @@ Next is the highlighting feature. To use this, simply add the following lines to

The result is that line 3 and 4 are highlighted:

<iframe src="https://create.arduino.cc/editor/FT-CONTENT/189d16e1-ba13-421a-9413-7de6e9e46ed7/preview?embed&snippet#L3-L4" style="height:510px;width:100%;margin:10px 0" frameborder="0"></iframe>
<iframe src="https://app.arduino.cc/sketches/examples?eid=01.Basics%2FBlink&view-mode=embed&snippet#L3-L4" style="height:510px;width:100%;margin:10px 0" frameborder=0></iframe>

And the full URL should look like this:

```markup
<iframe src="https://create.arduino.cc/editor/{YOUR_ACCOUNT}/{SKETCH_URL}/preview?embed&amp;snippet#L3-L4" style="height:510px;width:100%;margin:10px 0" frameborder="0"></iframe>
<iframe src="https://app.arduino.cc/sketches/examples?eid=01.Basics%2FBlink&view-mode=embed&snippet#L3-L4" style="height:510px;width:100%;margin:10px 0" frameborder=0></iframe>
```

You can highlight as many lines as you want, and it is easily configurable. For example, if we want to highlight line 1, 3 and 5-8, we simply need to add the following to the URL:
Expand All @@ -90,7 +90,7 @@ style="height:200px;width:50%;margin:10px 0"

Which will look like this:

<iframe src="https://create.arduino.cc/editor/FT-CONTENT/189d16e1-ba13-421a-9413-7de6e9e46ed7/preview?embed&snippet" style="height:200px;width:50%;margin:10px 0" frameborder="0"></iframe>
<iframe src="https://app.arduino.cc/sketches/examples?eid=01.Basics%2FBlink&view-mode=embed&snippet" style="height:200px;width:50%;margin:10px 0" frameborder=0></iframe>

## Automatically re-sizing your sketches

Expand All @@ -104,9 +104,9 @@ And then using the class `arduino-sketch-iframe` in your HTML element.

## Summary

There are several cool ways of working with iframes from the Web Editor, and it is a really easy process that requires very little coding.
There are several cool ways of working with iframes from the Cloud Editor, and it is a really easy process that requires very little coding.

The Web Editor helps you keep track on all of your sketches, and with the iframes, including your projects on other pages has never been easier.
The Cloud Editor helps you keep track on all of your sketches, and with the iframes, including your projects on other pages has never been easier.

### More tutorials

Expand Down
Loading