Use level highlighting in the CPC Browser

Here users can share their specific solutions, e.g. how they further process the data retrieved from Espacenet.
Any suggestions for additional developments and changes to be requested from the EPO should rather be added to the other categories.
Post Reply

jsfiddler
Posts: 3
Joined: Wed May 12, 2021 9:22 am

Use level highlighting in the CPC Browser

Post by jsfiddler » Wed Jun 12, 2024 10:17 am

Dear all,

I've created a bookmarklet that makes it easier to work with the CPC browser. Here's what it does:

Key Features:
  • Highlighting classes by Level:Easily identify all classes of the same level by giving them a distinct background color. Once you clicked the bookmarklet a new element appears on the page. This element allows you to choose the highlighting color and the level you want to highlight. When clicked on "Einfärben", the corresponding level gets a new background color.
Image
  • Customize Colors: If the level gets increased, it allows for highlighting multiple levels with different colors to make the hierachy even clearer.
  • Reset Colors: By clicking "Reset all", all colors will be removed.
Image
  • Copy class definitions: Temporarly disable the default behavior of the CPC browser (which jumps directly to the clicked class) so you can copy the class definition text. This can be activated by clicking the checkbox at the rightmost side. See the mouseover-text for a more detailed explanation

If you would like to try it out, here's the code for the bookmarklet:

Code: Select all

javascript:(function(){function CPCColorChanger(){ ICC=window.frames[1].document.createElement('input');       ICC.type='color';       ICC.style.marginRight='3px';       ICC.value=localStorage.getItem('lastCPCColor') ?? %27#ffe793';       ICN=window.frames[1].document.createElement('input');       ICN.type='number';       ICN.value=1;       ICN.style.width='45px';       ICN.style.height='25px';       ICN.style.marginRight='3px';       ICB=window.frames[1].document.createElement('input');       ICB.type='button';       ICB.value='Einfärben';       ICB.ID='ICB';       ICB.style.marginRight='3px';       ICB.style.padding='5px';       ICB.style.height='25px';       ICD=window.frames[1].document.createElement('input');       ICD.type='button';       ICD.value='Reset all';       ICD.ID='ICD';       ICD.style.marginRight='3px';       ICD.style.padding='5px';       ICD.style.height='25px';       CCN=window.frames[1].document.createElement('canvas');       CCN.ID='preSetColors';       CCN.setAttribute('style','marginRight:3px;       width:200;       height:200;       border:1px solid black;       ');       /*MODULE_BEGIN:lazymouse       Description: lazymouse,lazyMouseClick, _clickTargert & _toggleDefaultClickBehavior_Btn deaktivieren das typische Mausverhalten*/       _toggleDefaultClickBehavior_Btn=document.createElement('input');       _toggleDefaultClickBehavior_Btn.type='checkbox';       _toggleDefaultClickBehavior_Btn.title='State:CHECKED- classes can be copied. State:UNCHECKED - back to default behavior of espacenet';       colorChangeContainer=window.frames[1].document.createElement('div');       colorChangeContainer.appendChild(ICC);       colorChangeContainer.appendChild(ICN);       colorChangeContainer.appendChild(ICB);       colorChangeContainer.appendChild(ICD);       colorChangeContainer.appendChild(_toggleDefaultClickBehavior_Btn);       colorChangeContainer.setAttribute('style','box-shadow:1px 0px 2px 0px #000000;       display:inline-flex;       padding:3px');       window.frames[1].document.querySelector('#cpcbrowser > div.cpcbrowser-header > ul > li:nth-child(7)').insertAdjacentElement('afterend',colorChangeContainer);       ICB.addEventListener('click',changeLevelColor,0);       ICD.addEventListener('click',resetAllColors,0);              var lazymouse=function(){event.stopPropagation()};       lazyMouseClick='true';       _clickTarget=window.frames[1].document.querySelector('#cpcbrowser > div.cpcbrowser-results-holder.show-references.show-2000-series');       _toggleDefaultClickBehavior_Btn.addEventListener('change',function(){        if (lazyMouseClick) {_clickTarget.addEventListener('click',lazymouse,true);console.log('default clicking behavior DEACTIVATED')}        else {_clickTarget.removeEventListener('click',lazymouse,true); console.log('default clicking behavior ACTIVATED')};        lazyMouseClick=!lazyMouseClick});       /*MODULE_END:lazymouse*/              function changeLevelColor(){ _level=ICN.value;       _selector='tr.level-'+(_level-1+Number(window.frames[1].document.querySelectorAll('tr[class*=level]')[0].getAttribute('level')));       _rule=ICC.value;       _rule='background-color:'+_rule+'!important';       [...window.frames[1].document.querySelectorAll(%60${_selector}%60)].forEach(i=>i.setAttribute('style',%60${_rule}%60));       localStorage.setItem('lastCPCColor', ICC.value);       /*Remember last Color*/ localStorage.setItem('lastCPCSelector', _selector);       /*Remember last Selector*/ };       function resetAllColors(){ for (i=1;       i<8;       i++){ _selector='tr.level-'+(i-1+Number(window.frames[1].document.querySelectorAll('tr[class*=level]')[0].getAttribute('level')));       [...window.frames[1].document.querySelectorAll(_selector)].forEach(i=>i.setAttribute('style','background-color:white!important'));       };       };       };       CPCColorChanger();              }())
I hope you find this bookmarklet helpful!
Please let me know if you have any questions or suggestions.

Best regards,
Manuel


Post Reply