JavaScript

Displaying Presentation Panel Images Using bespoke.js

 

With the advancement of technology, the methods of presentation have changed significantly. What was once limited to PowerPoint can now be made more visually appealing and interactive using a variety of tools. One of the most noteworthy tools among these is the library called “bespoke.js”. In this blog post, we’ll introduce how to create a panel image that looks like a slide show using bespoke.js. By using this, your presentations will become more dynamic and visually impactful. We’ll walk you through the steps, making it easy for engineers and designers to use.

What is bespoke.js?

First, let’s briefly explain what bespoke.js is. bespoke.js is a lightweight JavaScript slide creation library that features a modular structure, making it highly extensible and customizable. It can be used not only as a presentation tool but also for visual expressions in various web projects. Unlike traditional PowerPoint or Google Slides, it allows for code-based customization, offering flexibility to create presentations that align with your brand or design.

Specifically, it allows you to switch slides, apply animation effects, and change panel themes. Since it is an overall very lightweight library, it also excels in performance.

Advantages of Using bespoke.js

Let’s take a closer look at the benefits of using bespoke.js.

  1. Lightweight and Extensible Compared to other presentation tools, bespoke.js is extremely lightweight. It includes basic features, and plugins can be added as needed, allowing you to handle both simple and complex presentations.
  2. Open Source and Fully Customizable bespoke.js is open-source, so you can freely customize the source code. The ability to freely change the design and behavior of the presentation to suit your needs is a major advantage.
  3. Modular Structure bespoke.js is modular, so you can incorporate only the features you need. For example, if you only want to use slide animations or apply a specific theme, the customization freedom is very high.
  4. Cross-Platform Support It can be displayed on computers, tablets, smartphones, and more. Additionally, there are few browser dependency issues, as it supports major browsers, allowing it to run stably in any environment.

CSS Example for Displaying Presentation Panel Images

Now, let’s introduce a basic CSS example for creating a presentation panel. The CSS here defines styles to make the appearance visually appealing. In order to make your presentation more attractive, attention to fonts, colors, and layout is important.

<style>
body{
    font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
    padding: 0;
    margin: 0;
}
h1{
    font-size:55px;
    line-height:1.4em;
    text-align:center;
    font-weight:normal;
}
section{
    font-size:60px;
    text-align:center;
    padding-top:25px;
    color:#FFF;
}
</style>

The above code defines the basic styles for the entire page. Especially for presentation panels, it is important to style them so that the text is easy to read and visually clear. Aim for a simple yet modern design.

HTML Example for Displaying Presentation Panel Images

Next, here’s an HTML example. Set class=”coverflow” as the default theme in the body tag, and use multiple section tags within the article tag to represent the slides. This HTML structure forms the basis of the slide presentation.

<body class="coverflow">

    <h1>Use the keyboard arrows "←" & "→" to move the panels left and right.<br/>
    Press "↑" & "↓" to change the theme.</h1>

<article>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
<section>10</section>
<section>11</section>
<section>12</section>
<section>13</section>
<section>14</section>
<section>15</section>
<section>16</section>
<section>17</section>
<section>18</section>
<section>19</section>
<section>20</section>
<section>21</section>
<section>22</section>
<section>23</section>
<section>24</section>
<section>25</section>
<section>26</section>
<section>27</section>
<section>28</section>
<section>29</section>
<section>30</section>
</article>

<script src="bespoke.js"></script>
<script src="demo.js"></script>
</body>

This HTML is set up so that bespoke.js controls the slides and users can use the keyboard’s arrow keys to navigate through the slides. Specifically, the “←” and “→” keys switch slides, and the “↑” and “↓” keys change themes.

JavaScript Example for Displaying Panel Images in a Presentation Using bespoke.js

Next, we introduce an example of JavaScript that controls the presentation’s behavior using bespoke.js.

<script src="bespoke.js"></script>
<script src="demo.js"></script>

Code inside demo.js file

*It is set so that the panels move left and right using the “←” & “→” keys, and the theme (themes) changes with the “↑” & “↓” keys. Please modify as needed.

