*NEW* CRT-C® – Crosspoint RESPONSIVE Touchscreen-Control

[Dochartaigh]

Presenting CRT-C® – Crosspoint RESPONSIVE Touchscreen-Control

A new way to control your Extron Crosspoint matrix switcher and ALL your console's and CRT's with any web-capable device; be it a phone, tablet, or computer. Based on the original design, this new version responsively adapts to ANY screen size, on ANY device, in ANY orientation, on ANY browser.* No more having to pinch-and-zoom or scroll the controller webpage like the old design - this will ALWAYS have ALL the buttons be 100% visible on your screen.


Here's CRT-C in-action in my den – controlling 17x systems with my Crosspoint 32x32 switcher. Most people would usually control 1 single console at once with CRT-C, but you can have fun and have all sorts of different setups saved (as "Presets") for your CRT-C buttons!





Also presenting THREE NEW SIZES of layouts to match ANY size Crosspoint (or Extron SMX switcher). Crosspoints come in three main sizes with either 12, 16, or 32 Presets. Now you can choose the layout which best fits your setup, OR how many Presets you actually use (for instance I use a 32, but only use ~20 Presets so that's the layout I personally use):






By popular demand (for those who think the beautiful, airy, pretty blue-highlighted original version is too happy for you), I present a dark, scary, Emo™ theme for your consideration:






What does CRT-C® Actually do?

CRT-C recalls Presets you've already saved on your Crosspoint (see the next post for more info about "Presets").

CRT-C can NOT be used exactly like your Crosspoint. You can NOT, at will, be like "I want NES on CRT #1, SNES on CRT #2, Genesis on CRT #3".... oh wait, I changed my mind, "I want Saturn on CRT #3 instead". You'll see there's no CRT/Monitor/TV icons on the CRT-C controller to choose from - this ONLY loads Presets (which most people have setup a single Preset for a single console to output on a single pre-defined CRT/Monitor, but you can also have fun and do Presets for like 4x different consoles on 4x different CRT's like my picture above shows... that's the beauty of a Crosspoint being able to input/output multiple things at once, AND save that as a Preset!).

BUT, for the NES/SNES/Genesis example above, if you wanted to save a Preset where "NES>CRT#1, SNES>CRT#2, Genesis>CRT#3" you CAN save that Preset. If you want ANOTHER Preset where "NES>CRT#1, SNES>CRT#2, Saturn>CRT#3" you can save that as another Preset, and recall those different Presets whenever you want. The options really are limitless as however you want your Crosspoint setup, you can save that exact configuration as a Preset, then effortlessly recall it with CRT-C!




CRT-C® FILES

Here's a .ZIP file of the .HTML and .PNG graphics for this new CRT-C design. It includes all 4 sizes and 2 color schemes of the new layout + a Windows program you'll need for this:







BONUS ITEMS

If you are in need of other less-worthy Home Console, Computer, and Arcade LOGOS to populate your own CRT-C® design with, here's over 300 transparent .PNGs.




Want cool logos on your Crosspoint itself??? (FYI, if you hold Input 1+2 it'll make the back-light always be on for all the buttons) -- to replace those ugly numbers they come with? Just print out on REGULAR (non-glossy) printer paper at 100% and cut out on the included crop/cut lines and you can bring your Crosspoint to the next level in no time!










A BIG THANK YOU TO KEZ - who helped finalize (though many revisions) the magical code which makes this new version shrink/enlarge to any size screen.








*within reason of course, we're not magicians, but it's near perfect on my current phone and laptop, my old iPhone, and 2x 'retired' ancient tablets - one of which had gotten a new life controlling my Crosspoint





|
|
|

Tutorials / Posts: CRT-C® Crosspoint Responsive Touchscreen Control | Corio2 240p Downscaler Tutorial | Extron DSC 301 HD 480p Scaling | Crosspoint 32x32 w/ Consoles/Scalers

YouTube: 15x Consoles + 10x CRTs in 40-sec | 2018 Gameroom | 2022 Update | Server Rack Cable Mgmt | CRT-C w/ CENTERING (teaser)

Imgur Albums: Fightsticks, Old PC's, CRT Chassis Albums, Experiments, Projects, Builds, etc.)

Resources: Lineart Crosspoint/Console/CRT WIRING Diagram | Extron Crosspoint CONSOLE Button Labels | TONS of Logos in PNG and SVG

[Dochartaigh]

DIRECTIONS TO LOAD ONTO CROSSPOINT:


PREREQUISITES:

• • A compatible Extron Crosspoint matrix switcher. Check the manual to see if it's compatible - it'll usually have a section on "HTML Operation". Also, most Crosspoints with the white back-lit buttons are compatible (versus the older type with the smaller black buttons which are NOT back-lit). Extron SMX switchers are also compatible I've been told (but the commands being sent to them might be be different per the manual).
  
  

• • PRESETS Setup on your Crosspoint. ALL this controller does is load Presets, so if those are not setup already it will NOT work!!! (see below)

• • A computer running Windows (I use Boot Camp on my Mac running Windows 10)

• • A ~$9 Serial to USB cable from Amazon. "Serial" can also be called "DB9" or "RS232". There's also free alternative ways to get an IP address to connect to, but at times I've had that be fiddly, and a cable is near fool-proof, and they're handy to have around for multiple types of devices.

• • A way to connect the Crosspoint to your home network via an Ethernet cable. Run a cable, use an Ethernet-over-Powerline adapter, Wifi Extenders with an Ethernet plug, share your PC's internet connection, or I just tried this and it worked (found older GWU627 model for $12 on ebay).

• • The .ZIP file with all the required files.

EXAMPLE OF SAVING AND RECALLING PRESETS

Presets are a snapshot of the Crosspoint at that point in time. Did you press your normal buttons on the Crosspoint to get your Wii to display (for example)? Then SAVE a snapshot of that setup as a Preset. Repeat for each console.


To test that they work RECALL the preset:


That's how easy it is! I also cut out the 3x pages from the manual on Presets if you want more info. Again, ALL the CRT-C does (besides look beautiful) is load Presets, so if those are not setup it will NOT work!!!





BASIC SETUP – only 5 Steps!

A completely stock Crosspoint can ONLY be used by pressing the physical buttons on the front. We want to control it via a phone or tablet so we need to turn that functionality on. This part of the tutorial shows how we do that, then we test it by using the built-in web control page that's already on the Crosspoint.


1.) Install "Extron's MATRIX SWITCHERS Control Program" (located in the .ZIP file) on your Windows computer. My Mac running Windows Boot Camp was perfect, but my Windows 10 VM needed ".NET Framework 3.5" installed to run the program.


2.) Hook up the cables to the Crosspoint. Ethernet cable goes to your router; Serial-to-USB cable goes to your Windows computer. Windows might need to (auto?)install a driver for the cable.


