JS and CSS for viewing (rough outline of) .scap files in your browser?

chinesestudent · August 15, 2019, 6:07pm

Since Scapple files are just XMLs, it’s possible to display them somewhat visually in your browser, either using XSLT stylesheet or just regualr CSS stylesheet with some Javascript. In my own case, all my notes are minimally styled, and I don’t use connections very often, so it’s possible to quickly get something that looks not that far from what I see in Scapple:

The code is embedded below. It’d be really great if someone with more programming chops would be interested in coming a more complete solution that approximats as much as possible the original look

<html>
<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<style>

Appearance, Formatting, UISettings, ConnectedNoteIDs {display:none}

String { 
   
   display: block !important;   

   position: absolute ; 

   font-family: Hack; 

   white-space: pre-wrap;

   background-color: #EEEEEE;

   line-height: 1.2em;

   border: 2px solid #EEEEEE;
}





</style>
<script>

$( document ).ready(function() {

   document.querySelectorAll("String").forEach(function(x) {
   
   // $(x).width($(x).parent().attr("Width"))

   __1 = x.parentElement.getAttribute("Width")
   __2 = x.parentElement.getAttribute("Position")
   __3 = __2.split(",");

   __x = __3[0]
   __y = __3[1]


   __4 = x.parentElement.getAttribute("FontSize")
   __5 = x.parentElement.children[0].children[0].innerText

   console.log(__5)

   // console.log(__1)

   x.style.width = (__1/1.45)

   x.style.top = __y/1.3

   x.style.left = __x

   x.style.fontSize = __4 + "pt"

   x.style.textAlign = __5
   
      // x.style.width = x.parentElement.attr("Width")
});

  // Handler for .ready() called.
});

</script>
</head>
<body>




