Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

How to place an image in one panel?

patra966
Path Finder
‎04-22-2020 10:19 AM

I want to place an image in one panel. Below you can see the thumbs up image that I am trying to use.
alt text

For testing purposes please use this image https://raw.githubusercontent.com/rajapatra/Test/master/bg.jpg

Thanks in advance.

Tags (2)
Preview file
19 KB
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

manjunathmeti
Champion
‎04-22-2020 10:44 AM

Place your image in your app $SPLUNK_HOME/etc/apps/my_app/appserver/static

And your image in a panel like below:

<panel>
      <html>
          <img src="/static/app/my_app/success.png " width="500" height="500" style="margin-left: 100px; margin-left: auto"/>
      </html>
</panel>

Sample xml,

<form>
  <label>Test</label>
  <row depends="$dontShowThisRow$">
    <panel>
      <single>
        <search>
          <query>| makeresults | eval perc="96%"</query>
          <done>
            <set token="perc">$result.perc$</set>
          </done>
        </search>
      </single>
    </panel>
  </row>
  <row>
    <panel id="test">
      <html>
        <style>
          #test h1 {
          font-size: 75.9px;
          margin-bottom: 25px;
          margin-top: 20px;
          }
        </style>
        <h1>$perc$</h1>
        <img src="https://raw.githubusercontent.com/rajapatra/Test/master/bg.jpg" width="100" height="100" style="margin-left: auto"/>
      </html>
    </panel>
  </row>
</form>

View solution in original post

Reply
Solved! Jump to solution
Solution

manjunathmeti
Champion
‎04-22-2020 10:44 AM

Place your image in your app $SPLUNK_HOME/etc/apps/my_app/appserver/static

And your image in a panel like below:

<panel>
      <html>
          <img src="/static/app/my_app/success.png " width="500" height="500" style="margin-left: 100px; margin-left: auto"/>
      </html>
</panel>

Sample xml,

<form>
  <label>Test</label>
  <row depends="$dontShowThisRow$">
    <panel>
      <single>
        <search>
          <query>| makeresults | eval perc="96%"</query>
          <done>
            <set token="perc">$result.perc$</set>
          </done>
        </search>
      </single>
    </panel>
  </row>
  <row>
    <panel id="test">
      <html>
        <style>
          #test h1 {
          font-size: 75.9px;
          margin-bottom: 25px;
          margin-top: 20px;
          }
        </style>
        <h1>$perc$</h1>
        <img src="https://raw.githubusercontent.com/rajapatra/Test/master/bg.jpg" width="100" height="100" style="margin-left: auto"/>
      </html>
    </panel>
  </row>
</form>
Reply
Solved! Jump to solution

efavreau
Motivator
‎04-23-2020 11:19 AM

I would personally do it like in the sample xml above, not in the appserver/static directory on the server. Referencing it from a place where you can control the file and you can access it freely, means you can upload or change it as needed without getting your Splunk Admins involved.

###

If this reply helps you, an upvote would be appreciated.
0 Karma
Reply
Get Updates on the Splunk Community!

CX Day is Coming!

Customer Experience (CX) Day is on October 7th!! We're so excited to bring back another day full of wonderful ...

Strengthen Your Future: A Look Back at Splunk 10 Innovations and .conf25 Highlights!

The Big One: Splunk 10 is Here!  The moment many of you have been waiting for has arrived! We are thrilled to ...

Now Offering the AI Assistant Usage Dashboard in Cloud Monitoring Console

Today, we’re excited to announce the release of a brand new AI assistant usage dashboard in Cloud Monitoring ...