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.bb new file mode 100644 index 000000000..c5048c89b --- /dev/null +++ b/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples.bb @@ -0,0 +1,44 @@ +# Copyright (C) 2020 Digi International. + +SUMMARY = "A webpage containing several examples for the WPE WebKit on Digi embedded devices" +DESCRIPTION = "This webpage provides examples that show how the WPE WebKit leverages the hardware capabilities of Digi embedded devices for improved performance" +LICENSE = "MPL-2.0" +LIC_FILES_CHKSUM = "file://${COMMON_LICENSE_DIR}/MPL-2.0;md5=815ca599c9df247a0c7f619bab123dad" + +SRC_URI = " \ + file://index.html \ + file://digi.css \ +" + +S = "${WORKDIR}" + +require digi-webkit-examples.inc + +RDEPENDS_${PN} = " \ + cog \ + webglsamples \ + ${WEBSERVER_PACKAGE} \ +" + +# 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 -m 644 ${S}/index.html ${D}/${WEBSERVER_ROOT} + install -m 644 ${S}/digi.css ${D}/${WEBSERVER_ROOT} + + # 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)" + done + + SAMPLE_LIST="${SAMPLE_LIST}\n" + + sed -i s,##WEBGL_SAMPLE_LIST##,"${SAMPLE_LIST}",g ${D}/${WEBSERVER_ROOT}/index.html +} 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 new file mode 100644 index 000000000..0289cdcc6 --- /dev/null +++ b/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples.inc @@ -0,0 +1,43 @@ +# Copyright (C) 2020 Digi International. + +# By default, use the Busybox HTTP daemon as the webserver for the examples. +WEBSERVER_PACKAGE ?= "busybox-httpd" +WEBSERVER_ROOT ?= "srv/www" + +# List of samples we want accesible via the landing page +WEBGL_SAMPLES = " \ + aquarium \ + blob \ + dynamic-cubemap \ + electricflower \ + field \ + multiple-views \ + spacerocks \ + toon-shading \ +" +# Folders containing elements required by the samples we've selected +WEBGL_SAMPLE_DEPS = " \ + colorpicker \ + css \ + fishtank \ + fonts \ + gradient-editor \ + images \ + jquery-ui-1.8.2.custom \ + js \ + lots-o-objects \ + shared \ + tdl \ +" +# List of all folders that need to be installed +WEBGL_REQUIRED = " \ + ${WEBGL_SAMPLES} \ + ${WEBGL_SAMPLE_DEPS} \ +" + +# All packages involved in the webkit examples install their files in the +# webserver directory +FILES_${PN} = "/${WEBSERVER_ROOT}/*" + +# Don't generate dbg or dev packages +PACKAGES = "${PN}" 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 new file mode 100644 index 000000000..6d04ea977 --- /dev/null +++ b/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples/digi.css @@ -0,0 +1,1617 @@ +/*************************************************/ +/*************** 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 new file mode 100644 index 000000000..8a60d920f --- /dev/null +++ b/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples/index.html @@ -0,0 +1,29 @@ + + +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/:

    + + + + + diff --git a/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/webglsamples_git.bb b/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/webglsamples_git.bb index 6ed09f180..05293f767 100644 --- a/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/webglsamples_git.bb +++ b/meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/webglsamples_git.bb @@ -13,40 +13,7 @@ SRC_URI = "${WEBGL_SAMPLES_SRC};branch=${SRCBRANCH}" SRCREV = "dc4428bdc6ef2177f71d9e7bab164c43f9e29302" S = "${WORKDIR}/git" -# By default, use the Busybox HTTP daemon as the webserver for the examples. -WEBSERVER_PACKAGE ?= "busybox-httpd" -WEBSERVER_ROOT ?= "srv/www" - -# List of samples we want accesible via the landing page -WEBGL_SAMPLES = " \ - aquarium \ - blob \ - dynamic-cubemap \ - electricflower \ - field \ - multiple-views \ - spacerocks \ - toon-shading \ -" -# Folders containing elements required by the samples we've selected -WEBGL_SAMPLE_DEPS = " \ - colorpicker \ - css \ - fishtank \ - fonts \ - gradient-editor \ - images \ - jquery-ui-1.8.2.custom \ - js \ - lots-o-objects \ - shared \ - tdl \ -" - -WEBGL_REQUIRED = " \ - ${WEBGL_SAMPLES} \ - ${WEBGL_SAMPLE_DEPS} \ -" +require digi-webkit-examples.inc # The package contains static webpages, no need to configure or compile do_configure[noexec] = "1" @@ -65,7 +32,3 @@ do_install() { -exec install -Dm 644 "{}" "${D}/${WEBSERVER_ROOT}/{}" \; done } - -FILES_${PN} = "/${WEBSERVER_ROOT}/*" - -PACKAGES = "${PN}"