<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<ScappleDocument ID="076ACCEA-E60A-40EB-98C2-CBD7FE419BFF" Version="1.1">
   <Notes>
      <Note Width="383.594" FontSize="5" ID="0" Position="6833.3,3495.9">
         <Appearance>
            <Alignment>Left</Alignment>
            <Fill>0.901961 0.901961 0.901961</Fill>
            <Border Weight="0" Style="Square"/>
         </Appearance>
         <String>XXX</String>
      </Note>
      <Note Width="383.594" FontSize="5" ID="1" Position="2129.3,1255.9">
         <Appearance>
            <Alignment>Left</Alignment>
            <Fill>0.901961 0.901961 0.901961</Fill>
            <Border Weight="0" Style="Square"/>
         </Appearance>
         <String>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</String>
      </Note>
      <Note Width="383.594" FontSize="5" ID="2" Position="3176.1,953.3">
         <Appearance>
            <Alignment>Left</Alignment>
            <Fill>0.901961 0.901961 0.901961</Fill>
            <Border Weight="0" Style="Square"/>
         </Appearance>
         <String>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</String>
      </Note>
      <Note Width="383.594" FontSize="5" ID="3" Position="3014.1,1762.2">
         <Appearance>
            <Alignment>Left</Alignment>
            <Fill>0.901961 0.901961 0.901961</Fill>
            <Border Weight="0" Style="Square"/>
         </Appearance>
         <String>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</String>
      </Note>
      <Note Width="383.594" FontSize="5" ID="4" Position="2769.3,2221.3">
         <Appearance>
            <Alignment>Left</Alignment>
            <Fill>0.901961 0.901961 0.901961</Fill>
            <Border Weight="0" Style="Square"/>
         </Appearance>
         <String>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</String>
      </Note>
      <Note Width="383.594" FontSize="5" ID="5" Position="2146.3,1903.3">
         <Appearance>
            <Alignment>Left</Alignment>
            <Fill>0.901961 0.901961 0.901961</Fill>
            <Border Weight="0" Style="Square"/>
         </Appearance>
         <String>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</String>
      </Note>
      <Note Width="383.594" FontSize="5" ID="6" Position="2051.5,909.2">
         <Appearance>
            <Alignment>Left</Alignment>
            <Fill>0.901961 0.901961 0.901961</Fill>
            <Border Weight="0" Style="Square"/>
         </Appearance>
         <String>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</String>
      </Note>
      <Note Width="383.594" FontSize="5" ID="7" Position="3260.6,1366.0">
         <Appearance>
            <Alignment>Left</Alignment>
            <Fill>0.901961 0.901961 0.901961</Fill>
            <Border Weight="0" Style="Square"/>
         </Appearance>
         <String>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</String>
      </Note>
      <Note Width="383.594" FontSize="5" ID="8" Position="2423.7,1485.7">
         <Appearance>
            <Alignment>Left</Alignment>
            <Fill>0.901961 0.901961 0.901961</Fill>
            <Border Weight="0" Style="Square"/>
         </Appearance>
         <String>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</String>
      </Note>
      <Note Width="383.594" FontSize="22" ID="9" Position="2842.7,1332.5">
         <Appearance>
            <Alignment>Left</Alignment>
            <Fill>0.901961 0.901961 0.901961</Fill>
            <Border Weight="0" Style="Square"/>
         </Appearance>
         <Formatting>
            <FormatRange Bold="Yes">0,6</FormatRange>
         </Formatting>
         <String>test 2</String>
      </Note>
   </Notes>
   <BackgroundShapes/>
   <NoteStyles>
      <Style AffectFontStyle="No" AffectAlignment="No" Name="[heading]" ID="FC920432-E705-42AB-AC2D-4F6A94DA07F7" AffectTextColor="No" AffectNoteBody="No" AffectSticky="Yes" AffectSize="Yes" AffectFade="No">
         <BorderStyle>Square</BorderStyle>
         <FillColor>0.901961 0.901961 0.901961</FillColor>
         <Alignment>Center</Alignment>
         <Size>7164.7,-12.4</Size>
         <Sticky>Yes</Sticky>
         <IsBold>Yes</IsBold>
         <FontSize>14.0</FontSize>
      </Style>
      <Style AffectFontStyle="Yes" AffectAlignment="Yes" Name="Title Text" ID="BB275A9E-BF11-4AE0-8769-C86283F7C910" AffectTextColor="No" AffectNoteBody="No" AffectSticky="No" AffectSize="No" AffectFade="No">
         <IsBold>Yes</IsBold>
         <FontSize>12.0</FontSize>
      </Style>
      <Style AffectFontStyle="Yes" AffectAlignment="No" Name="[section]" ID="24FA4224-B45D-463D-ADC8-518D4F981737" AffectTextColor="No" AffectNoteBody="No" AffectSticky="Yes" AffectSize="Yes" AffectFade="No">
         <BorderStyle>Square</BorderStyle>
         <FillColor>0.901961 0.901961 0.901961</FillColor>
         <Alignment>Center</Alignment>
         <Size>20096.0,-12.4</Size>
         <Sticky>Yes</Sticky>
         <IsBold>Yes</IsBold>
         <FontSize>72.0</FontSize>
      </Style>
      <Style AffectFontStyle="No" AffectAlignment="No" Name="Green Bubble" ID="96F1AE06-4EC3-42DE-A2BF-27D70ED87E62" AffectTextColor="No" AffectNoteBody="Yes" AffectSticky="No" AffectSize="No" AffectFade="No">
         <BorderThickness>1</BorderThickness>
         <BorderColor>0.399100 0.583322 0.354864</BorderColor>
         <FillColor>0.808835 0.872419 0.801343</FillColor>
      </Style>
      <Style AffectFontStyle="No" AffectAlignment="No" Name="Yellow Bubble" ID="62948D2C-58CB-4623-B4DC-8E056FE05750" AffectTextColor="No" AffectNoteBody="Yes" AffectSticky="No" AffectSize="No" AffectFade="No">
         <BorderThickness>1</BorderThickness>
         <BorderColor>0.769436 0.762219 0.390143</BorderColor>
         <FillColor>0.912963 0.894118 0.644541</FillColor>
      </Style>
      <Style AffectFontStyle="No" AffectAlignment="No" Name="Brown Bubble" ID="1214F528-CD87-4C30-A7B6-24D8C9D3026C" AffectTextColor="No" AffectNoteBody="Yes" AffectSticky="No" AffectSize="No" AffectFade="No">
         <BorderThickness>1</BorderThickness>
         <BorderColor>0.269490 0.164034 0.186694</BorderColor>
         <FillColor>0.934157 0.888319 0.785290</FillColor>
      </Style>
      <Style AffectFontStyle="No" AffectAlignment="No" Name="Pink Bubble" ID="0D4CDE5B-3AEB-43F1-AF25-C083D3C5F6BD" AffectTextColor="No" AffectNoteBody="Yes" AffectSticky="No" AffectSize="No" AffectFade="No">
         <BorderThickness>1</BorderThickness>
         <BorderColor>0.690303 0.407263 0.550912</BorderColor>
         <FillColor>0.898329 0.817472 0.865339</FillColor>
      </Style>
      <Style AffectFontStyle="No" AffectAlignment="No" Name="Blue Bubble" ID="2EACE237-CACF-4704-979A-F091B17EF476" AffectTextColor="No" AffectNoteBody="Yes" AffectSticky="No" AffectSize="No" AffectFade="No">
         <BorderThickness>1</BorderThickness>
         <BorderColor>0.485893 0.568933 0.756207</BorderColor>
         <FillColor>0.844068 0.869596 0.923064</FillColor>
      </Style>
      <Style AffectFontStyle="No" AffectAlignment="No" Name="Red Text" ID="BB910D3C-32F3-4A23-84F5-916FBF84A4B2" AffectTextColor="Yes" AffectNoteBody="No" AffectSticky="No" AffectSize="No" AffectFade="No">
         <TextColor>1.0 0.0 0.0</TextColor>
      </Style>
   </NoteStyles>
   <UISettings>
      <BackgroundColor>1.0 1.0 1.0</BackgroundColor>
      <DefaultFont>Hack</DefaultFont>
      <DefaultTextColor>0.0 0.0 0.0</DefaultTextColor>
      <LeftToRight>Yes</LeftToRight>
   </UISettings>
   <PrintSettings VerticalPagination="Auto" HorizontalPagination="Clip" Orientation="Portrait" RightMargin="12.000000" BottomMargin="12.000000" HorizontallyCentered="Yes" ScaleFactor="1.000000" PagesAcross="1" PaperType="na-letter" PagesDown="1" TopMargin="12.000000" Collates="Yes" PaperSize="-1.000000,-1.000000" LeftMargin="12.000000" VerticallyCentered="Yes"/>
