How to create Volume Increase/Decrease and Wi-Fi Bars based on Strength in Crank Storyboard using LUA?

Hi everyone

I want to make two features:


1️⃣ Volume Control:

  • I want a Volume Up button and a Volume Down button.

  • When I press them, the volume number should increase or decrease.

  • A circle (slider knob) should move left or right depending on the volume.

I think I need to:

  • Store volume value in a variable.

  • Move the circle based on the volume.

  • Connect the buttons to Lua functions.

But I’m not sure the best way to calculate the movement and update the screen. 😅


2️⃣ Wi-Fi Signal Strength Bars:

  • I want to show Wi-Fi bars like a mobile phone 📶.

  • If the signal is strong, all bars show.

  • If the signal is weak, only 1 or 2 bars should show.

I think I need to:

  • Get the Wi-Fi strength (maybe a value from 0–100).

  • Show or hide the bars based on the strength.

But I don’t know how to connect signal strength value to the visible bars properly. 🤔


❓ My questions:

  • What variables should I use for each?

  • How should I calculate movement (for volume) and bar visibility (for Wi-Fi)?

  • How to connect these to Storyboard events or Lua functions?

Any simple examples would help a lot! 🙏

0

Comments

2 comments
  • Hello,

    Take a look at the many samples that we ship Storyboard. They are located in the Samples folder of your Storyboard installation. It is a good starting point when looking for way to implement certain functionality for your application.

    Make sure to check out our Help Center for information as well.

    Crank Software

    Here is an article on using Variables ...

    Using Variables to Create a Dynamic UI – Crank Software

    Thanks,

    -Jamie

    0
  • Hi Jamie,

    Thank you for your response!

    I have gone through the Samples folder in Storyboard, and I have also read the articles on using variables, dynamic UIs, and event handling.
    While I do understand how to create variables and link them to UI updates, I am still facing difficulty with practically implementing two things:


    1️⃣ Volume Increase/Decrease with Slider Movement:

    • I want to increment or decrement the volume using buttons.

    • Based on the current volume, I want a slider knob (a circle) to move smoothly between two fixed X positions (for example, left = 735px to right = 1150px).

    • I am unsure about the best way to calculate the position based on the volume percentage.


    2️⃣ Wi-Fi Signal Bars Based on Strength:

    • I want to show Wi-Fi signal strength graphically — meaning more bars for stronger signals, fewer bars for weaker signals.

    • I have a Wi-Fi strength value (0–100), but I am not sure how to map the strength to showing/hiding the correct number of signal bars (1, 2, 3, or 4 bars).

      Despite reviewing the Storyboard samples, I couldn't find a direct example that clearly shows this exact logic for a slider movement or dynamic bar visibility.

      Could you kindly provide:

      • A simple example design (even a rough one) for each case?

      • A small Lua code snippet showing the correct way to map volume values to slider position and signal strength to bar visibility?

      I want to make sure I am following Storyboard best practices and not building something inefficient.

      Thank you very much for your support!

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post