Code Monkey home page Code Monkey logo

war3observer's Introduction

Summary

war3observer is a tool that keeps a local webpage updated with data from the Warcraft III observer API. This can be used for streaming tools such as OBS to render the data on stream.

It runs a local websocket server which sends a message with the entire state periodically. It uses war3structs to parse the state from the memory mapped file. A web client written in mithril.js is included to render the state.

screenshot example

Usage

  • Download the latest release
  • Extract it somewhere
  • In OBS, add a browser source to your scene, tick Local file and select any of the .html files in the client folder you extracted
  • Set the width and height to 1920x1080 for 16:9, 1440x1080 for 4:3, scale it in OBS as needed
  • For best performance (optional):
    • Use existing sources between scenes (one file = one source)
    • To avoid them running in the background regardless of whether you're using them or not, keep the sources in a separate scene collection OR enable Shutdown source when not visible on them
    • If the source has no animations the FPS can be set to something low, like 5
  • Now you can run war3observer.exe whenever you want the overlay to start updating

You generally shouldn't, but if you experience the overlay not updating properly, you can try any of these:

  • Restart war3observer.exe (after you've started Warcraft III)
  • Refresh the browser cache in OBS (double-click on the source, hit OK)

Advanced usage

For advanced options you can create a file called war3observer.config.json in the same directory as war3observer.exe. Example config file:

{
  "port": 8657,
  "clientSettings": {
    "useTeamColors": true,
    "hideHeroItems": true,
    "reversePlayerOrder": true
  }
}

war3observer.exe also comes with some command-line options, run it with --help for details.

Controlling the overlay

It's possible to control the overlay beyond OBS scenes with an external program. Send a JSON message to the server with top-level action as "setClientSettings" and content as an object of settings to change. All listening clients will update accordingly.

Updating

To update to the latest version you can download the latest release and extract the contents to wherever you have the previous version installed (replacing files). If you are using the included client you will have to clear the browser cache in OBS as well.

Development

  • Have Python 3, node, and Warcraft III installed
  • git clone https://github.com/warlockbrawl/war3observer.git
  • cd war3observer
  • pip install -r requirements.txt -r requirements-dev.txt
  • python -m war3observer to start the server
  • cd client
  • npm install
  • npm run start to watch for changes and build the client (rerun this whenever a new view is added)
  • mkdir dist\icons
  • python ..\tools\extract_icons.py <wc3 installation dir> .\dist\icons if you want to include icons

Making custom views

If you're interested in making personalized views and you want to make use of the included client's environment, you can use the war3observer-client-tools package on npm.

Note: If you only need to edit a view's settings and/or add custom CSS, you can just copy+paste one of the included views and edit its HTML. Add custom CSS in <style> tags or link to one; change app.settings before the call to app.boot().

Create a directory for your project that contains these files:

package.json

{
  "private": true,
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack -p"
  }
}

webpack.config.js

const config = require('war3observer-client-tools');

module.exports = config;

views/<your view>/app.js

import App from 'war3observer-client-tools/common/App';

const app = new App();

export { app };

Now you can npm install --save-dev war3observer-client-tools and npm run build and it will create your view in dist.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.