Zero basic learning canoe panel (12) -- progress bar

• I am a Ant soldier , Focus on the field of on-board diagnosis , Especially good at CANoe Tool use
  
  
• Looking for organizations , Answer questions and solve doubts , Fishing and chatting , Blog source code , Click to add 【 Love each other and family 】
  
  
• Zero base learning CANoe Panel Summary of design catalogue , Click the jump

---

Preface

• Progress bar （Progress Bar） strip , whatever UI Design tools are available , Let me write a simple Brush service To demonstrate the use of the progress bar

• Demonstrate hardware and software environment Windows11 x64 ; CANoe 11 SP2 x64
  

---

Progress bar （Progress Bar）

1️⃣ Next I pull three controls Button ,Input/Output box ,Progress Bar To simulate the download service

• Button： Start the download
• Input/Output box： Download progress description , Property to set the transparent amount , So I can't see the screenshot
• Progress Bar ： Download progress percentage

---

2️⃣ Because the purpose is to demonstrate the use of the progress bar , So here is a simple simulation of the download process , Here we define a timer , Add to 100, Simulate the progress of brushing .

/*@!Encoding:936*/
variables
{
    
  msTimer timer_demo;
  char  tempText[0x500];
  int step_counter;

}

on timer timer_demo
{
    
    step_counter = step_counter +1 ;

    snprintf(tempText,elCount(tempText),"Downloading %.2f%%......",(double)step_counter);
    sysSetVariableString (sysvar::Panel::ProgressBar_Log,tempText);
    sysSetVariableFloat(sysvar::Panel::ProgressBar_Self,(double)step_counter);
 
    if (step_counter < 100)
        setTimer(timer_demo,100);

}

on sysvar Panel::ProgressBar_Start
{
    
  if(@this)
  {
    
    snprintf(tempText,elCount(tempText),"Satrt Downloading......");
    sysSetVariableString (sysvar::Panel::ProgressBar_Log,tempText);
    StartDownload();
  }
}


void StartDownload()
{
    
   step_counter = 0;
   setTimer(timer_demo,1000);  
}

/* When the above code Editor Control demo code */

---

3️⃣ Run rise CANoe, The test process is as follows ：

---

Property settings

The above example , I didn't set any properties , Completely default

1️⃣ Hide the text of the progress bar itself

• Most of us don't use it , I will use the previous example , Therefore, it is the first choice to hide it

---

2️⃣ Progress bar direction

• You can choose vertical or horizontal progress bar

---

3️⃣ Text decimal places

• If you don't set hidden text , Then the setting is meaningful .

---

How to make the progress bar design colorful

1️⃣ Look at the picture below , Default Style Attribute matters Windows Style Of , The color of the progress bar and the background color are gray , Not set , So we need to design a good-looking progress bar , We need to change Style attribute

---

2️⃣ Now I choose Classic Style With Frame Pattern , And set the background color of the progress bar to light yellow , The progress bar is set to positive yellow , Here's the picture

---

3️⃣ Run the renderings

---

4️⃣ Odometer style （Level Meter Style）（ Optional learn ）

• Only Style Attribute select its Level Meter Style,Level Meter setting The properties inside can be set , The progress bar is preceded by a vertical line with optional colors .

summary

• It needs to be used in the demonstration demo engineering , You can follow the official account online disk below to get it by yourself , Thank you for reading .
  
  

• Have the most simple life , The furthest dream , Even if it's freezing tomorrow , Lu Yao's horse died ！
  
  
• If this blog is helpful to you , please “ give the thumbs-up ” “ Comment on ”“ Collection ” One key, three links Oh ！ It's not easy to code words , Everyone's support is my driving force to stick to it .