3.) Open the Extron program and it'll automatically open to a "Comm Port Selection" window. Try Comm 1 through 4 until you successfully connect to your Crosspoint (others have had issues with super high port #'s, so change it if you have trouble).




4.) Go to "Tools" > "IP Options", and mark the checkbox for "Use DHCP (Obtain an IP address automatically)". Hit "Take" to confirm the changes (marked in pink). Load that same menu again and write down the "Matrix IP Address" (marked in green).




5.) Type that "Matrix IP Address" into your web browser and hit enter. The computer HAS to be connected to your same home network as the Crosspoint (the computer/laptop will probably be on wifi, which is usually wifi from your ISP's combo wifi/ethernet router – meaning they'll be on the SAME network). It'll load this Extron Electronics webpage. Go to the "Control" Tab on top, then "Global Presets" on the left menu.



Here you'll see all the Presets* saved on your Crosspoint, and can click/touch any of them to load that preset! You now have a web-based way to change Presets on your Crosspoint without touching a physical button on it! This is only Extron's ugly built-in webpage though – read below about how to make it look WAY better (complete with console logos) and customize it to your own setup!



*Again, ALL this entire project does is load Presets on the Crosspoint – if you don't have Presets saved, there's nothing to load, and it will NOT work.




ADVANCED SETUP: (i.e. making it look pretty)

After following the above you now have full access to the Crosspoint via its built-in web portal. We're now going to upload the nicer-looking CRT-Control panel files to the Crosspoint.

The below is going to show you how to upload MY files – i.e. the files which match MY exact video game setup with MY exact consoles. That's most likely NOT going to match YOUR setup. But STILL try the below, practice, get down how this uploading part works. Even though my files won't match your setup this is STILL a great way to confirm you did it correctly and it's changing from one Preset to another on your Crosspoint. ...then go onto the next section where I show you how to customize it to YOUR exact setup, then follow these directions again and upload YOUR customized files!



1.) On your Windows computer (has to be Windows, I couldn't upload from my Mac) go to the "Matrix IP Address" you wrote down, click on the "File Management" tab. Click "Choose File", select the control__.html file (whichever one you want, 12-32 Presets in size), then hit "Upload File" to upload it to the Crosspoint. Make a "images-png" directory for your PNG images, click it to enter it then upload all the PNG's as well (this HAS to be done one-by-one on the webpage - you can try the Extron Windows software FTP feature to upload more than one file at once but it tends to be a bit temperamental).





2.) To access the new CRT-C webpage you uploaded to your Crosspoint go to MATRIX.IP.ADDRESS/your_html_file_name.html (my IP address I wrote down is 192.168.1.218, and I picked the 20-Preset size "control20.html" file, so on the browser of my phone or tablet I type in "192.168.1.218/control20.html"), then it'll load up the new nice-looking interface, complete with all the console logos. Test these out to make sure your Crosspoint is switching Presets (even if the logos don't match your consoles). I recommend bookmarking this page for easy future access.








HOW TO CUSTOMIZE YOUR OWN CRT-C for your exact consoles:

This really isn't meant to be a "how to built your own HTML webpage" tutorial, but even for a novice who has never touched HTML code in their entire life, it's really pretty simple, and I'll try to outline it below the best I can.



PREPARATION:

• Pick which size CRT-C you want to use. The "control__.html" files are named by their size; control12.html has 12 Preset buttons, control16.html has 16, etc. Generally speaking you wouldn't use more presets than your Crosspoint has inputs - so people with a 12x8 would use "control12.html", a Crosspoint 16x16 would use "control16.html". It is OK to use less presets too - I have a Crosspoint 32x32 but I only use 20 presets, so I use the "control20.html" file for mine.




• Make a list of A.) Every console hooked up to your Crosspoint, B.) what their Preset number is, C.) what order you want them displayed on your CRT-C webpage (which is ordered Left-to-Right, Top-to-Bottom).

OPTIONAL TIP: to keep myself sane I keep mine in the same order each console was released. NES is my earliest console so it's plugged into the Input #1 on the Crosspoint, is saved as Preset #1, and is the 1st one shown in the CRT-C webpage (top left). TurboGrafx-16 (TG16) is my second oldest console so that's Input2/Preset2/2nd on the CRT-C webpage. Genesis is my 3rd console... you get the point.


• Pick out the graphic/logos for each of your consoles from the .ZIP of logos above, OR make your own PNG art files!


• Download a (free) text-editing program like Notepad++ which can PROPERLY edit .HTML code. You WILL have issues if you use a program like Word fyi.




MAKE THE CODE YOUR OWN:


1.) Open your control__.html file in Notepad++. Scroll down a bit and look for the code which looks like the below. You'll notice they're the longest lines there, and start with "<a href". Like my example I've been citing, you'll see how my first three lines of code (one line per console) show my first three console: NES, TG16, and Genesis:



To change each line of code to be for YOUR EXACT console, you have to change TWO parts of EACH line. One contains the Preset #; the other is the name of the PNG Logo file.



