Code Adapter

Converting your Pinescript code to be PineConnector compatible, automatically!

Assuming basic code of:

//@version=5
strategy('Supertrend Strategy', overlay=true)

[supertrend, direction] = ta.supertrend(3, 10)

bodyMiddle = plot((open + close) / 2, display=display.none)
upTrend = plot(direction < 0 ? supertrend : na, 'Up Trend', color=color.new(color.green, 0), style=plot.style_linebr)
downTrend = plot(direction < 0 ? na : supertrend, 'Down Trend', color=color.new(color.red, 0), style=plot.style_linebr)

fill(bodyMiddle, upTrend, color.new(color.green, 90), fillgaps=false)
fill(bodyMiddle, downTrend, color.new(color.red, 90), fillgaps=false)

if ta.change(direction) < 0
    strategy.entry('My Long Entry Id', strategy.long)

if ta.change(direction) > 0
    strategy.entry('My Short Entry Id', strategy.short)

The output should be:

//@version=5
strategy('Supertrend Strategy', overlay=true)

[supertrend, direction] = ta.supertrend(3, 10)

bodyMiddle = plot((open + close) / 2, display=display.none)
upTrend = plot(direction < 0 ? supertrend : na, 'Up Trend', color=color.new(color.green, 0), style=plot.style_linebr)
downTrend = plot(direction < 0 ? na : supertrend, 'Down Trend', color=color.new(color.red, 0), style=plot.style_linebr)

fill(bodyMiddle, upTrend, color.new(color.green, 90), fillgaps=false)
fill(bodyMiddle, downTrend, color.new(color.red, 90), fillgaps=false)

if ta.change(direction) < 0
    strategy.entry('My Long Entry Id', strategy.long)
    alert('60123456789,buy,EURUSD,risk=1', alert.freq_once_per_bar_close)

if ta.change(direction) > 0
    strategy.entry('My Short Entry Id', strategy.short)
    alert('60123456789,sell,EURUSD,risk=1', alert.freq_once_per_bar_close)

plotshape(ta.change(direction) < 0, style=shape.labelup, location=location.belowbar, color=color.new(#046ff9, 0), size=size.large, text='PineConnector \n Buy', textcolor=color.new(color.white, 0)) //plotting up arrow when buy/long conditions met 

plotshape(ta.change(direction) > 0, style=shape.labeldown, location=location.abovebar, color=color.new(#046ff9, 0), size=size.large, text='PineConnector \n Sell', textcolor=color.new(color.white, 0)) //plotting down arrow when sell/short conditions met

There are 2 components that needs to be added:

the alert() code that comes a row after “strategy.entry”

if strategy.entry has “strategy.long” → alert('60123456789,buy,EURUSD,risk=1', alert.freq_once_per_bar_close)
if strategy.entry has “strategy.short” → alert('60123456789,sell,EURUSD,risk=1', alert.freq_once_per_bar_close)

plotshape() code that uses the entry condition → this usually comes after the “if” such as “ta.change(direction) > 0”

since “ta.change(direction) < 0” comes after the “if” and “strategy.long” was used → code to add for arrow up:

plotshape(ta.change(direction) < 0, style=shape.labelup, location=location.belowbar, color=color.new(#046ff9, 0), size=size.large, text='PineConnector \n Buy', textcolor=color.new(color.white, 0)) //plotting up arrow when buy/long conditions met

since “ta.change(direction) > 0” comes after the “if” and “strategy.short” was used → code to add for arrow down:

plotshape(ta.change(direction) > 0, style=shape.labeldown, location=location.abovebar, color=color.new(#046ff9, 0), size=size.large, text='PineConnector \n Sell', textcolor=color.new(color.white, 0)) //plotting down arrow when sell/short conditions met

We may use placeholders for now, and we can refine the exact code to use in later versions.

The above is to be done using HTML, CSS and JS.

Essentially, we are trying to automate “Section 1.2 Strategy” in the documentation here: https://docs.pineconnector.com/low-code#445e8f8d8c9e48c39adf9d2e64bf7a92

super-embed:
<div id="syntax-builder">
  <div id="input-output-container">
    <div id="input-container">
      <h2 style="font-size: 32px">Input:</h2>
      <textarea id="input-code" style="white-space: nowrap"></textarea>
      <div id="input-button-container">
        <button id="add-row-button">Add Row</button>
      </div>
    </div>
    <div id="output-container">
      <h2 style="font-size: 32px">Output:</h2>
      <textarea id="output-code" readonly style="white-space"></textarea>
      <div id="output-button-container">
        <button id="copy-button">Copy</button>
      </div>
    </div>
  </div>
</div>

<style>
#syntax-builder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  width: 75%;
  height: 30px;
  font-size: 18px;
  background-color: #046ff9;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 0 10px;
}

button:hover {
  background-color: #0059d9;
}

#input-output-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 20px 0;
}

#input-container,
#output-container {
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 20px;
}

textarea {
  width: 100%;
  font-family: monospace;
  font-size: 14px;
  padding: 20px;
  resize: vertical;
  overflow-y: auto;
  border: none;
  background-color: #fafafa;
}

#input-button-container,
#output-button-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
</style>

<script>
function setTextareaHeight(textarea, rows) {
  textarea.style.height = (textarea.offsetHeight * rows) + "px";
}

const inputCode = document.getElementById('input-code');
const outputCode = document.getElementById('output-code');
setTextareaHeight(inputCode, 20);
setTextareaHeight(outputCode, 20);

inputCode.addEventListener('keyup', () => {
  const rows = inputCode.value.split('\n').length;
  setTextareaHeight(inputCode, rows);
});

outputCode.addEventListener('keyup', () => {
  const rows = outputCode.value.split('\n').length;
  setTextareaHeight(outputCode, rows
);
});

const addRowButton = document.getElementById('add-row-button');
const copyButton = document.getElementById('copy-button');

addRowButton.addEventListener('click', () => {
  const inputLines = inputCode.value.split('\n');
  const outputLines = [];

  for (let i = 0; i < inputLines.length; i++) {
    const line = inputLines[i];
    outputLines.push(line);
    if (line.includes('strategy.entry')) {
      outputLines.push("  alert('60123456789,sell,EURUSD,risk=1', alert.freq_once_per_bar_close)");
    }
  }

  outputCode.innerHTML = outputLines.join('\n');
});

copyButton.addEventListener('click', () => {
  outputCode.select();
  document.execCommand('copy');
});

PineConnector Code Adapter

Code Adapter