Welcome to the Power Users community on Codidact!

Power Users is a Q&A site for questions about the usage of computer software and hardware. We are still a small site and would like to grow, so please consider joining our community. We are looking forward to your questions and answers; they are the building blocks of a repository of knowledge we are building together.

Post History

60%

+1 −0

Q&A What in the HTML is preventing CutyCapt from capturing Altair output

Question I am using Altair to generate plots using python and pandas. What is preventing CutyCapt from capturing the plot in the html output? CutyCapt writes a blank png. MWE I am outputting ...

0 answers · posted 1y ago by mcp‭ · edited 1y ago by mcp‭

Question html conversion cutycapt png altair

#4: Post edited by

mcp‭ · 2022-08-02T00:38:57Z (over 1 year ago)
Add Altair tag

Copy Link

Raw

Markdown

html conversion cutycapt png

html conversion cutycapt png altair

#3: Post edited by

mcp‭ · 2022-08-02T00:31:18Z (over 1 year ago)
Fix title typo

Copy Link

Raw

Markdown

~~What in the HTMl is preventing CutyCapt from capturing Altair output~~

What in the HTML is preventing CutyCapt from capturing Altair output

#2: Post edited by

mcp‭ · 2022-08-02T00:28:34Z (over 1 year ago)
Separate actions

Copy Link

Raw

Markdown