The Preset # is that first underlined part with "cmd=1". The "1" means Preset #1. Change that to your Preset #.

The PNG Logo is that second underlined part which ends with "____.png". Change that .png name to the logo you want it to be.


To reinforce this, let's make an example. Let's say you're a 5th Gen kinda guy, and you want your first three consoles to be Saturn, Playstation, and Nintendo 64. On your Crosspoint they're saved as Preset #5, 6, and 7. Your code would be edited to look like this:



You can see that the cmd's are now 5, 6, 7, and I replaced the name of the three PNG graphics with the new names for Saturn (saturn.png), Playstation (psx.png), and Nintendo 64 (n64.png). That's literally it. Do that all the way through, save the HTML file, upload the new files to the Crosspoint and you're done!


PRO HTML TIPS: don't put any spaces in your .png filenames. Also use all lower case. The HTML code also needs to match the filenames EXACTLY. "Saturn.png" is NOT the same as "saturn.png" (and the latter is correct). Also don't touch ANY other character of code anywhere else. If you're editing a Preset numbers for example and change "cmd=1." to "cmd=1" (notice the missing . period) that Preset will NOT load anymore! ....so just be careful.

[Dochartaigh]

NEW Black-on-Black theme for the new Black-Buttoned CRT-C!




*thank you to my buddy Joebot (Joebot#0001 on Discord) for helping me with this BB Crosspoint tutorial! My IP Link has seen better days so I couldn't test this myself!



YES, an older Black-Buttoned Crosspoint CAN use CRT-C®!!!!

BUT, since the Black Button (BB) Crosspoint does NOT have a built-in web server like the newer White Button (WB) Crosspoints have, and does NOT have built-in ethernet for network access, there is NO place to store the webpage files for the CRT-C, and NO way to access the BB Crosspoint over your home network.

So what do we do? We’re going to use an easily found ~$10-20 USD Extron IP Link box:



These IP Link controller boxes have a built-in webpage server, an ethernet connection to connect to your network, and a serial port to connect to your BB Crosspoint. It basically takes over every functionality the WB Crosspoint has, which the BB crosspoint is missing. You simply plug the IP Link box into the back of your BB Crosspoint via RS232/Serial cable, plug in the Ethernet cord to connect to your home network, and you’re up and running!!!



Since this IP Link box and a WB Crosspoint are doing the same thing, the steps are pretty close between them, but there ARE some differences we will outline below. I still HIGHLY SUGGEST you read through the WB tutorial above first (as that goes into more detail), just to familiarize yourself with how things work.





Black Button (BB) Crosspoint CRT-C DIRECTIONS

We need to gain access to the Extron IP Link box, just like we needed to gain access to the newer WB Crosspoint. The difference here is instead of using a RS232 to USB cable + a special Extron Windows program on the WB Crosspoint, all we have to do on the IP Link box is plug it into your network with an ethernet cable and type a line of code.

Before entering that code we need TWO values:

The first is an UNUSED IP Address on your home router. You can try to pick a random one and hope it's unused (mine seems to use a ton between 192.168.1.150 to 192.168.1.250, so it's a safe bet if I pick a number a bit below that)... but ideally you would log into your home router (google how please, not going into that...) to ensure you pick one that's not in use.

The second value is the MAC Address off the back of your Extron IP Link box. Here's examples of where that is on two different Extron IP Link models:



Once you have both of those, on your Windows computer open the "Command Prompt" program by RIGHT CLICKING > Open as Administrator:



Type (without quotes) "arp -s YOUR.IP.ADDRESS YOUR-MAC-ADDRESS", and hit Enter. Joebot's looked like this:




Now go to your browser and type in that same IP address and you should see Extron's built-in web control page like the below. You now have full access to your IP Link box!!!




***If you have any issues connecting with the above directions, and I've had to do this myself (and like the RS232 to USB cable for the WB version, this is near foolproof), follow the "Embedded Web Pages" section here. Read the manual for your exact IP Link box to see how to reset it to the default IP address first (usually on a sticker on the back of the box actually).






HOW TO UPLOAD YOUR CRT-C and MAKE IT YOUR OWN



Black Button Edition - HTML Files for download

Now that the IP Link has network access turned on, the rest of this process is 95% identical to the above WB Crosspoint tutorial. Just like above you're going to upload your HTML and PNG images through the "File Management" tab of the IP Link's built-in web control page:




THEN, to make this CRT-C layout your own, just like the WB Crosspoint we have to change TWO areas of the code PER console. BOTH the Preset # code, AND the name of the .PNG logo graphic (refer above for the .png part).

For the Preset #, that IS different between the WB and BB Crosspoints. The WB Crosspoint had you changing the "cmd=1." code to load Preset #1, "cmd=2." to load Preset #2, etc. On these IP Link boxes it's just a little bit different, you're changing "cmd=W01RS|1." to load Preset #1, "cmd=W01RS|2." to load Preset #2, etc. Like such:







WHICH MAGICAL EXTRON IP LINK BOX SHOULD I GET??

I'm new to these too, but seems like Extron S1, S2, S4, S6, and SFI244 models are the cheapest and most plentiful (there's 6x on eBay right now, 2-20-2022, for under $20 SHIPPED). 505 model is the fancy one (more $). There ARE some stipulations though:

• Make sure they come with a power supply OR you'll have to buy/make one.

• The ones with an actual RS232/Serial/DB9 port are WAY easier to use
-- Remember you'll need to pickup a RS232 cable too! The "straight through" part is important - some of these switch wires from one end to the other which you do NOT want.

• The ones which do NOT have a RS232 port, but use a smaller version of the Phoenix connector (which we all know since the Crosspoints use larger ones for audio) are great too, but you WILL have to make your own RS232 to Phoenix cable for them.
-- If you buy this type make sure it comes with the Phoenix connector(s) or you need to buy those too


