Custom widget inline class

[Semt3x]

Hello, maybe it's not an issue and I'm just dumb,
I made a small btc tracker taking use of binance api and custom-widget

While it's pretty straightforward
config

crypto:
    type: "yasb.custom.CustomWidget"
    options:
      label: "<span>\uf15a</span> {data[lastPrice]} : <b data-trend=\"positive\">{data[priceChangePercent]}%</b>"
      label_alt: " <span>\uf15a</span> Semtex"
      class_name: "cryto-widget"
      exec_options:
        run_cmd: "C:\\Users\\s3mt3\\get_btc_binance.bat" 
        return_format: "json"
        hide_empty: false
      callbacks:
        on_left: "toggle_label"

styles

.custom-widget {
    background-color: #f5c276;
    padding: 0;
}
.custom-widget .icon {
    color: #142123;
    padding: 0 6px;
}
.custom-widget .label {
    background-color: #221f2e;
    color: #f5c276; 
    padding: 0 6px;
    margin: 1px;
    border-radius: 6px;
}

.custom-widget .label b[data-trend="positive"] {
    color: green;
}
.custom-widget .label b[data-trend="negative"] {
    color: red;
}

Don't ask me why the class_name -> crypto-widget selector doesn't work :/

bat

@echo off
curl -s https://api.binance.com/api/v3/ticker/24hr?symbol=BTCEUR | jq "walk(if type == \"string\" and test(\"^-?[0-9]+(\\\\.[0-9]+)?$\") then (. | tonumber | (. * 100 + 0.5 | floor) / 100) else . end) | .trend = (if (.priceChangePercent | tonumber) > 0 then \"positive\" else \"negative\" end)"

Output json :

{
  "symbol": "BTCEUR",
  "priceChange": -114.42,
  "priceChangePercent": -0.13,
  "weightedAvgPrice": 85736.81,
  "prevClosePrice": 85722.6,
  "lastPrice": 85601.69,
  "lastQty": 0,
  "bidPrice": 85626.81,
  "bidQty": 0,
  "askPrice": 85632.63,
  "askQty": 0.01,
  "openPrice": 85716.11,
  "highPrice": 87399.99,
  "lowPrice": 83726.6,
  "volume": 379.38,
  "quoteVolume": 32527242.62,
  "openTime": 1731844703607,
  "closeTime": 1731931103607,
  "firstId": 139263319,
  "lastId": 139328849,
  "count": 65531,
  "trend": "negative"
}

Looks like that

Right now, the <b> part should be pretty red.

while I've troubleshooted a bit and ensured the trend prop was available and my css selector was good I can't get it to work...
Is this a limitation ? a yaml typo ? or a bug in parsing ?

[amnweb]

Why complicate things? I have converted this script to PowerShell and told YASB to return string instead of JSON. Colors green and red are defined inside the script, so YASB will show them correctly.

Here is demo

2024-11-18.14-45-34.mp4

This is just example you an modify this as you want

.cryto-widget .icon {
    color: #f5c276;
    padding: 0 6px;
}
.cryto-widget .label {
    padding: 0 6px;
    margin: 1px;
    border-radius: 6px;
}

  crypto:
      type: "yasb.custom.CustomWidget"
      options:
        label: "<span>\uf15a</span> {data}"
        label_alt: " <span>\uf15a</span> Semtex"
        class_name: "cryto-widget"
        exec_options:
          run_cmd: "powershell C:\\Users\\amn\\get_btc_binance.ps1" 
          return_format: "string"
          hide_empty: false
          run_interval: 5000
        callbacks:
          on_left: "toggle_label"

PowerShell Script

# YASB custom widget script to get BTC-EUR data from Binance as string.
# Set output encoding to UTF-8 Probably not needed
[Console]::OutputEncoding = [System.Text.Encoding]::UTF8
try { 
    # Get BTC-EUR data from Binance
    $data = Invoke-RestMethod 'https://api.binance.com/api/v3/ticker/24hr?symbol=BTCEUR'
       
    # Calculate rounded values with strict error checking
    if ($null -eq $data.priceChangePercent) { throw "Missing priceChangePercent" }
    if ($null -eq $data.lastPrice) { throw "Missing lastPrice" }
    
    $priceChange = [math]::Round([double]$data.priceChangePercent, 2)
    $lastPrice = [math]::Round([double]$data.lastPrice, 2)

    #Formats the last price of Bitcoin to a string with two decimal places and appends the Euro symbol.
    $lastPrice = $lastPrice.ToString("N2", [System.Globalization.CultureInfo]::InvariantCulture) + "€"

    # Define trend color based on price change
    $trendColor = if ($priceChange -gt 0) { 'green' } else { 'red' }
    
    # Output formatted string with HTML (UTF-8)
    [Console]::WriteLine("$lastPrice <b style=""color:$trendColor"">$priceChange%</b>")
} catch {
    Write-Error "Error processing data: $_"
}

