From 04cd7aafe7acb3e661b16349601dcc33c9366c79 Mon Sep 17 00:00:00 2001 From: Gabriel Valcazar Date: Wed, 9 Dec 2020 17:06:49 +0100 Subject: [PATCH] digi-webkit-examples: add recipe for main landing page This recipe installs the main page of the WebKit examples, from which all other examples can be accessed. For now, only include the WebGL examples. Since the landing page recipe needs to know which WebGL demos are being installed and the webserver path where everything is installed, move some of the variables used in the webglsamples recipe into an *.inc file to be able to re-use said variables in different recipes. Use the Digi embedded documentation CSS file for now, so the landing page looks more on-brand. https://jira.digi.com/browse/DEL-7314 https://jira.digi.com/browse/DEL-7339 Signed-off-by: Gabriel Valcazar --- .../digi-webkit-examples.bb | 44 + .../digi-webkit-examples.inc | 43 + .../digi-webkit-examples/digi.css | 1617 +++++++++++++++++ .../digi-webkit-examples/index.html | 29 + .../digi-webkit-examples/webglsamples_git.bb | 39 +- 5 files changed, 1734 insertions(+), 38 deletions(-) create mode 100644 meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples.bb create mode 100644 meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples.inc create mode 100644 meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples/digi.css create mode 100644 meta-digi-dey/dynamic-layers/webkit/recipes-browser/digi-webkit-examples/digi-webkit-examples/index.html 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/:

    + +
      ##WEBGL_SAMPLE_LIST##
    + + + 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}"