Add grafana + color support (#2)

Author: MacroPower

.gitignore

@@ -18,4 +18,4 @@ vendor/
 data/
 metrics/
 frames/
-*.mkv
+videos/

README.md

@@ -1,8 +1,36 @@
-# prom_bad_apple
+# prometheus_video_renderer
 
-Plays videos using [Prometheus](https://prometheus.io/), e.g. [Bad Apple](https://www.youtube.com/watch?v=ApJxFprSTqA).
+Plays videos using [Prometheus](https://prometheus.io/) and [Grafana](grafana.com/), e.g. [Bad Apple](https://www.youtube.com/watch?v=ApJxFprSTqA).
 
-![preview](preview.gif)
+![grafana](docs/img/rgb_grafana.png)
+
+## Modes
+
+Currently 3 different modes are supported.
+
+### Bitmap
+
+The bitmap mode either creates a sample or does not, depending on the brightness of the source image. It is the only mode compatible with the Prometheus UI.
+
+![bitmap-preview](docs/img/demo/bitmap.gif)
+
+Example: https://www.youtube.com/watch?v=ApJxFprSTqA
+
+### Grayscale
+
+The RGB mode creates a metric and sets a brightness label matching an override for each unique brightness.
+
+This is made with 256 unique overrides.
+
+Example coming soon.
+
+### RGB
+
+The RGB mode creates offset metrics for red, green, and blue, and sets a brightness label matching an override for each unique color/brightness.
+
+This is 22-bit color, made with 640 unique overrides.
+
+Example: https://www.youtube.com/watch?v=aLvh0oId3Go
 
 ## Inspiration
 
@@ -16,10 +44,10 @@ A while back I thought [this blog post](https://giedrius.blog/2019/09/21/is-it-a
 - If you would like to make sure that the y axis doesn't change, you can add 1px white bars to each frame. e.g.
   - `ffmpeg -i frames\out%06d.png -vf "crop=in_w:in_h-1:0:1,pad=iw+0:ih+1:0:1:#FFFFFF@1,format=rgb24" -y frames\out%06d.png`
   - `ffmpeg -i frames\out%06d.png -vf "crop=in_w:in_h-1:0:-1,pad=iw+0:ih+1:0:-1:#FFFFFF@1,format=rgb24" -y frames\out%06d.png`
-- `go run main.go`
+- `go run main.go --project="bad_apple"` (use `--help` to see all arguments)
 - Loop over the files and send them to `promtool tsdb create-blocks-from openmetrics`
 - `docker compose up`
 - Wait for Prometheus to compact etc. so it doesn't take 20 years to render.
-- Run `prom_record.ahk` or some other script to record all the frames from the UI.
+- Run a script to record all the frames from the UI. (Mediocre examples are in the scripts directory.)
 - `cd` to wherever you stored your screenshots.
 - Generate the video file `ffmpeg -framerate 30 -i '%06d.png' -c:v libx264 -pix_fmt yuv420p out.mp4`

docker-compose.yaml

@@ -1,5 +1,8 @@
 version: '3'
 
+networks:
+  prometheus-video-renderer:
+
 services:
   prometheus:
     image: prom/prometheus:v2.27.0
@@ -12,4 +15,29 @@ services:
       - '--config.file=/etc/prometheus/prometheus.yaml'
       - '--storage.tsdb.path=/prometheus'
       - '--storage.tsdb.retention.time=20y'
-      - '--query.lookback-delta=5s'
+      - '--query.lookback-delta=1s'
+    networks:
+      - prometheus-video-renderer
+
+  grafana:
+    image: grafana/grafana:7.5.6
+    ports:
+      - 3000:3000
+    volumes:
+      - ./grafana/dashboards:/etc/dashboards
+      - ./grafana/dashboards.yaml:/etc/grafana/provisioning/dashboards/dashboards.yaml
+      - ./grafana/datasources.yaml:/etc/grafana/provisioning/datasources/datasources.yaml
+    environment:
+      GF_INSTALL_PLUGINS: grafana-image-renderer
+      GF_RENDERING_SERVER_URL: http://renderer:8081/render
+      GF_RENDERING_CALLBACK_URL: http://grafana:3000/
+      GF_LOG_FILTERS: rendering:debug
+    networks:
+      - prometheus-video-renderer
+
+  renderer:
+    image: grafana/grafana-image-renderer:2.1.1
+    ports:
+      - 8081:8081
+    networks:
+      - prometheus-video-renderer

preview.gif docs/img/demo/bitmap.gif

@@ -0,0 +1,86 @@
+local grafana = import 'github.com/grafana/grafonnet-lib/grafonnet/grafana.libsonnet';
+local dashboard = grafana.dashboard;
+local row = grafana.row;
+local graphPanel = grafana.graphPanel;
+local prometheus = grafana.prometheus;
+local template = grafana.template;
+
+local videoHeight = 100;
+
+local videoPanel =
+  graphPanel.new(
+    'Video',
+    min=0,
+    max=videoHeight * 3,
+    fill=0,
+    linewidth=2,
+    interval='1s',
+    transparent=false,
+    legend_show=false,
+    shared_tooltip=false,
+    datasource='Prometheus',
+  )
+  .addTarget(
+    prometheus.target(
+      'r',
+      legendFormat='r{{l}}',
+      intervalFactor=1,
+    )
+  )
+  .addTarget(
+    prometheus.target(
+      'g',
+      legendFormat='g{{l}}',
+      intervalFactor=1,
+    )
+  )
+  .addTarget(
+    prometheus.target(
+      'b',
+      legendFormat='b{{l}}',
+      intervalFactor=1,
+    )
+  ) + {
+    seriesOverrides+: [
+      {
+        alias: 'r%s' % l,
+        color: 'rgb(%s, 0, 0)' % l,
+      }
+      for l in std.range(0, 255)
+    ] + [
+      {
+        alias: 'g%s' % l,
+        color: 'rgb(0, %s, 0)' % l,
+      }
+      for l in std.range(0, 255)
+    ] + [
+      {
+        alias: 'b%s' % l,
+        color: 'rgb(0, 0, %s)' % (l * 2),
+      }
+      for l in std.range(0, 127)
+    ],
+  };
+
+dashboard.new(
+  'Prometheus Video Renderer',
+  uid='pvr-dash',
+  timezone='utc',
+  schemaVersion=16,
+)
+.addTemplate(
+  grafana.template.datasource(
+    'PROMETHEUS_DS',
+    'prometheus',
+    'Prometheus',
+    hide='label',
+  )
+)
+.addPanel(
+  videoPanel, gridPos={
+    x: 0,
+    y: 0,
+    w: 24,
+    h: 25,
+  }
+)

docs/img/rgb_grafana.png

@@ -0,0 +1,14 @@
+apiVersion: 1
+
+providers:
+  - name: 'prometheus-video-renderer'
+    orgId: 1
+    folder: ''
+    folderUid: ''
+    type: file
+    disableDeletion: false
+    updateIntervalSeconds: 10
+    allowUiUpdates: false
+    options:
+      path: /etc/dashboards
+      foldersFromFilesStructure: false