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

ch
chinesestudent
Posts: 4
Joined: Mon Jul 22, 2019 11:10 pm
Platform: Windows

Thu Aug 15, 2019 6:07 pm Post

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:

Image

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


Code: Select all

<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>