View Issue Details

IDProjectCategoryView StatusLast Update
999RackTablesdefaultpublic2022-08-12 00:01
Reporteroernii Assigned To 
PrioritylowSeverityfeatureReproducibilityhave not tried
Status newResolutionopen 
Summary999: add pictures to objects
DescriptionI'd like to be able to add pictures to objects, which could be displayed as scaled background of the table cells.
TagsNo tags attached.
Attached Files
rack.html (13,219 bytes)   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>RACK 1</title>
<link rel="stylesheet" type="text/css" href="http://demo.racktables.org/?module=chrome&uri=css/pi.css">
</head>
<body>
<div class="maintable">
 <div class="mainheader">
  <div style="float: right" class="greeting"><a href="/racktables/index.php?page=myaccount&amp;tab=default">RackTables Administrator</a> [ <a href="/racktables/index.php?logout">logout</a> ]</div>
 MyCompanyName RackTables <a href="http://racktables.org/" title="Visit RackTables site">0.20.5</a><ul class="qlinks"><li><a href="/racktables/index.php?page=depot">Objects</a></li><li><a href="/racktables/index.php?page=ipv4space">IPv4&nbsp;space</a></li><li><a href="/racktables/index.php?page=rackspace">Rackspace</a></li></ul> </div>
 <div class="menubar"><div class="searchbox" style="float:right"><form name="search" method="get"><input name="page" value="search" type="hidden"><input name="last_page" value="rack" type="hidden"><input name="last_tab" value="default" type="hidden"><label>Search:<input name="q" size="20" tabindex="1000" type="text"></label></form></div><a href="/racktables/index.php?page=index&amp;tab=default">Main page</a> : <a href="/racktables/index.php?page=rackspace&amp;tab=default">Rackspace</a> : <a href="/racktables/index.php?row_id=26&amp;page=row&amp;tab=default">serverovna</a> : <a href="/racktables/index.php?rack_id=27&amp;page=rack&amp;tab=default">RACK 1</a></div>
 <div class="tabbar"><div class="greynavbar"><ul id="foldertab" style="margin-bottom: 0px; padding-top: 10px;"><li><a class="current" href="/racktables/index.php?page=rack&amp;tab=default&amp;rack_id=27">View</a></li>
<li><a class="std" href="/racktables/index.php?page=rack&amp;tab=edit&amp;rack_id=27">Properties</a></li>
<li><a class="std" href="/racktables/index.php?page=rack&amp;tab=log&amp;rack_id=27">Log</a></li>
<li><a class="std" href="/racktables/index.php?page=rack&amp;tab=design&amp;rack_id=27">Design</a></li>
<li><a class="std" href="/racktables/index.php?page=rack&amp;tab=problems&amp;rack_id=27">Problems</a></li>
<li><a class="std" href="/racktables/index.php?page=rack&amp;tab=files&amp;rack_id=27">Files</a></li>
</ul></div></div>
 <div class="msgbar"></div>
 <div class="pagebar"><table class="objectview" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="pcleft"><div class="portlet"><h2>summary</h2><table border="0" cellpadding="3" cellspacing="0" width="100%">
<tbody><tr><th class="tdright" width="50%">Rack row:</th><td class="tdleft">serverovna</td></tr><tr><th class="tdright" width="50%">Name:</th><td class="tdleft">RACK 1</td></tr><tr><th class="tdright" width="50%">Height:</th><td class="tdleft">42</td></tr><tr><th class="tdright" width="50%">% used:</th><td class="TDLeft"><img title="9%" src="http://demo.racktables.org/index.php?module=progressbar&done=33" height="10" border="0" width="100"></td></tr><tr><th class="tdright" width="50%">Objects:</th><td class="tdleft">1</td></tr></tbody></table>
</div>
</td><td class="pcright"><div class="portlet"><h2>Rack diagram</h2><center><table border="0"><tbody><tr valign="middle"><td><h2><a href="/racktables/index.php?page=row&amp;row_id=26">serverovna</a> :</h2></td><td><a href="/racktables/index.php?page=rack&amp;rack_id=29"><img src="http://demo.racktables.org/index.php?module=chrome&uri=pix/tango-go-previous.png" title="previous rack" height="32" border="0" width="32"></a></td><td><h2><a href="/racktables/index.php?page=rack&amp;rack_id=27">RACK 1</a></h2></td></tr></tbody></table>
<table class="rack" border="0" cellpadding="1" cellspacing="0">
<tbody><tr><th width="10%">&nbsp;</th><th width="20%">Front</th><th width="50%">Interior</th><th width="20%">Back</th></tr>
<tr><th>42</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>41</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>40</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>39</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>38</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>37</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>36</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>35</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>34</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>33</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>32</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>31</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>30</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>29</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>28</th><td class="atom state_T" colspan="3" rowspan="4" style="background-size: 100% 100%;background-image: url(hp.jpg);  opacity:0.7; filter:alpha(opacity=70); "><div title="no asset tag, visible label is &quot;test server&quot;"><a href="/racktables/index.php?page=object&amp;object_id=30" style="color: white;">testserver</a></div></td></tr>
<tr><th>27</th></tr>
<tr><th>26</th></tr>
<tr><th>25</th></tr>
<tr><th>24</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>23</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>22</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>21</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>20</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>19</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>18</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>17</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>16</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>15</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>14</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>13</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>12</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>11</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>10</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>9</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>8</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>7</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>6</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>5</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>4</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>3</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>2</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
<tr><th>1</th><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td><td class="atom state_F"><div title="Free rackspace">&nbsp;</div></td></tr>
</tbody></table>
</center>
</div>
</td></tr></tbody></table></div>
</div>


</body></html>
rack.html (13,219 bytes)   
hp.jpg (53,246 bytes)   
hp.jpg (53,246 bytes)   

