diff --git a/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples.inc b/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples.inc
index 8638a1950..f007fb189 100644
--- a/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples.inc
+++ b/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples.inc
@@ -35,11 +35,14 @@ WEBGL_REQUIRED = " \
${WEBGL_SAMPLE_DEPS} \
"
-# List of video samples
-VIDEO_SAMPLES = " \
- big_buck_bunny.mov \
- big_buck_bunny.webm \
+# List of video sample formats
+VIDEO_FORMATS = " \
+ mov \
+ webm \
"
+# Name of the video sample
+VIDEO_NAME = "big_buck_bunny"
+VIDEO_NAME_UPPERCASE = "Big Buck Bunny"
# All packages involved in the webkit examples install their files in the
# webserver directory
diff --git a/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples/digi.css b/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples/digi.css
deleted file mode 100644
index 6d04ea977..000000000
--- a/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples/digi.css
+++ /dev/null
@@ -1,1617 +0,0 @@
-/*************************************************/
-/*************** General Design **************/
-/*************************************************/
-@font-face {
- font-family: 'Open Sans';
- src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
-}
-
-body, .controls a.navbar-brand {
- font-family: "Open Sans", Arial, "sans serif";
- word-break: break-word;
-}
-
-h1, #content h1 > a.link,
-h2, h2 > a.link,
-h3, h3 > a.link,
-h4, h4 > a.link,
-h5, h5 > a.link,
-h6, h6 > a.link,
-#toctitle, #toctitle > a.link,
-.sidebarblock > .content > .title,
-.sidebarblock > .content > .title > a.link {
- color: #84C361;
-}
-
-@media only screen and (min-width: 768px) {
- h1 {
- font-size: 2.5em;
- }
-}
-
-.admonitionblock td.content > .title,
-.audioblock > .title, .exampleblock > .title,
-.imageblock > .title, .listingblock > .title,
-.literalblock > .title, .stemblock > .title,
-.openblock > .title, .paragraph > .title,
-.quoteblock > .title, table.tableblock > .title,
-.verseblock > .title, .videoblock > .title,
-.dlist > .title, .olist > .title, .ulist > .title,
-.qlist > .title, .hdlist > .title {
- font-family: "Open Sans", Arial, "sans serif";
- color: #646466;
-}
-
-table {
- table-layout: fixed;
- width: 100%;
-}
-
-/* Source code tables (auto width for proper line number rendering) */
-table.pyhltable {
- width: auto;
-}
-
-table > thead > tr > th {
- background-color: #717474;
- font-weight: bold;
-}
-
-table.tableblock {
- font-size: 14px;
-}
-
-table.tableblock td > p,
-table.tableblock td > p:last-child {
- margin-top: 0px;
- margin-bottom: 0px;
-}
-
-table > tbody > tr:nth-of-type(odd),
-table > tbody > tr:nth-of-type(even) {
- background: transparent;
-}
-
-pre.pygments.highlight {
- margin: 0px;
-}
-
-pre {
- margin: 0px;
-}
-
-.literalblock pre, .literalblock pre[class],
-.listingblock pre, .listingblock pre[class] {
- -webkit-border-radius: 0px;
- border-radius: 0px;
- border-width: 0px;
- background: #F7F7F8;
-}
-
-.listingblock > .title {
- font-size: 15px;
- margin-top: 30px;
- background-color: #717474;
- color: white;
- padding: 8px 10px;
- margin-bottom: 0px;
- font-style: normal;
-}
-
-.listingblock > .content > pre > code,
-.literalblock > .content > pre > code,
-.listingblock > .content > pre,
-.literalblock > .content > pre {
- white-space: pre;
- font-size: 14px;
-}
-
-.listingblock > .content > pre,
-.literalblock > .content > pre {
- word-break: keep-all;
- word-wrap: normal;
- /*padding-top: 30px;*/
-}
-
-h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], dt[id] {
- padding-top: 10px;
-}
-
-.sect1, .sect2, .sect3, .sect4 {
- padding-top: 50px;
-}
-
-.sect1 + .sect1 {
- border-top: 0px;
-}
-
-a:link, a:visited, a:active {
- text-decoration: none;
- outline: none !important;
-}
-
-#tg-sb-content a:link, #tg-sb-content a:visited, #tg-sb-content a:active,
-#topic-platform a:link, #topic-platform a:visited, #topic-platform a:active {
- color: #0074A2;
-}
-
-#tg-sb-content a:hover, footer .links a:hover, #topic-platform a:hover {
- color: #00B7FF;
-}
-
-p, blockquote, dt, td.content, span.alt,
-.admonitionblock > table td.content,
-p.lead, .paragraph.lead > p,
-#preamble > .sectionbody > .paragraph:first-of-type p {
- font-size: 16px;
-}
-
-p, .admonitionblock > table td.content,
-p.lead, .paragraph.lead > p,
-#preamble > .sectionbody > .paragraph:first-of-type p {
- line-height: 26px;
-}
-
-.paragraph.lead > p,
-#preamble > .sectionbody > .paragraph:first-of-type p {
- color: inherit;
-}
-
-.nav li a {
- line-height: 24px;
-}
-
-.nav > li > ul > li > a {
- font-size: 12px;
- line-height: 22px;
-}
-
-.scroll-line {
- top: 0px;
- position: fixed;
- height: 4px;
- background: #84C361;
- width: 0%;
- z-index: 2000;
-}
-/*
-.copy-button:before {
- content: '';
- display: inline-block;
- width: 18px;
- height: 18px;
- margin-right: 3px;
- background-size: contain;
- background-image: url(../../assets/images/clipboard.png);
- background-repeat: no-repeat;
- position: relative;
- top: 3px;
-}
-
-.copy-button:hover:before {
- background-image: url(../../assets/images/clipboard_white.png);
-}
-
-.copy-button {
- cursor: pointer;
- border: 0;
- font-size: 14px;
- text-transform: uppercase;
- font-weight: 500;
- padding: 2px 4px 4px;
- color: #646466;
- background-color: transparent;
- position: absolute;
- top: 0;
- right: 0;
-}
-
-.copy-button:hover, .copy-button:active, .copy-button:focus {
- outline: 0;
-}
-
-.copy-button:hover {
- background-color: #84C361;
- color: #FFFFFF;
-}
-
-.copy-button:active{
- background-color: #EEEEEE;
-}*/
-
-.listingblock code[data-lang]:before,
-.listingblock:hover code[data-lang]:before {
- display: none;
- /*bottom: 0.425rem;
- top: auto;
- font-size: 16px;
- text-transform: uppercase;
- font-weight: 500;*/
-}
-
-/* Math formulae */
-.MathJax {
- font-size: 85% !important;
-}
-
-/* Rotated-cell text (for narrow columns) */
-.rotated-cell {
- writing-mode: sideways-lr;
- text-align: right !important;
-}
-
-/********************************************************/
-/**************** Expand/Collapse elements **************/
-/********************************************************/
-
-a.collapser, a.collapser:link, a.collapser:hover,
-a.collapser:visited, a.collapser:active {
- outline: none;
-}
-
-div .collapse, div .collapsing {
- padding-left: 25px;
- padding-right: 25px;
-}
-
-i.clps.arrow {
- border: solid #717174;
- border-width: 0 3px 3px 0;
- display: inline-block;
- padding: 3px;
- margin-top: 8px;
- margin-right: 15px;
-}
-
-.clps.arrow.right {
- transform: rotate(-45deg);
- -webkit-transform: rotate(-45deg);
- float: left !important;
-}
-
-.clps.arrow.left {
- transform: rotate(135deg);
- -webkit-transform: rotate(135deg);
- float: left !important;
-}
-
-.clps.arrow.up {
- transform: rotate(-135deg);
- -webkit-transform: rotate(-135deg);
- float: left !important;
-}
-
-.clps.arrow.down {
- transform: rotate(45deg);
- -webkit-transform: rotate(45deg);
- float: left !important;
-}
-
-/********************************************************/
-/*** Note, Tip, Warning, Caution and Important blocks ***/
-/********************************************************/
-.admonitionblock > table {
- border-collapse: collapse;
- border: solid;
- border-color: #EEEEEE;
- border-width: 1px;
- width: 100%;
-}
-
-.admonitionblock > table thead > tr > th,
-.admonitionblock > table > tbody > tr > th,
-.admonitionblock > table > tfoot > tr > th,
-.admonitionblock > table > thead > tr > td,
-.admonitionblock > table > tbody > tr > td,
-.admonitionblock > table > tfoot > tr > td {
- border-top: none;
-}
-
-.admonitionblock > table > tbody > tr {
- background-color: #FFFFFF;
- border-left-style: solid;
- border-left-width: 6px;
-}
-
-.admonitionblock > table td.icon {
- font-size: 20px;
- padding: 10px 15px !important;
- text-align: left;
- width: 60px;
-}
-
-.admonitionblock > table td.content {
- padding-left: 0px;
-}
-
-/* Note Block */
-.admonitionblock td.icon .icon-note:before {
- content: "\F05A";
- text-shadow: none;
- color: #00B7FF;
-}
-.admonitionblock.note > table > tbody > tr {
- border-left-color: #00B7FF;
-}
-
-/* Tip Block */
-.admonitionblock td.icon .icon-tip:before {
- content: "\F058";
- text-shadow: none;
- color: #669900;
-}
-.admonitionblock.tip > table > tbody > tr {
- border-left-color: #669900;
-}
-
-/* Warning Block */
-.admonitionblock td.icon .icon-warning:before {
- content: "\F06A";
- text-shadow: none;
- color: #E67300;
-}
-.admonitionblock.warning > table > tbody > tr {
- border-left-color: #E67300;
-}
-
-/* Caution Block */
-.admonitionblock td.icon .icon-caution:before {
- content: "\F071";
- text-shadow: none;
- color: #D14124;
-}
-.admonitionblock.caution > table > tbody > tr {
- border-left-color: #D14124;
-}
-
-/* Important Block */
-.admonitionblock td.icon .icon-important:before {
- content: "\F024";
- text-shadow: none;
- color: #CC0000;
-}
-.admonitionblock.important > table > tbody > tr {
- border-left-color: #CC0000;
-}
-
-/*************************************************/
-/**************** Top Banner *****************/
-/*************************************************/
-.banner {
- background-color: #717174;
- z-index: 1000;
-}
-
-#banner-digi, #banner-digi img {
- height: 70px;
-}
-
-#banner-digi img {
- float: left;
- padding: 15px 0px;
- cursor: pointer;
-}
-
-#banner-text {
- color: #FFFFFF;
- font-weight: bold;
- font-size: 20px;
- padding-top: 34px;
- float: left;
- margin-bottom: 0px;
-}
-
-#banner-preliminary {
- color: #FFFFFF;
- font-size: 14px;
- font-style: italic;
- float: right;
- margin-bottom: 0px;
- text-align: right;
-}
-
-/*************************************************/
-/****************** Footer *******************/
-/*************************************************/
-footer {
- clear: both;
- background-color: #717174;
- margin: 50px 0px 0px 0px;
-}
-
-footer .row {
- margin-right: 0px;
- margin-left: 0px;
-}
-
-footer .links {
- column-count: 3;
- -webkit-column-count: 3;
- text-align: left;
- padding: 20px 0px;
- padding-left: 20px;
-}
-
-footer .links a {
- display: inline-block;
- width: 120%;
- padding: 4px 5px;
- color: white;
- font-size: 14px;
- line-height: 1.5em;
-}
-
-footer .links a[href^="http://"]:after,
-footer .links a[href^="https://"]:after {
- content: none;
-}
-
-footer .copyright {
- font-size: 15px;
- color: white;
- padding: 25px 0px;
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-end;
-}
-
-footer .copyright-info {
- line-height: 1.4;
- padding-top: 2px;
-}
-
-footer .footer-icon {
- padding-left: 20px;
- padding-top: 8px;
-}
-
-footer .footer-icon img {
- height: 30px;
-}
-
-/*This section is to make the footer sticky*/
-#main-container {
- display: flex;
- flex-direction: column;
-}
-
-.container {
- flex: 1 0 auto;
-}
-
-footer {
- flex-shrink: 0;
-}
-
-.scrollup {
- position: fixed;
- bottom: 40px;
- right: 40px;
- display: none;
- background: #84C361;
- width: 60px;
- height: 60px;
- border-radius: 50px;
- text-align: center;
- z-index: 100;
-}
-
-@media (max-width: 576px) {
- .scrollup {
- width: 40px;
- height: 40px;
- bottom: 20px;
- right: 20px;
- }
-}
-
-.scrollup:focus {
- outline: 0;
-}
-
-.scrollup:hover {
- opacity: 0.8;
-}
-
-.scrollup img {
- margin-top: 14px;
-}
-
-@media (max-width: 576px) {
- .scrollup img {
- margin-top: 11px;
- width: 18px;
- height: 18px;
- }
-}
-
-/*************************************************/
-/************** Navigation bar ***************/
-/*************************************************/
-.navbar {
- min-height: 40px;
-}
-
-.navbar-inverse {
- background-color: #DDDDDD;
- border: none;
-}
-
-.navbar-inverse .navbar-toggle:focus{
- background-color: transparent;
-}
-
-.navbar-inverse .navbar-toggle:active,
-.navbar-inverse .navbar-toggle:hover {
- background-color: #84C361;
-}
-
-.navbar-inverse .navbar-nav>li>a,
-.navbar-inverse .navbar-brand {
- color: #717174;
-}
-
-.navbar-inverse .navbar-toggle {
- border-color: #717174;
-}
-
-.navbar-inverse .navbar-toggle .icon-bar {
- background-color: #717174;
-}
-
-.navbar-toggle {
- margin-top: 3px;
- margin-bottom: 3px;
-}
-
-.navbar-brand {
- height: 40px;
- padding: 10px 15px;
-}
-
-.navbar-inverse .navbar-nav > li > a {
- margin-top: 0px;
- padding: 8px 10px;
-}
-
-.navbar-inverse .navbar-nav > li > a:visited,
-.navbar-inverse .navbar-nav > li > a:active {
- color: #717174;
-}
-
-.navbar-inverse .navbar-nav > li > a:hover {
- color: #00B7FF;
-}
-
-#tg-sb-link {
- margin-left: -5px;
- padding-top: 8px;
- height: 40px;
-}
-
-@media (max-width: 1000px){
- .navbar-nav>li {
- float: left;
- }
-
- .navbar-nav {
- float: right !important;
- }
-
- .navbar-left, .navbar-right {
- float: right !important;
- }
-
- #search-input {
- width: 16em;
- }
-
- #tg-sb-toc {
- max-width: none !important;
- }
-}
-
-/*************************************************/
-/************* General Container *************/
-/*************************************************/
-@media (min-width: 300px) {
- /* All column types have the same with because with this resoulution only the
- content is shown. We don't know what type of column it will be assigned, so
- we set all of them to the same value to avoid problems. This is related to
- the javascript in the toc.html file.*/
- .col-md-2 {
- width: 290px;
- }
- .col-md-8 {
- width: 290px;
- }
- .col-md-10 {
- width: 290px;
- }
- .col-md-12 {
- width: 290px;
- }
-
- #banner-preliminary {
- width: 100px;
- margin-top: 10px;
- }
-}
-
-@media (min-width: 400px) {
- /* All column types have the same with because with this resoulution only the
- content is shown. We don't know what type of column it will be assigned, so
- we set all of them to the same value to avoid problems. This is related to
- the javascript in the toc.html file.*/
- .col-md-2 {
- width: 380px;
- }
- .col-md-8 {
- width: 380px;
- }
- .col-md-10 {
- width: 380px;
- }
- .col-md-12 {
- width: 380px;
- }
-}
-
-@media (min-width: 470px) {
- /* All column types have the same with because with this resoulution only the
- content is shown. We don't know what type of column it will be assigned, so
- we set all of them to the same value to avoid problems. This is related to
- the javascript in the toc.html file.*/
- .col-md-2 {
- width: 450px;
- }
- .col-md-8 {
- width: 450px;
- }
- .col-md-10 {
- width: 450px;
- }
- .col-md-12 {
- width: 450px;
- }
- #tg-sb-content .tab-panel .nav-tabs > li > a {
- width: auto;
- min-width: 125px;
- max-width: 250px;
- }
-}
-
-/* Small devices (landscape phones, 576px and up) */
-@media (min-width: 576px) {
- .container {
- width: 550px;
- }
- /* All column types have the same with because with this resoulution only the
- content is shown. We don't know what type of column it will be assigned, so
- we set all of them to the same value to avoid problems. This is related to
- the javascript in the toc.html file.*/
- .col-md-2 {
- width: 100%;
- }
- .col-md-8 {
- width: 100%;
- }
- .col-md-10 {
- width: 100%;
- }
- .col-md-12 {
- width: 100%;
- }
- #tg-sb-content .tab-panel .nav-tabs > li > a {
- width: auto;
- min-width: 125px;
- max-width: 250px;
- }
-}
-
-/* Medium devices (tablets, 768px and up) */
-@media (min-width: 768px) {
- .container {
- width: 750px;
- }
- .controls > a {
- height: 40px;
- padding: 8px 30px;
- }
- .navbar>.container .navbar-brand,
- .navbar>.container-fluid .navbar-brand {
- margin-left: 0px;
- }
- .aa-input-search {
- width: 115px;
- }
- .aa-dropdown-menu {
- width: 180px;
- }
-}
-
-/* Large devices (desktops, 992px and up) */
-@media (min-width: 992px) {
- .aa-input-search {
- width: 262px;
- }
- .aa-dropdown-menu {
- width: 360px;
- }
-}
-@media (min-width: 993px) {
- /* With big displays, set the different column types to the specific
- values they should have.*/
- .col-md-2 {
- width: 20%;
- }
- .col-md-8 {
- width: 60%;
- }
- .col-md-10 {
- width: 80%;
- }
- .col-md-12 {
- width: 100%;
- }
- .container {
- width: 960px;
- }
- #banner-preliminary {
- width: 180px;
- margin-top: 38px;
- }
-}
-
-@media (min-width: 1000px) {
- .container {
- width: 920px;
- }
-}
-
-@media (min-width: 1100px) {
- .container {
- width: 1000px;
- }
-}
-
-/* Extra large devices */
-@media (min-width: 1200px) {
- .container {
- width: 1100px;
- }
-}
-
-/* Extra extra large devices (large desktops, 1500px and up) */
-@media (min-width: 1500px) {
- .container {
- width: 1400px;
- }
-}
-
-.container {
- max-width: 1500px;
-}
-
-/*************************************************/
-/****************** Content ******************/
-/*************************************************/
-#tg-sb-content {
- padding-left: 35px;
- padding-right: 35px;
-}
-
-/*************************************************/
-/****************** Sidebar ******************/
-/*************************************************/
-#tg-sb-sidebar, #tg-sb-toc {
- padding-left: 0px;
- padding-right: 0px;
- max-width: 280px;
-}
-
-ul#mysidebar {
- border-right: 5px solid #DDDDDD;
- width: 100%;
- max-width: 300px;
- margin-top: 10px;
-}
-
-.sb-toc-title {
- color: #8D8D8D;
- margin-top: 10px;
- margin-bottom: 0px;
- padding: 0px;
- font-size: 20px;
-}
-
-.sb-toc-title > a {
- color: #8D8D8D;
-}
-
-.sb-toc-title > a:hover {
- color: #717174;
-}
-
-.nav li {
- margin: 0px;
-}
-
-/* First level (main folders)*/
-.nav li.sb-folders a {
- padding-left: 10px;
- margin: 0px;
- background-color: transparent;
- border: 0px;
-}
-
-/* Rest of levels (even the nested ones)*/
-.nav li.sb-folders > ul li {
- padding-left: 20px;
- margin: 0px;
- background-color: transparent;
- border: 0px;
-}
-
-.nav li.sb-folders a:hover, .nav li a.sb-section:hover,
-.nav li a.sb-subsection:hover, .nav li.active a.sb-section:hover,
-.nav li.active a.sb-subsection:hover {
- background-color: #717174;
- color: white;
-}
-
-.nav li a.sb-section {
- font-size: 14px;
- padding-left: 10px;
-}
-
-.nav li a.sb-subsection {
- background-color: transparent;
- font-size: 12px;
- border: 0px;
- padding-left: 20px;
-}
-
-.nav .navbar-nav .navbar-right {
- border: 0px;
-}
-
-.nav li.active > a > span:after,
-.nav li > a > span:after {
- color: #717174;
-}
-
-.nav li.active > a:hover > span:after,
-.nav li > a:hover > span:after {
- color: white;
-}
-
-/*************************************************/
-/************* Table of Contents *************/
-/*************************************************/
-#toc {
- border-bottom: 0px solid transparent;
- padding: 10px 5px;
-}
-
-div#toc ul li {
- margin: 0px;
- font-size: 90%;
- list-style: none;
-}
-
-div#toc ul {
- background-color: transparent;
- margin-bottom: 0px;
- padding: 0px;
-}
-
-div#toc > ul::before {
- content: none;
-}
-
-div#toc > .nav li > a {
- color: #333;
- border-left: 5px solid #DDDDDD;
- background-color: transparent;
- padding-top: 5px;
- padding-bottom: 5px;
-}
-
-div#toc > .nav li > a:hover {
- border-left: 5px solid #717174;
-}
-
-div#toc > .nav > li.active > a {
- border-left: 5px solid #84C361;
- font-weight: bold;
-}
-
-div#toc > .nav > li.active > a:hover {
- border-left: 5px solid #717174;
- font-weight: bold;
-}
-
-div#toc > .nav li > a:active {
- text-decoration: none;
-}
-
-div#toc > .nav ul li a {
- border-top: 0px;
-}
-
-div#toc ul li ul li::before {
- content: none;
-}
-
-div#toc ul li ul {
- padding-left: 0px;
-}
-
-div#toc ul li ul li a {
- padding-left: 25px;
-}
-
-div#toc ul li ul li.active a {
- border-left: 5px solid #717174;
- font-weight: bold;
-}
-
-div#toc ul li ul, div#toc ul li ul li {
- margin: 0px;
-}
-
-/* Remove background color and borders when rendering code with line numbers. */
-.pygments table.pyhltable tbody tr td {
- border: 0px;
-}
-.pygments table.pyhltable tbody tr {
- background-color: transparent;
-}
-
-/*************************************************/
-/*************** Platform topic **************/
-/*************************************************/
-#topic-container {
- border-bottom: 0px solid transparent;
- padding: 10px;
-}
-
-#topic-platform {
- margin-top: 20px;
- margin-bottom: 20px;
- margin-right: 10px;
- background-color: #EEEEEE;
-}
-
-.topic-platform-title {
- font-weight: bold;
- color: #646466;
- margin-bottom: 10px;
- float: left;
- max-width: 80%;
-}
-
-#topic-platform ul {
- list-style: none;
- margin-bottom: 0px;
- margin-left: 0px;
-}
-
-#topic-platform li::before {
- content: "•";
- color: #646466;
- margin-right: 10px;
- font-size: 1.4em;
- line-height: 0px;
-}
-
-#help {
- float: left;
- margin-top: 4px;
- margin-right: 6px;
-}
-
-#topic-container .topic-list {
- clear: both;
- padding: 0px 10px;
-}
-
-/*************************************************/
-/*********** Menu navigation TOC **************/
-/*************************************************/
-.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
- border-color: #646466 !important;
- background-color: #DDDDDD;
- overflow: hidden;
-}
-
-.menu-nav-title {
- color: #646466;
- margin: 15px 0px;
- padding: 0px;
- padding-left: 20px;
- font-size: 24px;
- width: fit-content;
-}
-
-.menu-nav-title a:hover {
- color: #00B7FF;
-}
-
-.menu-nav-contents {
- background-color: #EEEEEE;
-}
-
-.menu-nav a {
- color: #646466;
- display: block;
- outline: none;
- text-decoration: none;
-}
-
-.menu-nav ul {
- padding: 0;
- margin: 0px;
-}
-
-.menu-nav li, .menu-nav li li {
- margin: 0px;
-}
-
-.menu-nav, .menu-nav ul, .menu-nav li {
- list-style: none;
-}
-
-.menu-nav li.sb-folders a {
- padding-left: 60px;
- font-size: 18px;
- margin: 0px;
- background-color: transparent;
- border: 0px;
- padding-top: 2px;
- padding-bottom: 2px;
-}
-
-.menu-nav-contents li.sb-folders a,
-.menu-nav-contents li.sb-folders > ul li {
- padding-left: 30px;
- margin: 0px;
- background-color: transparent;
- border: 0px;
-}
-
-.nav li.active > a,
-.menu-nav-contents li.active > a {
- color: #333;
- font-weight: bold;
- border-top: 1px;
- border-style: solid;
-}
-
-.nav li.super-active > a,
-.menu-nav-contents li.super-active > a {
- background: rgba(132, 195, 97, .25);
-}
-
-.nav li.active > a {
- border-color: white;
-}
-
-.menu-nav-contents li.active > a {
- border-color: #EEEEEE;
-}
-
-.menu-nav li.sb-folders a:hover {
- background-color: #8D8D8D;
- color: white;
-}
-
-.menu-nav li .sb-section {
- background-color: #DDDDDD;
- color: #646466;
- font-size: 24px;
- border: 0px;
- padding: 5px 0px;
- padding-left: 40px;
-}
-
-.menu-nav li .sb-subsection {
- background-color: #EEEEEE;
- font-size: 22px;
- border: 0px;
- padding-left: 60px;
-}
-
-/*************************************************/
-/************** Navigation bar ***************/
-/*************************************************/
-.navbar-collapse {
- margin: 0px;
- padding: 0px;
-}
-
-.navbar-inverse {
- border: 0px;
-}
-
-.navbar-brand > img {
- width: 24px;
- height: 24px;
-}
-
-.controls .control-icon-selected {
- background-color: #84C361;
- height: 5px;
- margin-top: 3px;
- margin-left: -10px;
- margin-right: -10px;
- vertical-align: bottom;
-}
-
-.controls > a {
- float: left;
- padding: 8px 10px;
- outline 0;
-}
-
-.controls a.navbar-brand {
- font-size: 16px;
-}
-
-.controls {
- margin-right: 10px;
- margin-left: 10px;
- height: 40px;
- float: left;
-}
-
-@media (max-width: 768px) {
- .controls {
- margin-left: 0px;
- }
-}
-
-.controls a:link, .controls a:visited, .controls a:active {
- color: #717174;
-}
-
-.controls a:hover, .controls a.navbar-brand:hover {
- color: #00B7FF;
-}
-
-#search {
- margin: 10px 10px;
-}
-
-/*************************************************/
-/***** Genaral purpose show/hide classes ******/
-/*************************************************/
-.display-on {
- display: block;
-}
-.display-off {
- display: none;
-}
-
-/*************************************************/
-/******************** TABS *******************/
-/*************************************************/
-#tg-sb-content .tab-panel {
- margin-bottom: 20px;
- margin-top: 25px;
-}
-
-#tg-sb-content .tab-panel .nav-tabs {
- margin-bottom: 0px;
- border-bottom: 1px solid #ddd;
-}
-
-#tg-sb-content .tab-panel .nav-tabs > li {
- margin: 0px;
- margin-bottom: -1px;
- margin-right: 5px;
-}
-
-#tg-sb-content .tab-panel .nav-tabs > li > a {
- background-color: #ddd;
- color: #646466;
- border: none;
- border-bottom: 1px solid #ddd;
-}
-
-#tg-sb-content .tab-panel .nav-tabs > li > a:hover {
- background-color: #646466;
- color: white;
- border-bottom: 1px solid #646466;
-}
-
-#tg-sb-content .tab-panel .nav-tabs > li.active > a,
-#tg-sb-content .tab-panel .nav-tabs > li.active > a:hover {
- color: #646466;
- background-color: white;
- font-weight: bold;
- border: 1px solid #ddd;
- border-bottom-color: transparent;
-}
-
-#tg-sb-content .tab-panel .tab-content {
- padding: 10px;
- background-color: transparent;
- border-left: 1px solid #ddd;
- border-bottom: 1px solid #ddd;
- border-right: 1px solid #ddd;
- -webkit-box-shadow: 2px 2px 4px #e0e0dc;
- box-shadow: 2px 2px 4px #e0e0dc;
-}
-
-.tab-content > .exampleblock .content {
- background-color: white;
- border: none;
- -webkit-box-shadow: none;
- box-shadow: none;
-}
-
-/********************************************************/
-/******************* Instant Search *****************/
-/********************************************************/
-
-.aa-input-container {
- display: inline-block;
- position: relative;
-}
-
-.aa-input-search {
- padding: 6px 26px 6px 10px;
- border: 2px solid #DDDDDD;
- border-radius: 4px;
- -webkit-transition: .2s;
- transition: .2s;
- font-size: 13px;
- box-sizing: border-box;
- color: #333;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- margin-top: 3px;
-}
-
-.aa-input-search::-webkit-search-decoration,
-.aa-input-search::-webkit-search-cancel-button,
-.aa-input-search::-webkit-search-results-button,
-.aa-input-search::-webkit-search-results-decoration {
- display: none;
-}
-
-.aa-input-search:focus {
- outline: 0;
- border-color: #84C361;
-}
-
-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
- color: #999999;
- opacity: 1; /* Firefox */
-}
-input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
- color: #999999;
-}
-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
- color: #999999;
- opacity: 1;
-}
-input::-moz-placeholder { /* Mozilla Firefox 19+ */
- color: #999999;
- opacity: 1;
-}
-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
- color: #999999;
-}
-input::-ms-input-placeholder { /* Microsoft Edge */
- color: #999999;
-}
-
-.aa-input-icon {
- height: 16px;
- width: 16px;
- position: absolute;
- top: 20px;
- right: 16px;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- fill: #CCCCCC;
-}
-
-.aa-hint {
- color: #DDDDDD;
-}
-
-.aa-dropdown-menu {
- background-color: white;
- border: 2px solid rgba(228, 228, 228, 0.6);
- border-top-width: 1px;
- margin-top: 2px;
- font-size: 13px;
- border-radius: 4px;
- box-sizing: border-box;
-}
-
-.aa-suggestion {
- border-top: 1px solid rgba(228, 228, 228, 0.6);
- cursor: pointer;
- -webkit-transition: .2s;
- transition: .2s;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: justify;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
-}
-
-.aa-suggestion .suggestion-link {
- padding: 12px;
- background-color: transparent;
- width: 100%;
-}
-
-.aa-suggestion .suggestion-link:after {
- content: "";
-}
-
-.aa-suggestion .suggestion-link:hover,
-.aa-cursor .suggestion-link {
- background-color: rgba(132, 195, 97, .25) !important;
-}
-
-.aa-suggestion .suggestion-link > span:first-child,
-#show-more-link {
- color: #333;
- font-size: 14px;
- display: block;
-}
-
-#show-more-link {
- text-align: center;
- font-size: 16px;
-}
-
-.aa-suggestion .suggestion-link > span:last-child {
- color: #999999;
- text-align: right;
- overflow: hidden;
- text-overflow: ellipsis;
- height: 200px;
-}
-
-.aa-suggestion .suggestion-link > span:last-child p {
- font-size: 13px;
-}
-
-.aa-suggestion .suggestion-link > span:first-child em,
-.aa-suggestion .suggestion-link > span:last-child em {
- font-weight: 700;
- font-style: normal;
- background-color: yellow;
- padding: 2px 0 2px 2px;
-}
-
-/********************************************************/
-/******************* Search Results *****************/
-/********************************************************/
-
-/* INPUT */
-header {
- position: relative;
- height: 80px;
- margin-top: 40px;
-}
-
-/* INPUT */
-header .aa-input-search {
- width: 600px;
- padding: 15px 30px 15px 15px;
- border: 2px solid #DDDDDD;
- border-radius: 4px;
- -webkit-transition: .2s;
- transition: .2s;
- font-size: 18px;
- box-sizing: border-box;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
-}
-
-header .aa-input-icon {
- height: 20px;
- width: 20px;
- position: absolute;
- top: 50%;
- right: 16px;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- fill: #CCCCCC;
-}
-
-/* HITS */
-#hits {
- margin: 4px 0;
- padding: 10px 0;
- border-top: 2px solid #eee;
-}
-
-.hit {
- font-size: 0;
- padding: 15px 0;
- border-bottom: 1px solid #eee;
-}
-
-.hit-name {
- margin: 0;
-}
-
-.search-item {
- font-size: 14px;
- font-weight: 300;
- display: inline-block;
- vertical-align: top;
-}
-
-.search-item em {
- font-style: normal;
- background-color: yellow;
-}
-
-.search-item p {
- font-size: 13px;
-}
-
-/* PAGINATION */
-#pagination {
- margin-top: 60px;
-}
-
-#pagination ul {
- font-size: 0;
- list-style-type: none;
- text-align: center;
-}
-
-#pagination li {
- font-size: 14px;
- display: inline;
-}
-#pagination a {
- padding: 8px 12px;
- text-decoration: none;
- color: #000;
- border: 1px solid #eee;
-}
-
-#pagination a:hover {
- background: #f5f5f5;
-}
-
-#pagination li:first-child a {
- border-top-left-radius: 4px;
- border-bottom-left-radius: 4px;
-}
-
-#pagination li:last-child a {
- border-right: 1px solid #eee;
- border-top-right-radius: 4px;
- border-bottom-right-radius: 4px;
-}
-
-#pagination li.ais-pagination--item__active a {
- color: white;
- border-color: #84C361;
- background: #84C361;
-}
-
-#pagination li.ais-pagination--item__active a:hover {
- cursor: default;
-}
-
-#pagination li.ais-pagination--item__disabled a {
- cursor: not-allowed;
-}
-
-#pagination li.ais-pagination--item__disabled a:hover {
- background: none;
-}
-
-/* NO RESULTS */
-.no-results #pagination, .no-results #sort-by, .no-results #stats, .no-results #facets {
- display: none;
-}
-
-.ais-hits__empty {
- font-size: 16px;
- font-weight: bold;
- padding-top: 10px;
-}
-
-/*SEARCH RESULTS*/
-a.clear-all {
- font-size: 12px;
- line-height: 1;
- display: inline-block;
- margin: 10px;
- padding: 8px 12px;
- text-decoration: none;
- color: black;
- border: 2px solid #ddd;
- border-radius: 4px;
-}
-
-a.clear-all:hover {
- transition: border-color .3s ease-in;
- border-color: #999;
-}
-
-.search-item {
- padding-top: 15px;
- padding-bottom: 15px;
- line-height: 25px;
-}
-
-.search-item .search-title a {
- font-size: 18px;
-}
-
-.search-item .search-title a:hover {
- text-decoration: underline;
-}
-
-.search-item .search-title a:after {
- content: "";
-}
-
-.search-item .search-link {
- color: #CCCCCC;
- font-size: 14px;
-}
-
-/********************************************************/
-/****************** Version selector ****************/
-/********************************************************/
-
-#version-container-toc {
- margin-top: 10px;
- background-color: #DDDDDD;
- padding: 5px;
- text-align: right;
- margin-bottom: -10px;
-}
-
-#version-container-toc span {
- font-size: 14px;
-}
-
-#version-container-toc select {
- width: auto;
- font-size: 14px;
-}
-
-#version-container-nav {
- margin-top: 10px;
- background-color: #DDDDDD;
- padding: 5px;
- text-align: right;
-}
-
-#version-container-nav span {
- font-size: 16px;
-}
-
-#version-container-nav select {
- width: auto;
- font-size: 14px;
-}
-
-#version-container-nav a {
- display: unset;
-}
diff --git a/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples/index.html b/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples/index.html
deleted file mode 100644
index 5e49dbb68..000000000
--- a/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-Digi WebKit examples
-Digi WebKit examples
-This page contains a series of examples that showcase some of the main
-features of the WPE WebKit .
-
-The main focus of this web engine is to leverage the hardware
-capabilities of embedded systems to make browsing as efficient and as
-lightweight as possible. You can find more information about the WPE WebKit at
-https://wpewebkit.org/ .
-
-When running an example, you can always come back to this page by executing
-"cogctl previous " in the command line.
-
-WebGL examples
-
-WPE WebKit supports WebGL , a JavaScript library that allows
-browsers to use the system's GPU to render 2D and 3D graphics. The following
-examples have been obtained from
-https://webglsamples.org/ :
-
-
-
-Video playback examples
-
-WPE WebKit uses gstreamer for multimedia playback.
-##VPU_NOTE##
-
-You can test video playback with different formats using the links
-below:
-
-
-
-
diff --git a/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples.bb b/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples_0.1.bb
similarity index 57%
rename from meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples.bb
rename to meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples_0.1.bb
index 2225dd129..41ed08e73 100644
--- a/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples.bb
+++ b/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples_0.1.bb
@@ -5,12 +5,12 @@ DESCRIPTION = "This webpage provides examples that show how the WPE WebKit lever
LICENSE = "MPL-2.0"
LIC_FILES_CHKSUM = "file://${COMMON_LICENSE_DIR}/MPL-2.0;md5=815ca599c9df247a0c7f619bab123dad"
-SRC_URI = " \
- file://index.html \
- file://digi.css \
-"
+SRC_URI = "${DIGI_PKG_SRC}/${BPN}-${PV}.tar.gz"
-S = "${WORKDIR}"
+SRC_URI[md5sum] = "cc4b81cf92135be3e231375e9a22fe6a"
+SRC_URI[sha256sum] = "26ed0fafcf9d66eabac4c6963ea2e3fb46d3cc94d76d50413883f28f9c28f737"
+
+S = "${WORKDIR}/${PN}-${PV}"
require digi-webkit-examples.inc
@@ -21,44 +21,36 @@ RDEPENDS_${PN} = " \
${WEBSERVER_PACKAGE} \
"
-VPU_NOTE = "This means that, if the video format is supported by the VPU, WebKit will use the VPU to decode the video."
-VPU_NOTE_ccimx8mn = "Since the ConnectCore 8M Nano doesn't have a VPU, WebKit will decode the videos using gstreamer software."
-
# The package contains static webpages, no need to configure or compile
do_configure[noexec] = "1"
do_compile[noexec] = "1"
do_install() {
- install -d ${D}/${WEBSERVER_ROOT}
+ install -d ${D}/${WEBSERVER_ROOT}/style
+ install -d ${D}/${WEBSERVER_ROOT}/images
+ install -m 644 ${S}/examples_viewer.html ${D}/${WEBSERVER_ROOT}
install -m 644 ${S}/index.html ${D}/${WEBSERVER_ROOT}
- install -m 644 ${S}/digi.css ${D}/${WEBSERVER_ROOT}
+ install -m 644 ${S}/style/* ${D}/${WEBSERVER_ROOT}/style
+ install -m 644 ${S}/images/* ${D}/${WEBSERVER_ROOT}/images
# Most entry points for the WebGL samples have the same format:
# /.html. Since we might define different sample lists per
# platform, we should generate the list of samples dynamically.
SAMPLE_LIST=""
- ENTRY='_name_
_name_