diff --git a/index.html b/index.html
index 4006b30..4d5b62b 100644
--- a/index.html
+++ b/index.html
@@ -928,7 +928,7 @@ <h4 id="compile-and-run">Compile and Run</h4>
 <p class="page" id="Porting"></p><h1>Porting</h1>
 <p><em>Written for v6.0</em></p>
 <h2 id="system-architecture">System architecture</h2>
-<p><img src="http://docs.littlevgl.com/img/sys.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/sys.png" /></p>
 <p><strong>Application</strong>
 Your application which creates the GUI and handles the specific tasks.</p>
 <p><strong>LittlevGL</strong>
@@ -1382,7 +1382,7 @@ <h2 id="using-styles">Using styles</h2>
 <p>Setting the //glass style property will prevent inheriting that style//. You should use it if the style is transparent so that its children use colors and others from its parent.</p>
 <h2 id="built-in-styles">Built-in styles</h2>
 <p>There are several built-in styles in the library:</p>
-<p><img src="http://docs.littlevgl.com/img/style-built-in.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/style-built-in.png" /></p>
 <p>As you can see there is a style for screens, for buttons, plain and pretty styles and transparent styles as well. The <code>lv_style_transp</code>, <code>lv_style_transp_fit</code> and <code>lv_style_transp_tight</code> differ only in paddings: for <code>lv_style_transp_tight</code> all padings are zero, for <code>lv_style_transp_fit</code> only hor and ver paddings are zero.</p>
 <p>The built in styles are global lv_style_t variables so you can use them like: lv_btn_set_style(obj, LV_BTN_STYLE_REL, &amp;lv_style_btn_rel)</p>
 <p>You can modify the built-in styles or you can create new styles. When creating new styles it is recommended to first copy a built-in style to be sure all fields are initialized with a proper value. The lv_style_copy(&amp;dest_style, &amp;src_style) can be used to copy styles.</p>
@@ -1400,7 +1400,7 @@ <h2 id="style-animations">Style animations</h2>
 a.repeat_pause = <span class="hljs-number">0</span>;                 <span class="hljs-comment">/*Wait before repeat [ms]*/</span>
 a.end_cb = <span class="hljs-literal">NULL</span>;                    <span class="hljs-comment">/*Call this function when the animation ready*/</span></pre><h2 id="style-example">Style example</h2>
 <p>The example below demonstrates the above-described style usage</p>
-<p><img src="http://docs.littlevgl.com/img/style-example.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/style-example.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style1;
 lv_style_copy(&amp;style1, &amp;lv_style_plain);    <span class="hljs-comment">/*Copy a built-in style to initialize the new style*/</span>
@@ -1437,7 +1437,7 @@ <h2 id="style-animations">Style animations</h2>
 theme.btn.tgl_pr    <span class="hljs-comment">/*Toggled pressed button style*/</span>
 theme.btn.ina       <span class="hljs-comment">/*Inactive button style*/</span></pre><p>A theme can initialized by: <code>lv_theme_xxx_init(hue, font)</code>. Where xxx is the name of the theme, <em>hue</em> is a Hue value from HSV color space (0..360) and <em>font</em> is the font applied in the theme (<code>NULL</code> to use the <code>LV_FONT_DEFAULT</code> default font)</p>
 <p>When a theme is initialized its styles can be used like this:</p>
-<p><img src="http://docs.littlevgl.com/img/theme-example.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/theme-example.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a default slider*/</span>
 <span class="hljs-keyword">lv_obj_t</span> *slider = lv_slider_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_slider_set_value(slider, <span class="hljs-number">70</span>);
@@ -1860,7 +1860,7 @@ <h2 id="notes">Notes</h2>
 <li>Currently the Arc object <strong>does not support anti-aliasing</strong>.</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/arc-lv_arc.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/arc-lv_arc.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create style for the Arcs*/</span>
 <span class="hljs-keyword">lv_style_t</span> style;
 lv_style_copy(&amp;style, &amp;lv_style_plain);
@@ -1901,7 +1901,7 @@ <h2 id="notes">Notes</h2>
 <li>The indicator is not a real object; it is only drawn by the bar.</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/bar-lv_bar.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/bar-lv_bar.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a default bar*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * bar1 = lv_bar_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_size(bar1, <span class="hljs-number">200</span>, <span class="hljs-number">30</span>);
