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 <gabriel.valcazar@digi.com>
This commit is contained in:
Gabriel Valcazar 2020-12-16 14:24:14 +01:00
parent 024732f8cc
commit cca44221b9
5 changed files with 24 additions and 1684 deletions

View File

@ -35,11 +35,14 @@ WEBGL_REQUIRED = " \
${WEBGL_SAMPLE_DEPS} \ ${WEBGL_SAMPLE_DEPS} \
" "
# List of video samples # List of video sample formats
VIDEO_SAMPLES = " \ VIDEO_FORMATS = " \
big_buck_bunny.mov \ mov \
big_buck_bunny.webm \ 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 # All packages involved in the webkit examples install their files in the
# webserver directory # webserver directory

View File

@ -1,38 +0,0 @@
<html>
<head>
<title>Digi WebKit examples</title>
<link rel="stylesheet" href="digi.css">
</head>
<body>
<h1>Digi WebKit examples</h1>
<p>This page contains a series of examples that showcase some of the main
features of the <strong>WPE WebKit</strong>.</p>
<p>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
<a href="https://wpewebkit.org/">https://wpewebkit.org/</a>.</p>
<p>When running an example, you can always come back to this page by executing
"<strong>cogctl previous</strong>" in the command line.</p>
<h2>WebGL examples</h2>
<p>WPE WebKit supports <strong>WebGL</strong>, 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
<a href="https://webglsamples.org/">https://webglsamples.org/</a>:</p>
<ul>##WEBGL_SAMPLE_LIST##</ul>
<h2>Video playback examples</h2>
<p>WPE WebKit uses <strong>gstreamer</strong> for multimedia playback.
##VPU_NOTE##</p>
<p>You can test video playback with different formats using the links
below:</p>
<ul>##VIDEO_SAMPLE_LIST##</ul>
</body>
</html>

View File

@ -5,12 +5,12 @@ DESCRIPTION = "This webpage provides examples that show how the WPE WebKit lever
LICENSE = "MPL-2.0" LICENSE = "MPL-2.0"
LIC_FILES_CHKSUM = "file://${COMMON_LICENSE_DIR}/MPL-2.0;md5=815ca599c9df247a0c7f619bab123dad" LIC_FILES_CHKSUM = "file://${COMMON_LICENSE_DIR}/MPL-2.0;md5=815ca599c9df247a0c7f619bab123dad"
SRC_URI = " \ SRC_URI = "${DIGI_PKG_SRC}/${BPN}-${PV}.tar.gz"
file://index.html \
file://digi.css \
"
S = "${WORKDIR}" SRC_URI[md5sum] = "cc4b81cf92135be3e231375e9a22fe6a"
SRC_URI[sha256sum] = "26ed0fafcf9d66eabac4c6963ea2e3fb46d3cc94d76d50413883f28f9c28f737"
S = "${WORKDIR}/${PN}-${PV}"
require digi-webkit-examples.inc require digi-webkit-examples.inc
@ -21,44 +21,36 @@ RDEPENDS_${PN} = " \
${WEBSERVER_PACKAGE} \ ${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 # The package contains static webpages, no need to configure or compile
do_configure[noexec] = "1" do_configure[noexec] = "1"
do_compile[noexec] = "1" do_compile[noexec] = "1"
do_install() { 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}/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: # Most entry points for the WebGL samples have the same format:
# <name>/<name>.html. Since we might define different sample lists per # <name>/<name>.html. Since we might define different sample lists per
# platform, we should generate the list of samples dynamically. # platform, we should generate the list of samples dynamically.
SAMPLE_LIST="" SAMPLE_LIST=""
ENTRY='<li><p><a href="_name_/_name_.html">_name_</a></p></li>'
for sample in ${WEBGL_SAMPLES}; do 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 done
SAMPLE_LIST="${SAMPLE_LIST}\n"
sed -i s,##WEBGL_SAMPLE_LIST##,"${SAMPLE_LIST}",g ${D}/${WEBSERVER_ROOT}/index.html 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 # Use the same method to dynamically generate the list of video
# examples. # examples.
SAMPLE_LIST="" SAMPLE_LIST=""
ENTRY='<li><p><a href="videos/_name_\">_name_</a></p></li>' for format in ${VIDEO_FORMATS}; do
for sample in ${VIDEO_SAMPLES}; do SAMPLE_LIST="${SAMPLE_LIST}\n$(sed s/_fmt_/${format}/g ${S}/video_demo_template | \
SAMPLE_LIST="${SAMPLE_LIST}\n$(echo ${ENTRY} | sed s/_name_/${sample}/g)" sed s/_name_/${VIDEO_NAME}/g | \
sed s/_name-upper_/"${VIDEO_NAME_UPPERCASE}"/g)"
done done
SAMPLE_LIST="${SAMPLE_LIST}\n"
sed -i s,##VIDEO_SAMPLE_LIST##,"${SAMPLE_LIST}",g ${D}/${WEBSERVER_ROOT}/index.html sed -i s,##VIDEO_SAMPLE_LIST##,"${SAMPLE_LIST}",g ${D}/${WEBSERVER_ROOT}/index.html
} }

View File

@ -22,7 +22,7 @@ do_compile[noexec] = "1"
do_install() { do_install() {
install -d ${D}/${WEBSERVER_ROOT}/videos install -d ${D}/${WEBSERVER_ROOT}/videos
for sample in ${VIDEO_SAMPLES}; do for format in ${VIDEO_FORMATS}; do
install -m 644 ${S}/${sample} ${D}/${WEBSERVER_ROOT}/videos install -m 644 ${S}/${VIDEO_NAME}.${format} ${D}/${WEBSERVER_ROOT}/videos
done done
} }