Skip to content

SetupGuide

Jump to bottom
Peter Kirmeier edited this page Feb 6, 2022 · 8 revisions

Hit Counter Manager - Setup Guide

Here you can find all the setup instructions that I have tested and were working for me.
Please read them carefully and have a look at the FAQ at the bottom.
If you still have trouble afterwards, see (I still have issues)(#I-still-have-issues).

Jump directly to..

Broadcasting Software

OBS Studio

Version with Local File checkbox

  • Add a Browser to your scene
  • Check the Local file checkbox
  • At Lokal File enter the design file path

Example

Old version not having the Local File checkbox

Example: http://absolute/C:/Users/Peter K/Documents/HitCounterManager/Designs/HitCounterGui.html

Streamlabs OBS

  • Add a Browser Source to your scene
  • Check the Local file checkbox
  • At Lokal File enter the design file path

Note: It was tested with some beta versions up to 0.21.2, so the instruction may change in newer versions.

Example

Open Broadcaster Software

Note: This is for the old OBS, it is not about OBS Studio !

  • Add a CLR Browser to your scene
  • The opacity can be set to 100% because the background will be rendered transparent, so no color-keying is required.
  • At URL enter the design file path
  • If you experience troubles with the rendering of the HTML file (flickering or misplacement), try removing the CSS overrides of the CLR Brower instance.
  • When no data is displayed, there could be a problem with the cross-domain security settings. This is because the HTMLs are rendered via file:// protocol instead of http://, so maybe you need to change some deeper settings of the CLR browser under OBS -> Settings -> Browser -> Instance -> ...
    • FileAccessFromFilesUrls (Set to Enabled)
    • UniversialAccessFromFilesUrls (Set to Enabled, but should also work when disabled)
    • WebSecurity (Set to Disabled, but should also work when enabled)

Example

Twitch Studio

  • Tested with version v0.74.3: After adding an embedded website and configuring the design file path it shows an error during the loading process. Twitch is looking at this problem as a bug report was issued and also communicated via discord.
  • Tested with version v0.89.2: Same issue still appears, hope they eventually fix that. As long this issue exists I recommend to use OSB Studio or SLOBS instead!

Workaround: After launching TwitchStudio the website plugin loads the hit counter correctly. On any modification of the browser plugin's configuration the Javascript messed up loading the hit counter. Therefore, restarting the application works for now but for me this is a no-go as the stream must be restarted! My recommendation if you want to use Twitch Studio anyways: Do not modify the layout while streaming!

Note: It was tested with some beta versions up to 0.89.2, so the instruction may change in newer versions.

Example

Customizing designs

Important: If you modify files and update to a new version, you should backup your designs to prevent overwriting!

Note: I try to make almost all changes backward compatible that old designs will also work with newer application version, therefore it should be possible to replace your old Designs folder with the updated folder to keep using the old design after an update.

Changing colors

The default designs' colors are all defined in the CSS file called Designs/stylsheet.css.
Look for the HEX values (e.g. #08FF20) or named values like white and modify the values.

Changing fonts

A specific font can be selected at the appearance dialog in two ways:

  • The font is already installed locally on the system
    • Font: (URL) Clear the field as no external font must be loaded in this case (Optional)
    • Font name: Enter your font family name of choice
    • Hit Apply

    Example: sans-serif or courier

  • The font is not installed locally and must be loaded from an external @font-face resource
    • Font: (URL) Enter the URL to the ressource into the font URL field

      See below how to get the URL

    • Font name: Clear the font family name as it should be determined automatically from the given font resource.

      If loading doesn't work this is most likely due to cross domain protection from the browser. But it should work when you enter the family name manually, too.

    • Hit Apply

To find suitable fonts I can recommend Google Fonts which can be opened by the button next to the Font: (URL) field. Search for one of your liking and see the embedded font and/or CSS instruction as you can simply copy the URL from there into the application.
The URL can be taken from the href attribute as shown here:

<link href="https://fonts.googleapis.com/css?family=Fontdiner+Swanky" rel="stylesheet">

Remastering whole design

You are completely free in designing the hit counter in the way you like.
To achive this, you can modify or create new custom designs. Simply modify or create HTML, CSS or Javascript files based on any of the pre-delivered designs.

More advanced modders can replace the design as a whole and create a new method of (visual) representation. To do this it is also possible to modify the HitCounter.template in order to generate a customized output file. The application is using JavaScript syntax (JSON) when writing data into the output file based on this template. Therefore the template has to have a line with the text HITCOUNTER_LIST_START which is the starting mark for the application. The mark with all further lines will be replaced with the JavaScript equivalent of the application's current data. This replacement is done until the HITCOUNTER_LIST_END text mark is reached.

The filenames for the Inputfile HitCounter.template and the OutputFile HitCounter.html can be changed in the HitCounterManagerSave.xml.

Show designs in a browser

Here you can find all the setup instructions that I have tested and were working for me.

Note: I'm working with Chrome and IE11 most of the time during development, therefore those should always work.

  • Most likely there is be a problem with the cross-domain security setting that can be avoided by allowing acces to local files in general:
    • Chrome
      • Start with command line option --allow-file-access-from-files

      Example: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

    • Firefox
      • Change the security policy in the browser settings about:config -> security.fileuri.strict_origin_policy -> false

      Note: This is a global settings, means you should enable this only for offline/trusted websites!

    • Internet Explorer 11
      • Accepting the initially blocked execution of the script should be sufficient
    • Edge
      • No issues here so far

FAQ

Cannot see anything when I open the HTML file

If you use any Broadcasting Software you should look at the respective installation guide.
However, you can also use a browser and follow the instructions here.

What does this mean: This is just a data file, please use an HTML file from the Designs folder!

The application stores the data at the HitCounter.html but it does not contain any visuals.
For visualizing the Design folder holds the correct HTML files like HitCounterGui.html.

My hotkeys are not always working

There are three methods that are supported by the application, each has its pros and cons:

Method Fullscreen Software generated keys Run as administrator Performance impact
System hotkey registration Poor Good Recommended Minimal
Polling keyboard keys Good Poor Not required Small
Low level keyboard hook Good Good Not required Moderate

Here are some more details if your are interested in:

  • System hotkey registration
    • This is a synchronous method as it uses the RegisterHotKey function (Windows API).
    • Only when Windows detects a hotkey, a notification to the application is sent, therefore the performance impact is at its minimum.
    • The privilege level must at least be on the same level as the application that is sending the notification. This means if you run the game as administratior you most likely have to run the HitCounterManager as administrator, too.
    • Downside: It may happen that an applications can "eat" the keys presses and therefore no notification will be sent.
  • Polling keyboard keys
    • This is an asynchronous method as it periodically checks the keyboard key presses using the GetAsyncKeyState function (Windows API).
    • This means the application has to check all the relevant keys in around every 20 milliseconds. This brings a slight performance drawback.
    • This method checks a key directly, so another application cannot interfere a hotkey detection.
    • Downside: Very short software generated hotkey events may be missed due to the polling interval.
  • Low level keyboard hook
    • This is a synchronous method as it uses the WH_KEYBOARD_LL hook via SetWindowsHookEx function (Windows API).
    • Even a software generated key that is set and released at the same time (yes, at the exact same time due to message buffering) can be detected this way.
    • Downside: Windows will notify the application for every single key state change, which brings a slight performance impact. But more importantly this detection is based on a global hook chain, so before the key press reaches the actual game, the key will also be processed by the HitCounterManager. Therefore you will get an input lag of probably a few nano seconds (depending on the processor). This is why Microsoft stated that this method should be used for debugging but not for productive environments.

If you have trouble getting hotkeys working...

  • try a different method to get the hot keys working if any of the available methods work.
  • run the HitCounterManager and your game as administrator.
  • make sure the HitCounterManager is started before you launch the game. If none of these suggestions work you can reach out to me, see I still have issues.

Timer jumps back sometimes

The actual timer runs within the application and the timer on the design is a separate timer running in parallel. As there is no direct connection between those timers it might look they are not in sync.

Every time you count a hit, select another split or start/stop the timer at the application, the data is written to an intermediate HTML file. Then it might take a short period of time that the new data is read by the design and starts counting from those "old" values.
This resulting offset is almost the same on the entire run and will not modify the final results!

The following figure shows an example, how the design shows values that are a little bit off but they will be correctly displayed each time the application updates the data. Therefore when you end you run or stop the timer, the values will be the same on the application and the design!

Timer Discrepancy

What happens with the time when I reorder or add/remove splits?

Each split has its own duration values, so reordering splits will not lose any data. The split times that are shown by the design are calculated based on the splits' duration and their current order.

A new split has a duration of 0 which means inserting a new split at any position will not alter the PB time of the whole run at all.

However, when you remove a split, the data is lost about this split and therefore has an impact on the run's total time!

What does the color of the "Delta" column mean?

First of all, the shown time value is difference between the total PB time and the current total time of the respective split.

  • Green: Better than total and split's PB time (negative value)
  • Light Red: Worse than split's PB time but still better than total PB time (negative value)
  • Red: Worse than total PB time (positive value)
  • Orange: Also known as gold split, the best time of the split ever
  • White:
    • There is no split PB time available (dash symbol) or..
    • Split comes after the currently active split and therefore is chronologically placed in the future.
      The shown time value is the difference between the split's PB time and the split's current duration (rather than their totals)!

How can I reset the gold time of a split?

As of now, there is no way doing this in the application directly. You can remove the split and re-add the split again but this also loses your PB time on that split. Therefore I recommend to close the application, open the HitCounterManagerSave.xml and search for correct profile and split. In order to reset the gold time just enter the value 0 for the respective DurationGold value and save the file. Afterwards you can start the application again.

What is my design file path?

Most likely: C:/Users/%USERNAME%/Documents/HitCounterManager/Designs/HitCounterGui.html

On every computer this path is a little different as it depends on the used operating system, the username, personal preferences and so on. However, you should know where you have put the Hit Counter Manager on your system no matter if you just have extracted a ZIP/tarball or you used the installer instead. The location where you placed the software is our base directory.

Note: For the installer on Windows the default directory is C:/Users/%USERNAME%/Documents/HitCounterManager

In this base directory there is a HTML file but this is NOT the correct one! The design file we want is within the Designs sub directory

Note: This directory contains everything you can modify to create the look and feel you want in your stream.

Since version 1.17 there is only one HTML file left which we are looking for: HitCounterGui.html

Note: In older versions you can select any of the available HTML files. Choose the one that fits best for you.

The combination of base directory and the design file is the file path you need for your broadcasting software or browser:

With my username "Peter K" using the installer's default installation path, the result would be:
C:/Users/Peter K/Documents/HitCounterManager/Designs/HitCounterGui.html

I still have issues

If you seek help after following the guide's instructions, you can reach out to me or contact Team Hitless at Discord. There are dozens of runners that - I am sure - are willing to help you. Happened multiple times already, so at this point to all the helpers: Thank you all for your help, I appreciate that!

If you reach out to me, please be patient as I do this in my free time and only when I am in the mood improving the software. Moreover I cannot guarantee to find a fix but I do my best.

Praise the sun! ☀️ . . . 🔥 . . . 🏃 💨

Clone this wiki locally