Skip to content

SetupGuide

Jump to bottom
Peter Kirmeier edited this page Sep 23, 2020 · 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 brower 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 restared! 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 ressource
    • 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 is detemined automatically from the given font ressource

      If loading doesn't work you can try setting the family name manually here

    • 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 hot keys 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 interessted in:

  • System hotkey registration
    • This is a synchronous method as it uses the RegisterHotKey (Windows API)
    • Only when Windows detects a hotkey, a notification to the application is sent, therefore the performance impact is at its minimum
    • Downside: It may happen that an applications can "eat" the keys presses and therefore no notification will be sent
    • Also the privilege must at least on the same level that Windows sents a notification. This means that if you run the game as administration you most likely have to run the HitCounterManager as administrator, too.
  • Polling keyboard keys
    • This is a asynchronous method as it periodically checks the keyboard key presses using the GetAsyncKeyState (Windows API)
    • This means the application has to check around every 20 millisecons all the relevant keys. 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 (Windows API)
    • 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 is processed by the HitCounterManager. Therefore you will get an input lag of propably a few nano seconds (depending on the processor) for all connected keyboards. This is why Microsoft stated that this method should be used for debugging but not for productive environments.
    • 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

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.

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

My software is not listed

In case you use any other software and have trouble with the installation, let me know and I try to figure out how to setup this software.

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. Happend 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 freetime 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