diff --git a/content/arduino-cloud/04.cloud-editor/embedding-create-iframes/assets/Embed_1.png b/content/arduino-cloud/04.cloud-editor/embedding-create-iframes/assets/Embed_1.png new file mode 100644 index 0000000000..79b7e3961e Binary files /dev/null and b/content/arduino-cloud/04.cloud-editor/embedding-create-iframes/assets/Embed_1.png differ diff --git a/content/arduino-cloud/04.cloud-editor/embedding-create-iframes/assets/Share_1.png b/content/arduino-cloud/04.cloud-editor/embedding-create-iframes/assets/Share_1.png new file mode 100644 index 0000000000..48b26e76f9 Binary files /dev/null and b/content/arduino-cloud/04.cloud-editor/embedding-create-iframes/assets/Share_1.png differ diff --git a/content/arduino-cloud/04.cloud-editor/embedding-create-iframes/assets/iframe-highlight.png b/content/arduino-cloud/04.cloud-editor/embedding-create-iframes/assets/iframe-highlight.png deleted file mode 100644 index 96970d099a..0000000000 Binary files a/content/arduino-cloud/04.cloud-editor/embedding-create-iframes/assets/iframe-highlight.png and /dev/null differ diff --git a/content/arduino-cloud/04.cloud-editor/embedding-create-iframes/embedding-create-iframes.md b/content/arduino-cloud/04.cloud-editor/embedding-create-iframes/embedding-create-iframes.md index fec191a2ee..8800ef1812 100644 --- a/content/arduino-cloud/04.cloud-editor/embedding-create-iframes/embedding-create-iframes.md +++ b/content/arduino-cloud/04.cloud-editor/embedding-create-iframes/embedding-create-iframes.md @@ -1,25 +1,26 @@ --- -title: 'Embedding your sketches into an HTML page' -description: 'Learn about different methods when embedding your sketches in a website.' -author: 'Karl Söderby' +title: 'Embed & Share Sketches' +description: 'Learn about sharing your sketches and different methods to embed your sketches in a website.' +author: 'Karl Söderby, Hannes Siebeneicher' --- 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 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. +Embedding an iframe is easy. Simply copy and paste the link from your 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 [Cloud 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://app.arduino.cc/sketches). 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 serial monitor tool. This will open up a new window, that will have two fields: **link** and **embed**. Copy the embed field. -![embed field](assets/iframe-highlight.png) +![Embed in HTML code](./assets/Embed_1.png) + It should look something like this: ```markup - + ``` This iframe can now simply be embedded in a HTML page, and it will look like this: @@ -32,44 +33,73 @@ But there are many ways we can modify the iframe to look different. So let's tak First up is the easiest: making a simple snippet. This removes the other information, such as sketch name and author, and simply presents a good looking snippet! -To do this, we just need to add the following code to the end of the URL: +To do this, we need to change `view-mode=` from `embed` to `snippet` at the end of the URL: ``` -&snippet +&view-mode=snippet ``` The result is the following: - + And the full URL should look like this: ```markup - + ``` - ## Highlighting specific lines Next is the highlighting feature. To use this, simply add the following lines to the end of your URL: ``` -&snippet#L3-L4 +&highlight=L6,7 ``` -The result is that line 3 and 4 are highlighted: +The result is that line 6 and 7 are highlighted: - + And the full URL should look like this: ```markup - + ``` -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: +You can highlight as many lines as you want, and it is easily configurable. For example, if we want to highlight line 4 and 6-9, we simply need to add the following to the URL: ``` -&snippet#L1,L3,L5-L8 +&highlight=L4,L6-L9 +``` + +## Scope + +It's also possible to only show specific lines by adding the `scope` parameter, like this: + +```markup +&scope=L24-L37 +``` + +The result is that only lines 24 to 37 are shown. + + + +The full URL should look like this: +```markup + +``` + +## Hide Numbers + +To hide the line numbers in the embedded snippet, add the `&hide-numbers` parameter, like this: + +```markup +&hide-numbers +``` + +The full URL should look like this: +```markup + ``` ## Manually changing the size of your widget @@ -90,7 +120,7 @@ style="height:200px;width:50%;margin:10px 0" Which will look like this: - + ## Automatically re-sizing your sketches @@ -100,13 +130,17 @@ We can also choose to automatically re-size our iframes. This is simply done by ``` -And then using the class `arduino-sketch-iframe` in your HTML element. +And then using the class `arduino-sketch-iframe` in your `HTML element`. + +## Share your Code + +If you want to share you're code with others can you do so by following the same steps as above, but instead of clicking on "Embed in HTML code:" you click on "Link to share:" -## Summary +![Share Code](./assets/Share_1.png) -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. +This link will direct others to a preview of our code where they can copy it or directly add it to their sketchbook. -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. +***Note: If you want to learn how to keep sensitive data in your code safe, read [Store Sensitive Data in Sketches](/arduino-cloud/cloud-editor/share-your-sketches/).*** ### More tutorials diff --git a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_gif_1.gif b/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_gif_1.gif deleted file mode 100644 index dbd61a5df6..0000000000 Binary files a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_gif_1.gif and /dev/null differ diff --git a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_gif_2.gif b/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_gif_2.gif deleted file mode 100644 index 1798bd132f..0000000000 Binary files a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_gif_2.gif and /dev/null differ diff --git a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_1.jpg b/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_1.jpg deleted file mode 100644 index 588c60e879..0000000000 Binary files a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_1.jpg and /dev/null differ diff --git a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_2.jpg b/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_2.jpg deleted file mode 100644 index a3f9c739a3..0000000000 Binary files a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_2.jpg and /dev/null differ diff --git a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_3.jpg b/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_3.jpg deleted file mode 100644 index 253984569c..0000000000 Binary files a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_3.jpg and /dev/null differ diff --git a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_4.jpg b/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_4.jpg deleted file mode 100644 index b5301b9aaa..0000000000 Binary files a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_4.jpg and /dev/null differ diff --git a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_5.jpg b/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_5.jpg deleted file mode 100644 index eb573ed312..0000000000 Binary files a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_5.jpg and /dev/null differ diff --git a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_6.jpg b/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_6.jpg deleted file mode 100644 index 044a7b923c..0000000000 Binary files a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_6.jpg and /dev/null differ diff --git a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_7.jpg b/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_7.jpg deleted file mode 100644 index a3f9c739a3..0000000000 Binary files a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_7.jpg and /dev/null differ diff --git a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_8.jpg b/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_8.jpg deleted file mode 100644 index a49a590c46..0000000000 Binary files a/content/arduino-cloud/04.cloud-editor/share-your-sketches/assets/sharing_sketches_img_8.jpg and /dev/null differ diff --git a/content/arduino-cloud/04.cloud-editor/share-your-sketches/share-your-sketches.md b/content/arduino-cloud/04.cloud-editor/share-your-sketches/share-your-sketches.md deleted file mode 100644 index 65885a47d8..0000000000 --- a/content/arduino-cloud/04.cloud-editor/share-your-sketches/share-your-sketches.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: 'Share Your Sketches on the Arduino Web Editor' -description: 'Learn about different methods you can use to share your Arduino sketches with others.' ---- - -## Share Your Sketches on the Arduino Web Editor - -The [Arduino Web Editor](https://create.arduino.cc/editor) is the online IDE developed by the Arduino team, this web app is part of the [Arduino Cloud platform](https://cloud.arduino.cc/home/). If you are new to it you can learn all about it on this [Getting Started tutorial](/arduino-cloud/getting-started/getting-started-web-editor). - -The Arduino sketch is the unit that can include everything you need to bring an idea to life. With the **Share feature** of the Web Editor you can simply give someone access to your sketches just by sending them a URL, or by embedding the sketch into a webpage or in a Project Hub tutorial. - -When someone [shares a sketch with you](https://create.arduino.cc/editor/Arduino_Genuino/a5cf7fad-0802-49b6-81ce-2a5bf41bed5d/preview), you’ll have access both to the code, the layout for the electronics, and the full tutorial (when available). This will allow you to have all the necessary information to build on top of the original project, making it your own. Keep on reading and discover how to do it! - -## How to Share Your Sketch - -* If you don’t have one yet, create your brand new Arduino account [here](https://id.arduino.cc/auth/signup). - -* Log in on Arduino the Web Editor [here](https://create.arduino.cc/editor/). - -* Once you are successfully logged in the Web Editor, hit the ‘New Sketch’ button and code on - -* When done with writing your sketch, click the **‘Share’** button on the toolbar in the editor area. Press **'Copy Link'** and you can now share your Arduino code with the rest of the world! - -![sharing_sketches_img_1](assets/sharing_sketches_img_1.jpg) -![sharing_sketches_img_2](assets/sharing_sketches_img_2.jpg) - -We will now show you three ways to do so. - -### 1. Add Your Sketch to a Project Hub Tutorial - -![sharing_sketches_gif_1](assets/sharing_sketches_gif_1.gif) - -Embed your sketch and share it on Project Hub is super easy! Simply create a new project. - -![sharing_sketches_img_3](assets/sharing_sketches_img_3.jpg) - -Once you are done with the Story and the previous fields go to the Software tab. In the ‘Code’ section, click on **‘Link to the Arduino Web Editor’** or **‘Link Existing Repository’**. - -![sharing_sketches_img_4](assets/sharing_sketches_img_4.jpg) -![sharing_sketches_img_5](assets/sharing_sketches_img_5.jpg) - -Give your sketch a title, add some comments and finally copy here the sketch public URL you got previously on the Web Editor. That’s it! Your sketch is now available here and it will always be up-to-date with your latest edits. It will look like this on your tutorial page: - -![sharing_sketches_img_6](assets/sharing_sketches_img_6.jpg) - -### 2. Share Your Sketch via a Public URL - -![sharing_sketches_img_7](assets/sharing_sketches_img_7.jpg) - -In the [Arduino Web Editor](https://create.arduino.cc/editor) hit the **‘Share’** button, a popup window will be displayed. Click **‘Copy link’** to copy your sketch’s public URL on your clipboard. When you paste this URL in a new tab of your browser you will see a preview of your sketch. You won't even need to be logged in with an Arduino account, so anybody can access it. - -The people you shared you sketch with can now download it or add it to their sketchbook (after having signed up to the Arduino Web Editor of course). If you have embedded [your sketch](https://create.arduino.cc/editor/Arduino_Genuino/a5cf7fad-0802-49b6-81ce-2a5bf41bed5d/preview) in a Project Hub tutorial you will see the ‘Open Tutorial’ button displayed to this page as well. - -When you share a sketch with all these supporting contents (layout, schematics, tutorial...) with a friend, a colleague or in your classroom, they will have everything needed to build up from your idea and make it their own! - -![sharing_sketches_img_8](assets/sharing_sketches_img_8.jpg) - -### 3. Embed Your Sketch on a Web Page - -In the same Share popup window you can also copy your project’s related iFrame and paste it into your HTML page. You will also be able to edit its size and format in order to fit with your page design by editing the iFrame attributes. - -![sharing_sketches_gif_2](assets/sharing_sketches_gif_2.gif) - -## Always Up-To-Date! - -Now your code is ready to be shared across a variety of platforms! Do you know what’s cool about this feature? Now that your sketch is on the Cloud (literally!) once edited on the Web Editor, it will be also updated across all the places where you have embedded it! - -### More tutorials - -You can find more tutorials in the [Arduino Cloud documentation page](/arduino-cloud). \ No newline at end of file