Become a leader in the IoT community!

New DevHeads get a 320-point leaderboard boost when joining the DevHeads IoT Integration Community. In addition to learning and advising, active community leaders are rewarded with community recognition and free tech stuff. Start your Legendary Collaboration now!

Step 1 of 5

CREATE YOUR PROFILE *Required

Change Email
OR
Step 2 of 5

WHAT BRINGS YOU TO DEVHEADS? *Choose 1 or more

Collaboration & Work 🤝
Learn & Grow 📚
Contribute Experience & Expertise 🔧
Step 3 of 5

WHAT'S YOUR INTEREST OR EXPERTISE? *Choose 1 or more

Hardware & Design 💡
Embedded Software 💻
Edge Networking
Step 4 of 5

Personalize your profile

Step 5 of 5

Read & agree to our COMMUNITY RULES

  1. We want this server to be a welcoming space! Treat everyone with respect. Absolutely no harassment, witch hunting, sexism, racism, or hate speech will be tolerated.
  2. If you see something against the rules or something that makes you feel unsafe, let staff know by messaging @admin in the "support-tickets" tab in the Live DevChat menu.
  3. No age-restricted, obscene or NSFW content. This includes text, images, or links featuring nudity, sex, hard violence, or other graphically disturbing content.
  4. No spam. This includes DMing fellow members.
  5. You must be over the age of 18 years old to participate in our community.
  6. Our community uses Answer Overflow to index content on the web. By posting in this channel your messages will be indexed on the worldwide web to help others find answers.
  7. You agree to our Terms of Service (https://www.devheads.io/terms-of-service/) and Privacy Policy (https://www.devheads.io/privacy-policy)
By clicking "Finish", you have read and agreed to the our Terms of Service and Privacy Policy.

in LVGL, how do we add a style on arc’s indicator part?

Hey guys,
in LVGL,
how do we add a style on arc’s indicator part?

  1. ZacckOsiemo#0000

    @undefined2001 have you done any design stuff for LVGl

  2. undefined.elf#0000

    I did some design with ez studio

  3. ZacckOsiemo#0000

    Oh yes! @fbiego6893 also told me of one such studios just escape a my mind

  4. undefined.elf#0000
  5. undefined.elf#0000

    I also wrote some style stuff

  6. undefined.elf#0000

    squareline studio worked for many years but nowadays they have became commercial

  7. melta101#0000

    every good tech ever..

  8. melta101#0000

    just saw briefly,
    doesnt seem like there is a part where it is adding the style on arc itself, is it?

  9. undefined.elf#0000

    what style you want in a arc?

  10. melta101#0000

    lets start with a gradient on the indicator

  11. melta101#0000

    remove the main and knob

  12. undefined.elf#0000

    I would recommend to try ez studio rather thar hardcode things

  13. melta101#0000

    2nd part is easy
    1st is where i was stuck

  14. melta101#0000

    let me look at that

  15. undefined.elf#0000

    also you can check volos project on youtube

  16. undefined.elf#0000

    he makes some insane designs with lvgl

  17. melta101#0000

    ah yes
    i follow him

  18. melta101#0000

    but if i remember
    he uses squareline

  19. melta101#0000

    yep he uses..

  20. undefined.elf#0000

  21. melta101#0000

    yep
    similar styling properties

  22. undefined.elf#0000

    I may buy one board with display wiring each time is like hell

  23. ZacckOsiemo#0000

    You don’t need another board

  24. undefined.elf#0000

    yes. if I want to use wire every time

  25. undefined.elf#0000

    Luckily some display uses serial communication

  26. undefined.elf#0000

    can’t even imagine wiring a parallel display each time I use

  27. melta101#0000

    there is a deprecated widget that could do what i want

  28. melta101#0000

    but it axed post 8.x

  29. melta101#0000

    just saw from eez studio

  30. melta101#0000

    seems like they are using a image to make that effect

  31. melta101#0000

    @undefined2001 got the reverse done
    where the Main has the image
    0image.png

  32. melta101#0000

    but nothing seems to have the indicator, the image set
    0image.png

  33. melta101#0000

    lol
    it used to be simple
    where we create a gradient style

  34. melta101#0000

    and then add it the object

  35. undefined2001#0000

    In the past?

  36. melta101#0000

    yea

  37. undefined2001#0000

    which display are you using

  38. undefined2001#0000

    it looks really crisp

  39. melta101#0000

    my laptop

  40. melta101#0000

    🫠

  41. undefined2001#0000

    in the eez studio?

  42. melta101#0000

    nope

  43. undefined2001#0000

    emulator or native desktop?

  44. melta101#0000

    native desktop
    its a plain old simulator

  45. undefined2001#0000

    name?

  46. melta101#0000

    its a vscode plugin

  47. undefined2001#0000

    I didn’t know that🥲

  48. melta101#0000

    lvgl project creator

  49. melta101#0000

    we prototype on that

  50. melta101#0000

    then move to HW

  51. undefined2001#0000

    you have to compile for any specific architecture?

  52. melta101#0000

    nope

  53. melta101#0000

    debugging by gdb

  54. melta101#0000

    build done by cmake

  55. melta101#0000

    well for me its lldb as gdb doesnt exist in mac

  56. melta101#0000

    @superbike_z any inputs?

  57. melta101#0000

    seem like squareline also isnt able to do that

  58. superbike_z#0000

    Help me understand the context again please

  59. superbike_z#0000

    what do you need to achieve

  60. melta101#0000

    trying to style the bar in an arc as gradient

  61. melta101#0000

    hey @undefined2001 ,
    i was able to get it to work
    image.png

  62. melta101#0000

    image.png

  63. melta101#0000

    ggez

  64. undefined2001#0000

    adjusting width would be better

  65. undefined2001#0000

    for a better looks

  66. melta101#0000

    this was just poc

  67. melta101#0000

    wait a sec

  68. undefined2001#0000

    are you making a speedometer?

  69. melta101#0000

    yea

  70. undefined2001#0000

    then I would recommend you use the gradient of the bar in arc green to red

  71. undefined2001#0000

    also remove percentages from below and add them in the circumference of the arc

  72. melta101#0000

    Makes sense
    Time to open inkscape

  73. melta101#0000

    Oh you mean like dial?

  74. undefined2001#0000

    yeah that’s better for a speedometer i guess

  75. melta101#0000

    something like this?
    image.png

  76. undefined2001#0000

    yes

  77. undefined2001#0000

    but why the rectangle inside

  78. melta101#0000

    oh ignore that lol
    i was testing few apis

    basically mirror the values of arc to the bar

  79. undefined2001#0000

    but your arc is looking really good

  80. undefined2001#0000

    have you completed it?

  81. melta101#0000

    had some escalation today on work
    so couldnt work

  82. melta101#0000

    was making my GUI

  83. melta101#0000

    sneak peek(do please give a feedback)

  84. melta101#0000

    image.png

  85. undefined2001#0000

    it is incomplete right?

  86. melta101#0000

    its still a drawing

  87. melta101#0000

    mask is ready

  88. melta101#0000

    fonts & text selection is pending

  89. melta101#0000

    and also designing the needle

  90. undefined2001#0000

    I would recommend orange for niddle and yellow/green for the scale

  91. undefined2001#0000

    for better contrast

  92. undefined2001#0000

    My laptop has a really bad display so can’t tell how good the contrast is

  93. melta101#0000

    no prob
    once i reach back
    let me try what you say and let’s see

  94. undefined2001#0000

    sure. it’s just in my eyes blue has bad contrast with black

  95. melta101#0000

    amen,
    where is my artistic creativity when i need it

  96. undefined2001#0000

    I am also a bad designer 🤣

  97. undefined2001#0000

    that’s why I stopped working on frontend

  98. melta101#0000

    never touched FE, never plan to
    few things i plan to not touch for atleast some time

    Web related
    AI

  99. undefined2001#0000

    Back then I used to do some full stack web dev to earn some money to buy components for embedded

  100. undefined2001#0000

    🫡

  101. melta101#0000

    Impressive!

  102. superbike_z#0000

    me too me too buddy

  103. melta101#0000

    could you share some feedback @superbike_z @undefined2001
    image.png

  104. melta101#0000

    was thinking in the bottom quarter to have a battery bar

  105. melta101#0000

    what do you guys think?

  106. superbike_z#0000

    Its a good structure to start on I think.

  107. melta101#0000

    Cool!
    Any comments on the color style?

  108. melta101#0000

    speedometer done

  109. techielew#0000

    Shouldn’t it be oriented the reverse way?

  110. techielew#0000

    Yus, make it black and gold!

  111. melta101#0000

    Sure

  112. melta101#0000

    earlier theme was a neon style
    would you prefer a dirty theme as that is what i see in devhead’s logo

  113. techielew#0000

    Did you get the RZ platform?

  114. melta101#0000

    Not yet

  115. techielew#0000

    Okay what’s next

  116. melta101#0000

    any tracking ID from where we can track the package?

  117. melta101#0000

    Creating other part needed
    leaving the color theme for(my UI mind needs some assistance/upgrade)

    speedomoter animation, menu bar button with popup, battery gauge , Fault detection status, Start/Stop button are done

    pending ones
    Motor Temp, regen

    Brake and Accel controls
    content within Menu

  118. techielew#0000

    We’ll get some color theme input

  119. 32bitwidesaviour#0000

    Eager

  120. superbike_z#0000

    just get your gdb chops up

  121. superbike_z#0000

    and I’ll put it on rtfes

  122. superbike_z#0000

    monday or tue

  123. melta101#0000

    yep,
    don’t see any major blockers as of now

CONTRIBUTE TO THIS THREAD

Browse other questions tagged