@@ -1956,7 +1956,7 @@ <h2 id="overview">Overview</h2>
 <p>The <strong>object size</strong> can be modified with <code>lv_obj_set_width(obj, new_width)</code> and <code>lv_obj_set_height(obj, new_height)</code> or in one function with <code>lv_obj_set_size(obj, new_width, new_height)</code>. </p>
 <p>Note that these functions only work for objects with a parent. Screens do not have a parent, and attempting to use these functions will result in undefined behavior.</p>
 <p>You can <strong>align</strong>  the object to an other with <code>lv_obj_align(obj1, obj2, LV_ALIGN_TYPE, x_shift, y_shift)</code>. The last two argument means an x and y shift after the alignment. The second argument is another object on which to align the first (<code>NULL</code> means: align to the parent). The third argument is the type of alignment:
-<img src="http://docs.littlevgl.com/img/align.png" /></p>
+<img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/align.png" /></p>
 <p>The alignment types build like: <code>LV_ALIGN_OUT_TOP_MID</code>. For example to align a text below an image: <code>lv_obj_align(text, image, LV_ALIGN_OUT_BOTTOM_MID, 0, 10)</code>. Or to align a text in the middle of its parent: <code>lv_obj_align(text, NULL, LV_ALIGN_CENTER, 0, 0)</code>. </p>
 <p>You can set a <strong>new parent</strong> for an object with <code>lv_obj_set_parent(obj, new_parent)</code>.</p>
 <p>To get the children of an object use <code>lv_obj_get_child(obj, child_prev)</code> (from last to first) or <code>lv_obj_get_child_back(obj, child_prev)</code> (from first to last). To get the first child pass <em>NULL</em> as the second parameter and then the previous child (return value). The function will return with <em>NULL</em> when there are no more children.</p>
@@ -1999,7 +1999,7 @@ <h2 id="overview">Overview</h2>
 <h2 id="style-usage">Style usage</h2>
 <p>All <em>style.body</em> properties are used. Default for screens  _lv_style_plain_  and _lv_style_plain_color_ for normal objects</p>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/base-obj-lv_obj.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/base-obj-lv_obj.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a simple base object*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * obj1;
 obj1 = lv_obj_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