# Question
I am using [Altair](https://altair-viz.github.io/) to generate plots
using python and pandas.
What is preventing CutyCapt from capturing the plot in the html output?
CutyCapt writes a blank png.
# MWE
I am outputting the .html with:
```py
import pandas as pd
import numpy as np
import altair as alt
df = pd.DataFrame(np.random.rand(9, 4), columns=['a', 'b', 'c', 'd'])
chart = alt.Chart(df).mark_rect().encode(x="a", y="b", color="c")
chart.save("chart.html")
```
```html
<!DOCTYPE html>
<html>
<head>
<style>
.error {
color: red;
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite@4.17.0"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
</head>
<body>
<div id="vis"></div>
<script>
(function(vegaEmbed) {
var spec = {"config": {"view": {"continuousWidth": 400, "continuousHeight": 300}}, "data": {"name": "data-6c11c789e79447bd33f40ab5297026c0"}, "mark": "bar", "encoding": {"color": {"field": "c", "type": "quantitative"}, "column": {"field": "d", "type": "quantitative"}, "x": {"field": "a", "type": "quantitative"}, "y": {"field": "b", "type": "quantitative"}}, "$schema": "https://vega.github.io/schema/vega-lite/v4.17.0.json", "datasets": {"data-6c11c789e79447bd33f40ab5297026c0": [{"a": 0.43013233092833025, "b": 0.27177562529259736, "c": 0.7602015609177942, "d": 0.7311027236752722}, {"a": 0.894326631632603, "b": 0.03363221098772784, "c": 0.18814991203464904, "d": 0.5393661900335383}, {"a": 0.30590885228454956, "b": 0.1385903758177215, "c": 0.20056187049212693, "d": 0.13268538054066925}, {"a": 0.09132915272098341, "b": 0.9845830859947132, "c": 0.6791784948328378, "d": 0.05039662079042395}, {"a": 0.00944981386743815, "b": 0.10108020124530159, "c": 0.4801936562280591, "d": 0.43678812317642346}, {"a": 0.05018673810031582, "b": 0.29888889102896976, "c": 0.5222334542811063, "d": 0.4906103305668549}, {"a": 0.2495239862021631, "b": 0.7968424707238418, "c": 0.8158713304939001, "d": 0.967112428010773}, {"a": 0.4381679547570413, "b": 0.6255343076920125, "c": 0.5378408088777088, "d": 0.4457264895608548}, {"a": 0.4608296926507556, "b": 0.8631528978904349, "c": 0.23770018368776014, "d": 0.3865998252162157}]}};
var embedOpt = {"mode": "vega-lite"};
function showError(el, error){
el.innerHTML = ('<div class="error" style="color:red;">'
+ '<p>JavaScript Error: ' + error.message + '</p>'
+ "<p>This usually means there's a typo in your chart specification. "
+ "See the javascript console for the full traceback.</p>"
+ '</div>');
throw error;
}
const el = document.getElementById('vis');
vegaEmbed("#vis", spec, embedOpt)
.catch(error => showError(el, error));
})(vegaEmbed);
</script>
</body>
</html>
```
I am running CutyCapt using this script:
```py
#!/bin/sh
if [[ $# -eq 0 ]]
then
echo "No arguments were provided. Specify files to convert."
exit 1
fi
for file in "$@"
do
if [[ "$file" == *".html" ]]
then
in=`realpath $file`
out=${in/".html"/".png"}
/usr/bin/CutyCapt --url=file://$in --out=$out
echo "`basename $in` -> `basename $out`"
fi
done
```
~~stored as an executable and run with:~~
```sh
xclip -o /usr/local/bin/htmltopng
```
```sh
htmltopng chart.html
```
# Tried
I have tried specifying options as per [this answer](https://stackoverflow.com/a/7370034/4682839), changing the
call to:
```sh
/usr/bin/CutyCapt --javascript=on --java=on --plugins=on --js-can-open-windows=on --js-can-access-clipboard=on --delay=10000 --url=file://$in --out=$out
```

# Question
I am using [Altair](https://altair-viz.github.io/) to generate plots
using python and pandas.
What is preventing CutyCapt from capturing the plot in the html output?
CutyCapt writes a blank png.
# MWE
I am outputting the .html with:
```py
import pandas as pd
import numpy as np
import altair as alt
df = pd.DataFrame(np.random.rand(9, 4), columns=['a', 'b', 'c', 'd'])
chart = alt.Chart(df).mark_rect().encode(x="a", y="b", color="c")
chart.save("chart.html")
```
```html
<!DOCTYPE html>
<html>
<head>
<style>
.error {
color: red;
}
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite@4.17.0"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
</head>
<body>
<div id="vis"></div>
<script>
(function(vegaEmbed) {
var spec = {"config": {"view": {"continuousWidth": 400, "continuousHeight": 300}}, "data": {"name": "data-6c11c789e79447bd33f40ab5297026c0"}, "mark": "bar", "encoding": {"color": {"field": "c", "type": "quantitative"}, "column": {"field": "d", "type": "quantitative"}, "x": {"field": "a", "type": "quantitative"}, "y": {"field": "b", "type": "quantitative"}}, "$schema": "https://vega.github.io/schema/vega-lite/v4.17.0.json", "datasets": {"data-6c11c789e79447bd33f40ab5297026c0": [{"a": 0.43013233092833025, "b": 0.27177562529259736, "c": 0.7602015609177942, "d": 0.7311027236752722}, {"a": 0.894326631632603, "b": 0.03363221098772784, "c": 0.18814991203464904, "d": 0.5393661900335383}, {"a": 0.30590885228454956, "b": 0.1385903758177215, "c": 0.20056187049212693, "d": 0.13268538054066925}, {"a": 0.09132915272098341, "b": 0.9845830859947132, "c": 0.6791784948328378, "d": 0.05039662079042395}, {"a": 0.00944981386743815, "b": 0.10108020124530159, "c": 0.4801936562280591, "d": 0.43678812317642346}, {"a": 0.05018673810031582, "b": 0.29888889102896976, "c": 0.5222334542811063, "d": 0.4906103305668549}, {"a": 0.2495239862021631, "b": 0.7968424707238418, "c": 0.8158713304939001, "d": 0.967112428010773}, {"a": 0.4381679547570413, "b": 0.6255343076920125, "c": 0.5378408088777088, "d": 0.4457264895608548}, {"a": 0.4608296926507556, "b": 0.8631528978904349, "c": 0.23770018368776014, "d": 0.3865998252162157}]}};
var embedOpt = {"mode": "vega-lite"};
function showError(el, error){
el.innerHTML = ('<div class="error" style="color:red;">'
+ '<p>JavaScript Error: ' + error.message + '</p>'
+ "<p>This usually means there's a typo in your chart specification. "
+ "See the javascript console for the full traceback.</p>"
+ '</div>');
throw error;
}
const el = document.getElementById('vis');
vegaEmbed("#vis", spec, embedOpt)
.catch(error => showError(el, error));
})(vegaEmbed);
</script>
</body>
</html>
```
I am running CutyCapt using this script:
```py
#!/bin/sh
if [[ $# -eq 0 ]]
then
echo "No arguments were provided. Specify files to convert."
exit 1
fi
for file in "$@"
do
if [[ "$file" == *".html" ]]
then
in=`realpath $file`
out=${in/".html"/".png"}
/usr/bin/CutyCapt --url=file://$in --out=$out
echo "`basename $in` -> `basename $out`"
fi
done
```
stored as an executable:
```sh
xclip -o /usr/local/bin/htmltopng
```
and run with:
```sh
htmltopng chart.html
```
# Tried
I have tried specifying options as per [this answer](https://stackoverflow.com/a/7370034/4682839), changing the
call to:
```sh
/usr/bin/CutyCapt --javascript=on --java=on --plugins=on --js-can-open-windows=on --js-can-access-clipboard=on --delay=10000 --url=file://$in --out=$out
```

#1: Initial revision by

mcp‭ · 2022-08-02T00:27:22Z (over 1 year ago)

Copy Link

Raw

Markdown

What in the HTMl is preventing CutyCapt from capturing Altair output

# Question
I am using [Altair](https://altair-viz.github.io/) to generate plots
using python and pandas.

What is preventing CutyCapt from capturing the plot in the html output?
CutyCapt writes a blank png.

# MWE
I am outputting the .html with:
```py
import pandas as pd
import numpy as np
import altair as alt

df = pd.DataFrame(np.random.rand(9, 4), columns=['a', 'b', 'c', 'd'])
chart = alt.Chart(df).mark_rect().encode(x="a", y="b", color="c")
chart.save("chart.html")
```

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    .error {
        color: red;
    }
  </style>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite@4.17.0"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
</head>
<body>
  <div id="vis"></div>
  <script>
    (function(vegaEmbed) {
      var spec = {"config": {"view": {"continuousWidth": 400, "continuousHeight": 300}}, "data": {"name": "data-6c11c789e79447bd33f40ab5297026c0"}, "mark": "bar", "encoding": {"color": {"field": "c", "type": "quantitative"}, "column": {"field": "d", "type": "quantitative"}, "x": {"field": "a", "type": "quantitative"}, "y": {"field": "b", "type": "quantitative"}}, "$schema": "https://vega.github.io/schema/vega-lite/v4.17.0.json", "datasets": {"data-6c11c789e79447bd33f40ab5297026c0": [{"a": 0.43013233092833025, "b": 0.27177562529259736, "c": 0.7602015609177942, "d": 0.7311027236752722}, {"a": 0.894326631632603, "b": 0.03363221098772784, "c": 0.18814991203464904, "d": 0.5393661900335383}, {"a": 0.30590885228454956, "b": 0.1385903758177215, "c": 0.20056187049212693, "d": 0.13268538054066925}, {"a": 0.09132915272098341, "b": 0.9845830859947132, "c": 0.6791784948328378, "d": 0.05039662079042395}, {"a": 0.00944981386743815, "b": 0.10108020124530159, "c": 0.4801936562280591, "d": 0.43678812317642346}, {"a": 0.05018673810031582, "b": 0.29888889102896976, "c": 0.5222334542811063, "d": 0.4906103305668549}, {"a": 0.2495239862021631, "b": 0.7968424707238418, "c": 0.8158713304939001, "d": 0.967112428010773}, {"a": 0.4381679547570413, "b": 0.6255343076920125, "c": 0.5378408088777088, "d": 0.4457264895608548}, {"a": 0.4608296926507556, "b": 0.8631528978904349, "c": 0.23770018368776014, "d": 0.3865998252162157}]}};
      var embedOpt = {"mode": "vega-lite"};

      function showError(el, error){
          el.innerHTML = ('<div class="error" style="color:red;">'
                          + '<p>JavaScript Error: ' + error.message + '</p>'
                          + "<p>This usually means there's a typo in your chart specification. "
                          + "See the javascript console for the full traceback.</p>"
                          + '</div>');
          throw error;
      }
      const el = document.getElementById('vis');
      vegaEmbed("#vis", spec, embedOpt)
        .catch(error => showError(el, error));
    })(vegaEmbed);

  </script>
</body>
</html>
```

I am running CutyCapt using this script:
```py
#!/bin/sh

if [[ $# -eq 0 ]]
then
    echo "No arguments were provided. Specify files to convert."
    exit 1
fi

for file in "$@"
do
    if [[ "$file" == *".html" ]]
    then
        in=`realpath $file`
        out=${in/".html"/".png"}

        /usr/bin/CutyCapt --url=file://$in --out=$out

        echo "`basename $in` -> `basename $out`"
    fi
done
```

stored as an executable and run with:
```sh
xclip -o /usr/local/bin/htmltopng
```

```sh
htmltopng chart.html
```

# Tried
I have tried specifying options as per [this answer](https://stackoverflow.com/a/7370034/4682839), changing the
call to:
```sh
/usr/bin/CutyCapt --javascript=on --java=on --plugins=on --js-can-open-windows=on --js-can-access-clipboard=on --delay=10000 --url=file://$in --out=$out
```

html conversion cutycapt png

Communities

Post History