From cca44221b952f19a5245aaea63b3796491454889 Mon Sep 17 00:00:00 2001 From: Gabriel Valcazar Date: Wed, 16 Dec 2020 14:24:14 +0100 Subject: [PATCH] digi-webkit-examples: adapt to new landing page design The landing page for the WebKit examples has gone through a visual overhaul to improve the overall user experience, so adapt its recipe accordingly. Since the page now contains resources that are relatively large (such as images and extensive stylesheets), remove its elements from the recipe directory and obtain them from Digi's FTP server instead. https://jira.digi.com/browse/DEL-7365 Signed-off-by: Gabriel Valcazar --- .../digi-webkit-examples.inc | 11 +- .../digi-webkit-examples/digi.css | 1617 ----------------- .../digi-webkit-examples/index.html | 38 - ...xamples.bb => digi-webkit-examples_0.1.bb} | 38 +- .../video-examples_0.1.bb | 4 +- 5 files changed, 24 insertions(+), 1684 deletions(-) delete mode 100644 meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples/digi.css delete mode 100644 meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples/index.html rename meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/{digi-webkit-examples.bb => digi-webkit-examples_0.1.bb} (57%) 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_

    • ' for sample in ${WEBGL_SAMPLES}; do - SAMPLE_LIST="${SAMPLE_LIST}\n$(echo ${ENTRY} | sed s/_name_/${sample}/g)" + SAMPLE_LIST="${SAMPLE_LIST}\n$(sed s/_name_/${sample}/g ${S}/webgl_demo_template)" done - SAMPLE_LIST="${SAMPLE_LIST}\n" - sed -i s,##WEBGL_SAMPLE_LIST##,"${SAMPLE_LIST}",g ${D}/${WEBSERVER_ROOT}/index.html - # Add a note regarding the video decoding process, which depends on the - # platform. - sed -i s/##VPU_NOTE##/"${VPU_NOTE}"/g ${D}/${WEBSERVER_ROOT}/index.html - # Use the same method to dynamically generate the list of video # examples. SAMPLE_LIST="" - ENTRY='

  • _name_

    • ' - for sample in ${VIDEO_SAMPLES}; do - SAMPLE_LIST="${SAMPLE_LIST}\n$(echo ${ENTRY} | sed s/_name_/${sample}/g)" + for format in ${VIDEO_FORMATS}; do + SAMPLE_LIST="${SAMPLE_LIST}\n$(sed s/_fmt_/${format}/g ${S}/video_demo_template | \ + sed s/_name_/${VIDEO_NAME}/g | \ + sed s/_name-upper_/"${VIDEO_NAME_UPPERCASE}"/g)" done - SAMPLE_LIST="${SAMPLE_LIST}\n" - sed -i s,##VIDEO_SAMPLE_LIST##,"${SAMPLE_LIST}",g ${D}/${WEBSERVER_ROOT}/index.html } diff --git a/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/video-examples_0.1.bb b/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/video-examples_0.1.bb index b0ee5f197..88433346e 100644 --- a/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/video-examples_0.1.bb +++ b/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/video-examples_0.1.bb @@ -22,7 +22,7 @@ do_compile[noexec] = "1" do_install() { install -d ${D}/${WEBSERVER_ROOT}/videos - for sample in ${VIDEO_SAMPLES}; do - install -m 644 ${S}/${sample} ${D}/${WEBSERVER_ROOT}/videos + for format in ${VIDEO_FORMATS}; do + install -m 644 ${S}/${VIDEO_NAME}.${format} ${D}/${WEBSERVER_ROOT}/videos done }