@@ -2064,7 +2064,7 @@ <h2 id="notes">Notes</h2>
 <li>If a button was long pressed and its long press action was set then its click action will not be called</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/button-lv_btn.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/button-lv_btn.png" /></p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">static</span> lv_res_t <span class="hljs-title">btn_click_action</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * btn)</span>
 </span>{
     <span class="hljs-keyword">uint8_t</span> id = lv_obj_get_free_num(btn);
@@ -2147,7 +2147,7 @@ <h2 id="notes">Notes</h2>
 <li>The Button matrix object is <strong>very light weighted</strong>. It creates only the Background Base object and draws the buttons on it instead of creating a lot of real button.</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/button-matrix-lv_btnm.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/button-matrix-lv_btnm.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Called when a button is released ot long pressed*/</span>
 <span class="hljs-function"><span class="hljs-keyword">static</span> lv_res_t <span class="hljs-title">btnm_action</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * btnm, <span class="hljs-keyword">const</span> <span class="hljs-keyword">char</span> *txt)</span>
 </span>{
@@ -2233,7 +2233,7 @@ <h2 id="style-usage">Style usage</h2>
 <li><strong>LV_CALENDAR_STYLE_TODAY_BOX</strong> <code>body</code> and <code>text</code> properties are used to set the style of the today box</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/calendar-lv_calendar.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/calendar-lv_calendar.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a Calendar object*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * calendar = lv_calendar_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_size(calendar, <span class="hljs-number">240</span>, <span class="hljs-number">220</span>);
@@ -2332,7 +2332,7 @@ <h2 id="style-usage">Style usage</h2>
 </ul>
 <p>The series related parameters can be set directly for each chart with <code>lv_chart_set_series_width()</code>, <code>lv_chart_set_series_opa()</code> and  <code>lv_chart_set_series_dark()</code>.</p>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/chart-lv_chart.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/chart-lv_chart.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a style for the chart*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style;
 lv_style_copy(&amp;style, &amp;lv_style_pretty);
@@ -2385,7 +2385,7 @@ <h2 id="style-usage">Style usage</h2>
 <li><strong>LV_CB_STYLE_BOX_TGL_PR</strong> Style of the checked released box. Uses the <em>style.body</em> properties. Default: _lv_style_btn_tgl_pr_</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/check-box-lv_cb.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/check-box-lv_cb.png" /></p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">static</span> lv_res_t <span class="hljs-title">cb_release_action</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * cb)</span>
 </span>{
     <span class="hljs-comment">/*A check box is clicked*/</span>
@@ -2466,7 +2466,7 @@ <h2 id="notes">Notes</h2>
 <li>You <strong>can&#39;t set the child position with hor/ver fit enabled</strong>. Let&#39;s imagine what happens. If you change the position of the only child when fit is enabled the the container will move/fit &quot;around&quot; the new position. If you have more objects on a container then you can align them relative to each other.  As a workaround you can create a small transparent object on the container. It will fix the container to not &quot;follow&quot; the children.</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/container-lv_cont.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/container-lv_cont.png" /></p>
 <pre class="hljs"><span class="hljs-keyword">lv_obj_t</span> * box1;
 box1 = lv_cont_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_obj_set_style(box1, &amp;lv_style_pretty);
@@ -2524,7 +2524,7 @@ <h2 id="style-usage">Style usage</h2>
 <li><strong>LV_DDLIST_STYLE_SB</strong> Style of the scrollbar. The <em>style.body</em> properties are used. Default: _lv_style_plain_color_</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/drop-down-list-lv_ddlist.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/drop-down-list-lv_ddlist.png" /></p>
 <pre class="hljs"><span class="hljs-function"><span class="hljs-keyword">static</span> lv_res_t <span class="hljs-title">ddlist_action</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * ddlist)</span>
 </span>{
     <span class="hljs-keyword">uint8_t</span> id = lv_obj_get_free_num(ddlist);
@@ -2583,7 +2583,7 @@ <h2 id="style-usage">Style usage</h2>
 <li><strong>text.font/color/letter_space</strong> label attributes</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/gauge-lv_gauge.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/gauge-lv_gauge.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style;
 lv_style_copy(&amp;style, &amp;lv_style_pretty_color);
@@ -2643,7 +2643,7 @@ <h2 id="notes">Notes</h2>
 <li>Symbols names (like SYMBOL_EDIT) are short strings, therefore, you can concatenate them to show more symbols.</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/image-lv_img.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/image-lv_img.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Declare a cogwheel image variable*/</span>
 LV_IMG_DECLARE(img_cw);
 
@@ -2729,7 +2729,7 @@ <h2 id="style-usage">Style usage</h2>
 </ul>
 <h2 id="notes">Notes</h2>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/image-button-lv_imgbtn.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/image-button-lv_imgbtn.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create style to make the button darker when pressed*/</span>
 <span class="hljs-keyword">lv_style_t</span> style_pr;
 lv_style_copy(&amp;style_pr, &amp;lv_style_plain);
@@ -2787,7 +2787,7 @@ <h2 id="style-usage">Style usage</h2>
 <li><strong>LV_KB_STYLE_BTN_INA</strong> style of the inactive  buttons. Default: _lv_style_btn_ina_</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/keyboard-lv_kb.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/keyboard-lv_kb.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create styles for the keyboard*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> rel_style, pr_style;
 
@@ -2840,7 +2840,7 @@ <h2 id="notes">Notes</h2>
 <li>To <strong>modify the height of the buttons</strong> adjust the <em>body.padding.ver</em> field of the corresponding style (LV_LIST_STYLE_BTN_REL , LV_LIST_STYLE_BTN_PR etc.)</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/list-lv_list.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/list-lv_list.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Will be called on click of a button of a list*/</span>
 <span class="hljs-function"><span class="hljs-keyword">static</span> lv_res_t <span class="hljs-title">list_release_action</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * list_btn)</span>
 </span>{
@@ -2933,7 +2933,7 @@ <h2 id="notes">Notes</h2>
 <li>Typically the default style is not suitable therefore you have to create you own style. See the Examples.</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/led-lv_led.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/led-lv_led.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a style for the LED*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_led;
 lv_style_copy(&amp;style_led, &amp;lv_style_pretty_color);
@@ -2986,7 +2986,7 @@ <h2 id="style-usage">Style usage</h2>
 </ul>
 <h2 id="notes">Notes</h2>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/line-lv_line.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/line-lv_line.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create an array for the points of the line*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_point_t</span> line_points[] = { {<span class="hljs-number">5</span>, <span class="hljs-number">5</span>}, {<span class="hljs-number">70</span>, <span class="hljs-number">70</span>}, {<span class="hljs-number">120</span>, <span class="hljs-number">10</span>}, {<span class="hljs-number">180</span>, <span class="hljs-number">60</span>}, {<span class="hljs-number">240</span>, <span class="hljs-number">10</span>} };
 
@@ -3040,7 +3040,7 @@ <h2 id="notes">Notes</h2>
 <li>It looks better if the scale angle is: (line number - 1) * N, where N is an integer</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/line-meter-lv_lmeter.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/line-meter-lv_lmeter.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*******************************
  * Create 3 similar line meter
  *******************************/</span>
@@ -3149,7 +3149,7 @@ <h2 id="style-usage">Style usage</h2>
 <h2 id="notes">Notes</h2>
 <p>The label&#39;s <strong>click enable attribute is disabled</strong> by default. You can enable clicking with <code>lv_obj_set_click(label, true)</code></p>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/label-lv_label.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/label-lv_label.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create label on the screen. By default it will inherit the style of the screen*/</span>
 <span class="hljs-keyword">lv_obj_t</span> * title = lv_label_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_label_set_text(title, <span class="hljs-string">"Title Label"</span>);
@@ -3197,7 +3197,7 @@ <h2 id="notes">Notes</h2>
 <li>The <strong>height of the buttons</strong> comes from the <em>font height</em> + 2 × <em>body.vpad</em> of _LV_MBOX_STYLE_BTN_REL_</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/message-box-lv_mbox.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/message-box-lv_mbox.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Called when a button is clicked*/</span>
 <span class="hljs-function"><span class="hljs-keyword">static</span> lv_res_t <span class="hljs-title">mbox_apply_action</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * mbox, <span class="hljs-keyword">const</span> <span class="hljs-keyword">char</span> * txt)</span>
 </span>{
@@ -3301,7 +3301,7 @@ <h2 id="notes">Notes</h2>
 <li>The background draws its border when the scrollable is drawn. It ensures that the page always will have closed shape even if the scrollable has the same color as the page&#39;s parent.</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/page-lv_page.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/page-lv_page.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a scroll bar style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_sb;
 lv_style_copy(&amp;style_sb, &amp;lv_style_plain);
@@ -3346,7 +3346,7 @@ <h2 id="style-usage">Style usage</h2>
 <li><strong>border</strong> is described by the <code>body.border</code> properties including <code>body.padding.hor/ver</code> (smaller is used) to give a smaller radius for the border.</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/preloader-lv_preload.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/preloader-lv_preload.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a style for the Preloader*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style;
 lv_style_copy(&amp;style, &amp;lv_style_plain);
@@ -3379,7 +3379,7 @@ <h2 id="style-usage">Style usage</h2>
 <li><strong>LV_ROLLER_STYLE_SEL</strong> Style of the selected option.  The <em>style.body</em> properties are used. The selected option will be recolored with <em>text.color</em>. Default: _lv_style_plain_color_</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/roller-lv_roller.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/roller-lv_roller.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a default roller*/</span>
 <span class="hljs-keyword">lv_obj_t</span> *roller1 = lv_roller_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
 lv_roller_set_options(roller1, <span class="hljs-string">"Apple\n"</span>
@@ -3455,7 +3455,7 @@ <h2 id="keys">Keys</h2>
 <li><strong>LV_KEY_DOWN</strong>, <strong>LV_KEY_LEFT</strong> Decrement the slider&#39;s value by 1</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/slider-lv_slider.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/slider-lv_slider.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Called when a new value id set on the slider*/</span>
 <span class="hljs-function"><span class="hljs-keyword">static</span> lv_res_t <span class="hljs-title">slider_action</span><span class="hljs-params">(<span class="hljs-keyword">lv_obj_t</span> * slider)</span>
 </span>{
@@ -3565,7 +3565,7 @@ <h2 id="notes">Notes</h2>
 <li>The Knob is not a real object it is only drawn above the Bar</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/switch-lv_sw.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/switch-lv_sw.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create styles for the switch*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> bg_style;
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> indic_style;
@@ -3629,7 +3629,7 @@ <h2 id="style-usage">Style usage</h2>
 </ul>
 <h2 id="notes">Notes</h2>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/tab-view-lv_tabview.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/tab-view-lv_tabview.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a Tab view object*/</span>
 <span class="hljs-keyword">lv_obj_t</span> *tabview;
 tabview = lv_tabview_create(lv_scr_act(), <span class="hljs-literal">NULL</span>);
@@ -3699,7 +3699,7 @@ <h2 id="notes">Notes</h2>
 <li>In password mode <code>lv_ta_get_text(ta)</code> gives the real text and not the asterisk characters</li>
 </ul>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/text-area-lv_ta.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/text-area-lv_ta.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a scroll bar style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_sb;
 lv_style_copy(&amp;style_sb, &amp;lv_style_plain);
@@ -3756,7 +3756,7 @@ <h2 id="style-usage">Style usage</h2>
 </ul>
 <h2 id="notes">Notes</h2>
 <h2 id="example">Example</h2>
-<p><img src="http://docs.littlevgl.com/img/window-lv_win.png" /></p>
+<p><img src="https://gcec-2918.github.io/LVGL_v5-3_Documentation_Archive/docs_v5_3/img/window-lv_win.png" /></p>
 <pre class="hljs"><span class="hljs-comment">/*Create a scroll bar style*/</span>
 <span class="hljs-keyword">static</span> <span class="hljs-keyword">lv_style_t</span> style_sb;
 lv_style_copy(&amp;style_sb, &amp;lv_style_plain);