{"id":16582223,"url":"https://github.com/deining/emwitutorial","last_synced_at":"2025-10-10T13:11:25.607Z","repository":{"id":39759339,"uuid":"169532825","full_name":"deining/EmWiTutorial","owner":"deining","description":"Embedded Wizard tutorial and sample application: https://deining.github.io/EmWiTutorial/","archived":false,"fork":false,"pushed_at":"2024-11-01T21:02:59.000Z","size":5737,"stargazers_count":5,"open_issues_count":7,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-06T02:28:52.317Z","etag":null,"topics":["chora","embedded-systems","embedded-wizard","gui","gui-builder","gui-programming","tutorial"],"latest_commit_sha":null,"homepage":"","language":"TeX","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deining.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-07T07:12:38.000Z","updated_at":"2025-02-21T19:23:36.000Z","dependencies_parsed_at":"2024-11-15T23:37:33.805Z","dependency_job_id":"0f203157-cfeb-4b01-91e8-6271f7e44690","html_url":"https://github.com/deining/EmWiTutorial","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/deining/EmWiTutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deining%2FEmWiTutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deining%2FEmWiTutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deining%2FEmWiTutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deining%2FEmWiTutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deining","download_url":"https://codeload.github.com/deining/EmWiTutorial/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deining%2FEmWiTutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279004068,"owners_count":26083665,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chora","embedded-systems","embedded-wizard","gui","gui-builder","gui-programming","tutorial"],"created_at":"2024-10-11T22:32:01.450Z","updated_at":"2025-10-10T13:11:25.565Z","avatar_url":"https://github.com/deining.png","language":"TeX","readme":"# Embedded Wizard tutorial\nTutorial and sample application for the Embedded Wizard GUI builder\n\n## Synopsis\n\n[Embedded Wizard](https://www.embedded-wizard.de/) is a graphical user interface tool developed and distributed by [TARA Systems GmbH](https://www.tara-systems.de/) for creating graphical user interface (GUI) applications mainly for embedded systems.\n\nThis project aims at providing a tutorial for novice users to get them started quickly.\n\nWhile building a sample application step by step, the tutorial covers the following topics:\n\n* [Basic steps when building a GUI application](https://deining.github.io/EmWiTutorial/EmWiTutorial/latest/HelloWorld.html)\n* [Developing and prototyping reusable graphical components](https://deining.github.io/EmWiTutorial/EmWiTutorial/latest/ComponentReusability.html)\n* [Device integration](https://deining.github.io/EmWiTutorial/EmWiTutorial/latest/DeviceIntegrationBrowser.html)\n* [Localization of your application](https://deining.github.io/EmWiTutorial/EmWiTutorial/latest/LocalizingYourApplication.html)\n* Persistent data storage on the target device\n\nIn order to preview a live demo of the sample application, navigate to the application [demo site](https://deining.github.io/EmWiTutorial/demo/).\n\n## For readers of the tutorial\n\nThe tutorial is hosted on [GitHub pages](https://deining.github.io/EmWiTutorial/), enjoy the tutorial!\n\nIf you have any suggestion for improvement or comment concerning this tutorial, feel free to open an [issue](https://github.com/deining/EmWiTutorial/issues).\n\nFor general question unrelated to this tutorial, you may make use of the [question and answer site](https://ask.embedded-wizard.de) for Embedded Wizard users and UI developers.\n\n## Structure of the repository\n\nThe graphic below illustrates the structure of the repository:\n\n````\ndocs/                    -\u003e html sources of web site, linked to github pages\n  index.html                -\u003e start page, redirection only\n  EmWiTutorial/latest/      -\u003e html pages, images and attachments\n  _/                        -\u003e GUI resources\nsrc/                     -\u003e Sources of Embedded Wizard tutorial application\n  EmWiTutorial.ewp          -\u003e Embedded Wizard project file\n  xxx.ewu/                  -\u003e Project unit xxx\n  yyy.ewu                   -\u003e Project unit yyy\n  ...\nwww/                     -\u003e tutorial website\n  antora/                   -\u003e antora publishing toolchain\n    playbook.yml               -\u003e settings file, tells antora how to operate\n  asciidoc/                 -\u003e sources, in asciidoc format\n    antora.yml                -\u003e component descriptor file\n    modules/\n      ROOT/                      -\u003e root module\n        nav.adoc                    -\u003e navigation source file\n        assets/                     -\u003e images and attachments\n        pages/                      -\u003e page source files\n  pdf/                      -\u003e pdf publishing toolchain\n    metadata.yml            -\u003e metadata file, customization of pdf output\n    template.latex          -\u003e pandoc LaTeX template (author: Pascal Wagler)\n    Tutorial.adoc           -\u003e book file, includes all chapters of the tutorial\n  resources/images/         -\u003e images used (photoshop format)\n  ui/                       -\u003e website page templates, footer, header, ...\n    build/                     -\u003e generated ui bundle 'ui-bundle.zip'\n````\n## For technical writers\n\n### HTML sources\n\nThe html sources of the tutorial website can be found inside the directory ``docs``. This directory is linked to the github pages website. Any changes inside the directory ``docs`` will be picked up immediately on the tutorial website.\n\n### Instructions how to extend and rebuild the tutorial site\n\nThe site is published using [Antora](https://antora.org/), a static site generator leveraging the [AsciiDoctor](https://asciidoctor.org/) text processing and publishing toolchain. Instructions on how to publish and possibly extend the site are given below:\n\nFirst of all, install all needed prerequisites:\n\n#### Git version control system\n\nMake sure you have ``git`` installed on your system.\n\n````\nC:\\\u003e git --version\n````\n\nIf you don't have ``git`` installed yet, download and run the [Git installer](https://git-scm.com/downloads).\n\n#### npm package manager\n\nFor various installation tasks, we need ``npm``, the Node.js package manager.\nIf you don't have ``npm`` installed yet, download and run the [Node.Js®](https://nodejs.org/) installer. This installer will install both ``Node.Js`` and the package manager ``npm`` on your system.\n\nWith ``git`` and ``node`` installed, you’re ready to set up the project.\n\n### Cloning the project locally\n\nFirst, clone the project into a local directory of your choice and enter this directory:\n\n````\nC:\\Users\\Me\\Projects\u003e git clone https://github.com/deining/EmWiTutorial.git\nC:\\Users\\Me\\Projects\u003e cd EmWiTutorial\nC:\\Users\\Me\\Projects\\EmWiTutorial\u003e REM ready for the next steps\n````\n\n### Building and bundling the user interface\n\nThe project uses a customized version of the [Antora Default UI](https://gitlab.com/antora/antora-ui-default) as GUI template for the tutorial website. In order to successfully publish the tutorial site, we have to build and bundle this user interface first. Enter the directory ``www\\ui`` of the cloned repository and install the dependencies using ``npm`` first. Afterwards, issue two ``gulp`` commands to generate the bundled user interface:\n\n````\nC:\\Users\\Me\\Projects\\EmWiTutorial\u003e cd www\\ui\nC:\\Users\\Me\\Projects\\EmWiTutorial\\www\\ui\u003e npm install\nC:\\Users\\Me\\Projects\\EmWiTutorial\\www\\ui\u003e npx gulp preview:build\nC:\\Users\\Me\\Projects\\EmWiTutorial\\www\\ui\u003e npx gulp bundle\n````\nIf all went fine, you should now see the UI bundle ``ui-bundle.zip`` available inside the subdirectory ``build``.\n\n````\nC:\\Users\\Me\\Projects\\EmWiTutorial\\www\\ui\u003e dir /B build\nui-bundle.zip\n````\n### Extending or altering  the tutorial site\n\n* The directory ``www\\asciidoc\\modules\\ROOT\\pages`` contains the pages sources in asciidoc format. Extend and or alter these pages according to your needs.\n* The directory ``www\\asciidoc\\modules\\ROOT\\assets`` contains the images of the pages and the attachments the pages link to. Extend and or alter these resource files as needed.\n\n### Rebuilding the tutorial site\n\nUsing the ``antora`` publisher, we can now build the tutorial site. Enter the directory ``www\\antora`` of the cloned repository and install the dependencies using ``npm`` first. Afterwards, issue the following ``antora`` command to generate the tutorial site:\n\n````\nC:\\Users\\Me\\Projects\\EmWiTutorial\\www\\ui\u003e cd ..\\antora\nC:\\Users\\Me\\Projects\\EmWiTutorial\\www\\ui\u003e npm install\nC:\\Users\\Me\\Projects\\EmWiTutorial\\www\\antora\u003e npx antora --fetch playbook.yml\n````\n\nIf all went fine, you should now see your changes reflected in the web site stored inside the the subdirectory ``docs`` of the cloned repository.\n\n### PDF version\n\nBesides the html sources, you may want to generate a pdf version of the tutorial website. While there are several ways to produce a pdf document from asciidoc sources, we found out that leveraging the [LaTeX](https://www.latex-project.org/) toolchain gave the best results. All needed files for pdf generation are found inside the directory ``www\\pdf``. Be aware that generating high quality pdf documents is not an easy task, so don't expect a perfect result here.\n\n### Instructions how to generate a pdf version of the tutorial site\n\nPDF generation is done using a two step approach: first we produce [docbook](https://en.wikipedia.org/wiki/DocBook) output from the asciidoc sources using the ``asciidoctor`` text processor. Afterwards, we use the [pandoc](https://pandoc.org/) document converter to convert the docbook source to a pdf document using [xelatex](https://en.wikipedia.org/wiki/XeTeX) as pdf engine. Instructions on how to a generate a pdf version of the tutorial site are given below:\n\nFirst of all, install the needed prerequisites:\n\n#### Ruby programming language\n\nMake sure you have ``ruby`` installed on your system.\n\n````\nC:\\\u003e ruby --version\n````\n\nIf you don't have ``ruby`` installed yet, download and run the [Ruby installer](https://rubyinstaller.org/downloads/).\n\n#### AsciiDoctor text processor \u0026 publishing toolchain\n\nNext, you have to install ``asciidoctor`` using the following command:\n\n````\nC:\\\u003e gem install asciidoctor\n````\n\n#### Pandoc\n\nDownload and run the [Pandoc installer](https://pandoc.org/installing.html) if you don't have ``pandoc`` installed on your system yet.\n\n#### Tex / XeTex\n\nMake sure you have ``xetex`` installed on your system.\n\n````\nC:\\\u003e xetex --version\n````\n\nIf you don't have ``xetex`` installed yet, install a working LaTeX installation on your system. For that purpose, you may make use of the [MiKTeX](http://miktex.org/) or [proTeXt](http://www.tug.org/protext/) or [TeX Live](http://www.tug.org/texlive) distributions.\n\nNow that you have ``asciidoctor``, ``pandoc`` and ``xetex`` installed, you’re ready to generate the pdf of the tutorial site.\n\n### Building a pdf document of the tutorial site\n\n#### Generating docbook output from tutorial site\n\nEnter the directory ``www\\pdf`` of the cloned repository and invoke ``asciidoctor`` text processor to produce docbook output from the asciidoc sources:\n\n````\nC:\\Users\\Me\\Projects\\EmWiTutorial\u003e cd www\\pdf\nC:\\Users\\Me\\Projects\\EmWiTutorial\\www\\pdf\u003e asciidoctor --doctype book --backend docbook5 Tutorial.adoc\n````\nThis will produce a file ``Tutorial.xml`` inside the same directory, containing docbook output.\n\n#### Converting docbook output to pdf using ``pandoc`` document converter\n\nFinally, invoke ``pandoc`` converter to generate a pdf file from the docbook output you just generated:\n\n````\nC:\\Users\\Me\\Projects\\EmWiTutorial\\www\\pdf\u003e pandoc Tutorial.xml --output Tutorial.pdf --from docbook --template template --metadata-file metadata.yml --pdf-engine xelatex --toc\n````\n\nThis eventually will produce the pdf file ``Tutorial.pdf`` inside the same directory.\n\nFor pdf styling, we use the [pandoc LaTeX template](https://github.com/Wandmalfarbe/pandoc-latex-template) authored by [Pascal Wagler](https://github.com/Wandmalfarbe). Further [customization](https://github.com/Wandmalfarbe/pandoc-latex-template#custom-template-variables) of the generated pdf can be achieved by extending the metadata file ``metadata.yml``.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeining%2Femwitutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeining%2Femwitutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeining%2Femwitutorial/lists"}