[Semt3x]

Well thanks, I'll give it a try. I didn't feel like complicating things according to the customWidget documentation first example, I'm just getting a json and formatting it a bit with jq. I may end up using your script and start reasoning like that for the next ones. I'm curious though. What's not working with mine ? Is it the parsing of the html with json inserts ? Wrong escaping ? Le lun. 18 nov. 2024, 14:49, AmN ***@***.***> a écrit :

…

Why complicate things? I have converted this script to PowerShell and told YASB to return string instead of JSON. Colors green and red are defined inside the script, so YASB will show them correctly. Here is demo https://github.com/user-attachments/assets/21909cfc-23f8-4972-94f0-df69b70eb7e0 This is just example you an modify this as you want .cryto-widget .icon { color: #f5c276; padding: 0 6px; } .cryto-widget .label { padding: 0 6px; margin: 1px; border-radius: 6px; } crypto: type: "yasb.custom.CustomWidget" options: label: "<span>\uf15a</span> {data}" label_alt: " <span>\uf15a</span> Semtex" class_name: "cryto-widget" exec_options: run_cmd: "powershell C:\\Users\\amn\\get_btc_binance.ps1" return_format: "string" hide_empty: false run_interval: 5000 callbacks: on_left: "toggle_label" PowerShell Script # YASB custom widget script to get BTC-EUR data from Binance as string.# Set output encoding to UTF-8 Probably not needed [Console]::OutputEncoding = [System.Text.Encoding]::UTF8try { # Get BTC-EUR data from Binance $data = Invoke-RestMethod 'https://api.binance.com/api/v3/ticker/24hr?symbol=BTCEUR' # Calculate rounded values with strict error checking if ($null -eq $data.priceChangePercent) { throw "Missing priceChangePercent" } if ($null -eq $data.lastPrice) { throw "Missing lastPrice" } $priceChange = [math]::Round([double]$data.priceChangePercent, 2) $lastPrice = [math]::Round([double]$data.lastPrice, 2) #Formats the last price of Bitcoin to a string with two decimal places and appends the Euro symbol. $lastPrice = $lastPrice.ToString("N2", [System.Globalization.CultureInfo]::InvariantCulture) + "&euro;" # Define trend color based on price change $trendColor = if ($priceChange -gt 0) { 'green' } else { 'red' } # Output formatted string with HTML (UTF-8) [Console]::WriteLine("$lastPrice <b style=""color:$trendColor"">$priceChange%</b>") } catch { Write-Error "Error processing data: $_" } — Reply to this email directly, view it on GitHub <#68 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AANAIX7RD7BCHXW7P6WORKL2BHV6NAVCNFSM6AAAAABR7PAHA2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIOBTGEYDGOJYGQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[amnweb]

But how do you expect to get b[data-trend="negative"] based on the example you posted above?

[Semt3x]

Well my bad, this was hardcoded for testing purpose and I forgot to undo before copy/pasting,
but in my running code I had
label: "<span>\uf15a</span> {data[lastPrice]} : <b data-trend=\"{data[trend]}\">{data[priceChangePercent]}%</b>"
which didn't work either.

Anyway that's just curiosity, I get that this is easier to create the html to be displayed directly in the script than trying to interpret json :)

[amnweb]

Well my bad, this was hardcoded for testing purpose and I forgot to undo before copy/pasting, but in my running code I had label: "<span>\uf15a</span> {data[lastPrice]} : <b data-trend=\"{data[trend]}\">{data[priceChangePercent]}%</b>" which didn't work either.

Anyway that's just curiosity, I get that this is easier to create the html to be displayed directly in the script than trying to interpret json :)

I think style needs to reload on every update to get that data-trend="{data[trend]}"