Activities

melpheos

melpheos

2013-09-16 08:03

reporter   ~0001753

You can already do that via add files, picture will show on the first tab
infrastation

infrastation

2013-09-17 15:18

administrator   ~0001759

This issue is about TD background.
adoom42

adoom42

2013-10-05 23:39

administrator   ~0001817

I'm not sure how to do what you are requesting. Please view the appropriate page in RackTables, save the contents as HTML, make your desired modifications to the file, then attach both the HTML and image to this issue.
oernii

oernii

2013-10-07 11:37

reporter   ~0001831

I've attached the files
cyb3rwulf

cyb3rwulf

2013-11-22 13:07

reporter   ~0001961

Racktables don't show you the racks from front / backview. So it's not so easy to add this in an useful way.

What will happen if you have in the front/mid a server and in the back a small switch? you wont be able to see anything.

In my opinion you need to add a different table that shows only front / back of the rack, based on the current one, to add these pictures in a meaningful way.
mbrydon

mbrydon

2013-12-09 13:29

reporter   ~0002017

Noting the previous point I think it would still be a very useful feature to have, as would probably only want to have a picture on something that uses the full font/interior/back space.
It would definitely persuade anyone still trying to use visio to create their layouts that racktables is all you really need.
brkdncr

brkdncr

2014-02-20 02:28

reporter   ~0002187

How about showing the visual on mouse-over of the equipment? There is other software that does show the front/rear of the cabinent with equipment photos, and the equipment photo is linked to the HW type so you only need to upload a single photo for the same hardware ID. It may be useful to have a front view/rear view, and possible the option to replace the existing display with the photo display.
NazZaR

NazZaR

2015-10-09 07:03

reporter   ~0002993

I would like to have this functionality too. It is very convenient to have visualized racks, like it is shown in attached file 'rack.html' above.
I don't think that it is too hard to implement. Just an image, filled in the box.
kylemaas

kylemaas

2022-02-03 23:31

reporter   ~0004377

I would love to see something like this as well.
albertoa

albertoa

2022-08-09 15:26

reporter   ~0004421

I have developed a plugin to be able to display a graphic rendering of the racks.
The attachment contains two directories that you can place inside the "plugins" directory: a directory (graphRacks) for the plugin itself plus a "commodity" directory (rackimg) to produce and store the rack graphics (images are also loaded into the DB, but this directory works as a cache for html).
If you want to try the plugin, after putting the code in place, try the following:
1. create a new tag called "Front image" (Configuration -> Tag tree -> Edit tree, put the name in "tag name" field, "assignable" must be "yes" then click the button at the end of the row)
2. load the images for each object in your racks (Files -> Manage -> set the tag "Front image" -> choose and load the file)
3. associate each object with the desired image (for each object, go to the "Files" tab, and link the image; the images used must have the "Front image" tag set or will be ignored)
4. activate the plugin (Plugins -> Edit -> click on "+" to the right of the "Graph Racks" plugin line)
5. run the "graphRacks(0,0)" function from the plugin; you can associate this with a button somewhere but I prefer to run it daily from crontab so that you do not depend on people remembering to update the graphics after each change: put this content in a file (I saved a "crontabGraphicUpdate.php" in "inc" directory):
<?php
$script_mode = TRUE;
include ('init.php');
graphRacks(0, 1);
?>
and schedule its execution in crontab, for example:
30 5 * * * /usr/bin/php [racktables_path]/inc/crontabGraphics.php >/tmp/crontabGraphics.log 2>&1

After a correct execution, you can find rack graphics via RT interface here:
a. Rackspace -> select a row -> tab "Graphics" for all the racks of the selected row
b. Rackspace -> select a rack -> tab "Graphics" (but also in tab "View") for the single rack

HTH
Alberto
plugins.zip (28,589 bytes)
infrastation

infrastation

2022-08-09 21:11

administrator   ~0004423

Thank you Alberto. I had a brief look at the code, the code style looks good, although a few high-level things could be improved later. If you would like to commit the plugin to racktables-contribs as it is (plus a README perhaps), let me know your github.com username.
albertoa

albertoa

2022-08-10 10:26

reporter   ~0004425

Hi, I don't have a github account, but please, since I appreciate RackTables, feel free to use my code at yur convenience and improve it as needed
infrastation

infrastation

2022-08-12 00:01

administrator   ~0004429

https://github.com/RackTables/racktables-contribs/commit/16f421c0455bbacdfd90e99ac1249289c53bcaf3

Thank you!

Issue History

Date Modified Username Field Change
2013-08-21 17:53 oernii New Issue
2013-09-16 08:03 melpheos Note Added: 0001753
2013-09-17 15:18 infrastation Note Added: 0001759
2013-10-05 23:39 adoom42 Note Added: 0001817
2013-10-05 23:39 adoom42 Status new => feedback
2013-10-07 11:37 oernii Note Added: 0001831
2013-10-07 11:37 oernii Status feedback => new
2013-10-07 11:37 oernii File Added: rack.html
2013-10-07 11:37 oernii File Added: hp.jpg
2013-11-22 13:07 cyb3rwulf Note Added: 0001961
2013-12-09 13:29 mbrydon Note Added: 0002017
2014-02-20 02:28 brkdncr Note Added: 0002187
2015-10-09 07:03 NazZaR Note Added: 0002993
2022-02-03 23:31 kylemaas Note Added: 0004377
2022-08-09 15:26 albertoa Note Added: 0004421
2022-08-09 15:26 albertoa File Added: plugins.zip
2022-08-09 21:11 infrastation Note Added: 0004423
2022-08-10 10:26 albertoa Note Added: 0004425
2022-08-12 00:01 infrastation Note Added: 0004429