Also, I had a IoT programmer contact me and he's working on a Raspberry Pi web server/RS232 project in the works, using the CRT-C HTML code, to control these with a Pi. I think that's great because although there IS a shortage of PI's right now (like anything with chips in them), it's a great alternative to Extron devices which are only affordable on the secondary/eBay market. I'll update this post once he finishes his project and posts about it.


FUTURE PROJECTS:

• Control CRT image centering through CRT-C with an Extron RGB 203 Rxi or similar!

• Control geometry (including H/V SIZE!!!) on a BVM (particularly on a per-console basis!) since it uses the same RS232 cable...

• Integrate this with TVOne Corio2's (the awesome downscalers I made another tutorial for – also on this forum)

• Auto switching of Crosspoints??? (Crosspoints report back which input(s) have a signal, so shouldn't be too hard to write code which says "if input #1 reports back a signal, switch to input #1" ...def need help of collaborators for this though

[HDgaming42]

Sorry that I can't contribute, but I hope you get some help on this! What an awesome additon to the community. I've since sold off my crosspoint and now use an SMX unit. I don't suppose something like is is possible on that line?

[Joebot]

Sorry that I can't contribute, but I hope you get some help on this! What an awesome additon to the community. I've since sold off my crosspoint and now use an SMX unit. I don't suppose something like is is possible on that line?

I can get you my code shortly when I get back home. It’s actually pretty easy and the code Dochartaigh used isn’t needed.

[Joebot]

https://www.dropbox.com/s/t7rkuw1qhzre6 ... l.zip?dl=0

I will update this post shortly explaining how it all works.

[Dochartaigh]

Sorry that I can't contribute, but I hope you get some help on this! What an awesome additon to the community. I've since sold off my crosspoint and now use an SMX unit. I don't suppose something like is is possible on that line?

I wrote Joe to chime in here because he has a SMX he was using this on (and I sold my 2x SMX's... which weren't working with all modes of my OSSC via HDMI... so I couldn't test those myself).

I took a look and the code is the exact same for both the Crosspoint's and the SMX - so you can use the unfinished code here, or at the original tutorial as well.




_____________________________
_____________________________
_____________________________


***All the below was from my call to help with the HTML/CSS/Coding for this new design, but I'll leave this post up so you can see how this project evolved.***





***HELP WAS FOUND!!!*** CALLING ANY WEB DESIGNERS WITH EXPERIENCE IN RESPONSIVE WEB DESIGN TO PLEASE HELP WITH THIS PROJECT ***HELP WAS FOUND!!!***


Some of you might remember my Extron Crosspoint TOUCHSCREEN Control, where I was able to control my Crosspoint matrix switch from any touchscreen tablet or phone (or anything with a web browser).





That version looks great if it's loaded on my iPad 2, in Landscape orientation, using Safari browser (since that's the exact size I built the HTML for):





BUT, when I put it on some other devices (or even the SAME device in a different orientation, or a different browser on the SAME device), it can cause some issues (shown in red), where it doesn't fit-to-screen exactly, or adds extra space, or cuts off areas (which you then need to pinch-to-shrink the page, or scroll to see):





The plan has always been to re-format this in a way where it's using RESPONSIVE Web Design – so it automatically re-sizes and re-flows to fit ANY screen size, on ANY device, in ANY orientation, on ANY browser (AND still look good!!!).

I call this new version the Crosspoint RESPONSIVE Touchscreen-Control, or CRT-C® (yes, I'm a dork... who happens to control a lot of CRT monitors with this lol). Below shows where this new responsive version stands so far. It's a LOT better, but still needs some work:







I've gone as far as I can with the layout. I'm a designer first and foremost, and was never into the coding side of things much... ***HELP WAS FOUND!!!*** So I need some HELP! Calling any Web Designers with experience in responsive design to please help tweak this![/size]












***All the below was from my call to help with the HTML/CSS/Coding for this new design, but I'll leave this post up so you can see how this project evolved.***
(2nd post, I merged these together...




CODE DETAILS: the above was built in Flexbox (a CSS layout module), with the help of a friend on FB. I have NO clue if the code for Flexbox can simply be tweaked to fix these issues, or if it has to be done another way or what... but I'm open to any help I (and the community of people who use this with their Extron Crosspoints) can get!

It seems like this should be simple: make a grid with 20 cells. No matter the size of the device (or browser, or orientation) ALL 20 cells should ALWAYS be shown (i.e. nothing EVER gets cutoff... which you can see my code fails at where it's cutting off the bottom, sometimes the bottom and right side).

For the responsive part: if it's in landscape it should be 20 cells in a 5x4 grid (5 columns wide, 4 rows tall), if in Portrait it'll be 4x5 (4 columns, 5 rows). The code now even has an 'uber wide' setting you can see on the Macbook Air, where it does SIX columns across, then does this thing where the last row has 2x boxes spanning 3x columns/each to fill in that space - which I kinda like.

For the graphics themselves, this time around I upgraded all the logos from jpg/png to .SVG files, a lossless vector format so they can scale to ANY size and NEVER be pixelated. One sidenote is these files usually reside on a web server built into the Crosspoint itself. That web server will NOT serve .SVG's for whatever reason... so I had to link the .SVG files externally to my website. If we plan on using any other file types like .css or .js files we will have to test those to make sure they work on the Crosspoint.



FILES: The current test version is REMOVED --SEE FINAL VERSION ABOVE-- .ZIP file on Google Drive.[/url]



AESTHETICS: for the look of the layout it's pretty simple – I tried to keep it nicely spaced and airy. All it needs is some (blue) lines to separate each column and row, and some padding inside each cell so the logos don't come too close to the edges...

This can actually be harder than it sounds – sometimes even when two logos have exactly the same padding they can STILL look off in scale to each other, so to combat this I sometimes added an invisible box around certain logos to be able to freely scale them inside that box (then the code ONLY takes into account the overall size of the graphic –invisible box and all– and this seems to work to balance out everything better).



EXAMPLES: of how the grid should change based on orientation, and spacing/aesthetics:


Good example of a landscape 5x4 grid. Has ample white space, and the design is not crowded, but the logos are still nice and large



Nice portrait 4x5 grid. Going down to 4 columns in portrait lets the cells be a little more square and the logos larger



Example of BAD logo sizing (when you let the engine fit-to-space with just a small inside cell padding value). These logos here also lack any with that invisible box I was talking about (these SVG's are exactly to the size of the logo art itself) - even if we enlarge the cell padding they would STILL look off


BAD example from my HD Fire 6 tablet - as the code currently sits. REALLY needs to lose that 1 column so the cells can be more square (and not tall rectangles – where there's too much white space above and below each logo).







Future (maybe WAY future...) wish list is to be able to do things like:

• Have a setup flag, or a place to enter this value in the code (or just instructions like "delete after line 100 if your device only has 12 presets", 'after line 150 for 16 presets', etc), so the user can decide if the layout will have 12, 16, 24, or 32 boxes - to match whichever size Crosspoint they have (how ever many Presets your Crosspoint can save is the max number of boxes in the layout).

• Have two versions of the logos – horizontal and vertical, which automatically switch depending on the allotted space on the screen (for instance I'm using a Fire HD 6 tablet in portrait now and I don't like how much white space is above and below the logos... if the logos were taller to fit in this space it would look a LOT better).

• Maybe integrate Extron SIS commands for a button? Want to dim your lights, turn on Monitor #1, and Console #3 all with a single button press? This is out of my league, but people are doing crazy things with SIS commands, things like Extron RS232 controllers, IR blasters, etc. which can be controller over web interfaces... would be AWESOME to see what else we can do with this Touchscreen-Control...


(honestly though, I'm just looking to get the graphical interface resizing properly, while keeping it looking good)

[Kez]

You might be able to use media queries to help with this.

I have made a few tweaks and uploaded it, let me know if it's any better:
https://drive.google.com/file/d/14YA5NE ... sp=sharing

I'm not sure if there is anything weird about the way the Extron hosts HTML but, <flex-container>/<flex-item> aren't real elements, I changed those out for divs with classes and updated the CSS accordingly, along with a few other little changes to it.

The main thing I did though is add an @media query, what this essentially does is change your CSS based on the width of the page (in pixels) and you can add as many of these as you like.
So in the media query I changed the flex basis to 20% from 15%, so the boxes are wider and fewer can fit in a row, and I changed the height to 20% (i.e. 1/5) instead of 25% (1/4).

[Dochartaigh]

You might be able to use media queries to help with this.

I have made a few tweaks and uploaded it, let me know if it's any better:
https://drive.google.com/file/d/14YA5NE ... sp=sharing

I'm not sure if there is anything weird about the way the Extron hosts HTML but, <flex-container>/<flex-item> aren't real elements, I changed those out for divs with classes and updated the CSS accordingly, along with a few other little changes to it.

The main thing I did though is add an @media query, what this essentially does is change your CSS based on the width of the page (in pixels) and you can add as many of these as you like.
So in the media query I changed the flex basis to 20% from 15%, so the boxes are wider and fewer can fit in a row, and I changed the height to 20% (i.e. 1/5) instead of 25% (1/4).

Thank you SO much for working on this! Unfortunately it's still cutting off areas on the devices I tried. Here's a quick album with screenshots I put together.

I tried an iPhone, Amazon Fire, ancient iPad 2 (which seems to not like .SVG's), in either Chrome or Firefox to give some variety on the browser - each in both Landscape and Portrait.


So I have to admit most of what you said I don't fully understand... but this is what always confuses me, and is also how I think you coded yours: if the flex-CONTAINER (which EVERYTHING sits inside) is set to 100% of the screen (both width AND height), why does every design ALWAYS have some of it cut-off? Just doesn't make sense to me!

Then if you look at the width for the individual smaller boxes (the "flex-item"), it seems to always be a max of 6 boxes at 15%/each = 90% (I assume leaving that last 10% for the blue lines), yet it still goes over in width too! (i.e. part of the grid is cutoff outside the viewable screen area) -- it does this on the iPhone in Landscape for example. Height basically has the same problem too. I'll then fiddle (like I did with yours) with the percentages and can still never get it right (because the overall flex-container seems to NOT be constrained to 100% of screen width and height).

Anyway, I won't go on, but I simply lack the knowledge to answer these type of questions or know what to do to get it working. Again, thank you SO much for you help and I would be more than grateful to try anything else you post here.




Also wanted to note that Joebot showed me a WAY simpler way to code the Crosspoint Presets into the code. I updated the .ZIP file in the initial post (it removes all the extron code form the tup and ONLY needs a "?cmd=1." added to each link (which you all can even leave out, I can code in all that after we get a working scaling web page finalized).

[Kez]

Then if you look at the width for the individual smaller boxes (the "flex-item"), it seems to always be a max of 6 boxes at 15%/each = 90% (I assume leaving that last 10% for the blue lines), yet it still goes over in width too! (i.e. part of the grid is cutoff outside the viewable screen area) -- it does this on the iPhone in Landscape for example. Height basically has the same problem too. I'll then fiddle (like I did with yours) with the percentages and can still never get it right (because the overall flex-container seems to NOT be constrained to 100% of screen width and height).

So, aiming for perfection across so many devices is pretty headache inducing! The main issue is that these all use different browsers, and sometimes different versions of those browsers. Especially older devices, they simply may not support the browser feature you want to use or interpret it differently.

With the width and height thing, I think some mobile browsers interpret 100% differently, perhaps ignoring the address bar because it is not always present when browsing. I don't think any of the grid is cut off, though. The boxes have 10px around each of them, so between boxes that's 20px (10 from each) thus the grid is thicker in the middle. If you want the grid to be the same thickness, you could instead do 20px on the top and left, and then add 20px to the bottom right of the page.

Unfortunately I don't have any tablets here to test with, but I have tried adding some JavaScript that updates the height of the page to the window's innerHeight.. which should factor in the address bar.

https://drive.google.com/file/d/1fAD1g1 ... sp=sharing

[Dochartaigh]

So, aiming for perfection across so many devices is pretty headache inducing! The main issue is that these all use different browsers, and sometimes different versions of those browsers. Especially older devices, they simply may not support the browser feature you want to use or interpret it differently.

With the width and height thing, I think some mobile browsers interpret 100% differently, perhaps ignoring the address bar because it is not always present when browsing. I don't think any of the grid is cut off, though. The boxes have 10px around each of them, so between boxes that's 20px (10 from each) thus the grid is thicker in the middle. If you want the grid to be the same thickness, you could instead do 20px on the top and left, and then add 20px to the bottom right of the page.

Thank you once again - this is looking REALLY good!

And I totally get what a pain this is (3 years of tinkering every so often with the existing design and I could never get it right!). And even more difficult when you add in old devices... but I actually specifically want it to work on old hand-me-down, 'shoved in a drawer and forgotten' type of devices because these are the EXACT type we could give a 2nd life to CRT-Control® peoples Crosspoints! Heck, even my current iPhone XR model is 4 years old (bought new from Apple in 2020 though, so still new to me!).



This really is looking bangin'! I did the normal Landscape/Portrait tests, on Chrome/Safari/Firefox, on my iPhone XR/iPhone 6 Plus/Fire HD 6 (left out the iPad 2 this time - that thing is just ancient), and what I found was:

iPhone XR: PERFECT in Portrait in Chrome/Safari/Firefox. Safari/Firefox in Landscape is PERFECT. Chrome Landscape still hates everything, including my original design lol - it's cut off on all sides.

iPhone 6 Plus: PERFECT in Portrait and Landscape in Chrome and Firefox. Safari is PERFECT in Portrait, but landscape is a problem. When you first turn to landscape the address bar disappears and it looks awesome, but as soon as you click a button the bar comes back, never goes away, and cuts off the bottom.

Amazon Fire HD 6: PERFECT in both Portrait/Landscape on Chrome and Firefox!


This is SO close to being perfect and working/re-sizing on EVERYBODIES phone/tablet, I'm getting psyched!!!




My only additional want, and this is NOT a dealbreaker fyi (just trying to get this to its max usability), and I know this will sound picky but please hear me out: Portrait is beautiful in 4x5 (4 columns, 5 rows). Logos are nice and big and super easily readable even on a phone:




My problem is the Landscape defaulting to 4x5 which makes the logos REALLY small, especially on a phone. Like if somebody wasn't familiar with the logos they literally wouldn't be able to read quite a few of them.




I've literally spent over 5 hours today trying every imaginable number combination on the code (literally just educated-guessing as I don't understand this stuff), and I CAN get them to be WAY larger in 5x4:



BUT as soon as I do that the Portrait is then super-small in 5x4 and near unreadable lol... so I just can't win. I even added additional "@media max-width" tags of all sorts.... just couldn't get it to work both ways (well, I did once, but only on one single browser on one single device... none of the others worked the same ;(



Any ideas on those last couple of things? The Landscape 5x4 to 4x5 for bigger logos is a wish list item (but a good one which will greatly effect usability), but the couple times when it's cutting off areas I would love to get fixed, especially on the newer iPhone in Landscape using the most popular Chrome browser (I googled this a bit... couldn't find out why it doesn't work like ALL the others do... even the way older iPhone 6 works in the same browser...). Thanks again!

[Kez]

Okay I have tried out some tweaks here:
https://drive.google.com/file/d/1QcAHyH ... sp=sharing

I read somewhere that some versions of Safari don't respond with the right height if you poll them immediately after the address bar appears, so I set a 500ms delay before acting on resize which may help with the issue you're having on the landscape iPhone 6.

I also put in a meta tag and disabled zooming. The zooming is disabled with user-scalable=no so if you want to restore zooming you can just remove that from the meta tag. This may stop your iPhone XR behaving weirdly in landscape mode.

I got a bunch of CSS media queries from this page for various devices, essentially I grabbed queries for a bunch of scenarios where a device is in portrait and set those all to be four columns. That seemed to work well for every simulated device in the Firefox responsive design mode. If you find a particular device doesn't behave, you should be able to find it on that page, grab the media query and just add it to all the others (they are separated by commas).

[Dochartaigh]

Okay I have tried out some tweaks here:
https://drive.google.com/file/d/1QcAHyH ... sp=sharing

Kez, this is absolutely beautiful! Works ON EVERYTHING!!! Every browser, every orientation, every device I have to test on!!! THANK YOU THANK YOU THANK YOU!!!

It looks so good I'm breaking it out into versions for people with other size Crosspoints (larger and smaller) so they have a version specifically for theirs!

I got a bunch of CSS media queries from this page for various devices, essentially I grabbed queries for a bunch of scenarios where a device is in portrait and set those all to be four columns. That seemed to work well for every simulated device in the Firefox responsive design mode. If you find a particular device doesn't behave, you should be able to find it on that page, grab the media query and just add it to all the others (they are separated by commas).

The last part of this code was absolutely beautiful:

Code: Select all

 and (orientation: portrait)
      {
        .flex-item {
          flex: 1 1 25%;
          height: 20%;
        }

It allowed me to easily tweak those percentages so these other smaller/larger versions I'm building shifted to the correct number of columns and rows when in Portrait orientation.

I read somewhere that some versions of Safari don't respond with the right height if you poll them immediately after the address bar appears, so I set a 500ms delay before acting on resize which may help with the issue you're having on the landscape iPhone 6.

I also put in a meta tag and disabled zooming. The zooming is disabled with user-scalable=no so if you want to restore zooming you can just remove that from the meta tag. This may stop your iPhone XR behaving weirdly in landscape mode.

Yeah, whatever iPhone is doing is definitely weird, and not viewable on non-iPhone devices or any screenshot/live-view website I try (which shows how your page will display in various devices and browsers).

The ONLY slight weirdness (and Kez, seriously, feel free to call it a day, this is working AWESOME now!!!) is that sometimes when I'm in Landscape and rotate it to Portrait it'll get 'stuck' with the bottom maybe 1/2 of the page being empty. Hit a button or refresh the page and it's perfect again - totally weird. Happened on a couple different browsers on iPhone XR and iPhone 6 Plus (Android seems fine).




So once again thank you SO much Kez! I'm going to finish those different size Crosspoint versions then either make a new topic with the finished FINAL version of Crosspoint RESPONSIVE Touchscreen-Control (CRT-C®), or maybe I'll just update the original topic I made on this a while ago.

[Kez]

Good stuff Glad it's working well!

For the last point, seems like it's not recalculating the height on orientation change. Changing orientation should trigger a resize event but you could try adding listeners for orientation change as well:

Code: Select all

window.addEventListener("orientationchange", resetHeight);
screen.orientation.addEventListener('change', resetHeight);

You can put those two lines right after resize listener in the script tags.

[Dochartaigh]

You can put those two lines right after resize listener in the script tags.

Have that in and I think it's working. - Thanks again. I broke out all my versions in the 4x different grid sizes, 2x color schemes, and edited the first post in this topic ^^^^^



I ran into a problem though: we know the Crosspoint will NOT serve .SVG files – they have to be hosted on another website. Not all people have access to webhosting so I tried the super popular Imgur image hosting and uploading .SVG's there isn't allowed (couldn't easily get Dropbox or Google Drive to work with html links either...). ...So I started to make a .PNG version (which work fine on the Crosspoint) of the design, but couldn't get it to work...

I started replacing ".svg" with ".png" in the code, but the images were stretched non-proportional. Tried switching the 100% width/height with 100vh/100vw and they're then proportional, but will not scale, and are in top left corner of each box... My old/original responsive version used .JPG's and there were scaling fine and centered so I must be missing something with the different .flex-container/item/box you're now using.

Here's the 20-Preset (20 boxes) version, with all .SVG's changed to .PNG's, and a folder with all the .PNG's. Can you please let me know which variable(s) I need to change and I'll change it out everywhere? Thank you for the 10th time... and I hope this is the last leg! (as I'm sure you're sick of me by now

[Joebot]

Personally I always just used a Pi to host the images as it seemed faster when I was using 20 something images at once. Not sure if a pi would have issues serving them or not but other than people paying for offsite dedicated hosting if they wanted to use SVG it would probably be the easiest solution. I do wonder why the Extron devices won’t serve the SVG files as they seem to be fine with anything else I’ve thrown their way. Great work both of you getting this working super happy to have a responsive page finally and can’t wait to get it setup on my end.

[charlizardon]

This looks incredible, amazing work Dochartaigh and Kez!

[Kez]

I started replacing ".svg" with ".png" in the code, but the images were stretched non-proportional. Tried switching the 100% width/height with 100vh/100vw and they're then proportional, but will not scale, and are in top left corner of each box... My old/original responsive version used .JPG's and there were scaling fine and centered so I must be missing something with the different .flex-container/item/box you're now using.

Hmm! Okay here's what I've done:

Add this to the CSS

Code: Select all

.flex-item .box {
  background-color: white;
  height: 100%;
  width: 100%;
  position: relative;
}  

.box img {
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

There should already be a block for ".flex-item .box" and you just need to add "position: relative" to that, then paste in the whole ".box img" block below it.

For the actual img tags, remove the width and height declarations and let the CSS handle it.

This works okay in my browser, hopefully shouldn't be using anything that older browsers struggle with.

[diamondtron]

Just set this up on my 168 VGA matrix with the IPL T S1 box, thank you, it’s really amazing! Is it possible to still connect to the Matrix Switcher Control Program when the serial port on the matrix is hooked up to the IPL box and not to the PC’s USB port? I’ve tried to enter the IP address in the “Comm Port Selection” field in the program but just get the “unable to communicate with the matrix” error.

[Dochartaigh]

Just set this up on my 168 VGA matrix with the IPL T S1 box, thank you, it’s really amazing! Is it possible to still connect to the Matrix Switcher Control Program when the serial port on the matrix is hooked up to the IPL box and not to the PC’s USB port? I’ve tried to enter the IP address in the “Comm Port Selection” field in the program but just get the “unable to communicate with the matrix” error.

I've never tried this, and would try to find out if you enter the Extron IP Link box's IP address, if that is the whole story or what. I say that because on my S2 and S4 boxes (with 2 and 4 RS232 ports) I have to add the "W01" in the IP address code to specify you're connecting to the 1st com/serial port on it (just as when I use my S4, with 4x RS232 ports, I have to select W02 for com port 2, W03 for com port 3, W04 for 4). So, just entering in the IP address might not be enough if it's configured that way. I also kinda highly doubt it's going to pass Windows program type commands through an IP Link box which is meant to ONLY use Extron SIS commands and other simple stuff like that through it... so it might not pass all these commands through the Windows program way.

BUT, something to possibly try is this: if you do something like 192.168.1.1 Port 2001, the "Port 2001" part would give me the 1st com port. Port 2002 would give me the 2nd – this is outlined in the manual of the 2+ port IP Link boxes so maybe that's something to try (I don't even know if the Windows Program lets you choose a port when you choose ethernet/IP address for the connection type or what...).

What are you trying to do anyway that requires the Windows program, when ALL commands are supposed to be enterable through tacking SIS code onto the end of a URL like we're doing with the "cmd=1." commands to load Preset #1 for example?

[Syntax]

Been sitting on the fence waiting for this to drop. Thanks for all the hard work to everyone involved.
Was super easy to setup following the detailed instructions.

Spoiler

[diamondtron]

BUT, something to possibly try is this: if you do something like 192.168.1.1 Port 2001, the "Port 2001" part would give me the 1st com port. Port 2002 would give me the 2nd – this is outlined in the manual of the 2+ port IP Link boxes so maybe that's something to try (I don't even know if the Windows Program lets you choose a port when you choose ethernet/IP address for the connection type or what...).

What are you trying to do anyway that requires the Windows program, when ALL commands are supposed to be enterable through tacking SIS code onto the end of a URL like we're doing with the "cmd=1." commands to load Preset #1 for example?

I ended up using a 3.5mm to serial adapter to connect the front port of the matrix switcher to the IP link box, and then used the serial connection on the back to connect to the USB port on my PC so that I can still use the Extron Control program. I usually just use CRT-C to switch between presets but every once in a while it’s helpful to have the Extron software’s UI to do certain commands

[Dochartaigh]

Been sitting on the fence waiting for this to drop. Thanks for all the hard work to everyone involved.
Was super easy to setup following the detailed instructions.

Nice to hear you're enjoying it! (and cool resizing vid!)

I ended up using a 3.5mm to serial adapter to connect the front port of the matrix switcher to the IP link box, and then used the serial connection on the back to connect to the USB port on my PC so that I can still use the Extron Control program. I usually just use CRT-C to switch between presets but every once in a while it’s helpful to have the Extron software’s UI to do certain commands

Glad you found a way to run both at once! Also, just like changing inputs on a Crosspoint is done by adding a little bit of Extron's SIS command code to the end of a URL link, whatever other things you're doing on the Extron App itself (like besides using FTP upload manager or whatnot) most likely has its own bit of code too – which you can experiment with seeing if you can add that to a cell on the CRT-C panel (I'm using this myself to control certain functions of an Extron RGB 203 Rxi and my TVOne Corio2 through my own CRT-C... still working on getting it perfect enough to release that added functionality to the public though

[coderkind]

Does anyone know the internal hard drive size of the Extron Crosspoint units (specifically the Ultra ones)? Considering you can upload HTML files to them, I assume they'd accept other (larger) files, like video files? Wondering how viable a hard drive replacement might be if storage space is an issue.

Also, I read in the thread that flex elements and svgs weren't served correctly? Do the Crosspoints have some sort of webserver therefore that validates HTML elements against an older spec therefore or something? If it's just serving files, it'd be up to the client/user's browsing device to decide how to render those files, but it sounds like the Crosspoint approves what type of files can be served?

[Dochartaigh]

I read in the thread that flex elements and svgs weren't served correctly? Do the Crosspoints have some sort of webserver therefore that validates HTML elements against an older spec therefore or something? If it's just serving files, it'd be up to the client/user's browsing device to decide how to render those files, but it sounds like the Crosspoint approves what type of files can be served?

Hello, if you look at the top 3 posts, and the files there, you'll see it's not using .SVG's anymore - that was just for all the older development posts further down in this topic. Flex code is working perfect.

.SVG's aren't used anymore because the Crosspoint won't serve .SVG's inside a webpage - we think possibly because it's lacking something like a htaccess file like an Apache server would have for instance (or something like that) laying out what file types it can use, and no way to add one we can find. We also tried to keep this as simple as possible so didn't want to go alternative routes (coding) to get it to serve them (especially since .PNG's are small enough in KB-size to load up a 32x grid of logos for a 4K screen with no pixelation).

Does anyone know the internal hard drive size of the Extron Crosspoint units (specifically the Ultra ones)? Considering you can upload HTML files to them, I assume they'd accept other (larger) files, like video files? Wondering how viable a hard drive replacement might be if storage space is an issue.

The Crosspoint Ultras, even my ~2005 one with a $43,000.00 MSRP, only have something measly like 1.5mb of space on their built-in web/FTP server – so no possibility to upgrade the storage easily (as it's most likely soldered chip and not a mechanical hard drive). In the HTML file(s) you host on the Crosspoint you can easily reference outside resources hosted on another website though (which I was doing for a time with the .SVG's, but deemed that added too much complexity to people new to HTML so switched back to .PNG's).

The BB/Black Button Crosspoints, which lack a built-in web server like the newer white-button Crosspoints, instead use an Extron IP Link box with web storage to control them, and those DO have a lot more storage space (comparatively). I want to say around 100mb on the lower end IP Links, maybe 1GB? on the higher end models). BUT, I'm pretty sure (not positive) I tried .SVG's on the IP Links as well and they STILL wouldn't serve them .SVG files – so anything besides plain old-school web stuff you might have some issues with if you try to store it on the device itself.

[coderkind]

Thanks for clarifying, Dochartaigh. I recently got hold of a white-button model but haven't hooked it up yet. When I do I'll check out CRT-C in full, thank you; was just initially trying to work out the general situation with the Extron models.

[coderkind]

Dochartaigh, would you happen to know what the latest firmware for the Crosspoint Ultra series was? I've just finished the first part of your instructions (spot-on and really helpful, thank you), and noticed my Crosspoint Ultra is on firmware 1.07. I think you need an Extron Insider account to download any updates though?

The HD space on mine is saying "Bytes Left: 851,968" by the way (no previous files uploaded, seemingly).

[Syntax]

I tried to download firmware for you but there was nothing on the page for the Crosspoint Ultra it seems, just the control program.

[coderkind]

I tried to download firmware for you but there was nothing on the page for the Crosspoint Ultra it seems, just the control program.

Thanks a lot for going to the trouble! No problem; I think I saw a notice somewhere that the 1.07 firmware was last updated 2003 or something, so wondered if there was a more recent firmware.

[coderkind]

A quick question on the SVG stuff; was it that the Extron wouldn't serve svgs, or wouldn't allow you to upload them? Because I see the web interface doesn't allow for selecting .svg files (think the JavaScript in the page prevents it), but I think there's other ways of uploading files to the Crosspoint (the Windows app)?