Simple Percent Count down numbers and Bar


(Mark Hunte) #1

This is a simple Percent count down with two counters.

A number count and a bar.

In this template the main code is in the header. And is called using a hype function with a button.
It is written this way to control when the count down starts.

PercentTimer.hypetemplate.zip (24.2 KB)


How easily create an animated number counter?
(Mark Hunte) #2

Here is and updated version that can be set to progress down or up.

ProgressBarMod.hypetemplate.zip (104.2 KB)



Percentage count up 1-100% code
Progress Bar for Scenes
Javascript function "increase level bar for a game (percentage or pixels)"
Display Percent by Time Duration
(Sadok Cervantes) #3

@MarkHunte I’m trying to download the files but it doesn’t work. Do you think you could upload them again? This is a project I’m currently figuring out. Thanks!!


(Greg) #4

Looks like the Server might be having issues, I can’t download anything either. Even from other postings.


#5

Please try again - seems to work.


(BIlly) #6

Is it possible to update this as it doesn’t open in hype. Says Resource is missing and the files corrupt. (Both zips)


(Mark Hunte) #7

I just downloaded it and it opens fine.

Are you using the Pro Version ?


(Mark Hunte) #8

Here is a non template version. Templates are for Pro.

ProgressBarMod.hype.zip (104.2 KB)


(BIlly) #9

Yes using Pro v3.5.2 (528).

Edit: Still getting Cannot open Resources and saying files corrupt.


(Mark Hunte) #10

It sounds like the problem is you end.

Try a reboot , logout and back in or a different internet connection…


(Jonathan Deutsch) #11

Could also be the unarchive utility; I’d try control-clicking the zip in the finder and choose ‘Open With > Archive Utility.app’


(BIlly) #12

Had to explore file content and open the hype file within. Extracting seems to create a 2 level folder structure when should be one. Can open the templates now.

The ProgressBarMod.hype.zip says Document Version Incompaitibility even though I have 3.5.2 (528) Professional Edition.


(Jonathan Deutsch) #13

528 is the beta version; 530 is the final release so you’ll probably need to move to the official version.


(BIlly) #14

Ok thanks. Got the latest version now and file opens. Cheers.


(Greg) #15

Hi Mark

Thanks a lot for sharing this progress bar. It works great. However, I would like to tweak it by adding, for example, 40px to the green progress bar on mouse click. I tried triggering this code on button click but it doesn’t work

hypeDocument.getElementById(‘bar’).style.width = + “40px”;

How would I add 40px to the bar like that?

Thanks a lot for your help.

Greg


(Mark Hunte) #16

What green progress bar?


for the up count
The calculations are done by multipling percentTogo by 2 in the above example.
each step * 2
This means the width will change like this
20
40
60
80
100
120
140
160
80
200

if we multiply by 2.4 then we will change like this
24
48
72
96
120
144
168
192
216
240


(Greg) #17

This progress bar (it’s green when I open the project on my computer)

I understand multiplying the percent but would it be possible to add pixel values imstead of multiplying them?

Thanks


(Mark Hunte) #18

There is no green set on the progress bar… as shown in the image you posted.??

What do you see here which one is green…

1 01

2 21


Probably but what are you actually trying to do…


(Greg) #19

Yes Mark the second square definitely looks green to me. I guess my brain must have associated progress with green colour and I changed it to green myself. Anyways, I found a simpler solution without too much code as I’m still learning javascript.

Thanks for your help and sorry to mess this thread with stupid questions like that.

Best Wishes
Greg


(Mark Hunte) #20

No problem, there are normally simpler ways of doing things depending on your goals…