(function() {
    'use strict';

    var themes,
        selectedThemeIndex,
        instructionsTimeout,
        deck;

    function init() {
        deck = bespoke.from('article');
        initThemeSwitching();
    }

    init();

    function initThemeSwitching() {
        themes = [
            'coverflow',
            'classic',
            'cube',
            'carousel',
            'concave'
        ];
        
        selectedThemeIndex = 0;

        initInstructions();
        initKeys();
        initSlideGestures();
        initThemeGestures();
        initButtons();

        selectTheme(0);
    }

    function initInstructions() {
        if (isTouch()) {
            document.getElementById('input-method').innerHTML = 'Swipe up and down';
        }

        instructionsTimeout = setTimeout(showInstructions, 5000);
    }

    function initKeys() {
        if (/Firefox/.test(navigator.userAgent)) {
            document.addEventListener('keydown', function(e) {
                if (e.which >= 37 && e.which <= 40) {
                    e.preventDefault();
                }
            });
        }

        document.addEventListener('keydown', function(e) {
            var key = e.which;

            key === 37 && deck.prev();
            (key === 32 || key === 39) && deck.next();

            key === 38 && prevTheme();
            key === 40 && nextTheme();
        });
    }

    function initSlideGestures() {
        var main = document.getElementById('main'),
            startPosition,
            delta,

            singleTouch = function(fn, preventDefault) {
                return function(e) {
                    if (preventDefault) {
                        e.preventDefault();
                    }
                    e.touches.length === 1 && fn(e.touches[0].pageX);
                };
            },

            touchstart = singleTouch(function(position) {
                startPosition = position;
                delta = 0;
            }),

            touchmove = singleTouch(function(position) {
                delta = position - startPosition;
            }, true),

            touchend = function() {
                if (Math.abs(delta) < 50) {
                    return;
                }

                delta > 0 ? deck.prev() : deck.next();
            };

        main.addEventListener('touchstart', touchstart);
        main.addEventListener('touchmove', touchmove);
        main.addEventListener('touchend', touchend);
    }

    function initThemeGestures() {
        var startPosition,
            delta,

            singleTouch = function(fn, preventDefault) {
                return function(e) {
                    if (preventDefault) {
                        e.preventDefault();
                    }
                    e.touches.length === 1 && fn(e.touches[0].pageY);
                };
            };

        document.addEventListener('touchstart', singleTouch(function(position) {
            startPosition = position;
            delta = 0;
        }));

        document.addEventListener('touchmove', singleTouch(function(position) {
            delta = position - startPosition;
        }, true));

        document.addEventListener('touchend', function() {
            if (Math.abs(delta) < 100) {
                return;
            }

            delta > 0 ? prevTheme() : nextTheme();
        });
    }

    function initButtons() {
        document.getElementById('up-arrow').addEventListener('click', prevTheme);
        document.getElementById('down-arrow').addEventListener('click', nextTheme);
    }

    function selectTheme(index) {
        var theme = themes[index];
        document.body.className = theme;
        document.getElementById('theme').innerHTML = theme[0].toUpperCase() + theme.slice(1);
        selectedThemeIndex = index;
    }

    function nextTheme() {
        offsetSelectedTheme(1);
        hideInstructions();
    }

    function prevTheme() {
        offsetSelectedTheme(-1);
        hideInstructions();
    }

    function offsetSelectedTheme(n) {
        selectTheme(modulo(selectedThemeIndex + n, themes.length));
    }

    function showInstructions() {
        document.querySelectorAll('header p')[0].className = 'visible';
    }

    function hideInstructions() {
        clearTimeout(instructionsTimeout);
        document.querySelectorAll('header p')[0].className = 'hidden';
    }

    function isTouch() {
        return !!('ontouchstart' in window) || navigator.msMaxTouchPoints;
    }

    function modulo(num, n) {
        return ((num % n) + n) % n;
    }

}());

This JavaScript contains the logic for controlling the slides through keyboard operations and touch gestures.

Demo Page for Displaying Panels and Themes Using bespoke.js

If you want to check out the actual behavior, please take a look at the demo page below. You can experience how to display presentation panels and themes using bespoke.js. You’ll surely appreciate the intuitive operation and lightweight performance.

Demo: bespoke.js – Displaying Panels and Themes

Source: Bespoke.js

The bespoke.js used in this tutorial is open-source and available for download from the official website. If you want to further customize your presentations, check out the documentation and plugins available.

Source: Bespoke.js

PowerPoint vs bespoke.js

Finally, let’s touch on the difference between using PowerPoint and bespoke.js. While PowerPoint and Google Slides are still the most widely used presentation tools, they are ideal for casual presentations and standard business settings.

On the other hand, customizable libraries like bespoke.js are more suited for presentations that demand uniqueness and creativity. For example, in scenarios where digital projects or interactive presentations are needed, bespoke.js’s powerful customization options can shine.

In conclusion, it’s essential to choose the tool based on your needs. PowerPoint is ideal when you want to quickly create an effective presentation, but when you want to add special effects or interactive elements, bespoke.js is a great option.

Conclusion

In this post, we introduced the basic steps and code examples for making presentations using bespoke.js. The strength of bespoke.js lies in its lightweight and flexible nature. While it may seem a bit more challenging compared to PowerPoint or Google Slides, mastering it will allow you to create a unique presentation like no other.

To recap the flow of creating a presentation using bespoke.js:

  1. Create the structure of the presentation with basic CSS and HTML.
  2. Control slide switching and theme changes through JavaScript customization.
  3. Refer to the demo page and tailor the presentation to your own project.

bespoke.js is a powerful tool for engineers and designers. Use this article as a guide to create your own presentation. We hope this post helps beginner engineers and designers understand the appeal and usage of bespoke.js. If you’re interested, try the demo page first, then implement it in your own project. It will definitely take your presentation creation to a new level!

*Please use at your own discretion. Do not reuse the Google Analytics tag from the demo page’s head tag.

bespoke.js Presentation Panel
RELATED POST