</ScappleDocument>





</body>

</html>

Lewis-H · April 1, 2020, 3:37pm

How to Create a SCAP Scan:

Go to ‘My Scans’ and create a new scan.
Use the ‘SCAP and OVAL Auditing’ template.
Create a name for the scan. Example: ‘SCAP and OVAL Scan’.
Add target IP addresses or domain names(if you use domain names they have to be resolvable).

User-added image

Go to the Credentials tab and add administrative credentials.
SCAP scans require you to use administrative or root credentials for the target.
Go to the ‘SCAP’ tab.
Add a ‘Linux (SCAP)’ audit for a Linux target or a ‘Windows (SCAP)’ audit for a Windows target.
Import a zipped ‘SCAP file’ to each audit.

ahsim · December 26, 2020, 2:14pm

Thanks so much for this. I have used Scapple for some time, but have since moved on to other solutions. With this piece of code I can make the .scap files legible. Saves me a lot of work!

ina1 · July 11, 2022, 4:23pm

Hi, can you repost the code? Apparently after the Forum was updated, special characters disappeared.
Thanks

MimeticMouton · July 11, 2022, 5:10pm

I’ve adjusted the original post to use the new forum’s preformatted text tags.

ina1 · July 11, 2022, 5:24pm

thank you very much!
I’m also excited for Scapple 1.4! Thanks for your work